use exact album artist names (#1459)

src/renderer/components/item-card/item-card.tsx

@@ -16,6 +16,7 @@ import {
     useItemSelectionState,
 } from '/@/renderer/components/item-list/helpers/item-list-state';
 import { ItemControls } from '/@/renderer/components/item-list/types';
+import { JoinedArtists } from '/@/renderer/features/albums/components/joined-artists';
 import { useDragDrop } from '/@/renderer/hooks/use-drag-drop';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useGeneralSettings } from '/@/renderer/store';
@@ -953,21 +954,14 @@ export const getDataRows = (): DataRow[] => {
         {
             format: (data) => {
                 if ('albumArtists' in data && Array.isArray(data.albumArtists)) {
-                    return (data as Album | Song).albumArtists.map((artist, index) => (
+                    return (
-                        <Fragment key={artist.id}>
+                        <JoinedArtists
-                            <Link
+                            artistName={data.albumArtistName}
-                                state={{ item: artist }}
+                            artists={data.albumArtists}
-                                to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
+                            linkProps={{ fw: 400, isMuted: true }}
-                                    albumArtistId: artist.id,
+                            rootTextProps={{ fw: 400, isMuted: true, size: 'sm' }}
-                                })}
+                        />
-                            >
+                    );
-                                {artist.name}
-                            </Link>
-                            {index < (data as Album | Song).albumArtists.length - 1 && (
-                                <Separator />
-                            )}
-                        </Fragment>
-                    ));
                 }
                 return '';
             },

src/renderer/components/item-list/item-table-list/columns/album-artists-column.tsx

@@ -1,6 +1,5 @@
 import clsx from 'clsx';
-import { Fragment, memo, useMemo } from 'react';
+import { memo } from 'react';
-import { generatePath, Link } from 'react-router';
 
 import styles from './album-artists-column.module.css';
 
@@ -10,24 +9,16 @@ import {
     ItemTableListInnerColumn,
     TableColumnContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
-import { AppRoute } from '/@/renderer/router/routes';
+import { JoinedArtists } from '/@/renderer/features/albums/components/joined-artists';
-import { Text } from '/@/shared/components/text/text';
+import { Album, RelatedAlbumArtist, Song } from '/@/shared/types/domain-types';
-import { RelatedAlbumArtist } from '/@/shared/types/domain-types';
 
 const AlbumArtistsColumn = (props: ItemTableListInnerColumn) => {
     const row: RelatedAlbumArtist[] | undefined = (
         props.data as (RelatedAlbumArtist[] | undefined)[]
     )[props.rowIndex]?.[props.columns[props.columnIndex].id];
 
-    const albumArtists = useMemo(() => {
+    const item = props.data[props.rowIndex] as Album | Song | undefined;
-        if (!row) return [];
+    const albumArtistString = item && 'albumArtistName' in item ? item.albumArtistName : '';
-        return row.map((albumArtist) => {
-            const path = generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
-                albumArtistId: albumArtist.id,
-            });
-            return { ...albumArtist, path };
-        });
-    }, [row]);
 
     if (Array.isArray(row)) {
         return (
@@ -38,21 +29,20 @@ const AlbumArtistsColumn = (props: ItemTableListInnerColumn) => {
                         [styles.large]: props.size === 'large',
                     })}
                 >
-                    {albumArtists.map((albumArtist, index) => (
+                    <JoinedArtists
-                        <Fragment key={albumArtist.id}>
+                        artistName={albumArtistString}
-                            <Text
+                        artists={row}
-                                component={Link}
+                        linkProps={{ fw: 400, isMuted: true }}
-                                isLink
+                        rootTextProps={{
-                                isMuted
+                            className: clsx(styles.artistsContainer, {
-                                isNoSelect
+                                [styles.compact]: props.size === 'compact',
-                                state={{ item: albumArtist }}
+                                [styles.large]: props.size === 'large',
-                                to={albumArtist.path}
+                            }),
-                            >
+                            fw: 400,
-                                {albumArtist.name}
+                            isMuted: true,
-                            </Text>
+                            size: 'sm',
-                            {index < albumArtists.length - 1 && ', '}
+                        }}
-                        </Fragment>
+                    />
-                    ))}
                 </div>
             </TableColumnContainer>
         );

src/renderer/components/item-list/item-table-list/columns/artists-column.tsx

@@ -10,11 +10,12 @@ import {
     ItemTableListInnerColumn,
     TableColumnContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { JoinedArtists } from '/@/renderer/features/albums/components/joined-artists';
 import { AppRoute } from '/@/renderer/router/routes';
 import { Text } from '/@/shared/components/text/text';
-import { RelatedAlbumArtist } from '/@/shared/types/domain-types';
+import { LibraryItem, RelatedAlbumArtist, Song } from '/@/shared/types/domain-types';
 
-const ArtistsColumn = (props: ItemTableListInnerColumn) => {
+const AlbumArtistsColumn = (props: ItemTableListInnerColumn) => {
     const row: RelatedAlbumArtist[] | undefined = (
         props.data as (RelatedAlbumArtist[] | undefined)[]
     )[props.rowIndex]?.[props.columns[props.columnIndex].id];
@@ -65,6 +66,47 @@ const ArtistsColumn = (props: ItemTableListInnerColumn) => {
     return <ColumnSkeletonVariable {...props} />;
 };
 
-export const ArtistsColumnMemo = memo(ArtistsColumn);
+const SongArtistsColumn = (props: ItemTableListInnerColumn) => {
+    const row: Song | undefined = (props.data as (Song | undefined)[])[props.rowIndex];
+
+    if (row) {
+        return (
+            <TableColumnContainer {...props}>
+                <div
+                    className={clsx(styles.artistsContainer, {
+                        [styles.compact]: props.size === 'compact',
+                        [styles.large]: props.size === 'large',
+                    })}
+                >
+                    <JoinedArtists
+                        artistName={row.artistName}
+                        artists={row.artists}
+                        linkProps={{ fw: 400, isMuted: true }}
+                        rootTextProps={{ fw: 400, isMuted: true, size: 'sm' }}
+                    />
+                </div>
+            </TableColumnContainer>
+        );
+    }
+
+    if (row === null) {
+        return <ColumnNullFallback {...props} />;
+    }
+
+    return <ColumnSkeletonVariable {...props} />;
+};
+
+const BaseArtistsColumn = (props: ItemTableListInnerColumn) => {
+    const { itemType } = props;
+
+    switch (itemType) {
+        case LibraryItem.ALBUM:
+            return <AlbumArtistsColumn {...props} />;
+        default:
+            return <SongArtistsColumn {...props} />;
+    }
+};
+
+const ArtistsColumnMemo = memo(BaseArtistsColumn);
 
 export { ArtistsColumnMemo as ArtistsColumn };

src/renderer/components/item-list/item-table-list/columns/title-combined-column.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
-import { CSSProperties, useMemo, useState } from 'react';
+import { CSSProperties, useState } from 'react';
-import { generatePath, Link } from 'react-router';
+import { Link } from 'react-router';
 
 import styles from './title-combined-column.module.css';
 
@@ -12,16 +12,16 @@ import {
     ItemTableListInnerColumn,
     TableColumnContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { JoinedArtists } from '/@/renderer/features/albums/components/joined-artists';
 import { PlayButton } from '/@/renderer/features/shared/components/play-button';
 import {
     LONG_PRESS_PLAY_BEHAVIOR,
     PlayTooltip,
 } from '/@/renderer/features/shared/components/play-button-group';
-import { AppRoute } from '/@/renderer/router/routes';
 import { usePlayButtonBehavior } from '/@/renderer/store';
 import { Icon } from '/@/shared/components/icon/icon';
 import { Text } from '/@/shared/components/text/text';
-import { Folder, LibraryItem, QueueSong, RelatedAlbumArtist } from '/@/shared/types/domain-types';
+import { Folder, LibraryItem, QueueSong } from '/@/shared/types/domain-types';
 import { Play } from '/@/shared/types/types';
 
 export const DefaultTitleCombinedColumn = (props: ItemTableListInnerColumn) => {
@@ -73,18 +73,6 @@ export const DefaultTitleCombinedColumn = (props: ItemTableListInnerColumn) => {
         });
     };
 
-    const artists = useMemo(() => {
-        if (row && 'artists' in item && Array.isArray(item.artists)) {
-            return (item.artists as RelatedAlbumArtist[]).map((artist) => {
-                const path = generatePath(AppRoute.LIBRARY_ARTISTS_DETAIL, {
-                    artistId: artist.id,
-                });
-                return { ...artist, path };
-            });
-        }
-        return [];
-    }, [item, row]);
-
     if (item && 'name' in item && 'imageUrl' in item && 'artists' in item) {
         const rowHeight = props.getRowHeight(props.rowIndex, props);
         const path = getTitlePath(props.itemType, (props.data[props.rowIndex] as any).id as string);
@@ -146,22 +134,12 @@ export const DefaultTitleCombinedColumn = (props: ItemTableListInnerColumn) => {
                         {item.name as string}
                     </Text>
                     <div className={styles.artists}>
-                        {artists.map((artist, index) => (
+                        <JoinedArtists
-                            <span key={artist.id}>
+                            artistName={item.albumArtist}
-                                <Text
+                            artists={item.albumArtists}
-                                    component={Link}
+                            linkProps={{ fw: 400, isMuted: true }}
-                                    isLink
+                            rootTextProps={{ fw: 400, isMuted: true, size: 'sm' }}
-                                    isMuted
+                        />
-                                    isNoSelect
-                                    size="sm"
-                                    state={{ item: artist }}
-                                    to={artist.path}
-                                >
-                                    {artist.name}
-                                </Text>
-                                {index < artists.length - 1 && ', '}
-                            </span>
-                        ))}
                     </div>
                 </div>
             </TableColumnContainer>
@@ -229,18 +207,6 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) =>
         });
     };
 
-    const artists = useMemo(() => {
-        if (row && 'artists' in row && Array.isArray(row.artists)) {
-            return (row.artists as RelatedAlbumArtist[]).map((artist) => {
-                const path = generatePath(AppRoute.LIBRARY_ARTISTS_DETAIL, {
-                    artistId: artist.id,
-                });
-                return { ...artist, path };
-            });
-        }
-        return [];
-    }, [row]);
-
     if (row && 'name' in row && 'imageUrl' in row && 'artists' in row) {
         const rowHeight = props.getRowHeight(props.rowIndex, props);
         const path = getTitlePath(props.itemType, (props.data[props.rowIndex] as any).id as string);
@@ -310,22 +276,12 @@ export const QueueSongTitleCombinedColumn = (props: ItemTableListInnerColumn) =>
                         {row.name as string}
                     </Text>
                     <div className={styles.artists}>
-                        {artists.map((artist, index) => (
+                        <JoinedArtists
-                            <span key={artist.id}>
+                            artistName={item.artistName}
-                                <Text
+                            artists={item.artists}
-                                    component={Link}
+                            linkProps={{ fw: 400, isMuted: true }}
-                                    isLink
+                            rootTextProps={{ fw: 400, isMuted: true, size: 'sm' }}
-                                    isMuted
+                        />
-                                    isNoSelect
-                                    size="sm"
-                                    state={{ item: artist }}
-                                    to={artist.path}
-                                >
-                                    {artist.name}
-                                </Text>
-                                {index < artists.length - 1 && ', '}
-                            </span>
-                        ))}
                     </div>
                 </div>
             </TableColumnContainer>

src/renderer/features/albums/components/album-detail-content.tsx

@@ -377,7 +377,7 @@ export const AlbumDetailContent = () => {
                         <AlbumMetadataGenres genres={detailQuery?.data?.genres} />
                         <AlbumMetadataTags album={detailQuery?.data} />
                         <AlbumMetadataExternalLinks
-                            albumArtist={detailQuery?.data?.albumArtist}
+                            albumArtist={detailQuery?.data?.albumArtistName}
                             albumName={detailQuery?.data?.name}
                             externalLinks={externalLinks}
                             lastFM={lastFM}

src/renderer/features/albums/components/album-detail-header.tsx

@@ -7,7 +7,7 @@ import styles from './album-detail-header.module.css';
 
 import { useItemImageUrl } from '/@/renderer/components/item-image/item-image';
 import { albumQueries } from '/@/renderer/features/albums/api/album-api';
-import { JoinedAlbumArtist } from '/@/renderer/features/albums/components/joined-album-artist';
+import { JoinedArtists } from '/@/renderer/features/albums/components/joined-artists';
 import { ContextMenuController } from '/@/renderer/features/context-menu/context-menu-controller';
 import { usePlayer } from '/@/renderer/features/player/context/player-context';
 import {
@@ -214,9 +214,9 @@ export const AlbumDetailHeader = forwardRef<HTMLDivElement>((_props, ref) => {
                         ))}
                     </Group>
                     <Group className={styles.metadataGroup}>
-                        <JoinedAlbumArtist
+                        <JoinedArtists
-                            albumArtist={detailQuery?.data?.albumArtist || ''}
+                            artistName={detailQuery?.data?.albumArtistName || ''}
-                            albumArtists={detailQuery?.data?.albumArtists || []}
+                            artists={detailQuery?.data?.albumArtists || []}
                         />
                     </Group>
                     <LibraryHeaderMenu

src/renderer/features/albums/components/joined-artists.tsx

@@ -2,33 +2,43 @@ import { Fragment } from 'react';
 import { generatePath, Link } from 'react-router';
 
 import { AppRoute } from '/@/renderer/router/routes';
-import { Group } from '/@/shared/components/group/group';
+import { Text, TextProps } from '/@/shared/components/text/text';
-import { Separator } from '/@/shared/components/separator/separator';
+import { AlbumArtist, RelatedAlbumArtist, RelatedArtist } from '/@/shared/types/domain-types';
-import { Text } from '/@/shared/components/text/text';
-import { AlbumArtist, RelatedArtist } from '/@/shared/types/domain-types';
 
-interface JoinedAlbumArtistProps {
+interface JoinedArtistsProps {
-    albumArtist: string;
+    artistName: string;
-    albumArtists: AlbumArtist[] | RelatedArtist[];
+    artists: AlbumArtist[] | RelatedAlbumArtist[] | RelatedArtist[];
+    linkProps?: Partial<Omit<TextProps, 'children' | 'component' | 'to'>>;
+    rootTextProps?: Partial<Omit<TextProps, 'children' | 'component'>>;
 }
 
-export const JoinedAlbumArtist = ({ albumArtist, albumArtists }: JoinedAlbumArtistProps) => {
+export const JoinedArtists = ({
+    artistName,
+    artists,
+    linkProps,
+    rootTextProps,
+}: JoinedArtistsProps) => {
     const parts: (
         | string
-        | { artist: AlbumArtist | RelatedArtist; end: number; start: number; text: string }
+        | {
+              artist: AlbumArtist | RelatedAlbumArtist | RelatedArtist;
+              end: number;
+              start: number;
+              text: string;
+          }
     )[] = [];
     const matches: Array<{
-        artist: AlbumArtist | RelatedArtist;
+        artist: AlbumArtist | RelatedAlbumArtist | RelatedArtist;
         end: number;
         name: string;
         start: number;
     }> = [];
 
-    for (const artist of albumArtists) {
+    for (const artist of artists) {
         const name = artist.name;
         const regex = new RegExp(escapeRegex(name), 'gi');
         let match: null | RegExpExecArray = null;
-        while ((match = regex.exec(albumArtist)) !== null) {
+        while ((match = regex.exec(artistName)) !== null) {
             matches.push({
                 artist,
                 end: match.index + match[0].length,
@@ -63,7 +73,7 @@ export const JoinedAlbumArtist = ({ albumArtist, albumArtists }: JoinedAlbumArti
     let lastIndex = 0;
     for (const match of nonOverlappingMatches) {
         if (match.start > lastIndex) {
-            parts.push(albumArtist.substring(lastIndex, match.start));
+            parts.push(artistName.substring(lastIndex, match.start));
         }
 
         parts.push({
@@ -76,19 +86,19 @@ export const JoinedAlbumArtist = ({ albumArtist, albumArtists }: JoinedAlbumArti
         lastIndex = match.end;
     }
 
-    if (lastIndex < albumArtist.length) {
+    if (lastIndex < artistName?.length) {
-        parts.push(albumArtist.substring(lastIndex));
+        parts.push(artistName.substring(lastIndex));
     }
 
     const hasArtistMatches = parts.some((part) => typeof part !== 'string');
 
     // If no matches found and there are album artists, return the album artists
-    if (!hasArtistMatches && albumArtists.length > 0) {
+    if (!hasArtistMatches && artists.length > 0) {
         return (
-            <Group gap="xs">
+            <Text component="span" {...rootTextProps}>
-                {albumArtists.map((artist, index) => (
+                {artists.map((artist, index) => (
                     <Fragment key={artist.id}>
-                        {index > 0 && <Separator />}
+                        {index > 0 && ', '}
                         <Text
                             component={Link}
                             fw={600}
@@ -96,26 +106,27 @@ export const JoinedAlbumArtist = ({ albumArtist, albumArtists }: JoinedAlbumArti
                             to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
                                 albumArtistId: artist.id,
                             })}
+                            {...linkProps}
                         >
                             {artist.name}
                         </Text>
                     </Fragment>
                 ))}
-            </Group>
+            </Text>
         );
     }
 
     // If no matches found and no albumArtists, return the original string
     if (!hasArtistMatches) {
         return (
-            <Text fw={400} isNoSelect>
+            <Text fw={400} isNoSelect {...rootTextProps}>
-                {albumArtist}
+                {artistName}
             </Text>
         );
     }
 
     return (
-        <Text component="span" fw={400}>
+        <Text component="span" fw={400} {...rootTextProps}>
             {parts.map((part, index) => {
                 if (typeof part === 'string') {
                     return <Fragment key={index}>{part}</Fragment>;
@@ -131,6 +142,7 @@ export const JoinedAlbumArtist = ({ albumArtist, albumArtists }: JoinedAlbumArti
                         to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
                             albumArtistId: artist.id,
                         })}
+                        {...linkProps}
                     >
                         {text}
                     </Text>

src/shared/api/jellyfin/jellyfin-normalize.ts

@@ -145,6 +145,7 @@ const normalizeSong = (
         _serverId: server?.id || '',
         _serverType: ServerType.JELLYFIN,
         album: item.Album,
+        albumArtistName: item.AlbumArtist || '',
         albumArtists: item.AlbumArtists?.map((entry) => ({
             id: entry.Id,
             imageId: entry.Id,
@@ -154,7 +155,7 @@ const normalizeSong = (
             userRating: null,
         })),
         albumId: item.AlbumId || `dummy/${item.Id}`,
-        artistName: item?.ArtistItems?.[0]?.Name || item?.AlbumArtists?.[0]?.Name,
+        artistName: item?.ArtistItems?.map((entry) => entry.Name).join(', ') || '',
         artists: (item?.ArtistItems?.length ? item.ArtistItems : item.AlbumArtists)?.map(
             (entry) => ({
                 id: entry.Id,
@@ -231,7 +232,7 @@ const normalizeAlbum = (
         _itemType: LibraryItem.ALBUM,
         _serverId: server?.id || '',
         _serverType: ServerType.JELLYFIN,
-        albumArtist: item.AlbumArtist,
+        albumArtistName: item.AlbumArtist || '',
         albumArtists:
             item.AlbumArtists.map((entry) => ({
                 id: entry.Id,

src/shared/api/navidrome/navidrome-normalize.ts

@@ -158,6 +158,7 @@ const normalizeSong = (
         _itemType: LibraryItem.SONG,
         _serverId: server?.id || 'unknown',
         _serverType: ServerType.NAVIDROME,
+        albumArtistName: item.albumArtist,
         artistName: item.artist,
         bitDepth: item.bitDepth || null,
         bitRate: item.bitRate,
@@ -273,7 +274,7 @@ const normalizeAlbum = (
         _itemType: LibraryItem.ALBUM,
         _serverId: server?.id || 'unknown',
         _serverType: ServerType.NAVIDROME,
-        albumArtist: item.albumArtist,
+        albumArtistName: item.albumArtist,
         comment: item.comment || null,
         createdAt: item.createdAt,
         duration: item.duration !== undefined ? item.duration * 1000 : null,

src/shared/api/subsonic/subsonic-normalize.ts

@@ -123,6 +123,7 @@ const normalizeSong = (
         _serverId: server?.id || 'unknown',
         _serverType: ServerType.SUBSONIC,
         album: item.album || '',
+        albumArtistName: item.artist || '',
         albumArtists: getArtistList(item.albumArtists, item.artistId, item.artist),
         albumId: item.albumId?.toString() || '',
         artistName: item.artist || '',
@@ -247,7 +248,7 @@ const normalizeAlbum = (
         _itemType: LibraryItem.ALBUM,
         _serverId: server?.id || 'unknown',
         _serverType: ServerType.SUBSONIC,
-        albumArtist: item.artist,
+        albumArtistName: item.artist,
         albumArtists: getArtistList(item.artists, item.artistId, item.artist),
         artists: [],
         comment: null,

src/shared/types/domain-types.ts

@@ -171,7 +171,7 @@ export type Album = {
     _itemType: LibraryItem.ALBUM;
     _serverId: string;
     _serverType: ServerType;
-    albumArtist: string;
+    albumArtistName: string;
     albumArtists: RelatedArtist[];
     artists: RelatedArtist[];
     comment: null | string;
@@ -366,6 +366,7 @@ export type Song = {
     _serverId: string;
     _serverType: ServerType;
     album: null | string;
+    albumArtistName: string;
     albumArtists: RelatedArtist[];
     albumId: string;
     artistName: string;