From 8ff1dab1db35180c3d6bd71d025d155e07e5f191 Mon Sep 17 00:00:00 2001
From: Felipe Toffolo <felipe.toffolo@gmail.com>
Date: Fri, 22 Nov 2024 14:28:10 +0000
Subject: [PATCH 1/6] feat: Add a frameless param

---
 src/layouts/default/Default.vue | 57 +++++++++++++++++++++++++++++----
 src/plugins/router.ts           | 17 ++++++++++
 src/plugins/store.ts            |  2 ++
 src/views/HomeView.vue          | 29 +----------------
 4 files changed, 71 insertions(+), 34 deletions(-)

diff --git a/src/layouts/default/Default.vue b/src/layouts/default/Default.vue
index 859e8f6e..6eac6628 100644
--- a/src/layouts/default/Default.vue
+++ b/src/layouts/default/Default.vue
@@ -1,9 +1,12 @@
-<template>
-  <v-app v-if="store.connected">
-    <PlayerSelect />
-    <MainView />
-    <Footer />
-  </v-app>
+<template>  
+  <v-app  v-if="store.connected">
+    <MainView v-if="framelessState" />
+    <template v-else>
+      <PlayerSelect />
+      <MainView />
+      <Footer />
+    </template>
+    </v-app>
   <v-overlay
     v-else
     class="centeredoverlay"
@@ -23,6 +26,48 @@ import Footer from "./Footer.vue";
 import PlayerSelect from "./PlayerSelect.vue";
 import ReloadPrompt from "./ReloadPrompt.vue";
 import { store } from "@/plugins/store";
+import { toRefs, watch, ref } from "vue";
+import api from "@/plugins/api";
+
+
+export interface Props {
+  targetPlayer?: string;
+  player?: string;
+  frameless?: boolean
+}
+
+const props = defineProps<Props>();
+
+// keep this in a ref so that we keep it while navigating. But restart it if page is fully reloaded
+const framelessState = ref(false)
+
+const { targetPlayer, player, frameless } = toRefs(props);
+
+watch([targetPlayer, player], ([targetPlayer, player]) => {
+  // give preference for player if it's a string
+  const newActivePlayer = typeof player === "string" ? player : targetPlayer
+  if (!newActivePlayer) return;
+      // newActivePlayer can be either player id or player name
+      const newPlayerId = Object.values(api.players).find(p =>{
+        return p.player_id === newActivePlayer || p.display_name.toLowerCase() === newActivePlayer.toLowerCase()
+      })?.player_id
+
+      if(newPlayerId){
+        store.activePlayerId = newPlayerId;
+
+      }
+
+    //showFullscreenPlayer if the param player is defined at all
+    store.showFullscreenPlayer = !!player;
+  },
+  { immediate: true },
+);
+
+watch(frameless, (frameless)=>{
+  if(frameless){
+    framelessState.value = true
+  }
+}, {immediate: true})
 </script>
 
 <style scoped>
