use exact album artist names (#1459)

This commit is contained in:
jeffvli
2025-12-30 03:39:53 -08:00
parent aa75aaaffb
commit 6aa3905922
11 changed files with 138 additions and 140 deletions
@@ -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) => (
<Fragment key={artist.id}>
<Link
state={{ item: artist }}
to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
albumArtistId: artist.id,
})}
>
{artist.name}
</Link>
{index < (data as Album | Song).albumArtists.length - 1 && (
<Separator />
)}
</Fragment>
));
return (
<JoinedArtists
artistName={data.albumArtistName}
artists={data.albumArtists}
linkProps={{ fw: 400, isMuted: true }}
rootTextProps={{ fw: 400, isMuted: true, size: 'sm' }}
/>
);
}
return '';
},
@@ -1,6 +1,5 @@
import clsx from 'clsx';
import { Fragment, memo, useMemo } from 'react';
import { generatePath, Link } from 'react-router';
import { memo } from 'react';
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 { Text } from '/@/shared/components/text/text';
import { RelatedAlbumArtist } from '/@/shared/types/domain-types';
import { JoinedArtists } from '/@/renderer/features/albums/components/joined-artists';
import { Album, RelatedAlbumArtist, Song } 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(() => {
if (!row) return [];
return row.map((albumArtist) => {
const path = generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
albumArtistId: albumArtist.id,
});
return { ...albumArtist, path };
});
}, [row]);
const item = props.data[props.rowIndex] as Album | Song | undefined;
const albumArtistString = item && 'albumArtistName' in item ? item.albumArtistName : '';
if (Array.isArray(row)) {
return (
@@ -38,21 +29,20 @@ const AlbumArtistsColumn = (props: ItemTableListInnerColumn) => {
[styles.large]: props.size === 'large',
})}
>
{albumArtists.map((albumArtist, index) => (
<Fragment key={albumArtist.id}>
<Text
component={Link}
isLink
isMuted
isNoSelect
state={{ item: albumArtist }}
to={albumArtist.path}
>
{albumArtist.name}
</Text>
{index < albumArtists.length - 1 && ', '}
</Fragment>
))}
<JoinedArtists
artistName={albumArtistString}
artists={row}
linkProps={{ fw: 400, isMuted: true }}
rootTextProps={{
className: clsx(styles.artistsContainer, {
[styles.compact]: props.size === 'compact',
[styles.large]: props.size === 'large',
}),
fw: 400,
isMuted: true,
size: 'sm',
}}
/>
</div>
</TableColumnContainer>
);
@@ -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 };
@@ -1,6 +1,6 @@
import clsx from 'clsx';
import { CSSProperties, useMemo, useState } from 'react';
import { generatePath, Link } from 'react-router';
import { CSSProperties, useState } from 'react';
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) => (
<span key={artist.id}>
<Text
component={Link}
isLink
isMuted
isNoSelect
size="sm"
state={{ item: artist }}
to={artist.path}
>
{artist.name}
</Text>
{index < artists.length - 1 && ', '}
</span>
))}
<JoinedArtists
artistName={item.albumArtist}
artists={item.albumArtists}
linkProps={{ fw: 400, isMuted: true }}
rootTextProps={{ fw: 400, isMuted: true, size: 'sm' }}
/>
</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) => (
<span key={artist.id}>
<Text
component={Link}
isLink
isMuted
isNoSelect
size="sm"
state={{ item: artist }}
to={artist.path}
>
{artist.name}
</Text>
{index < artists.length - 1 && ', '}
</span>
))}
<JoinedArtists
artistName={item.artistName}
artists={item.artists}
linkProps={{ fw: 400, isMuted: true }}
rootTextProps={{ fw: 400, isMuted: true, size: 'sm' }}
/>
</div>
</div>
</TableColumnContainer>
@@ -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}
@@ -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
albumArtist={detailQuery?.data?.albumArtist || ''}
albumArtists={detailQuery?.data?.albumArtists || []}
<JoinedArtists
artistName={detailQuery?.data?.albumArtistName || ''}
artists={detailQuery?.data?.albumArtists || []}
/>
</Group>
<LibraryHeaderMenu
@@ -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 { Separator } from '/@/shared/components/separator/separator';
import { Text } from '/@/shared/components/text/text';
import { AlbumArtist, RelatedArtist } from '/@/shared/types/domain-types';
import { Text, TextProps } from '/@/shared/components/text/text';
import { AlbumArtist, RelatedAlbumArtist, RelatedArtist } from '/@/shared/types/domain-types';
interface JoinedAlbumArtistProps {
albumArtist: string;
albumArtists: AlbumArtist[] | RelatedArtist[];
interface JoinedArtistsProps {
artistName: string;
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) {
parts.push(albumArtist.substring(lastIndex));
if (lastIndex < artistName?.length) {
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">
{albumArtists.map((artist, index) => (
<Text component="span" {...rootTextProps}>
{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>
{albumArtist}
<Text fw={400} isNoSelect {...rootTextProps}>
{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>
@@ -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,
@@ -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,
@@ -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,
+2 -1
View File
@@ -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;