Add "PlayNow" button to bulk actions

ui/src/song/AddToPlaylistButton.js

@@ -4,7 +4,7 @@ import { Button, useTranslate, useUnselectAll } from 'react-admin'
 import PlaylistAddIcon from '@material-ui/icons/PlaylistAdd'
 import { openAddToPlaylist } from '../dialogs/dialogState'
 
-const AddToPlaylistButton = ({ resource, selectedIds, onAddToPlaylist }) => {
+const AddToPlaylistButton = ({ resource, selectedIds }) => {
   const translate = useTranslate()
   const dispatch = useDispatch()
   const unselectAll = useUnselectAll()

ui/src/song/AddToQueueButton.js

@@ -1,51 +0,0 @@
-import React from 'react'
-import {
-  Button,
-  useDataProvider,
-  useTranslate,
-  useUnselectAll,
-  useNotify,
-} from 'react-admin'
-import { useDispatch } from 'react-redux'
-import { addTracks } from '../audioplayer'
-import { RiPlayListAddFill } from 'react-icons/ri'
-
-const AddToQueueButton = ({ resource, selectedIds, action, label, icon }) => {
-  const dispatch = useDispatch()
-  const translate = useTranslate()
-  const dataProvider = useDataProvider()
-  const unselectAll = useUnselectAll()
-  const notify = useNotify()
-
-  const addToQueue = () => {
-    dataProvider
-      .getMany(resource, { ids: selectedIds })
-      .then((response) => {
-        // Add tracks to a map for easy lookup by ID, needed for the next step
-        const tracks = response.data.reduce(
-          (acc, cur) => ({ ...acc, [cur.id]: cur }),
-          {}
-        )
-        // Add the tracks to the queue in the selection order
-        dispatch(action(tracks, selectedIds))
-      })
-      .catch(() => {
-        notify('ra.page.error', 'warning')
-      })
-    unselectAll(resource)
-  }
-
-  return (
-    <Button color="secondary" onClick={addToQueue} label={translate(label)}>
-      {icon}
-    </Button>
-  )
-}
-
-AddToQueueButton.defaultProps = {
-  action: addTracks,
-  label: 'resources.song.actions.addToQueue',
-  icon: <RiPlayListAddFill />,
-}
-
-export default AddToQueueButton

ui/src/song/SongBulkActions.js

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react'
-import AddToQueueButton from './AddToQueueButton'
+import { BatchPlayButton } from '../common'
 import AddToPlaylistButton from './AddToPlaylistButton'
 import { RiPlayList2Fill } from 'react-icons/ri'
 import { playNext } from '../audioplayer'
@@ -7,13 +7,13 @@ import { playNext } from '../audioplayer'
 export const SongBulkActions = (props) => {
   return (
     <Fragment>
-      <AddToQueueButton
+      <BatchPlayButton
         {...props}
         action={playNext}
         label={'resources.song.actions.playNext'}
         icon={<RiPlayList2Fill />}
       />
-      <AddToQueueButton {...props} />
+      <BatchPlayButton {...props} />
       <AddToPlaylistButton {...props} />
     </Fragment>
   )