Pass playlist data from playlist page to watch page

src/renderer/components/watch-video-playlist/watch-video-playlist.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { mapActions } from 'vuex'
+import { mapActions, mapMutations } from 'vuex'
 import FtLoader from '../ft-loader/ft-loader.vue'
 import FtCard from '../ft-card/ft-card.vue'
 import FtListVideo from '../ft-list-video/ft-list-video.vue'
@@ -31,7 +31,6 @@ export default Vue.extend({
       reversePlaylist: false,
       channelName: '',
       channelId: '',
-      channelThumbnail: '',
       playlistTitle: '',
       playlistItems: [],
       randomizedPlaylistItems: []
@@ -82,7 +81,11 @@ export default Vue.extend({
     }
   },
   mounted: function () {
-    if (!process.env.IS_ELECTRON || this.backendPreference === 'invidious') {
+    const cachedPlaylist = this.$store.getters.getCachedPlaylist
+
+    if (cachedPlaylist?.id === this.playlistId) {
+      this.loadCachedPlaylistInformation(cachedPlaylist)
+    } else if (!process.env.IS_ELECTRON || this.backendPreference === 'invidious') {
       this.getPlaylistInformationInvidious()
     } else {
       this.getPlaylistInformationLocal()
@@ -242,16 +245,45 @@ export default Vue.extend({
       }
     },
 
+    loadCachedPlaylistInformation: async function (cachedPlaylist) {
+      this.isLoading = true
+      this.setCachedPlaylist(null)
+
+      this.playlistTitle = cachedPlaylist.title
+      this.channelName = cachedPlaylist.channelName
+      this.channelId = cachedPlaylist.channelId
+
+      if (!process.env.IS_ELECTRON || this.backendPreference === 'invidious' || cachedPlaylist.continuationData === null) {
+        this.playlistItems = cachedPlaylist.items
+      } else {
+        const items = cachedPlaylist.items
+        let playlist = cachedPlaylist.continuationData
+
+        do {
+          playlist = await playlist.getContinuation()
+
+          const parsedVideos = playlist.items.map(parseLocalPlaylistVideo)
+          items.push(...parsedVideos)
+
+          if (!playlist.has_continuation) {
+            playlist = null
+          }
+        } while (playlist !== null)
+
+        this.playlistItems = items
+      }
+
+      this.isLoading = false
+    },
+
     getPlaylistInformationLocal: async function () {
       this.isLoading = true
 
       try {
         let playlist = await getLocalPlaylist(this.playlistId)
 
         this.playlistTitle = playlist.info.title
-        this.videoCount = playlist.info.total_items
         this.channelName = playlist.info.author?.name
-        this.channelThumbnail = playlist.info.author?.best_thumbnail?.url
         this.channelId = playlist.info.author?.id
 
         const videos = playlist.items.map(parseLocalPlaylistVideo)
@@ -291,9 +323,7 @@ export default Vue.extend({
 
       this.invidiousGetPlaylistInfo(payload).then((result) => {
         this.playlistTitle = result.title
-        this.videoCount = result.videoCount
         this.channelName = result.author
-        this.channelThumbnail = result.authorThumbnails[2].url
         this.channelId = result.authorId
         this.playlistItems = this.playlistItems.concat(result.videos)
 
@@ -336,6 +366,10 @@ export default Vue.extend({
 
     ...mapActions([
       'invidiousGetPlaylistInfo'
+    ]),
+
+    ...mapMutations([
+      'setCachedPlaylist'
     ])
   }
 })

src/renderer/store/modules/utils.js

@@ -22,6 +22,7 @@ const state = {
     gaming: null,
     movies: null
   },
+  cachedPlaylist: null,
   showProgressBar: false,
   progressBarPercentage: 0,
   regionNames: [],
@@ -60,6 +61,10 @@ const getters = {
     return state.trendingCache
   },
 
+  getCachedPlaylist() {
+    return state.cachedPlaylist
+  },
+
   getSearchSettings () {
     return state.searchSettings
   },
@@ -689,6 +694,10 @@ const mutations = {
     state.trendingCache[page] = value
   },
 
+  setCachedPlaylist(state, value) {
+    state.cachedPlaylist = value
+  },
+
   setSearchSortBy (state, value) {
     state.searchSettings.sortBy = value
   },

src/renderer/views/Playlist/Playlist.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { mapActions } from 'vuex'
+import { mapActions, mapMutations } from 'vuex'
 import FtLoader from '../../components/ft-loader/ft-loader.vue'
 import FtCard from '../../components/ft-card/ft-card.vue'
 import PlaylistInfo from '../../components/playlist-info/playlist-info.vue'
@@ -20,6 +20,19 @@ export default Vue.extend({
     'ft-flex-box': FtFlexBox,
     'ft-button': FtButton
   },
+  beforeRouteLeave(to, from, next) {
+    if (!this.isLoading && to.path.startsWith('/watch') && to.query.playlistId === this.playlistId) {
+      this.setCachedPlaylist({
+        id: this.playlistId,
+        title: this.infoData.title,
+        channelName: this.infoData.channelName,
+        channelId: this.infoData.channelId,
+        items: this.playlistItems,
+        continuationData: this.continuationData
+      })
+    }
+    next()
+  },
   data: function () {
     return {
       isLoading: false,
@@ -185,6 +198,10 @@ export default Vue.extend({
     ...mapActions([
       'invidiousGetPlaylistInfo',
       'updateSubscriptionDetails'
+    ]),
+
+    ...mapMutations([
+      'setCachedPlaylist'
     ])
   }
 })