Better hotkey organization

ui/src/App.js

@@ -28,6 +28,8 @@ import createAdminStore from './store/createAdminStore'
 import { i18nProvider } from './i18n'
 import config from './config'
 import { setDispatch, startEventStream } from './eventStream'
+import { HotKeys } from 'react-hotkeys'
+import { keyMap } from './hotkeys'
 
 const history = createHashHistory()
 
@@ -119,4 +121,10 @@ const Admin = (props) => {
   )
 }
 
-export default App
+const AppWithHotkeys = () => (
+  <HotKeys keyMap={keyMap}>
+    <App />
+  </HotKeys>
+)
+
+export default AppWithHotkeys

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]),
   }

ui/src/hotkeys.js

@@ -0,0 +1,12 @@
+const keyMap = {
+  TOGGLE_MENU: { name: 'Toggle Menu Side Bar', sequence: 'm', group: 'Global' },
+
+  TOGGLE_PLAY: { name: 'Play / Pause', sequence: 'p', group: 'Player' },
+  PREV_SONG: { name: 'Previous Songs', sequence: 'left', group: 'Player' },
+  NEXT_SONG: { name: 'Next Song', sequence: 'right', group: 'Player' },
+  VOL_UP: { name: 'Volume Up', sequence: '=', group: 'Player' },
+  VOL_DOWN: { name: 'Volume Down', sequence: '-', group: 'Player' },
+  TOGGLE_STAR: { name: 'Toggle Star', sequence: 's', group: 'Player' },
+}
+
+export { keyMap }

ui/src/layout/Layout.js

@@ -18,13 +18,12 @@ export default (props) => {
   const classes = useStyles({ addPadding: queue.queue.length > 0 })
   const dispatch = useDispatch()
 
-  const keyMap = { TOGGLE_MENU: 'm' }
   const keyHandlers = {
     TOGGLE_MENU: useCallback(() => dispatch(toggleSidebar()), [dispatch]),
   }
 
   return (
-    <HotKeys handlers={keyHandlers} keyMap={keyMap}>
+    <HotKeys handlers={keyHandlers}>
       <Layout
         {...props}
         className={classes.root}