From c95381cead6e7fbaa768f59204aacd40b8a351a5 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Tue, 16 Jul 2024 01:19:29 +0200
Subject: [PATCH] [Media UI] Added more permalinks.

- `channel`
- `playlist`
---
 .../panels/Media/Providers/YouTube.vue        | 29 +++++++++++++++++++
 .../Media/Providers/YouTube/Channel.vue       | 11 +++++--
 .../Media/Providers/YouTube/Playlist.vue      |  5 ++++
 .../Media/Providers/YouTube/Playlists.vue     | 18 ++++++++++--
 .../Media/Providers/YouTube/Subscriptions.vue | 12 ++++++--
 5 files changed, 68 insertions(+), 7 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 811dd5acda..2b93749d74 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
@@ -165,6 +165,16 @@ export default {
         title: channel.name,
       })
     },
+
+    initView() {
+      const args = this.getUrlArgs()
+
+      if (args.section)
+        this.selectedView = args.section
+
+      if (this.selectedView)
+        this.selectView(this.selectedView)
+    },
   },
 
   watch: {
@@ -172,16 +182,35 @@ export default {
       this.onPlaylistSelected(this.selectedPlaylist)
     },
 
+    selectedPlaylist_(value) {
+      if (value == null)
+        this.setUrlArgs({playlist: null})
+    },
+
     selectedChannel() {
       this.onChannelSelected(this.selectedChannel)
     },
+
+    selectedChannel_(value) {
+      if (value == null)
+        this.setUrlArgs({channel: null})
+    },
+
+    selectedView() {
+      this.setUrlArgs({section: this.selectedView})
+    },
   },
 
   mounted() {
     this.loadYoutubeConfig()
+    this.initView()
     this.onPlaylistSelected(this.selectedPlaylist)
     this.onChannelSelected(this.selectedChannel)
   },
+
+  unmounted() {
+    this.setUrlArgs({section: null})
+  },
 }
 </script>
 
diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Channel.vue b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Channel.vue
index 6078c759dd..5127484254 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Channel.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Channel.vue
@@ -162,8 +162,13 @@ export default {
     },
   },
 
-  mounted() {
-    this.loadChannel()
+  async mounted() {
+    this.setUrlArgs({channel: this.id})
+    await this.loadChannel()
+  },
+
+  unmounted() {
+    this.setUrlArgs({channel: null})
   },
 }
 </script>
@@ -187,7 +192,7 @@ export default {
     .actions {
       display: flex;
       flex-direction: column;
-      align-items: center;
+      align-items: flex-end;
 
       button {
         background: $default-bg-7;
diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlist.vue b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlist.vue
index c48ca6fa7f..96c52e632f 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlist.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlist.vue
@@ -132,8 +132,13 @@ export default {
   },
 
   mounted() {
+    this.setUrlArgs({playlist: this.id})
     this.loadItems()
   },
+
+  unmounted() {
+    this.setUrlArgs({playlist: null})
+  },
 }
 </script>
 
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 f1943aa982..6900f98e65 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
@@ -234,8 +234,22 @@ export default {
     },
   },
 
-  mounted() {
-    this.loadPlaylists()
+  async mounted() {
+    await this.loadPlaylists()
+
+    const args = this.getUrlArgs()
+    if (args.playlist) {
+      const playlist = this.playlistsById[args.playlist]
+      if (playlist) {
+        this.$emit('select', playlist)
+      } else {
+        this.$emit('select', {id: args.playlist})
+      }
+    }
+  },
+
+  unmouted() {
+    this.setUrlArgs({section: null})
   },
 }
 </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 57b7e8b481..a1ff46ed10 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
@@ -91,10 +91,18 @@ export default {
         this.loading = false
       }
     },
+
+    initView() {
+      const args = this.getUrlArgs()
+      if (args.channel) {
+        this.$emit('select', {id: args.channel})
+      }
+    },
   },
 
-  mounted() {
-    this.loadSubscriptions()
+  async mounted() {
+    await this.loadSubscriptions()
+    this.initView()
   },
 }
 </script>