Add context menu to playlist songs

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,
+}