feat(player): Add media key control support

frontend/locales/en-US.json

@@ -116,8 +116,8 @@
   },
   "images": "Images",
   "incorrectUsernameOrPassword": "Incorrect username or password",
-  "instantMixQueued": "Instant mix added to queue",
   "instantMix": "Instant mix",
+  "instantMixQueued": "Instant mix added to queue",
   "item": {
     "artist": {
       "albums": "Albums",
@@ -218,13 +218,6 @@
     }
   },
   "menu": "Menu",
-  "refreshMetadata": "Refresh metadata",
-  "replaceAllMetadata": "Replace all metadata",
-  "refreshMetadataHint": "Metadata is refreshed based on settings and internet services that are enabled in the Dashboard",
-  "searchMissingMetadata": "Search for missing metadata",
-  "replaceExistingImages": "Replace existing images",
-  "scanForNewAndUpdatedFiles": "Scan for new and updated files",
-  "metadataRefreshQueued": "Metadata refresh enqueued",
   "metadata": {
     "source": "Source",
     "sourceAll": "All",
@@ -233,6 +226,7 @@
   },
   "metadataEditor": "Metadata editor",
   "metadataNoResultsMatching": "No results matching \"{search}\". Press enter to create a new one.",
+  "metadataRefreshQueued": "Metadata refresh enqueued",
   "more": "More",
   "moreLikeArtist": "More like {artist}",
   "moreLikeThis": "More like this",
@@ -317,17 +311,23 @@
   "rating": "Rating",
   "refresh": "Refresh",
   "refreshLibrary": "Refresh library",
+  "refreshMetadata": "Refresh metadata",
+  "refreshMetadataHint": "Metadata is refreshed based on settings and internet services that are enabled in the Dashboard",
   "releaseDate": "Release date",
   "remoteDevices": "Remote devices",
+  "replaceAllMetadata": "Replace all metadata",
+  "replaceExistingImages": "Replace existing images",
   "resumable": "Resumable",
   "resume": "Resume",
   "role": "Role",
   "save": "Save",
   "saved": "Saved",
+  "scanForNewAndUpdatedFiles": "Scan for new and updated files",
   "search": {
     "name": "Search",
     "topResults": "Top results"
   },
+  "searchMissingMetadata": "Search for missing metadata",
   "seasonEpisode": "Season {seasonNumber}, Episode {episodeNumber}",
   "seasonEpisodeAbbrev": "S{seasonNumber} E{episodeNumber}",
   "series": "Series",
@@ -379,6 +379,9 @@
       "noActivityFound": "No activities found",
       "noLogsFound": "No logs found"
     },
+    "playback": {
+      "enableMediaKeys": "Enable keyboard media keys"
+    },
     "settings": "Settings"
   },
   "settingsSections": {
@@ -572,4 +575,4 @@
   "year": "Year",
   "years": "Years",
   "youMayAlsoLike": "You may also like"
-}
+}

frontend/src/pages/settings/index.vue

