Add support for persistent superchats

src/components/Hyperchat.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import '../stylesheets/scrollbar.css';
   import { onDestroy, afterUpdate, tick } from 'svelte';
   import { fade } from 'svelte/transition';
   import dark from 'smelte/src/dark';
@@ -8,6 +9,8 @@
   import PaidMessage from './PaidMessage.svelte';
   import MembershipItem from './MembershipItem.svelte';
   import ReportBanDialog from './ReportBanDialog.svelte';
+  import SuperchatViewDialog from './SuperchatViewDialog.svelte';
+  import StickyBar from './StickyBar.svelte';
   import {
     paramsTabId,
     paramsFrameId,
@@ -31,7 +34,10 @@
     hoveredItem,
     port,
     selfChannelId,
-    alertDialog
+    alertDialog,
+    stickySuperchats,
+    currentProgress,
+    enableStickySuperchatBar
   } from '../ts/storage';
 
   const welcome = { welcome: true, message: { messageId: 'welcome' } };
@@ -91,11 +97,11 @@
     if (!isAtBottom) return;
     // On replays' initial data, only show messages with negative timestamp
     if (isInitial && isReplay) {
-      messageActions.push(...messagesAction.messages.filter(
+      messageActions.push(...filterTickers(messagesAction.messages).filter(
         (a) => a.message.timestamp.startsWith('-') && shouldShowMessage(a)
       ));
     } else {
-      messageActions.push(...messagesAction.messages.filter(shouldShowMessage));
+      messageActions.push(...filterTickers(messagesAction.messages).filter(shouldShowMessage));
     }
     if (!isInitial) checkTruncateMessages();
   };
@@ -109,6 +115,25 @@
     });
   };
 
