refactor: fullscreen logic

jellyfin · Jun 12, 2023 · 7003649 · 7003649
1 parent 9ecd04a
commit 7003649
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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;
+        }
+      }
     }
   };