From 6207cea9f18d50a2518d870d2041f368a8921745 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sat, 27 Dec 2025 17:29:26 -0800
Subject: [PATCH] support animated artist images

---
 src/renderer/components/item-image/item-image.tsx        | 8 ++++++--
 .../artists/components/album-artist-detail-header.tsx    | 1 +
 .../artists/routes/album-artist-detail-route.tsx         | 9 ++++++++-
 src/shared/api/navidrome/navidrome-normalize.ts          | 2 +-
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/item-image/item-image.tsx b/src/renderer/components/item-image/item-image.tsx
index 349cadd88..fb6cf2a13 100644
--- a/src/renderer/components/item-image/item-image.tsx
+++ b/src/renderer/components/item-image/item-image.tsx
@@ -18,10 +18,14 @@ const BaseItemImage = (
         src?: null | string;
     },
 ) => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     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} />;
 };
diff --git a/src/renderer/features/artists/components/album-artist-detail-header.tsx b/src/renderer/features/artists/components/album-artist-detail-header.tsx
index f32e8c0ee..c0e9c384e 100644
--- a/src/renderer/features/artists/components/album-artist-detail-header.tsx
+++ b/src/renderer/features/artists/components/album-artist-detail-header.tsx
@@ -128,6 +128,7 @@ export const AlbumArtistDetailHeader = forwardRef((_props, ref: Ref<HTMLDivEleme
 
     const imageUrl = useItemImageUrl({
         id: detailQuery.data?.imageId || undefined,
+        imageUrl: detailQuery.data?.imageUrl,
         itemType: LibraryItem.ALBUM_ARTIST,
         type: 'itemCard',
     });
diff --git a/src/renderer/features/artists/routes/album-artist-detail-route.tsx b/src/renderer/features/artists/routes/album-artist-detail-route.tsx
index e751c28ec..97dd98da8 100644
--- a/src/renderer/features/artists/routes/album-artist-detail-route.tsx
+++ b/src/renderer/features/artists/routes/album-artist-detail-route.tsx
@@ -40,10 +40,17 @@ const AlbumArtistDetailRoute = () => {
 
     const imageUrl = useItemImageUrl({
         id: detailQuery?.data?.imageId || undefined,
+        imageUrl: detailQuery.data?.imageUrl,
         itemType: LibraryItem.ALBUM_ARTIST,
         type: 'header',
     });
 
+    const libraryBackgroundImageUrl = useItemImageUrl({
+        id: detailQuery?.data?.imageId || undefined,
+        itemType: LibraryItem.ALBUM_ARTIST,
+        type: 'itemCard',
+    });
+
     const selectedImageUrl = imageUrl || detailQuery.data?.imageUrl;
 
     const { background: backgroundColor, isLoading: isColorLoading } = useFastAverageColor({
@@ -93,7 +100,7 @@ const AlbumArtistDetailRoute = () => {
                     <LibraryBackgroundImage
                         blur={artistBackgroundBlur}
                         headerRef={headerRef}
-                        imageUrl={selectedImageUrl || ''}
+                        imageUrl={libraryBackgroundImageUrl || ''}
                     />
                 ) : (
                     <LibraryBackgroundOverlay backgroundColor={background} headerRef={headerRef} />
diff --git a/src/shared/api/navidrome/navidrome-normalize.ts b/src/shared/api/navidrome/navidrome-normalize.ts
index beb742cea..af84de579 100644
--- a/src/shared/api/navidrome/navidrome-normalize.ts
+++ b/src/shared/api/navidrome/navidrome-normalize.ts
@@ -333,7 +333,7 @@ const normalizeAlbumArtist = (
             item.similarArtists?.map((artist) => ({
                 id: artist.id,
                 imageId: null,
-                imageUrl: artist?.artistImageUrl || null,
+                imageUrl: artist?.artistImageUrl?.replace(/\?size=\d+/, '') || null,
                 name: artist.name,
             })) || null,
         songCount,