diff --git a/ui/src/common/AddToPlaylistMenu.js b/ui/src/common/AddToPlaylistMenu.js index f88b8032c..3e82e64a1 100644 --- a/ui/src/common/AddToPlaylistMenu.js +++ b/ui/src/common/AddToPlaylistMenu.js @@ -22,7 +22,7 @@ export const addAlbumToPlaylist = (dataProvider, albumId, playlistId) => .then((ids) => addTracksToPlaylist(dataProvider, ids, playlistId)) const AddToPlaylistMenu = React.forwardRef( - ({ selectedIds, albumId, onClose }, ref) => { + ({ selectedIds, albumId, onClose, onItemAdded }, ref) => { const notify = useNotify() const dataProvider = useDataProvider() const { ids, data, loaded } = useGetList( @@ -38,22 +38,23 @@ const AddToPlaylistMenu = React.forwardRef( const handleItemClick = (e) => { e.preventDefault() - const value = e.target.getAttribute('value') - if (value !== '') { + const playlistId = e.target.getAttribute('value') + if (playlistId !== '') { const add = albumId - ? addAlbumToPlaylist(dataProvider, albumId, value) - : addTracksToPlaylist(dataProvider, selectedIds, value) + ? addAlbumToPlaylist(dataProvider, albumId, playlistId) + : addTracksToPlaylist(dataProvider, selectedIds, playlistId) add .then((len) => { notify('message.songsAddedToPlaylist', 'info', { smart_count: len }) + onItemAdded && onItemAdded(playlistId, selectedIds) }) .catch(() => { notify('ra.page.error', 'warning') }) } e.stopPropagation() - onClose && onClose() + onClose && onClose(e) } return ( @@ -71,6 +72,8 @@ const AddToPlaylistMenu = React.forwardRef( AddToPlaylistMenu.propTypes = { selectedIds: PropTypes.arrayOf(PropTypes.any).isRequired, albumId: PropTypes.string, + onClose: PropTypes.func, + onItemAdded: PropTypes.func, } AddToPlaylistMenu.defaultProps = { diff --git a/ui/src/playlist/PlaylistSongs.js b/ui/src/playlist/PlaylistSongs.js index a638edafb..bfec7d04a 100644 --- a/ui/src/playlist/PlaylistSongs.js +++ b/ui/src/playlist/PlaylistSongs.js @@ -6,11 +6,13 @@ import { ListToolbar, TextField, useListController, + useRefresh, } from 'react-admin' import classnames from 'classnames' import { Card, useMediaQuery } from '@material-ui/core' import { makeStyles } from '@material-ui/core/styles' import { DurationField, SongDetails } from '../common' +import { SongContextMenu } from '../song/SongContextMenu' const useStyles = makeStyles( (theme) => ({ @@ -54,6 +56,7 @@ const PlaylistSongs = (props) => { const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs')) // const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md')) const controllerProps = useListController(props) + const refresh = useRefresh() const { bulkActionButtons, expand, className, playlistId } = props const { data, ids, version, loaded } = controllerProps @@ -65,6 +68,12 @@ const PlaylistSongs = (props) => { return
} + const onAddToPlaylist = (playlistId) => { + if (playlistId === props.id) { + refresh() + } + } + return ( <> { + )} diff --git a/ui/src/song/AddToPlaylistButton.js b/ui/src/song/AddToPlaylistButton.js index f0e5ab874..a31117060 100644 --- a/ui/src/song/AddToPlaylistButton.js +++ b/ui/src/song/AddToPlaylistButton.js @@ -4,7 +4,7 @@ import { Menu } from '@material-ui/core' import PlaylistAddIcon from '@material-ui/icons/PlaylistAdd' import { AddToPlaylistMenu } from '../common' -const AddToPlaylistButton = ({ resource, selectedIds }) => { +const AddToPlaylistButton = ({ resource, selectedIds, onAddToPlaylist }) => { const [anchorEl, setAnchorEl] = React.useState(null) const translate = useTranslate() const unselectAll = useUnselectAll() @@ -40,6 +40,7 @@ const AddToPlaylistButton = ({ resource, selectedIds }) => { selectedIds={selectedIds} menuOpen={Boolean(anchorEl)} onClose={handleClose} + onItemAdded={onAddToPlaylist} /> diff --git a/ui/src/song/SongContextMenu.js b/ui/src/song/SongContextMenu.js index 92822733e..d650e35a9 100644 --- a/ui/src/song/SongContextMenu.js +++ b/ui/src/song/SongContextMenu.js @@ -6,8 +6,9 @@ import MoreVertIcon from '@material-ui/icons/MoreVert' import { addTracks, setTrack } from '../audioplayer' import { AddToPlaylistMenu } from '../common' import NestedMenuItem from 'material-ui-nested-menu-item' +import PropTypes from 'prop-types' -export const SongContextMenu = ({ record }) => { +export const SongContextMenu = ({ record, onAddToPlaylist }) => { const dispatch = useDispatch() const translate = useTranslate() const [anchorEl, setAnchorEl] = useState(null) @@ -63,11 +64,17 @@ export const SongContextMenu = ({ record }) => { parentMenuOpen={open} > setAnchorEl(null)} + selectedIds={[record.mediaFileId || record.id]} + onClose={handleClose} + onItemAdded={onAddToPlaylist} /> ) } + +SongContextMenu.propTypes = { + record: PropTypes.object, + onAddToPlaylist: PropTypes.func, +}