diff --git a/ui/package-lock.json b/ui/package-lock.json
index eb168488..2ad56c94 100644
--- a/ui/package-lock.json
+++ b/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",
diff --git a/ui/package.json b/ui/package.json
index 368d55b0..551d34a7 100644
--- a/ui/package.json
+++ b/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",
diff --git a/ui/src/audioplayer/Player.js b/ui/src/audioplayer/Player.js
index 4c352990..ac07eb12 100644
--- a/ui/src/audioplayer/Player.js
+++ b/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 (
-
+
+ {
+ audioInstance = instance
+ }}
+ />
+
)
}
document.title = 'Navidrome'