From 06ab88415a3d98d7e0d34cab486ac267dba1d341 Mon Sep 17 00:00:00 2001
From: Deluan <deluan@deluan.com>
Date: Thu, 7 May 2020 11:24:28 -0400
Subject: [PATCH] Refactor album actions, simplify usage

---
 ui/src/album/AlbumActions.js     |  7 ++----
 ui/src/album/AlbumContextMenu.js |  6 ++---
 ui/src/album/AlbumSongs.js       |  2 +-
 ui/src/audioplayer/queue.js      | 40 +++++++++++++++++++++-----------
 ui/src/song/AddToQueueButton.js  |  2 +-
 ui/src/song/SongContextMenu.js   |  2 +-
 6 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/ui/src/album/AlbumActions.js b/ui/src/album/AlbumActions.js
index d1a64628c..18261f659 100644
--- a/ui/src/album/AlbumActions.js
+++ b/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')}
       >
diff --git a/ui/src/album/AlbumContextMenu.js b/ui/src/album/AlbumContextMenu.js
index 657f9eb71..5ff12e513 100644
--- a/ui/src/album/AlbumContextMenu.js
+++ b/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')
diff --git a/ui/src/album/AlbumSongs.js b/ui/src/album/AlbumSongs.js
index 822d1e93b..22500e562 100644
--- a/ui/src/album/AlbumSongs.js
+++ b/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}
             >
diff --git a/ui/src/audioplayer/queue.js b/ui/src/audioplayer/queue.js
index 0931cfdbf..c19a7c5d0 100644
--- a/ui/src/audioplayer/queue.js
+++ b/ui/src/audioplayer/queue.js
@@ -22,10 +22,20 @@ const setTrack = (data) => ({
   data,
 })
 
-const addTracks = (data) => ({
-  type: PLAYER_ADD_TRACK,
-  data,
-})
+let filterAlbumSongs = function (data, ids) {
+  if (!ids) {
+    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 shuffled = shuffle(data)
+const shuffleAlbum = (data, ids) => {
+  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) => ({
-  type: PLAYER_PLAY_ALBUM,
-  id,
-  data,
-})
+const playAlbum = (data, ids, selectedId) => {
+  const songs = filterAlbumSongs(data, ids)
+  return {
+    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) => {
-        queue.push(mapToAudioLists(item))
+      Object.keys(data).forEach((id) => {
+        queue.push(mapToAudioLists(data[id]))
       })
       return { ...previousState, queue, clear: false }
     case PLAYER_SET_TRACK:
diff --git a/ui/src/song/AddToQueueButton.js b/ui/src/song/AddToQueueButton.js
index f2c949e1e..8ee4485ce 100644
--- a/ui/src/song/AddToQueueButton.js
+++ b/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')
diff --git a/ui/src/song/SongContextMenu.js b/ui/src/song/SongContextMenu.js
index 1eb829781..f0f8d0bb5 100644
--- a/ui/src/song/SongContextMenu.js
+++ b/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 }),
     },
   }