Play next/prev video after removing current video from the playlist

src/renderer/components/watch-video-playlist/watch-video-playlist.js

@@ -48,6 +48,7 @@ export default defineComponent({
       loopEnabled: false,
       reversePlaylist: false,
       pauseOnCurrentVideo: false,
+      prevVideoBeforeDeletion: null,
       channelName: '',
       channelId: '',
       playlistTitle: '',
@@ -85,15 +86,7 @@ export default defineComponent({
     },
 
     currentVideoIndexZeroBased: function () {
-      return this.playlistItems.findIndex((item) => {
-        if (item.playlistItemId != null && this.playlistItemId != null) {
-          return item.playlistItemId === this.playlistItemId
-        } else if (item.videoId != null) {
-          return item.videoId === this.videoId
-        } else {
-          return item.id === this.videoId
-        }
-      })
+      return this.findIndexOfCurrentVideoInPlaylist(this.playlistItems)
     },
     currentVideoIndexOneBased: function () {
       return this.currentVideoIndexZeroBased + 1
@@ -123,19 +116,7 @@ export default defineComponent({
 
     videoIndexInPlaylistItems: function () {
       const playlistItems = this.shuffleEnabled ? this.randomizedPlaylistItems : this.playlistItems
-
-      return playlistItems.findIndex((item) => {
-        if (item.playlistItemId != null && this.playlistItemId != null) {
-          return item.playlistItemId === this.playlistItemId
-        } else if (item.videoId != null) {
-          return item.videoId === this.videoId
-        } else {
-          return item.id === this.videoId
-        }
-      })
-    },
-    videoIsFirstPlaylistItem: function () {
-      return this.videoIndexInPlaylistItems === 0
+      return this.findIndexOfCurrentVideoInPlaylist(playlistItems)
     },
     videoIsLastPlaylistItem: function () {
       return this.videoIndexInPlaylistItems === (this.playlistItems.length - 1)
@@ -160,12 +141,12 @@ export default defineComponent({
     },
     selectedUserPlaylistVideoCount () {
       // Re-fetch from local store when current user playlist updated
-      this.parseUserPlaylist(this.selectedUserPlaylist, { allowPlayingVideoRemoval: true })
+      this.parseUserPlaylist(this.selectedUserPlaylist)
       this.shufflePlaylistItems()
     },
     selectedUserPlaylistLastUpdatedAt () {
       // Re-fetch from local store when current user playlist updated
-      this.parseUserPlaylist(this.selectedUserPlaylist, { allowPlayingVideoRemoval: true })
+      this.parseUserPlaylist(this.selectedUserPlaylist)
     },
     videoId: function (newId, oldId) {
       // Check if next video is from the shuffled list or if the user clicked a different video
@@ -186,6 +167,7 @@ export default defineComponent({
     },
     watchViewLoading: function (newVal, oldVal) {
       // This component is loaded/rendered before watch view loaded
+      this.prevVideoBeforeDeletion = null
       if (oldVal && !newVal) {
         // Scroll after watch view loaded, otherwise doesn't work
         // Mainly for Local API
@@ -232,6 +214,18 @@ export default defineComponent({
     }
   },
   methods: {
+    findIndexOfCurrentVideoInPlaylist: function (playlist) {
+      return playlist.findIndex((item) => {
+        if (item.playlistItemId != null && (this.playlistItemId != null || this.prevVideoBeforeDeletion?.playlistItemId != null)) {
+          return item.playlistItemId === this.playlistItemId || item.playlistItemId === this.prevVideoBeforeDeletion?.playlistItemId
+        } else if (item.videoId != null) {
+          return item.videoId === this.videoId || item.videoId === this.prevVideoBeforeDeletion?.videoId
+        } else {
+          return item.id === this.videoId || item.id === this.prevVideoBeforeDeletion?.videoId
+        }
+      })
+    },
+
     getPlaylistInfoWithDelay: function () {
       if (this.getPlaylistInfoRun) { return }
 
@@ -348,8 +342,21 @@ export default defineComponent({
         playlistType: this.playlistType,
       }
 
-      const videoIndex = this.videoIndexInPlaylistItems
-      const targetVideoIndex = (this.videoIsFirstPlaylistItem || this.videoIsNotPlaylistItem) ? this.playlistItems.length - 1 : videoIndex - 1
+      let videoIndex = this.videoIndexInPlaylistItems
+
+      /*
+      * When the current video being watched in the playlist is deleted,
+      * the previous video is shown as the "current" one.
+      * So if we want to play the previous video, in this case,
+      * we actually want to actually play the "current" video.
+      */
+      if (this.prevVideoBeforeDeletion) {
+        videoIndex++
+      }
+
+      // Wrap around to the end of the playlist only if there are no remaining earlier videos
+      const targetVideoIndex = (videoIndex === 0 || this.videoIsNotPlaylistItem) ? this.playlistItems.length - 1 : videoIndex - 1
+
       if (this.shuffleEnabled) {
         const targetPlaylistItem = this.randomizedPlaylistItems[targetVideoIndex]
 
@@ -466,22 +473,16 @@ export default defineComponent({
       })
     },
 
-    parseUserPlaylist: function (playlist, { allowPlayingVideoRemoval = true } = {}) {
+    parseUserPlaylist: function (playlist) {
       this.playlistTitle = playlist.playlistName
       this.channelName = ''
       this.channelId = ''
 
-      if (this.playlistItems.length === 0 || allowPlayingVideoRemoval) {
-        this.playlistItems = playlist.videos
-      } else {
-        // `this.currentVideo` relies on `playlistItems`
-        const latestPlaylistContainsCurrentVideo = playlist.videos.some(v => v.playlistItemId === this.playlistItemId)
-        // Only update list of videos if latest video list still contains currently playing video
-        if (latestPlaylistContainsCurrentVideo) {
-          this.playlistItems = playlist.videos
-        }
+      if (this.findIndexOfCurrentVideoInPlaylist(playlist.videos) === -1) {
+        this.prevVideoBeforeDeletion = this.playlistItems[this.currentVideoIndexZeroBased - 1]
       }
 
+      this.playlistItems = playlist.videos
       if (this.reversePlaylist) {
         this.playlistItems = this.playlistItems.toReversed()
       }