* Implement auto load next page for single playlist page

PikachuEXE · Feb 3, 2024 · 26c90a0 · 26c90a0
1 parent 9861ad2
commit 26c90a0
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git a/src/renderer/views/Playlist/Playlist.js b/src/renderer/views/Playlist/Playlist.js
@@ -7,6 +7,7 @@ import PlaylistInfo from '../../components/playlist-info/playlist-info.vue'
 import FtListVideoNumbered from '../../components/ft-list-video-numbered/ft-list-video-numbered.vue'
 import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
 import FtButton from '../../components/ft-button/ft-button.vue'
+import FtAutoLoadNextPageWrapper from '../../components/ft-auto-load-next-page-wrapper/ft-auto-load-next-page-wrapper.vue'
 import {
   getLocalPlaylist,
   getLocalPlaylistContinuation,
@@ -23,7 +24,8 @@ export default defineComponent({
     'playlist-info': PlaylistInfo,
     'ft-list-video-numbered': FtListVideoNumbered,
     'ft-flex-box': FtFlexBox,
-    'ft-button': FtButton
+    'ft-button': FtButton,
+    'ft-auto-load-next-page-wrapper': FtAutoLoadNextPageWrapper,
   },
   beforeRouteLeave(to, from, next) {
     if (!this.isLoading && !this.isUserPlaylistRequested && to.path.startsWith('/watch') && to.query.playlistId === this.playlistId) {

diff --git a/src/renderer/views/Playlist/Playlist.vue b/src/renderer/views/Playlist/Playlist.vue
@@ -65,16 +65,19 @@
             @remove-from-playlist="removeVideoFromPlaylist(item.videoId, item.playlistItemId)"
           />
         </transition-group>
-        <ft-flex-box
+        <ft-auto-load-next-page-wrapper
           v-if="moreVideoDataAvailable && !isLoadingMore"
+          @load-next-page="getNextPage"
         >
-          <ft-button
-            :label="$t('Subscriptions.Load More Videos')"
-            background-color="var(--primary-color)"
-            text-color="var(--text-with-main-color)"
-            @click="getNextPage"
-          />
-        </ft-flex-box>
+          <ft-flex-box>
+            <ft-button
+              :label="$t('Subscriptions.Load More Videos')"
+              background-color="var(--primary-color)"
+              text-color="var(--text-with-main-color)"
+              @click="getNextPage"
+            />
+          </ft-flex-box>
+        </ft-auto-load-next-page-wrapper>
         <div
           v-if="isLoadingMore"
           class="loadNextPageWrapper"