diff --git a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue index 3364d0d54b1ac..e169fd0156f1d 100644 --- a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue +++ b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue @@ -38,7 +38,7 @@ > { + return video.videoId === this.loneToBeAddedToPlaylistVideo.videoId + ? accumulator + 1 + : accumulator + }, 0) + // Don't display zero value + return v === 0 ? null : v + }, + loneVideoPresenceCountInPlaylistText() { + if (this.loneVideoPresenceCountInPlaylist == null) { return null } + + return this.$tc('User Playlists.AddVideoPrompt.Added {count} Times', this.loneVideoPresenceCountInPlaylist, { + count: this.loneVideoPresenceCountInPlaylist, + }) + }, + videoPresenceCountInPlaylistTextVisible() { + if (!this.videoPresenceCountInPlaylistTextShouldBeVisible) { return false } + + return this.loneVideoPresenceCountInPlaylistText != null + }, }, created: function () { this.parseUserData() }, methods: { parseUserData: function () { - this.title = this.data.playlistName - if (this.data.videos.length > 0) { - const thumbnailURL = `https://i.ytimg.com/vi/${this.data.videos[0].videoId}/mqdefault.jpg` + this.title = this.playlist.playlistName + if (this.playlist.videos.length > 0) { + const thumbnailURL = `https://i.ytimg.com/vi/${this.playlist.videos[0].videoId}/mqdefault.jpg` if (this.backendPreference === 'invidious') { this.thumbnail = thumbnailURL.replace('https://i.ytimg.com', this.currentInvidiousInstance) } else { this.thumbnail = thumbnailURL } } - this.videoCount = this.data.videos.length + this.videoCount = this.playlist.videos.length }, toggleSelection: function () { this.$emit('selected', this.index) }, + onVisibilityChanged(visible) { + if (!visible) { return } + + this.videoPresenceCountInPlaylistTextShouldBeVisible = true + }, + ...mapActions([ 'openInExternalPlayer' ]) diff --git a/src/renderer/components/ft-playlist-selector/ft-playlist-selector.scss b/src/renderer/components/ft-playlist-selector/ft-playlist-selector.scss index a90ee4aff8f60..f887a9962b92e 100644 --- a/src/renderer/components/ft-playlist-selector/ft-playlist-selector.scss +++ b/src/renderer/components/ft-playlist-selector/ft-playlist-selector.scss @@ -54,6 +54,10 @@ word-wrap: break-word; word-break: break-word; } + + .videoPresenceCount { + margin-block-start: 4px; + } } &.grid { diff --git a/src/renderer/components/ft-playlist-selector/ft-playlist-selector.vue b/src/renderer/components/ft-playlist-selector/ft-playlist-selector.vue index aa63385fe781d..060043169c60f 100644 --- a/src/renderer/components/ft-playlist-selector/ft-playlist-selector.vue +++ b/src/renderer/components/ft-playlist-selector/ft-playlist-selector.vue @@ -29,12 +29,24 @@ -
- +
{{ titleForDisplay }} - +
+
+ {{ loneVideoPresenceCountInPlaylistText }} +
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml index 28c578d703327..be959f353a6eb 100644 --- a/static/locales/en-US.yaml +++ b/static/locales/en-US.yaml @@ -201,6 +201,8 @@ User Playlists: Search in Playlists: Search in Playlists Save: Save + Added {count} Times: 'Added {count} Time | Added {count} Times' + Toast: You haven't selected any playlist yet.: You haven't selected any playlist yet. "{videoCount} video(s) added to 1 playlist": "1 video added to 1 playlist | {videoCount} videos added to 1 playlist"