Add hotkey controls to relevant pages

src/renderer/features/player/components/center-controls.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { useHotkeys } from '@mantine/hooks';
 import formatDuration from 'format-duration';
 import isElectron from 'is-electron';
 import { IoIosPause } from 'react-icons/io';
@@ -25,7 +26,11 @@ import {
   useShuffleStatus,
   useCurrentTime,
 } from '/@/renderer/store';
-import { usePlayerType, useSettingsStore } from '/@/renderer/store/settings.store';
+import {
+  useHotkeySettings,
+  usePlayerType,
+  useSettingsStore,
+} from '/@/renderer/store/settings.store';
 import { PlayerStatus, PlaybackType, PlayerShuffle, PlayerRepeat } from '/@/renderer/types';
 import { PlayerbarSlider } from '/@/renderer/features/player/components/playerbar-slider';
 
@@ -78,6 +83,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
   const setCurrentTime = useSetCurrentTime();
   const repeat = useRepeatStatus();
   const shuffle = useShuffleStatus();
+  const { bindings } = useHotkeySettings();
 
   const {
     handleNextTrack,
@@ -88,6 +94,9 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
     handleSkipForward,
     handleToggleRepeat,
     handleToggleShuffle,
+    handleStop,
+    handlePause,
+    handlePlay,
   } = useCenterControls({ playersRef });
 
   const currentTime = useCurrentTime();
@@ -113,6 +122,25 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
 
   const [seekValue, setSeekValue] = useState(0);
 
+  useHotkeys([
+    [bindings.playPause.isGlobal ? '' : bindings.playPause.hotkey, handlePlayPause],
+    [bindings.play.isGlobal ? '' : bindings.play.hotkey, handlePlay],
+    [bindings.pause.isGlobal ? '' : bindings.pause.hotkey, handlePause],
+    [bindings.stop.isGlobal ? '' : bindings.stop.hotkey, handleStop],
+    [bindings.next.isGlobal ? '' : bindings.next.hotkey, handleNextTrack],
+    [bindings.previous.isGlobal ? '' : bindings.previous.hotkey, handlePrevTrack],
+    [bindings.toggleRepeat.isGlobal ? '' : bindings.toggleRepeat.hotkey, handleToggleRepeat],
+    [bindings.toggleShuffle.isGlobal ? '' : bindings.toggleShuffle.hotkey, handleToggleShuffle],
+    [
+      bindings.skipBackward.isGlobal ? '' : bindings.skipBackward.hotkey,
+      () => handleSkipBackward(skip?.skipBackwardSeconds || 5),
+    ],
+    [
+      bindings.skipForward.isGlobal ? '' : bindings.skipForward.hotkey,
+      () => handleSkipForward(skip?.skipForwardSeconds || 5),
+    ],
+  ]);
+
   return (
     <>
       <ControlsContainer>

src/renderer/features/player/components/left-controls.tsx

@@ -1,5 +1,6 @@
 import React, { MouseEvent } from 'react';
 import { Center, Group } from '@mantine/core';
+import { useHotkeys } from '@mantine/hooks';
 import { motion, AnimatePresence, LayoutGroup } from 'framer-motion';
 import { RiArrowUpSLine, RiDiscLine, RiMore2Fill } from 'react-icons/ri';
 import { generatePath, Link } from 'react-router-dom';
@@ -12,6 +13,7 @@ import {
   useSetFullScreenPlayerStore,
   useFullScreenPlayerStore,
   useSidebarStore,
+  useHotkeySettings,
 } from '/@/renderer/store';
 import { fadeIn } from '/@/renderer/styles';
 import { LibraryItem } from '/@/renderer/api/types';
@@ -91,6 +93,7 @@ export const LeftControls = () => {
   const currentSong = useCurrentSong();
   const title = currentSong?.name;
   const artists = currentSong?.artists;
+  const { bindings } = useHotkeySettings();
 
   const isSongDefined = Boolean(currentSong?.id);
 
@@ -99,16 +102,23 @@ export const LeftControls = () => {
     SONG_CONTEXT_MENU_ITEMS,
   );
 
-  const handleToggleFullScreenPlayer = (e: MouseEvent<HTMLDivElement>) => {
-    e.stopPropagation();
+  const handleToggleFullScreenPlayer = (e?: MouseEvent<HTMLDivElement> | KeyboardEvent) => {
+    e?.stopPropagation();
     setFullScreenPlayerStore({ expanded: !isFullScreenPlayerExpanded });
   };
 
-  const handleToggleSidebarImage = (e: MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation();
+  const handleToggleSidebarImage = (e?: MouseEvent<HTMLButtonElement>) => {
+    e?.stopPropagation();
     setSideBar({ image: true });
   };
 
+  useHotkeys([
+    [
+      bindings.toggleFullscreenPlayer.allowGlobal ? '' : bindings.toggleFullscreenPlayer.hotkey,
+      handleToggleFullScreenPlayer,
+    ],
+  ]);
+
   return (
     <LeftControlsContainer>
       <LayoutGroup>

src/renderer/features/player/components/right-controls.tsx

@@ -1,5 +1,6 @@
 import { MouseEvent } from 'react';
 import { Flex, Group } from '@mantine/core';
+import { useHotkeys } from '@mantine/hooks';
 import { HiOutlineQueueList } from 'react-icons/hi2';
 import {
   RiVolumeUpFill,
@@ -12,6 +13,7 @@ import {
   useAppStoreActions,
   useCurrentServer,
   useCurrentSong,
+  useHotkeySettings,
   useMuted,
   useSidebarStore,
   useVolume,
@@ -30,7 +32,9 @@ export const RightControls = () => {
   const currentSong = useCurrentSong();
   const { setSideBar } = useAppStoreActions();
   const { rightExpanded: isQueueExpanded } = useSidebarStore();
-  const { handleVolumeSlider, handleVolumeWheel, handleMute } = useRightControls();
+  const { bindings } = useHotkeySettings();
+  const { handleVolumeSlider, handleVolumeWheel, handleMute, handleVolumeDown, handleVolumeUp } =
+    useRightControls();
 
   const updateRatingMutation = useSetRating({});
   const addToFavoritesMutation = useCreateFavorite({});
@@ -94,9 +98,20 @@ export const RightControls = () => {
     }
   };
 
+  const handleToggleQueue = () => {
+    setSideBar({ rightExpanded: !isQueueExpanded });
+  };
+
   const isSongDefined = Boolean(currentSong?.id);
   const showRating = isSongDefined && server?.type === ServerType.NAVIDROME;
 
+  useHotkeys([
+    [bindings.volumeDown.isGlobal ? '' : bindings.volumeDown.hotkey, handleVolumeDown],
+    [bindings.volumeUp.isGlobal ? '' : bindings.volumeUp.hotkey, handleVolumeUp],
+    [bindings.volumeMute.isGlobal ? '' : bindings.volumeMute.hotkey, handleMute],
+    [bindings.toggleQueue.isGlobal ? '' : bindings.toggleQueue.hotkey, handleToggleQueue],
+  ]);
+
   return (
     <Flex
       align="flex-end"
@@ -147,7 +162,7 @@ export const RightControls = () => {
           icon={<HiOutlineQueueList size="1.1rem" />}
           tooltip={{ label: 'View queue', openDelay: 500 }}
           variant="secondary"
-          onClick={() => setSideBar({ rightExpanded: !isQueueExpanded })}
+          onClick={handleToggleQueue}
         />
         <Group
           noWrap