Add image URL generation at runtime to allow for dynamic image sizes (#1439)

* add getImageUrl to domain endpoints

* add new ItemImage component and hooks to generate image url

* add configuration for image resolution based on types

src/renderer/features/albums/components/album-detail-header.tsx

@@ -4,6 +4,7 @@ import { generatePath, Link, useParams } from 'react-router';
 
 import styles from './album-detail-header.module.css';
 
+import { useItemImageUrl } from '/@/renderer/components/item-image/item-image';
 import { albumQueries } from '/@/renderer/features/albums/api/album-api';
 import { ContextMenuController } from '/@/renderer/features/context-menu/context-menu-controller';
 import { usePlayer } from '/@/renderer/features/player/context/player-context';
@@ -82,10 +83,16 @@ export const AlbumDetailHeader = forwardRef<HTMLDivElement>((_props, ref) => {
     const firstAlbumArtist = detailQuery?.data?.albumArtists?.[0];
     const releaseYear = detailQuery?.data?.releaseYear;
 
+    const imageUrl = useItemImageUrl({
+        id: detailQuery?.data?.id,
+        itemType: LibraryItem.ALBUM,
+        type: 'header',
+    });
+
     return (
         <Stack ref={ref}>
             <LibraryHeader
-                imageUrl={detailQuery?.data?.imageUrl}
+                imageUrl={imageUrl}
                 item={{ route: AppRoute.LIBRARY_ALBUMS, type: LibraryItem.ALBUM }}
                 title={detailQuery?.data?.name || ''}
             >

src/renderer/features/albums/components/expanded-album-list-item.tsx

@@ -6,6 +6,7 @@ import { Fragment, Suspense, useCallback, useRef } from 'react';
 
 import styles from './expanded-album-list-item.module.css';
 
+import { useItemImageUrl } from '/@/renderer/components/item-image/item-image';
 import { getDraggedItems } from '/@/renderer/components/item-list/helpers/get-dragged-items';
 import { useDefaultItemListControls } from '/@/renderer/components/item-list/helpers/item-list-controls';
 import {
@@ -197,10 +198,16 @@ export const ExpandedAlbumListItem = ({ internalState, item }: ExpandedAlbumList
 
     const player = usePlayer();
 
+    const imageUrl = useItemImageUrl({
+        id: item.id,
+        itemType: LibraryItem.ALBUM,
+        type: 'itemCard',
+    });
+
     const color = useFastAverageColor({
         algorithm: 'sqrt',
         id: item.id,
-        src: data?.imageUrl,
+        src: imageUrl,
         srcLoaded: true,
     });
 
@@ -300,7 +307,7 @@ export const ExpandedAlbumListItem = ({ internalState, item }: ExpandedAlbumList
                             className={styles.backgroundImage}
                             style={{
                                 ['--bg-color' as string]: color?.background,
-                                backgroundImage: `url(${data?.imageUrl})`,
+                                backgroundImage: `url(${imageUrl})`,
                             }}
                         />
                         {data?.songs && data.songs.length > 0 && (