Add Song Details to Album view

ui/src/album/AlbumSongs.js

@@ -14,6 +14,7 @@ import { Card, useMediaQuery } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
 import { setTrack } from '../audioplayer'
 import { DurationField } from '../common'
+import { SongDetails } from '../common'
 
 const useStyles = makeStyles(
   (theme) => ({
@@ -64,6 +65,7 @@ const AlbumSongs = (props) => {
   const classes = useStyles(props)
   const classesToolbar = useStylesListToolbar(props)
   const dispatch = useDispatch()
+  const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
   const controllerProps = useListController(props)
   const { bulkActionButtons, albumId, expand, className } = props
@@ -106,6 +108,7 @@ const AlbumSongs = (props) => {
             />
           ) : (
             <Datagrid
+              expand={!isXsmall && <SongDetails />}
               rowClick={(id, basePath, record) => dispatch(setTrack(record))}
               {...controllerProps}
               hasBulkActions={hasBulkActions}

ui/src/common/SongDetails.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import {
+  Show,
+  SimpleShowLayout,
+  BooleanField,
+  DateField,
+  TextField
+} from 'react-admin'
+import { BitrateField } from './index'
+
+const SongDetails = (props) => {
+  return (
+    <Show {...props} title=" ">
+      <SimpleShowLayout>
+        <TextField source="path" />
+        <TextField source="albumArtist" />
+        <TextField source="genre" />
+        <BooleanField source="compilation" />
+        <BitrateField source="bitRate" />
+        <DateField source="updatedAt" showTime />
+      </SimpleShowLayout>
+    </Show>
+  )
+}
+
+export default SongDetails

ui/src/common/index.js

@@ -5,6 +5,7 @@ import Pagination from './Pagination'
 import PlayButton from './PlayButton'
 import SimpleList from './SimpleList'
 import RangeField, { formatRange } from './RangeField'
+import SongDetails from './SongDetails'
 
 export {
   Title,
@@ -14,5 +15,6 @@ export {
   PlayButton,
   SimpleList,
   RangeField,
+  SongDetails,
   formatRange
 }

ui/src/song/SongList.js

@@ -1,20 +1,15 @@
 import React from 'react'
 import {
-  BooleanField,
   Datagrid,
-  DateField,
   Filter,
   FunctionField,
   List,
   NumberField,
   SearchInput,
-  Show,
-  SimpleShowLayout,
   TextField
 } from 'react-admin'
 import { useMediaQuery } from '@material-ui/core'
 import {
-  BitrateField,
   DurationField,
   Pagination,
   PlayButton,
@@ -26,6 +21,7 @@ import { addTrack, setTrack } from '../audioplayer'
 import AddIcon from '@material-ui/icons/Add'
 import { SongBulkActions } from './SongBulkActions'
 import { AlbumLinkField } from './AlbumLinkField'
+import { SongDetails } from '../common'
 
 const SongFilter = (props) => (
   <Filter {...props}>
@@ -33,21 +29,6 @@ const SongFilter = (props) => (
   </Filter>
 )
 
-const SongDetails = (props) => {
-  return (
-    <Show {...props} title=" ">
-      <SimpleShowLayout>
-        <TextField source="path" />
-        <TextField source="albumArtist" />
-        <TextField source="genre" />
-        <BooleanField source="compilation" />
-        <BitrateField source="bitRate" />
-        <DateField source="updatedAt" showTime />
-      </SimpleShowLayout>
-    </Show>
-  )
-}
-
 const SongList = (props) => {
   const dispatch = useDispatch()
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))