feat(player): Add media key control support

frontend/src/components/Layout/AudioControls.vue

@@ -95,6 +95,9 @@
 <script setup lang="ts">
 import { getItemDetailsLink } from '@/utils/items';
 import { playbackManagerStore } from '@/store';
+import { usePlayerKeys } from '@/composables/use-playerkeys';
+
+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

@@ -0,0 +1,51 @@
+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(fullscreen = false, osdHandler = noop): void {
+  const keys = useMagicKeys();
+  const playbackManager = playbackManagerStore();
+  const playerElement = playerElementStore();
+
+  const forwardFn = (): void => {
+    playbackManager.skipForward();
+    osdHandler();
+  };
+  const backwardFn = (): void => {
+    playbackManager.skipBackward();
+    osdHandler();
+  };
+
+  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

@@ -87,6 +87,7 @@ import { isNil } from 'lodash-es';
 import { useRoute } from 'vue-router';
 import { getBlurhash } from '@/utils/images';
 import { playbackManagerStore } from '@/store';
+import { usePlayerKeys } from '@/composables/use-playerkeys';
 
 const modules = [A11y, Keyboard, Virtual, EffectCoverflow];
 const route = useRoute();
@@ -99,6 +100,8 @@ const coverflowEffect = {
   stretch: -400
 };
 
+usePlayerKeys(true);
+
 const backdropHash = computed(() => {
   return playbackManager.currentItem
     ? getBlurhash(playbackManager.currentItem, ImageType.Primary)

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

@@ -129,6 +129,7 @@ import {
   useMagicKeys,
   whenever
 } from '@vueuse/core';
+import { usePlayerKeys } from '@/composables/use-playerkeys';
 import {
   playbackManagerStore,
   playerElementStore,
@@ -173,6 +174,8 @@ function handleMouseMove(): void {
   timeout.start();
 }
 
+usePlayerKeys(true, handleMouseMove);
+
 onBeforeUnmount(() => {
   if (playerElement.isFullscreenVideoPlayer) {
     playbackManager.stop();
@@ -189,14 +192,7 @@ onMounted(() => {
   playerElement.isFullscreenMounted = true;
 });
 
-whenever(keys.space, playbackManager.playPause);
-whenever(keys.k, playbackManager.playPause);
-whenever(keys.right, playbackManager.skipForward);
-whenever(keys.l, playbackManager.skipForward);
-whenever(keys.left, playbackManager.skipBackward);
-whenever(keys.j, playbackManager.skipBackward);
 whenever(keys.f, fullscreen.toggle);
-whenever(keys.m, playbackManager.toggleMute);
 
 watch(staticOverlay, (val) => {
   if (val) {

frontend/src/store/playbackManager.ts

@@ -949,6 +949,20 @@ class PlaybackManagerStore {
     this.isMuted = !this.isMuted;
   };
 
+  /**
+   * Increase volume by 5
+   */
+  public volumeUp = (): void => {
+    this.currentVolume = this.currentVolume + 5;
+  };
+
+  /**
+   * Decrease volume by 5
+   */
+  public volumeDown = (): void => {
+    this.currentVolume = this.currentVolume - 5;
+  };
+
   public instantMixFromItem = async (itemId: string): Promise<void> => {
     const items = (
       await remote.sdk.newUserApi(getInstantMixApi).getInstantMixFromItem({

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