Update single user playlist view to remove videos immediately on exit (FreeTubeApp#7544)

* * Update single user playlist view to remove videos immediately on exit

* $ Update `removeVideos` usage to remove never used `videoIds`

* * Close toast early on view exit

* ! Fix unable to remove videos after clicking undo

* * Reverse toast message update

* * Update video count after remove (before actual remove)

Author: PikachuEXE

src/renderer/components/FtToast/FtToast.vue

@@ -37,9 +37,9 @@ let idCounter = 0
 const toasts = shallowReactive([])
 
 /**
- * @param {CustomEvent<{ message: string, time: number | null, action: Function | null }>} event
+ * @param {CustomEvent<{ message: string, time: number | null, action: Function | null, abortSignal: AbortSignal | null }>} event
  */
-function open({ detail: { message, time, action } }) {
+function open({ detail: { message, time, action, abortSignal } }) {
   /** @type {Toast} */
   const toast = {
     message,
@@ -50,6 +50,11 @@ function open({ detail: { message, time, action } }) {
   }
 
   toast.timeout = setTimeout(close, time || 3000, toast)
+  if (abortSignal != null) {
+    abortSignal.addEventListener('abort', () => {
+      close(toast)
+    })
+  }
 
   nextTick(() => {
     toast.isOpen = true

src/renderer/helpers/utils.js

@@ -167,13 +167,15 @@ export const ToastEventBus = new EventTarget()
  * @param {string} message
  * @param {number} time
  * @param {Function} action
+ * @param {AbortSignal} abortSignal
  */
-export function showToast(message, time = null, action = null) {
+export function showToast(message, time = null, action = null, abortSignal = null) {
   ToastEventBus.dispatchEvent(new CustomEvent('toast-open', {
     detail: {
       message,
       time,
-      action
+      action,
+      abortSignal,
     }
   }))
 }

src/renderer/views/Playlist/Playlist.js

@@ -51,6 +51,7 @@ export default defineComponent({
         continuationData: this.continuationData,
       })
     }
+    this.removeToBeDeletedVideosSometimes()
     next()
   },
   data: function () {
@@ -80,9 +81,9 @@ export default defineComponent({
       videoSearchQuery: '',
 
       promptOpen: false,
-      deletedVideoIds: [],
       deletedPlaylistItemIds: [],
-      isUndoToast: false
+      // Present = shown
+      undoToastAbortController: null,
     }
   },
   computed: {
@@ -591,44 +592,35 @@ export default defineComponent({
       try {
         const playlistItems = [].concat(this.playlistItems)
         const tempPlaylistItems = [].concat(this.playlistItems)
-        let isUndoClicked = false
 
         const videoIndex = this.playlistItems.findIndex((video) => {
           return video.videoId === videoId && video.playlistItemId === playlistItemId
         })
 
         if (videoIndex !== -1) {
-          this.deletedVideoIds.push(this.playlistItems[videoIndex].videoId)
           this.deletedPlaylistItemIds.push(this.playlistItems[videoIndex].playlistItemId)
           playlistItems.splice(videoIndex, 1)
           this.playlistItems = playlistItems
+          this.videoCount = playlistItems.length
 
           // Only show toast when no existing toast shown
-          if (!this.isUndoToast) {
-            this.isUndoToast = true
+          if (this.undoToastAbortController == null) {
+            this.undoToastAbortController = new AbortController()
+            const actualRemoveVideosTimeout = setTimeout(() => {
+              this.removeToBeDeletedVideosSometimes()
+            }, 5000)
             showToast(
               this.$t('User Playlists.SinglePlaylistView.Toast["Video has been removed. Click here to undo."]'),
               5000,
               () => {
                 this.playlistItems = tempPlaylistItems
-                isUndoClicked = true
-                this.isUndoToast = false
-                this.deletedVideoIds = []
+                this.videoCount = tempPlaylistItems.length
+                clearTimeout(actualRemoveVideosTimeout)
                 this.deletedPlaylistItemIds = []
-              }
+                this.undoToastAbortController = null
+              },
+              this.undoToastAbortController.signal,
             )
-            setTimeout(() => {
-              if (!isUndoClicked) {
-                this.removeVideos({
-                  _id: this.playlistId,
-                  videoIds: this.deletedVideoIds,
-                  playlistItemIds: this.deletedPlaylistItemIds,
-                })
-                this.deletedVideoIds = []
-                this.deletedPlaylistItemIds = []
-                this.isUndoToast = false
-              }
-            }, 5000)
           }
         }
       } catch (e) {
@@ -637,6 +629,20 @@ export default defineComponent({
       }
     },
 
+    removeToBeDeletedVideosSometimes() {
+      if (this.isLoading) { return }
+
+      if (this.deletedPlaylistItemIds.length > 0) {
+        this.removeVideos({
+          _id: this.playlistId,
+          playlistItemIds: this.deletedPlaylistItemIds,
+        })
+        this.deletedPlaylistItemIds = []
+        this.undoToastAbortController?.abort()
+        this.undoToastAbortController = null
+      }
+    },
+
     updatePageTitle() {
       const playlistTitle = this.playlistTitle
       const channelName = this.channelName