mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-09 20:29:36 +02:00
add links to genre / album artists columns
This commit is contained in:
jeffvli
+8
@@ -0,0 +1,8 @@
|
||||
.group {
|
||||
gap: var(--theme-spacing-sm) var(--theme-spacing-xs);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.group a {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
import { memo, useMemo } from 'react';
|
||||
import { generatePath, Link } from 'react-router-dom';
|
||||
|
||||
import styles from './album-artists-column.module.css';
|
||||
|
||||
import {
|
||||
ItemTableListInnerColumn,
|
||||
TableColumnContainer,
|
||||
TableColumnTextContainer,
|
||||
} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
|
||||
import { AppRoute } from '/@/renderer/router/routes';
|
||||
import { Group } from '/@/shared/components/group/group';
|
||||
import { Skeleton } from '/@/shared/components/skeleton/skeleton';
|
||||
import { Text } from '/@/shared/components/text/text';
|
||||
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(() => {
|
||||
if (!row) return [];
|
||||
return row.map((albumArtist) => {
|
||||
const path = generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
|
||||
albumArtistId: albumArtist.id,
|
||||
});
|
||||
return { ...albumArtist, path };
|
||||
});
|
||||
}, [row]);
|
||||
|
||||
if (Array.isArray(row)) {
|
||||
return (
|
||||
<TableColumnContainer {...props}>
|
||||
<Group className={styles.group} wrap="wrap">
|
||||
{albumArtists.map((albumArtist, index) => (
|
||||
<Text
|
||||
component={Link}
|
||||
isLink
|
||||
isMuted
|
||||
key={albumArtist.id}
|
||||
to={albumArtist.path}
|
||||
>
|
||||
{albumArtist.name}
|
||||
{index < albumArtists.length - 1 && ','}
|
||||
</Text>
|
||||
))}
|
||||
</Group>
|
||||
</TableColumnContainer>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<TableColumnTextContainer {...props}>
|
||||
<Skeleton />
|
||||
</TableColumnTextContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export const AlbumArtistsColumnMemo = memo(AlbumArtistsColumn);
|
||||
|
||||
export { AlbumArtistsColumnMemo as AlbumArtistsColumn };
|
||||
@@ -0,0 +1,8 @@
|
||||
.group {
|
||||
gap: var(--theme-spacing-sm) var(--theme-spacing-xs);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.group a {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -1,35 +1,47 @@
|
||||
import { memo, useMemo } from 'react';
|
||||
import { generatePath, Link } from 'react-router-dom';
|
||||
|
||||
import styles from './genre-column.module.css';
|
||||
|
||||
import {
|
||||
ItemTableListInnerColumn,
|
||||
TableColumnContainer,
|
||||
TableColumnTextContainer,
|
||||
} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
|
||||
import { AppRoute } from '/@/renderer/router/routes';
|
||||
import { Badge } from '/@/shared/components/badge/badge';
|
||||
import { Group } from '/@/shared/components/group/group';
|
||||
import { Skeleton } from '/@/shared/components/skeleton/skeleton';
|
||||
import { Genre } from '/@/shared/types/domain-types';
|
||||
import { stringToColor } from '/@/shared/utils/string-to-color';
|
||||
|
||||
export const GenreColumn = (props: ItemTableListInnerColumn) => {
|
||||
const GenreColumn = (props: ItemTableListInnerColumn) => {
|
||||
const row: Genre[] | undefined = (props.data as (Genre[] | undefined)[])[props.rowIndex]?.[
|
||||
props.columns[props.columnIndex].id
|
||||
];
|
||||
|
||||
const genres = (row || []).map((genre) => {
|
||||
const { color, isLight } = stringToColor(genre.name);
|
||||
return { ...genre, color, isLight };
|
||||
});
|
||||
const genres = useMemo(() => {
|
||||
if (!row) return [];
|
||||
return row.map((genre) => {
|
||||
const { color, isLight } = stringToColor(genre.name);
|
||||
const path = generatePath(AppRoute.LIBRARY_GENRES_ALBUMS, { genreId: genre.id });
|
||||
return { ...genre, color, isLight, path };
|
||||
});
|
||||
}, [row]);
|
||||
|
||||
if (Array.isArray(row)) {
|
||||
return (
|
||||
<TableColumnContainer {...props}>
|
||||
<Group gap="xs" wrap="nowrap">
|
||||
<Group className={styles.group} wrap="wrap">
|
||||
{genres.map((genre) => (
|
||||
<Badge
|
||||
component={Link}
|
||||
key={genre.id}
|
||||
style={{
|
||||
backgroundColor: genre.color,
|
||||
color: genre.isLight ? 'black' : 'white',
|
||||
}}
|
||||
to={genre.path}
|
||||
>
|
||||
{genre.name}
|
||||
</Badge>
|
||||
@@ -45,3 +57,7 @@ export const GenreColumn = (props: ItemTableListInnerColumn) => {
|
||||
</TableColumnTextContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export const GenreColumnMemo = memo(GenreColumn);
|
||||
|
||||
export { GenreColumnMemo as GenreColumn };
|
||||
|
||||
@@ -6,6 +6,7 @@ import styles from './item-table-list-column.module.css';
|
||||
|
||||
import i18n from '/@/i18n/i18n';
|
||||
import { ActionsColumn } from '/@/renderer/components/item-list/item-table-list/columns/actions-column';
|
||||
import { AlbumArtistsColumn } from '/@/renderer/components/item-list/item-table-list/columns/album-artists-column';
|
||||
import { CountColumn } from '/@/renderer/components/item-list/item-table-list/columns/count-column';
|
||||
import {
|
||||
DateColumn,
|
||||
@@ -47,6 +48,9 @@ export const ItemTableListColumn = (props: ItemTableListColumn) => {
|
||||
case TableColumn.SKIP:
|
||||
return <ActionsColumn {...props} type={type} />;
|
||||
|
||||
case TableColumn.ALBUM_ARTIST:
|
||||
return <AlbumArtistsColumn {...props} type={type} />;
|
||||
|
||||
case TableColumn.ALBUM_COUNT:
|
||||
case TableColumn.PLAY_COUNT:
|
||||
case TableColumn.SONG_COUNT:
|
||||
@@ -184,61 +188,61 @@ export const TableColumnHeaderContainer = (
|
||||
|
||||
const columnLabelMap: Record<TableColumn, ReactNode | string> = {
|
||||
[TableColumn.ACTIONS]: '',
|
||||
[TableColumn.ALBUM]: i18n.t('table.column.album', { postProcess: 'titleCase' }) as string,
|
||||
[TableColumn.ALBUM]: i18n.t('table.column.album', { postProcess: 'upperCase' }) as string,
|
||||
[TableColumn.ALBUM_ARTIST]: i18n.t('table.column.albumArtist', {
|
||||
postProcess: 'titleCase',
|
||||
postProcess: 'upperCase',
|
||||
}) as string,
|
||||
[TableColumn.ALBUM_COUNT]: i18n.t('table.column.albumCount', {
|
||||
postProcess: 'titleCase',
|
||||
postProcess: 'upperCase',
|
||||
}) as string,
|
||||
[TableColumn.ARTIST]: i18n.t('table.column.artist', { postProcess: 'titleCase' }) as string,
|
||||
[TableColumn.ARTIST]: i18n.t('table.column.artist', { postProcess: 'upperCase' }) as string,
|
||||
[TableColumn.BIOGRAPHY]: i18n.t('table.column.biography', {
|
||||
postProcess: 'titleCase',
|
||||
postProcess: 'upperCase',
|
||||
}) as string,
|
||||
[TableColumn.BIT_RATE]: i18n.t('table.column.bitrate', { postProcess: 'titleCase' }) as string,
|
||||
[TableColumn.BPM]: i18n.t('table.column.bpm', { postProcess: 'titleCase' }) as string,
|
||||
[TableColumn.CHANNELS]: i18n.t('table.column.channels', { postProcess: 'titleCase' }) as string,
|
||||
[TableColumn.CODEC]: i18n.t('table.column.codec', { postProcess: 'titleCase' }) as string,
|
||||
[TableColumn.COMMENT]: i18n.t('table.column.comment', { postProcess: 'titleCase' }) as string,
|
||||
[TableColumn.BIT_RATE]: i18n.t('table.column.bitrate', { postProcess: 'upperCase' }) as string,
|
||||
[TableColumn.BPM]: i18n.t('table.column.bpm', { postProcess: 'upperCase' }) as string,
|
||||
[TableColumn.CHANNELS]: i18n.t('table.column.channels', { postProcess: 'upperCase' }) as string,
|
||||
[TableColumn.CODEC]: i18n.t('table.column.codec', { postProcess: 'upperCase' }) as string,
|
||||
[TableColumn.COMMENT]: i18n.t('table.column.comment', { postProcess: 'upperCase' }) as string,
|
||||
[TableColumn.DATE_ADDED]: i18n.t('table.column.dateAdded', {
|
||||
postProcess: 'titleCase',
|
||||
postProcess: 'upperCase',
|
||||
}) as string,
|
||||
[TableColumn.DISC_NUMBER]: i18n.t('table.column.discNumber', {
|
||||
postProcess: 'titleCase',
|
||||
postProcess: 'upperCase',
|
||||
}) as string,
|
||||
[TableColumn.DURATION]: <Icon icon="duration" size="md" />,
|
||||
[TableColumn.GENRE]: i18n.t('table.column.genre', { postProcess: 'titleCase' }) as string,
|
||||
[TableColumn.GENRE]: i18n.t('table.column.genre', { postProcess: 'upperCase' }) as string,
|
||||
[TableColumn.ID]: 'ID',
|
||||
[TableColumn.IMAGE]: '',
|
||||
[TableColumn.LAST_PLAYED]: i18n.t('table.column.lastPlayed', {
|
||||
postProcess: 'titleCase',
|
||||
postProcess: 'upperCase',
|
||||
}) as string,
|
||||
[TableColumn.OWNER]: i18n.t('table.column.owner', { postProcess: 'titleCase' }) as string,
|
||||
[TableColumn.PATH]: i18n.t('table.column.path', { postProcess: 'titleCase' }) as string,
|
||||
[TableColumn.OWNER]: i18n.t('table.column.owner', { postProcess: 'upperCase' }) as string,
|
||||
[TableColumn.PATH]: i18n.t('table.column.path', { postProcess: 'upperCase' }) as string,
|
||||
[TableColumn.PLAY_COUNT]: i18n.t('table.column.playCount', {
|
||||
postProcess: 'titleCase',
|
||||
postProcess: 'upperCase',
|
||||
}) as string,
|
||||
[TableColumn.RELEASE_DATE]: i18n.t('table.column.releaseDate', {
|
||||
postProcess: 'titleCase',
|
||||
postProcess: 'upperCase',
|
||||
}) as string,
|
||||
[TableColumn.ROW_INDEX]: '#',
|
||||
[TableColumn.SIZE]: i18n.t('table.column.size', { postProcess: 'titleCase' }) as string,
|
||||
[TableColumn.ROW_INDEX]: <Icon icon="hash" size="md" />,
|
||||
[TableColumn.SIZE]: i18n.t('table.column.size', { postProcess: 'upperCase' }) as string,
|
||||
[TableColumn.SKIP]: '',
|
||||
[TableColumn.SONG_COUNT]: i18n.t('table.column.songCount', {
|
||||
postProcess: 'titleCase',
|
||||
postProcess: 'upperCase',
|
||||
}) as string,
|
||||
[TableColumn.TITLE]: i18n.t('table.column.title', { postProcess: 'titleCase' }) as string,
|
||||
[TableColumn.TITLE]: i18n.t('table.column.title', { postProcess: 'upperCase' }) as string,
|
||||
[TableColumn.TITLE_COMBINED]: i18n.t('table.column.titleCombined', {
|
||||
postProcess: 'titleCase',
|
||||
postProcess: 'upperCase',
|
||||
}) as string,
|
||||
[TableColumn.TRACK_NUMBER]: i18n.t('table.column.trackNumber', {
|
||||
postProcess: 'titleCase',
|
||||
postProcess: 'upperCase',
|
||||
}) as string,
|
||||
[TableColumn.USER_FAVORITE]: i18n.t('table.column.favorite', {
|
||||
postProcess: 'titleCase',
|
||||
postProcess: 'upperCase',
|
||||
}) as string,
|
||||
[TableColumn.USER_RATING]: i18n.t('table.column.rating', {
|
||||
postProcess: 'titleCase',
|
||||
postProcess: 'upperCase',
|
||||
}) as string,
|
||||
[TableColumn.YEAR]: i18n.t('table.column.releaseYear', { postProcess: 'titleCase' }) as string,
|
||||
[TableColumn.YEAR]: i18n.t('table.column.releaseYear', { postProcess: 'upperCase' }) as string,
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user