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:
Kendall Garner 2025-11-03 08:34:42 +00:00 committed by GitHub
parent 3fe6ccf300
commit e26ffaac53
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 223 additions and 40 deletions

View file

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

View file

@ -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>[] = [