Update single playlst view for user playlist to have pagination

src/renderer/components/playlist-info/playlist-info.js

@@ -226,7 +226,7 @@ export default defineComponent({
   },
   methods: {
     toggleCopyVideosPrompt: function (force = false) {
-      if (this.moreVideoDataAvailable && !force) {
+      if (this.moreVideoDataAvailable && !this.isUserPlaylist && !force) {
         showToast(this.$t('User Playlists.SinglePlaylistView.Toast["Some videos in the playlist are not loaded yet. Click here to copy anyway."]'), 5000, () => {
           this.toggleCopyVideosPrompt(true)
         })

src/renderer/views/Playlist/Playlist.js

@@ -58,6 +58,7 @@ export default defineComponent({
       isLoadingMore: false,
       getPlaylistInfoDebounce: function() {},
       playlistInEditMode: false,
+      userPlaylistVisibleVideoLimit: 100,
 
       promptOpen: false,
     }
@@ -102,8 +103,19 @@ export default defineComponent({
     },
 
     moreVideoDataAvailable() {
+      if (this.selectedUserPlaylist) {
+        return this.selectedUserPlaylist.videos.length > this.userPlaylistVisibleVideoLimit
+      }
+
       return this.continuationData !== null
     },
+    playlistInfoVideos() {
+      if (this.selectedUserPlaylist) {
+        return this.selectedUserPlaylist.videos
+      }
+
+      return this.playlistItems
+    },
 
     isUserPlaylistRequested: function () {
       return this.$route.query.playlistType === 'user'
@@ -146,6 +158,13 @@ export default defineComponent({
       // Re-fetch from local store when current user playlist videos updated
       this.getPlaylistInfoDebounce()
     },
+    userPlaylistVisibleVideoLimit (val) {
+      if (this.selectedUserPlaylistVideos.length < this.userPlaylistVisibleVideoLimit) {
+        this.playlistItems = this.selectedUserPlaylistVideos
+      } else {
+        this.playlistItems = this.selectedUserPlaylistVideos.slice(0, this.userPlaylistVisibleVideoLimit)
+      }
+    },
   },
   mounted: function () {
     this.getPlaylistInfoDebounce = debounce(this.getPlaylistInfo, 100)
@@ -285,7 +304,11 @@ export default defineComponent({
       this.channelId = ''
       this.infoSource = 'user'
 
-      this.playlistItems = playlist.videos
+      if (playlist.videos.length < this.userPlaylistVisibleVideoLimit) {
+        this.playlistItems = playlist.videos
+      } else {
+        this.playlistItems = playlist.videos.slice(0, this.userPlaylistVisibleVideoLimit)
+      }
 
       this.isLoading = false
     },
@@ -294,6 +317,11 @@ export default defineComponent({
     },
 
     getNextPage: function () {
+      if (this.selectedUserPlaylist) {
+        this.userPlaylistVisibleVideoLimit += 100
+        return
+      }
+
       switch (this.infoSource) {
         case 'local':
           this.getNextPageLocal()
@@ -332,7 +360,7 @@ export default defineComponent({
     },
 
     moveVideoUp: function (videoId, playlistItemId) {
-      const playlistItems = [].concat(this.playlistItems)
+      const playlistItems = [].concat(this.selectedUserPlaylistVideos)
       const videoIndex = playlistItems.findIndex((video) => {
         return video.videoId === videoId && video.playlistItemId === playlistItemId
       })
@@ -356,15 +384,14 @@ export default defineComponent({
       }
       try {
         this.updatePlaylist(playlist)
-        this.playlistItems = playlistItems
       } catch (e) {
         showToast(this.$t('User Playlists.SinglePlaylistView.Toast["There was an issue with updating this playlist."]'))
         console.error(e)
       }
     },
 
     moveVideoDown: function (videoId, playlistItemId) {
-      const playlistItems = [].concat(this.playlistItems)
+      const playlistItems = [].concat(this.selectedUserPlaylistVideos)
       const videoIndex = playlistItems.findIndex((video) => {
         return video.videoId === videoId && video.playlistItemId === playlistItemId
       })
@@ -388,7 +415,6 @@ export default defineComponent({
       }
       try {
         this.updatePlaylist(playlist)
-        this.playlistItems = playlistItems
       } catch (e) {
         showToast(this.$t('User Playlists.SinglePlaylistView.Toast["There was an issue with updating this playlist."]'))
         console.error(e)

src/renderer/views/Playlist/Playlist.vue

@@ -18,7 +18,7 @@
       :last-updated="lastUpdated"
       :description="playlistDescription"
       :video-count="videoCount"
-      :videos="playlistItems"
+      :videos="playlistInfoVideos"
       :view-count="viewCount"
       :info-source="infoSource"
       :more-video-data-available="moreVideoDataAvailable"