Add Move Top/Bottom to playlist

Author: ArthurKun21

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-top="$emit('move-video-top')"
+      @move-video-bottom="$emit('move-video-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.vue

@@ -69,6 +69,15 @@
           :size="appearance === `watchPlaylistItem` ? 14 : 18"
           @click="toggleQuickBookmarked"
         />
+        <ft-icon-button
+          v-if="inUserPlaylist && canMoveVideoUp"
+          :title="$t('User Playlists.Move Video Top')"
+          :icon="['fas', 'angle-up']"
+          class="upArrowIcon"
+          :padding="appearance === `watchPlaylistItem` ? 5 : 6"
+          :size="appearance === `watchPlaylistItem` ? 14 : 18"
+          @click="$emit('move-video-top')"
+        />
         <ft-icon-button
           v-if="inUserPlaylist && canMoveVideoUp"
           :title="$t('User Playlists.Move Video Up')"
@@ -87,6 +96,15 @@
           :size="appearance === `watchPlaylistItem` ? 14 : 18"
           @click="$emit('move-video-down')"
         />
+        <ft-icon-button
+          v-if="inUserPlaylist && canMoveVideoDown"
+          :title="$t('User Playlists.Move Video Bottom')"
+          :icon="['fas', 'angle-down']"
+          class="downArrowIcon"
+          :padding="appearance === `watchPlaylistItem` ? 5 : 6"
+          :size="appearance === `watchPlaylistItem` ? 14 : 18"
+          @click="$emit('move-video-bottom')"
+        />
         <ft-icon-button
           v-if="inUserPlaylist && canRemoveFromPlaylist"
           :title="$t('User Playlists.Remove from Playlist')"

src/renderer/views/Playlist/Playlist.js

@@ -330,7 +330,60 @@ export default defineComponent({
         if (shouldGetNextPage) { this.getNextPageLocal() }
       })
     },
-
+    moveVideoTop: 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)
+      }
+    },
+    moveVideoBottom: 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-top="moveVideoTop(item.videoId, item.playlistItemId)"
+              @move-video-bottom="moveVideoBottom(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 Top: Move Video Top
+  Move Video Bottom: Move Video Bottom
   Move Video Up: Move Video Up
   Move Video Down: Move Video Down
   Remove from Playlist: Remove from Playlist