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/shared/api/navidrome/navidrome-normalize.ts

@@ -24,32 +24,6 @@ const getImageUrl = (args: { url: null | string }) => {
     return url;
 };
 
-const getCoverArtUrl = (args: {
-    baseUrl: string | undefined;
-    coverArtId: string;
-    credential: string | undefined;
-    size: number;
-    updated: string;
-}) => {
-    const size = args.size ? args.size : 250;
-
-    if (!args.coverArtId || args.coverArtId.match('2a96cbd8b46e442fc41c2b86b821562f')) {
-        return null;
-    }
-
-    return (
-        `${args.baseUrl}/rest/getCoverArt.view` +
-        `?id=${args.coverArtId}` +
-        `&${args.credential}` +
-        '&v=1.13.0' +
-        '&c=Feishin' +
-        `&size=${size}` +
-        // A dummy variable to invalidate the cached image if the item is updated
-        // This is adapted from how Navidrome web does it
-        `&_=${args.updated}`
-    );
-};
-
 interface WithDate {
     playDate?: string;
 }
@@ -74,6 +48,7 @@ const getArtists = (
             if (role === 'albumartist' || role === 'artist') {
                 const roleList = list.map((item) => ({
                     id: item.id,
+                    imageId: null,
                     imageUrl: null,
                     name: item.name,
                 }));
@@ -89,6 +64,7 @@ const getArtists = (
                 for (const artist of list) {
                     const item: RelatedArtist = {
                         id: artist.id,
+                        imageId: null,
                         imageUrl: null,
                         name: artist.name,
                     };
@@ -112,11 +88,13 @@ const getArtists = (
     }
 
     if (albumArtists === undefined) {
-        albumArtists = [{ id: item.albumArtistId, imageUrl: null, name: item.albumArtist }];
+        albumArtists = [
+            { id: item.albumArtistId, imageId: null, imageUrl: null, name: item.albumArtist },
+        ];
     }
 
     if (artists === undefined) {
-        artists = [{ id: item.artistId, imageUrl: null, name: item.artist }];
+        artists = [{ id: item.artistId, imageId: null, imageUrl: null, name: item.artist }];
     }
 
     return { albumArtists, artists, participants };
@@ -125,7 +103,6 @@ const getArtists = (
 const normalizeSong = (
     item: z.infer<typeof ndType._response.playlistSong> | z.infer<typeof ndType._response.song>,
     server?: null | ServerListItem,
-    imageSize?: number,
 ): Song => {
     let id;
     let playlistItemId;
@@ -138,15 +115,6 @@ const normalizeSong = (
         id = item.id;
     }
 
-    const imageUrl = getCoverArtUrl({
-        baseUrl: server?.url,
-        coverArtId: id,
-        credential: server?.credential,
-        size: imageSize || 100,
-        updated: item.updatedAt,
-    });
-
-    const imagePlaceholderUrl = null;
     return {
         album: item.album,
         albumId: item.albumId,
@@ -182,13 +150,14 @@ const normalizeSong = (
             _serverType: ServerType.NAVIDROME,
             albumCount: null,
             id: genre.id,
+            imageId: null,
             imageUrl: null,
             name: genre.name,
             songCount: null,
         })),
         id,
-        imagePlaceholderUrl,
-        imageUrl,
+        imageId: item.id,
+        imageUrl: null,
         lastPlayedAt: normalizePlayDate(item),
         lyrics: item.lyrics ? item.lyrics : null,
         mbzRecordingId: item.mbzReleaseTrackId || null,
@@ -261,20 +230,7 @@ const normalizeAlbum = (
         songs?: z.infer<typeof ndType._response.songList>;
     },
     server?: null | ServerListItem,
-    imageSize?: number,
 ): Album => {
-    const imageUrl = getCoverArtUrl({
-        baseUrl: server?.url,
-        coverArtId: item.coverArtId || item.id,
-        credential: server?.credential,
-        size: imageSize || 300,
-        updated: item.updatedAt,
-    });
-
-    const imagePlaceholderUrl = null;
-
-    const imageBackdropUrl = imageUrl?.replace(/size=\d+/, 'size=1000') || null;
-
     return {
         ...parseAlbumTags(item),
         ...getArtists(item),
@@ -282,7 +238,6 @@ const normalizeAlbum = (
         _serverId: server?.id || 'unknown',
         _serverType: ServerType.NAVIDROME,
         albumArtist: item.albumArtist,
-        backdropImageUrl: imageBackdropUrl,
         comment: item.comment || null,
         createdAt: item.createdAt,
         duration: item.duration !== undefined ? item.duration * 1000 : null,
@@ -298,13 +253,14 @@ const normalizeAlbum = (
             _serverType: ServerType.NAVIDROME,
             albumCount: null,
             id: genre.id,
+            imageId: null,
             imageUrl: null,
             name: genre.name,
             songCount: null,
         })),
         id: item.id,
-        imagePlaceholderUrl,
-        imageUrl,
+        imageId: item.coverArtId || item.id,
+        imageUrl: null,
         isCompilation: item.compilation,
         lastPlayedAt: normalizePlayDate(item),
         mbzId: item.mbzAlbumId || null,
@@ -329,17 +285,7 @@ const normalizeAlbumArtist = (
     },
     server?: null | ServerListItem,
 ): AlbumArtist => {
-    let imageUrl = getImageUrl({ url: item?.largeImageUrl || null });
-
-    if (!imageUrl) {
-        imageUrl = getCoverArtUrl({
-            baseUrl: server?.url,
-            coverArtId: `ar-${item.id}`,
-            credential: server?.credential,
-            size: 300,
-            updated: item.updatedAt || '',
-        });
-    }
+    const imageUrl = getImageUrl({ url: item?.largeImageUrl || null });
 
     let albumCount: number;
     let songCount: number;
@@ -363,7 +309,6 @@ const normalizeAlbumArtist = (
         _serverId: server?.id || 'unknown',
         _serverType: ServerType.NAVIDROME,
         albumCount,
-        backgroundImageUrl: null,
         biography: item.biography || null,
         duration: null,
         genres: (item.genres || []).map((genre) => ({
@@ -372,11 +317,13 @@ const normalizeAlbumArtist = (
             _serverType: ServerType.NAVIDROME,
             albumCount: null,
             id: genre.id,
+            imageId: null,
             imageUrl: null,
             name: genre.name,
             songCount: null,
         })),
         id: item.id,
+        imageId: item.id,
         imageUrl: imageUrl || null,
         lastPlayedAt: normalizePlayDate(item),
         mbz: item.mbzArtistId || null,
@@ -385,6 +332,7 @@ const normalizeAlbumArtist = (
         similarArtists:
             item.similarArtists?.map((artist) => ({
                 id: artist.id,
+                imageId: null,
                 imageUrl: artist?.artistImageUrl || null,
                 name: artist.name,
             })) || null,
@@ -397,18 +345,7 @@ const normalizeAlbumArtist = (
 const normalizePlaylist = (
     item: z.infer<typeof ndType._response.playlist>,
     server?: null | ServerListItem,
-    imageSize?: number,
 ): Playlist => {
-    const imageUrl = getCoverArtUrl({
-        baseUrl: server?.url,
-        coverArtId: item.id,
-        credential: server?.credential,
-        size: imageSize || 300,
-        updated: item.updatedAt,
-    });
-
-    const imagePlaceholderUrl = null;
-
     return {
         _itemType: LibraryItem.PLAYLIST,
         _serverId: server?.id || 'unknown',
@@ -417,8 +354,8 @@ const normalizePlaylist = (
         duration: item.duration * 1000,
         genres: [],
         id: item.id,
-        imagePlaceholderUrl,
-        imageUrl,
+        imageId: item.id,
+        imageUrl: null,
         name: item.name,
         owner: item.ownerName,
         ownerId: item.ownerId,
@@ -440,6 +377,7 @@ const normalizeGenre = (
         _serverType: ServerType.NAVIDROME,
         albumCount: item.albumCount ?? null,
         id: item.id,
+        imageId: null,
         imageUrl: null,
         name: item.name,
         songCount: item.songCount ?? null,