Better hotkey organization

ui/src/audioplayer/Player.js

@@ -19,6 +19,7 @@ import themes from '../themes'
 import config from '../config'
 import PlayerToolbar from './PlayerToolbar'
 import { sendNotification, baseUrl } from '../utils'
+import { keyMap } from '../hotkeys'
 
 const useStyle = makeStyles((theme) => ({
   audioTitle: {
@@ -86,32 +87,18 @@ const Player = () => {
     return idx !== null ? queue.queue[idx - 1] : null
   }, [queue])
 
-  const keyMap = {
-    TOGGLE_PLAY: 'p',
-    PREV_SONG: 'left',
-    NEXT_SONG: 'right',
-    VOL_UP: '=',
-    VOL_DOWN: '-',
-  }
-
   const keyHandlers = {
-    TOGGLE_PLAY: useCallback(() => {
-      audioInstance && audioInstance.togglePlay()
-    }, []),
+    TOGGLE_PLAY: () => audioInstance && audioInstance.togglePlay(),
+    VOL_UP: () =>
+      (audioInstance.volume = Math.min(1, audioInstance.volume + 0.1)),
+    VOL_DOWN: () =>
+      (audioInstance.volume = Math.max(0, audioInstance.volume - 0.1)),
     PREV_SONG: useCallback(() => {
       if (prevSong()) audioInstance && audioInstance.playPrev()
     }, [prevSong]),
     NEXT_SONG: useCallback(() => {
       if (nextSong()) audioInstance && audioInstance.playNext()
     }, [nextSong]),
-    VOL_UP: useCallback(
-      () => (audioInstance.volume = Math.min(1, audioInstance.volume + 0.1)),
-      []
-    ),
-    VOL_DOWN: useCallback(
-      () => (audioInstance.volume = Math.max(0, audioInstance.volume - 0.1)),
-      []
-    ),
   }
 
   const defaultOptions = {

ui/src/audioplayer/PlayerToolbar.js

@@ -3,6 +3,7 @@ import { useLocation } from 'react-router-dom'
 import { useGetOne } from 'react-admin'
 import { GlobalHotKeys } from 'react-hotkeys'
 import { StarButton, useToggleStar } from '../common'
+import { keyMap } from '../hotkeys'
 
 const Placeholder = () => <StarButton disabled={true} resource={'song'} />
 
@@ -12,7 +13,6 @@ const Toolbar = ({ id }) => {
   const { data, loading } = useGetOne(resource, id)
   const [toggleStar, toggling] = useToggleStar(resource, data)
 
-  const keyMap = { TOGGLE_STAR: 's' }
   const handlers = {
     TOGGLE_STAR: useCallback(() => toggleStar(), [toggleStar]),
   }