[media UI] Propagate free text filter to all the views.

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')
     },
   },
 

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"

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'" />

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: [],

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() {

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
+        }, {})
     },
   },
 

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)
     },
   },