From 7aeadb531f5136a7d0ee475620fa580b476d81ae Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Tue, 30 Dec 2025 16:17:37 -0800
Subject: [PATCH] use ItemImage in library header

---
 .../albums/components/album-detail-header.tsx |  9 ++-------
 .../routes/dummy-album-detail-route.tsx       |  7 ++++++-
 .../components/album-artist-detail-header.tsx |  7 ++++++-
 .../playlist-detail-song-list-header.tsx      |  7 ++++++-
 .../shared/components/library-header.tsx      | 19 +++++++++++--------
 5 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/src/renderer/features/albums/components/album-detail-header.tsx b/src/renderer/features/albums/components/album-detail-header.tsx
index 1b5db176a..1e64cff1f 100644
--- a/src/renderer/features/albums/components/album-detail-header.tsx
+++ b/src/renderer/features/albums/components/album-detail-header.tsx
@@ -91,12 +91,6 @@ export const AlbumDetailHeader = forwardRef<HTMLDivElement>((_props, ref) => {
     const releaseYear = detailQuery?.data?.releaseYear;
     const releaseDate = detailQuery?.data?.releaseDate;
 
-    const imageUrl = useItemImageUrl({
-        id: detailQuery?.data?.imageId || undefined,
-        itemType: LibraryItem.ALBUM,
-        type: 'header',
-    });
-
     const metadataItems = useMemo(() => {
         const items: Array<{ id: string; value: React.ReactNode | string | undefined }> = [];
 
@@ -192,9 +186,10 @@ export const AlbumDetailHeader = forwardRef<HTMLDivElement>((_props, ref) => {
     return (
         <Stack ref={ref}>
             <LibraryHeader
-                imageUrl={imageUrl}
                 item={{
                     children: headerItem,
+                    imageId: detailQuery?.data?.imageId,
+                    imageUrl: detailQuery?.data?.imageUrl,
                     route: AppRoute.LIBRARY_ALBUMS,
                     type: LibraryItem.ALBUM,
                 }}
diff --git a/src/renderer/features/albums/routes/dummy-album-detail-route.tsx b/src/renderer/features/albums/routes/dummy-album-detail-route.tsx
index 4a4d6e0e2..09d1fb944 100644
--- a/src/renderer/features/albums/routes/dummy-album-detail-route.tsx
+++ b/src/renderer/features/albums/routes/dummy-album-detail-route.tsx
@@ -126,7 +126,12 @@ const DummyAlbumDetailRoute = () => {
                 <Stack>
                     <LibraryHeader
                         imageUrl={imageUrl}
-                        item={{ route: AppRoute.LIBRARY_SONGS, type: LibraryItem.SONG }}
+                        item={{
+                            imageId: detailQuery?.data?.imageId,
+                            imageUrl: detailQuery?.data?.imageUrl,
+                            route: AppRoute.LIBRARY_SONGS,
+                            type: LibraryItem.SONG,
+                        }}
                         loading={!background || colorId !== albumId}
                         title={detailQuery?.data?.name || ''}
                     >
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 b8a3e8fc4..badb01ac8 100644
--- a/src/renderer/features/artists/components/album-artist-detail-header.tsx
+++ b/src/renderer/features/artists/components/album-artist-detail-header.tsx
@@ -141,7 +141,12 @@ export const AlbumArtistDetailHeader = forwardRef((_props, ref: Ref<HTMLDivEleme
     return (
         <LibraryHeader
             imageUrl={selectedImageUrl}
-            item={{ route: AppRoute.LIBRARY_ALBUM_ARTISTS, type: LibraryItem.ALBUM_ARTIST }}
+            item={{
+                imageId: detailQuery.data?.imageId,
+                imageUrl: detailQuery.data?.imageUrl,
+                route: AppRoute.LIBRARY_ALBUM_ARTISTS,
+                type: LibraryItem.ALBUM_ARTIST,
+            }}
             ref={ref}
             title={detailQuery.data?.name || ''}
         >
diff --git a/src/renderer/features/playlists/components/playlist-detail-song-list-header.tsx b/src/renderer/features/playlists/components/playlist-detail-song-list-header.tsx
index 5f9ee0caf..320eafa11 100644
--- a/src/renderer/features/playlists/components/playlist-detail-song-list-header.tsx
+++ b/src/renderer/features/playlists/components/playlist-detail-song-list-header.tsx
@@ -94,7 +94,12 @@ export const PlaylistDetailSongListHeader = ({
             ) : (
                 <LibraryHeader
                     imageUrl={imageUrl}
-                    item={{ route: AppRoute.PLAYLISTS, type: LibraryItem.PLAYLIST }}
+                    item={{
+                        imageId: detailQuery?.data?.imageId,
+                        imageUrl: detailQuery?.data?.imageUrl,
+                        route: AppRoute.PLAYLISTS,
+                        type: LibraryItem.PLAYLIST,
+                    }}
                     title={detailQuery?.data?.name}
                 >
                     <LibraryHeaderMenu
diff --git a/src/renderer/features/shared/components/library-header.tsx b/src/renderer/features/shared/components/library-header.tsx
index 092c8463a..f67db6b8e 100644
--- a/src/renderer/features/shared/components/library-header.tsx
+++ b/src/renderer/features/shared/components/library-header.tsx
@@ -6,6 +6,7 @@ import { Link } from 'react-router';
 
 import styles from './library-header.module.css';
 
+import { ItemImage } from '/@/renderer/components/item-image/item-image';
 import { useIsPlayerFetching } from '/@/renderer/features/player/context/player-context';
 import {
     PlayLastTextButton,
@@ -22,7 +23,6 @@ import { Button } from '/@/shared/components/button/button';
 import { Center } from '/@/shared/components/center/center';
 import { Group } from '/@/shared/components/group/group';
 import { Icon } from '/@/shared/components/icon/icon';
-import { Image } from '/@/shared/components/image/image';
 import { Rating } from '/@/shared/components/rating/rating';
 import { Spinner } from '/@/shared/components/spinner/spinner';
 import { Text } from '/@/shared/components/text/text';
@@ -34,7 +34,13 @@ interface LibraryHeaderProps {
     containerClassName?: string;
     imagePlaceholderUrl?: null | string;
     imageUrl?: null | string;
-    item: { children?: ReactNode; route: string; type?: LibraryItem };
+    item: {
+        children?: ReactNode;
+        imageId?: null | string;
+        imageUrl?: null | string;
+        route: string;
+        type?: LibraryItem;
+    };
     loading?: boolean;
     title: string;
 }
@@ -110,12 +116,9 @@ export const LibraryHeader = forwardRef(
                     tabIndex={0}
                 >
                     {!isImageError && (
-                        <Image
-                            alt="cover"
-                            className={styles.image}
-                            containerClassName={styles.image}
-                            key={imageUrl}
-                            loading="eager"
+                        <ItemImage
+                            id={item.imageId}
+                            itemType={item.type as LibraryItem}
                             onError={onImageError}
                             src={imageUrl || ''}
                         />