feat: Add a frameless param

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>

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: "",

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>