feat(player): Add control keys

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();
 
 const playbackManager = playbackManagerStore();
 </script>

frontend/src/composables/use-playerkeys.ts

@@ -0,0 +1,55 @@
+import {
+  onKeyStroke,
+  whenever,
+  useMagicKeys,
+  useThrottleFn
+} from '@vueuse/core';
+import playbackManager from '@/store/playbackManager';
+
+import { isTizen, isWebOS } from '@/utils/browser-detection';
+
+/**
+ * Register keyboard player control.
+ * @param osdHandler - show the player osd for a short period whenever a suitable action is called
+ */
+export function usePlayerKeys(osdHandler?: () => void): void {
+  const keys = useMagicKeys();
+
+  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 callHandler = (): void => {
+    if (osdHandler) {
+      osdHandler();
+    }
+  };
+
+  const throttledForwardFn = useThrottleFn(() => {
+    playbackManager.skipForward();
+    callHandler();
+  }, 100);
+
+  const throttledBackwardFn = useThrottleFn(() => {
+    playbackManager.skipBackward();
+    callHandler();
+  }, 100);
+
+  onKeyStroke(['j', 'ArrowLeft'], throttledBackwardFn);
+  onKeyStroke(['l', 'ArrowRight'], throttledForwardFn);
+  onKeyStroke(['AudioVolumeUp'], playbackManager.volumeUp);
+  onKeyStroke(['AudioVolumeDown'], playbackManager.volumeDown);
+
+  if (!isTizen() && !isWebOS()) {
+    onKeyStroke(['ArrowUp'], playbackManager.volumeUp);
+    onKeyStroke(['ArrowDown'], playbackManager.volumeDown);
+  }
+}

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();
+
 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(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 = Math.min(this.currentVolume + 5, 100);
+  };
+
+  /**
+   * Decrease volume by 5
+   */
+  public volumeDown = (): void => {
+    this.currentVolume = Math.max(this.currentVolume - 5, 0);
+  };
+
   public instantMixFromItem = async (itemId: string): Promise<void> => {
     const items = (
       await remote.sdk.newUserApi(getInstantMixApi).getInstantMixFromItem({