From 910304b817d8c9f664efb4a5a280365e1c8e4ba7 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Mon, 15 Jul 2024 23:12:04 +0200
Subject: [PATCH] [Media UI] More URI-persisted navigation items.

- `player`
- `provider`
---
 .../src/components/panels/Media/Browser.vue   | 43 +++++++++++++++++--
 .../src/components/panels/Media/Index.vue     | 26 ++++++++---
 2 files changed, 60 insertions(+), 9 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 b7cdf03f7f..adecd59797 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Browser.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Browser.vue
@@ -37,7 +37,7 @@
 </template>
 
 <script>
-import { defineAsyncComponent, shallowRef } from "vue";
+import { defineAsyncComponent, ref } from "vue";
 import Browser from "@/components/File/Browser";
 import Loading from "@/components/Loading";
 import Utils from "@/Utils";
@@ -103,7 +103,7 @@ export default {
     },
 
     registerMediaProvider(type) {
-      const component = shallowRef(
+      const component = ref(
         defineAsyncComponent(
           () => import(`@/components/panels/Media/Providers/${type}`)
         )
@@ -146,9 +146,41 @@ export default {
         this.mediaProvider = this.mediaProviders[channelMediaProvider]
       }
     },
+
+    updateView() {
+      if (this.getUrlArgs().provider?.length) {
+        const provider = this.getUrlArgs().provider
+        const providerName = this.mediaProvidersLookup[provider.toLowerCase()]
+
+        if (!providerName?.length)
+          return
+
+        this.mediaProvider = this.mediaProviders[providerName]
+      }
+
+      if (this.selectedPlaylist)
+        this.onPlaylistChange()
+      else if (this.selectedChannel)
+        this.onChannelChange()
+    },
   },
 
   watch: {
+    mediaProvider(provider) {
+      if (!provider) {
+        this.setUrlArgs({provider: null})
+        return
+      }
+
+      const providerName = Object.entries(this.mediaProviders)
+        .filter((pair) => pair[1] === provider)?.[0]?.[0]?.toLowerCase()
+
+      if (!providerName?.length)
+        return
+
+      this.setUrlArgs({provider: providerName})
+    },
+
     selectedPlaylist() {
       this.onPlaylistChange()
     },
@@ -160,8 +192,11 @@ export default {
 
   async mounted() {
     await this.refreshMediaProviders()
-    this.onPlaylistChange()
-    this.onChannelChange()
+    this.updateView()
+  },
+
+  unmounted() {
+    this.setUrlArgs({provider: null})
   },
 }
 </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 2da54f7cb3..8b7f8936e0 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Index.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Index.vue
@@ -556,6 +556,14 @@ export default {
       if (args.view) {
         this.selectedView = args.view
       }
+
+      if (args.player && this.players?.length) {
+        this.selectedPlayer = this.players.find((player) => player.name === args.player)
+      }
+
+      if (args.subtitles) {
+        this.selectedSubtitles = args.subtitles
+      }
     },
 
     onDownloadStarted(event) {
@@ -637,21 +645,29 @@ export default {
     },
   },
 
-  async mounted() {
-    this.$watch(() => this.selectedPlayer, (player) => {
+  watch: {
+    selectedPlayer(player) {
+      this.setUrlArgs({player: player?.name})
       if (player)
         this.refresh()
-    })
+    },
 
-    this.$watch(() => this.selectedSubtitles, (subs) => {
+    selectedSubtitles(subs) {
+      this.setUrlArgs({subtitles: this.selectedSubtitles})
       if (new Set(['play', 'pause']).has(this.selectedPlayer?.status?.state)) {
         if (subs)
           this.selectedPlayer.component.addSubtitles(subs)
         else
           this.selectedPlayer.component.removeSubtitles()
       }
-    })
+    },
 
+    selectedView() {
+      this.setUrlArgs({view: this.selectedView})
+    },
+  },
+
+  async mounted() {
     this.torrentPlugin = this.getTorrentPlugin()
     this.subscribe(this.onTorrentQueued,'on-torrent-queued',
         'platypush.message.event.torrent.TorrentQueuedEvent')