diff --git a/src/plugins/router.ts b/src/plugins/router.ts
index a06ddf28..054b97ca 100644
--- a/src/plugins/router.ts
+++ b/src/plugins/router.ts
@@ -5,6 +5,7 @@ const routes = [
   {
     path: "/",
     component: () => import("@/layouts/default/Default.vue"),
+    props: (route: { query: Record<string, any> }) => ({ ...route.query }),
     children: [
       {
         path: "",
@@ -257,6 +258,22 @@ const router = createRouter({
   routes,
 });
 
+// // Global navigation guard to preserve query params
+// router.beforeEach((to, from, next) => {
+//   // we want to keep frameless between navigation
+//   console.log(JSON.stringify(from.query) !== JSON.stringify(to.query), from, to)
+//   if (to.path && JSON.stringify(from.query) !== JSON.stringify(to.query)) {
+//     const frameless = to.query?.frameless || from.query?.frameless
+//     // Merge current query params with the new ones if they exist
+//     const mergedQuery = !!frameless ? { ...to.query, frameless } : to.query ;
+//     console.log({mergedQuery})
+//     next({ path: to.path, query: mergedQuery });
+//   } else {
+//     next()
+//   }
+
+// });
+
 router.afterEach((to, from) => {
   if (!from?.path) return;
   console.debug("navigating from ", from.path, " to ", to.path);
diff --git a/src/plugins/store.ts b/src/plugins/store.ts
index fc69cf5c..2955ab5d 100644
--- a/src/plugins/store.ts
+++ b/src/plugins/store.ts
@@ -41,6 +41,7 @@ interface Store {
   libraryPlaylistsCount?: number;
   libraryRadiosCount?: number;
   connected?: boolean;
+  frameless?: boolean;
   isTouchscreen: boolean;
 }
 
@@ -89,5 +90,6 @@ export const store: Store = reactive({
   libraryPlaylistsCount: undefined,
   libraryRadiosCount: undefined,
   connected: false,
+  frameless: false,
   isTouchscreen: isTouchscreenDevice(),
 });
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index b84113e3..cb984d57 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -33,9 +33,7 @@
 import Container from "@/components/mods/Container.vue";
 import HomeWidgetRows from "@/components/HomeWidgetRows.vue";
 import Toolbar from "@/components/Toolbar.vue";
-import { ref, watch } from "vue";
-import { store } from "@/plugins/store";
-import api from "@/plugins/api";
+import { ref } from "vue";
 
 export interface Props {
   player?: string;
@@ -46,31 +44,6 @@ const hideSettings = ref(
   localStorage.getItem("frontend.settings.hide_settings") == "true",
 );
 
-const urlParams = new URLSearchParams(window.location.search);
-console.log(urlParams.toString());
-
-watch(
-  () => props.player,
-  (val) => {
-    console.error("props.player", val);
-    if (!val || val == "false") return;
-    if (typeof val === "string") {
-      // val can be either player id or player name
-      if (val in api.players) {
-        store.activePlayerId = api.players[val].player_id;
-      } else {
-        for (const player of Object.values(api.players)) {
-          if (player.display_name.toLowerCase() === val.toLowerCase()) {
-            store.activePlayerId = player.player_id;
-            break;
-          }
-        }
-      }
-    }
-    store.showFullscreenPlayer = true;
-  },
-  { immediate: true },
-);
 </script>
 
 <style scoped>

From 51c6c83480750ba4710dd454d0be59e4492d5257 Mon Sep 17 00:00:00 2001
From: Felipe Toffolo <felipe.toffolo@gmail.com>
Date: Fri, 22 Nov 2024 14:43:18 +0000
Subject: [PATCH 2/6] chore: remove unused

---
 src/plugins/router.ts | 16 ----------------
 src/plugins/store.ts  |  2 --
 2 files changed, 18 deletions(-)

diff --git a/src/plugins/router.ts b/src/plugins/router.ts
index 054b97ca..6f846b18 100644
--- a/src/plugins/router.ts
+++ b/src/plugins/router.ts
@@ -258,22 +258,6 @@ const router = createRouter({
   routes,
 });
 
-// // Global navigation guard to preserve query params
-// router.beforeEach((to, from, next) => {
-//   // we want to keep frameless between navigation
-//   console.log(JSON.stringify(from.query) !== JSON.stringify(to.query), from, to)
-//   if (to.path && JSON.stringify(from.query) !== JSON.stringify(to.query)) {
-//     const frameless = to.query?.frameless || from.query?.frameless
-//     // Merge current query params with the new ones if they exist
-//     const mergedQuery = !!frameless ? { ...to.query, frameless } : to.query ;
-//     console.log({mergedQuery})
-//     next({ path: to.path, query: mergedQuery });
-//   } else {
-//     next()
-//   }
-
-// });
-
 router.afterEach((to, from) => {
   if (!from?.path) return;
   console.debug("navigating from ", from.path, " to ", to.path);
diff --git a/src/plugins/store.ts b/src/plugins/store.ts
index 2955ab5d..fc69cf5c 100644
--- a/src/plugins/store.ts
+++ b/src/plugins/store.ts
@@ -41,7 +41,6 @@ interface Store {
   libraryPlaylistsCount?: number;
   libraryRadiosCount?: number;
   connected?: boolean;
-  frameless?: boolean;
   isTouchscreen: boolean;
 }
 
@@ -90,6 +89,5 @@ export const store: Store = reactive({
   libraryPlaylistsCount: undefined,
   libraryRadiosCount: undefined,
   connected: false,
-  frameless: false,
   isTouchscreen: isTouchscreenDevice(),
 });

From a4ed4379056fe8b3493e3d2f4085f841bec64120 Mon Sep 17 00:00:00 2001
From: Felipe Toffolo <felipe.toffolo@gmail.com>
Date: Fri, 22 Nov 2024 14:58:28 +0000
Subject: [PATCH 3/6] Update src/layouts/default/Default.vue

Co-authored-by: Marcel van der Veldt <m.vanderveldt@outlook.com>
---
 src/layouts/default/Default.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/default/Default.vue b/src/layouts/default/Default.vue
index 6eac6628..bfcca14f 100644
--- a/src/layouts/default/Default.vue
+++ b/src/layouts/default/Default.vue
@@ -57,7 +57,7 @@ watch([targetPlayer, player], ([targetPlayer, player]) => {
 
       }
 
-    //showFullscreenPlayer if the param player is defined at all
+    // showFullscreenPlayer if the param player is defined at all
     store.showFullscreenPlayer = !!player;
   },
   { immediate: true },

From 02d3260718e1822828a1ca76fbf27e0eb7aee116 Mon Sep 17 00:00:00 2001
From: Felipe Toffolo <felipe.toffolo@gmail.com>
Date: Fri, 22 Nov 2024 14:58:36 +0000
Subject: [PATCH 4/6] Update src/layouts/default/Default.vue

Co-authored-by: Marcel van der Veldt <m.vanderveldt@outlook.com>
---
 src/layouts/default/Default.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/default/Default.vue b/src/layouts/default/Default.vue
index bfcca14f..c62c28af 100644
--- a/src/layouts/default/Default.vue
+++ b/src/layouts/default/Default.vue
@@ -67,7 +67,7 @@ watch(frameless, (frameless)=>{
   if(frameless){
     framelessState.value = true
   }
-}, {immediate: true})
+}, { immediate: true })
 </script>
 
 <style scoped>

From 517f1d71ec6e4443cef25f8a54030e98474a5a4d Mon Sep 17 00:00:00 2001
From: Felipe Toffolo <felipe.toffolo@gmail.com>
Date: Fri, 22 Nov 2024 15:58:18 +0000
Subject: [PATCH 5/6] chore: use a separated param for showFullscreenPlayer

---
 src/layouts/default/Default.vue | 65 +++++++++++++++++++--------------
 src/views/HomeView.vue          |  1 -
 2 files changed, 37 insertions(+), 29 deletions(-)

diff --git a/src/layouts/default/Default.vue b/src/layouts/default/Default.vue
index c62c28af..020ec3e3 100644
--- a/src/layouts/default/Default.vue
+++ b/src/layouts/default/Default.vue
@@ -1,12 +1,12 @@
-<template>  
-  <v-app  v-if="store.connected">
+<template>
+  <v-app v-if="store.connected">
     <MainView v-if="framelessState" />
     <template v-else>
       <PlayerSelect />
       <MainView />
       <Footer />
     </template>
-    </v-app>
+  </v-app>
   <v-overlay
     v-else
     class="centeredoverlay"
@@ -29,45 +29,54 @@ import { store } from "@/plugins/store";
 import { toRefs, watch, ref } from "vue";
 import api from "@/plugins/api";
 
-
 export interface Props {
-  targetPlayer?: string;
+  showFullscreenPlayer?: boolean;
   player?: string;
-  frameless?: boolean
+  frameless?: boolean;
 }
 
 const props = defineProps<Props>();
 
 // keep this in a ref so that we keep it while navigating. But restart it if page is fully reloaded
-const framelessState = ref(false)
-
-const { targetPlayer, player, frameless } = toRefs(props);
-
-watch([targetPlayer, player], ([targetPlayer, player]) => {
-  // give preference for player if it's a string
-  const newActivePlayer = typeof player === "string" ? player : targetPlayer
-  if (!newActivePlayer) return;
-      // newActivePlayer can be either player id or player name
-      const newPlayerId = Object.values(api.players).find(p =>{
-        return p.player_id === newActivePlayer || p.display_name.toLowerCase() === newActivePlayer.toLowerCase()
-      })?.player_id
+const framelessState = ref(false);
 
-      if(newPlayerId){
-        store.activePlayerId = newPlayerId;
+const { showFullscreenPlayer, player, frameless } = toRefs(props);
 
-      }
+watch(
+  player,
+  (newActivePlayer) => {
+    if (!newActivePlayer) return;
+    // newActivePlayer can be either player id or player name
+    const newPlayerId = Object.values(api.players).find((p) => {
+      return (
+        p.player_id === newActivePlayer ||
+        p.display_name.toLowerCase() === newActivePlayer.toLowerCase()
+      );
+    })?.player_id;
 
+    if (newPlayerId) {
+      store.activePlayerId = newPlayerId;
+    }
+  },
+  { immediate: true },
+);
+watch(
+  showFullscreenPlayer,
+  (showFullscreenPlayer) => {
     // showFullscreenPlayer if the param player is defined at all
-    store.showFullscreenPlayer = !!player;
+    store.showFullscreenPlayer = !!showFullscreenPlayer;
+  },
+  { immediate: true },
+);
+watch(
+  frameless,
+  (frameless) => {
+    if (frameless) {
+      framelessState.value = true;
+    }
   },
   { immediate: true },
 );
-
-watch(frameless, (frameless)=>{
-  if(frameless){
-    framelessState.value = true
-  }
-}, { immediate: true })
 </script>
 
 <style scoped>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index cb984d57..2f2fe40e 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -43,7 +43,6 @@ const props = defineProps<Props>();
 const hideSettings = ref(
   localStorage.getItem("frontend.settings.hide_settings") == "true",
 );
-
 </script>
 
 <style scoped>

From 98acfc80490e20aa2898c23342885e5fbc6bfbd6 Mon Sep 17 00:00:00 2001
From: Felipe Toffolo <felipe.toffolo@gmail.com>
Date: Fri, 22 Nov 2024 16:01:35 +0000
Subject: [PATCH 6/6] chore: remove comment

---
 src/layouts/default/Default.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/layouts/default/Default.vue b/src/layouts/default/Default.vue
index 020ec3e3..70333fe9 100644
--- a/src/layouts/default/Default.vue
+++ b/src/layouts/default/Default.vue
@@ -63,7 +63,6 @@ watch(
 watch(
   showFullscreenPlayer,
   (showFullscreenPlayer) => {
-    // showFullscreenPlayer if the param player is defined at all
     store.showFullscreenPlayer = !!showFullscreenPlayer;
   },
   { immediate: true },