2020-05-01 16:22:24 +02:00
|
|
|
import React, { useState } from 'react'
|
2020-05-22 21:23:42 +02:00
|
|
|
import PropTypes from 'prop-types'
|
2020-05-01 16:22:24 +02:00
|
|
|
import { useDispatch } from 'react-redux'
|
2020-05-22 21:23:42 +02:00
|
|
|
import { useUpdate, useTranslate, useRefresh, useNotify } from 'react-admin'
|
2020-05-01 16:22:24 +02:00
|
|
|
import { IconButton, Menu, MenuItem } from '@material-ui/core'
|
2020-05-22 21:23:42 +02:00
|
|
|
import { makeStyles } from '@material-ui/core/styles'
|
2020-05-01 16:22:24 +02:00
|
|
|
import MoreVertIcon from '@material-ui/icons/MoreVert'
|
2020-05-22 21:23:42 +02:00
|
|
|
import StarIcon from '@material-ui/icons/Star'
|
|
|
|
import StarBorderIcon from '@material-ui/icons/StarBorder'
|
|
|
|
import NestedMenuItem from 'material-ui-nested-menu-item'
|
2020-05-05 18:07:50 +02:00
|
|
|
import { addTracks, setTrack } from '../audioplayer'
|
2020-05-23 02:15:58 +02:00
|
|
|
import AddToPlaylistMenu from './AddToPlaylistMenu'
|
2020-05-22 21:23:42 +02:00
|
|
|
import config from '../config'
|
|
|
|
|
|
|
|
const useStyles = makeStyles({
|
|
|
|
noWrap: {
|
|
|
|
whiteSpace: 'nowrap',
|
|
|
|
},
|
2020-05-23 02:15:58 +02:00
|
|
|
menu: {
|
|
|
|
visibility: (props) => (props.visible ? 'visible' : 'hidden'),
|
|
|
|
},
|
|
|
|
star: {
|
|
|
|
visibility: (props) =>
|
|
|
|
props.visible || props.starred ? 'visible' : 'hidden',
|
|
|
|
},
|
2020-05-22 21:23:42 +02:00
|
|
|
})
|
2020-05-01 16:22:24 +02:00
|
|
|
|
2020-05-23 20:11:39 +02:00
|
|
|
const SongContextMenu = ({ record, showStar, onAddToPlaylist, visible }) => {
|
2020-05-23 02:15:58 +02:00
|
|
|
const classes = useStyles({ visible, starred: record.starred })
|
2020-05-01 16:22:24 +02:00
|
|
|
const dispatch = useDispatch()
|
|
|
|
const translate = useTranslate()
|
2020-05-22 21:23:42 +02:00
|
|
|
const notify = useNotify()
|
|
|
|
const refresh = useRefresh()
|
2020-05-01 16:22:24 +02:00
|
|
|
const [anchorEl, setAnchorEl] = useState(null)
|
|
|
|
const options = {
|
|
|
|
playNow: {
|
|
|
|
label: translate('resources.song.actions.playNow'),
|
|
|
|
action: (record) => setTrack(record),
|
|
|
|
},
|
|
|
|
addToQueue: {
|
|
|
|
label: translate('resources.song.actions.addToQueue'),
|
2020-05-07 17:24:28 +02:00
|
|
|
action: (record) => addTracks({ [record.id]: record }),
|
2020-05-01 16:22:24 +02:00
|
|
|
},
|
|
|
|
}
|
|
|
|
|
|
|
|
const handleClick = (e) => {
|
|
|
|
setAnchorEl(e.currentTarget)
|
|
|
|
e.stopPropagation()
|
|
|
|
}
|
|
|
|
|
|
|
|
const handleClose = (e) => {
|
|
|
|
setAnchorEl(null)
|
|
|
|
e.stopPropagation()
|
|
|
|
}
|
|
|
|
|
|
|
|
const handleItemClick = (e) => {
|
|
|
|
e.preventDefault()
|
|
|
|
setAnchorEl(null)
|
|
|
|
const key = e.target.getAttribute('value')
|
|
|
|
dispatch(options[key].action(record))
|
|
|
|
e.stopPropagation()
|
|
|
|
}
|
|
|
|
|
2020-05-23 02:15:58 +02:00
|
|
|
const [updateRecord, { loading: updating }] = useUpdate(
|
2020-05-22 21:23:42 +02:00
|
|
|
'albumSong',
|
|
|
|
record.id,
|
|
|
|
record,
|
|
|
|
{
|
|
|
|
undoable: false,
|
|
|
|
onFailure: (error) => {
|
|
|
|
console.log(error)
|
|
|
|
notify('ra.page.error', 'warning')
|
|
|
|
refresh()
|
|
|
|
},
|
|
|
|
}
|
|
|
|
)
|
|
|
|
|
2020-05-23 02:15:58 +02:00
|
|
|
const toggleStar = (record) => {
|
2020-05-22 21:23:42 +02:00
|
|
|
record.starred = !record.starred
|
2020-05-23 02:15:58 +02:00
|
|
|
updateRecord()
|
|
|
|
}
|
|
|
|
|
|
|
|
const handleToggleStar = (e, record) => {
|
|
|
|
toggleStar(record)
|
2020-05-22 21:23:42 +02:00
|
|
|
e.stopPropagation()
|
|
|
|
}
|
|
|
|
|
2020-05-18 00:55:17 +02:00
|
|
|
const open = Boolean(anchorEl)
|
|
|
|
|
2020-05-01 16:22:24 +02:00
|
|
|
return (
|
2020-05-23 02:15:58 +02:00
|
|
|
<span className={classes.noWrap}>
|
2020-05-23 20:11:39 +02:00
|
|
|
{config.enableStarred && showStar && (
|
2020-05-22 21:23:42 +02:00
|
|
|
<IconButton
|
|
|
|
onClick={(e) => handleToggleStar(e, record)}
|
|
|
|
size={'small'}
|
2020-05-23 02:15:58 +02:00
|
|
|
disabled={updating}
|
|
|
|
className={classes.star}
|
2020-05-22 21:23:42 +02:00
|
|
|
>
|
2020-05-24 18:12:12 +02:00
|
|
|
{record.starred ? (
|
|
|
|
<StarIcon fontSize={'small'} />
|
|
|
|
) : (
|
|
|
|
<StarBorderIcon fontSize={'small'} />
|
|
|
|
)}
|
2020-05-22 21:23:42 +02:00
|
|
|
</IconButton>
|
|
|
|
)}
|
2020-05-23 02:15:58 +02:00
|
|
|
<IconButton
|
|
|
|
onClick={handleClick}
|
|
|
|
size={'small'}
|
|
|
|
className={classes.menu}
|
|
|
|
disabled={updating}
|
|
|
|
>
|
2020-05-01 16:22:24 +02:00
|
|
|
<MoreVertIcon />
|
|
|
|
</IconButton>
|
|
|
|
<Menu
|
|
|
|
id={'menu' + record.id}
|
|
|
|
anchorEl={anchorEl}
|
2020-05-18 00:55:17 +02:00
|
|
|
open={open}
|
2020-05-01 16:22:24 +02:00
|
|
|
onClose={handleClose}
|
|
|
|
>
|
|
|
|
{Object.keys(options).map((key) => (
|
|
|
|
<MenuItem value={key} key={key} onClick={handleItemClick}>
|
|
|
|
{options[key].label}
|
|
|
|
</MenuItem>
|
|
|
|
))}
|
2020-05-18 00:55:17 +02:00
|
|
|
<NestedMenuItem
|
|
|
|
label={translate('resources.song.actions.addToPlaylist')}
|
|
|
|
parentMenuOpen={open}
|
|
|
|
>
|
|
|
|
<AddToPlaylistMenu
|
2020-05-18 19:05:54 +02:00
|
|
|
selectedIds={[record.mediaFileId || record.id]}
|
|
|
|
onClose={handleClose}
|
|
|
|
onItemAdded={onAddToPlaylist}
|
2020-05-18 00:55:17 +02:00
|
|
|
/>
|
|
|
|
</NestedMenuItem>
|
2020-05-01 16:22:24 +02:00
|
|
|
</Menu>
|
2020-05-22 21:23:42 +02:00
|
|
|
</span>
|
2020-05-01 16:22:24 +02:00
|
|
|
)
|
|
|
|
}
|
2020-05-18 19:05:54 +02:00
|
|
|
|
|
|
|
SongContextMenu.propTypes = {
|
|
|
|
record: PropTypes.object,
|
|
|
|
onAddToPlaylist: PropTypes.func,
|
2020-05-23 02:15:58 +02:00
|
|
|
visible: PropTypes.bool,
|
2020-05-23 20:11:39 +02:00
|
|
|
showStar: PropTypes.bool,
|
|
|
|
}
|
|
|
|
|
|
|
|
SongContextMenu.defaultProps = {
|
|
|
|
visible: true,
|
|
|
|
showStar: true,
|
2020-05-24 17:48:48 +02:00
|
|
|
addLabel: true,
|
2020-05-18 19:05:54 +02:00
|
|
|
}
|
2020-05-23 02:15:58 +02:00
|
|
|
|
|
|
|
export default SongContextMenu
|