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))}
     />
   )
 }