From c98a32d56ac43ecee5fa3c08b1d915d59847bb75 Mon Sep 17 00:00:00 2001
From: Deluan <deluan@navidrome.org>
Date: Sat, 31 Oct 2020 10:12:38 -0400
Subject: [PATCH] Add "PlayNow" button to bulk actions

---
 ui/src/album/AlbumSongBulkActions.js              | 15 +++++++++++----
 .../BatchPlayButton.js}                           |  6 +++---
 ui/src/common/index.js                            |  2 ++
 ui/src/song/AddToPlaylistButton.js                |  2 +-
 ui/src/song/SongBulkActions.js                    |  6 +++---
 5 files changed, 20 insertions(+), 11 deletions(-)
 rename ui/src/{song/AddToQueueButton.js => common/BatchPlayButton.js} (89%)

diff --git a/ui/src/album/AlbumSongBulkActions.js b/ui/src/album/AlbumSongBulkActions.js
index fd2cc62dc..fd3d3d1a6 100644
--- a/ui/src/album/AlbumSongBulkActions.js
+++ b/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>
   )
diff --git a/ui/src/song/AddToQueueButton.js b/ui/src/common/BatchPlayButton.js
similarity index 89%
rename from ui/src/song/AddToQueueButton.js
rename to ui/src/common/BatchPlayButton.js
index 68575b692..52aae0e7f 100644
--- a/ui/src/song/AddToQueueButton.js
+++ b/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
diff --git a/ui/src/common/index.js b/ui/src/common/index.js
index 6451f0431..4e6535204 100644
--- a/ui/src/common/index.js
+++ b/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,
diff --git a/ui/src/song/AddToPlaylistButton.js b/ui/src/song/AddToPlaylistButton.js
index 1bfe1c78d..80aa22a22 100644
--- a/ui/src/song/AddToPlaylistButton.js
+++ b/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()
diff --git a/ui/src/song/SongBulkActions.js b/ui/src/song/SongBulkActions.js
index 34e4284bb..1da9caf0b 100644
--- a/ui/src/song/SongBulkActions.js
+++ b/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>
   )