vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-06-19 18:04:22 +02:00
Code Issues Packages Projects Releases Wiki Activity

redesign album detail page

Browse Source
This commit is contained in:
jeffvli
2025-11-20 03:47:56 -08:00
parent da82581eb0
commit 7fb0dffc40
14 changed files with 662 additions and 301 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/albums/components/album-detail-header.tsx
+52 -167
View File
@@ -1,23 +1,20 @@
import { useQuery } from '@tanstack/react-query';
import { forwardRef, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { generatePath, Link, useParams } from 'react-router';
import { forwardRef } from 'react';
import { useParams } from 'react-router';
import { albumQueries } from '/@/renderer/features/albums/api/album-api';
import { ContextMenuController } from '/@/renderer/features/context-menu/context-menu-controller';
import { usePlayer } from '/@/renderer/features/player/context/player-context';
import { LibraryHeader } from '/@/renderer/features/shared/components/library-header';
import { useGenreRoute } from '/@/renderer/hooks/use-genre-route';
import {
LibraryHeader,
LibraryHeaderMenu,
} from '/@/renderer/features/shared/components/library-header';
import { AppRoute } from '/@/renderer/router/routes';
import { useCurrentServer } from '/@/renderer/store';
import { formatDateAbsoluteUTC, formatDurationString, titleCase } from '/@/renderer/utils';
import { normalizeReleaseTypes } from '/@/renderer/utils/normalize-release-types';
import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
import { Group } from '/@/shared/components/group/group';
import { Pill, PillLink } from '/@/shared/components/pill/pill';
import { Rating } from '/@/shared/components/rating/rating';
import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
import { Stack } from '/@/shared/components/stack/stack';
import { Text } from '/@/shared/components/text/text';
import { LibraryItem, ServerType } from '/@/shared/types/domain-types';
import { Play } from '/@/shared/types/types';
interface AlbumDetailHeaderProps {
background: {
@@ -34,75 +31,13 @@ export const AlbumDetailHeader = forwardRef<HTMLDivElement, AlbumDetailHeaderPro
const detailQuery = useQuery(
albumQueries.detail({ query: { id: albumId }, serverId: server?.id }),
);
const { t } = useTranslation();
const genreRoute = useGenreRoute();
const showRating =
detailQuery?.data?._serverType === ServerType.NAVIDROME ||
detailQuery?.data?._serverType === ServerType.SUBSONIC;
const showGenres = detailQuery?.data?.genres
? detailQuery?.data?.genres.length !== 0
: false;
const originalDifferentFromRelease =
detailQuery.data?.originalDate &&
detailQuery.data.originalDate !== detailQuery.data.releaseDate;
const releasePrefix = originalDifferentFromRelease
? t('page.albumDetail.released', { postProcess: 'sentenceCase' })
: '♫';
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:
detailQuery?.data?.releaseDate &&
`${releasePrefix} ${formatDateAbsoluteUTC(detailQuery?.data?.releaseDate)}`,
},
{
id: 'songCount',
value: t('entity.trackWithCount', {
count: detailQuery?.data?.songCount as number,
}),
},
{
id: 'duration',
value:
detailQuery?.data?.duration && formatDurationString(detailQuery.data.duration),
},
{
id: 'playCount',
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)}`;
metadataItems.splice(0, 0, {
id: 'originalDate',
value: formatted,
});
}
const { setFavorite, setRating } = usePlayer();
const { addToQueueByFetch, setFavorite, setRating } = usePlayer();
const playButtonBehavior = usePlayButtonBehavior();
const handleFavorite = () => {
if (!detailQuery?.data) return;
@@ -114,24 +49,39 @@ export const AlbumDetailHeader = forwardRef<HTMLDivElement, AlbumDetailHeaderPro
);
};
const handleUpdateRating = (rating: number) => {
const handleUpdateRating = showRating
? (rating: number) => {
if (!detailQuery?.data) return;
if (detailQuery.data.userRating === rating) {
return setRating(
detailQuery.data._serverId,
[detailQuery.data.id],
LibraryItem.ALBUM,
0,
);
}
return setRating(
detailQuery.data._serverId,
[detailQuery.data.id],
LibraryItem.ALBUM,
rating,
);
}
: undefined;
const handlePlay = (type?: Play) => {
if (!server?.id || !albumId) return;
addToQueueByFetch(server.id, [albumId], LibraryItem.ALBUM, type || playButtonBehavior);
};
const handleMoreOptions = (e: React.MouseEvent<HTMLButtonElement>) => {
if (!detailQuery?.data) return;
if (detailQuery.data.userRating === rating) {
return setRating(
detailQuery.data._serverId,
[detailQuery.data.id],
LibraryItem.ALBUM,
0,
);
}
return setRating(
detailQuery.data._serverId,
[detailQuery.data.id],
LibraryItem.ALBUM,
rating,
);
ContextMenuController.call({
cmd: { items: [detailQuery.data], type: LibraryItem.ALBUM },
event: e,
});
};
return (
@@ -142,80 +92,15 @@ export const AlbumDetailHeader = forwardRef<HTMLDivElement, AlbumDetailHeaderPro
title={detailQuery?.data?.name || ''}
{...background}
>
<Pill.Group>
{metadataItems.map(
(item, index) =>
item.value && (
<Pill key={`item-${item.id}-${index}`} size="md">
{item.value}
</Pill>
),
)}
</Pill.Group>
{showGenres && (
<Pill.Group>
{detailQuery?.data?.genres?.map((genre) => (
<PillLink
key={`genre-${genre.id}`}
size="md"
to={generatePath(genreRoute, {
genreId: genre.id,
})}
>
{genre.name}
</PillLink>
))}
</Pill.Group>
)}
<Group align="center" gap="xs">
<ActionIcon
icon="favorite"
iconProps={{
fill: detailQuery?.data?.userFavorite ? 'primary' : undefined,
size: 'md',
}}
onClick={handleFavorite}
size="xs"
variant="transparent"
/>
{showRating && (
<Rating
onChange={handleUpdateRating}
readOnly={detailQuery?.isFetching}
size="md"
styles={{
input: {
background: 'transparent',
},
}}
value={detailQuery?.data?.userRating || 0}
/>
)}
</Group>
<Group
gap="md"
mah="4rem"
style={{
overflow: 'hidden',
WebkitBoxOrient: 'vertical',
WebkitLineClamp: 2,
}}
>
{detailQuery?.data?.albumArtists.map((artist) => (
<Text
component={Link}
fw={600}
isLink
key={`artist-${artist.id}`}
to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
albumArtistId: artist.id,
})}
variant="subtle"
>
{artist.name}
</Text>
))}
</Group>
<LibraryHeaderMenu
favorite={detailQuery?.data?.userFavorite}
onFavorite={handleFavorite}
onMore={handleMoreOptions}
onPlay={() => handlePlay(Play.NOW)}
onRating={handleUpdateRating}
onShuffle={() => handlePlay(Play.SHUFFLE)}
rating={detailQuery?.data?.userRating || 0}
/>
</LibraryHeader>
</Stack>
);