From 9ed7026aafba22f9e6fb7581466a69f1051b367e Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
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 d25b6143a3..5244b21ec6 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 @@
         <component
             :is="mediaProvider"
             :filter="filter"
-            ref="mediaProvider"
             @back="mediaProvider = null"
             @path-change="$emit('path-change', $event)"
             @play="$emit('play', $event)" />
@@ -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 421684492a..1505d9784d 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 cd26d4feb3..297422e889 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 @@
       <NoToken v-if="!authToken" />
 
       <div class="body" v-else>
-        <Feed @play="$emit('play', $event)" v-if="selectedView === 'feed'" />
-        <Playlists :selected-playlist="selectedPlaylist"
+        <Feed :filter="filter"
+              @play="$emit('play', $event)" v-if="selectedView === 'feed'" />
+        <Playlists :filter="filter"
+                   :selected-playlist="selectedPlaylist"
                    @play="$emit('play', $event)"
                    @select="onPlaylistSelected"
                    v-else-if="selectedView === 'playlists'" />
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 ef7385f5f3..04d0cd7bb3 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 @@
     </NoItems>
 
     <Results :results="feed"
+             :filter="filter"
              :sources="{'youtube': true}"
              :selected-result="selectedResult"
              @select="selectedResult = $event"
@@ -29,6 +30,13 @@ export default {
     Results,
   },
 
+  props: {
+    filter: {
+      type: String,
+      default: null,
+    },
+  },
+
   data() {
     return {
       feed: [],
diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlist.vue b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlist.vue
index 64a1ee8c5c..d8f13f4904 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlist.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlist.vue
@@ -7,6 +7,7 @@
 
     <Results :results="items"
              :sources="{'youtube': true}"
+             :filter="filter"
              :selected-result="selectedResult"
              @select="selectedResult = $event"
              @play="$emit('play', $event)"
@@ -34,6 +35,11 @@ export default {
       type: String,
       required: true,
     },
+
+    filter: {
+      type: String,
+      default: null,
+    },
   },
 
   data() {
diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlists.vue b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlists.vue
index 96b6542236..2d383e7096 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlists.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlists.vue
@@ -18,7 +18,7 @@
     </div>
 
     <div class="playlist-body" v-else>
-      <Playlist :id="selectedPlaylist" @play="$emit('play', $event)" />
+      <Playlist :id="selectedPlaylist" :filter="filter" @play="$emit('play', $event)" />
     </div>
   </div>
 </template>
@@ -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 444e5a2501..b823628412 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)
     },
   },