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
@@ -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>