Remove duplicated code for SongBulkActions

ui/src/common/AddToPlaylistButton.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import { useDispatch } from 'react-redux'
+import { Button, useTranslate, useUnselectAll } from 'react-admin'
+import PlaylistAddIcon from '@material-ui/icons/PlaylistAdd'
+import { openAddToPlaylist } from '../dialogs/dialogState'
+
+const AddToPlaylistButton = ({ resource, selectedIds }) => {
+  const translate = useTranslate()
+  const dispatch = useDispatch()
+  const unselectAll = useUnselectAll()
+
+  const handleClick = () => {
+    dispatch(
+      openAddToPlaylist({ selectedIds, onSuccess: () => unselectAll(resource) })
+    )
+  }
+
+  return (
+    <Button
+      aria-controls="simple-menu"
+      aria-haspopup="true"
+      onClick={handleClick}
+      color="secondary"
+      label={translate('resources.song.actions.addToPlaylist')}
+    >
+      <PlaylistAddIcon />
+    </Button>
+  )
+}
+
+export default AddToPlaylistButton

ui/src/common/BatchPlayButton.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import {
   Button,
   useDataProvider,
@@ -7,8 +8,6 @@ import {
   useNotify,
 } from 'react-admin'
 import { useDispatch } from 'react-redux'
-import { addTracks } from '../audioplayer'
-import { RiPlayListAddFill } from 'react-icons/ri'
 
 const BatchPlayButton = ({ resource, selectedIds, action, label, icon }) => {
   const dispatch = useDispatch()
@@ -42,10 +41,10 @@ const BatchPlayButton = ({ resource, selectedIds, action, label, icon }) => {
   )
 }
 
-BatchPlayButton.defaultProps = {
-  action: addTracks,
-  label: 'resources.song.actions.addToQueue',
-  icon: <RiPlayListAddFill />,
+BatchPlayButton.propTypes = {
+  action: PropTypes.func.isRequired,
+  label: PropTypes.string.isRequired,
+  icon: PropTypes.object.isRequired,
 }
 
 export default BatchPlayButton

ui/src/common/SongBulkActions.js

@@ -0,0 +1,40 @@
+import React, { Fragment, useEffect } from 'react'
+import { useUnselectAll } from 'react-admin'
+import { addTracks, playNext, playTracks } from '../audioplayer'
+import { RiPlayList2Fill, RiPlayListAddFill } from 'react-icons/ri'
+import PlayArrowIcon from '@material-ui/icons/PlayArrow'
+import { BatchPlayButton } from './index'
+import AddToPlaylistButton from './AddToPlaylistButton'
+
+const SongBulkActions = (props) => {
+  const unselectAll = useUnselectAll()
+  useEffect(() => {
+    unselectAll(props.resource)
+    // eslint-disable-next-line
+  }, [])
+  return (
+    <Fragment>
+      <BatchPlayButton
+        {...props}
+        action={playTracks}
+        label={'resources.song.actions.playNow'}
+        icon={<PlayArrowIcon />}
+      />
+      <BatchPlayButton
+        {...props}
+        action={playNext}
+        label={'resources.song.actions.playNext'}
+        icon={<RiPlayList2Fill />}
+      />
+      <BatchPlayButton
+        {...props}
+        action={addTracks}
+        label={'resources.song.actions.addToQueue'}
+        icon={<RiPlayListAddFill />}
+      />
+      <AddToPlaylistButton {...props} />
+    </Fragment>
+  )
+}
+
+export default SongBulkActions

ui/src/common/index.js

@@ -4,6 +4,8 @@ import BitrateField from './BitrateField'
 import Pagination from './Pagination'
 import PlayButton from './PlayButton'
 import BatchPlayButton from './BatchPlayButton'
+import SongBulkActions from './SongBulkActions'
+import AddToPlaylistButton from './AddToPlaylistButton'
 import SimpleList from './SimpleList'
 import RangeField, { formatRange } from './RangeField'
 import ArtistLinkField, { useGetHandleArtistClick } from './ArtistLinkField'
@@ -29,6 +31,8 @@ export {
   List,
   PlayButton,
   BatchPlayButton,
+  SongBulkActions,
+  AddToPlaylistButton,
   SimpleList,
   RangeField,
   SongDetails,