feat: make song list more responsive

ui/src/player/queue.js

@@ -12,7 +12,7 @@ const mapToAudioLists = (item) => ({
   cover: `/rest/getCoverArt?u=admin&p=enc:73756e6461&f=json&v=1.8.0&c=NavidromeUI&size=300&id=${item.id}`,
   musicSrc: `/rest/stream?u=admin&p=enc:73756e6461&f=json&v=1.8.0&c=NavidromeUI&id=${
     item.id
-  }&ts=${new Date().getTime()}`
+  }&_=${new Date().getTime()}`
 })
 
 const addTrack = (data) => ({
@@ -52,7 +52,7 @@ const playQueueReducer = (
       const newQueue = previousState.queue.map((item) => {
         return {
           ...item,
-          scrobbled: item.scrobbled || (item.id === data)
+          scrobbled: item.scrobbled || item.id === data
         }
       })
       return { queue: newQueue, clear: false }

ui/src/song/AddToQueueButton.js

@@ -2,6 +2,9 @@ import React from 'react'
 import { Button, useDataProvider, useUnselectAll } from 'react-admin'
 import { useDispatch } from 'react-redux'
 import { addTrack } from '../player'
+import AddToQueueIcon from '@material-ui/icons/AddToQueue'
+
+import Tooltip from '@material-ui/core/Tooltip'
 
 const AddToQueueButton = ({ selectedIds }) => {
   const dispatch = useDispatch()
@@ -16,7 +19,17 @@ const AddToQueueButton = ({ selectedIds }) => {
     unselectAll('song')
   }
 
-  return <Button color="secondary" label="Add To Queue" onClick={addToQueue} />
+  return (
+    <Button
+      color="secondary"
+      label={
+        <Tooltip title={'Play Later'} placement="right">
+          <AddToQueueIcon />
+        </Tooltip>
+      }
+      onClick={addToQueue}
+    />
+  )
 }
 
 export default AddToQueueButton

ui/src/song/SongList.js

@@ -17,6 +17,9 @@ import { useMediaQuery } from '@material-ui/core'
 import { BitrateField, DurationField, Pagination, Title } from '../common'
 import AddToQueueButton from './AddToQueueButton'
 import PlayButton from './PlayButton'
+import { useDispatch } from 'react-redux'
+import { setTrack, addTrack } from '../player'
+import AddIcon from '@material-ui/icons/Add'
 
 const SongFilter = (props) => (
   <Filter {...props}>
@@ -48,7 +51,9 @@ const SongDetails = (props) => {
 }
 
 const SongList = (props) => {
+  const dispatch = useDispatch()
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
+  const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
   return (
     <List
       {...props}
@@ -57,7 +62,7 @@ const SongList = (props) => {
       exporter={false}
       bulkActionButtons={<SongBulkActionButtons />}
       filters={<SongFilter />}
-      perPage={15}
+      perPage={isXsmall ? 50 : 15}
       pagination={<Pagination />}
     >
       {isXsmall ? (
@@ -65,24 +70,32 @@ const SongList = (props) => {
           primaryText={(record) => (
             <>
               <PlayButton record={record} />
+              <PlayButton
+                record={record}
+                action={addTrack}
+                icon={<AddIcon />}
+              />
               {record.title}
             </>
           )}
           secondaryText={(record) => record.artist}
           tertiaryText={(record) => (
-            <DurationField record={record} source={'duration'} />
+            <>
+              <DurationField record={record} source={'duration'} />
+            </>
           )}
           linkType={false}
         />
       ) : (
-        <Datagrid expand={<SongDetails />}>
-          <PlayButton {...props} />
+        <Datagrid
+          expand={<SongDetails />}
+          rowClick={(id, basePath, record) => dispatch(setTrack(record))}
+        >
           <TextField source="title" />
-          <TextField source="album" />
+          {isDesktop && <TextField source="album" />}
           <TextField source="artist" />
-          <NumberField label="Track #" source="trackNumber" />
-          <NumberField label="Disc #" source="discNumber" />
-          <TextField source="year" />
+          {isDesktop && <NumberField label="Track #" source="trackNumber" />}
+          {isDesktop && <TextField source="year" />}
           <DurationField label="Time" source="duration" />
         </Datagrid>
       )}