feat(player): add media 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,44 @@
+import {
+  onKeyStroke,
+  whenever,
+  useMagicKeys,
+  useThrottleFn
+} from '@vueuse/core';
+import playbackManager from '@/store/playbackManager';
+
+/**
+ * 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.playPause);
+  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();
+  }, 500);
+
+  const throttledBackwardFn = useThrottleFn(() => {
+    playbackManager.skipBackward();
+    callHandler();
+  }, 500);
+
+  onKeyStroke(['j', 'ArrowLeft'], throttledBackwardFn);
+  onKeyStroke(['l', 'ArrowRight'], throttledForwardFn);
+}

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) {