Add base shortcuts

src/App.vue

@@ -55,6 +55,42 @@ onMounted(() => {
   window
     .matchMedia('(prefers-color-scheme: dark)')
     .addEventListener('change', setTheme);
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (api.state.value === ConnectionState.CONNECTED) {
+      //Ensure the api can communicate with the server
+      if (!store.activePlayerQueue?.active) {
+        //Ensure a player is active
+        const key = e.key;
+        let keyDetected = true;
+
+        if (store.activePlayerQueue && store.activePlayerQueue.active) {
+          //Ensure queue is active to interact with
+          if (key === 'MediaPlayPause' || key === 'Space')
+            api.queueCommandPlayPause(store.activePlayerQueue!.queue_id);
+          if (key === 'MediaStop')
+            api.queueCommandStop(store.activePlayerQueue!.queue_id);
+          if (key === 'MediaTrackPrevious')
+            api.queueCommandPrevious(store.activePlayerQueue!.queue_id);
+          if (key === 'MediaTrackNext')
+            api.queueCommandNext(store.activePlayerQueue!.queue_id);
+        } else if (key === 'AudioVolumeUp')
+          api.playerCommandVolumeUp(store.activePlayer?.player_id || '');
+        else if (key === 'AudioVolumeDown')
+          api.playerCommandVolumeDown(store.activePlayer?.player_id || '');
+        else if (key === 'AudioVolumeMute')
+          api.playerCommandVolumeMute(
+            store.activePlayer?.player_id || '',
+            !store.activePlayer?.volume_muted || false,
+          );
+        else keyDetected = false;
+
+        if (keyDetected) e.preventDefault();
+      }
+    }
+  };
+
+  window.addEventListener('keydown', handleKeyDown, true);
   // Initialize API Connection
   // TODO: retrieve serveraddress through discovery and/or user settings ?
   let serverAddress = '';