Add "PlayNow" button to bulk actions

ui/src/album/AlbumSongBulkActions.js

@@ -1,8 +1,9 @@
 import React, { Fragment, useEffect } from 'react'
 import { useUnselectAll } from 'react-admin'
-import { playNext } from '../audioplayer'
+import { playNext, playTracks } from '../audioplayer'
 import { RiPlayList2Fill } from 'react-icons/ri'
-import AddToQueueButton from '../song/AddToQueueButton'
+import PlayArrowIcon from '@material-ui/icons/PlayArrow'
+import { BatchPlayButton } from '../common'
 import AddToPlaylistButton from '../song/AddToPlaylistButton'
 
 export const AlbumSongBulkActions = (props) => {
@@ -13,13 +14,19 @@ export const AlbumSongBulkActions = (props) => {
   }, [])
   return (
     <Fragment>
-      <AddToQueueButton
+      <BatchPlayButton
+        {...props}
+        action={playTracks}
+        label={'resources.song.actions.playNow'}
+        icon={<PlayArrowIcon />}
+      />
+      <BatchPlayButton
         {...props}
         action={playNext}
         label={'resources.song.actions.playNext'}
         icon={<RiPlayList2Fill />}
       />
-      <AddToQueueButton {...props} />
+      <BatchPlayButton {...props} />
       <AddToPlaylistButton {...props} />
     </Fragment>
   )

ui/src/common/BatchPlayButton.js

@@ -10,7 +10,7 @@ import { useDispatch } from 'react-redux'
 import { addTracks } from '../audioplayer'
 import { RiPlayListAddFill } from 'react-icons/ri'
 
-const AddToQueueButton = ({ resource, selectedIds, action, label, icon }) => {
+const BatchPlayButton = ({ resource, selectedIds, action, label, icon }) => {
   const dispatch = useDispatch()
   const translate = useTranslate()
   const dataProvider = useDataProvider()
@@ -42,10 +42,10 @@ const AddToQueueButton = ({ resource, selectedIds, action, label, icon }) => {
   )
 }
 
-AddToQueueButton.defaultProps = {
+BatchPlayButton.defaultProps = {
   action: addTracks,
   label: 'resources.song.actions.addToQueue',
   icon: <RiPlayListAddFill />,
 }
 
-export default AddToQueueButton
+export default BatchPlayButton

ui/src/common/index.js

@@ -3,6 +3,7 @@ import DurationField from './DurationField'
 import BitrateField from './BitrateField'
 import Pagination from './Pagination'
 import PlayButton from './PlayButton'
+import BatchPlayButton from './BatchPlayButton'
 import SimpleList from './SimpleList'
 import RangeField, { formatRange } from './RangeField'
 import ArtistLinkField, { useGetHandleArtistClick } from './ArtistLinkField'
@@ -27,6 +28,7 @@ export {
   Pagination,
   List,
   PlayButton,
+  BatchPlayButton,
   SimpleList,
   RangeField,
   SongDetails,

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/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>
   )