Add support for persistent superchats

src/components/Hyperchat.svelte

@@ -278,7 +278,7 @@
     $showProfileIcons, $showUsernames, $showTimestamps, $showUserBadges
   );
 
-  const containerClass = 'h-screen w-screen text-black dark:text-white dark:bg-black dark:bg-opacity-25';
+  const containerClass = 'h-screen w-screen text-black dark:text-white dark:bg-black dark:bg-opacity-25 flex flex-col';
 
   const isSuperchat = (action: Chat.MessageAction) => (action.message.superChat || action.message.superSticker);
   const isMembership = (action: Chat.MessageAction) => (action.message.membership);
@@ -294,16 +294,34 @@
     $stickySuperchats = [];
   };
   $: if (!$enableStickySuperchatBar) clearStickySuperchats();
+
+  let topBarSize = 0;
+  let topBar: HTMLDivElement | undefined;
+  const topBarResized = () => {
+    setTimeout(() => {
+      if (topBar) {
+        topBarSize = topBar.clientHeight;
+      }
+    }, 350);
+  };
+  $: $enableStickySuperchatBar, pinned, topBarResized();
 </script>
 
 <ReportBanDialog />
 <SuperchatViewDialog />
 
-<svelte:window on:resize={scrollToBottom} on:load={onLoad} />
+<svelte:window on:resize={() => {
+  scrollToBottom();
+  topBarResized();
+}} on:load={onLoad} />
 
 <div class={containerClass} style="font-size: 13px">
