Add support for persistent superchats

src/components/Hyperchat.svelte

@@ -8,6 +8,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 +33,9 @@
     hoveredItem,
     port,
     selfChannelId,
-    alertDialog
+    alertDialog,
+    stickySuperchats,
+    currentProgress
   } from '../ts/storage';
 
   const welcome = { welcome: true, message: { messageId: 'welcome' } };
@@ -91,11 +95,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 +113,23 @@
     });
   };
 
+  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);
+    });
+    $stickySuperchats = [
+      ...discard,
+      ...$stickySuperchats
+    ];
+    return keep;
+  };
+
   const onDelete = (deletion: Ytc.ParsedDeleted) => {
     messageActions.some((action) => {
       if (isWelcome(action)) return false;
@@ -137,6 +158,9 @@
       case 'unpin':
         pinned = null;
         break;
+      case 'playerProgress':
+        $currentProgress = action.playerProgress;
+        break;
       case 'forceUpdate':
         messageActions = [...action.messages].filter(shouldShowMessage);
         if (action.showWelcome) {
@@ -251,7 +275,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);
@@ -265,6 +288,7 @@
 </script>
 
 <ReportBanDialog />
+<SuperchatViewDialog />
 
 <svelte:window on:resize={scrollToBottom} on:load={onLoad} />
 
@@ -296,11 +320,14 @@
       {/each}
     </div>
   </div>
-  {#if pinned}
-    <div class={pinnedClass}>
-      <PinnedMessage pinned={pinned} />
-    </div>
-  {/if}
+  <div class="absolute top-0 w-full">
+    <StickyBar />
+    {#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,27 +339,28 @@
 </div>
 
 <style>
-  .content {
-    scrollbar-width: thin;
-    scrollbar-color: #888 transparent;
+  .hover-highlight {
+    /* transition: 0.1s; */
+    background-color: transparent;
   }
-  .content::-webkit-scrollbar {
+  .hover-highlight:hover {
+    background-color: #80808040;
+  }
+  * :global(::-webkit-scrollbar) {
     width: 4px;
+    height: 4px;
   }
-  .content::-webkit-scrollbar-track {
+  * :global(::-webkit-scrollbar-track) {
     background: transparent;
   }
-  .content::-webkit-scrollbar-thumb {
+  * :global(::-webkit-scrollbar-thumb) {
     background: #888;
   }
-  .content::-webkit-scrollbar-thumb:hover {
+  * :global(::-webkit-scrollbar-thumb:hover) {
     background: #555;
   }
-  .hover-highlight {
-    /* transition: 0.1s; */
-    background-color: transparent;
-  }
-  .hover-highlight:hover {
-    background-color: #80808040;
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: #888 transparent;
   }
 </style>

src/components/Message.svelte

@@ -16,7 +16,7 @@
 
   export let message: Ytc.ParsedMessage;
   export let deleted: Chat.MessageDeletedObj | null = null;
-  export let messageId: Chat.MessageAction['message']['messageId'];
+  export let messageId: Chat.MessageAction['message']['messageId'] = '';
   export let forceDark = false;
   export let hideName = false;
 

src/components/PaidMessage.svelte

@@ -2,8 +2,11 @@
   import Message from './Message.svelte';
   import isDarkColor from 'is-dark-color';
   import { Theme } from '../ts/chat-constants';
+  import { focusedSuperchat } from '../ts/storage';
 
-  export let message: Ytc.ParsedMessage;
+  export let message: Ytc.ParsedTimedItem;
+  export let chip = false;
+  export let fillPortion = 1;
 
   let headerStyle = '';
 
@@ -20,16 +23,28 @@
     headerStyle = '';
   }
 
-  const classes = 'inline-flex flex-col rounded break-words overflow-hidden w-full';
+  const classes = `inline-flex flex-col rounded overflow-hidden ${chip ? 'w-fit whitespace-pre' : 'w-full break-words'}`;
 
   $: if (!paid) {
     console.error('Not a paid message', { message });
   }
 </script>
 
 {#if paid}
-  <div class={classes} style={backgroundColor + textColor}>
-    <div class="p-2" style={headerStyle}>
+  <div class={classes} style={(chip ? '' : backgroundColor) + textColor}>
+    <div
+      class="relative overflow-hidden p-2 {chip ? 'rounded-full cursor-pointer' : ''}"
+      style={headerStyle}
+      on:click={() => {
+        if (chip) $focusedSuperchat = message;
+      }}
+    >
+      {#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}
       <span class="mr-1 underline font-bold">{amount}</span>
       <span class="font-bold tracking-wide" style={nameColor}>
         {message.author.name}
@@ -41,7 +56,7 @@
           alt={message.superSticker.alt} />
       {/if}
     </div>
-    {#if message.message.length > 0}
+    {#if !chip && message.message.length > 0}
       <div class="p-2">
         <Message message={message} hideName forceTLColor={
           isDarkColor(`#${message.superChat?.headerTextColor}`) ? Theme.LIGHT : Theme.DARK

src/components/Settings.svelte

@@ -16,17 +16,11 @@
 </div>
 
 <style>
-  :global(::-webkit-scrollbar) {
-    width: 4px;
-    height: 4px;
-  }
-  :global(::-webkit-scrollbar-track) {
+  * :global(::-webkit-scrollbar-track) {
     background: transparent;
   }
-  :global(::-webkit-scrollbar-thumb) {
-    background: #888;
-  }
-  :global(::-webkit-scrollbar-thumb:hover) {
-    background: #555;
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: #888 transparent;
   }
 </style>

src/components/StickyBar.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { isDark, stickySuperchats, currentProgress } from '../ts/storage';
+  import PaidMessage from './PaidMessage.svelte';
+  let scrollableElem: HTMLDivElement;
+  $: if (scrollableElem) {
+    scrollableElem.addEventListener('wheel', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      scrollableElem.scrollBy(e.deltaY, 0);
+    });
+  }
+  $: $stickySuperchats = $stickySuperchats.filter(sc => {
+    return (sc.showtime / 1000 <= $currentProgress) && (sc.showtime / 1000 + sc.tickerDuration) >= $currentProgress;
+  });
+</script>
+
+{#if $stickySuperchats.length}
+  <div class="w-full overflow-y-hidden" style="overflow-x: overlay;" bind:this={scrollableElem}>
+    <div
+      class="flex items-center"
+      style="
+        height: calc(2.5rem + 4px);
+        width: fit-content;
+        min-width: 100%;
+        background-color: #{$isDark ? '202020' : 'ffffff'}
+      "
+    >
+      {#each $stickySuperchats as sc}
+        <span class="mx-0.5">
+          <PaidMessage message={sc} chip fillPortion={($currentProgress - sc.showtime / 1000) / sc.tickerDuration} />
+        </span>
+      {/each}
+    </div>
+  </div>
+{/if}

src/components/SuperchatViewDialog.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import {
+    focusedSuperchat
+  } from '../ts/storage';
+  import Dialog from './common/Dialog.svelte';
+  import PaidMessage from './PaidMessage.svelte';
+  import Button from 'smelte/src/components/Button';
+  $: sc = $focusedSuperchat as Ytc.ParsedTimedItem;
+</script>
+
+<Dialog active={Boolean(sc)} noCloseButton>
+  <PaidMessage message={sc}  />
+  <div slot="actions">
+    <Button on:click={() => {
+      $focusedSuperchat = null;
+    }} color="primary">Close</Button>
+  </div>
+</Dialog>

src/components/settings/InterfaceSettings.svelte

@@ -8,9 +8,10 @@
     showUserBadges,
     emojiRenderMode,
     autoLiveChat,
-    useSystemEmojis
+    useSystemEmojis,
+    isDark
   } from '../../ts/storage';
-  import { Theme, themeItems, emojiRenderItems } from '../../ts/chat-constants';
+  import { themeItems, emojiRenderItems } from '../../ts/chat-constants';
   import Card from '../common/Card.svelte';
   import Radio from '../common/RadioGroupStore.svelte';
   import Checkbox from '../common/CheckboxStore.svelte';
@@ -23,20 +24,7 @@
   );
 
   const darkStore = dark();
-  $: switch ($theme) {
-    case Theme.DARK:
-      darkStore.set(true);
-      break;
-    case Theme.LIGHT:
-      darkStore.set(false);
-      break;
-    case Theme.YOUTUBE:
-      if (window.location.search.includes('dark')) darkStore.set(true);
-      else darkStore.set(false);
-      break;
-    default:
-      break;
-  }
+  $: darkStore.set($isDark);
 
   $: console.debug({
     theme: $theme,

src/ts/chat-parser.ts

@@ -181,13 +181,35 @@ const parsePinnedMessageAction = (action: Ytc.AddPinnedAction): Ytc.ParsedPinned
   };
 };
 
-const processCommonAction = (action: Ytc.ReplayAction, isReplay: boolean, liveTimeoutOrReplayMs: number): Ytc.ParsedMessage | Ytc.ParsedMisc | undefined => {
+const parseTickerAction = (action: Ytc.AddTickerAction, isReplay: boolean, liveTimeoutOrReplayMs: number): Ytc.ParsedTicker | undefined => {
+  const baseRenderer = action.item.liveChatTickerPaidMessageItemRenderer;
+  if (!baseRenderer) return;
+  const parsedMessage = parseAddChatItemAction({
+    item: {
+      liveChatPaidMessageRenderer: baseRenderer.showItemEndpoint.showLiveChatItemEndpoint.renderer.liveChatPaidMessageRenderer
+    }
+  }, isReplay, liveTimeoutOrReplayMs);
+  if (!parsedMessage) return;
+  return {
+    type: 'ticker',
+    ...parsedMessage,
+    tickerDuration: baseRenderer.durationSec
+  };
+};
+
+const processCommonAction = (
+  action: Ytc.ReplayAction,
+  isReplay: boolean,
+  liveTimeoutOrReplayMs: number
+): Ytc.ParsedTimedItem | Ytc.ParsedMisc | undefined => {
   if (action.addChatItemAction) {
     return parseAddChatItemAction(action.addChatItemAction, isReplay, liveTimeoutOrReplayMs);
   } else if (action.addBannerToLiveChatCommand) {
     return parsePinnedMessageAction(action.addBannerToLiveChatCommand);
   } else if (action.removeBannerForLiveChatCommand) {
     return { type: 'unpin' } as const;
+  } else if (action.addLiveChatTickerItemAction) {
+    return parseTickerAction(action.addLiveChatTickerItemAction, isReplay, liveTimeoutOrReplayMs);
   }
 };
 
@@ -202,8 +224,8 @@ const processLiveAction = (action: Ytc.Action, isReplay: boolean, liveTimeoutMs:
   }
 };
 
-const sortAction = (action: Ytc.ParsedAction, messageArray: Ytc.ParsedMessage[], bonkArray: Ytc.ParsedBonk[], deleteArray: Ytc.ParsedDeleted[], miscArray: Ytc.ParsedMisc[]): void => {
-  if ('message' in action) {
+const sortAction = (action: Ytc.ParsedAction, messageArray: Ytc.ParsedTimedItem[], bonkArray: Ytc.ParsedBonk[], deleteArray: Ytc.ParsedDeleted[], miscArray: Ytc.ParsedMisc[]): void => {
+  if ('message' in action || 'tickerDuration' in action) {
     messageArray.push(action);
   } else if ('replacedMessage' in action && 'authorId' in action) {
     bonkArray.push(action);
@@ -233,7 +255,7 @@ export const parseChatResponse = (response: string, isReplay: boolean): Ytc.Pars
     return;
   }
 
-  const messageArray: Ytc.ParsedMessage[] = [];
+  const messageArray: Ytc.ParsedTimedItem[] = [];
   const bonkArray: Ytc.ParsedBonk[] = [];
   const deleteArray: Ytc.ParsedDeleted[] = [];
   const miscArray: Ytc.ParsedMisc[] = [];

src/ts/queue.ts

@@ -173,7 +173,9 @@ export function ytcQueue(isReplay = false): YtcQueue {
    * Normally called by the live polling interval that runs every 250 ms.
    */
   const updateLiveProgress = (): void => {
-    onVideoProgress(Date.now() / 1000);
+    const t = Date.now() / 1000;
+    onVideoProgress(t);
+    updatePlayerProgress(t);
   };
 
   /**