mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-09 20:29:36 +02:00
support animated artist images
This commit is contained in:
@@ -18,10 +18,14 @@ const BaseItemImage = (
|
|||||||
src?: null | string;
|
src?: null | string;
|
||||||
},
|
},
|
||||||
) => {
|
) => {
|
||||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
||||||
const { src, ...rest } = props;
|
const { src, ...rest } = props;
|
||||||
|
|
||||||
const imageUrl = useItemImageUrl({ id: props.id, itemType: props.itemType, size: 300 });
|
const imageUrl = useItemImageUrl({
|
||||||
|
id: props.id,
|
||||||
|
imageUrl: src,
|
||||||
|
itemType: props.itemType,
|
||||||
|
size: 300,
|
||||||
|
});
|
||||||
|
|
||||||
return <BaseImage src={imageUrl} {...rest} />;
|
return <BaseImage src={imageUrl} {...rest} />;
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -128,6 +128,7 @@ export const AlbumArtistDetailHeader = forwardRef((_props, ref: Ref<HTMLDivEleme
|
|||||||
|
|
||||||
const imageUrl = useItemImageUrl({
|
const imageUrl = useItemImageUrl({
|
||||||
id: detailQuery.data?.imageId || undefined,
|
id: detailQuery.data?.imageId || undefined,
|
||||||
|
imageUrl: detailQuery.data?.imageUrl,
|
||||||
itemType: LibraryItem.ALBUM_ARTIST,
|
itemType: LibraryItem.ALBUM_ARTIST,
|
||||||
type: 'itemCard',
|
type: 'itemCard',
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -40,10 +40,17 @@ const AlbumArtistDetailRoute = () => {
|
|||||||
|
|
||||||
const imageUrl = useItemImageUrl({
|
const imageUrl = useItemImageUrl({
|
||||||
id: detailQuery?.data?.imageId || undefined,
|
id: detailQuery?.data?.imageId || undefined,
|
||||||
|
imageUrl: detailQuery.data?.imageUrl,
|
||||||
itemType: LibraryItem.ALBUM_ARTIST,
|
itemType: LibraryItem.ALBUM_ARTIST,
|
||||||
type: 'header',
|
type: 'header',
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const libraryBackgroundImageUrl = useItemImageUrl({
|
||||||
|
id: detailQuery?.data?.imageId || undefined,
|
||||||
|
itemType: LibraryItem.ALBUM_ARTIST,
|
||||||
|
type: 'itemCard',
|
||||||
|
});
|
||||||
|
|
||||||
const selectedImageUrl = imageUrl || detailQuery.data?.imageUrl;
|
const selectedImageUrl = imageUrl || detailQuery.data?.imageUrl;
|
||||||
|
|
||||||
const { background: backgroundColor, isLoading: isColorLoading } = useFastAverageColor({
|
const { background: backgroundColor, isLoading: isColorLoading } = useFastAverageColor({
|
||||||
@@ -93,7 +100,7 @@ const AlbumArtistDetailRoute = () => {
|
|||||||
<LibraryBackgroundImage
|
<LibraryBackgroundImage
|
||||||
blur={artistBackgroundBlur}
|
blur={artistBackgroundBlur}
|
||||||
headerRef={headerRef}
|
headerRef={headerRef}
|
||||||
imageUrl={selectedImageUrl || ''}
|
imageUrl={libraryBackgroundImageUrl || ''}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<LibraryBackgroundOverlay backgroundColor={background} headerRef={headerRef} />
|
<LibraryBackgroundOverlay backgroundColor={background} headerRef={headerRef} />
|
||||||
|
|||||||
@@ -333,7 +333,7 @@ const normalizeAlbumArtist = (
|
|||||||
item.similarArtists?.map((artist) => ({
|
item.similarArtists?.map((artist) => ({
|
||||||
id: artist.id,
|
id: artist.id,
|
||||||
imageId: null,
|
imageId: null,
|
||||||
imageUrl: artist?.artistImageUrl || null,
|
imageUrl: artist?.artistImageUrl?.replace(/\?size=\d+/, '') || null,
|
||||||
name: artist.name,
|
name: artist.name,
|
||||||
})) || null,
|
})) || null,
|
||||||
songCount,
|
songCount,
|
||||||
|
|||||||
Reference in New Issue
Block a user