init

src/components/RenderComment.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import { WrenchIcon } from '@lucide/svelte';
+	import type { Comment } from '@onecomme.com/onesdk/types/Comment';
+
+	let { chat }: { chat: Comment } = $props();
+
+	let author_color = $derived.by(() => {
+		if (chat.data.isOwner) return 'text-name-owner';
+
+		if (chat.service === 'youtube') {
+			if (chat.data.isModerator) return 'text-name-moderator';
+			if (chat.data.isMember) return 'text-name-member';
+		}
+		return 'text-name';
+	});
+
+	let layout = $derived(
+		chat.data.isOwner
+			? ['flex-row-reverse', 'pl-30', 'origin-bottom-right']
+			: ['flex-row', 'pr-30', 'origin-bottom-left']
+	);
+
+	let is_youtube_gift = $derived(chat.service === 'youtube' && chat.data.hasGift);
+	let gift_type = $derived(
+		chat.service === 'youtube' && chat.data.hasGift ? chat.data.giftType : undefined
+	);
+
+	let author_name = $derived(chat.data.displayName || chat.data.name);
+</script>
+
+{#if gift_type === 'giftreceived'}
+	<div class="text-14 text-hint text-center py-5 origin-bottom scale-enter">
+		{chat.data.comment}
+	</div>
+{:else}
+	<div class={[layout, 'flex gap-10 scale-enter py-10']}>
+		<img src={chat.data.originalProfileImage} class="size-40 rounded-full" alt={author_name} />
+		<div
+			class={[
+				'flex flex-col gap-5 grow w-0',
+				chat.data.isOwner ? 'items-end' : 'items-start'
+			]}
+		>
+			<div
+				class={[
+					'text-ellipsis whitespace-nowrap px-5 gap-5 flex flex-row items-center font-semibold text-12 max-w-full',
+					author_color,
+					chat.data.isOwner ? 'justify-end' : 'justify-start'
+				]}
+			>
+				<span class="text-ellipsis whitespace-nowrap">{author_name}</span>
+				{#if chat.service === 'youtube' && chat.data.isModerator}
+					<WrenchIcon class="size-12 min-w-14 min-h-14" />
+				{/if}
+			</div>
+			{#if is_youtube_gift && gift_type === 'supersticker'}
+				<div class="supersticker">
+					{@html chat.data.comment}
+				</div>
+			{:else}
+				<div
+					class={[
+						'px-15 py-10 text-chat-text bubble rounded-15 text-16',
+						chat.data.isOwner ? 'bg-chat-bubble-owner' : 'bg-chat-bubble'
+					]}
+				>
+					{@html chat.data.comment}
+				</div>
+			{/if}
+		</div>
+	</div>
+{/if}
+
+<style>
+	@keyframes scale {
+		0% {
+			transform: scale(0);
+		}
+		100% {
+			transform: scale(1);
+		}
+	}
+
+	.scale-enter {
+		animation: scale 0.2s ease-out;
+	}
+
+	.bubble :global(img) {
+		display: inline-block;
+		width: calc(16 * var(--spacing));
+		height: calc(16 * var(--spacing));
+	}
+
+	.supersticker :global(img) {
+		width: calc(72 * var(--spacing));
+		height: calc(72 * var(--spacing));
+	}
+</style>