fix click handler on LibraryHeader image

src/renderer/features/shared/components/library-header.tsx

@@ -6,7 +6,7 @@ import { Link } from 'react-router';
 
 import styles from './library-header.module.css';
 
-import { ItemImage } from '/@/renderer/components/item-image/item-image';
+import { getItemImageUrl, ItemImage } from '/@/renderer/components/item-image/item-image';
 import { useIsPlayerFetching } from '/@/renderer/features/player/context/player-context';
 import {
     PlayLastTextButton,
@@ -23,6 +23,7 @@ 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 { BaseImage } 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';
@@ -75,8 +76,22 @@ export const LibraryHeader = forwardRef(
         };
 
         const openImage = useCallback(() => {
-            if (imageUrl && !isImageError) {
+            const imageId = item.imageId;
-                const fullSized = imageUrl.replace(/&?(size|width|height)=\d+/, '');
+            const itemType = item.type as LibraryItem;
+
+            if (!imageId || !itemType) {
+                return;
+            }
+
+            const imageUrl = getItemImageUrl({
+                id: imageId,
+                itemType,
+            });
+
+            if (!imageUrl) {
+                console.error('No image URL found');
+                return;
+            }
 
             openModal({
                 children: (
@@ -88,26 +103,30 @@ export const LibraryHeader = forwardRef(
                             width: '100%',
                         }}
                     >
-                            <img
+                        <BaseImage
                             alt="cover"
-                                src={fullSized}
+                            src={imageUrl}
                             style={{
                                 maxHeight: '100%',
                                 maxWidth: '100%',
+                                objectFit: 'contain',
                             }}
+                            unloaderIcon="emptyImage"
                         />
                     </Center>
                 ),
                 fullScreen: true,
             });
-            }
+        }, [item.imageId, item.type]);
-        }, [imageUrl, isImageError]);
 
         return (
             <div className={clsx(styles.libraryHeader, containerClassName)} ref={ref}>
                 <div
                     className={styles.imageSection}
-                    onClick={() => openImage()}
+                    onClick={() => {
+                        console.log('openImage');
+                        openImage();
+                    }}
                     onKeyDown={(event) =>
                         [' ', 'Enter', 'Spacebar'].includes(event.key) && openImage()
                     }