From 70036494ce0beb97dffde36271e9c72e4f675651 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20Fern=C3=A1ndez?= <ferferga@hotmail.com>
Date: Mon, 12 Jun 2023 16:33:56 +0000
Subject: [PATCH] refactor: fullscreen logic

---
 .../components/Playback/PiPVideoPlayer.vue    |  5 ----
 frontend/src/composables/use-playerkeys.ts    |  6 ++++-
 frontend/src/store/playerElement.ts           | 23 ++++++++++++++++---
 3 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Playback/PiPVideoPlayer.vue b/frontend/src/components/Playback/PiPVideoPlayer.vue
index 091d7f6549a..264dc25b7ef 100644
--- a/frontend/src/components/Playback/PiPVideoPlayer.vue
+++ b/frontend/src/components/Playback/PiPVideoPlayer.vue
@@ -71,16 +71,11 @@
 
 <script setup lang="ts">
 import { onMounted, onBeforeUnmount } from 'vue';
-import { useMagicKeys, whenever } from '@vueuse/core';
 import { playbackManagerStore, playerElementStore } from '@/store';
 
 const playerElement = playerElementStore();
 const playbackManager = playbackManagerStore();
 
-const keys = useMagicKeys();
-
-whenever(keys.f, playerElement.toggleFullscreenVideoPlayer);
-
 onMounted(() => {
   playerElement.isPiPMounted = true;
 });
diff --git a/frontend/src/composables/use-playerkeys.ts b/frontend/src/composables/use-playerkeys.ts
index 99b22ba2d4b..d4ef19c474f 100644
--- a/frontend/src/composables/use-playerkeys.ts
+++ b/frontend/src/composables/use-playerkeys.ts
@@ -1,5 +1,5 @@
 import { whenever, useMagicKeys, noop } from '@vueuse/core';
-import playbackManager from '@/store/playbackManager';
+import { playbackManagerStore, playerElementStore } from '@/store';
 import { isTizen, isWebOS } from '@/utils/browser-detection';
 
 /**
@@ -9,6 +9,8 @@ import { isTizen, isWebOS } from '@/utils/browser-detection';
  */
 export function usePlayerKeys(fullscreen = false, osdHandler = noop): void {
   const keys = useMagicKeys();
+  const playbackManager = playbackManagerStore();
+  const playerElement = playerElementStore();
   const forwardFn = (): void => {
     playbackManager.skipForward();
     osdHandler();
@@ -32,6 +34,8 @@ export function usePlayerKeys(fullscreen = false, osdHandler = noop): void {
   whenever(keys.AudioVolumeUp, playbackManager.volumeUp);
   whenever(keys.AudioVolumeDown, playbackManager.volumeDown);
 
+  whenever(keys.f, playerElement.toggleFullscreenPlayer);
+
   if (fullscreen) {
     whenever(keys.space, playbackManager.playPause);
     whenever(keys.k, playbackManager.playPause);
diff --git a/frontend/src/store/playerElement.ts b/frontend/src/store/playerElement.ts
index 426a2af521d..e0f7276714b 100644
--- a/frontend/src/store/playerElement.ts
+++ b/frontend/src/store/playerElement.ts
@@ -72,16 +72,33 @@ class PlayerElementStore {
     return useRouter().currentRoute.value.fullPath === fullscreenVideoRoute;
   }
 
+  public get isFullscreenMusicPlayer(): boolean {
+    return useRouter().currentRoute.value.fullPath === fullscreenMusicRoute;
+  }
+
+  public get isFullscreenPlayer(): boolean {
+    return this.isFullscreenMusicPlayer || this.isFullscreenVideoPlayer;
+  }
+
   /**
    * == ACTIONS ==
    */
-  public toggleFullscreenVideoPlayer = async (): Promise<void> => {
+  public toggleFullscreenPlayer = async (): Promise<void> => {
     const router = useRouter();
 
-    if (this.isFullscreenVideoPlayer) {
+    if (this.isFullscreenPlayer) {
       router.back();
     } else {
-      await router.push(fullscreenVideoRoute);
+      switch (playbackManager.currentlyPlayingMediaType) {
+        case 'Video': {
+          await router.push(fullscreenVideoRoute);
+          break;
+        }
+        case 'Audio': {
+          await router.push(fullscreenMusicRoute);
+          break;
+        }
+      }
     }
   };