2021-02-03 04:15:13 +01:00
|
|
|
import React, { useCallback } from 'react'
|
2020-08-25 01:38:29 +02:00
|
|
|
import { useLocation } from 'react-router-dom'
|
|
|
|
import { useGetOne } from 'react-admin'
|
2021-02-03 04:15:13 +01:00
|
|
|
import { GlobalHotKeys } from 'react-hotkeys'
|
2021-03-27 04:56:19 +01:00
|
|
|
import { LoveButton, useToggleLove } from '../common'
|
2021-02-04 00:29:33 +01:00
|
|
|
import { keyMap } from '../hotkeys'
|
2020-08-25 01:38:29 +02:00
|
|
|
|
2021-03-27 04:56:19 +01:00
|
|
|
const Placeholder = () => <LoveButton disabled={true} resource={'song'} />
|
2020-08-25 01:38:29 +02:00
|
|
|
|
|
|
|
const Toolbar = ({ id }) => {
|
|
|
|
const location = useLocation()
|
|
|
|
const resource = location.pathname.startsWith('/song') ? 'song' : 'albumSong'
|
|
|
|
const { data, loading } = useGetOne(resource, id)
|
2021-03-27 04:56:19 +01:00
|
|
|
const [toggleLove, toggling] = useToggleLove(resource, data)
|
2020-08-25 01:38:29 +02:00
|
|
|
|
2021-02-03 04:15:13 +01:00
|
|
|
const handlers = {
|
2021-03-27 04:56:19 +01:00
|
|
|
TOGGLE_LOVE: useCallback(() => toggleLove(), [toggleLove]),
|
2021-02-03 04:15:13 +01:00
|
|
|
}
|
2020-08-25 01:38:29 +02:00
|
|
|
|
2020-11-28 06:51:31 +01:00
|
|
|
return (
|
2021-02-03 04:15:13 +01:00
|
|
|
<>
|
|
|
|
<GlobalHotKeys keyMap={keyMap} handlers={handlers} allowChanges />
|
2021-03-27 04:56:19 +01:00
|
|
|
<LoveButton
|
2021-02-03 04:15:13 +01:00
|
|
|
record={data}
|
|
|
|
resource={resource}
|
|
|
|
disabled={loading || toggling}
|
|
|
|
/>
|
|
|
|
</>
|
2020-11-28 06:51:31 +01:00
|
|
|
)
|
2020-08-25 01:38:29 +02:00
|
|
|
}
|
|
|
|
|
2020-10-02 23:26:20 +02:00
|
|
|
const PlayerToolbar = ({ id }) => (id ? <Toolbar id={id} /> : <Placeholder />)
|
2020-08-25 01:38:29 +02:00
|
|
|
|
|
|
|
export default PlayerToolbar
|