feat: Add a frameless param (#745)

src/layouts/default/Default.vue

@@ -1,8 +1,11 @@
 <template>
   <v-app v-if="store.connected">
-    <PlayerSelect />
-    <MainView />
-    <Footer />
+    <MainView v-if="framelessState" />
+    <template v-else>
+      <PlayerSelect />
+      <MainView />
+      <Footer />
+    </template>
   </v-app>
   <v-overlay
     v-else
@@ -23,6 +26,56 @@ 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 {
+  showFullscreenPlayer?: boolean;
+  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 { 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) => {
+    store.showFullscreenPlayer = !!showFullscreenPlayer;
+  },
+  { 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;
@@ -45,32 +43,6 @@ const props = defineProps<Props>();
 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>