Skip to content

Commit

Permalink
* Make adding duplicate disabled by default
Browse files Browse the repository at this point in the history
  • Loading branch information
PikachuEXE committed Apr 30, 2024
1 parent 9b990bc commit a545dd7
Show file tree
Hide file tree
Showing 6 changed files with 74 additions and 10 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Expand All @@ -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;
}
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ export default defineComponent({
lastShownAt: Date.now(),
lastActiveElement: null,
sortBy: SORT_BY_VALUES.LatestUpdatedFirst,
addingDuplicateVideosEnabled: false,
}
},
computed: {
Expand Down Expand Up @@ -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
},
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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`
Expand Down Expand Up @@ -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',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@ export default defineComponent({
type: Boolean,
required: true,
},
disabled: {
type: Boolean,
required: true,
},
},
emits: ['selected'],
data: function () {
Expand Down
2 changes: 1 addition & 1 deletion static/locales/en-US.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion static/locales/en_GB.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit a545dd7

Please sign in to comment.