diff --git a/src/renderer/components/playlist-info/playlist-info.js b/src/renderer/components/playlist-info/playlist-info.js index f5c43941322d5..7deaf2d387100 100644 --- a/src/renderer/components/playlist-info/playlist-info.js +++ b/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) }) diff --git a/src/renderer/views/Playlist/Playlist.js b/src/renderer/views/Playlist/Playlist.js index 826f034494ec3..582a50d226814 100644 --- a/src/renderer/views/Playlist/Playlist.js +++ b/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,7 +384,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) @@ -364,7 +391,7 @@ export default defineComponent({ }, 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) diff --git a/src/renderer/views/Playlist/Playlist.vue b/src/renderer/views/Playlist/Playlist.vue index ef3efef0ce00e..24bc98bc2bd90 100644 --- a/src/renderer/views/Playlist/Playlist.vue +++ b/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"