Refactor album actions, simplify usage

ui/src/album/AlbumActions.js

@@ -21,14 +21,11 @@ export const AlbumActions = ({
   const dispatch = useDispatch()
   const translate = useTranslate()
 
-  // Filter out tracks from other albums (cached by ReactAdmin)
-  const filteredData = ids.reduce((acc, id) => ({ ...acc, [id]: data[id] }), {})
-
   return (
     <TopToolbar className={className} {...sanitizeListRestProps(rest)}>
       <Button
         onClick={() => {
-          dispatch(playAlbum(ids[0], filteredData))
+          dispatch(playAlbum(data, ids))
         }}
         label={translate('resources.album.actions.playAll')}
       >
@@ -36,7 +33,7 @@ export const AlbumActions = ({
       </Button>
       <Button
         onClick={() => {
-          dispatch(shuffleAlbum(filteredData))
+          dispatch(shuffleAlbum(data, ids))
         }}
         label={translate('resources.album.actions.shuffle')}
       >

ui/src/album/AlbumContextMenu.js

@@ -25,11 +25,11 @@ const AlbumContextMenu = ({ record, color }) => {
   const options = {
     play: {
       label: translate('resources.album.actions.playAll'),
-      action: (data, id) => playAlbum(id, data),
+      action: (data) => playAlbum(data),
     },
     addToQueue: {
       label: translate('resources.album.actions.addToQueue'),
-      action: (data) => addTracks(Object.values(data)),
+      action: (data) => addTracks(data),
     },
     shuffle: {
       label: translate('resources.album.actions.shuffle'),
@@ -63,7 +63,7 @@ const AlbumContextMenu = ({ record, color }) => {
           (acc, cur) => ({ ...acc, [cur.id]: cur }),
           {}
         )
-        dispatch(options[key].action(adata, response.data[0].id))
+        dispatch(options[key].action(adata))
       })
       .catch(() => {
         notify('ra.page.error', 'warning')

ui/src/album/AlbumSongs.js

@@ -108,7 +108,7 @@ const AlbumSongs = (props) => {
           ) : (
             <Datagrid
               expand={!isXsmall && <SongDetails />}
-              rowClick={(id) => dispatch(playAlbum(id, data))}
+              rowClick={(id) => dispatch(playAlbum(data, ids, id))}
               {...controllerProps}
               hasBulkActions={hasBulkActions}
             >

ui/src/audioplayer/queue.js

@@ -22,10 +22,20 @@ const setTrack = (data) => ({
   data,
 })
 
-const addTracks = (data) => ({
+let filterAlbumSongs = function (data, ids) {
-  type: PLAYER_ADD_TRACK,
+  if (!ids) {
-  data,
+    return data
-})
+  }
+  return ids.reduce((acc, id) => ({ ...acc, [id]: data[id] }), {})
+}
+
+const addTracks = (data, ids) => {
+  const songs = filterAlbumSongs(data, ids)
+  return {
+    type: PLAYER_ADD_TRACK,
+    data: songs,
+  }
+}
 
 const shuffle = (data) => {
   const ids = Object.keys(data)
@@ -38,8 +48,9 @@ const shuffle = (data) => {
   return shuffled
 }
 
-const shuffleAlbum = (data) => {
+const shuffleAlbum = (data, ids) => {
-  const shuffled = shuffle(data)
+  const songs = filterAlbumSongs(data, ids)
+  const shuffled = shuffle(songs)
   const firstId = Object.keys(shuffled)[0]
   return {
     type: PLAYER_PLAY_ALBUM,
@@ -48,11 +59,14 @@ const shuffleAlbum = (data) => {
   }
 }
 
-const playAlbum = (id, data) => ({
+const playAlbum = (data, ids, selectedId) => {
-  type: PLAYER_PLAY_ALBUM,
+  const songs = filterAlbumSongs(data, ids)
-  id,
+  return {
-  data,
+    type: PLAYER_PLAY_ALBUM,
-})
+    id: selectedId || Object.keys(songs)[0],
+    data: songs,
+  }
+}
 
 const syncQueue = (id, data) => ({
   type: PLAYER_SYNC_QUEUE,
@@ -75,8 +89,8 @@ const playQueueReducer = (
   switch (type) {
     case PLAYER_ADD_TRACK:
       queue = previousState.queue
-      data.forEach((item) => {
+      Object.keys(data).forEach((id) => {
-        queue.push(mapToAudioLists(item))
+        queue.push(mapToAudioLists(data[id]))
       })
       return { ...previousState, queue, clear: false }
     case PLAYER_SET_TRACK:

ui/src/song/AddToQueueButton.js

@@ -27,7 +27,7 @@ const AddToQueueButton = ({ resource, selectedIds }) => {
           {}
         )
         // Add the tracks to the queue in the selection order
-        dispatch(addTracks(selectedIds.map((id) => tracks[id])))
+        dispatch(addTracks(tracks, selectedIds))
       })
       .catch(() => {
         notify('ra.page.error', 'warning')

ui/src/song/SongContextMenu.js

@@ -16,7 +16,7 @@ export const SongContextMenu = ({ record }) => {
     },
     addToQueue: {
       label: translate('resources.song.actions.addToQueue'),
-      action: (record) => addTracks([record]),
+      action: (record) => addTracks({ [record.id]: record }),
     },
   }