Show Playlist tracks

ui/src/common/SongDatagridRow.js

@@ -0,0 +1,42 @@
+import React from 'react'
+import { DatagridRow, useTranslate } from 'react-admin'
+import { TableRow, TableCell, Typography } from '@material-ui/core'
+import PropTypes from 'prop-types'
+import RangeField from './RangeField'
+
+const SongDatagridRow = ({ record, children, multiDisc, ...rest }) => {
+  const translate = useTranslate()
+  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 record={record} {...rest}>
+        {children}
+      </DatagridRow>
+    </>
+  )
+}
+
+RangeField.propTypes = {
+  record: PropTypes.object,
+  children: PropTypes.node,
+  multiDisc: PropTypes.bool,
+}
+
+export default SongDatagridRow

ui/src/common/index.js

@@ -10,6 +10,7 @@ import SongDetails from './SongDetails'
 import SizeField from './SizeField'
 import DocLink from './DocLink'
 import List from './List'
+import SongDatagridRow from './SongDatagridRow'
 
 export {
   Title,
@@ -22,6 +23,7 @@ export {
   SimpleList,
   RangeField,
   SongDetails,
+  SongDatagridRow,
   DocLink,
   formatRange,
   ArtistLinkField,