diff --git a/src/renderer/components/ft-list-video-lazy/ft-list-video-lazy.vue b/src/renderer/components/ft-list-video-lazy/ft-list-video-lazy.vue index 69abd6a3a9221..2c51cd18226da 100644 --- a/src/renderer/components/ft-list-video-lazy/ft-list-video-lazy.vue +++ b/src/renderer/components/ft-list-video-lazy/ft-list-video-lazy.vue @@ -24,6 +24,8 @@ :can-move-video-down="canMoveVideoDown" :can-remove-from-playlist="canRemoveFromPlaylist" @pause-player="$emit('pause-player')" + @move-video-to-the-top="$emit('move-video-to-the-top')" + @move-video-to-the-bottom="$emit('move-video-to-the-bottom')" @move-video-up="$emit('move-video-up')" @move-video-down="$emit('move-video-down')" @remove-from-playlist="$emit('remove-from-playlist')" diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js index 11c35f95475db..536c93c82da2d 100644 --- a/src/renderer/components/ft-list-video/ft-list-video.js +++ b/src/renderer/components/ft-list-video/ft-list-video.js @@ -227,8 +227,25 @@ export default defineComponent({ ? this.$t('Video.Remove From History') : this.$t('Video.Mark As Watched'), value: 'history' - } + }, ] + if (this.inUserPlaylist && (this.canMoveVideoUp || this.canMoveVideoDown)) { + options.push({ + type: 'divider' + }) + } + if (this.canMoveVideoUp && this.inUserPlaylist) { + options.push({ + label: this.$t('User Playlists.Move Video to the Top'), + value: 'moveVideoTop' + }) + } + if (this.canMoveVideoDown && this.inUserPlaylist) { + options.push({ + label: this.$t('User Playlists.Move Video to the Bottom'), + value: 'moveVideoBottom' + }) + } if (!this.hideSharingActions) { options.push( { @@ -590,6 +607,12 @@ export default defineComponent({ this.markAsWatched() } break + case 'moveVideoTop': + this.moveVideoToTheTop() + break + case 'moveVideoBottom': + this.moveVideoToTheBottom() + break case 'copyYoutube': copyToClipboard(this.youtubeShareUrl, { messageOnSuccess: this.$t('Share.YouTube URL copied to clipboard') }) break @@ -778,6 +801,12 @@ export default defineComponent({ this.watched = false this.watchProgress = 0 }, + moveVideoToTheTop: function() { + this.$emit('move-video-to-the-top') + }, + moveVideoToTheBottom: function() { + this.$emit('move-video-to-the-bottom') + }, togglePlaylistPrompt: function () { const videoData = { diff --git a/src/renderer/views/Playlist/Playlist.js b/src/renderer/views/Playlist/Playlist.js index 826f034494ec3..222567583119e 100644 --- a/src/renderer/views/Playlist/Playlist.js +++ b/src/renderer/views/Playlist/Playlist.js @@ -330,7 +330,60 @@ export default defineComponent({ if (shouldGetNextPage) { this.getNextPageLocal() } }) }, - + moveVideoToTheTop: function (videoId, playlistItemId) { + const playlistItems = [].concat(this.playlistItems) + const videoIndex = playlistItems.findIndex((video) => { + return video.videoId === videoId && video.playlistItemId === playlistItemId + }) + if (videoIndex === 0) { + showToast(this.$t('User Playlists.SinglePlaylistView.Toast["This video cannot be moved to the top."]')) + return + } + const videoObject = playlistItems[videoIndex] + playlistItems.splice(videoIndex, 1) + playlistItems.unshift(videoObject) + const playlist = { + playlistName: this.playlistTitle, + protected: this.selectedUserPlaylist.protected, + description: this.playlistDescription, + videos: playlistItems, + _id: this.playlistId + } + 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) + } + }, + moveVideoToTheBottom: function(videoId, playlistItemId) { + const playlistItems = [].concat(this.playlistItems) + const videoIndex = playlistItems.findIndex((video) => { + return video.videoId === videoId && video.playlistItemId === playlistItemId + }) + if (videoIndex === playlistItems.length - 1) { + showToast(this.$t('User Playlists.SinglePlaylistView.Toast["This video cannot be moved to the bottom."]')) + return + } + const videoObject = playlistItems[videoIndex] + playlistItems.splice(videoIndex, 1) + playlistItems.push(videoObject) + const playlist = { + playlistName: this.playlistTitle, + protected: this.selectedUserPlaylist.protected, + description: this.playlistDescription, + videos: playlistItems, + _id: this.playlistId + } + 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) + } + }, moveVideoUp: function (videoId, playlistItemId) { const playlistItems = [].concat(this.playlistItems) const videoIndex = playlistItems.findIndex((video) => { @@ -362,7 +415,6 @@ export default defineComponent({ console.error(e) } }, - moveVideoDown: function (videoId, playlistItemId) { const playlistItems = [].concat(this.playlistItems) const videoIndex = playlistItems.findIndex((video) => { diff --git a/src/renderer/views/Playlist/Playlist.vue b/src/renderer/views/Playlist/Playlist.vue index ef3efef0ce00e..7eb4dcb6864b2 100644 --- a/src/renderer/views/Playlist/Playlist.vue +++ b/src/renderer/views/Playlist/Playlist.vue @@ -67,6 +67,8 @@ :can-move-video-down="index < playlistItems.length - 1" :can-remove-from-playlist="true" :hide-forbidden-titles="false" + @move-video-to-the-top="moveVideoToTheTop(item.videoId, item.playlistItemId)" + @move-video-to-the-bottom="moveVideoToTheBottom(item.videoId, item.playlistItemId)" @move-video-up="moveVideoUp(item.videoId, item.playlistItemId)" @move-video-down="moveVideoDown(item.videoId, item.playlistItemId)" @remove-from-playlist="removeVideoFromPlaylist(item.videoId, item.playlistItemId)" diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml index b8fc52b81a3b5..1f5a0f55e5a11 100644 --- a/static/locales/en-US.yaml +++ b/static/locales/en-US.yaml @@ -152,6 +152,8 @@ User Playlists: Add to Favorites: Add to {playlistName} Remove from Favorites: Remove from {playlistName} + Move Video to the Top: Move Video to the Top + Move Video to the Bottom: Move Video to the Bottom Move Video Up: Move Video Up Move Video Down: Move Video Down Remove from Playlist: Remove from Playlist @@ -189,6 +191,8 @@ User Playlists: Toast: This video cannot be moved up.: This video cannot be moved up. This video cannot be moved down.: This video cannot be moved down. + This video cannot be moved to the top.: This video cannot be moved to the top. + This video cannot be moved to the bottom.: This video cannot be moved to the bottom. Video has been removed: Video has been removed There was a problem with removing this video: There was a problem with removing this video