mirror of
https://github.com/antebudimir/feishin.git
synced 2026-01-06 20:51:39 +00:00
Add additional information to album: record label, release type, version (#1242)
* Add additional information to album * add mbz release types and normalization * update Pill styling --------- Co-authored-by: jeffvli <jeffvictorli@gmail.com>
This commit is contained in:
parent
3fe6ccf300
commit
e26ffaac53
12 changed files with 223 additions and 40 deletions
|
|
@ -1,5 +1,5 @@
|
|||
import { useQuery } from '@tanstack/react-query';
|
||||
import { forwardRef, Fragment, Ref, useCallback, useMemo } from 'react';
|
||||
import { forwardRef, Ref, useCallback, useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { generatePath, useParams } from 'react-router';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
|
@ -13,8 +13,10 @@ import { useSongChange } from '/@/renderer/hooks/use-song-change';
|
|||
import { queryClient } from '/@/renderer/lib/react-query';
|
||||
import { AppRoute } from '/@/renderer/router/routes';
|
||||
import { useCurrentServer } from '/@/renderer/store';
|
||||
import { formatDateAbsoluteUTC, formatDurationString } from '/@/renderer/utils';
|
||||
import { formatDateAbsoluteUTC, formatDurationString, titleCase } from '/@/renderer/utils';
|
||||
import { normalizeReleaseTypes } from '/@/renderer/utils/normalize-release-types';
|
||||
import { Group } from '/@/shared/components/group/group';
|
||||
import { Pill } from '/@/shared/components/pill/pill';
|
||||
import { Rating } from '/@/shared/components/rating/rating';
|
||||
import { Stack } from '/@/shared/components/stack/stack';
|
||||
import { Text } from '/@/shared/components/text/text';
|
||||
|
|
@ -38,7 +40,9 @@ export const AlbumDetailHeader = forwardRef(
|
|||
const cq = useContainerQuery();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const showRating = detailQuery?.data?.serverType === ServerType.NAVIDROME;
|
||||
const showRating =
|
||||
detailQuery?.data?.serverType === ServerType.NAVIDROME ||
|
||||
detailQuery?.data?.serverType === ServerType.SUBSONIC;
|
||||
|
||||
const originalDifferentFromRelease =
|
||||
detailQuery.data?.originalDate &&
|
||||
|
|
@ -78,7 +82,16 @@ export const AlbumDetailHeader = forwardRef(
|
|||
}
|
||||
}, detailQuery.data !== undefined);
|
||||
|
||||
const metadataItems = [
|
||||
const releaseTypes = useMemo(
|
||||
() =>
|
||||
normalizeReleaseTypes(detailQuery.data?.releaseTypes ?? [], t).map((type) => ({
|
||||
id: type,
|
||||
value: titleCase(type),
|
||||
})) || [],
|
||||
[detailQuery.data?.releaseTypes, t],
|
||||
);
|
||||
|
||||
const metadataItems = releaseTypes.concat([
|
||||
{
|
||||
id: 'releaseDate',
|
||||
value:
|
||||
|
|
@ -98,11 +111,17 @@ export const AlbumDetailHeader = forwardRef(
|
|||
},
|
||||
{
|
||||
id: 'playCount',
|
||||
value: t('entity.play', {
|
||||
count: detailQuery?.data?.playCount as number,
|
||||
}),
|
||||
value:
|
||||
typeof detailQuery?.data?.playCount === 'number' &&
|
||||
t('entity.play', {
|
||||
count: detailQuery?.data?.playCount,
|
||||
}),
|
||||
},
|
||||
];
|
||||
{
|
||||
id: 'version',
|
||||
value: detailQuery.data?.version,
|
||||
},
|
||||
]);
|
||||
|
||||
if (originalDifferentFromRelease) {
|
||||
const formatted = `♫ ${formatDateAbsoluteUTC(detailQuery!.data!.originalDate)}`;
|
||||
|
|
@ -135,28 +154,22 @@ export const AlbumDetailHeader = forwardRef(
|
|||
title={detailQuery?.data?.name || ''}
|
||||
{...background}
|
||||
>
|
||||
<Stack gap="sm">
|
||||
<Group gap="sm">
|
||||
{metadataItems.map((item, index) => (
|
||||
<Fragment key={`item-${item.id}-${index}`}>
|
||||
{index > 0 && <Text isNoSelect>•</Text>}
|
||||
<Text>{item.value}</Text>
|
||||
</Fragment>
|
||||
))}
|
||||
{showRating && (
|
||||
<>
|
||||
<Text isNoSelect>•</Text>
|
||||
<Rating
|
||||
onChange={handleUpdateRating}
|
||||
readOnly={
|
||||
detailQuery?.isFetching ||
|
||||
updateRatingMutation.isPending
|
||||
}
|
||||
value={detailQuery?.data?.userRating || 0}
|
||||
/>
|
||||
</>
|
||||
<Stack gap="lg">
|
||||
<Pill.Group>
|
||||
{metadataItems.map(
|
||||
(item, index) =>
|
||||
item.value && (
|
||||
<Pill key={`item-${item.id}-${index}`}>{item.value}</Pill>
|
||||
),
|
||||
)}
|
||||
</Group>
|
||||
</Pill.Group>
|
||||
{showRating && (
|
||||
<Rating
|
||||
onChange={handleUpdateRating}
|
||||
readOnly={detailQuery?.isFetching || updateRatingMutation.isPending}
|
||||
value={detailQuery?.data?.userRating || 0}
|
||||
/>
|
||||
)}
|
||||
<Group
|
||||
gap="md"
|
||||
mah="4rem"
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import { AppRoute } from '/@/renderer/router/routes';
|
|||
import { formatDurationString, formatSizeString } from '/@/renderer/utils';
|
||||
import { formatDateRelative, formatRating } from '/@/renderer/utils/format';
|
||||
import { replaceURLWithHTMLLinks } from '/@/renderer/utils/linkify';
|
||||
import { normalizeReleaseTypes } from '/@/renderer/utils/normalize-release-types';
|
||||
import { sanitize } from '/@/renderer/utils/sanitize';
|
||||
import { SEPARATOR_STRING } from '/@/shared/api/utils';
|
||||
import { Icon } from '/@/shared/components/icon/icon';
|
||||
|
|
@ -122,6 +123,10 @@ const BoolField = (key: boolean) =>
|
|||
const AlbumPropertyMapping: ItemDetailRow<Album>[] = [
|
||||
{ key: 'name', label: 'common.title' },
|
||||
{ label: 'entity.albumArtist_one', render: (item) => formatArtists(item.albumArtists) },
|
||||
{
|
||||
label: 'common.releaseType',
|
||||
render: (item, t) => normalizeReleaseTypes(item.releaseTypes, t).join(SEPARATOR_STRING),
|
||||
},
|
||||
{ label: 'entity.genre_other', render: FormatGenre },
|
||||
{
|
||||
label: 'common.duration',
|
||||
|
|
@ -174,6 +179,8 @@ const AlbumPropertyMapping: ItemDetailRow<Album>[] = [
|
|||
) : null,
|
||||
},
|
||||
{ key: 'id', label: 'filter.id' },
|
||||
{ key: 'version', label: 'common.version' },
|
||||
{ label: 'common.recordLabel', render: (item) => item.recordLabels.join(SEPARATOR_STRING) },
|
||||
];
|
||||
|
||||
const AlbumArtistPropertyMapping: ItemDetailRow<AlbumArtist>[] = [
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue