From dd35a97be5cda796394e58cc558f0dad5c19658a Mon Sep 17 00:00:00 2001
From: Dan Niles <56271899+dan-niles@users.noreply.github.com>
Date: Thu, 8 Aug 2024 18:25:26 +0530
Subject: [PATCH 1/3] Implement infinite scroll for video/playlist lists

---
 .../components/channel/tabs/PlaylistsTab.vue  | 24 +++++----
 .../src/components/channel/tabs/VideosTab.vue | 22 +++++---
 .../src/components/playlist/PlaylistGrid.vue  | 51 ++++++++++++++-----
 .../playlist/panel/PlaylistPanel.vue          | 50 ++++++++++++++----
 zimui/src/components/video/VideoGrid.vue      | 51 ++++++++++++++-----
 zimui/src/views/PlaylistView.vue              |  7 ++-
 6 files changed, 149 insertions(+), 56 deletions(-)

diff --git a/zimui/src/components/channel/tabs/PlaylistsTab.vue b/zimui/src/components/channel/tabs/PlaylistsTab.vue
index 70cb4a7e..e67a110e 100644
--- a/zimui/src/components/channel/tabs/PlaylistsTab.vue
+++ b/zimui/src/components/channel/tabs/PlaylistsTab.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted, watch, computed } from 'vue'
 
 import { useMainStore } from '@/stores/main'
 import type { PlaylistPreview } from '@/types/Playlists'
@@ -8,7 +8,8 @@ import PlaylistGrid from '@/components/playlist/PlaylistGrid.vue'
 import TabInfo from '@/components/common/ViewInfo.vue'
 
 const main = useMainStore()
