Show Playlist tracks

ui/src/album/AlbumSongs.js

@@ -2,28 +2,19 @@ import React from 'react'
 import {
   BulkActionsToolbar,
   Datagrid,
+  DatagridBody,
+  DatagridLoading,
   FunctionField,
   ListToolbar,
   TextField,
   useListController,
-  useTranslate,
-  DatagridLoading,
-  DatagridBody,
-  DatagridRow,
 } from 'react-admin'
 import classnames from 'classnames'
 import { useDispatch } from 'react-redux'
-import {
-  Card,
-  useMediaQuery,
-  TableRow,
-  TableCell,
-  Typography,
-} from '@material-ui/core'
+import { Card, useMediaQuery } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
 import { playAlbum } from '../audioplayer'
-import { DurationField } from '../common'
-import { SongDetails } from '../common'
+import { DurationField, SongDetails, SongDatagridRow } from '../common'
 
 const useStyles = makeStyles(
   (theme) => ({
@@ -72,7 +63,6 @@ const trackName = (r) => {
 const AlbumSongs = (props) => {
   const classes = useStyles(props)
   const classesToolbar = useStylesListToolbar(props)
-  const translate = useTranslate()
   const dispatch = useDispatch()
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
@@ -93,35 +83,8 @@ const AlbumSongs = (props) => {
   const showPlaceholder = !anySong || anySong.albumId !== albumId
   const hasBulkActions = props.bulkActionButtons !== false
 
-  const SongDatagridRow = (props) => {
-    const { record, children } = props
-    return (
-      <>
-        {multiDisc && (
-          <TableRow>
-            {record.trackNumber === 1 && (
-              <TableCell colSpan={children.length + 1}>
-                <Typography variant="h6">
-                  {record.discSubtitle
-                    ? translate('message.discSubtitle', {
-                        subtitle: record.discSubtitle,
-                        number: record.discNumber,
-                      })
-                    : translate('message.discWithoutSubtitle', {
-                        number: record.discNumber,
-                      })}
-                </Typography>
-              </TableCell>
-            )}
-          </TableRow>
-        )}
-        <DatagridRow {...props} />
-      </>
-    )
-  }
-
   const SongsDatagridBody = (props) => (
-    <DatagridBody {...props} row={<SongDatagridRow />} />
+    <DatagridBody {...props} row={<SongDatagridRow multiDisc={multiDisc} />} />
   )
   const SongsDatagrid = (props) => (
     <Datagrid {...props} body={<SongsDatagridBody />} />
@@ -164,7 +127,6 @@ const AlbumSongs = (props) => {
               rowClick={(id) => dispatch(playAlbum(data, ids, id))}
               {...controllerProps}
               hasBulkActions={hasBulkActions}
-              multiDisc={multiDisc}
             >
               {isDesktop && (
                 <TextField