From ae017516c4e2424a76012c597e7c65980be26de3 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Tue, 14 Nov 2023 22:32:25 +0100
Subject: [PATCH] [YouTube UI] Support playlist navigation in the media nav.

---
 .../panels/Media/Providers/YouTube.vue        | 17 +++++++++++++-
 .../Media/Providers/YouTube/Playlists.vue     | 23 +++++++++++++++----
 2 files changed, 35 insertions(+), 5 deletions(-)

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 f94dccac..cd26d4fe 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
@@ -8,7 +8,10 @@
 
       <div class="body" v-else>
         <Feed @play="$emit('play', $event)" v-if="selectedView === 'feed'" />
-        <Playlists @play="$emit('play', $event)" v-if="selectedView === 'playlists'" />
+        <Playlists :selected-playlist="selectedPlaylist"
+                   @play="$emit('play', $event)"
+                   @select="onPlaylistSelected"
+                   v-else-if="selectedView === 'playlists'" />
         <Index @select="selectView" v-else />
       </div>
     </div>
@@ -40,6 +43,7 @@ export default {
     return {
       youtubeConfig: null,
       selectedView: null,
+      selectedPlaylist: null,
       path: [],
     }
   },
@@ -75,16 +79,27 @@ export default {
 
     selectView(view) {
       this.selectedView = view
+      if (view === 'playlists')
+        this.selectedPlaylist = null
+
       if (view?.length) {
         this.path = [
           {
             title: view.slice(0, 1).toUpperCase() + view.slice(1),
+            click: () => this.selectView(view),
           },
         ]
       } else {
         this.path = []
       }
     },
+
+    onPlaylistSelected(playlist) {
+      this.selectedPlaylist = playlist.id
+      this.path.push({
+        title: playlist.name,
+      })
+    },
   },
 
   mounted() {
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 53632829..96b65422 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
@@ -10,7 +10,7 @@
         <div class="playlist item"
              v-for="(playlist, id) in playlistsById"
              :key="id"
-             @click="selectedPlaylist = id">
+             @click="$emit('select', playlist)">
           <MediaImage :item="playlist" :has-play="false" />
           <div class="title">{{ playlist.name }}</div>
         </div>
@@ -31,7 +31,7 @@ import Playlist from "./Playlist";
 import Utils from "@/Utils";
 
 export default {
-  emits: ['play'],
+  emits: ['play', 'select'],
   mixins: [Utils],
   components: {
     Loading,
@@ -40,11 +40,17 @@ export default {
     Playlist,
   },
 
+  props: {
+    selectedPlaylist: {
+      type: String,
+      default: null,
+    },
+  },
+
   data() {
     return {
       playlists: [],
       loading: false,
-      selectedPlaylist: null,
     }
   },
 
@@ -79,11 +85,20 @@ export default {
   height: 100%;
   overflow: auto;
 
-  .item {
+  :deep(.playlist.item) {
     cursor: pointer;
 
+    .title {
+      font-size: 1.1em;
+      margin-top: 0.5em;
+    }
+
     &:hover {
       text-decoration: underline;
+
+      img {
+        filter: contrast(70%);
+      }
     }
   }
 }