Better hotkey organization
This commit is contained in:
parent
22145e070f
commit
a168f46b95
|
@ -28,6 +28,8 @@ import createAdminStore from './store/createAdminStore'
|
||||||
import { i18nProvider } from './i18n'
|
import { i18nProvider } from './i18n'
|
||||||
import config from './config'
|
import config from './config'
|
||||||
import { setDispatch, startEventStream } from './eventStream'
|
import { setDispatch, startEventStream } from './eventStream'
|
||||||
|
import { HotKeys } from 'react-hotkeys'
|
||||||
|
import { keyMap } from './hotkeys'
|
||||||
|
|
||||||
const history = createHashHistory()
|
const history = createHashHistory()
|
||||||
|
|
||||||
|
@ -119,4 +121,10 @@ const Admin = (props) => {
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App
|
const AppWithHotkeys = () => (
|
||||||
|
<HotKeys keyMap={keyMap}>
|
||||||
|
<App />
|
||||||
|
</HotKeys>
|
||||||
|
)
|
||||||
|
|
||||||
|
export default AppWithHotkeys
|
||||||
|
|
|
@ -19,6 +19,7 @@ import themes from '../themes'
|
||||||
import config from '../config'
|
import config from '../config'
|
||||||
import PlayerToolbar from './PlayerToolbar'
|
import PlayerToolbar from './PlayerToolbar'
|
||||||
import { sendNotification, baseUrl } from '../utils'
|
import { sendNotification, baseUrl } from '../utils'
|
||||||
|
import { keyMap } from '../hotkeys'
|
||||||
|
|
||||||
const useStyle = makeStyles((theme) => ({
|
const useStyle = makeStyles((theme) => ({
|
||||||
audioTitle: {
|
audioTitle: {
|
||||||
|
@ -86,32 +87,18 @@ const Player = () => {
|
||||||
return idx !== null ? queue.queue[idx - 1] : null
|
return idx !== null ? queue.queue[idx - 1] : null
|
||||||
}, [queue])
|
}, [queue])
|
||||||
|
|
||||||
const keyMap = {
|
|
||||||
TOGGLE_PLAY: 'p',
|
|
||||||
PREV_SONG: 'left',
|
|
||||||
NEXT_SONG: 'right',
|
|
||||||
VOL_UP: '=',
|
|
||||||
VOL_DOWN: '-',
|
|
||||||
}
|
|
||||||
|
|
||||||
const keyHandlers = {
|
const keyHandlers = {
|
||||||
TOGGLE_PLAY: useCallback(() => {
|
TOGGLE_PLAY: () => audioInstance && audioInstance.togglePlay(),
|
||||||
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(() => {
|
PREV_SONG: useCallback(() => {
|
||||||
if (prevSong()) audioInstance && audioInstance.playPrev()
|
if (prevSong()) audioInstance && audioInstance.playPrev()
|
||||||
}, [prevSong]),
|
}, [prevSong]),
|
||||||
NEXT_SONG: useCallback(() => {
|
NEXT_SONG: useCallback(() => {
|
||||||
if (nextSong()) audioInstance && audioInstance.playNext()
|
if (nextSong()) audioInstance && audioInstance.playNext()
|
||||||
}, [nextSong]),
|
}, [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 = {
|
const defaultOptions = {
|
||||||
|
|
|
@ -3,6 +3,7 @@ import { useLocation } from 'react-router-dom'
|
||||||
import { useGetOne } from 'react-admin'
|
import { useGetOne } from 'react-admin'
|
||||||
import { GlobalHotKeys } from 'react-hotkeys'
|
import { GlobalHotKeys } from 'react-hotkeys'
|
||||||
import { StarButton, useToggleStar } from '../common'
|
import { StarButton, useToggleStar } from '../common'
|
||||||
|
import { keyMap } from '../hotkeys'
|
||||||
|
|
||||||
const Placeholder = () => <StarButton disabled={true} resource={'song'} />
|
const Placeholder = () => <StarButton disabled={true} resource={'song'} />
|
||||||
|
|
||||||
|
@ -12,7 +13,6 @@ const Toolbar = ({ id }) => {
|
||||||
const { data, loading } = useGetOne(resource, id)
|
const { data, loading } = useGetOne(resource, id)
|
||||||
const [toggleStar, toggling] = useToggleStar(resource, data)
|
const [toggleStar, toggling] = useToggleStar(resource, data)
|
||||||
|
|
||||||
const keyMap = { TOGGLE_STAR: 's' }
|
|
||||||
const handlers = {
|
const handlers = {
|
||||||
TOGGLE_STAR: useCallback(() => toggleStar(), [toggleStar]),
|
TOGGLE_STAR: useCallback(() => toggleStar(), [toggleStar]),
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 }
|
|
@ -18,13 +18,12 @@ export default (props) => {
|
||||||
const classes = useStyles({ addPadding: queue.queue.length > 0 })
|
const classes = useStyles({ addPadding: queue.queue.length > 0 })
|
||||||
const dispatch = useDispatch()
|
const dispatch = useDispatch()
|
||||||
|
|
||||||
const keyMap = { TOGGLE_MENU: 'm' }
|
|
||||||
const keyHandlers = {
|
const keyHandlers = {
|
||||||
TOGGLE_MENU: useCallback(() => dispatch(toggleSidebar()), [dispatch]),
|
TOGGLE_MENU: useCallback(() => dispatch(toggleSidebar()), [dispatch]),
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<HotKeys handlers={keyHandlers} keyMap={keyMap}>
|
<HotKeys handlers={keyHandlers}>
|
||||||
<Layout
|
<Layout
|
||||||
{...props}
|
{...props}
|
||||||
className={classes.root}
|
className={classes.root}
|
||||||
|
|
Loading…
Reference in New Issue