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

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: [
@@ -211,6 +212,29 @@ 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'
+      })
+    },
+
+    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 +358,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 +407,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"
@@ -209,6 +216,14 @@
         :is-first-option-destructive="true"
         @click="handleRemoveVideosOnWatchPromptAnswer"
       />
+      <ft-prompt
+        v-if="showRemoveDuplicateVideosPrompt"
+        :label="$t('User Playlists.Are you sure you want to remove duplicate videos from this playlist? This cannot be undone')"
+        :option-names="deletePlaylistPromptNames"
+        :option-values="deletePlaylistPromptValues"
+        :is-first-option-destructive="true"
+        @click="handleRemoveDuplicateVideosPromptAnswer"
+      />
     </div>
   </div>
 </template>

src/renderer/main.js

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

static/locales/en-US.yaml

@@ -185,9 +185,11 @@ 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 duplicate videos from this playlist? This cannot be undone: Are you sure you want to remove duplicate 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 all 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.