diff --git a/ui/src/album/AlbumSongs.js b/ui/src/album/AlbumSongs.js
index 158735567..32e8a1f39 100644
--- a/ui/src/album/AlbumSongs.js
+++ b/ui/src/album/AlbumSongs.js
@@ -68,31 +68,6 @@ const trackName = (r) => {
return name
}
-const SongDatagridRow = (props) => {
- const { record, children } = props
- return (
- <>
- {record.discSubtitle && record.trackNumber === 1 && (
-
-
-
- {record.discSubtitle} (disc {record.discNumber})
-
-
-
- )}
-
- >
- )
-}
-
-const SongsDatagridBody = (props) => (
- } />
-)
-const SongsDatagrid = (props) => (
- } />
-)
-
const AlbumSongs = (props) => {
const classes = useStyles(props)
const classesToolbar = useStylesListToolbar(props)
@@ -101,12 +76,49 @@ const AlbumSongs = (props) => {
const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
const controllerProps = useListController(props)
const { bulkActionButtons, albumId, expand, className } = props
- const { data, ids, version } = controllerProps
+ const { data, ids, version, loaded } = controllerProps
+
+ let multiDisc = false
+ if (loaded) {
+ const discSet = new Set()
+ ids.forEach((id) => discSet.add(data[id].discNumber))
+ multiDisc = discSet.size > 1
+ console.log(multiDisc, discSet.size)
+ }
const anySong = data[ids[0]]
const showPlaceholder = !anySong || anySong.albumId !== albumId
-
const hasBulkActions = props.bulkActionButtons !== false
+
+ const SongDatagridRow = (props) => {
+ const { record, children } = props
+ return (
+ <>
+ {multiDisc && (
+
+ {record.trackNumber === 1 && (
+
+
+ {record.discSubtitle
+ ? `${record.discSubtitle} (disc ${record.discNumber})`
+ : `Disc ${record.discNumber}`}
+
+
+ )}
+
+ )}
+
+ >
+ )
+ }
+
+ const SongsDatagridBody = (props) => (
+ } />
+ )
+ const SongsDatagrid = (props) => (
+ } />
+ )
+
return (
<>
{
rowClick={(id) => dispatch(playAlbum(data, ids, id))}
{...controllerProps}
hasBulkActions={hasBulkActions}
+ multiDisc={multiDisc}
>
{isDesktop && (