Play/Pause current song with <Space> key

ui/package-lock.json

@@ -7383,6 +7383,11 @@
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
       "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg=="
     },
+    "hotkeys-js": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.8.1.tgz",
+      "integrity": "sha512-YlhVQtyG9f1b7GhtzdhR0Pl+cImD1ZrKI6zYUa7QLd0zuThiL7RzZ+ANJyy7z+kmcCpNYBf5PjBa3CjiQ5PFpw=="
+    },
     "hpack.js": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
@@ -13494,6 +13499,16 @@
       "resolved": "https://registry.npmjs.org/react-ga/-/react-ga-3.1.2.tgz",
       "integrity": "sha512-OJrMqaHEHbodm+XsnjA6ISBEHTwvpFrxco65mctzl/v3CASMSLSyUkFqz9yYrPDKGBUfNQzKCjuMJwctjlWBbw=="
     },
+    "react-hot-keys": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/react-hot-keys/-/react-hot-keys-2.6.0.tgz",
+      "integrity": "sha512-q7UKLGxZyWhIeyNp4TIp5ardcIF5lPeS8Lmh5gTKH+4IOQDrfMkyvAoz1XFYKR2UDc4GW9sEDrzVrqVZu/HrAw==",
+      "requires": {
+        "@babel/runtime": "^7.8.4",
+        "hotkeys-js": "^3.8.1",
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-icons": {
       "version": "3.11.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-3.11.0.tgz",

ui/package.json

@@ -17,6 +17,7 @@
     "react-dom": "^16.13.1",
     "react-drag-listview": "^0.1.7",
     "react-ga": "^3.1.2",
+    "react-hot-keys": "^2.6.0",
     "react-icons": "^3.11.0",
     "react-image-lightbox": "^5.1.1",
     "react-jinke-music-player": "^4.18.3",

ui/src/audioplayer/Player.js

@@ -16,6 +16,7 @@ import {
 import themes from '../themes'
 import { makeStyles } from '@material-ui/core/styles'
 import config from '../config'
+import Hotkeys from 'react-hot-keys'
 
 const useStyle = makeStyles((theme) => ({
   audioTitle: {
@@ -24,6 +25,8 @@ const useStyle = makeStyles((theme) => ({
   },
 }))
 
+let audioInstance = null
+
 const Player = () => {
   const classes = useStyle()
   const translate = useTranslate()
@@ -178,19 +181,41 @@ const Player = () => {
     })
   }, [dispatch])
 
+  const onKeyUp = useCallback((keyName, e) => {
+    if (keyName === 'space') {
+      e.preventDefault()
+    }
+  }, [])
+  const onKeyDown = useCallback((keyName, e) => {
+    if (keyName === 'space') {
+      e.preventDefault()
+      audioInstance && audioInstance.togglePlay()
+    }
+  }, [])
+
   if (authenticated && options.audioLists.length > 0) {
     return (
-      <ReactJkMusicPlayer
-        {...options}
-        quietUpdate
-        onAudioListsChange={OnAudioListsChange}
-        onAudioProgress={OnAudioProgress}
-        onAudioPlay={OnAudioPlay}
-        onAudioPause={onAudioPause}
-        onAudioEnded={onAudioEnded}
-        onAudioVolumeChange={onAudioVolumeChange}
-        onBeforeDestroy={onBeforeDestroy}
-      />
+      <Hotkeys
+        keyName="space"
+        onKeyDown={onKeyDown}
+        onKeyUp={onKeyUp}
+        allowRepeat={false}
+      >
+        <ReactJkMusicPlayer
+          {...options}
+          quietUpdate
+          onAudioListsChange={OnAudioListsChange}
+          onAudioProgress={OnAudioProgress}
+          onAudioPlay={OnAudioPlay}
+          onAudioPause={onAudioPause}
+          onAudioEnded={onAudioEnded}
+          onAudioVolumeChange={onAudioVolumeChange}
+          onBeforeDestroy={onBeforeDestroy}
+          getAudioInstance={(instance) => {
+            audioInstance = instance
+          }}
+        />
+      </Hotkeys>
     )
   }
   document.title = 'Navidrome'