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>

src/app.pcss

@@ -0,0 +1,10 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    html,
+    body {
+        background-color: transparent;
+    }
+}

src/chats.ts

@@ -0,0 +1,4 @@
+import type { Comment } from '@onecomme.com/onesdk/types/Comment';
+import { writable } from 'svelte/store';
+
+export const chats = writable<Comment[]>([]);

src/main.ts

@@ -0,0 +1,25 @@
+import './app.pcss';
+import App from './App.svelte';
+import type { Comment } from '@onecomme.com/onesdk/types/Comment';
+import { chats } from './chats';
+
+if (import.meta.env.DEV) {
+    globalThis.OneSDK = (await import('@onecomme.com/onesdk')).default;
+}
+
+OneSDK.subscribe({
+    action: 'comments',
+    callback: ((res: Comment[]) => {
+        chats.set(res);
+    }) as any
+});
+OneSDK.setup({
+    commentLimit: 30
+});
+OneSDK.connect();
+
+const app = new App({
+    target: document.getElementById('app')!
+});
+
+export default app;

src/vite-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
+import { OneSDK } from '@onecomme.com/onesdk/OneSDK';
+
+declare global {
+    var OneSDK: OneSDK;
+}