-const playlists = ref<PlaylistPreview[]>()
+const playlists = ref<PlaylistPreview[]>([])
+const isLoading = computed(() => playlists.value.length === 0)
 
 // Watch for changes in the main playlist
 watch(
@@ -39,11 +40,16 @@ onMounted(() => {
 </script>
 
 <template>
-  <tab-info
-    :title="'Playlists from ' + main.channel?.title || ''"
-    :count="playlists?.length || 0"
-    :count-text="playlists?.length === 1 ? 'playlist' : 'playlists'"
-    icon="mdi-playlist-play"
-  />
-  <playlist-grid v-if="playlists" :playlists="playlists" />
+  <div v-if="isLoading" class="container mt-8 d-flex justify-center">
+    <v-progress-circular class="d-inline" indeterminate></v-progress-circular>
+  </div>
+  <div v-else>
+    <tab-info
+      :title="'Playlists from ' + main.channel?.title || ''"
+      :count="playlists?.length || 0"
+      :count-text="playlists?.length === 1 ? 'playlist' : 'playlists'"
+      icon="mdi-playlist-play"
+    />
+    <playlist-grid v-if="playlists" :playlists="playlists" />
+  </div>
 </template>
diff --git a/zimui/src/components/channel/tabs/VideosTab.vue b/zimui/src/components/channel/tabs/VideosTab.vue
index 71533f98..26e25174 100644
--- a/zimui/src/components/channel/tabs/VideosTab.vue
+++ b/zimui/src/components/channel/tabs/VideosTab.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted, watch, computed } from 'vue'
 
 import { useMainStore } from '@/stores/main'
 import type { VideoPreview } from '@/types/Videos'
@@ -11,6 +11,7 @@ import type { Playlist } from '@/types/Playlists'
 const main = useMainStore()
 const videos = ref<VideoPreview[]>([])
 const playlist = ref<Playlist>()
+const isLoading = computed(() => videos.value.length === 0)
 
 // Watch for changes in the main playlist
 watch(
@@ -42,11 +43,16 @@ onMounted(() => {
 </script>
 
 <template>
-  <tab-info
-    :title="playlist?.title || 'Main Playlist'"
-    :count="playlist?.videosCount || 0"
-    :count-text="playlist?.videos.length === 1 ? 'video' : 'videos'"
-    icon="mdi-video-outline"
-  />
-  <video-grid v-if="videos" :videos="videos" :playlist-slug="main.channel?.mainPlaylist" />
+  <div v-if="isLoading" class="container mt-8 d-flex justify-center">
+    <v-progress-circular class="d-inline" indeterminate></v-progress-circular>
+  </div>
+  <div v-else>
+    <tab-info
+      :title="playlist?.title || 'Main Playlist'"
+      :count="playlist?.videosCount || 0"
+      :count-text="playlist?.videos.length === 1 ? 'video' : 'videos'"
+      icon="mdi-video-outline"
+    />
+    <video-grid v-if="videos" :videos="videos" :playlist-slug="main.channel?.mainPlaylist" />
+  </div>
 </template>
diff --git a/zimui/src/components/playlist/PlaylistGrid.vue b/zimui/src/components/playlist/PlaylistGrid.vue
index 6f909ac4..ad0619fb 100644
--- a/zimui/src/components/playlist/PlaylistGrid.vue
+++ b/zimui/src/components/playlist/PlaylistGrid.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { useDisplay } from 'vuetify'
 import type { PlaylistPreview } from '@/types/Playlists'
 import PlaylistCard from './PlaylistCard.vue'
@@ -8,23 +9,45 @@ const { mdAndDown } = useDisplay()
 const props = defineProps<{
   playlists: PlaylistPreview[]
 }>()
+
+const items = computed(() => props.playlists.slice(0, 48))
+
+const loadMoreItems = async () => {
+  return new Promise<PlaylistPreview[]>((resolve) => {
+    setTimeout(() => {
+      resolve(props.playlists.slice(items.value.length, items.value.length + 12))
+    }, 100)
+  })
+}
+
+const load = async ({ done }: { done: (status: 'ok' | 'empty') => void }) => {
+  const res = await loadMoreItems()
+  items.value.push(...res)
+  if (items.value[items.value.length - 1] == props.playlists[props.playlists.length - 1]) {
+    done('empty')
+    return
+  }
+  done('ok')
+}
 </script>
 
 <template>
   <v-container class="px-1" :fluid="mdAndDown">
-    <v-row dense>
-      <v-col
-        v-for="playlist in props.playlists"
-        :key="playlist.id"
-        cols="12"
-        md="4"
-        lg="3"
-        xl="2"
-        xxl="1"
-        class="mb-2 mb-md-6"
-      >
-        <playlist-card :playlist="playlist" />
-      </v-col>
-    </v-row>
+    <v-infinite-scroll class="h-full overflow-hidden" :items="items" empty-text="" @load="load">
+      <v-row dense>
+        <v-col
+          v-for="playlist in items"
+          :key="playlist.id"
+          cols="12"
+          md="4"
+          lg="3"
+          xl="2"
+          xxl="1"
+          class="mb-2 mb-md-6"
+        >
+          <playlist-card :playlist="playlist" />
+        </v-col>
+      </v-row>
+    </v-infinite-scroll>
   </v-container>
 </template>
diff --git a/zimui/src/components/playlist/panel/PlaylistPanel.vue b/zimui/src/components/playlist/panel/PlaylistPanel.vue
index 0973d147..c8b5aa75 100644
--- a/zimui/src/components/playlist/panel/PlaylistPanel.vue
+++ b/zimui/src/components/playlist/panel/PlaylistPanel.vue
@@ -6,6 +6,7 @@ import type { Playlist } from '@/types/Playlists'
 import { LoopOptions } from '@/types/Playlists'
 
 import PlaylistPanelItem from './PlaylistPanelItem.vue'
+import type { VideoPreview } from '@/types/Videos'
 
 const { smAndDown } = useDisplay()
 
@@ -19,6 +20,8 @@ const props = defineProps<{
   shuffle: boolean
 }>()
 
+const isLoading = computed(() => props.playlist.videos.length === 0)
+
 const windowHeight = ref(
   window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
 )
@@ -51,10 +54,35 @@ const scrollToCurrentVideo = () => {
 }
 
 const emit = defineEmits(['shuffle', 'loop', 'hide-panel'])
+
+const items = computed(() => props.playlist.videos.slice(0, 48))
+
+const loadMoreItems = async () => {
+  return new Promise<VideoPreview[]>((resolve) => {
+    setTimeout(() => {
+      resolve(props.playlist.videos.slice(items.value.length, items.value.length + 12))
+    }, 100)
+  })
+}
+
+const load = async ({ done }: { done: (status: 'ok' | 'empty') => void }) => {
+  const res = await loadMoreItems()
+  items.value.push(...res)
+  if (
+    items.value[items.value.length - 1] == props.playlist.videos[props.playlist.videos.length - 1]
+  ) {
+    done('empty')
+    return
+  }
+  done('ok')
+}
 </script>
 
 <template>
-  <v-card class="border-thin rounded-lg" flat>
+  <div v-if="isLoading" class="container mt-8 d-flex justify-center">
+    <v-progress-circular class="d-inline" indeterminate></v-progress-circular>
+  </div>
+  <v-card v-else class="border-thin rounded-lg" flat>
     <v-card-item class="border-b-thin px-2">
       <v-row class="px-2">
         <v-col :cols="showToggle ? 9 : 12">
@@ -111,15 +139,17 @@ const emit = defineEmits(['shuffle', 'loop', 'hide-panel'])
 
     <v-card-item class="pa-0">
       <div id="panel-items-container" :style="{ height: panelContainerHeight }">
-        <playlist-panel-item
-          v-for="(item, index) in props.playlist.videos"
-          :id="`video-item-${index}`"
-          :key="item.slug"
-          :video="item"
-          :order="index + 1"
-          :selected="item.slug === props.videoSlug"
-          :playlist-slug="props.playlistSlug"
-        ></playlist-panel-item>
+        <v-infinite-scroll class="h-full overflow-hidden" :items="items" empty-text="" @load="load">
+          <playlist-panel-item
+            v-for="(item, index) in items"
+            :id="`video-item-${index}`"
+            :key="item.slug"
+            :video="item"
+            :order="index + 1"
+            :selected="item.slug === props.videoSlug"
+            :playlist-slug="props.playlistSlug"
+          ></playlist-panel-item>
+        </v-infinite-scroll>
       </div>
     </v-card-item>
   </v-card>
diff --git a/zimui/src/components/video/VideoGrid.vue b/zimui/src/components/video/VideoGrid.vue
index 163132cb..afcce561 100644
--- a/zimui/src/components/video/VideoGrid.vue
+++ b/zimui/src/components/video/VideoGrid.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { useDisplay } from 'vuetify'
 import type { VideoPreview } from '@/types/Videos'
 import VideoCard from './VideoCard.vue'
@@ -9,23 +10,45 @@ const props = defineProps<{
   videos: VideoPreview[]
   playlistSlug?: string
 }>()
+
+const items = computed(() => props.videos.slice(0, 48))
+
+const loadMoreItems = async () => {
+  return new Promise<VideoPreview[]>((resolve) => {
+    setTimeout(() => {
+      resolve(props.videos.slice(items.value.length, items.value.length + 12))
+    }, 100)
+  })
+}
+
+const load = async ({ done }: { done: (status: 'ok' | 'empty') => void }) => {
+  const res = await loadMoreItems()
+  items.value.push(...res)
+  if (items.value[items.value.length - 1] == props.videos[props.videos.length - 1]) {
+    done('empty')
+    return
+  }
+  done('ok')
+}
 </script>
 
 <template>
   <v-container class="px-1" :fluid="mdAndDown">
-    <v-row dense>
-      <v-col
-        v-for="video in props.videos"
-        :key="video.id"
-        cols="12"
-        md="4"
-        lg="3"
-        xl="2"
-        xxl="1"
-        class="mb-2 mb-md-6"
-      >
-        <video-card :video="video" :playlist-slug="playlistSlug" />
-      </v-col>
-    </v-row>
+    <v-infinite-scroll class="h-full overflow-hidden" :items="items" empty-text="" @load="load">
+      <v-row dense>
+        <v-col
+          v-for="video in items"
+          :key="video.id"
+          cols="12"
+          md="4"
+          lg="3"
+          xl="2"
+          xxl="1"
+          class="mb-2 mb-md-6"
+        >
+          <video-card :video="video" :playlist-slug="playlistSlug" />
+        </v-col>
+      </v-row>
+    </v-infinite-scroll>
   </v-container>
 </template>
diff --git a/zimui/src/views/PlaylistView.vue b/zimui/src/views/PlaylistView.vue
index 6359a2a6..0b2295b6 100644
--- a/zimui/src/views/PlaylistView.vue
+++ b/zimui/src/views/PlaylistView.vue
@@ -18,6 +18,7 @@ const slug: string = route.params.slug as string
 
 const playlist: Ref<Playlist> = ref<Playlist>() as Ref<Playlist>
 const thumbnailSrc = ref('')
+const isLoading = ref(true)
 
 // Fetch playlist data
 const fetchPlaylistData = async function () {
@@ -26,6 +27,7 @@ const fetchPlaylistData = async function () {
       const resp = await main.fetchPlaylist(slug)
       if (resp) {
         playlist.value = resp
+        isLoading.value = false
       }
     } catch (error) {
       main.setErrorMessage('An unexpected error occured when fetching playlist data.')
@@ -70,7 +72,10 @@ const { mdAndDown } = useDisplay()
 </script>
 
 <template>
-  <v-container v-if="playlist" :fluid="mdAndDown">
+  <div v-if="isLoading" class="container h-screen d-flex justify-center align-center">
+    <v-progress-circular class="d-inline" indeterminate></v-progress-circular>
+  </div>
+  <v-container v-else :fluid="mdAndDown">
     <v-row>
       <v-spacer />
       <v-col cols="12" md="5" lg="4" xl="3" xxl="2">

From 047e753d5d8f75b9a26dcbc1433f4d7f410c6a72 Mon Sep 17 00:00:00 2001
From: Dan Niles <56271899+dan-niles@users.noreply.github.com>
Date: Fri, 9 Aug 2024 13:27:40 +0530
Subject: [PATCH 2/3] Update CHANGELOG

---
 CHANGELOG | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG b/CHANGELOG
index be5705fe..72efdfec 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Disable preloading of subtitles in video.js in `zimui` (#38)
 - Fix scraper to exit properly when `Too much videos failed to download` exceptions are raised (#285)
 - Clean up temporary files properly in case of exceptions during scraper run (#288)
+- Implement infinite scroll for video/playlist lists and add loading spinners in `zimui` (#284)
 
 ## [3.0.0] - 2024-07-29
 

From d1930a05040e8a51b581c2be289d366f87a93806 Mon Sep 17 00:00:00 2001
From: Dan Niles <56271899+dan-niles@users.noreply.github.com>
Date: Fri, 9 Aug 2024 16:22:39 +0530
Subject: [PATCH 3/3] Change isLoading to ref and use length to find end of
 list during infinite scroll

---
 zimui/src/components/channel/tabs/PlaylistsTab.vue    |  5 +++--
 zimui/src/components/channel/tabs/VideosTab.vue       |  5 +++--
 zimui/src/components/playlist/PlaylistGrid.vue        |  6 +++---
 zimui/src/components/playlist/panel/PlaylistPanel.vue | 10 ++++------
 zimui/src/components/video/VideoGrid.vue              |  6 +++---
 5 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/zimui/src/components/channel/tabs/PlaylistsTab.vue b/zimui/src/components/channel/tabs/PlaylistsTab.vue
index e67a110e..a06c7039 100644
--- a/zimui/src/components/channel/tabs/PlaylistsTab.vue
+++ b/zimui/src/components/channel/tabs/PlaylistsTab.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch, computed } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 
 import { useMainStore } from '@/stores/main'
 import type { PlaylistPreview } from '@/types/Playlists'
@@ -9,7 +9,7 @@ import TabInfo from '@/components/common/ViewInfo.vue'
 
 const main = useMainStore()
 const playlists = ref<PlaylistPreview[]>([])
-const isLoading = computed(() => playlists.value.length === 0)
+const isLoading = ref(true)
 
 // Watch for changes in the main playlist
 watch(
@@ -26,6 +26,7 @@ const fetchData = async function () {
       const resp = await main.fetchPlaylists()
       if (resp) {
         playlists.value = resp.playlists
+        isLoading.value = false
       }
     } catch (error) {
       main.setErrorMessage('An unexpected error occured when fetching playlists.')
diff --git a/zimui/src/components/channel/tabs/VideosTab.vue b/zimui/src/components/channel/tabs/VideosTab.vue
index 26e25174..87421603 100644
--- a/zimui/src/components/channel/tabs/VideosTab.vue
+++ b/zimui/src/components/channel/tabs/VideosTab.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch, computed } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 
 import { useMainStore } from '@/stores/main'
 import type { VideoPreview } from '@/types/Videos'
@@ -11,7 +11,7 @@ import type { Playlist } from '@/types/Playlists'
 const main = useMainStore()
 const videos = ref<VideoPreview[]>([])
 const playlist = ref<Playlist>()
-const isLoading = computed(() => videos.value.length === 0)
+const isLoading = ref(true)
 
 // Watch for changes in the main playlist
 watch(
@@ -29,6 +29,7 @@ const fetchData = async function () {
       if (resp) {
         playlist.value = resp
         videos.value = resp.videos
+        isLoading.value = false
       }
     } catch (error) {
       main.setErrorMessage('An unexpected error occured when fetching videos.')
diff --git a/zimui/src/components/playlist/PlaylistGrid.vue b/zimui/src/components/playlist/PlaylistGrid.vue
index ad0619fb..6b778e80 100644
--- a/zimui/src/components/playlist/PlaylistGrid.vue
+++ b/zimui/src/components/playlist/PlaylistGrid.vue
@@ -21,9 +21,9 @@ const loadMoreItems = async () => {
 }
 
 const load = async ({ done }: { done: (status: 'ok' | 'empty') => void }) => {
-  const res = await loadMoreItems()
-  items.value.push(...res)
-  if (items.value[items.value.length - 1] == props.playlists[props.playlists.length - 1]) {
+  const moreItems = await loadMoreItems()
+  items.value.push(...moreItems)
+  if (items.value.length === props.playlists.length) {
     done('empty')
     return
   }
diff --git a/zimui/src/components/playlist/panel/PlaylistPanel.vue b/zimui/src/components/playlist/panel/PlaylistPanel.vue
index c8b5aa75..e3a7560c 100644
--- a/zimui/src/components/playlist/panel/PlaylistPanel.vue
+++ b/zimui/src/components/playlist/panel/PlaylistPanel.vue
@@ -20,7 +20,7 @@ const props = defineProps<{
   shuffle: boolean
 }>()
 
-const isLoading = computed(() => props.playlist.videos.length === 0)
+const isLoading = computed(() => props.playlist.videos === undefined)
 
 const windowHeight = ref(
   window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
@@ -66,11 +66,9 @@ const loadMoreItems = async () => {
 }
 
 const load = async ({ done }: { done: (status: 'ok' | 'empty') => void }) => {
-  const res = await loadMoreItems()
-  items.value.push(...res)
-  if (
-    items.value[items.value.length - 1] == props.playlist.videos[props.playlist.videos.length - 1]
-  ) {
+  const moreItems = await loadMoreItems()
+  items.value.push(...moreItems)
+  if (items.value.length === props.playlist.videos.length) {
     done('empty')
     return
   }
diff --git a/zimui/src/components/video/VideoGrid.vue b/zimui/src/components/video/VideoGrid.vue
index afcce561..dabe1544 100644
--- a/zimui/src/components/video/VideoGrid.vue
+++ b/zimui/src/components/video/VideoGrid.vue
@@ -22,9 +22,9 @@ const loadMoreItems = async () => {
 }
 
 const load = async ({ done }: { done: (status: 'ok' | 'empty') => void }) => {
-  const res = await loadMoreItems()
-  items.value.push(...res)
-  if (items.value[items.value.length - 1] == props.videos[props.videos.length - 1]) {
+  const moreItems = await loadMoreItems()
+  items.value.push(...moreItems)
+  if (items.value.length === props.videos.length) {
     done('empty')
     return
   }