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 && (