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)}>
-
-
-
- )}
-
+ {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 && (
+
+
+
{translate(`resources.song.fields.path`)}:
@@ -183,13 +194,15 @@ export const SongInfo = (props) => {
{key}:
- {value.join(' • ')}
+
+ {value.join(' • ')}
+
))}
-
- )}
-
-
+
+
+
+ )}
)
}