Update playlist page to add remove duplicate videos button for user playlists (#5191)

* $ Remove duplicate line in a method setting a property to the same value

* * Update playlist page to add remove duplicate videos button for user playlists

* * Make remove watched videos button visible when any video watched

* * Use different icon

* * Show no. of items to be deleted on prompts

Author: PikachuEXE

src/renderer/components/playlist-info/playlist-info.js

@@ -110,6 +110,7 @@ export default defineComponent({
       editMode: false,
       showDeletePlaylistPrompt: false,
       showRemoveVideosOnWatchPrompt: false,
+      showRemoveDuplicateVideosPrompt: false,
       newTitle: '',
       newDescription: '',
       deletePlaylistPromptValues: [
@@ -165,6 +166,20 @@ export default defineComponent({
         this.$t('Cancel')
       ]
     },
+    removeVideosOnWatchPromptLabelText() {
+      return this.$tc(
+        'User Playlists.Are you sure you want to remove {playlistItemCount} watched videos from this playlist? This cannot be undone',
+        this.userPlaylistWatchedVideoCount,
+        { playlistItemCount: this.userPlaylistWatchedVideoCount },
+      )
+    },
+    removeDuplicateVideosPromptLabelText() {
+      return this.$tc(
+        'User Playlists.Are you sure you want to remove {playlistItemCount} duplicate videos from this playlist? This cannot be undone',
+        this.userPlaylistDuplicateItemCount,
+        { playlistItemCount: this.userPlaylistDuplicateItemCount },
+      )
+    },
 
     firstVideoIdExists() {
       return this.firstVideoId !== ''
@@ -211,6 +226,38 @@ export default defineComponent({
       return this.isUserPlaylist ? 'user' : ''
     },
 
+    userPlaylistAnyVideoWatched() {
+      if (!this.isUserPlaylist) { return false }
+
+      const historyCacheById = this.$store.getters.getHistoryCacheById
+      return this.selectedUserPlaylist.videos.some((video) => {
+        return typeof historyCacheById[video.videoId] !== 'undefined'
+      })
+    },
+    // `userPlaylistAnyVideoWatched` is faster than this & this is only needed when prompt shown
+    userPlaylistWatchedVideoCount() {
+      if (!this.isUserPlaylist) { return false }
+
+      const historyCacheById = this.$store.getters.getHistoryCacheById
+      return this.selectedUserPlaylist.videos.reduce((count, video) => {
+        return typeof historyCacheById[video.videoId] !== 'undefined' ? count + 1 : count
+      }, 0)
+    },
+
+    userPlaylistUniqueVideoIds() {
+      if (!this.isUserPlaylist) { return new Set() }
+
+      return this.selectedUserPlaylist.videos.reduce((set, video) => {
+        set.add(video.videoId)
+        return set
+      }, new Set())
+    },
+    userPlaylistDuplicateItemCount() {
+      if (this.userPlaylistUniqueVideoIds.size === 0) { return 0 }
+
+      return this.selectedUserPlaylist.videos.length - this.userPlaylistUniqueVideoIds.size
+    },
+
     deletePlaylistButtonVisible: function() {
       if (!this.isUserPlaylist) { return false }
       // Cannot delete during edit
@@ -334,6 +381,43 @@ export default defineComponent({
       this.$emit('exit-edit-mode')
     },
 
+    handleRemoveDuplicateVideosPromptAnswer(option) {
+      this.showRemoveDuplicateVideosPrompt = false
+      if (option !== 'delete') { return }
+
+      const videoIdsAdded = new Set()
+      const newVideoItems = this.selectedUserPlaylist.videos.reduce((ary, video) => {
+        if (videoIdsAdded.has(video.videoId)) { return ary }
+
+        ary.push(video)
+        videoIdsAdded.add(video.videoId)
+        return ary
+      }, [])
+
+      const removedVideosCount = this.userPlaylistDuplicateItemCount
+      if (removedVideosCount === 0) {
+        showToast(this.$t('User Playlists.SinglePlaylistView.Toast["There were no videos to remove."]'))
+        return
+      }
+
+      const playlist = {
+        playlistName: this.title,
+        protected: this.selectedUserPlaylist.protected,
+        description: this.description,
+        videos: newVideoItems,
+        _id: this.id,
+      }
+      try {
+        this.updatePlaylist(playlist)
+        showToast(this.$tc('User Playlists.SinglePlaylistView.Toast.{videoCount} video(s) have been removed', removedVideosCount, {
+          videoCount: removedVideosCount,
+        }))
+      } catch (e) {
+        showToast(this.$t('User Playlists.SinglePlaylistView.Toast["There was an issue with updating this playlist."]'))
+        console.error(e)
+      }
+    },
+
     handleRemoveVideosOnWatchPromptAnswer: function (option) {
       this.showRemoveVideosOnWatchPrompt = false
       if (option !== 'delete') { return }
@@ -346,7 +430,6 @@ export default defineComponent({
 
       if (removedVideosCount === 0) {
         showToast(this.$t('User Playlists.SinglePlaylistView.Toast["There were no videos to remove."]'))
-        this.showRemoveVideosOnWatchPrompt = false
         return
       }
 

src/renderer/components/playlist-info/playlist-info.vue

@@ -153,7 +153,14 @@
             @click="toggleCopyVideosPrompt"
           />
           <ft-icon-button
-            v-if="!editMode && isUserPlaylist && videoCount > 0"
+            v-if="!editMode && userPlaylistDuplicateItemCount > 0"
+            :title="$t('User Playlists.Remove Duplicate Videos')"
+            :icon="['fas', 'users-slash']"
+            theme="destructive"
+            @click="showRemoveDuplicateVideosPrompt = true"
+          />
+          <ft-icon-button
+            v-if="!editMode && userPlaylistAnyVideoWatched"
             :title="$t('User Playlists.Remove Watched Videos')"
             :icon="['fas', 'eye-slash']"
             theme="destructive"
@@ -203,12 +210,20 @@
       />
       <ft-prompt
         v-if="showRemoveVideosOnWatchPrompt"
-        :label="$t('User Playlists.Are you sure you want to remove all watched videos from this playlist? This cannot be undone')"
+        :label="removeVideosOnWatchPromptLabelText"
         :option-names="deletePlaylistPromptNames"
         :option-values="deletePlaylistPromptValues"
         :is-first-option-destructive="true"
         @click="handleRemoveVideosOnWatchPromptAnswer"
       />
+      <ft-prompt
+        v-if="showRemoveDuplicateVideosPrompt"
+        :label="removeDuplicateVideosPromptLabelText"
+        :option-names="deletePlaylistPromptNames"
+        :option-values="deletePlaylistPromptValues"
+        :is-first-option-destructive="true"
+        @click="handleRemoveDuplicateVideosPromptAnswer"
+      />
     </div>
   </div>
 </template>

src/renderer/main.js

@@ -90,6 +90,7 @@ import {
   faTimesCircle,
   faTrash,
   faUsers,
+  faUsersSlash,
 } from '@fortawesome/free-solid-svg-icons'
 import {
   faBookmark as farBookmark
@@ -188,6 +189,7 @@ library.add(
   faTimesCircle,
   faTrash,
   faUsers,
+  faUsersSlash,
 
   // solid icons
   farBookmark,

static/locales/en-US.yaml

@@ -185,10 +185,12 @@ User Playlists:
   Cancel: Cancel
   Edit Playlist Info: Edit Playlist Info
   Copy Playlist: Copy Playlist
+  Remove Duplicate Videos: Remove Duplicate Videos
   Remove Watched Videos: Remove Watched Videos
   Enable Quick Bookmark With This Playlist: Enable Quick Bookmark With This Playlist
   Quick Bookmark Enabled: Quick Bookmark Enabled
-  Are you sure you want to remove all watched videos from this playlist? This cannot be undone: Are you sure you want to remove all watched videos from this playlist? This cannot be undone.
+  Are you sure you want to remove {playlistItemCount} duplicate videos from this playlist? This cannot be undone: Are you sure you want to remove 1 duplicate video from this playlist? This cannot be undone. | Are you sure you want to remove {playlistItemCount} duplicate videos from this playlist? This cannot be undone.
+  Are you sure you want to remove {playlistItemCount} watched videos from this playlist? This cannot be undone: Are you sure you want to remove 1 watched video from this playlist? This cannot be undone. | Are you sure you want to remove {playlistItemCount} watched videos from this playlist? This cannot be undone.
   Delete Playlist: Delete Playlist
   Cannot delete the quick bookmark target playlist.: Cannot delete the quick bookmark target playlist.
   Are you sure you want to delete this playlist? This cannot be undone: Are you sure you want to delete this playlist? This cannot be undone.