[Media UI] Support for playlists in search results.

platypush/backend/http/webapp/src/components/panels/Media/Index.vue

@@ -148,6 +148,7 @@ export default {
       selectedPlayer: null,
       selectedView: 'search',
       selectedSubtitles: null,
+      prevSelectedView: null,
       showSubtitlesModal: false,
       forceShowNav: false,
       awaitingPlayTorrent: null,
@@ -394,6 +395,16 @@ export default {
       } else {
         this.selectedResult = null
       }
+
+      if (this.selectedResult != null && this.results[this.selectedResult]?.item_type === 'playlist') {
+        if (this.prevSelectedView != this.selectedView) {
+          this.prevSelectedView = this.selectedView
+        }
+
+        this.selectedView = 'browser'
+      } else {
+        this.selectedView = this.prevSelectedView || 'search'
+      }
     },
 
     showPlayUrlModal() {

platypush/backend/http/webapp/src/components/panels/Media/Item.vue

@@ -3,39 +3,43 @@
     class="item media-item"
     :class="{selected: selected}"
     @click.right.prevent="$refs.dropdown.toggle()"
-    v-if="!hidden">
-
+    v-if="!hidden"
+  >
     <div class="thumbnail">
-      <MediaImage :item="item" @play="$emit('play')" />
+      <MediaImage :item="item" @play="play" />
     </div>
 
     <div class="body">
       <div class="row title">
-        <div class="col-11 left side" v-text="item.title" @click="$emit('select')" />
+        <div class="col-11 left side" v-text="item.title || item.name" @click="select" />
         <div class="col-1 right side">
           <Dropdown title="Actions" icon-class="fa fa-ellipsis-h" ref="dropdown">
-            <DropdownItem icon-class="fa fa-play" text="Play" @click="$emit('play')"
-                          v-if="item.type !== 'torrent'" />
+            <DropdownItem icon-class="fa fa-play" text="Play" @click="play"
+                          v-if="item.type !== 'torrent' && item.item_type !== 'channel' && item.item_type !== 'playlist'" />
             <DropdownItem icon-class="fa fa-download" text="Download" @click="$emit('download')"
-                          v-if="item.type === 'torrent'" />
+                          v-if="item.type === 'torrent' && item.item_type !== 'channel' && item.item_type !== 'playlist'" />
             <DropdownItem icon-class="fa fa-window-maximize" text="View in browser" @click="$emit('view')"
-                          v-if="item.type === 'file'" />
+                          v-if="item.type === 'file' && item.item_type !== 'channel' && item.item_type !== 'playlist'" />
             <DropdownItem icon-class="fa fa-list" text="Add to playlist" @click="$emit('add-to-playlist')"
-                          v-if="item.type === 'youtube'" />
+                          v-if="item.type === 'youtube' && item.item_type !== 'channel' && item.item_type !== 'playlist'" />
             <DropdownItem icon-class="fa fa-trash" text="Remove from playlist" @click="$refs.confirmPlaylistRemove.open()"
-                          v-if="playlist" />
-            <DropdownItem icon-class="fa fa-info-circle" text="Info" @click="$emit('select')" />
+                          v-if="playlist && item.item_type !== 'channel' && item.item_type !== 'playlist'" />
+            <DropdownItem icon-class="fa fa-info-circle" text="Info" @click="select" />
           </Dropdown>
         </div>
       </div>
 
-      <div class="row subtitle" v-if="item.channel">
+      <div class="row subtitle" v-if="item.channel_url">
         <a class="channel" :href="item.channel_url" target="_blank">
           <img :src="item.channel_image" class="channel-image" v-if="item.channel_image" />
           <span class="channel-name" v-text="item.channel" />
         </a>
       </div>
 
+      <div class="row subtitle" v-if="item.item_type && item.item_type !== 'video'">
+        <span class="type" v-text="item.item_type[0].toUpperCase() + item.item_type.slice(1)" />
+      </div>
+
       <div class="row creation-date" v-if="item.created_at">
         {{ formatDateTime(item.created_at, true) }}
       </div>
@@ -99,6 +103,21 @@ export default {
       typeIcons: Icons,
     }
   },
+
+  methods: {
+    play() {
+      if (this.item.item_type === 'playlist') {
+        this.select()
+        return
+      }
+
+      this.$emit('play');
+    },
+
+    select() {
+      this.$emit('select');
+    },
+  },
 }
 </script>
 

platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlist.vue

@@ -48,6 +48,11 @@ export default {
       type: String,
       default: null,
     },
+
+    playlist: {
+      type: Object,
+      default: null,
+    },
   },
 
   data() {

platypush/backend/http/webapp/src/components/panels/Media/Results.vue

@@ -118,6 +118,11 @@ export default {
 
   mounted() {
     this.$watch('selectedResult', (value) => {
+      if (value?.item_type === 'playlist') {
+        this.$emit('select', null)
+        return
+      }
+
       if (value == null)
         this.$refs.infoModal?.close()
       else