Add Move Top/Bottom to playlist

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')"

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 = {

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) => {

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)"

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