support animated artist images

This commit is contained in:
jeffvli
2025-12-27 17:29:26 -08:00
parent c299752e44
commit 6207cea9f1
4 changed files with 16 additions and 4 deletions
@@ -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,