From 11da5bae3277a07ccb9d8787182f26afd63b280e Mon Sep 17 00:00:00 2001
From: Sam Leatherdale <SamLeatherdale@users.noreply.github.com>
Date: Mon, 3 Feb 2025 14:45:44 +1100
Subject: [PATCH] Add @sveltejs/svelte-virtual-list for ChannelGrid

---
 package-lock.json                 | 14 ++++++++++++++
 package.json                      |  5 +++--
 src/components/ChannelGrid.svelte |  7 ++++---
 src/components/ChannelItem.svelte | 16 ++++++++--------
 yarn.lock                         |  5 +++++
 5 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 44a7fc580..e5dd8770f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
         "@freearhey/search-js": "^0.1.1",
         "@sveltejs/adapter-static": "^2.0.1",
         "@sveltejs/kit": "^1.7.1",
+        "@sveltejs/svelte-virtual-list": "^3.0.1",
         "@tailwindcss/line-clamp": "^0.4.2",
         "@zerodevx/svelte-json-view": "^1.0.2",
         "autoprefixer": "^10.4.2",
@@ -570,6 +571,13 @@
         "vite": "^4.0.0"
       }
     },
+    "node_modules/@sveltejs/svelte-virtual-list": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@sveltejs/svelte-virtual-list/-/svelte-virtual-list-3.0.1.tgz",
+      "integrity": "sha512-aF9TptS7NKKS7/TqpsxQBSDJ9Q0XBYzBehCeIC5DzdMEgrJZpIYao9LRLnyyo6SVodpapm2B7FE/Lj+FSA5/SQ==",
+      "dev": true,
+      "license": "LIL"
+    },
     "node_modules/@sveltejs/vite-plugin-svelte": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.5.2.tgz",
@@ -2629,6 +2637,12 @@
         "undici": "~5.26.2"
       }
     },
+    "@sveltejs/svelte-virtual-list": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/@sveltejs/svelte-virtual-list/-/svelte-virtual-list-3.0.1.tgz",
+      "integrity": "sha512-aF9TptS7NKKS7/TqpsxQBSDJ9Q0XBYzBehCeIC5DzdMEgrJZpIYao9LRLnyyo6SVodpapm2B7FE/Lj+FSA5/SQ==",
+      "dev": true
+    },
     "@sveltejs/vite-plugin-svelte": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.5.2.tgz",
diff --git a/package.json b/package.json
index 131fed68e..7ef2ffd9a 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@freearhey/search-js": "^0.1.1",
     "@sveltejs/adapter-static": "^2.0.1",
     "@sveltejs/kit": "^1.7.1",
+    "@sveltejs/svelte-virtual-list": "^3.0.1",
     "@tailwindcss/line-clamp": "^0.4.2",
     "@zerodevx/svelte-json-view": "^1.0.2",
     "autoprefixer": "^10.4.2",
@@ -25,10 +26,10 @@
     "svelte": "^3.44.0",
     "svelte-simple-modal": "^1.3.1",
     "svelte-sitemap": "^2.6.0",
+    "sveltejs-tippy": "^3.0.0",
     "tailwind-scrollbar-hide": "^1.1.7",
     "tailwindcss": "^3.2.7",
     "transliteration": "^2.2.0",
-    "validator": "^13.11.0",
-    "sveltejs-tippy": "^3.0.0"
+    "validator": "^13.11.0"
   }
 }
diff --git a/src/components/ChannelGrid.svelte b/src/components/ChannelGrid.svelte
index 55d3e4893..c67917d44 100644
--- a/src/components/ChannelGrid.svelte
+++ b/src/components/ChannelGrid.svelte
@@ -1,4 +1,5 @@
 <script>
+  import VirtualList from '@sveltejs/svelte-virtual-list'
   import ChannelItem from './ChannelItem.svelte'
 
   export let channels = []
@@ -27,9 +28,9 @@
           </div>
         </div>
         <div class="bg-white dark:bg-gray-800">
-          {#each channels as channel (channel.id)}
-            <ChannelItem bind:channel />
-          {/each}
+          <VirtualList height="80vh" items={channels} let:item>
+            <ChannelItem channel={item} />
+          </VirtualList>
         </div>
       </div>
     </div>
diff --git a/src/components/ChannelItem.svelte b/src/components/ChannelItem.svelte
index 6e56a23b8..823912fc1 100644
--- a/src/components/ChannelItem.svelte
+++ b/src/components/ChannelItem.svelte
@@ -70,17 +70,17 @@
   $: isDisabled = channel.streams === 0
 </script>
 
-{#if $downloadMode}
-  <div
-    transition:fade={{ duration: 200 }}
-    class="w-14 h-14 shrink-0 flex items-center absolute -left-14"
-  >
-    <Checkbox selected={isSelected} disabled={isDisabled} on:change={onCheckboxChange} />
-  </div>
-{/if}
 <div
   class="border-b last:border-b-0 border-gray-200 dark:border-gray-700 hover:bg-gray-50 hover:dark:bg-gray-700 h-16 flex items-center relative"
 >
+  {#if $downloadMode}
+    <div
+      transition:fade={{ duration: 200 }}
+      class="w-14 h-14 shrink-0 flex items-center"
+    >
+      <Checkbox selected={isSelected} disabled={isDisabled} on:change={onCheckboxChange} />
+    </div>
+  {/if}
   <div class="px-4 sm:pl-10 sm:pr-16 w-36 sm:w-52 flex shrink-0 items-center justify-center">
     <div class="inline-flex items-center justify-center whitespace-nowrap overflow-hidden">
       {#if channel.logo}
diff --git a/yarn.lock b/yarn.lock
index 28676fbdf..24efd8e38 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -108,6 +108,11 @@
     tiny-glob "^0.2.9"
     undici "~5.26.2"
 
+"@sveltejs/svelte-virtual-list@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/@sveltejs/svelte-virtual-list/-/svelte-virtual-list-3.0.1.tgz"
+  integrity sha512-aF9TptS7NKKS7/TqpsxQBSDJ9Q0XBYzBehCeIC5DzdMEgrJZpIYao9LRLnyyo6SVodpapm2B7FE/Lj+FSA5/SQ==
+
 "@sveltejs/vite-plugin-svelte-inspector@^1.0.4":
   version "1.0.4"
   resolved "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-1.0.4.tgz"