diff --git a/ui/src/album/AlbumInfo.jsx b/ui/src/album/AlbumInfo.jsx index 98495d97a..6ddfda96f 100644 --- a/ui/src/album/AlbumInfo.jsx +++ b/ui/src/album/AlbumInfo.jsx @@ -26,6 +26,9 @@ const useStyles = makeStyles({ tableCell: { width: '17.5%', }, + value: { + whiteSpace: 'pre-line', + }, }) const AlbumInfo = (props) => { @@ -113,7 +116,9 @@ const AlbumInfo = (props) => { })} : - {data[key]} + + {data[key]} + ) })} diff --git a/ui/src/common/ArtistLinkField.jsx b/ui/src/common/ArtistLinkField.jsx index caad009d3..56a01030d 100644 --- a/ui/src/common/ArtistLinkField.jsx +++ b/ui/src/common/ArtistLinkField.jsx @@ -22,7 +22,8 @@ const ALink = withWidth()((props) => { }} {...rest} > - {artist.name} + {artist.name}{' '} + {artist.subroles?.length > 0 ? `(${artist.subroles.join(', ')})` : ''} ) }) @@ -89,19 +90,29 @@ export const ArtistLinkField = ({ record, className, limit, source }) => { } // Dedupe artists, only shows the first 3 - const seen = new Set() + const seen = new Map() const dedupedArtists = [] let limitedShow = false for (const artist of artists ?? []) { if (!seen.has(artist.id)) { - seen.add(artist.id) - if (dedupedArtists.length < limit) { - dedupedArtists.push(artist) + seen.set(artist.id, dedupedArtists.length) + dedupedArtists.push({ + ...artist, + subroles: artist.subRole ? [artist.subRole] : [], + }) } else { limitedShow = true - break + } + } else { + const position = seen.get(artist.id) + + if (position !== -1) { + const existing = dedupedArtists[position] + if (artist.subRole && !existing.subroles.includes(artist.subRole)) { + existing.subroles.push(artist.subRole) + } } } } diff --git a/ui/src/common/SongInfo.jsx b/ui/src/common/SongInfo.jsx index fd75a728d..bce0e750f 100644 --- a/ui/src/common/SongInfo.jsx +++ b/ui/src/common/SongInfo.jsx @@ -36,6 +36,9 @@ const useStyles = makeStyles({ tableCell: { width: '17.5%', }, + value: { + whiteSpace: 'pre-line', + }, }) export const SongInfo = (props) => { @@ -111,27 +114,27 @@ export const SongInfo = (props) => { return ( - - - {record.rawTags && ( - setTab(value)}> - - - - )} -
+ {Object.keys(data).map((key) => { return ( @@ -141,7 +144,9 @@ export const SongInfo = (props) => { })} : - {data[key]} + + {data[key]} + ) })} @@ -152,7 +157,7 @@ export const SongInfo = (props) => { scope="row" className={classes.tableCell} > - +

{translate(`resources.song.fields.tags`)}

@@ -162,16 +167,22 @@ export const SongInfo = (props) => { {name}: - {values.join(' • ')} + + {values.join(' • ')} + ))} - - {record.rawTags && ( -
+ + {record.rawTags && ( + + )}
) }