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/sidebar/components/sidebar.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 
 import styles from './sidebar.module.css';
 
+import { useItemImageUrl } from '/@/renderer/components/item-image/item-image';
 import { ContextMenuController } from '/@/renderer/features/context-menu/context-menu-controller';
 import { useRadioStore } from '/@/renderer/features/radio/hooks/use-radio-player';
 import { ActionBar } from '/@/renderer/features/sidebar/components/action-bar';
@@ -151,10 +152,11 @@ const SidebarImage = () => {
     const { setSideBar } = useAppStoreActions();
     const currentSong = usePlayerSong();
 
-    const upsizedImageUrl = currentSong?.imageUrl
-        ?.replace(/size=\d+/, 'size=450')
-        .replace(/width=\d+/, 'width=450')
-        .replace(/height=\d+/, 'height=450');
+    const imageUrl = useItemImageUrl({
+        id: currentSong?.id,
+        itemType: LibraryItem.SONG,
+        type: 'sidebar',
+    });
 
     const isSongDefined = Boolean(currentSong?.id);
 
@@ -202,8 +204,8 @@ const SidebarImage = () => {
                     postProcess: 'sentenceCase',
                 })}
             >
-                {upsizedImageUrl ? (
-                    <img className={styles.sidebarImage} loading="eager" src={upsizedImageUrl} />
+                {imageUrl ? (
+                    <img className={styles.sidebarImage} loading="eager" src={imageUrl} />
                 ) : (
                     <ImageUnloader />
                 )}