From 9ed7026aafba22f9e6fb7581466a69f1051b367e Mon Sep 17 00:00:00 2001 From: Fabio Manganiello Date: Tue, 14 Nov 2023 23:20:53 +0100 Subject: [PATCH] [media UI] Propagate free text filter to all the views. --- .../src/components/panels/Media/Browser.vue | 12 +++++++----- .../src/components/panels/Media/Index.vue | 1 + .../panels/Media/Providers/YouTube.vue | 6 ++++-- .../panels/Media/Providers/YouTube/Feed.vue | 8 ++++++++ .../panels/Media/Providers/YouTube/Playlist.vue | 6 ++++++ .../Media/Providers/YouTube/Playlists.vue | 17 ++++++++++++----- .../src/components/panels/Media/Results.vue | 14 +++++++++++++- 7 files changed, 51 insertions(+), 13 deletions(-) diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Browser.vue b/platypush/backend/http/webapp/src/components/panels/Media/Browser.vue index d25b6143a..5244b21ec 100644 --- a/platypush/backend/http/webapp/src/components/panels/Media/Browser.vue +++ b/platypush/backend/http/webapp/src/components/panels/Media/Browser.vue @@ -23,7 +23,6 @@ @@ -64,22 +63,25 @@ export default { }, methods: { - getMediaProviderComponent(type) { - return shallowRef( + registerMediaProvider(type) { + const component = shallowRef( defineAsyncComponent( () => import(`@/components/panels/Media/Providers/${type}`) ) ) + + this.$options.components[type] = component + this.mediaProviders[type] = component }, async refreshMediaProviders() { const config = await this.request('config.get') this.mediaProviders = {} // The local File provider is always enabled - this.mediaProviders['File'] = this.getMediaProviderComponent('File') + this.registerMediaProvider('File') if (config.youtube) - this.mediaProviders['YouTube'] = this.getMediaProviderComponent('YouTube') + this.registerMediaProvider('YouTube') }, }, diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Index.vue b/platypush/backend/http/webapp/src/components/panels/Media/Index.vue index 421684492..1505d9784 100644 --- a/platypush/backend/http/webapp/src/components/panels/Media/Index.vue +++ b/platypush/backend/http/webapp/src/components/panels/Media/Index.vue @@ -37,6 +37,7 @@ :selected-result="selectedResult" :sources="sources" :loading="loading" + :filter="browserFilter" @select="onResultSelect($event)" @play="play" @view="view" diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube.vue b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube.vue index cd26d4feb..297422e88 100644 --- a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube.vue +++ b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube.vue @@ -7,8 +7,10 @@
- - + diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Feed.vue b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Feed.vue index ef7385f5f..04d0cd7bb 100644 --- a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Feed.vue +++ b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Feed.vue @@ -6,6 +6,7 @@
- +
@@ -45,6 +45,11 @@ export default { type: String, default: null, }, + + filter: { + type: String, + default: null, + }, }, data() { @@ -56,10 +61,12 @@ export default { computed: { playlistsById() { - return this.playlists.reduce((acc, playlist) => { - acc[playlist.id] = playlist - return acc - }, {}) + return this.playlists + .filter(playlist => !this.filter || playlist.name.toLowerCase().includes(this.filter.toLowerCase())) + .reduce((acc, playlist) => { + acc[playlist.id] = playlist + return acc + }, {}) }, }, diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Results.vue b/platypush/backend/http/webapp/src/components/panels/Media/Results.vue index 444e5a250..b82362841 100644 --- a/platypush/backend/http/webapp/src/components/panels/Media/Results.vue +++ b/platypush/backend/http/webapp/src/components/panels/Media/Results.vue @@ -55,6 +55,11 @@ export default { default: () => {}, }, + filter: { + type: String, + default: null, + }, + resultIndexStep: { type: Number, default: 25, @@ -69,7 +74,14 @@ export default { computed: { visibleResults() { - return this.results.slice(0, this.maxResultIndex) + return this.results + .filter((item) => { + if (!this.filter) + return true + + return item.title.toLowerCase().includes(this.filter.toLowerCase()) + }) + .slice(0, this.maxResultIndex) }, },