From 380e958d38440a0cbda277cc5331497c9817655d Mon Sep 17 00:00:00 2001 From: PikachuEXE Date: Tue, 4 Jun 2024 09:23:32 +0800 Subject: [PATCH 1/9] * Make it impossible to create playlists with spaces wrapped name & show duplicate playlist message sooner --- .../ft-create-playlist-prompt.js | 22 +++++++++++++------ .../ft-create-playlist-prompt.vue | 8 ++++++- 2 files changed, 22 insertions(+), 8 deletions(-) diff --git a/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.js b/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.js index 1a01b59df898..b89e1fffb6b3 100644 --- a/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.js +++ b/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.js @@ -33,6 +33,16 @@ export default defineComponent({ newPlaylistVideoObject: function () { return this.$store.getters.getNewPlaylistVideoObject }, + + playlistWithNameExists() { + // Don't show the message with no name input + const playlistName = this.playlistName + if (this.playlistName === '') { return false } + + return this.allPlaylists.some((playlist) => { + return playlist.playlistName === playlistName + }) + }, }, mounted: function () { this.playlistName = this.newPlaylistVideoObject.title @@ -40,19 +50,17 @@ export default defineComponent({ nextTick(() => this.$refs.playlistNameInput.focus()) }, methods: { + handlePlaylistNameInput(input) { + this.playlistName = input.trim() + }, + createNewPlaylist: function () { if (this.playlistName === '') { showToast(this.$t('User Playlists.SinglePlaylistView.Toast["Playlist name cannot be empty. Please input a name."]')) return } - const nameExists = this.allPlaylists.findIndex((playlist) => { - return playlist.playlistName === this.playlistName - }) - if (nameExists !== -1) { - showToast(this.$t('User Playlists.CreatePlaylistPrompt.Toast["There is already a playlist with this name. Please pick a different name."]')) - return - } + // Duplicate playlist check moved to template const playlistObject = { playlistName: this.playlistName, diff --git a/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue b/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue index 6c7a43f9ba0a..948197bed1f8 100644 --- a/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue +++ b/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue @@ -15,13 +15,19 @@ :value="playlistName" :maxlength="255" class="playlistNameInput" - @input="(input) => playlistName = input" + @input="(input) => handlePlaylistNameInput(input)" @click="createNewPlaylist" /> + +

+ {{ $t('User Playlists.CreatePlaylistPrompt.Toast["There is already a playlist with this name. Please pick a different name."]') }} +

+ Date: Tue, 4 Jun 2024 09:29:01 +0800 Subject: [PATCH 2/9] * Update default new playlist name to include channel name when copying a remote playlist --- src/renderer/components/playlist-info/playlist-info.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/renderer/components/playlist-info/playlist-info.js b/src/renderer/components/playlist-info/playlist-info.js index 5b23fa15ce04..54df14df2586 100644 --- a/src/renderer/components/playlist-info/playlist-info.js +++ b/src/renderer/components/playlist-info/playlist-info.js @@ -279,7 +279,9 @@ export default defineComponent({ this.showAddToPlaylistPromptForManyVideos({ videos: this.videos, - newPlaylistDefaultProperties: { title: this.title }, + newPlaylistDefaultProperties: { + title: this.channelName === '' ? this.title : `${this.title} | ${this.channelName}`, + }, }) }, From 22cd16ee0986907e908cc56ab0286c2419e76d0a Mon Sep 17 00:00:00 2001 From: PikachuEXE Date: Tue, 4 Jun 2024 13:52:51 +0800 Subject: [PATCH 3/9] * Show duplicate playlist message sooner for blank playlist name --- .../ft-create-playlist-prompt.js | 9 ++++----- .../ft-create-playlist-prompt.vue | 7 ++++++- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.js b/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.js index b89e1fffb6b3..73c33d8de653 100644 --- a/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.js +++ b/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.js @@ -34,6 +34,9 @@ export default defineComponent({ return this.$store.getters.getNewPlaylistVideoObject }, + playlistNameEmpty() { + return this.playlistName === '' + }, playlistWithNameExists() { // Don't show the message with no name input const playlistName = this.playlistName @@ -55,11 +58,7 @@ export default defineComponent({ }, createNewPlaylist: function () { - if (this.playlistName === '') { - showToast(this.$t('User Playlists.SinglePlaylistView.Toast["Playlist name cannot be empty. Please input a name."]')) - return - } - + // Empty playlist name check moved to template // Duplicate playlist check moved to template const playlistObject = { diff --git a/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue b/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue index 948197bed1f8..62ae1d7aa7c8 100644 --- a/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue +++ b/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue @@ -19,6 +19,11 @@ @click="createNewPlaylist" /> + +

+ {{ $t('User Playlists.SinglePlaylistView.Toast["Playlist name cannot be empty. Please input a name."]') }} +

+

{{ $t('User Playlists.CreatePlaylistPrompt.Toast["There is already a playlist with this name. Please pick a different name."]') }} @@ -27,7 +32,7 @@ Date: Wed, 5 Jun 2024 08:19:49 +0800 Subject: [PATCH 4/9] Update per code review Co-authored-by: absidue <48293849+absidue@users.noreply.github.com> --- .../ft-create-playlist-prompt/ft-create-playlist-prompt.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue b/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue index 62ae1d7aa7c8..574d39f6c000 100644 --- a/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue +++ b/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue @@ -15,7 +15,7 @@ :value="playlistName" :maxlength="255" class="playlistNameInput" - @input="(input) => handlePlaylistNameInput(input)" + @input="handlePlaylistNameInput" @click="createNewPlaylist" /> From aa774c5c71487d5b8212998636a43878db2063cc Mon Sep 17 00:00:00 2001 From: PikachuEXE Date: Sat, 8 Jun 2024 10:26:17 +0800 Subject: [PATCH 5/9] * Only show blank playlist name message when spaces input --- .../ft-create-playlist-prompt.js | 9 +++++++++ .../ft-create-playlist-prompt.vue | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.js b/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.js index 73c33d8de653..4a9971b26840 100644 --- a/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.js +++ b/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.js @@ -37,6 +37,9 @@ export default defineComponent({ playlistNameEmpty() { return this.playlistName === '' }, + playlistNameBlank() { + return !this.playlistNameEmpty && this.playlistName.trim() === '' + }, playlistWithNameExists() { // Don't show the message with no name input const playlistName = this.playlistName @@ -54,6 +57,12 @@ export default defineComponent({ }, methods: { handlePlaylistNameInput(input) { + if (input.trim() === '') { + // Need to show message for blank input + this.playlistName = input + return + } + this.playlistName = input.trim() }, diff --git a/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue b/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue index 574d39f6c000..b0d636178ed1 100644 --- a/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue +++ b/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue @@ -19,7 +19,7 @@ @click="createNewPlaylist" /> - +

{{ $t('User Playlists.SinglePlaylistView.Toast["Playlist name cannot be empty. Please input a name."]') }}

From 7472a9588d1de1a851c605aa13e71929f4727c3a Mon Sep 17 00:00:00 2001 From: PikachuEXE Date: Tue, 11 Jun 2024 15:43:51 +0800 Subject: [PATCH 6/9] ! Fix create button not disabled when input name blank (not empty) --- .../ft-create-playlist-prompt/ft-create-playlist-prompt.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue b/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue index b0d636178ed1..200468546d56 100644 --- a/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue +++ b/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue @@ -32,7 +32,7 @@ Date: Tue, 11 Jun 2024 15:45:05 +0800 Subject: [PATCH 7/9] !* Fix message shown in edit mode, update edit mode to show error message for empty/blank/duplicate input playlist name --- .../components/playlist-info/playlist-info.js | 34 +++++++++++ .../playlist-info/playlist-info.vue | 61 ++++++++++++------- 2 files changed, 73 insertions(+), 22 deletions(-) diff --git a/src/renderer/components/playlist-info/playlist-info.js b/src/renderer/components/playlist-info/playlist-info.js index 54df14df2586..1eb8fed1d43d 100644 --- a/src/renderer/components/playlist-info/playlist-info.js +++ b/src/renderer/components/playlist-info/playlist-info.js @@ -159,6 +159,10 @@ export default defineComponent({ return this.$store.getters.getPlaylist(this.id) }, + allPlaylists: function () { + return this.$store.getters.getAllPlaylists + }, + deletePlaylistPromptNames: function () { return [ this.$t('Yes, Delete'), @@ -241,6 +245,26 @@ export default defineComponent({ playlistDeletionDisabledLabel: function () { return this.$t('User Playlists["Cannot delete the quick bookmark target playlist."]') }, + + inputPlaylistNameEmpty() { + return this.newTitle === '' + }, + inputPlaylistNameBlank() { + return !this.inputPlaylistNameEmpty && this.newTitle.trim() === '' + }, + inputPlaylistWithNameExists() { + // Don't show the message with no name input + const playlistName = this.newTitle + const selectedUserPlaylist = this.selectedUserPlaylist + if (this.newTitle === '') { return false } + + return this.allPlaylists.some((playlist) => { + // Only compare with other playlists + if (selectedUserPlaylist._id === playlist._id) { return false } + + return playlist.playlistName === playlistName + }) + }, }, watch: { showDeletePlaylistPrompt(shown) { @@ -269,6 +293,16 @@ export default defineComponent({ document.removeEventListener('keydown', this.keyboardShortcutHandler) }, methods: { + handlePlaylistNameInput(input) { + if (input.trim() === '') { + // Need to show message for blank input + this.newTitle = input + return + } + + this.newTitle = input.trim() + }, + toggleCopyVideosPrompt: function (force = false) { if (this.moreVideoDataAvailable && !this.isUserPlaylist && !force) { showToast(this.$t('User Playlists.SinglePlaylistView.Toast["Some videos in the playlist are not loaded yet. Click here to copy anyway."]'), 5000, () => { diff --git a/src/renderer/components/playlist-info/playlist-info.vue b/src/renderer/components/playlist-info/playlist-info.vue index a5e6c3b33c70..55c074dfaa39 100644 --- a/src/renderer/components/playlist-info/playlist-info.vue +++ b/src/renderer/components/playlist-info/playlist-info.vue @@ -34,35 +34,51 @@
- -

+ + +

+ {{ $t('User Playlists.SinglePlaylistView.Toast["Playlist name cannot be empty. Please input a name."]') }} +

+ + +

+ {{ $t('User Playlists.CreatePlaylistPrompt.Toast["There is already a playlist with this name. Please pick a different name."]') }} +

+ + +

Date: Tue, 11 Jun 2024 16:30:45 +0800 Subject: [PATCH 8/9] $ Fix indentation warning from lint --- src/renderer/components/playlist-info/playlist-info.vue | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/renderer/components/playlist-info/playlist-info.vue b/src/renderer/components/playlist-info/playlist-info.vue index 55c074dfaa39..63c9cfe4e2c8 100644 --- a/src/renderer/components/playlist-info/playlist-info.vue +++ b/src/renderer/components/playlist-info/playlist-info.vue @@ -70,12 +70,12 @@

{{ $tc('Global.Counts.Video Count', videoCount, {count: parsedVideoCount}) }} - - {{ $tc('Global.Counts.View Count', viewCount, {count: parsedViewCount}) }} - + - {{ $tc('Global.Counts.View Count', viewCount, {count: parsedViewCount}) }} + - - {{ $t("Playlist.Last Updated On") }} - + {{ $t("Playlist.Last Updated On") }} + {{ lastUpdated }}

From 429f4e90420ca3841474759c5b2a7fc3769df1e9 Mon Sep 17 00:00:00 2001 From: PikachuEXE Date: Wed, 12 Jun 2024 09:25:25 +0800 Subject: [PATCH 9/9] ! Fix able to create playlist with invalid playlist names --- .../ft-create-playlist-prompt.js | 7 +++++-- .../ft-create-playlist-prompt.vue | 2 +- src/renderer/components/playlist-info/playlist-info.js | 9 +++++---- src/renderer/components/playlist-info/playlist-info.vue | 2 +- 4 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.js b/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.js index 4a9971b26840..f1ca1729aed8 100644 --- a/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.js +++ b/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.js @@ -49,6 +49,9 @@ export default defineComponent({ return playlist.playlistName === playlistName }) }, + playlistPersistenceDisabled() { + return this.playlistNameEmpty || this.playlistNameBlank || this.playlistWithNameExists + }, }, mounted: function () { this.playlistName = this.newPlaylistVideoObject.title @@ -67,8 +70,8 @@ export default defineComponent({ }, createNewPlaylist: function () { - // Empty playlist name check moved to template - // Duplicate playlist check moved to template + // Still possible to attempt to create via pressing enter + if (this.playlistPersistenceDisabled) { return } const playlistObject = { playlistName: this.playlistName, diff --git a/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue b/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue index 200468546d56..fcee4bb114c9 100644 --- a/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue +++ b/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue @@ -32,7 +32,7 @@