+  const filterTickers = (items: Chat.MessageAction[]): Chat.MessageAction[] => {
+    const keep: Chat.MessageAction[] = [];
+    const discard: Ytc.ParsedTicker[] = [];
+    items.forEach(item => {
+      if (
+        'tickerDuration' in item.message &&
+        !$stickySuperchats.some(sc => sc.messageId === item.message.messageId)
+      ) discard.push(item.message);
+      else keep.push(item);
+    });
+    if ($enableStickySuperchatBar && discard.length) {
+      $stickySuperchats = [
+        ...discard,
+        ...$stickySuperchats
+      ];
+    }
+    return keep;
+  };
+
   const onDelete = (deletion: Ytc.ParsedDeleted) => {
     messageActions.some((action) => {
       if (isWelcome(action)) return false;
@@ -137,6 +162,9 @@
       case 'unpin':
         pinned = null;
         break;
+      case 'playerProgress':
+        $currentProgress = action.playerProgress;
+        break;
       case 'forceUpdate':
         messageActions = [...action.messages].filter(shouldShowMessage);
         if (action.showWelcome) {
@@ -251,7 +279,6 @@
   );
 
   const containerClass = 'h-screen w-screen text-black dark:text-white dark:bg-black dark:bg-opacity-25';
-  const pinnedClass = 'absolute top-2 inset-x-2';
 
   const isSuperchat = (action: Chat.MessageAction) => (action.message.superChat || action.message.superSticker);
   const isMembership = (action: Chat.MessageAction) => (action.message.membership);
@@ -262,9 +289,15 @@
     if (action == null) $hoveredItem = null;
     else if (!('welcome' in action)) $hoveredItem = action.message.messageId;
   };
+
+  const clearStickySuperchats = () => {
+    $stickySuperchats = [];
+  };
+  $: if (!$enableStickySuperchatBar) clearStickySuperchats();
 </script>
 
 <ReportBanDialog />
+<SuperchatViewDialog />
 
 <svelte:window on:resize={scrollToBottom} on:load={onLoad} />
 
@@ -289,18 +322,22 @@
             <Message
               message={action.message}
               deleted={action.deleted}
-              messageId={action.message.messageId}
             />
           {/if}
         </div>
       {/each}
     </div>
   </div>
-  {#if pinned}
-    <div class={pinnedClass}>
-      <PinnedMessage pinned={pinned} />
-    </div>
-  {/if}
+  <div class="absolute top-0 w-full">
+    {#if $enableStickySuperchatBar}
+      <StickyBar />
+    {/if}
+    {#if pinned}
+      <div class="mx-2 mt-2">
+        <PinnedMessage pinned={pinned} />
+      </div>
+    {/if}
+  </div>
   {#if !isAtBottom}
     <div
       class="absolute left-1/2 transform -translate-x-1/2 bottom-0 pb-1"
@@ -312,22 +349,6 @@
 </div>
 
 <style>
-  .content {
-    scrollbar-width: thin;
-    scrollbar-color: #888 transparent;
-  }
-  .content::-webkit-scrollbar {
-    width: 4px;
-  }
-  .content::-webkit-scrollbar-track {
-    background: transparent;
-  }
-  .content::-webkit-scrollbar-thumb {
-    background: #888;
-  }
-  .content::-webkit-scrollbar-thumb:hover {
-    background: #555;
-  }
   .hover-highlight {
     /* transition: 0.1s; */
     background-color: transparent;

src/components/MembershipItem.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
   import Message from './Message.svelte';
   import MessageRun from './MessageRuns.svelte';
-  import { showProfileIcons } from '../ts/storage';
+  import { focusedSuperchat, showProfileIcons } from '../ts/storage';
 
-  export let message: Ytc.ParsedMessage;
+  export let message: Ytc.ParsedTimedItem;
+  export let chip = false;
+  export let detailText: string = '';
+  export let fillPortion = 1;
 
-  const classes = 'inline-flex flex-col rounded break-words overflow-hidden w-full text-white';
+  const classes = `inline-flex flex-col rounded text-white ${chip ? 'w-fit whitespace-nowrap' : 'w-full break-words'}`;
 
   $: membership = message.membership;
   $: if (!membership) {
@@ -15,30 +18,44 @@
 </script>
 
 {#if membership}
-  <div class={classes} style="background-color: #0f9d58;">
+  <div class={classes} style={chip ? '' : 'background-color: #0f9d58;'}>
     <div
-      class="p-2"
-      style="{isMilestoneChat ? 'background-color: #107516;' : ''}"
+      class="relative {chip ? 'rounded-full flex items-center cursor-pointer w-max p-1.5 overflow-hidden' : 'rounded p-2'}"
+      style="background-color: #{isMilestoneChat ? '107516' : '0f9d58'};"
+      on:click={() => {
+        if (chip) $focusedSuperchat = message;
+      }}
     >
       {#if $showProfileIcons}
         <img
-          class="h-5 w-5 inline align-middle rounded-full flex-none"
+          class="h-5 w-5 inline align-middle rounded-full flex-none mr-1"
           src={message.author.profileIcon.src}
           alt={message.author.profileIcon.alt}
         />
       {/if}
-      <span class="font-bold tracking-wide align-middle mr-3">
-        {message.author.name}
-      </span>
-      {#if membership.headerPrimaryText.length > 0}
-        <MessageRun
-          class="font-medium mr-3"
-          runs={membership.headerPrimaryText}
-        />
+      {#if chip}
+        <div class="absolute top-0 right-0 h-full" style="
+          background-color: rgba(0, 0, 0, 0.1);
+          width: {Math.round(fillPortion * 100)}%;
+        " />
+      {/if}
+      {#if !chip}
+        <span class="font-bold tracking-wide mr-3 align-middle">
+          {message.author.name}
+        </span>
+        {#if membership.headerPrimaryText.length > 0}
+          <MessageRun
+            class="font-medium mr-3 align-middle"
+            runs={membership.headerPrimaryText}
+          />
+        {/if}
+        <MessageRun runs={membership.headerSubtext} />
+      {/if}
+      {#if chip && detailText}
+        <span class="font-bold align-middle">{detailText}</span>
       {/if}
-      <MessageRun runs={membership.headerSubtext} />
     </div>
-    {#if isMilestoneChat}
+    {#if !chip && isMilestoneChat}
       <div class="p-2">
         <Message message={message} hideName />
       </div>

src/components/Message.svelte

@@ -16,7 +16,6 @@
 
   export let message: Ytc.ParsedMessage;
   export let deleted: Chat.MessageDeletedObj | null = null;
-  export let messageId: Chat.MessageAction['message']['messageId'];
   export let forceDark = false;
   export let hideName = false;
 
@@ -131,7 +130,7 @@
     <MessageRun runs={message.message} {forceDark} deleted={deleted != null} {forceTLColor} />
   </div>
   {#if message.author.id !== $selfChannelId}
-    <Menu items={menuItems} visible={$hoveredItem === messageId} class="mr-2 ml-auto context-menu">
+    <Menu items={menuItems} visible={$hoveredItem === message.messageId} class="mr-2 ml-auto context-menu">
       <Icon slot="activator" style="font-size: 1.5em;">more_vert</Icon>
     </Menu>
   {/if}

src/components/MessageRuns.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-  import type { Theme } from '../ts/chat-constants';
+  import { Theme } from '../ts/chat-constants';
 
   import TranslatedMessage from './TranslatedMessage.svelte';
   import {
     emojiRenderMode, useSystemEmojis
   } from '../ts/storage';
   import { YoutubeEmojiRenderMode } from '../ts/chat-constants';
 
-  export let runs: Ytc.ParsedRun[];
+  export let runs: Ytc.ParsedRun[] | null;
   export let forceDark = false;
   export let deleted = false;
-  export let forceTLColor: Theme;
+  export let forceTLColor: Theme = Theme.YOUTUBE;
 
   let deletedClass = '';
 
@@ -23,39 +23,53 @@
   }
 </script>
 
-<span
-  class="cursor-auto align-middle {deletedClass} {$$props.class ?? ''}"
-  style="word-break: break-word"
->
-  {#each runs as run}
-    {#if run.type === 'text'}
-      {#if deleted}
-        <span>{run.text}</span>
-      {:else}
-        <TranslatedMessage text={run.text} {forceTLColor} />
-      {/if}
-    {:else if run.type === 'link'}
-      <a
-        class="inline underline align-middle"
-        href={run.url}
-        target="_blank"
-      >
-        {run.text}
-      </a>
-    {:else if run.type === 'emoji' && $emojiRenderMode !== YoutubeEmojiRenderMode.HIDE_ALL}
-      {#if run.standardEmoji && $useSystemEmojis}
-        <span
-          class="cursor-auto align-middle text-base"
+<!--
+  The `runs` prop is supposed to always be an array,
+  but somewhere, somehow, sometimes, YouTube forgets
+  to provide us an array.
+
+  This is sorta cheap, but the easiest solution is
+  to safeguard a null prop value with a simple check.
+
+  If anyone wants to find a more elegant solution,
+  see this bug report:
+  https://discord.com/channels/780938154437640232/788107573755904070/983867679968477215
+-->
+{#if runs?.length}
+  <span
+    class="cursor-auto align-middle {deletedClass} {$$props.class ?? ''}"
+    style="word-break: break-word"
+  >
+    {#each runs as run}
+      {#if run.type === 'text'}
+        {#if deleted}
+          <span>{run.text}</span>
+        {:else}
+          <TranslatedMessage text={run.text} {forceTLColor} />
+        {/if}
+      {:else if run.type === 'link'}
+        <a
+          class="inline underline align-middle"
+          href={run.url}
+          target="_blank"
         >
-          {run.alt}
-        </span>
-      {:else if run.src}
-        <img
-          class="h-5 w-5 inline mx-0.5 align-middle"
-          src={run.src}
-          alt={run.alt}
-        />
+          {run.text}
+        </a>
+      {:else if run.type === 'emoji' && $emojiRenderMode !== YoutubeEmojiRenderMode.HIDE_ALL}
+        {#if run.standardEmoji && $useSystemEmojis}
+          <span
+            class="cursor-auto align-middle text-base"
+          >
+            {run.alt}
+          </span>
+        {:else if run.src}
+          <img
+            class="h-5 w-5 inline mx-0.5 align-middle"
+            src={run.src}
+            alt={run.alt}
+          />
+        {/if}
       {/if}
-    {/if}
-  {/each}
-</span>
+    {/each}
+  </span>
+{/if}