feat: add the remainder of the album to the queue when clicking on an album's track

ui/src/album/AlbumSongList.js

@@ -4,19 +4,23 @@ import { DurationField, PlayButton, SimpleList } from '../common'
 import { addTrack, setTrack } from '../player'
 import AddIcon from '@material-ui/icons/Add'
 import { useDispatch } from 'react-redux'
+import { playAlbum } from '../player/queue'
 
 const AlbumSongList = (props) => {
   const dispatch = useDispatch()
   const { record } = props
+
   const { data, total, loading, error } = useGetList(
     'song',
     { page: 0, perPage: 100 },
     { field: 'album', order: 'ASC' },
     { album_id: record.id }
   )
+
   if (error) {
     return <p>ERROR: {error}</p>
   }
+
   const trackName = (r) => {
     const name = r.title
     if (r.trackNumber) {
@@ -24,6 +28,7 @@ const AlbumSongList = (props) => {
     }
     return name
   }
+
   return (
     <SimpleList
       data={data}
@@ -32,7 +37,7 @@ const AlbumSongList = (props) => {
       total={total}
       primaryText={(r) => (
         <>
-          <PlayButton action={setTrack(r)} />
+          <PlayButton action={playAlbum(r.id, data)} />
           <PlayButton action={addTrack(r)} icon={<AddIcon />} />
           {trackName(r)}
         </>
@@ -41,7 +46,7 @@ const AlbumSongList = (props) => {
         r.albumArtist && r.artist !== r.albumArtist ? r.artist : ''
       }
       tertiaryText={(r) => <DurationField record={r} source={'duration'} />}
-      linkType={(id, basePath, record) => dispatch(setTrack(record))}
+      linkType={(id) => dispatch(playAlbum(id, data))}
     />
   )
 }

ui/src/player/queue.js

@@ -5,9 +5,9 @@ const PLAYER_ADD_TRACK = 'PLAYER_ADD_TRACK'
 const PLAYER_SET_TRACK = 'PLAYER_SET_TRACK'
 const PLAYER_SYNC_QUEUE = 'PLAYER_SYNC_QUEUE'
 const PLAYER_SCROBBLE = 'PLAYER_SCROBBLE'
+const PLAYER_PLAY_ALBUM = 'PLAYER_PLAY_ALBUM'
 
 const mapToAudioLists = (item) => ({
-  id: item.id,
   name: item.title,
   singer: item.artist,
   cover: subsonicUrl('getCoverArt', item.id, 'size=300'),
@@ -25,6 +25,12 @@ const setTrack = (data) => ({
   data
 })
 
+const playAlbum = (id, data) => ({
+  type: PLAYER_PLAY_ALBUM,
+  data,
+  id
+})
+
 const syncQueue = (data) => ({
   type: PLAYER_SYNC_QUEUE,
   data
@@ -37,11 +43,13 @@ const scrobble = (id) => ({
 
 const playQueueReducer = (
   previousState = { queue: [], clear: true },
-  { type, data }
+  payload
 ) => {
+  let queue
+  const { type, data } = payload
   switch (type) {
     case PLAYER_ADD_TRACK:
-      const queue = previousState.queue
+      queue = previousState.queue
       queue.push(mapToAudioLists(data))
       return { queue, clear: false }
     case PLAYER_SET_TRACK:
@@ -56,9 +64,21 @@ const playQueueReducer = (
         }
       })
       return { queue: newQueue, clear: false }
+    case PLAYER_PLAY_ALBUM:
+      queue = []
+      let match = false
+      Object.keys(data).forEach((id) => {
+        if (id === payload.id) {
+          match = true
+        }
+        if (match) {
+          queue.push(mapToAudioLists(data[id]))
+        }
+      })
+      return { queue, clear: true }
     default:
       return previousState
   }
 }
 
-export { addTrack, setTrack, syncQueue, scrobble, playQueueReducer }
+export { addTrack, setTrack, playAlbum, syncQueue, scrobble, playQueueReducer }