Change addTrack action to addTracks, supporting multiple tracks to be added to the queue in one call

ui/src/song/AddToQueueButton.js

@@ -7,7 +7,7 @@ import {
   useNotify,
 } from 'react-admin'
 import { useDispatch } from 'react-redux'
-import { addTrack } from '../audioplayer'
+import { addTracks } from '../audioplayer'
 import AddToQueueIcon from '@material-ui/icons/AddToQueue'
 
 const AddToQueueButton = ({ selectedIds }) => {
@@ -21,14 +21,13 @@ const AddToQueueButton = ({ selectedIds }) => {
     dataProvider
       .getMany('song', { ids: selectedIds })
       .then((response) => {
-        // Add the tracks to the queue in the selection order
+        // 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
           return acc
         }, {})
-        selectedIds.forEach((id) => {
-          dispatch(addTrack(tracks[id]))
-        })
+        // Add the tracks to the queue in the selection order
+        dispatch(addTracks(selectedIds.map((id) => tracks[id])))
       })
       .catch(() => {
         notify('ra.page.error', 'warning')

ui/src/song/SongContextMenu.js

@@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux'
 import { useTranslate } from 'react-admin'
 import { IconButton, Menu, MenuItem } from '@material-ui/core'
 import MoreVertIcon from '@material-ui/icons/MoreVert'
-import { addTrack, setTrack } from '../audioplayer'
+import { addTracks, setTrack } from '../audioplayer'
 
 export const SongContextMenu = ({ record }) => {
   const dispatch = useDispatch()
@@ -16,7 +16,7 @@ export const SongContextMenu = ({ record }) => {
     },
     addToQueue: {
       label: translate('resources.song.actions.addToQueue'),
-      action: (record) => addTrack(record),
+      action: (record) => addTracks([record]),
     },
   }