-  <div class="absolute w-full h-full flex justify-end flex-col">
+  {#if $enableStickySuperchatBar}
+    <StickyBar />
+  {/if}
+  <div class="w-full min-h-0 flex justify-end flex-col relative">
     <div bind:this={div} on:scroll={checkAtBottom} class="content overflow-y-scroll">
+      <div style="height: {topBarSize}px;" />
       {#each messageActions as action (action.message.messageId)}
         <div
           class="{isWelcome(action) ? '' : 'flex'} hover-highlight p-1.5 w-full block"
@@ -327,25 +345,22 @@
         </div>
       {/each}
     </div>
-  </div>
-  <div class="absolute top-0 w-full">
-    {#if $enableStickySuperchatBar}
-      <StickyBar />
-    {/if}
     {#if pinned}
-      <div class="mx-2 mt-2">
-        <PinnedMessage pinned={pinned} />
+      <div class="absolute top-0 w-full" bind:this={topBar}>
+        <div class="mx-1.5 mt-1.5">
+          <PinnedMessage pinned={pinned} on:resize={topBarResized} />
+        </div>
+      </div>
+    {/if}
+    {#if !isAtBottom}
+      <div
+        class="absolute left-1/2 transform -translate-x-1/2 bottom-0 pb-1"
+        transition:fade={{ duration: 150 }}
+      >
+        <Button icon="arrow_downward" on:click={scrollToBottom} small />
       </div>
     {/if}
   </div>
-  {#if !isAtBottom}
-    <div
-      class="absolute left-1/2 transform -translate-x-1/2 bottom-0 pb-1"
-      transition:fade={{ duration: 150 }}
-    >
-      <Button icon="arrow_downward" on:click={scrollToBottom} small />
-    </div>
-  {/if}
 </div>
 
 <style>

src/components/PinnedMessage.svelte

@@ -4,6 +4,7 @@
   import Tooltip from './common/Tooltip.svelte';
   import Icon from 'smelte/src/components/Icon';
   import { Theme } from '../ts/chat-constants';
+  import { createEventDispatcher } from 'svelte';
 
   export let pinned: Ytc.ParsedPinned;
 
@@ -18,6 +19,9 @@
     dismissed = false;
     shorten = false;
   }
+
+  const dispatch = createEventDispatcher();
+  $: dismissed, shorten, dispatch('resize');
 </script>
 
 {#if !dismissed}

src/components/StickyBar.svelte

@@ -2,6 +2,7 @@
   import dark from 'smelte/src/dark';
   import { stickySuperchats, currentProgress } from '../ts/storage';
   import TimedItem from './TimedItem.svelte';
+  import { onDestroy, onMount } from 'svelte';
 
   const isDark = dark();
   let scrollableElem: HTMLDivElement;
@@ -12,25 +13,46 @@
       scrollableElem.scrollBy(e.deltaY + e.deltaX, 0);
     });
   }
-  $: $stickySuperchats = $stickySuperchats.filter(sc => {
-    return $currentProgress === null ||
-      ((sc.showtime / 1000 - 5 <= $currentProgress) && (sc.showtime / 1000 + sc.tickerDuration) >= $currentProgress);
+
+  let interval: number | undefined;
+
+  onMount(() => {
+    interval = window.setInterval(() => {
+      $stickySuperchats = $stickySuperchats.filter(sc => {
+        return $currentProgress === null || (
+          (sc.showtime / 1000 - 5 <= $currentProgress) &&
+          (sc.showtime / 1000 + sc.tickerDuration) >= $currentProgress
+        );
+      });
+    }, 500);
+  });
+
+  onDestroy(() => {
+    if (interval) {
+      clearInterval(interval);
+    }
   });
+
+  $: open = Boolean($stickySuperchats.length);
 </script>
 
-{#if $stickySuperchats.length}
-  <div class="w-full overflow-y-hidden scroll-on-hover" bind:this={scrollableElem}>
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+{#if open}
+  <div
+    class="w-full overflow-y-hidden overflow-x-scroll scroll-on-hover items-start flex-none"
+    style="--scrollbar-bg-color: #{$isDark ? '202020' : 'ffffff'};"
+    bind:this={scrollableElem}
+  >
     <div
-      class="flex items-center"
+      class="flex items-center h-9 enlarge-on-ff"
       style="
-        height: 40px;
         width: fit-content;
         min-width: 100%;
-        background-color: #{$isDark ? '202020' : 'ffffff'}
+        background-color: var(--scrollbar-bg-color);
       "
     >
       {#each $stickySuperchats as sc (sc.messageId)}
-        <span class="mx-0.5">
+        <span class="mx-0.5 h-8 mt-1">
           <TimedItem
             item={sc}
             chip
@@ -43,10 +65,20 @@
 {/if}
 
 <style>
+  .scroll-on-hover::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+  }
+  .scroll-on-hover::-webkit-scrollbar-track {
+    background: var(--scrollbar-bg-color);
+  }
   .scroll-on-hover {
-    overflow-x: hidden;
+    scrollbar-color: #888 var(--scrollbar-bg-color);
   }
-  .scroll-on-hover:hover {
-    overflow-x: auto;
+  @supports (-moz-appearance:none) {
+    .enlarge-on-ff {
+      height: 2.5rem;
+      padding-top: 0.25rem;
+    }
   }
 </style>

src/components/changelog/Changelog.svelte

@@ -1,15 +1,25 @@
 <ul class="list-disc list-inside">
   <strong>On today's KFP menu:</strong>
   <li class="ml-3.5">
-    You can now block and report users!
-    It took months to reverse-engineer this feature. Enjoy!
+    Sticky superchats are finally supported!
+    Tickers for superchats and membership joins/milestones
+    will be visible at the top of the screen (like in default YTC).
+    The bar can also be disabled in the settings menu.
+  </li>
+  <li class="ml-3.5">
+    Superchats and membership messages now properly display
+    profile pictures if enabled.
+  </li>
+  <li class="ml-3.5">
+    Fixed issues with the settings menu not opening
+    properly on select devices
+  </li>
+  <li class="ml-3.5">
+    Fixed occasional freezing issues
   </li>
 </ul>
 <ul class="list-disc list-inside">
   <strong>What's still cooking in the usual room:</strong>
-  <li class="ml-3.5">
-    Sticky superchats
-  </li>
   <li class="ml-3.5">
     Updated screenshots, store listing, and trailer video
   </li>

src/manifest.json

@@ -3,7 +3,7 @@
   "name": "HyperChat by LiveTL",
   "homepage_url": "https://livetl.app/en/hyperchat/",
   "description": "YouTube chat, but it's fast and sleek!",
-  "version": "2.5.6",
+  "version": "2.6.0",
   "permissions": [
     "storage"
   ],

src/scripts/chat-background.ts

@@ -428,9 +428,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   } else if (request.type === 'createPopup') {
     chrome.windows.create({
       url: request.url,
-      type: 'popup',
-      height: 420,
-      width: 690
+      type: 'popup'
     }, () => {});
   }
 });