refactor: useMagicKeys only, remove unnecessary

throttle, fullscreen improvements

frontend/src/components/Layout/AudioControls.vue

@@ -97,7 +97,7 @@ import { getItemDetailsLink } from '@/utils/items';
 import { playbackManagerStore } from '@/store';
 import { usePlayerKeys } from '@/composables/use-playerkeys';
 
-usePlayerKeys();
+usePlayerKeys(false);
 
 const playbackManager = playbackManagerStore();
 </script>

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;
 });

frontend/src/composables/use-playerkeys.ts

@@ -1,52 +1,51 @@
-import {
-  onKeyStroke,
-  whenever,
-  useMagicKeys,
-  useThrottleFn,
-  noop
-} from '@vueuse/core';
-import playbackManager from '@/store/playbackManager';
-
+import { whenever, useMagicKeys, noop } from '@vueuse/core';
+import { playbackManagerStore, playerElementStore } from '@/store';
 import { isTizen, isWebOS } from '@/utils/browser-detection';
 
 /**
  * Register keyboard player control.
+ * @param fullscreen - Arrow key updates when playback is happening outside of fullscreen are ignored
  * @param osdHandler - show the player osd for a short period whenever a suitable action is called
  */
-export function usePlayerKeys(osdHandler = noop): void {
+export function usePlayerKeys(fullscreen = false, osdHandler = noop): void {
   const keys = useMagicKeys();
+  const playbackManager = playbackManagerStore();
+  const playerElement = playerElementStore();
 
-  whenever(keys.mediapause, playbackManager.pause);
-  whenever(keys.mediaplay, playbackManager.unpause);
-  whenever(keys.mediaplaypause, playbackManager.playPause);
-  whenever(keys.mediastop, playbackManager.stop);
-  whenever(keys.mediatracknext, playbackManager.setNextTrack);
-  whenever(keys.mediatrackprevious, playbackManager.setPreviousTrack);
-  whenever(keys.audiovolumemute, playbackManager.toggleMute);
-
-  whenever(keys.space, playbackManager.playPause);
-  whenever(keys.k, playbackManager.playPause);
-  whenever(keys.m, playbackManager.toggleMute);
-
-  const throttledForwardFn = useThrottleFn(() => {
+  const forwardFn = (): void => {
     playbackManager.skipForward();
     osdHandler();
-  }, 100);
-
-  const throttledBackwardFn = useThrottleFn(() => {
+  };
+  const backwardFn = (): void => {
     playbackManager.skipBackward();
     osdHandler();
-  }, 100);
-
-  onKeyStroke('AudioVolumeUp', playbackManager.volumeUp);
-  onKeyStroke('AudioVolumeDown', playbackManager.volumeDown);
-  onKeyStroke('j', throttledBackwardFn);
-  onKeyStroke('l', throttledForwardFn);
-
-  if (!isTizen() && !isWebOS()) {
-    onKeyStroke('ArrowUp', playbackManager.volumeUp);
-    onKeyStroke('ArrowDown', playbackManager.volumeDown);
-    onKeyStroke('ArrowLeft', throttledBackwardFn);
-    onKeyStroke('ArrowRight', throttledForwardFn);
+  };
+
+  whenever(keys.MediaPause, playbackManager.pause);
+  whenever(keys.Pause, playbackManager.pause);
+  whenever(keys.MediaPlay, playbackManager.unpause);
+  whenever(keys.MediaPlayPause, playbackManager.playPause);
+  whenever(keys.MediaStop, playbackManager.stop);
+  whenever(keys.Exit, playbackManager.stop);
+  whenever(keys.MediaTrackNext, playbackManager.setNextTrack);
+  whenever(keys.MediaTrackPrevious, playbackManager.setPreviousTrack);
+  whenever(keys.MediaFastForward, forwardFn);
+  whenever(keys.MediaRewind, backwardFn);
+  whenever(keys.AudioVolumeMute, playbackManager.toggleMute);
+  whenever(keys.AudioVolumeUp, playbackManager.volumeUp);
+  whenever(keys.AudioVolumeDown, playbackManager.volumeDown);
+
+  whenever(keys.f, playerElement.toggleFullscreenPlayer);
+  whenever(keys.space, playbackManager.playPause);
+  whenever(keys.k, playbackManager.playPause);
+  whenever(keys.m, playbackManager.toggleMute);
+  whenever(keys.j, backwardFn);
+  whenever(keys.l, forwardFn);
+
+  if (!isTizen() && !isWebOS() && fullscreen) {
+    whenever(keys.ArrowUp, playbackManager.volumeUp);
+    whenever(keys.ArrowDown, playbackManager.volumeDown);
+    whenever(keys.ArrowLeft, backwardFn);
+    whenever(keys.ArrowRight, forwardFn);
   }
 }

frontend/src/pages/playback/music/index.vue

@@ -100,7 +100,7 @@ const coverflowEffect = {
   stretch: -400
 };
 
-usePlayerKeys();
+usePlayerKeys(true);
 
 const backdropHash = computed(() => {
   return playbackManager.currentItem

frontend/src/pages/playback/video/index.vue

@@ -174,7 +174,7 @@ function handleMouseMove(): void {
   timeout.start();
 }
 
-usePlayerKeys(handleMouseMove);
+usePlayerKeys(true, handleMouseMove);
 
 onBeforeUnmount(() => {
   if (playerElement.isFullscreenVideoPlayer) {

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;
+        }
+      }
     }
   };