mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-07 20:40:15 +02:00
update album artist page
This commit is contained in:
jeffvli
@@ -1,12 +1,12 @@
|
||||
.content-container {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
container-type: inline-size;
|
||||
}
|
||||
|
||||
.detail-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--theme-spacing-lg);
|
||||
gap: var(--theme-spacing-2xl);
|
||||
padding: 1rem 2rem 5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
|
||||
import { Suspense, useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { createSearchParams, generatePath, Link, useParams } from 'react-router';
|
||||
@@ -25,15 +25,253 @@ import { Spinner } from '/@/shared/components/spinner/spinner';
|
||||
import { Spoiler } from '/@/shared/components/spoiler/spoiler';
|
||||
import { Stack } from '/@/shared/components/stack/stack';
|
||||
import { TextTitle } from '/@/shared/components/text-title/text-title';
|
||||
import { Text } from '/@/shared/components/text/text';
|
||||
import {
|
||||
AlbumArtist,
|
||||
AlbumListSort,
|
||||
LibraryItem,
|
||||
ServerType,
|
||||
SortOrder,
|
||||
TopSongListResponse,
|
||||
} from '/@/shared/types/domain-types';
|
||||
import { Play } from '/@/shared/types/types';
|
||||
|
||||
interface AlbumArtistActionButtonsProps {
|
||||
albumCount: null | number | undefined;
|
||||
artistDiscographyLink: string;
|
||||
artistSongsLink: string;
|
||||
onFavorite: () => void;
|
||||
onMoreOptions: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
||||
onPlay: () => void;
|
||||
userFavorite?: boolean;
|
||||
}
|
||||
|
||||
const AlbumArtistActionButtons = ({
|
||||
albumCount,
|
||||
artistDiscographyLink,
|
||||
artistSongsLink,
|
||||
onFavorite,
|
||||
onMoreOptions,
|
||||
onPlay,
|
||||
userFavorite,
|
||||
}: AlbumArtistActionButtonsProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Group gap="md">
|
||||
<DefaultPlayButton disabled={albumCount === 0} onClick={onPlay} />
|
||||
<Group gap="xs">
|
||||
<ActionIcon
|
||||
icon="favorite"
|
||||
iconProps={{
|
||||
fill: userFavorite ? 'primary' : undefined,
|
||||
}}
|
||||
onClick={onFavorite}
|
||||
size="lg"
|
||||
variant="transparent"
|
||||
/>
|
||||
<ActionIcon
|
||||
icon="ellipsisHorizontal"
|
||||
onClick={onMoreOptions}
|
||||
size="lg"
|
||||
variant="transparent"
|
||||
/>
|
||||
</Group>
|
||||
</Group>
|
||||
<Group gap="md">
|
||||
<Button
|
||||
component={Link}
|
||||
size="compact-md"
|
||||
to={artistDiscographyLink}
|
||||
variant="subtle"
|
||||
>
|
||||
{String(t('page.albumArtistDetail.viewDiscography')).toUpperCase()}
|
||||
</Button>
|
||||
<Button component={Link} size="compact-md" to={artistSongsLink} variant="subtle">
|
||||
{String(t('page.albumArtistDetail.viewAllTracks')).toUpperCase()}
|
||||
</Button>
|
||||
</Group>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
interface AlbumArtistMetadataGenresProps {
|
||||
genres?: Array<{ id: string; name: string }>;
|
||||
}
|
||||
|
||||
const AlbumArtistMetadataGenres = ({ genres }: AlbumArtistMetadataGenresProps) => {
|
||||
const { t } = useTranslation();
|
||||
const genrePath = useGenreRoute();
|
||||
|
||||
if (!genres || genres.length === 0) return null;
|
||||
|
||||
return (
|
||||
<Stack gap="xs">
|
||||
<Text fw={600} isNoSelect size="sm" tt="uppercase">
|
||||
{t('entity.genre', {
|
||||
count: genres.length,
|
||||
})}
|
||||
</Text>
|
||||
<Group gap="sm">
|
||||
{genres.map((genre) => (
|
||||
<Button
|
||||
component={Link}
|
||||
key={`genre-${genre.id}`}
|
||||
radius="md"
|
||||
size="compact-md"
|
||||
to={generatePath(genrePath, {
|
||||
albumArtistId: null,
|
||||
albumId: null,
|
||||
artistId: null,
|
||||
genreId: genre.id,
|
||||
itemType: null,
|
||||
playlistId: null,
|
||||
})}
|
||||
variant="outline"
|
||||
>
|
||||
{genre.name}
|
||||
</Button>
|
||||
))}
|
||||
</Group>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
interface AlbumArtistMetadataBiographyProps {
|
||||
artistName?: string;
|
||||
biography: null | string | undefined;
|
||||
}
|
||||
|
||||
const AlbumArtistMetadataBiography = ({
|
||||
artistName,
|
||||
biography,
|
||||
}: AlbumArtistMetadataBiographyProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
if (!biography) return null;
|
||||
|
||||
const sanitizedBiography = sanitize(biography);
|
||||
|
||||
return (
|
||||
<section style={{ maxWidth: '1280px' }}>
|
||||
<TextTitle fw={700} order={2}>
|
||||
{t('page.albumArtistDetail.about', {
|
||||
artist: artistName,
|
||||
})}
|
||||
</TextTitle>
|
||||
<Spoiler dangerouslySetInnerHTML={{ __html: sanitizedBiography }} />
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
interface AlbumArtistMetadataTopSongsProps {
|
||||
routeId: string;
|
||||
topSongsQuery: ReturnType<typeof useQuery<TopSongListResponse>>;
|
||||
}
|
||||
|
||||
const AlbumArtistMetadataTopSongs = ({
|
||||
routeId,
|
||||
topSongsQuery,
|
||||
}: AlbumArtistMetadataTopSongsProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
if (!topSongsQuery?.data?.items?.length) return null;
|
||||
|
||||
return (
|
||||
<section>
|
||||
<Group justify="space-between" wrap="nowrap">
|
||||
<Group align="flex-end" wrap="nowrap">
|
||||
<TextTitle fw={700} order={2}>
|
||||
{t('page.albumArtistDetail.topSongs', {
|
||||
postProcess: 'sentenceCase',
|
||||
})}
|
||||
</TextTitle>
|
||||
<Button
|
||||
component={Link}
|
||||
size="compact-md"
|
||||
to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_TOP_SONGS, {
|
||||
albumArtistId: routeId,
|
||||
})}
|
||||
uppercase
|
||||
variant="subtle"
|
||||
>
|
||||
{t('page.albumArtistDetail.viewAll', {
|
||||
postProcess: 'sentenceCase',
|
||||
})}
|
||||
</Button>
|
||||
</Group>
|
||||
</Group>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
interface AlbumArtistMetadataExternalLinksProps {
|
||||
artistName?: string;
|
||||
externalLinks: boolean;
|
||||
lastFM: boolean;
|
||||
mbzId?: null | string;
|
||||
musicBrainz: boolean;
|
||||
}
|
||||
|
||||
const AlbumArtistMetadataExternalLinks = ({
|
||||
artistName,
|
||||
externalLinks,
|
||||
lastFM,
|
||||
mbzId,
|
||||
musicBrainz,
|
||||
}: AlbumArtistMetadataExternalLinksProps) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
if (!externalLinks || (!lastFM && !musicBrainz)) return null;
|
||||
|
||||
return (
|
||||
<Stack gap="xs">
|
||||
<Text fw={600} isNoSelect size="sm" tt="uppercase">
|
||||
{t('common.externalLinks', {
|
||||
postProcess: 'sentenceCase',
|
||||
})}
|
||||
</Text>
|
||||
<Group gap="sm">
|
||||
{lastFM && (
|
||||
<ActionIcon
|
||||
component="a"
|
||||
href={`https://www.last.fm/music/${encodeURIComponent(artistName || '')}`}
|
||||
icon="brandLastfm"
|
||||
iconProps={{
|
||||
fill: 'default',
|
||||
size: 'xl',
|
||||
}}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
tooltip={{
|
||||
label: t('action.openIn.lastfm'),
|
||||
}}
|
||||
variant="subtle"
|
||||
/>
|
||||
)}
|
||||
{mbzId && musicBrainz ? (
|
||||
<ActionIcon
|
||||
component="a"
|
||||
href={`https://musicbrainz.org/artist/${mbzId}`}
|
||||
icon="brandMusicBrainz"
|
||||
iconProps={{
|
||||
fill: 'default',
|
||||
size: 'xl',
|
||||
}}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
tooltip={{
|
||||
label: t('action.openIn.musicbrainz'),
|
||||
}}
|
||||
variant="subtle"
|
||||
/>
|
||||
) : null}
|
||||
</Group>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export const AlbumArtistDetailContent = () => {
|
||||
const { t } = useTranslation();
|
||||
const { artistItems, externalLinks, lastFM, musicBrainz } = useGeneralSettings();
|
||||
@@ -42,10 +280,9 @@ export const AlbumArtistDetailContent = () => {
|
||||
artistId?: string;
|
||||
};
|
||||
const routeId = (artistId || albumArtistId) as string;
|
||||
const { ref } = useContainerQuery();
|
||||
const { ref, ...cq } = useContainerQuery();
|
||||
const { addToQueueByFetch, setFavorite } = usePlayer();
|
||||
const server = useCurrentServer();
|
||||
const genrePath = useGenreRoute();
|
||||
|
||||
const [enabledItem, itemOrder] = useMemo(() => {
|
||||
const enabled: { [key in ArtistItem]?: boolean } = {};
|
||||
@@ -59,7 +296,7 @@ export const AlbumArtistDetailContent = () => {
|
||||
return [enabled, order];
|
||||
}, [artistItems]);
|
||||
|
||||
const detailQuery = useQuery(
|
||||
const detailQuery = useSuspenseQuery(
|
||||
artistsQueries.albumArtistDetail({
|
||||
query: { id: routeId },
|
||||
serverId: server?.id,
|
||||
@@ -73,23 +310,23 @@ export const AlbumArtistDetailContent = () => {
|
||||
},
|
||||
)}?${createSearchParams({
|
||||
artistId: routeId,
|
||||
artistName: detailQuery?.data?.name || '',
|
||||
artistName: detailQuery.data?.name || '',
|
||||
})}`;
|
||||
|
||||
const artistSongsLink = `${generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_SONGS, {
|
||||
albumArtistId: routeId,
|
||||
})}?${createSearchParams({
|
||||
artistId: routeId,
|
||||
artistName: detailQuery?.data?.name || '',
|
||||
artistName: detailQuery.data?.name || '',
|
||||
})}`;
|
||||
|
||||
const topSongsQuery = useQuery(
|
||||
artistsQueries.topSongs({
|
||||
options: {
|
||||
enabled: !!detailQuery?.data?.name && enabledItem.topSongs,
|
||||
enabled: !!detailQuery.data?.name && enabledItem.topSongs,
|
||||
},
|
||||
query: {
|
||||
artist: detailQuery?.data?.name || '',
|
||||
artist: detailQuery.data?.name || '',
|
||||
artistId: routeId,
|
||||
},
|
||||
serverId: server?.id,
|
||||
@@ -106,6 +343,7 @@ export const AlbumArtistDetailContent = () => {
|
||||
artistIds: routeId ? [routeId] : undefined,
|
||||
compilation: false,
|
||||
},
|
||||
rowCount: 2,
|
||||
sortBy: AlbumListSort.RELEASE_DATE,
|
||||
sortOrder: SortOrder.DESC,
|
||||
title: (
|
||||
@@ -136,6 +374,7 @@ export const AlbumArtistDetailContent = () => {
|
||||
artistIds: routeId ? [routeId] : undefined,
|
||||
compilation: true,
|
||||
},
|
||||
rowCount: 1,
|
||||
sortBy: AlbumListSort.RELEASE_DATE,
|
||||
sortOrder: SortOrder.DESC,
|
||||
title: (
|
||||
@@ -146,10 +385,11 @@ export const AlbumArtistDetailContent = () => {
|
||||
uniqueId: 'compilationAlbums',
|
||||
},
|
||||
{
|
||||
data: (detailQuery?.data?.similarArtists || []) as AlbumArtist[],
|
||||
isHidden: !detailQuery?.data?.similarArtists || !enabledItem.similarArtists,
|
||||
data: (detailQuery.data?.similarArtists || []) as AlbumArtist[],
|
||||
isHidden: !detailQuery.data?.similarArtists || !enabledItem.similarArtists,
|
||||
itemType: LibraryItem.ALBUM_ARTIST,
|
||||
order: itemOrder.similarArtists,
|
||||
rowCount: 1,
|
||||
title: (
|
||||
<TextTitle fw={700} order={2}>
|
||||
{t('page.albumArtistDetail.relatedArtists', {
|
||||
@@ -162,7 +402,7 @@ export const AlbumArtistDetailContent = () => {
|
||||
];
|
||||
}, [
|
||||
artistDiscographyLink,
|
||||
detailQuery?.data?.similarArtists,
|
||||
detailQuery.data?.similarArtists,
|
||||
enabledItem.compilations,
|
||||
enabledItem.recentAlbums,
|
||||
enabledItem.similarArtists,
|
||||
@@ -187,7 +427,7 @@ export const AlbumArtistDetailContent = () => {
|
||||
};
|
||||
|
||||
const handleFavorite = () => {
|
||||
if (!detailQuery?.data) return;
|
||||
if (!detailQuery.data) return;
|
||||
setFavorite(
|
||||
detailQuery.data._serverId,
|
||||
[detailQuery.data.id],
|
||||
@@ -197,221 +437,105 @@ export const AlbumArtistDetailContent = () => {
|
||||
};
|
||||
|
||||
const handleMoreOptions = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
if (!detailQuery?.data) return;
|
||||
if (!detailQuery.data) return;
|
||||
ContextMenuController.call({
|
||||
cmd: { items: [detailQuery.data], type: LibraryItem.ALBUM_ARTIST },
|
||||
event: e,
|
||||
});
|
||||
};
|
||||
|
||||
const albumCount = detailQuery?.data?.albumCount;
|
||||
const albumCount = detailQuery.data?.albumCount;
|
||||
const biography =
|
||||
detailQuery.data?.biography && enabledItem.biography ? detailQuery.data.biography : null;
|
||||
const showGenres = detailQuery.data?.genres ? detailQuery.data.genres.length !== 0 : false;
|
||||
const mbzId = detailQuery.data?.mbz;
|
||||
|
||||
const biography = useMemo(() => {
|
||||
const bio = detailQuery?.data?.biography;
|
||||
|
||||
if (!bio || !enabledItem.biography) return null;
|
||||
return sanitize(bio);
|
||||
}, [detailQuery?.data?.biography, enabledItem.biography]);
|
||||
|
||||
const showTopSongs = topSongsQuery?.data?.items?.length && enabledItem.topSongs;
|
||||
const showGenres = detailQuery?.data?.genres ? detailQuery?.data?.genres.length !== 0 : false;
|
||||
const mbzId = detailQuery?.data?.mbz;
|
||||
|
||||
const isLoading =
|
||||
detailQuery?.isLoading ||
|
||||
(server?.type === ServerType.NAVIDROME && enabledItem.topSongs && topSongsQuery?.isLoading);
|
||||
|
||||
if (isLoading) return <div className={styles.contentContainer} ref={ref} />;
|
||||
// Calculate order for genres and external links (show before other sections)
|
||||
// Use a very low order number to ensure they appear first
|
||||
const genresOrder = 0;
|
||||
const externalLinksOrder = 0.5;
|
||||
|
||||
return (
|
||||
<div className={styles.contentContainer} ref={ref}>
|
||||
<div className={styles.detailContainer}>
|
||||
<Group gap="md">
|
||||
<DefaultPlayButton
|
||||
disabled={albumCount === 0}
|
||||
onClick={() => handlePlay(playButtonBehavior)}
|
||||
/>
|
||||
<Group gap="xs">
|
||||
<ActionIcon
|
||||
icon="favorite"
|
||||
iconProps={{
|
||||
fill: detailQuery?.data?.userFavorite ? 'primary' : undefined,
|
||||
}}
|
||||
onClick={handleFavorite}
|
||||
size="lg"
|
||||
variant="transparent"
|
||||
/>
|
||||
<ActionIcon
|
||||
icon="ellipsisHorizontal"
|
||||
onClick={handleMoreOptions}
|
||||
size="lg"
|
||||
variant="transparent"
|
||||
/>
|
||||
</Group>
|
||||
</Group>
|
||||
<Group gap="md">
|
||||
<Button
|
||||
component={Link}
|
||||
size="compact-md"
|
||||
to={artistDiscographyLink}
|
||||
variant="subtle"
|
||||
>
|
||||
{String(t('page.albumArtistDetail.viewDiscography')).toUpperCase()}
|
||||
</Button>
|
||||
<Button
|
||||
component={Link}
|
||||
size="compact-md"
|
||||
to={artistSongsLink}
|
||||
variant="subtle"
|
||||
>
|
||||
{String(t('page.albumArtistDetail.viewAllTracks')).toUpperCase()}
|
||||
</Button>
|
||||
</Group>
|
||||
{showGenres ? (
|
||||
<section>
|
||||
<Group gap="sm">
|
||||
{detailQuery?.data?.genres?.map((genre) => (
|
||||
<Button
|
||||
component={Link}
|
||||
key={`genre-${genre.id}`}
|
||||
radius="md"
|
||||
size="compact-md"
|
||||
to={generatePath(genrePath, {
|
||||
genreId: genre.id,
|
||||
})}
|
||||
variant="outline"
|
||||
>
|
||||
{genre.name}
|
||||
</Button>
|
||||
))}
|
||||
</Group>
|
||||
</section>
|
||||
) : null}
|
||||
{externalLinks && (lastFM || musicBrainz) ? (
|
||||
<section>
|
||||
<Group gap="sm">
|
||||
{lastFM && (
|
||||
<ActionIcon
|
||||
component="a"
|
||||
href={`https://www.last.fm/music/${encodeURIComponent(
|
||||
detailQuery?.data?.name || '',
|
||||
)}`}
|
||||
icon="brandLastfm"
|
||||
iconProps={{
|
||||
fill: 'default',
|
||||
size: 'xl',
|
||||
}}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
tooltip={{
|
||||
label: t('action.openIn.lastfm'),
|
||||
}}
|
||||
variant="subtle"
|
||||
/>
|
||||
)}
|
||||
{mbzId && musicBrainz ? (
|
||||
<ActionIcon
|
||||
component="a"
|
||||
href={`https://musicbrainz.org/artist/${mbzId}`}
|
||||
icon="brandMusicBrainz"
|
||||
iconProps={{
|
||||
fill: 'default',
|
||||
size: 'xl',
|
||||
}}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
tooltip={{
|
||||
label: t('action.openIn.musicbrainz'),
|
||||
}}
|
||||
variant="subtle"
|
||||
/>
|
||||
) : null}
|
||||
</Group>
|
||||
</section>
|
||||
) : null}
|
||||
<AlbumArtistActionButtons
|
||||
albumCount={albumCount}
|
||||
artistDiscographyLink={artistDiscographyLink}
|
||||
artistSongsLink={artistSongsLink}
|
||||
onFavorite={handleFavorite}
|
||||
onMoreOptions={handleMoreOptions}
|
||||
onPlay={() => handlePlay(playButtonBehavior)}
|
||||
userFavorite={detailQuery.data?.userFavorite}
|
||||
/>
|
||||
<Grid gutter="xl">
|
||||
{biography ? (
|
||||
{showGenres && (
|
||||
<Grid.Col order={genresOrder} span={12}>
|
||||
<AlbumArtistMetadataGenres genres={detailQuery.data?.genres} />
|
||||
</Grid.Col>
|
||||
)}
|
||||
{externalLinks && (lastFM || musicBrainz) && (
|
||||
<Grid.Col order={externalLinksOrder} span={12}>
|
||||
<AlbumArtistMetadataExternalLinks
|
||||
artistName={detailQuery.data?.name}
|
||||
externalLinks={externalLinks}
|
||||
lastFM={lastFM}
|
||||
mbzId={mbzId}
|
||||
musicBrainz={musicBrainz}
|
||||
/>
|
||||
</Grid.Col>
|
||||
)}
|
||||
{biography && (
|
||||
<Grid.Col order={itemOrder.biography} span={12}>
|
||||
<section style={{ maxWidth: '1280px' }}>
|
||||
<TextTitle fw={700} order={2}>
|
||||
{t('page.albumArtistDetail.about', {
|
||||
artist: detailQuery?.data?.name,
|
||||
})}
|
||||
</TextTitle>
|
||||
<Spoiler dangerouslySetInnerHTML={{ __html: biography }} />
|
||||
</section>
|
||||
<AlbumArtistMetadataBiography
|
||||
artistName={detailQuery.data?.name}
|
||||
biography={biography}
|
||||
/>
|
||||
</Grid.Col>
|
||||
) : null}
|
||||
{showTopSongs ? (
|
||||
)}
|
||||
{Boolean(topSongsQuery?.data?.items?.length) && enabledItem.topSongs && (
|
||||
<Grid.Col order={itemOrder.topSongs} span={12}>
|
||||
<section>
|
||||
<Group justify="space-between" wrap="nowrap">
|
||||
<Group align="flex-end" wrap="nowrap">
|
||||
<TextTitle fw={700} order={2}>
|
||||
{t('page.albumArtistDetail.topSongs', {
|
||||
postProcess: 'sentenceCase',
|
||||
})}
|
||||
</TextTitle>
|
||||
<Button
|
||||
component={Link}
|
||||
size="compact-md"
|
||||
to={generatePath(
|
||||
AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL_TOP_SONGS,
|
||||
{
|
||||
albumArtistId: routeId,
|
||||
},
|
||||
)}
|
||||
uppercase
|
||||
variant="subtle"
|
||||
>
|
||||
{t('page.albumArtistDetail.viewAll', {
|
||||
postProcess: 'sentenceCase',
|
||||
})}
|
||||
</Button>
|
||||
</Group>
|
||||
</Group>
|
||||
</section>
|
||||
<AlbumArtistMetadataTopSongs
|
||||
routeId={routeId}
|
||||
topSongsQuery={topSongsQuery}
|
||||
/>
|
||||
</Grid.Col>
|
||||
) : null}
|
||||
|
||||
{carousels
|
||||
.filter((c) => !c.isHidden)
|
||||
.map((carousel) => (
|
||||
<Grid.Col
|
||||
key={`carousel-${carousel.uniqueId}`}
|
||||
order={carousel.order}
|
||||
span={12}
|
||||
>
|
||||
<section>
|
||||
<Stack gap="xl">
|
||||
{carousel.itemType === LibraryItem.ALBUM ? (
|
||||
'query' in carousel &&
|
||||
carousel.query &&
|
||||
carousel.sortBy &&
|
||||
carousel.sortOrder ? (
|
||||
<Suspense fallback={<Spinner container />}>
|
||||
<AlbumInfiniteCarousel
|
||||
query={carousel.query}
|
||||
rowCount={1}
|
||||
sortBy={carousel.sortBy}
|
||||
sortOrder={carousel.sortOrder}
|
||||
title={carousel.title}
|
||||
/>
|
||||
</Suspense>
|
||||
) : null
|
||||
) : carousel.itemType === LibraryItem.ALBUM_ARTIST ? (
|
||||
'data' in carousel && carousel.data ? (
|
||||
<AlbumArtistGridCarousel
|
||||
data={carousel.data}
|
||||
rowCount={1}
|
||||
title={carousel.title}
|
||||
/>
|
||||
) : null
|
||||
) : null}
|
||||
</Stack>
|
||||
</section>
|
||||
</Grid.Col>
|
||||
))}
|
||||
)}
|
||||
{cq.height || cq.width
|
||||
? carousels
|
||||
.filter((c) => !c.isHidden)
|
||||
.map((carousel) => (
|
||||
<Grid.Col
|
||||
key={`carousel-${carousel.uniqueId}`}
|
||||
order={carousel.order}
|
||||
span={12}
|
||||
>
|
||||
<Suspense fallback={<Spinner container />}>
|
||||
{carousel.itemType === LibraryItem.ALBUM ? (
|
||||
'query' in carousel &&
|
||||
carousel.query &&
|
||||
carousel.sortBy &&
|
||||
carousel.sortOrder ? (
|
||||
<AlbumInfiniteCarousel
|
||||
query={carousel.query}
|
||||
rowCount={carousel.rowCount}
|
||||
sortBy={carousel.sortBy}
|
||||
sortOrder={carousel.sortOrder}
|
||||
title={carousel.title}
|
||||
/>
|
||||
) : null
|
||||
) : carousel.itemType === LibraryItem.ALBUM_ARTIST ? (
|
||||
'data' in carousel && carousel.data ? (
|
||||
<AlbumArtistGridCarousel
|
||||
data={carousel.data}
|
||||
rowCount={carousel.rowCount}
|
||||
title={carousel.title}
|
||||
/>
|
||||
) : null
|
||||
) : null}
|
||||
</Suspense>
|
||||
</Grid.Col>
|
||||
))
|
||||
: null}
|
||||
</Grid>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useSuspenseQuery } from '@tanstack/react-query';
|
||||
import { useRef } from 'react';
|
||||
import { useLocation, useParams } from 'react-router';
|
||||
|
||||
@@ -33,11 +33,8 @@ const AlbumArtistDetailRoute = () => {
|
||||
|
||||
const location = useLocation();
|
||||
|
||||
const detailQuery = useQuery({
|
||||
...artistsQueries.albumArtistDetail({
|
||||
query: { id: routeId },
|
||||
serverId: server?.id,
|
||||
}),
|
||||
const detailQuery = useSuspenseQuery({
|
||||
...artistsQueries.albumArtistDetail({ query: { id: routeId }, serverId: server?.id }),
|
||||
initialData: location.state?.item,
|
||||
staleTime: 0,
|
||||
});
|
||||
@@ -49,6 +46,7 @@ const AlbumArtistDetailRoute = () => {
|
||||
});
|
||||
|
||||
const background = backgroundColor;
|
||||
|
||||
const showBlurredImage = Boolean(detailQuery.data?.imageUrl) && artistBackground;
|
||||
|
||||
return (
|
||||
@@ -61,6 +59,7 @@ const AlbumArtistDetailRoute = () => {
|
||||
<LibraryHeaderBar.PlayButton
|
||||
ids={[routeId]}
|
||||
itemType={LibraryItem.ALBUM_ARTIST}
|
||||
variant="default"
|
||||
/>
|
||||
<LibraryHeaderBar.Title>
|
||||
{detailQuery?.data?.name}
|
||||
@@ -72,11 +71,11 @@ const AlbumArtistDetailRoute = () => {
|
||||
}}
|
||||
ref={scrollAreaRef}
|
||||
>
|
||||
{showBlurredImage && detailQuery.data?.imageUrl ? (
|
||||
{showBlurredImage ? (
|
||||
<LibraryBackgroundImage
|
||||
blur={artistBackgroundBlur}
|
||||
headerRef={headerRef}
|
||||
imageUrl={detailQuery.data.imageUrl}
|
||||
imageUrl={detailQuery.data?.imageUrl || ''}
|
||||
/>
|
||||
) : (
|
||||
<LibraryBackgroundOverlay backgroundColor={background} headerRef={headerRef} />
|
||||
|
||||
@@ -10,7 +10,6 @@
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
min-height: 340px;
|
||||
padding: 2rem 1rem;
|
||||
|
||||
:global(.item-image-placeholder) {
|
||||
|
||||
@@ -101,6 +101,7 @@ export const LibraryHeader = forwardRef(
|
||||
alt="cover"
|
||||
className={styles.image}
|
||||
containerClassName={styles.image}
|
||||
key={imageUrl}
|
||||
loading="eager"
|
||||
onError={onImageError}
|
||||
src={imageUrl || ''}
|
||||
|
||||
Reference in New Issue
Block a user