From 55c4f5797b10a465f0eb29102d63716560809350 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Sat, 13 Jul 2024 00:04:26 +0200
Subject: [PATCH] [YouTube UI] Added support for browsing channels from search
 results.

---
 .../src/components/panels/Media/Browser.vue   | 26 ++++++++++++++--
 .../src/components/panels/Media/Index.vue     | 18 +++++++++--
 .../src/components/panels/Media/Item.vue      |  2 +-
 .../components/panels/Media/MediaImage.vue    | 31 +++++++++++++++++--
 .../panels/Media/Providers/Mixin.vue          |  4 +++
 .../panels/Media/Providers/YouTube.vue        | 17 +++++++---
 .../Media/Providers/YouTube/Subscriptions.vue |  6 ++--
 .../src/components/panels/Media/Results.vue   |  2 +-
 8 files changed, 90 insertions(+), 16 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 0fb9b73caf..8e5a1e2ac0 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Browser.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Browser.vue
@@ -24,6 +24,7 @@
             :is="mediaProvider"
             :filter="filter"
             :selected-playlist="selectedPlaylist"
+            :selected-channel="selectedChannel"
             @add-to-playlist="$emit('add-to-playlist', $event)"
             @back="back"
             @path-change="$emit('path-change', $event)"
@@ -68,6 +69,10 @@ export default {
     selectedPlaylist: {
       type: Object,
     },
+
+    selectedChannel: {
+      type: Object,
+    },
   },
 
   data() {
@@ -116,7 +121,7 @@ export default {
         this.registerMediaProvider('YouTube')
     },
 
-    async onPlaylistChange() {
+    onPlaylistChange() {
       if (!this.selectedPlaylist)
         return
 
@@ -127,17 +132,34 @@ export default {
         this.mediaProvider = this.mediaProviders[playlistMediaProvider]
       }
     },
+
+    onChannelChange() {
+      if (!this.selectedChannel)
+        return
+
+      const channelType = this.selectedChannel.type?.toLowerCase()
+      const channelMediaProvider = this.mediaProvidersLookup[channelType]
+
+      if (channelMediaProvider) {
+        this.mediaProvider = this.mediaProviders[channelMediaProvider]
+      }
+    },
   },
 
   watch: {
     selectedPlaylist() {
       this.onPlaylistChange()
     },
+
+    selectedChannel() {
+      this.onChannelChange()
+    },
   },
 
   async mounted() {
     await this.refreshMediaProviders()
-    await this.onPlaylistChange()
+    this.onPlaylistChange()
+    this.onChannelChange()
   },
 }
 </script>
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 b879242bc1..4088a1850d 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Index.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Index.vue
@@ -53,6 +53,7 @@
 
               <Browser :filter="browserFilter"
                        :selected-playlist="selectedPlaylist"
+                       :selected-channel="selectedChannel"
                        @add-to-playlist="addToPlaylistItem = $event"
                        @back="selectedResult = null"
                        @path-change="browserFilter = ''"
@@ -208,6 +209,17 @@ export default {
 
       return this.results[this.selectedResult]
     },
