99 lines
2.5 KiB
Svelte
99 lines
2.5 KiB
Svelte
<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-bold 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>
|