Merge c64adfd359 into a70a5c6ab2

src/renderer/components/FtElementList/FtElementList.vue

@@ -24,7 +24,7 @@
       :playlist-item-id="result.playlistItemId"
       @move-video-up="moveVideoUp(result.videoId, result.playlistItemId)"
       @move-video-down="moveVideoDown(result.videoId, result.playlistItemId)"
-      @remove-from-playlist="removeFromPlaylist(result.videoId, result.playlistItemId)"
+      @remove-from-playlist="removeFromPlaylist(result)"
     />
   </FtAutoGrid>
 </template>
@@ -131,11 +131,10 @@ function moveVideoDown(videoId, playlistItemId) {
 }
 
 /**
- * @param {string} videoId
- * @param {string} playlistItemId
+ * @param {any} video
  */
-function removeFromPlaylist(videoId, playlistItemId) {
-  emit('remove-from-playlist', videoId, playlistItemId)
+function removeFromPlaylist(video) {
+  emit('remove-from-playlist', video)
 }
 </script>
 

src/renderer/views/Playlist/Playlist.js

@@ -72,7 +72,7 @@ export default defineComponent({
       userPlaylistVisibleLimit: 100,
       continuationData: null,
       isLoadingMore: false,
-      getPlaylistInfoDebounce: function() {},
+      getPlaylistInfoDebounce: function () { },
       playlistInEditMode: false,
       forceListView: false,
       alreadyShownNotice: false,
@@ -101,7 +101,7 @@ export default defineComponent({
     currentLocale: function () {
       return this.$i18n.locale
     },
-    playlistId: function() {
+    playlistId: function () {
       return this.$route.params.id
     },
     listType: function () {
@@ -126,7 +126,7 @@ export default defineComponent({
         return []
       }
     },
-    selectedUserPlaylistVideoCount: function() {
+    selectedUserPlaylistVideoCount: function () {
       return this.selectedUserPlaylistVideos.length
     },
 
@@ -238,25 +238,25 @@ export default defineComponent({
     },
   },
   watch: {
-    $route () {
+    $route() {
       // react to route changes...
       this.getPlaylistInfoDebounce()
     },
-    userPlaylistsReady () {
+    userPlaylistsReady() {
       // Fetch from local store when playlist data ready
       if (!this.isUserPlaylistRequested) { return }
 
       this.getPlaylistInfoDebounce()
     },
-    selectedUserPlaylist () {
+    selectedUserPlaylist() {
       // Fetch from local store when current user playlist changed
       this.getPlaylistInfoDebounce()
     },
-    selectedUserPlaylistLastUpdatedAt () {
+    selectedUserPlaylistLastUpdatedAt() {
       // Re-fetch from local store when current user playlist updated
       this.getPlaylistInfoDebounce()
     },
-    selectedUserPlaylistVideoCount () {
+    selectedUserPlaylistVideoCount() {
       // Monitoring `selectedUserPlaylistVideos` makes this function called
       // Even when the same array object is returned
       // So length is monitored instead
@@ -579,16 +579,39 @@ export default defineComponent({
       }
     },
 
-    removeVideoFromPlaylist: function (videoId, playlistItemId) {
+    addVideoBackToPlaylist: function (videoData) {
+      try {
+        this.addVideo({
+          _id: this.playlistId,
+          videoData: videoData
+        })
+
+        // Update playlist's `lastUpdatedAt`
+        this.updatePlaylist({ _id: this.playlistId })
+        showToast(this.$t('User Playlists.SinglePlaylistView.Toast.Video has been added back to playlist'), 3000)
+      } catch (e) {
+        showToast(this.$t('User Playlists.SinglePlaylistView.Toast.There was a problem with adding this video back to playlist'))
+        console.error(e)
+      }
+    },
+
+    removeVideoFromPlaylist: function (videoData) {
       try {
         this.removeVideo({
           _id: this.playlistId,
-          videoId: videoId,
-          playlistItemId: playlistItemId,
+          videoId: videoData.videoId,
+          playlistItemId: videoData.playlistItemId,
         })
+
         // Update playlist's `lastUpdatedAt`
         this.updatePlaylist({ _id: this.playlistId })
-        showToast(this.$t('User Playlists.SinglePlaylistView.Toast.Video has been removed'))
+        showToast(
+          this.$t('User Playlists.SinglePlaylistView.Toast["Video has been removed. Click here to undo."]'),
+          3000,
+          () => {
+            this.addVideoBackToPlaylist(videoData)
+          }
+        )
       } catch (e) {
         showToast(this.$t('User Playlists.SinglePlaylistView.Toast.There was a problem with removing this video'))
         console.error(e)
@@ -616,6 +639,7 @@ export default defineComponent({
       'updatePlaylist',
       'updateUserPlaylistSortOrder',
       'removeVideo',
+      'addVideo'
     ]),
 
     ...mapMutations([

src/renderer/views/Playlist/Playlist.vue

@@ -107,7 +107,7 @@
               :initial-visible-state="index < 10"
               @move-video-up="moveVideoUp(item.videoId, item.playlistItemId)"
               @move-video-down="moveVideoDown(item.videoId, item.playlistItemId)"
-              @remove-from-playlist="removeVideoFromPlaylist(item.videoId, item.playlistItemId)"
+              @remove-from-playlist="removeVideoFromPlaylist(item)"
             />
           </transition-group>
           <ft-auto-load-next-page-wrapper

static/locales/en-US.yaml

@@ -218,7 +218,11 @@ User Playlists:
       This video cannot be moved up.: This video cannot be moved up.
       This video cannot be moved down.: This video cannot be moved down.
       Video has been removed: Video has been removed
+      Video has been removed. Click here to undo.: Video has been removed. Click here to undo.
+      There was a problem with adding this video back to playlist: There was a problem with adding this video back to playlist
       There was a problem with removing this video: There was a problem with removing this video
+      Video has been added back to playlist: Video has been added back to playlist
+
 
       This playlist is already being used for quick bookmark.: This playlist is already being used for quick bookmark.
       This playlist is now used for quick bookmark: This playlist is now used for quick bookmark