antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-02 10:53:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

support artist art as artist background

Browse source
This commit is contained in:
Kendall Garner 2025-10-10 18:26:28 -07:00
parent 4e4a0464d6
commit 452803fc72
No known key found for this signature in database
GPG key ID: 9355F387FE765C94
5 changed files with 77 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/renderer/features/artists/components/album-artist-detail-header.tsx
View file

@ -14,12 +14,15 @@ import { Text } from '/@/shared/components/text/text';
import { LibraryItem, ServerType } from '/@/shared/types/domain-types';
interface AlbumArtistDetailHeaderProps {
background?: string;
loading: boolean;
background: {
background?: string;
blur: number;
loading: boolean;
};
}
export const AlbumArtistDetailHeader = forwardRef(
({ background, loading }: AlbumArtistDetailHeaderProps, ref: Ref<HTMLDivElement>) => {
({ background }: AlbumArtistDetailHeaderProps, ref: Ref<HTMLDivElement>) => {
const { albumArtistId, artistId } = useParams() as {
albumArtistId?: string;
artistId?: string;
@ -76,12 +79,11 @@ export const AlbumArtistDetailHeader = forwardRef(
return (
<LibraryHeader
background={background}
imageUrl={detailQuery?.data?.imageUrl}
item={{ route: AppRoute.LIBRARY_ALBUM_ARTISTS, type: LibraryItem.ALBUM_ARTIST }}
loading={loading}
ref={ref}
title={detailQuery?.data?.name || ''}
{...background}
>
<Stack>
<Group>

18
src/renderer/features/artists/routes/album-artist-detail-route.tsx
View file

@ -9,13 +9,14 @@ import { usePlayQueueAdd } from '/@/renderer/features/player';
import { AnimatedPage, LibraryHeaderBar } from '/@/renderer/features/shared';
import { useFastAverageColor } from '/@/renderer/hooks';
import { useCurrentServer } from '/@/renderer/store';
import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
import { useGeneralSettings, usePlayButtonBehavior } from '/@/renderer/store/settings.store';
import { LibraryItem } from '/@/shared/types/domain-types';
const AlbumArtistDetailRoute = () => {
const scrollAreaRef = useRef<HTMLDivElement>(null);
const headerRef = useRef<HTMLDivElement>(null);
const server = useCurrentServer();
const { artistBackground, artistBackgroundBlur } = useGeneralSettings();
const { albumArtistId, artistId } = useParams() as {
albumArtistId?: string;
@ -30,12 +31,16 @@ const AlbumArtistDetailRoute = () => {
query: { id: routeId },
serverId: server?.id,
});
const { background, colorId } = useFastAverageColor({
id: routeId,
const { background: backgroundColor, colorId } = useFastAverageColor({
id: artistId,
src: detailQuery.data?.imageUrl,
srcLoaded: !detailQuery.isLoading,
});
const backgroundUrl = detailQuery.data?.imageUrl || '';
const background = (artistBackground && `url(${backgroundUrl})`) || backgroundColor;
const handlePlay = () => {
handlePlayQueueAdd?.({
byItemType: {
@ -65,8 +70,11 @@ const AlbumArtistDetailRoute = () => {
ref={scrollAreaRef}
>
<AlbumArtistDetailHeader
background={background}
loading={!background || colorId !== routeId}
background={{
background,
blur: (artistBackground && artistBackgroundBlur) || 0,
loading: !backgroundColor || colorId !== artistId,
}}
ref={headerRef}
/>
<AlbumArtistDetailContent background={background} />