diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.js b/src/renderer/components/ft-icon-button/ft-icon-button.js index 93c4db4df1421..701380f70b708 100644 --- a/src/renderer/components/ft-icon-button/ft-icon-button.js +++ b/src/renderer/components/ft-icon-button/ft-icon-button.js @@ -128,6 +128,11 @@ export default defineComponent({ handleResize: function () { this.useModal = window.innerWidth <= 900 - } + }, + + focus() { + // To be called by parent components + this.$refs.iconButton.focus() + }, } }) diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.vue b/src/renderer/components/ft-icon-button/ft-icon-button.vue index c699f4392ddfc..6699d948b64d8 100644 --- a/src/renderer/components/ft-icon-button/ft-icon-button.vue +++ b/src/renderer/components/ft-icon-button/ft-icon-button.vue @@ -1,6 +1,7 @@ diff --git a/src/renderer/views/Playlist/Playlist.js b/src/renderer/views/Playlist/Playlist.js index 0189325dfe2b2..8dfc3c7869ae5 100644 --- a/src/renderer/views/Playlist/Playlist.js +++ b/src/renderer/views/Playlist/Playlist.js @@ -60,6 +60,9 @@ export default defineComponent({ getPlaylistInfoDebounce: function() {}, playlistInEditMode: false, + playlistInVideoSearchMode: false, + videoSearchQuery: '', + promptOpen: false, } }, @@ -104,7 +107,7 @@ export default defineComponent({ moreVideoDataAvailable() { if (this.isUserPlaylistRequested) { - return this.userPlaylistVisibleLimit < this.videoCount + return this.userPlaylistVisibleLimit < this.sometimesFilteredUserPlaylistItems.length } else { return this.continuationData !== null } @@ -123,17 +126,29 @@ export default defineComponent({ return this.selectedUserPlaylist?._id !== this.quickBookmarkPlaylistId }, + sometimesFilteredUserPlaylistItems() { + if (!this.isUserPlaylistRequested) { return this.playlistItems } + if (this.processedVideoSearchQuery === '') { return this.playlistItems } + + return this.playlistItems.filter((v) => { + return v.title.toLowerCase().includes(this.processedVideoSearchQuery) + }) + }, visiblePlaylistItems: function () { if (!this.isUserPlaylistRequested) { + // No filtering for non user playlists yet return this.playlistItems } - if (this.userPlaylistVisibleLimit < this.videoCount) { - return this.playlistItems.slice(0, this.userPlaylistVisibleLimit) + if (this.userPlaylistVisibleLimit < this.sometimesFilteredUserPlaylistItems.length) { + return this.sometimesFilteredUserPlaylistItems.slice(0, this.userPlaylistVisibleLimit) } else { - return this.playlistItems + return this.sometimesFilteredUserPlaylistItems } - } + }, + processedVideoSearchQuery() { + return this.videoSearchQuery.trim().toLowerCase() + }, }, watch: { $route () { diff --git a/src/renderer/views/Playlist/Playlist.vue b/src/renderer/views/Playlist/Playlist.vue index 81d022609632b..2d93f542a9f1b 100644 --- a/src/renderer/views/Playlist/Playlist.vue +++ b/src/renderer/views/Playlist/Playlist.vue @@ -28,6 +28,9 @@ }" @enter-edit-mode="playlistInEditMode = true" @exit-edit-mode="playlistInEditMode = false" + @search-video-mode-on="playlistInVideoSearchMode = true" + @search-video-mode-off="playlistInVideoSearchMode = false" + @search-video-query-change="(v) => videoSearchQuery = v" @prompt-open="promptOpen = true" @prompt-close="promptOpen = false" /> @@ -39,48 +42,59 @@ - +

+ {{ $t("User Playlists['Empty Search Message']") }} +

-
- -