Add context menu to playlist songs

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 = {

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 <div />
   }
 
+  const onAddToPlaylist = (playlistId) => {
+    if (playlistId === props.id) {
+      refresh()
+    }
+  }
+
   return (
     <>
       <ListToolbar
@@ -106,6 +115,7 @@ const PlaylistSongs = (props) => {
               <TextField source="title" sortable={false} />
               <TextField source="artist" sortable={false} />
               <DurationField source="duration" sortable={false} />
+              <SongContextMenu onAddToPlaylist={onAddToPlaylist} />
             </Datagrid>
           )}
         </Card>

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}
         />
       </Menu>
     </>

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}
         >
           <AddToPlaylistMenu
-            selectedIds={[record.id]}
-            onClose={() => setAnchorEl(null)}
+            selectedIds={[record.mediaFileId || record.id]}
+            onClose={handleClose}
+            onItemAdded={onAddToPlaylist}
           />
         </NestedMenuItem>
       </Menu>
     </>
   )
 }
+
+SongContextMenu.propTypes = {
+  record: PropTypes.object,
+  onAddToPlaylist: PropTypes.func,
+}