init

src/App.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+    import { chats } from './lib/chats';
+    import { type TransitionConfig } from 'svelte/transition';
+    import { quadOut as easing } from 'svelte/easing';
+    import CommentRenderer from './components/CommentRenderer.svelte';
+
+    const child = new WeakMap<Node, number>();
+    let container: HTMLDivElement;
+    let queued = false;
+
+    function queue() {
+        if (queued) return;
+        function fn() {
+            queued = false;
+            if (!container) return;
+            let n = 0;
+            container.childNodes.forEach((node) => {
+                n += child.get(node) ?? 0;
+            });
+            container.scrollTo({ top: -n });
+        }
+        requestAnimationFrame(fn);
+    }
+
+    function scrollEffect(div: HTMLDivElement): TransitionConfig {
+        const rect = div.getBoundingClientRect();
+        child.set(div, rect.height);
+        return {
+            easing,
+            duration: 200,
+            tick(_, u) {
+                const rect = div.getBoundingClientRect();
+                child.set(div, u * rect.height);
+                queue();
+            }
+        };
+    }
+</script>
+
+<div
+    class="flex flex-col-reverse h-screen w-screen overflow-hidden px-3 py-2"
+    bind:this={container}
+>
+    {#each [...$chats].reverse() as chat (`${chat.service}/${chat.data.id}`)}
+        <div class="origin-top-left" in:scrollEffect>
+            <CommentRenderer comment={chat} />
+        </div>
+    {/each}
+</div>

src/app.pcss

@@ -0,0 +1,30 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    html,
+    body {
+        background-color: transparent;
+    }
+}
+
+@layer components {
+    .comment-container {
+        img {
+            @apply mx-0.5 h-6 w-6;
+            display: inline-block;
+        }
+    }
+
+    .bg-comment {
+        margin: 12px;
+        padding: 12px;
+        border-image-slice: 40 40 40 40 fill;
+        border-image-width: 20px 20px 20px 20px;
+        border-image-outset: 8px 8px 8px 8px;
+        border-image-repeat: stretch stretch;
+        border-image-source: url('./img/bg.png');
+        border-style: solid;
+    }
+}

