Un-absolute sticky bar

LiveTL · Jun 16, 2022 · ba7bc8d · ba7bc8d
1 parent 7048db6
commit ba7bc8d
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 23 deletions.
diff --git a/src/components/Hyperchat.svelte b/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);
@@ -316,7 +316,10 @@
 }} 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)}
@@ -342,25 +345,22 @@
         </div>
       {/each}
     </div>
-  </div>
-  <div class="absolute top-0 w-full" bind:this={topBar}>
-    {#if $enableStickySuperchatBar}
-      <StickyBar on:resize={topBarResized} />
-    {/if}
     {#if pinned}
-      <div class="mx-1.5 mt-1.5">
-        <PinnedMessage pinned={pinned} on:resize={topBarResized} />
+      <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>

diff --git a/src/components/StickyBar.svelte b/src/components/StickyBar.svelte
@@ -2,7 +2,7 @@
   import dark from 'smelte/src/dark';
   import { stickySuperchats, currentProgress } from '../ts/storage';
   import TimedItem from './TimedItem.svelte';
-  import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+  import { onDestroy, onMount } from 'svelte';
 
   const isDark = dark();
   let scrollableElem: HTMLDivElement;
@@ -17,14 +17,14 @@
   let interval: number | undefined;
 
   onMount(() => {
-    interval = setInterval(() => {
+    interval = window.setInterval(() => {
       $stickySuperchats = $stickySuperchats.filter(sc => {
         return $currentProgress === null || (
           (sc.showtime / 1000 - 5 <= $currentProgress) &&
           (sc.showtime / 1000 + sc.tickerDuration) >= $currentProgress
         );
       });
-    }, 500) as unknown as number;
+    }, 500);
   });
 
   onDestroy(() => {
@@ -34,14 +34,12 @@
   });
 
   $: open = Boolean($stickySuperchats.length);
-  const dispatch = createEventDispatcher();
-  $: open, dispatch('resize');
 </script>
 
 <!-- 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"
+    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}
   >