@@ -163,7 +163,7 @@ const userItems = computed(() => {
       icon: IMdiPlayPause,
       name: t('settingsSections.playback.name'),
       description: t('settingsSections.playback.description'),
-      link: undefined
+      link: 'settings/playback'
     },
     {
       icon: IMdiDiscPlayer,
@@ -213,7 +213,7 @@ const adminSections = computed(() => {
         icon: IMdiKeyChain,
         name: t('settings.apiKeys.apiKeys'),
         description: t('settings.apiKeys.description'),
-        link: '/settings/apikeys'
+        link: 'settings/apikeys'
       }
     ],
     [

frontend/src/pages/settings/playback.vue

@@ -0,0 +1,20 @@
+<template>
+  <settings-page page-title="settingsSections.playback.name">
+    <template #content>
+      <v-checkbox
+        v-model="clientSettings.enableMediaKeys"
+        :label="$t('settings.playback.enableMediaKeys')" />
+    </template>
+  </settings-page>
+</template>
+
+<route lang="yaml">
+meta:
+  admin: true
+</route>
+
+<script setup lang="ts">
+import { clientSettingsStore } from '@/store';
+
+const clientSettings = clientSettingsStore();
+</script>

frontend/src/store/clientSettings.ts

@@ -1,12 +1,15 @@
-import { computed, watch, nextTick } from 'vue';
+import { computed, watch, nextTick, WatchStopHandle } from 'vue';
 import {
   RemovableRef,
   useNavigatorLanguage,
   usePreferredDark,
   useStorage,
-  watchPausable
+  watchPausable,
+  useMagicKeys,
+  whenever
 } from '@vueuse/core';
 import { cloneDeep } from 'lodash-es';
+import { playbackManagerStore } from '@/store';
 import { fetchDefaultedCustomPrefs, syncCustomPrefs } from '@/utils/store-sync';
 import { usei18n, useSnackbar, useRemote, useVuetify } from '@/composables';
 import { mergeExcludingUnknown } from '@/utils/data-manipulation';
@@ -19,6 +22,7 @@ import { mergeExcludingUnknown } from '@/utils/data-manipulation';
 interface ClientSettingsState {
   darkMode: 'auto' | boolean;
   locale: 'auto' | string;
+  enableMediaKeys: boolean;
 }
 
 /**
@@ -36,6 +40,7 @@ const BROWSER_LANGUAGE = computed<string>(() => {
 });
 const browserPrefersDark = usePreferredDark();
 const storeKey = 'clientSettings';
+const mediaKeysUnwatchers = new Array<WatchStopHandle>();
 
 /**
  * == CLASS CONSTRUCTOR ==
@@ -46,7 +51,8 @@ class ClientSettingsStore {
    */
   private _defaultState: ClientSettingsState = {
     darkMode: 'auto',
-    locale: 'auto'
+    locale: 'auto',
+    enableMediaKeys: true
   };
 
   private _state: RemovableRef<ClientSettingsState> = useStorage(
@@ -85,6 +91,14 @@ class ClientSettingsStore {
     return this._state.value.darkMode;
   }
 
+  public set enableMediaKeys(newVal: boolean) {
+    this._state.value.enableMediaKeys = newVal;
+  }
+
+  public get enableMediaKeys(): boolean {
+    return this._state.value.enableMediaKeys;
+  }
+
   private _updateLocale = (): void => {
     const i18n = usei18n();
 
@@ -177,6 +191,37 @@ class ClientSettingsStore {
       { immediate: true }
     );
 
+    /**
+     * enableMediaKeys option change
+     */
+    watch(
+      () => this._state.value.enableMediaKeys,
+      (newState) => {
+        if (newState && mediaKeysUnwatchers.length === 0) {
+          const playbackManager = playbackManagerStore();
+          const keys = useMagicKeys();
+
+          mediaKeysUnwatchers.push(
+            whenever(keys.mediapause, playbackManager.playPause),
+            whenever(keys.mediaplay, playbackManager.playPause),
+            whenever(keys.mediaplaypause, playbackManager.playPause),
+            whenever(keys.mediastop, playbackManager.stop),
+            whenever(keys.mediafastforward, playbackManager.skipForward),
+            whenever(keys.mediarewind, playbackManager.skipBackward),
+            whenever(keys.mediatracknext, playbackManager.setNextTrack),
+            whenever(keys.mediatrackprevious, playbackManager.setPreviousTrack),
+            whenever(keys.audiovolumemute, playbackManager.toggleMute)
+          );
+        } else {
+          for (const unwatch of mediaKeysUnwatchers) {
+            unwatch();
+          }
+
+          mediaKeysUnwatchers.splice(0);
+        }
+      }
+    );
+
     watch(
       () => remote.auth.currentUser,
       () => {

frontend/types/global/routes.d.ts

@@ -31,7 +31,7 @@ import type {
   // data fetching
   _DataLoader,
   _DefineLoaderOptions,
-} from 'unplugin-vue-router/types'
+} from 'unplugin-vue-router'
 
 declare module 'vue-router/auto/routes' {
   export interface RouteNamedMap {
@@ -54,6 +54,7 @@ declare module 'vue-router/auto/routes' {
     'settings-apikeys': RouteRecordInfo<'settings-apikeys', '/settings/apikeys', Record<never, never>, Record<never, never>>,
     'settings-devices': RouteRecordInfo<'settings-devices', '/settings/devices', Record<never, never>, Record<never, never>>,
     'settings-logs-and-activity': RouteRecordInfo<'settings-logs-and-activity', '/settings/logs-and-activity', Record<never, never>, Record<never, never>>,
+    'settings-playback': RouteRecordInfo<'settings-playback', '/settings/playback', Record<never, never>, Record<never, never>>,
     'wizard': RouteRecordInfo<'wizard', '/wizard', Record<never, never>, Record<never, never>>,
   }
 }
@@ -112,7 +113,7 @@ declare module 'vue-router/auto' {
   export function onBeforeRouteUpdate(guard: NavigationGuard<RouteNamedMap>): void
 
   export const RouterLink: RouterLinkTyped<RouteNamedMap>
-
+  
   // Experimental Data Fetching
 
   export function defineLoader<