+
+    selectedChannel() {
+      if (this.selectedResult == null)
+        return null
+
+      const selectedItem = this.results[this.selectedResult]
+      if (selectedItem?.item_type !== 'channel')
+        return null
+
+      return this.results[this.selectedResult]
+    },
   },
 
   methods: {
@@ -410,14 +422,14 @@ export default {
       }
 
       const selectedItem = this.results[this.selectedResult]
-      if (this.selectedResult != null && selectedItem?.item_type === 'playlist') {
-        this.onPlaylistSelect()
+      if (this.selectedResult != null && (selectedItem?.item_type === 'playlist' || selectedItem?.item_type === 'channel')) {
+        this.onBrowserItemSelect()
       } else {
         this.selectedView = this.prevSelectedView || 'search'
       }
     },
 
-    onPlaylistSelect() {
+    onBrowserItemSelect() {
       if (this.prevSelectedView != this.selectedView) {
         this.prevSelectedView = this.selectedView
       }
diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Item.vue b/platypush/backend/http/webapp/src/components/panels/Media/Item.vue
index 371fcc18b8..1fcc18683d 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Item.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Item.vue
@@ -106,7 +106,7 @@ export default {
 
   methods: {
     play() {
-      if (this.item.item_type === 'playlist') {
+      if (this.item.item_type === 'playlist' || this.item.item_type === 'channel') {
         this.select()
         return
       }
diff --git a/platypush/backend/http/webapp/src/components/panels/Media/MediaImage.vue b/platypush/backend/http/webapp/src/components/panels/Media/MediaImage.vue
index 41eae208d0..c459a1320f 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/MediaImage.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/MediaImage.vue
@@ -2,7 +2,7 @@
   <div class="image-container"
        :class="{ 'with-image': !!item?.image }">
     <div class="play-overlay" @click="$emit('play', item)" v-if="hasPlay">
-      <i class="fas fa-play" />
+      <i :class="overlayIconClass" />
     </div>
 
     <span class="icon type-icon" v-if="typeIcons[item?.type]">
@@ -16,7 +16,7 @@
     <img class="image" :src="item.image" :alt="item.title" v-if="item?.image" />
     <div class="image" v-else>
       <div class="inner">
-        <i class="fas fa-play" />
+        <i :class="iconClass" />
       </div>
     </div>
 
@@ -58,6 +58,33 @@ export default {
       typeIcons: Icons,
     }
   },
+
+  computed: {
+    iconClass() {
+      switch (this.item?.item_type) {
+        case 'channel':
+          return 'fas fa-user'
+        case 'playlist':
+          return 'fas fa-list'
+        case 'folder':
+          return 'fas fa-folder'
+        default:
+          return 'fas fa-play'
+      }
+    },
+
+    overlayIconClass() {
+      if (
+        this.item?.item_type === 'channel' ||
+        this.item?.item_type === 'playlist' ||
+        this.item?.item_type === 'folder'
+      ) {
+        return 'fas fa-folder-open'
+      }
+
+      return 'fas fa-play'
+    },
+  },
 }
 </script>
 
diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Providers/Mixin.vue b/platypush/backend/http/webapp/src/components/panels/Media/Providers/Mixin.vue
index 994b706307..e787a68da1 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Providers/Mixin.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Providers/Mixin.vue
@@ -23,6 +23,10 @@ export default {
     selectedPlaylist: {
       default: null,
     },
+
+    selectedChannel: {
+      default: null,
+    },
   },
 
   data() {
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 2de3298bca..e8bdb82674 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
@@ -23,7 +23,7 @@
         />
 
         <Subscriptions :filter="filter"
-                       :selected-channel="selectedChannel"
+                       :selected-channel="selectedChannel_"
                        @play="$emit('play', $event)"
                        @select="onChannelSelected"
                        v-else-if="selectedView === 'subscriptions'"
@@ -63,7 +63,7 @@ export default {
       youtubeConfig: null,
       selectedView: null,
       selectedPlaylist_: null,
-      selectedChannel: null,
+      selectedChannel_: null,
       path: [],
     }
   },
@@ -126,7 +126,7 @@ export default {
       if (view === 'playlists')
         this.selectedPlaylist_ = null
       else if (view === 'subscriptions')
-        this.selectedChannel = null
+        this.selectedChannel_ = null
 
       if (view?.length) {
         this.path = [
@@ -152,7 +152,11 @@ export default {
     },
 
     onChannelSelected(channel) {
-      this.selectedChannel = channel.id
+      this.selectedChannel_ = channel
+      if (!channel)
+        return
+
+      this.selectedView = 'subscriptions'
       this.path.push({
         title: channel.name,
       })
@@ -163,11 +167,16 @@ export default {
     selectedPlaylist() {
       this.onPlaylistSelected(this.selectedPlaylist)
     },
+
+    selectedChannel() {
+      this.onChannelSelected(this.selectedChannel)
+    },
   },
 
   mounted() {
     this.loadYoutubeConfig()
     this.onPlaylistSelected(this.selectedPlaylist)
+    this.onChannelSelected(this.selectedChannel)
   },
 }
 </script>
diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Subscriptions.vue b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Subscriptions.vue
index e97cdf7939..bfcc6317d4 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Subscriptions.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Subscriptions.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="media-youtube-subscriptions">
-    <div class="subscriptions-index" v-if="!selectedChannel">
+    <div class="subscriptions-index" v-if="!selectedChannel?.id">
       <Loading v-if="loading" />
       <NoItems :with-shadow="false" v-else-if="!channels?.length">
         No channels found.
@@ -20,7 +20,7 @@
     </div>
 
     <div class="subscription-body" v-else>
-      <Channel :id="selectedChannel" :filter="filter" @play="$emit('play', $event)" />
+      <Channel :id="selectedChannel.id" :filter="filter" @play="$emit('play', $event)" />
     </div>
   </div>
 </template>
@@ -42,7 +42,7 @@ export default {
 
   props: {
     selectedChannel: {
-      type: String,
+      type: Object,
       default: null,
     },
 
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 6c7e3eab32..2f006ae34d 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Results.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Results.vue
@@ -118,7 +118,7 @@ export default {
 
   mounted() {
     this.$watch('selectedResult', (value) => {
-      if (value?.item_type === 'playlist') {
+      if (value?.item_type === 'playlist' || value?.item_type === 'channel') {
         this.$emit('select', null)
         return
       }