feat: song list xsmall view

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