feat: song list xsmall view

ui/src/player/Player.js

@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { fetchUtils, useAuthState, useDataProvider } from 'react-admin'
 import ReactJkMusicPlayer from 'react-jinke-music-player'
 import 'react-jinke-music-player/assets/index.css'
-import { markScrobbled, syncQueue } from './queue'
+import { scrobble, syncQueue } from './queue'
 
 const defaultOptions = {
   bounds: 'body',
@@ -55,7 +55,7 @@ const Player = () => {
     }
     const item = queue.queue.find((item) => item.id === info.id)
     if (item && !item.scrobbled) {
-      dispatch(markScrobbled(info.id, true))
+      dispatch(scrobble(info.id))
       fetchUtils.fetchJson(
         `/rest/scrobble?u=admin&p=enc:73756e6461&f=json&v=1.8.0&c=NavidromeUI&id=${info.id}&submission=true`
       )
@@ -63,13 +63,10 @@ const Player = () => {
   }
 
   const OnAudioPlay = (info) => {
-    console.log('AUDIOPLAY: ', info)
     if (info.duration) {
-      dispatch(markScrobbled(info.id, false))
       fetchUtils.fetchJson(
         `/rest/scrobble?u=admin&p=enc:73756e6461&f=json&v=1.8.0&c=NavidromeUI&id=${info.id}&submission=false`
       )
-      //
       dataProvider.getOne('keepalive', { id: info.id })
     }
   }

ui/src/player/queue.js

@@ -30,9 +30,9 @@ const syncQueue = (data) => ({
   data
 })
 
-const markScrobbled = (id, submission = false) => ({
+const scrobble = (id) => ({
   type: PLAYER_SCROBBLE,
-  data: { id, submission }
+  data: id
 })
 
 const playQueueReducer = (
@@ -52,7 +52,7 @@ const playQueueReducer = (
       const newQueue = previousState.queue.map((item) => {
         return {
           ...item,
-          scrobbled: item.scrobbled || (item.id === data.id && data.submission)
+          scrobbled: item.scrobbled || (item.id === data)
         }
       })
       return { queue: newQueue, clear: false }
@@ -61,4 +61,4 @@ const playQueueReducer = (
   }
 }
 
-export { addTrack, setTrack, syncQueue, markScrobbled, playQueueReducer }
+export { addTrack, setTrack, syncQueue, scrobble, playQueueReducer }

ui/src/song/SongList.js

@@ -10,8 +10,10 @@ import {
   Show,
   SimpleShowLayout,
   TextField,
-  TextInput
+  TextInput,
+  SimpleList
 } from 'react-admin'
+import { useMediaQuery } from '@material-ui/core'
 import { BitrateField, DurationField, Pagination, Title } from '../common'
 import AddToQueueButton from './AddToQueueButton'
 import PlayButton from './PlayButton'
@@ -46,6 +48,7 @@ const SongDetails = (props) => {
 }
 
 const SongList = (props) => {
+  const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
   return (
     <List
       {...props}
@@ -57,16 +60,32 @@ const SongList = (props) => {
       perPage={15}
       pagination={<Pagination />}
     >
-      <Datagrid expand={<SongDetails />}>
-        <PlayButton {...props} />
-        <TextField source="title" />
-        <TextField source="album" />
-        <TextField source="artist" />
-        <NumberField label="Track #" source="trackNumber" />
-        <NumberField label="Disc #" source="discNumber" />
-        <TextField source="year" />
-        <DurationField label="Time" source="duration" />
-      </Datagrid>
+      {isXsmall ? (
+        <SimpleList
+          primaryText={(record) => (
+            <>
+              <PlayButton record={record} />
+              {record.title}
+            </>
+          )}
+          secondaryText={(record) => record.artist}
+          tertiaryText={(record) => (
+            <DurationField record={record} source={'duration'} />
+          )}
+          linkType={false}
+        />
+      ) : (
+        <Datagrid expand={<SongDetails />}>
+          <PlayButton {...props} />
+          <TextField source="title" />
+          <TextField source="album" />
+          <TextField source="artist" />
+          <NumberField label="Track #" source="trackNumber" />
+          <NumberField label="Disc #" source="discNumber" />
+          <TextField source="year" />
+          <DurationField label="Time" source="duration" />
+        </Datagrid>
+      )}
     </List>
   )
 }