init

src/App.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+    import type { Comment } from '@onecomme.com/onesdk/types/Comment';
+    import { chats } from './chats';
+    import { scale } from 'svelte/transition';
+
+    function authorColor(comment: Comment) {
+        if (comment.service === 'youtube') {
+            if (comment.data.isModerator) return 'text-blue-300';
+            if (comment.data.isMember) return 'text-green-300';
+        }
+        return 'text-zinc-200';
+    }
+</script>
+
+<div class="main flex flex-col-reverse gap-2 h-screen w-screen overflow-hidden">
+    {#each [...$chats].reverse() as chat (`${chat.service}/${chat.data.id}`)}
+        {@const author = chat.data.displayName ?? chat.data.name}
+        <div
+            class="flex flex-row gap-4 p-2 box-border origin-top-left"
+            in:scale={{ duration: 200 }}
+        >
+            <div class="w-10 min-w-10 relative">
+                <img
+                    src={chat.data.originalProfileImage}
+                    alt={author}
+                    class="w-10 h-10 rounded-full absolute -top-3"
+                />
+            </div>
+            <div
+                class="bubble relative flex-grow flex flex-col gap-1 bg-slate-700 bg-opacity-80 text-gray-50 px-4 py-2 rounded-b-xl rounded-tr-xl"
+            >
+                <div class="text-xs font-bold gap-0.5 items-center {authorColor(chat)}">
+                    {author}
+                    {#each chat.data.badges as badge}
+                        <img
+                            class="h-3 w-3 inline-block mx-0.5"
+                            src={badge.url}
+                            alt={badge.label}
+                        />
+                    {/each}
+                </div>
+                <div class="comment-container">
+                    {@html chat.data.comment}
+                </div>
+            </div>
+        </div>
+    {/each}
+</div>
+
+<style lang="postcss">
+    .comment-container {
+        :global(img) {
+            @apply mx-0.5 h-6 w-6;
+            display: inline-block;
+        }
+    }
+    .bubble {
+        &::before {
+            @apply -left-2 top-0 block h-2 w-2 bg-slate-700 bg-opacity-80;
+            content: ' ';
+            position: absolute;
+            mask-image: linear-gradient(
+                45deg,
+                rgba(0, 0, 0, 0) 0%,
+                rgba(0, 0, 0, 0) 50%,
+                rgba(0, 0, 0, 1) 50%,
+                rgba(0, 0, 0, 1) 100%
+            );
+        }
+    }
+    .main {
+        mask-image: linear-gradient(
+            180deg,
+            rgba(0, 0, 0, 0) 0%,
+            rgba(0, 0, 0, 1) 50%,
+            rgba(0, 0, 0, 1) 100%
+        );
+    }
+</style>