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

ui/src/audioplayer/index.js

@@ -1,10 +1,17 @@
 import Player from './Player'
 import {
-  addTrack,
+  addTracks,
   setTrack,
   playQueueReducer,
   playAlbum,
   shuffleAlbum,
 } from './queue'
 
-export { Player, addTrack, setTrack, playAlbum, playQueueReducer, shuffleAlbum }
+export {
+  Player,
+  addTracks,
+  setTrack,
+  playAlbum,
+  playQueueReducer,
+  shuffleAlbum,
+}

ui/src/audioplayer/queue.js

@@ -16,13 +16,13 @@ const mapToAudioLists = (item) => ({
   musicSrc: subsonic.url('stream', item.id, { ts: true }),
 })
 
-const addTrack = (data) => ({
-  type: PLAYER_ADD_TRACK,
+const setTrack = (data) => ({
+  type: PLAYER_SET_TRACK,
   data,
 })
 
-const setTrack = (data) => ({
-  type: PLAYER_SET_TRACK,
+const addTracks = (data) => ({
+  type: PLAYER_ADD_TRACK,
   data,
 })
 
@@ -74,7 +74,9 @@ const playQueueReducer = (
   switch (type) {
     case PLAYER_ADD_TRACK:
       queue = previousState.queue
-      queue.push(mapToAudioLists(data))
+      data.forEach((item) => {
+        queue.push(mapToAudioLists(item))
+      })
       return { ...previousState, queue, clear: false }
     case PLAYER_SET_TRACK:
       return {
@@ -131,7 +133,7 @@ const playQueueReducer = (
 }
 
 export {
-  addTrack,
+  addTracks,
   setTrack,
   playAlbum,
   syncQueue,

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]),
     },
   }