[Media UI] Added more permalinks.

- `channel`
- `playlist`

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>
 

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;

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>
 

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>

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>