Make adding duplicate disabled by default (#5044)

* * Make adding duplicate disabled by default

* * Make additional text work for multi video adding

* * Put controls toward the end

* * Add new label text to translation file

* * Use set instead of array for performance

* * Add aria-disabled to disabled playlist selector

* * Move toggles to the left

Author: PikachuEXE

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

@@ -24,16 +24,29 @@
 
 .optionsRow {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: 1fr;
+  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  align-items: center;
+}
+
+.tightOptions {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(100px, max-content));
+  column-gap: 16px;
   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;
+  }
+
+  .tightOptions {
+    /* Switch to rows from columns */
+    grid-template-columns: auto;
+    grid-template-rows: repeat(auto-fit, auto);
     align-items: stretch;
   }
 }
@@ -51,7 +64,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

@@ -45,6 +45,7 @@ export default defineComponent({
       updateQueryDebounce: function() {},
       lastShownAt: Date.now(),
       sortBy: SORT_BY_VALUES.LatestUpdatedFirst,
+      addingDuplicateVideosEnabled: false,
     }
   },
   computed: {
@@ -111,6 +112,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
     },
@@ -161,6 +165,23 @@ export default defineComponent({
     sortBySelectValues() {
       return Object.values(SORT_BY_VALUES)
     },
+
+    playlistIdsContainingVideosToBeAdded() {
+      const ids = []
+
+      this.allPlaylists.forEach((playlist) => {
+        const playlistVideoIdSet = playlist.videos.reduce((s, v) => s.add(v.videoId), new Set())
+
+        if (this.toBeAddedToPlaylistVideoIdList.every((vid) => playlistVideoIdSet.has(vid))) {
+          ids.push(playlist._id)
+        }
+      })
+
+      return ids
+    },
+    anyPlaylistContainsVideosToBeAdded() {
+      return this.playlistIdsContainingVideosToBeAdded.length > 0
+    },
   },
   watch: {
     allPlaylistsLength(val, oldVal) {
@@ -202,6 +223,16 @@ export default defineComponent({
       // due to enter key press in CreatePlaylistPrompt
       nextTick(() => 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.updateQueryDebounce = debounce(this.updateQuery, 500)
@@ -238,10 +269,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`
@@ -281,6 +318,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,12 +28,25 @@
     <div
       class="optionsRow"
     >
-      <ft-toggle-switch
-        :label="$t('User Playlists.Playlists with Matching Videos')"
-        :compact="true"
-        :default-value="doSearchPlaylistsWithMatchingVideos"
-        @change="doSearchPlaylistsWithMatchingVideos = !doSearchPlaylistsWithMatchingVideos"
-      />
+      <div
+        class="tightOptions"
+      >
+        <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="$t('User Playlists.AddVideoPrompt.Allow Adding Duplicate Video(s)')"
+          :compact="true"
+          :default-value="addingDuplicateVideosEnabled"
+          @change="addingDuplicateVideosEnabled = !addingDuplicateVideosEnabled"
+        />
+      </div>
       <ft-select
         v-if="allPlaylists.length > 1"
         class="sortSelect"
@@ -49,14 +62,20 @@
       <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),
+          }"
+          :aria-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)"
+            :adding-duplicate-videos-enabled="addingDuplicateVideosEnabled"
             @selected="countSelected(playlist._id)"
           />
         </div>

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

@@ -24,6 +24,14 @@ export default defineComponent({
       type: Boolean,
       required: true,
     },
+    disabled: {
+      type: Boolean,
+      required: true,
+    },
+    addingDuplicateVideosEnabled: {
+      type: Boolean,
+      required: true,
+    },
   },
   emits: ['selected'],
   data: function () {
@@ -76,10 +84,40 @@ export default defineComponent({
         count: this.loneVideoPresenceCountInPlaylist,
       })
     },
+    multiVideoPresenceCountInPlaylist() {
+      if (this.toBeAddedToPlaylistVideoList.length < 2) { return null }
+
+      // Count of to be added videos already present in this playlist
+      const v = this.toBeAddedToPlaylistVideoList.reduce((accumulator, toBeAddedToVideo) => {
+        return this.playlist.videos.some((pv) => pv.videoId === toBeAddedToVideo.videoId)
+          ? accumulator + 1
+          : accumulator
+      }, 0)
+      // Don't display zero value
+      return v === 0 ? null : v
+    },
+    multiVideoPresenceCountInPlaylistText() {
+      if (this.multiVideoPresenceCountInPlaylist == null) { return null }
+
+      if (this.addingDuplicateVideosEnabled || this.toBeAddedToPlaylistVideoList.length === this.multiVideoPresenceCountInPlaylist) {
+        return this.$t('User Playlists.AddVideoPrompt.{videoCount}/{totalVideoCount} Videos Already Added', {
+          videoCount: this.multiVideoPresenceCountInPlaylist,
+          totalVideoCount: this.toBeAddedToPlaylistVideoList.length,
+        })
+      }
+
+      return this.$t('User Playlists.AddVideoPrompt.{videoCount}/{totalVideoCount} Videos Will Be Added', {
+        videoCount: this.toBeAddedToPlaylistVideoList.length - this.multiVideoPresenceCountInPlaylist,
+        totalVideoCount: this.toBeAddedToPlaylistVideoList.length,
+      })
+    },
+    videoPresenceCountInPlaylistText() {
+      return this.loneVideoPresenceCountInPlaylistText ?? this.multiVideoPresenceCountInPlaylistText
+    },
     videoPresenceCountInPlaylistTextVisible() {
       if (!this.videoPresenceCountInPlaylistTextShouldBeVisible) { return false }
 
-      return this.loneVideoPresenceCountInPlaylistText != null
+      return this.videoPresenceCountInPlaylistText != null
     },
   },
   created: function () {
@@ -100,6 +138,8 @@ export default defineComponent({
     },
 
     toggleSelection: function () {
+      if (this.disabled) { return }
+
       this.$emit('selected', this.index)
     },
 

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

@@ -45,7 +45,7 @@
         v-if="videoPresenceCountInPlaylistTextVisible"
         class="videoPresenceCount"
       >
-        {{ loneVideoPresenceCountInPlaylistText }}
+        {{ videoPresenceCountInPlaylistText }}
       </div>
     </div>
   </div>

static/locales/en-US.yaml

@@ -236,9 +236,12 @@ User 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'
     N playlists selected: '{playlistCount} Selected'
     Search in Playlists: Search in Playlists
+    Allow Adding Duplicate Video(s): Allow Adding Duplicate Video(s)
     Save: Save
 
-    Added {count} Times: 'Added {count} Time | Added {count} Times'
+    Added {count} Times: 'Already Added | Added {count} Times'
+    "{videoCount}/{totalVideoCount} Videos Will Be Added": '{videoCount}/{totalVideoCount} Videos Will Be Added'
+    "{videoCount}/{totalVideoCount} Videos Already Added": '{videoCount}/{totalVideoCount} Videos Already Added'
 
     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