Add "Play Next" action (finally)

ui/src/album/AlbumActions.js

@@ -10,8 +10,8 @@ import {
 import PlayArrowIcon from '@material-ui/icons/PlayArrow'
 import ShuffleIcon from '@material-ui/icons/Shuffle'
 import CloudDownloadOutlinedIcon from '@material-ui/icons/CloudDownloadOutlined'
-import AddToQueueIcon from '@material-ui/icons/AddToQueue'
-import { addTracks, playTracks, shuffleTracks } from '../audioplayer'
+import { RiPlayListAddFill, RiPlayList2Fill } from 'react-icons/ri'
+import { playNext, addTracks, playTracks, shuffleTracks } from '../audioplayer'
 import subsonic from '../subsonic'
 
 const AlbumActions = ({ className, ids, data, record, ...rest }) => {
@@ -22,6 +22,10 @@ const AlbumActions = ({ className, ids, data, record, ...rest }) => {
     dispatch(playTracks(data, ids))
   }, [dispatch, data, ids])
 
+  const handlePlayNext = React.useCallback(() => {
+    dispatch(playNext(data, ids))
+  }, [dispatch, data, ids])
+
   const handlePlayLater = React.useCallback(() => {
     dispatch(addTracks(data, ids))
   }, [dispatch, data, ids])
@@ -48,11 +52,17 @@ const AlbumActions = ({ className, ids, data, record, ...rest }) => {
       >
         <ShuffleIcon />
       </Button>
+      <Button
+        onClick={handlePlayNext}
+        label={translate('resources.album.actions.playNext')}
+      >
+        <RiPlayList2Fill />
+      </Button>
       <Button
         onClick={handlePlayLater}
         label={translate('resources.album.actions.addToQueue')}
       >
-        <AddToQueueIcon />
+        <RiPlayListAddFill />
       </Button>
       <Button
         onClick={handleDownload}

ui/src/album/AlbumSongBulkActions.js

@@ -1,5 +1,6 @@
 import React, { Fragment, useEffect } from 'react'
 import { useUnselectAll } from 'react-admin'
+import { playNext } from '../audioplayer'
 import AddToQueueButton from '../song/AddToQueueButton'
 import AddToPlaylistButton from '../song/AddToPlaylistButton'
 
@@ -11,6 +12,11 @@ export const AlbumSongBulkActions = (props) => {
   }, [])
   return (
     <Fragment>
+      <AddToQueueButton
+        {...props}
+        action={playNext}
+        label={'resources.song.actions.playNext'}
+      />
       <AddToQueueButton {...props} />
       <AddToPlaylistButton {...props} />
     </Fragment>