9f2e873366
* Remove 1920px max width * Fix position of list controls menu * Match size and color of search input * Adjust library header sizing * Move app menu to sidebar * Increase row buffer on play queue list * Fix query builder styles * Fix playerbar slider track bg * Adjust titlebar styles * Fix invalid modal prop * Various adjustments to detail pages * Fix sidebar height calculation * Fix list null indicators, add filter indicator * Adjust playqueue styles * Fix jellyfin releaseYear normalization * Suppress browser context menu on ag-grid * Add radius to drawer queue -- normalize layout * Add modal styles to provider theme * Fix playlist song list pagination * Add disc number to albums with more than one disc * Fix query builder boolean values * Adjust input placeholder color * Properly handle rating/favorite from context menu on table * Conform dropdown menu styles to context menu * Increase sort type select width * Fix drawer queue radius * Change primary color * Prevent volume wheel from invalid values * Add icons to query builder dropdowns * Update notification styles * Update scrollbar thumb styles * Remove "add to playlist" on smart playlists * Fix "add to playlist" from context menu
76 lines
2.4 KiB
TypeScript
76 lines
2.4 KiB
TypeScript
import { forwardRef, Fragment, Ref } from 'react';
|
|
import { Group, Stack } from '@mantine/core';
|
|
import { useParams } from 'react-router';
|
|
import { Badge, Text } from '/@/renderer/components';
|
|
import { usePlaylistDetail } from '/@/renderer/features/playlists/queries/playlist-detail-query';
|
|
import { LibraryHeader } from '/@/renderer/features/shared';
|
|
import { AppRoute } from '/@/renderer/router/routes';
|
|
import { formatDurationString } from '/@/renderer/utils';
|
|
import { LibraryItem } from '/@/renderer/api/types';
|
|
|
|
interface PlaylistDetailHeaderProps {
|
|
background: string;
|
|
imagePlaceholderUrl?: string | null;
|
|
imageUrl?: string | null;
|
|
}
|
|
|
|
export const PlaylistDetailHeader = forwardRef(
|
|
(
|
|
{ background, imageUrl, imagePlaceholderUrl }: PlaylistDetailHeaderProps,
|
|
ref: Ref<HTMLDivElement>,
|
|
) => {
|
|
const { playlistId } = useParams() as { playlistId: string };
|
|
const detailQuery = usePlaylistDetail({ id: playlistId });
|
|
|
|
const metadataItems = [
|
|
{
|
|
id: 'songCount',
|
|
secondary: false,
|
|
value: `${detailQuery?.data?.songCount || 0} songs`,
|
|
},
|
|
{
|
|
id: 'duration',
|
|
secondary: true,
|
|
value: detailQuery?.data?.duration && formatDurationString(detailQuery.data.duration),
|
|
},
|
|
];
|
|
|
|
const isSmartPlaylist = detailQuery?.data?.rules;
|
|
|
|
return (
|
|
<Stack>
|
|
<LibraryHeader
|
|
ref={ref}
|
|
background={background}
|
|
imagePlaceholderUrl={imagePlaceholderUrl}
|
|
imageUrl={imageUrl}
|
|
item={{ route: AppRoute.PLAYLISTS, type: LibraryItem.PLAYLIST }}
|
|
title={detailQuery?.data?.name || ''}
|
|
>
|
|
<Stack>
|
|
<Group spacing="sm">
|
|
{metadataItems.map((item, index) => (
|
|
<Fragment key={`item-${item.id}-${index}`}>
|
|
{index > 0 && <Text $noSelect>•</Text>}
|
|
<Text $secondary={item.secondary}>{item.value}</Text>
|
|
</Fragment>
|
|
))}
|
|
{isSmartPlaylist && (
|
|
<>
|
|
<Text $noSelect>•</Text>
|
|
<Badge
|
|
radius="sm"
|
|
size="md"
|
|
>
|
|
Smart Playlist
|
|
</Badge>
|
|
</>
|
|
)}
|
|
</Group>
|
|
<Text lineClamp={3}>{detailQuery?.data?.description}</Text>
|
|
</Stack>
|
|
</LibraryHeader>
|
|
</Stack>
|
|
);
|
|
},
|
|
);
|