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'
|
2020-05-05 18:07:50 +02:00
|
|
|
import { addTracks, setTrack } from '../audioplayer'
|
2020-05-25 20:50:46 +02:00
|
|
|
import { openAddToPlaylist } from '../dialogs/dialogState'
|
2020-08-14 18:11:35 +02:00
|
|
|
import subsonic from '../subsonic'
|
2020-05-22 21:23:42 +02:00
|
|
|
|
|
|
|
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-29 17:21:53 +02:00
|
|
|
const SongContextMenu = ({
|
|
|
|
resource,
|
|
|
|
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: {
|
2020-05-29 22:59:38 +02:00
|
|
|
label: 'resources.song.actions.playNow',
|
2020-08-14 18:11:35 +02:00
|
|
|
action: (record) => dispatch(setTrack(record)),
|
2020-05-01 16:22:24 +02:00
|
|
|
},
|
|
|
|
addToQueue: {
|
2020-05-29 22:59:38 +02:00
|
|
|
label: 'resources.song.actions.addToQueue',
|
2020-08-14 18:11:35 +02:00
|
|
|
action: (record) => dispatch(addTracks({ [record.id]: record })),
|
2020-05-01 16:22:24 +02:00
|
|
|
},
|
2020-05-25 20:50:46 +02:00
|
|
|
addToPlaylist: {
|
2020-05-29 22:59:38 +02:00
|
|
|
label: 'resources.song.actions.addToPlaylist',
|
2020-05-25 20:50:46 +02:00
|
|
|
action: (record) =>
|
2020-08-14 18:11:35 +02:00
|
|
|
dispatch(
|
|
|
|
openAddToPlaylist({
|
|
|
|
selectedIds: [record.mediaFileId || record.id],
|
|
|
|
onSuccess: (id) => onAddToPlaylist(id),
|
|
|
|
})
|
|
|
|
),
|
|
|
|
},
|
|
|
|
download: {
|
|
|
|
label: 'resources.song.actions.download',
|
|
|
|
action: (record) => subsonic.download(record.id),
|
2020-05-25 20:50:46 +02:00
|
|
|
},
|
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')
|
2020-08-14 18:11:35 +02:00
|
|
|
options[key].action(record)
|
2020-05-01 16:22:24 +02:00
|
|
|
e.stopPropagation()
|
|
|
|
}
|
|
|
|
|
2020-05-29 17:21:53 +02:00
|
|
|
const [toggleStarred, { loading: updating }] = useUpdate(
|
|
|
|
resource,
|
2020-05-22 21:23:42 +02:00
|
|
|
record.id,
|
2020-05-29 17:21:53 +02:00
|
|
|
{
|
|
|
|
...record,
|
|
|
|
starred: !record.starred,
|
|
|
|
},
|
2020-05-22 21:23:42 +02:00
|
|
|
{
|
|
|
|
undoable: false,
|
|
|
|
onFailure: (error) => {
|
|
|
|
console.log(error)
|
|
|
|
notify('ra.page.error', 'warning')
|
|
|
|
refresh()
|
|
|
|
},
|
|
|
|
}
|
|
|
|
)
|
|
|
|
|
2020-05-29 17:21:53 +02:00
|
|
|
const handleToggleStar = (e) => {
|
|
|
|
toggleStarred()
|
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-06-12 04:11:59 +02:00
|
|
|
{showStar && (
|
2020-05-22 21:23:42 +02:00
|
|
|
<IconButton
|
2020-05-29 17:21:53 +02:00
|
|
|
onClick={handleToggleStar}
|
2020-05-22 21:23:42 +02:00
|
|
|
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-30 04:50:33 +02:00
|
|
|
<MoreVertIcon fontSize={'small'} />
|
2020-05-01 16:22:24 +02:00
|
|
|
</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}>
|
2020-05-29 22:59:38 +02:00
|
|
|
{translate(options[key].label)}
|
2020-05-01 16:22:24 +02:00
|
|
|
</MenuItem>
|
|
|
|
))}
|
|
|
|
</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 = {
|
2020-05-29 17:21:53 +02:00
|
|
|
resource: PropTypes.string,
|
2020-05-18 19:05:54 +02:00
|
|
|
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 = {
|
2020-05-25 20:50:46 +02:00
|
|
|
onAddToPlaylist: () => {},
|
2020-05-23 20:11:39 +02:00
|
|
|
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
|