* Make adding duplicate disabled by default

src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.css

@@ -34,16 +34,16 @@
 
 .optionsRow {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
   grid-template-rows: 1fr;
   align-items: center;
 }
 
 @media only screen and (width <= 800px) {
   .optionsRow {
-    /* Switch to 2 rows from 2 columns */
+    /* Switch to rows from columns */
     grid-template-columns: auto;
-    grid-template-rows: auto auto;
+    grid-template-rows: repeat(auto-fit, auto);
     align-items: stretch;
   }
 }
@@ -61,7 +61,11 @@
   overflow-y: scroll;
 }
 
-.playlist-selector-container {
+.playlist-selector-container:not(.disabled) {
   /* Make them look selectable */
   cursor: pointer;
 }
+
+.playlist-selector-container.disabled {
+  opacity: 0.5;
+}

src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.js

@@ -46,6 +46,7 @@ export default defineComponent({
       lastShownAt: Date.now(),
       lastActiveElement: null,
       sortBy: SORT_BY_VALUES.LatestUpdatedFirst,
+      addingDuplicateVideosEnabled: false,
     }
   },
   computed: {
@@ -106,6 +107,9 @@ export default defineComponent({
     toBeAddedToPlaylistVideoList: function () {
       return this.$store.getters.getToBeAddedToPlaylistVideoList
     },
+    toBeAddedToPlaylistVideoIdList: function () {
+      return this.toBeAddedToPlaylistVideoList.map((v) => v.videoId)
+    },
     newPlaylistDefaultProperties: function () {
       return this.$store.getters.getNewPlaylistDefaultProperties
     },
@@ -156,6 +160,23 @@ export default defineComponent({
     sortBySelectValues() {
       return Object.values(SORT_BY_VALUES)
     },
+
+    playlistIdsContainingVideosToBeAdded() {
+      const ids = []
+
+      this.allPlaylists.forEach((playlist) => {
+        const playlistVideoIds = playlist.videos.map((v) => v.videoId)
+
+        if (this.toBeAddedToPlaylistVideoIdList.every((vid) => playlistVideoIds.includes(vid))) {
+          ids.push(playlist._id)
+        }
+      })
+
+      return ids
+    },
+    anyPlaylistContainsVideosToBeAdded() {
+      return this.playlistIdsContainingVideosToBeAdded.length > 0
+    },
   },
   watch: {
     allPlaylistsLength(val, oldVal) {
@@ -197,6 +218,16 @@ export default defineComponent({
       // due to enter key press in CreatePlaylistPrompt
       this.$refs.searchBar.focus()
     },
+
+    addingDuplicateVideosEnabled(val) {
+      if (val) { return }
+
+      // Only care when addingDuplicateVideosEnabled disabled
+      // Remove disabled playlists
+      this.selectedPlaylistIdList = this.selectedPlaylistIdList.filter(playlistId => {
+        return !this.playlistIdsContainingVideosToBeAdded.includes(playlistId)
+      })
+    },
   },
   mounted: function () {
     this.lastActiveElement = document.activeElement
@@ -235,10 +266,16 @@ export default defineComponent({
         const playlist = this.allPlaylists.find((list) => list._id === selectedPlaylistId)
         if (playlist == null) { return }
 
+        // Use [].concat to avoid `do not mutate vuex store state outside mutation handlers`
+        let videosToBeAdded = [].concat(this.toBeAddedToPlaylistVideoList)
+        if (!this.addingDuplicateVideosEnabled) {
+          const playlistVideoIds = playlist.videos.map((v) => v.videoId)
+          videosToBeAdded = videosToBeAdded.filter((v) => !playlistVideoIds.includes(v.videoId))
+        }
+
         this.addVideos({
           _id: playlist._id,
-          // Use [].concat to avoid `do not mutate vuex store state outside mutation handlers`
-          videos: [].concat(this.toBeAddedToPlaylistVideoList),
+          videos: videosToBeAdded,
         })
         addedPlaylistIds.add(playlist._id)
         // Update playlist's `lastUpdatedAt`
@@ -278,6 +315,12 @@ export default defineComponent({
 
     getIconForSortPreference: (s) => getIconForSortPreference(s),
 
+    playlistDisabled(playlistId) {
+      if (this.addingDuplicateVideosEnabled) { return false }
+
+      return this.playlistIdsContainingVideosToBeAdded.includes(playlistId)
+    },
+
     ...mapActions([
       'addVideos',
       'updatePlaylist',

src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue

@@ -28,11 +28,20 @@
       class="optionsRow"
     >
       <ft-toggle-switch
+        class="matchingVideoToggle"
         :label="$t('User Playlists.Playlists with Matching Videos')"
         :compact="true"
         :default-value="doSearchPlaylistsWithMatchingVideos"
         @change="doSearchPlaylistsWithMatchingVideos = !doSearchPlaylistsWithMatchingVideos"
       />
+      <ft-toggle-switch
+        v-if="anyPlaylistContainsVideosToBeAdded"
+        class="allowDuplicateToggle"
+        :label="'Allow Adding Duplicate Video(s)'"
+        :compact="true"
+        :default-value="addingDuplicateVideosEnabled"
+        @change="addingDuplicateVideosEnabled = !addingDuplicateVideosEnabled"
+      />
       <ft-select
         v-if="allPlaylists.length > 1"
         class="sortSelect"
@@ -48,14 +57,18 @@
       <ft-flex-box>
         <div
           v-for="(playlist, index) in activePlaylists"
-          :key="playlist._id"
+          :key="`${playlist._id}-${playlistDisabled(playlist._id)}`"
           class="playlist-selector-container"
+          :class="{
+            disabled: playlistDisabled(playlist._id),
+          }"
         >
           <ft-playlist-selector
-            tabindex="0"
+            :tabindex="playlistDisabled(playlist._id) ? -1 : 0"
             :playlist="playlist"
             :index="index"
             :selected="selectedPlaylistIdList.includes(playlist._id)"
+            :disabled="playlistDisabled(playlist._id)"
             @selected="countSelected(playlist._id)"
           />
         </div>

src/renderer/components/ft-playlist-selector/ft-playlist-selector.js

@@ -24,6 +24,10 @@ export default defineComponent({
       type: Boolean,
       required: true,
     },
+    disabled: {
+      type: Boolean,
+      required: true,
+    },
   },
   emits: ['selected'],
   data: function () {

static/locales/en-US.yaml

@@ -217,7 +217,7 @@ User Playlists:
     Search in Playlists: Search in Playlists
     Save: Save
 
-    Added {count} Times: 'Added {count} Time | Added {count} Times'
+    Added {count} Times: 'Already Added | Added {count} Times'
 
     Toast:
       You haven't selected any playlist yet.: You haven't selected any playlist yet.

static/locales/en_GB.yaml

@@ -190,7 +190,7 @@ User Playlists:
         playlists
     Select a playlist to add your N videos to: Select a playlist to add your video
       to | Select a playlist to add your {videoCount} videos to
-    Added {count} Times: Added {count} time | Added {count} times
+    Added {count} Times: Already Added | Added {count} times
   CreatePlaylistPrompt:
     New Playlist Name: New Playlist name
     Create: Create