mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-10 04:30:25 +02:00
use exact album artist names (#1459)
This commit is contained in:
+19
-29
@@ -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 };
|
||||
|
||||
+16
-60
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user