+ {{ $t('User Playlists.CreatePlaylistPrompt.New Playlist Name') }} +
+- {{ title }} + {{ titleForDisplay }}
@@ -58,7 +58,7 @@
{{ displayTitle }}
diff --git a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.css b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.css
new file mode 100644
index 0000000000000..7fccec88d65f4
--- /dev/null
+++ b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.css
@@ -0,0 +1,36 @@
+.heading {
+ text-align: center;
+}
+
+.selected-count {
+ text-align: center;
+}
+
+/* Style for `ft-prompt` */
+:deep(.promptCard) {
+ /* Currently only this prompt has enough content to make prompt too high */
+ max-block-size: 95%;
+
+ /* Some child(s) will grow vertically */
+ display: flex;
+ flex-direction: column;
+}
+
+.sortSelect {
+ /* Put it on the right */
+ margin-inline-start: auto;
+}
+
+.playlists-container {
+ box-shadow: inset 0 0 5px rgba(0,0,0,.5);
+
+ /* Use remaining height */
+ flex-grow: 1;
+
+ overflow-y: scroll;
+}
+
+.playlist-selector-container {
+ /* Make them look selectable */
+ cursor: pointer;
+}
diff --git a/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.js b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.js
new file mode 100644
index 0000000000000..958fe07ffcca3
--- /dev/null
+++ b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.js
@@ -0,0 +1,261 @@
+import { defineComponent } from 'vue'
+import { mapActions } from 'vuex'
+import debounce from 'lodash.debounce'
+import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
+import FtPrompt from '../ft-prompt/ft-prompt.vue'
+import FtButton from '../ft-button/ft-button.vue'
+import FtPlaylistSelector from '../ft-playlist-selector/ft-playlist-selector.vue'
+import FtInput from '../../components/ft-input/ft-input.vue'
+import FtSelect from '../../components/ft-select/ft-select.vue'
+import {
+ showToast,
+} from '../../helpers/utils'
+
+const SORT_BY_VALUES = {
+ NameAscending: 'name_ascending',
+ NameDescending: 'name_descending',
+
+ LatestCreatedFirst: 'latest_created_first',
+ EarliestCreatedFirst: 'earliest_created_first',
+
+ LatestUpdatedFirst: 'latest_updated_first',
+ EarliestUpdatedFirst: 'earliest_updated_first',
+}
+
+export default defineComponent({
+ name: 'FtPlaylistAddVideoPrompt',
+ components: {
+ 'ft-flex-box': FtFlexBox,
+ 'ft-prompt': FtPrompt,
+ 'ft-button': FtButton,
+ 'ft-playlist-selector': FtPlaylistSelector,
+ 'ft-input': FtInput,
+ 'ft-select': FtSelect,
+ },
+ data: function () {
+ return {
+ selectedPlaylistIdList: [],
+ createdSincePromptShownPlaylistIdList: [],
+ query: '',
+ updateQueryDebounce: function() {},
+ lastShownAt: Date.now(),
+ lastActiveElement: null,
+ sortBy: SORT_BY_VALUES.LatestUpdatedFirst,
+ }
+ },
+ computed: {
+ showingCreatePlaylistPrompt: function () {
+ return this.$store.getters.getShowCreatePlaylistPrompt
+ },
+
+ allPlaylists: function () {
+ const playlists = this.$store.getters.getAllPlaylists
+ return [].concat(playlists).sort((a, b) => {
+ switch (this.sortBy) {
+ case SORT_BY_VALUES.NameAscending:
+ return a.playlistName.localeCompare(b.playlistName, this.locale)
+ case SORT_BY_VALUES.NameDescending:
+ return b.playlistName.localeCompare(a.playlistName, this.locale)
+ case SORT_BY_VALUES.LatestCreatedFirst: {
+ if (a.createdAt > b.createdAt) { return -1 }
+ if (a.createdAt < b.createdAt) { return 1 }
+
+ return a.playlistName.localeCompare(b.playlistName, this.locale)
+ }
+ case SORT_BY_VALUES.EarliestCreatedFirst: {
+ if (a.createdAt < b.createdAt) { return -1 }
+ if (a.createdAt > b.createdAt) { return 1 }
+
+ return a.playlistName.localeCompare(b.playlistName, this.locale)
+ }
+ case SORT_BY_VALUES.LatestUpdatedFirst: {
+ if (a.lastUpdatedAt > b.lastUpdatedAt) { return -1 }
+ if (a.lastUpdatedAt < b.lastUpdatedAt) { return 1 }
+
+ return a.playlistName.localeCompare(b.playlistName, this.locale)
+ }
+ case SORT_BY_VALUES.EarliestUpdatedFirst: {
+ if (a.lastUpdatedAt < b.lastUpdatedAt) { return -1 }
+ if (a.lastUpdatedAt > b.lastUpdatedAt) { return 1 }
+
+ return a.playlistName.localeCompare(b.playlistName, this.locale)
+ }
+ default:
+ console.error(`Unknown sortBy: ${this.sortBy}`)
+ return 0
+ }
+ })
+ },
+ allPlaylistsLength() {
+ return this.allPlaylists.length
+ },
+ selectedPlaylistCount: function () {
+ return this.selectedPlaylistIdList.length
+ },
+ toBeAddedToPlaylistVideoCount: function () {
+ return this.toBeAddedToPlaylistVideoList.length
+ },
+ showAddToPlaylistPrompt: function () {
+ return this.$store.getters.getShowAddToPlaylistPrompt
+ },
+ toBeAddedToPlaylistVideoList: function () {
+ return this.$store.getters.getToBeAddedToPlaylistVideoList
+ },
+ newPlaylistDefaultProperties: function () {
+ return this.$store.getters.getNewPlaylistDefaultProperties
+ },
+
+ processedQuery: function() {
+ return this.query.trim().toLowerCase()
+ },
+ activePlaylists: function() {
+ // Very rare that a playlist name only has 1 char
+ if (this.processedQuery.length === 0) { return this.allPlaylists }
+
+ return this.allPlaylists.filter((playlist) => {
+ if (typeof (playlist.playlistName) !== 'string') { return false }
+
+ return playlist.playlistName.toLowerCase().includes(this.processedQuery)
+ })
+ },
+
+ sortBySelectNames() {
+ return Object.values(SORT_BY_VALUES).map((k) => {
+ switch (k) {
+ case SORT_BY_VALUES.NameAscending:
+ return this.$t('User Playlists.Sort By.NameAscending')
+ case SORT_BY_VALUES.NameDescending:
+ return this.$t('User Playlists.Sort By.NameDescending')
+ case SORT_BY_VALUES.LatestCreatedFirst:
+ return this.$t('User Playlists.Sort By.LatestCreatedFirst')
+ case SORT_BY_VALUES.EarliestCreatedFirst:
+ return this.$t('User Playlists.Sort By.EarliestCreatedFirst')
+ case SORT_BY_VALUES.LatestUpdatedFirst:
+ return this.$t('User Playlists.Sort By.LatestUpdatedFirst')
+ case SORT_BY_VALUES.EarliestUpdatedFirst:
+ return this.$t('User Playlists.Sort By.EarliestUpdatedFirst')
+ default:
+ console.error(`Unknown sortBy: ${k}`)
+ return k
+ }
+ })
+ },
+ sortBySelectValues() {
+ return Object.values(SORT_BY_VALUES)
+ },
+ },
+ watch: {
+ allPlaylistsLength(val, oldVal) {
+ const allPlaylistIds = []
+
+ // Add new playlists to selected
+ this.allPlaylists.forEach((playlist) => {
+ allPlaylistIds.push(playlist._id)
+
+ // Old playlists don't have `createdAt`
+ if (playlist.createdAt == null) { return }
+ // Only playlists created after this prompt shown should be considered
+ if (playlist.createdAt < this.lastShownAt) { return }
+ // Only playlists not auto added to selected yet should be considered
+ if (this.createdSincePromptShownPlaylistIdList.includes(playlist._id)) { return }
+
+ // Add newly created playlists to selected ONCE
+ this.createdSincePromptShownPlaylistIdList.push(playlist._id)
+ this.selectedPlaylistIdList.push(playlist._id)
+ })
+
+ // Remove deleted playlist from deleted
+ this.selectedPlaylistIdList = this.selectedPlaylistIdList.filter(playlistId => {
+ return allPlaylistIds.includes(playlistId)
+ })
+
+ if (val > oldVal) {
+ // Focus back to search input only when playlist added
+ // Allow search and easier deselecting new created playlist
+ this.$refs.searchBar.focus()
+ }
+ },
+
+ showingCreatePlaylistPrompt(val) {
+ if (val) { return }
+
+ // Only care when CreatePlaylistPrompt hidden
+ // Shift focus from button to prevent unwanted click event
+ // due to enter key press in CreatePlaylistPrompt
+ this.$refs.searchBar.focus()
+ },
+ },
+ mounted: function () {
+ this.lastActiveElement = document.activeElement
+
+ this.updateQueryDebounce = debounce(this.updateQuery, 500)
+ // User might want to search first if they have many playlists
+ this.$refs.searchBar.focus()
+ },
+ beforeDestroy() {
+ this.lastActiveElement?.focus()
+ },
+ methods: {
+ hide: function () {
+ this.hideAddToPlaylistPrompt()
+ },
+
+ countSelected: function (playlistId) {
+ const index = this.selectedPlaylistIdList.indexOf(playlistId)
+ if (index !== -1) {
+ this.selectedPlaylistIdList.splice(index, 1)
+ } else {
+ this.selectedPlaylistIdList.push(playlistId)
+ }
+ },
+
+ addSelectedToPlaylists: function () {
+ const addedPlaylistIds = new Set()
+
+ if (this.selectedPlaylistIdList.length === 0) {
+ showToast(this.$t('User Playlists.AddVideoPrompt.Toast["You haven\'t selected any playlist yet."]'))
+ return
+ }
+
+ this.selectedPlaylistIdList.forEach((selectedPlaylistId) => {
+ const playlist = this.allPlaylists.find((list) => list._id === selectedPlaylistId)
+ if (playlist == null) { return }
+
+ this.addVideos({
+ _id: playlist._id,
+ // Use [].concat to avoid `do not mutate vuex store state outside mutation handlers`
+ videos: [].concat(this.toBeAddedToPlaylistVideoList),
+ })
+ addedPlaylistIds.add(playlist._id)
+ // Update playlist's `lastUpdatedAt`
+ this.updatePlaylist({ _id: playlist._id })
+ })
+
+ const translationEntryKey = addedPlaylistIds.size === 1
+ ? 'User Playlists.AddVideoPrompt.Toast.{videoCount} video(s) added to 1 playlist'
+ : 'User Playlists.AddVideoPrompt.Toast.{videoCount} video(s) added to {playlistCount} playlists'
+ showToast(this.$tc(translationEntryKey, this.toBeAddedToPlaylistVideoCount, {
+ videoCount: this.toBeAddedToPlaylistVideoCount,
+ playlistCount: addedPlaylistIds.size,
+ }))
+ this.hide()
+ },
+
+ openCreatePlaylistPrompt: function () {
+ this.showCreatePlaylistPrompt({
+ title: this.newPlaylistDefaultProperties.title || '',
+ })
+ },
+
+ updateQuery: function(query) {
+ this.query = query
+ },
+
+ ...mapActions([
+ 'addVideos',
+ 'updatePlaylist',
+ 'hideAddToPlaylistPrompt',
+ 'showCreatePlaylistPrompt',
+ ])
+ }
+})
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
new file mode 100644
index 0000000000000..3364d0d54b1ac
--- /dev/null
+++ b/src/renderer/components/ft-playlist-add-video-prompt/ft-playlist-add-video-prompt.vue
@@ -0,0 +1,69 @@
+
+
+
+ {{ $tc('User Playlists.AddVideoPrompt.Select a playlist to add your N videos to', toBeAddedToPlaylistVideoCount, {
+ videoCount: toBeAddedToPlaylistVideoCount,
+ }) }}
+
+
+ {{ $tc('User Playlists.AddVideoPrompt.N playlists selected', selectedPlaylistCount, {
+ playlistCount: selectedPlaylistCount,
+ }) }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/renderer/components/ft-playlist-selector/ft-playlist-selector.js b/src/renderer/components/ft-playlist-selector/ft-playlist-selector.js
new file mode 100644
index 0000000000000..50a5008932e1c
--- /dev/null
+++ b/src/renderer/components/ft-playlist-selector/ft-playlist-selector.js
@@ -0,0 +1,75 @@
+import { defineComponent } from 'vue'
+import FtIconButton from '../ft-icon-button/ft-icon-button.vue'
+import { mapActions } from 'vuex'
+
+export default defineComponent({
+ name: 'FtPlaylistSelector',
+ components: {
+ 'ft-icon-button': FtIconButton
+ },
+ props: {
+ data: {
+ type: Object,
+ required: true,
+ },
+ index: {
+ type: Number,
+ required: true,
+ },
+ appearance: {
+ type: String,
+ default: 'grid',
+ },
+ selected: {
+ type: Boolean,
+ required: true,
+ },
+ },
+ data: function () {
+ return {
+ title: '',
+ thumbnail: require('../../assets/img/thumbnail_placeholder.svg'),
+ videoCount: 0,
+ }
+ },
+ computed: {
+ backendPreference: function () {
+ return this.$store.getters.getBackendPreference
+ },
+ currentInvidiousInstance: function () {
+ return this.$store.getters.getCurrentInvidiousInstance
+ },
+
+ titleForDisplay: function () {
+ if (typeof this.title !== 'string') { return '' }
+ if (this.title.length <= 255) { return this.title }
+
+ return `${this.title.substring(0, 255)}...`
+ },
+ },
+ 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`
+ if (this.backendPreference === 'invidious') {
+ this.thumbnail = thumbnailURL.replace('https://i.ytimg.com', this.currentInvidiousInstance)
+ } else {
+ this.thumbnail = thumbnailURL
+ }
+ }
+ this.videoCount = this.data.videos.length
+ },
+
+ toggleSelection: function () {
+ this.$emit('selected', this.index)
+ },
+
+ ...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
new file mode 100644
index 0000000000000..a90ee4aff8f60
--- /dev/null
+++ b/src/renderer/components/ft-playlist-selector/ft-playlist-selector.scss
@@ -0,0 +1,89 @@
+.ft-playlist-selector {
+ padding: 6px;
+
+ &:hover ,
+ &.selected {
+ background-color: var(--bg-color);
+
+ .thumbnailImage {
+ opacity: 0.3;
+ }
+ }
+
+ .thumbnail {
+ position: relative;
+
+ .videoCountContainer {
+ position: absolute;
+
+ inset-inline-end: 0;
+ inset-block: 0;
+ inline-size: 60px;
+
+ font-size: 20px;
+
+ .background,
+ .inner {
+ position: absolute;
+ inset: 0;
+ }
+
+ .background {
+ background-color: var(--bg-color);
+ opacity: 0.9;
+ }
+
+ .inner {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ color: var(--primary-text-color);
+ }
+ }
+ }
+
+ .info {
+ flex: 1;
+ position: relative;
+
+ .title {
+ font-size: 20px;
+ text-decoration: none;
+ word-wrap: break-word;
+ word-break: break-word;
+ }
+ }
+
+ &.grid {
+ display: flex;
+ flex-direction: column;
+
+ inline-size: 245px;
+ min-block-size: 230px;
+ padding-block-end: 20px;
+
+ .thumbnail {
+ margin-block-end: 12px;
+
+ .thumbnailImage {
+ inline-size: 100%;
+ // Ensure placeholder image displayed at same aspect ratio as most other images
+ aspect-ratio: 16/9;
+ }
+ }
+ .title {
+ font-size: 22px;
+ }
+ }
+}
+
+.selectedIcon {
+ position: absolute;
+
+ inset-block-start: calc(50% - 25px);
+ inset-inline-start: calc(50% - 25px);
+
+ font-size: 50px;
+}
diff --git a/src/renderer/components/ft-playlist-selector/ft-playlist-selector.vue b/src/renderer/components/ft-playlist-selector/ft-playlist-selector.vue
new file mode 100644
index 0000000000000..aa63385fe781d
--- /dev/null
+++ b/src/renderer/components/ft-playlist-selector/ft-playlist-selector.vue
@@ -0,0 +1,43 @@
+
+
+
+ ![]()
+
+
+
+ {{ videoCount }}
+
+ {{ $tc('User Playlists.AddVideoPrompt.Select a playlist to add your N videos to', toBeAddedToPlaylistVideoCount, { + videoCount: toBeAddedToPlaylistVideoCount, + }) }} +
++ {{ $tc('User Playlists.AddVideoPrompt.N playlists selected', selectedPlaylistCount, { + playlistCount: selectedPlaylistCount, + }) }} +
+
+
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+ {{ videoCount }}
+
+
+ {{ titleForDisplay }}
+
+
+ - {{ tooltip }} -
+ v-text="tooltip" + /> diff --git a/src/renderer/components/playlist-info/playlist-info.js b/src/renderer/components/playlist-info/playlist-info.js index bf0447a1a425f..7d593ddc44627 100644 --- a/src/renderer/components/playlist-info/playlist-info.js +++ b/src/renderer/components/playlist-info/playlist-info.js @@ -1,36 +1,100 @@ -import { defineComponent } from 'vue' +import { defineComponent, nextTick } from 'vue' +import { mapActions } from 'vuex' import FtShareButton from '../ft-share-button/ft-share-button.vue' -import { copyToClipboard, formatNumber, openExternalLink } from '../../helpers/utils' +import FtFlexBox from '../ft-flex-box/ft-flex-box.vue' +import FtIconButton from '../ft-icon-button/ft-icon-button.vue' +import FtInput from '../ft-input/ft-input.vue' +import FtPrompt from '../ft-prompt/ft-prompt.vue' +import { + showToast, +} from '../../helpers/utils' export default defineComponent({ name: 'PlaylistInfo', components: { - 'ft-share-button': FtShareButton + 'ft-share-button': FtShareButton, + 'ft-flex-box': FtFlexBox, + 'ft-icon-button': FtIconButton, + 'ft-input': FtInput, + 'ft-prompt': FtPrompt, }, props: { - data: { - type: Object, + id: { + type: String, + required: true, + }, + firstVideoId: { + type: String, + required: true, + }, + firstVideoPlaylistItemId: { + type: String, + required: true, + }, + playlistThumbnail: { + type: String, + required: true, + }, + title: { + type: String, + required: true, + }, + channelThumbnail: { + type: String, + required: true, + }, + channelName: { + type: String, + required: true, + }, + channelId: { + type: String, + default: null, + }, + videoCount: { + type: Number, + required: true, + }, + videos: { + type: Array, required: true - } + }, + viewCount: { + type: Number, + required: true, + }, + lastUpdated: { + type: String, + default: undefined, + }, + description: { + type: String, + required: true, + }, + infoSource: { + type: String, + required: true, + }, + moreVideoDataAvailable: { + type: Boolean, + required: true, + }, }, data: function () { return { - id: '', - firstVideoId: '', - playlistThumbnail: '', - title: '', - channelThumbnail: '', - channelName: '', - channelId: null, - videoCount: 0, - viewCount: 0, - lastUpdated: '', - description: '', - infoSource: '' + editMode: false, + showDeletePlaylistPrompt: false, + showRemoveVideosOnWatchPrompt: false, + newTitle: '', + newDescription: '', + deletePlaylistPromptValues: [ + 'yes', + 'no' + ], } }, computed: { - hideSharingActions: function() { + hideSharingActions: function () { return this.$store.getters.getHideSharingActions }, @@ -38,6 +102,10 @@ export default defineComponent({ return this.$store.getters.getCurrentInvidiousInstance }, + historyCacheById: function () { + return this.$store.getters.getHistoryCacheById + }, + thumbnailPreference: function () { return this.$store.getters.getThumbnailPreference }, @@ -58,15 +126,36 @@ export default defineComponent({ return this.$store.getters.getHideVideoViews }, + showPlaylists: function () { + return !this.$store.getters.getHidePlaylists + }, + + selectedUserPlaylist: function () { + return this.$store.getters.getPlaylist(this.id) + }, + + deletePlaylistPromptNames: function () { + return [ + this.$t('Yes'), + this.$t('No') + ] + }, + + firstVideoIdExists() { + return this.firstVideoId !== '' + }, + thumbnail: function () { - if (this.thumbnailPreference === 'hidden') { + if (this.thumbnailPreference === 'hidden' || !this.firstVideoIdExists) { return require('../../assets/img/thumbnail_placeholder.svg') } - let baseUrl + + let baseUrl = 'https://i.ytimg.com' if (this.backendPreference === 'invidious') { baseUrl = this.currentInvidiousInstance - } else { - return this.data.playlistThumbnail + } else if (typeof this.playlistThumbnail === 'string' && this.playlistThumbnail.length > 0) { + // Use playlist thumbnail provided by YT when available + return this.playlistThumbnail } switch (this.thumbnailPreference) { @@ -79,49 +168,160 @@ export default defineComponent({ default: return `${baseUrl}/vi/${this.firstVideoId}/mqdefault.jpg` } - } - }, - mounted: function () { - this.id = this.data.id - this.firstVideoId = this.data.firstVideoId - this.title = this.data.title - this.channelName = this.data.channelName - this.channelThumbnail = this.data.channelThumbnail - this.channelId = this.data.channelId - this.uploadedTime = this.data.uploaded_at - this.description = this.data.description - this.infoSource = this.data.infoSource - - // Causes errors if not put inside of a check - if (typeof (this.data.viewCount) !== 'undefined' && !isNaN(this.data.viewCount)) { - this.viewCount = this.hideViews ? null : formatNumber(this.data.viewCount) - } + }, - if (typeof (this.data.videoCount) !== 'undefined' && !isNaN(this.data.videoCount)) { - this.videoCount = formatNumber(this.data.videoCount) - } + isUserPlaylist() { + return this.infoSource === 'user' + }, + + videoPlaylistType() { + return this.isUserPlaylist ? 'user' : '' + }, + + deletePlaylistButtonVisible: function() { + if (!this.isUserPlaylist) { return false } + // Cannot delete during edit + if (this.editMode) { return false } - this.lastUpdated = this.data.lastUpdated + // Cannot delete protected playlist + return !this.selectedUserPlaylist.protected + }, + + sharePlaylistButtonVisible: function() { + // Only online playlists can be shared + if (this.isUserPlaylist) { return false } + + // Cannot delete protected playlist + return !this.hideSharingActions + }, + }, + watch: { + showDeletePlaylistPrompt(shown) { + this.$emit(shown ? 'prompt-open' : 'prompt-close') + }, + showRemoveVideosOnWatchPrompt(shown) { + this.$emit(shown ? 'prompt-open' : 'prompt-close') + }, + }, + created: function () { + this.newTitle = this.title + this.newDescription = this.description }, methods: { - sharePlaylist: function (method) { - const youtubeUrl = `https://youtube.com/playlist?list=${this.id}` - const invidiousUrl = `${this.currentInvidiousInstance}/playlist?list=${this.id}` - - switch (method) { - case 'copyYoutube': - copyToClipboard(youtubeUrl, { messageOnSuccess: this.$t('Share.YouTube URL copied to clipboard') }) - break - case 'openYoutube': - openExternalLink(youtubeUrl) - break - case 'copyInvidious': - copyToClipboard(invidiousUrl, { messageOnSuccess: this.$t('Share.Invidious URL copied to clipboard') }) - break - case 'openInvidious': - openExternalLink(invidiousUrl) - break + toggleCopyVideosPrompt: function (force = false) { + if (this.moreVideoDataAvailable && !force) { + showToast(this.$t('User Playlists.SinglePlaylistView.Toast["Some videos in the playlist are not loaded yet. Click here to copy anyway."]'), 5000, () => { + this.toggleCopyVideosPrompt(true) + }) + return } - } - } + + this.showAddToPlaylistPromptForManyVideos({ + videos: this.videos, + newPlaylistDefaultProperties: { title: this.title }, + }) + }, + + savePlaylistInfo: function () { + if (this.newTitle === '') { + showToast(this.$t('User Playlists.SinglePlaylistView.Toast["Playlist name cannot be empty. Please input a name."]')) + return + } + + const playlist = { + playlistName: this.newTitle, + protected: this.selectedUserPlaylist.protected, + description: this.newDescription, + videos: this.selectedUserPlaylist.videos, + _id: this.id, + } + try { + this.updatePlaylist(playlist) + showToast(this.$t('User Playlists.SinglePlaylistView.Toast["Playlist has been updated."]')) + } catch (e) { + showToast(this.$t('User Playlists.SinglePlaylistView.Toast["There was an issue with updating this playlist."]')) + console.error(e) + } finally { + this.exitEditMode() + } + }, + + enterEditMode: function () { + this.newTitle = this.title + this.newDescription = this.description + this.editMode = true + + this.$emit('enter-edit-mode') + + nextTick(() => { + // Some elements only present after rendering update + this.$refs.playlistTitleInput.focus() + }) + }, + + exitEditMode: function () { + this.editMode = false + + this.$emit('exit-edit-mode') + }, + + handleRemoveVideosOnWatchPromptAnswer: function (option) { + if (option === 'yes') { + const videosToWatch = this.selectedUserPlaylist.videos.filter((video) => { + return this.historyCacheById[video.videoId] == null + }) + + const removedVideosCount = this.selectedUserPlaylist.videos.length - videosToWatch.length + + if (removedVideosCount === 0) { + showToast(this.$t('User Playlists.SinglePlaylistView.Toast["There were no videos to remove."]')) + this.showRemoveVideosOnWatchPrompt = false + return + } + + const playlist = { + playlistName: this.title, + protected: this.selectedUserPlaylist.protected, + description: this.description, + videos: videosToWatch, + _id: this.id + } + try { + this.updatePlaylist(playlist) + showToast(this.$tc('User Playlists.SinglePlaylistView.Toast.{videoCount} video(s) have been removed', removedVideosCount, { + videoCount: removedVideosCount, + })) + } catch (e) { + showToast(this.$t('User Playlists.SinglePlaylistView.Toast["There was an issue with updating this playlist."]')) + console.error(e) + } + } + this.showRemoveVideosOnWatchPrompt = false + }, + + handleDeletePlaylistPromptAnswer: function (option) { + if (option === 'yes') { + if (this.selectedUserPlaylist.protected) { + showToast(this.$t('User Playlists.SinglePlaylistView.Toast["This playlist is protected and cannot be removed."]')) + } else { + this.removePlaylist(this.id) + this.$router.push( + { + path: '/userPlaylists' + } + ) + showToast(this.$t('User Playlists.SinglePlaylistView.Toast["Playlist {playlistName} has been deleted."]', { + playlistName: this.title, + })) + } + } + this.showDeletePlaylistPrompt = false + }, + + ...mapActions([ + 'showAddToPlaylistPromptForManyVideos', + 'updatePlaylist', + 'removePlaylist', + ]), + }, }) diff --git a/src/renderer/components/playlist-info/playlist-info.scss b/src/renderer/components/playlist-info/playlist-info.scss index 5a64adb2dd716..3fb13c0c0fe8a 100644 --- a/src/renderer/components/playlist-info/playlist-info.scss +++ b/src/renderer/components/playlist-info/playlist-info.scss @@ -2,9 +2,14 @@ inline-size: 100%; } -.playlistThumbnail img { +.playlistThumbnail .firstVideoLink { cursor: pointer; +} + +.playlistThumbnail img { inline-size: 100%; + // Ensure placeholder image displayed at same aspect ratio as most other images + aspect-ratio: 16/9; @media only screen and (max-width: 800px) { display: none; @@ -58,5 +63,12 @@ .channelShareWrapper { column-gap: 8px; display: grid; - grid-template-columns: 1fr auto; + grid-template-columns: auto minmax(min-content, 1fr); +} + +.playlistOptions { + display: grid; + grid-auto-flow: column; + column-gap: 8px; + justify-content: flex-end; } diff --git a/src/renderer/components/playlist-info/playlist-info.vue b/src/renderer/components/playlist-info/playlist-info.vue index bde5b5b083aef..f481205053a4e 100644 --- a/src/renderer/components/playlist-info/playlist-info.vue +++ b/src/renderer/components/playlist-info/playlist-info.vue @@ -4,9 +4,15 @@ class="playlistThumbnail" >
-
+
+
+
{{ title }}
- {{ videoCount }} {{ $t("Playlist.Videos") }} - {{ viewCount }} {{ $t("Playlist.Views") }} - + {{ videoCount }} {{ $t("Playlist.Videos") }} + + - {{ viewCount }} {{ $t("Playlist.Views") }} + + - {{ $t("Playlist.Last Updated On") }} @@ -31,7 +59,16 @@
-
+ - {{ index + 1 }} -
-
+
+
+ + {{ index + 1 }} +
+
+
+
+ {{ $t("User Playlists['This playlist currently has no videos.']") }} +
-
- {{ $t("User Playlists.Your Playlists") }}
-
+
+ {{ $t("User Playlists.Your Playlists") }}
+
+
- + {{ $t("User Playlists.Your Playlists") }} +
+- {{ $t("User Playlists['Your saved videos are empty. Click on the save button on the corner of a video to have it listed here']") }} + {{ $t("User Playlists['You have no playlists. Click on the create new playlist button to create a new one.']") }}
{{ $t("User Playlists['Empty Search Message']") }}