src/components/BaseComment.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+    import type { Comment } from '@onecomme.com/onesdk/types/Comment';
+    import { authorColor } from '../lib/utils';
+
+    export let comment: Comment;
+
+    $: author = comment.data.displayName ?? comment.data.name;
+</script>
+
+<div class="bg-comment text-white">
+    <div class="flex flex-row items-center gap-1">
+        <div class="text-xs font-bold items-center {authorColor(comment)}">
+            {author}
+            {#each comment.data.badges as badge}
+                <img class="h-3 w-3 inline-block mx-0.5" src={badge.url} alt={badge.label} />
+            {/each}
+        </div>
+    </div>
+    <div class="comment-container mt-1">
+        {@html comment.data.comment}
+    </div>
+</div>

src/components/CommentRenderer.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import type { Comment } from '@onecomme.com/onesdk/types/Comment';
+    import BaseComment from './BaseComment.svelte';
+    import ReceivedMember from './youtube/ReceivedMember.svelte';
+    import Gift from './youtube/Gift.svelte';
+
+    export let comment: Comment;
+
+    function determineComponent(comment: Comment) {
+        if (comment.service === 'youtube') {
+            if (comment.data.hasGift) {
+                switch (comment.data.giftType) {
+                    case 'giftreceived':
+                        return ReceivedMember;
+                    default:
+                        return Gift;
+                }
+            }
+        }
+        return BaseComment;
+    }
+</script>
+
+<svelte:component this={determineComponent(comment)} {comment} />

src/components/youtube/Gift.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+    import type { YouTubeComment } from '@onecomme.com/onesdk/types/Comment';
+    import { authorColor } from '../../lib/utils';
+
+    export let comment: YouTubeComment;
+
+    $: author = comment.data.displayName ?? comment.data.name;
+</script>
+
+<div class="bg-comment text-white">
+    <div class="flex flex-row items-center gap-1">
+        <div class="text-xs font-bold items-center {authorColor(comment)}">
+            {author}
+            {#each comment.data.badges as badge}
+                <img class="h-3 w-3 inline-block mx-0.5" src={badge.url} alt={badge.label} />
+            {/each}
+        </div>
+        {#if comment.data.giftType === 'milestonechat'}
+            <div
+                class="text-xs font-bold ml-auto px-2 py-0.5 rounded-full shadow"
+                style="background-color: {comment.data.colors?.headerBackgroundColor};"
+            >
+                {comment.data.membership?.primary}
+            </div>
+        {:else if comment.data.paidText}
+            <div
+                class="text-xs font-bold ml-auto px-2 py-0.5 rounded-full shadow"
+                style="background-color: {comment.data.colors?.headerBackgroundColor};"
+            >
+                {comment.data.paidText}
+            </div>
+        {/if}
+    </div>
+    <div class="comment-container mt-1">
+        {@html comment.data.comment}
+    </div>
+</div>

src/components/youtube/ReceivedMember.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+    import type { YouTubeComment } from '@onecomme.com/onesdk/types/Comment';
+
+    export let comment: YouTubeComment;
+
+    $: name = comment.data.displayName ?? comment.data.name;
+</script>
+
+<div class="text-center text-white font-semibold shadow-slate-600 py-1 text-sm">
+    <span class="text-green-300">{name}</span>
+    {comment.data.comment.replace(comment.data.name, '')}
+</div>
+
+<style lang="postcss">
+    div {
+        text-shadow:
+            var(--tw-shadow-color) 2px 0px 0px,
+            var(--tw-shadow-color) 1.75517px 0.958851px 0px,
+            var(--tw-shadow-color) 1.0806px 1.68294px 0px,
+            var(--tw-shadow-color) 0.141474px 1.99499px 0px,
+            var(--tw-shadow-color) -0.832294px 1.81859px 0px,
+            var(--tw-shadow-color) -1.60229px 1.19694px 0px,
+            var(--tw-shadow-color) -1.97998px 0.28224px 0px,
+            var(--tw-shadow-color) -1.87291px -0.701566px 0px,
+            var(--tw-shadow-color) -1.30729px -1.5136px 0px,
+            var(--tw-shadow-color) -0.421592px -1.95506px 0px,
+            var(--tw-shadow-color) 0.567324px -1.91785px 0px,
+            var(--tw-shadow-color) 1.41734px -1.41108px 0px,
+            var(--tw-shadow-color) 1.92034px -0.558831px 0px;
+    }
+</style>

src/lib/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/lib/utils.ts

@@ -0,0 +1,10 @@
+import type { Comment } from '@onecomme.com/onesdk/types/Comment';
+
+export function authorColor(comment: Comment) {
+    if (comment.service === 'youtube') {
+        if (comment.data.isOwner) return 'text-yellow-200';
+        if (comment.data.isModerator) return 'text-blue-200';
+        if (comment.data.isMember) return 'text-green-200';
+    }
+    return 'text-zinc-200';
+}

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 './lib/chats';
+
+if (import.meta.env.DEV) {
+    globalThis.OneSDK = (await import('@onecomme.com/onesdk')).default;
+}
+
+OneSDK.subscribe({
+    action: 'comments',
+    callback: (res: Comment[]) => {
+        chats.set(res);
+    }
+});
+OneSDK.setup({
+    commentLimit: 30
+});
+OneSDK.connect();
+
+const app = new App({
+    target: document.getElementById('app')!
+});
+
+export default app;

src/preview/Preview.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+    import type { Comment } from '@onecomme.com/onesdk/types/Comment';
+    import CommentRenderer from '../components/CommentRenderer.svelte';
+    import data from './chats.json';
+    import { state } from './states';
+
+    $: filtered = ($state.giftOnly ? data.filter((c) => c.data.hasGift) : data) as Comment[];
+    $: chats = filtered.slice($state.skip, $state.skip + $state.commentLimit);
+</script>
+
+<div class="p-4">
+    <div class="bg-white sticky top-0 z-50 flex flex-col gap-2 py-2">
+        <div class="grid grid-cols-2 gap-2">
+            <label>
+                <input type="checkbox" bind:checked={$state.giftOnly} />
+                Gift Only
+            </label>
+            <label>
+                <input type="checkbox" bind:checked={$state.showJson} />
+                Show JSON
+            </label>
+        </div>
+        <label class="flex flex-row items-center gap-1">
+            Limit ({$state.commentLimit})
+            <input type="range" bind:value={$state.commentLimit} class="flex-grow" min="10" />
+        </label>
+        <label class="flex flex-row items-center gap-1">
+            Skip ({$state.skip})
+            <input
+                type="range"
+                bind:value={$state.skip}
+                class="flex-grow"
+                min={0}
+                max={filtered.length - $state.commentLimit}
+            />
+        </label>
+    </div>
+    <div class="flex flex-col py-3">
+        {#each chats as comment}
+            {#if $state.showJson}
+                <pre class="text-xs whitespace-pre-wrap">{JSON.stringify(comment, null, 2)}</pre>
+            {/if}
+            <CommentRenderer {comment} />
+        {/each}
+    </div>
+</div>

src/preview/main.ts

@@ -0,0 +1,8 @@
+import '../app.pcss';
+import Preview from './Preview.svelte';
+
+const app = new Preview({
+    target: document.getElementById('app')!
+});
+
+export default app;

src/preview/states.ts

@@ -0,0 +1,8 @@
+import { writable } from 'svelte/store';
+
+export const state = writable({
+    giftOnly: false,
+    commentLimit: 30,
+    skip: 0,
+    showJson: false
+});

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;
+}