[Media UI] Support for open-channel events from any media item.

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

@@ -55,6 +55,7 @@
                        :loading="loading"
                        :filter="browserFilter"
                        @add-to-playlist="addToPlaylistItem = $event"
+                       @open-channel="selectChannelFromItem"
                        @select="onResultSelect($event)"
                        @play="play"
                        @view="view"
@@ -643,6 +644,26 @@ export default {
       if (event.path in this.downloads)
         delete this.downloads[event.path]
     },
+
+    selectChannelFromItem(item) {
+      const mediaProvider = item?.type
+      const channelId = (
+        item?.channel_id ||
+        item?.channel?.id ||
+        item?.channel_url.split('/').pop()
+      )
+
+      if (!mediaProvider && channelId == null)
+        return
+
+      this.setUrlArgs({
+        provider: mediaProvider,
+        section: 'subscriptions',
+        channel: channelId,
+      })
+
+      this.selectedView = 'browser'
+    },
   },
 
   watch: {

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

@@ -29,7 +29,7 @@
       </div>
 
       <div class="row subtitle" v-if="item.channel">
-        <a class="channel" :href="item.channel_url" target="_blank">
+        <a class="channel" href="#" target="_blank" @click.prevent="$emit('open-channel')">
           <img :src="item.channel_image" class="channel-image" v-if="item.channel_image" />
           <span class="channel-name" v-text="item.channel" />
         </a>
@@ -55,6 +55,7 @@ export default {
   emits: [
     'add-to-playlist',
     'download',
+    'open-channel',
     'play',
     'remove-from-playlist',
     'select',

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

@@ -10,6 +10,7 @@
         <Feed :filter="filter"
               @add-to-playlist="$emit('add-to-playlist', $event)"
               @download="$emit('download', $event)"
+              @open-channel="selectChannelFromItem"
               @play="$emit('play', $event)"
               v-if="selectedView === 'feed'"
         />
@@ -18,6 +19,7 @@
                    :selected-playlist="selectedPlaylist_"
                    @add-to-playlist="$emit('add-to-playlist', $event)"
                    @download="$emit('download', $event)"
+                   @open-channel="selectChannelFromItem"
                    @play="$emit('play', $event)"
                    @remove-from-playlist="removeFromPlaylist"
                    @select="onPlaylistSelected"
@@ -175,6 +177,21 @@ export default {
       if (this.selectedView)
         this.selectView(this.selectedView)
     },
+
+    async selectChannelFromItem(item) {
+      if (!item.channel_url)
+        return
+
+      const channel = await this.request(
+        'youtube.get_channel',
+        {id: item.channel_url.split('/').pop()}
+      )
+
+      if (!channel)
+        return
+
+      this.onChannelSelected(channel)
+    },
   },
 
   watch: {

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

@@ -48,6 +48,7 @@
                ref="results"
                @add-to-playlist="$emit('add-to-playlist', $event)"
                @download="$emit('download', $event)"
+               @open-channel="$emit('open-channel', $event)"
                @play="$emit('play', $event)"
                @scroll-end="loadNextPage"
                @select="selectedResult = $event"
@@ -66,6 +67,7 @@ export default {
   emits: [
     'add-to-playlist',
     'download',
+    'open-channel',
     'play',
   ],
 

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

@@ -11,6 +11,7 @@
              :selected-result="selectedResult"
              @add-to-playlist="$emit('add-to-playlist', $event)"
              @download="$emit('download', $event)"
+             @open-channel="$emit('open-channel', $event)"
              @select="selectedResult = $event"
              @play="$emit('play', $event)"
              v-else />
@@ -28,6 +29,7 @@ export default {
   emits: [
     'add-to-playlist',
     'download',
+    'open-channel',
     'play',
   ],
 

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

@@ -51,6 +51,7 @@
                :selected-result="selectedResult"
                @add-to-playlist="$emit('add-to-playlist', $event)"
                @download="$emit('download', $event)"
+               @open-channel="$emit('open-channel', $event)"
                @play="$emit('play', $event)"
                @remove-from-playlist="$emit('remove-from-playlist', $event)"
                @select="selectedResult = $event"
@@ -70,6 +71,7 @@ export default {
   emits: [
     'add-to-playlist',
     'download',
+    'open-channel',
     'play',
     'remove-from-playlist',
   ],

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

@@ -32,6 +32,7 @@
         :metadata="playlistsById[selectedPlaylist.id] || selectedPlaylist"
         @add-to-playlist="$emit('add-to-playlist', $event)"
         @download="$emit('download', $event)"
+        @open-channel="$emit('open-channel', $event)"
         @remove-from-playlist="$emit('remove-from-playlist', {item: $event, playlist_id: selectedPlaylist.id})"
         @play="$emit('play', $event)"
       />
@@ -112,6 +113,7 @@ export default {
     'add-to-playlist',
     'create-playlist',
     'download',
+    'open-channel',
     'play',
     'remove-from-playlist',
     'remove-playlist',

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

@@ -9,6 +9,7 @@
             :playlist="playlist"
             :selected="selectedResult === i"
             @add-to-playlist="$emit('add-to-playlist', item)"
+            @open-channel="$emit('open-channel', item)"
             @remove-from-playlist="$emit('remove-from-playlist', item)"
             @select="$emit('select', i)"
             @play="$emit('play', item)"
@@ -36,6 +37,7 @@ export default {
   emits: [
     'add-to-playlist',
     'download',
+    'open-channel',
     'play',
     'remove-from-playlist',
     'scroll-end',