mirror of https://github.com/FreeTubeApp/FreeTube
Pass playlist data from playlist page to watch page (#2970)
* Pass playlist data from playlist page to watch page * Remove unused properties
This commit is contained in:
parent
c4571edb03
commit
dd18634fdc
|
@ -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,6 +245,37 @@ 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
|
||||
|
||||
|
@ -249,9 +283,7 @@ export default Vue.extend({
|
|||
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'
|
||||
])
|
||||
}
|
||||
})
|
||||
|
|
|
@ -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
|
||||
},
|
||||
|
|
|
@ -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'
|
||||
])
|
||||
}
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue