Use song-specific cover and add placeholder (#6)

src/renderer/api/jellyfin.api.ts

@@ -604,6 +604,7 @@ const normalizeSong = (
     duration: item.RunTimeTicks / 10000000,
     genres: item.GenreItems.map((entry: any) => ({ id: entry.Id, name: entry.Name })),
     id: item.Id,
+    imagePlaceholderUrl: getSongCoverArtUrl({ baseUrl: server.url, item, size: 1 }),
     imageUrl: getSongCoverArtUrl({ baseUrl: server.url, item, size: imageSize || 300 }),
     isFavorite: (item.UserData && item.UserData.IsFavorite) || false,
     lastPlayedAt: null,

src/renderer/api/navidrome.api.ts

@@ -452,10 +452,18 @@ const normalizeSong = (
 ): Song => {
   const imageUrl = getCoverArtUrl({
     baseUrl: server.url,
-    coverArtId: item.albumId,
+    coverArtId: item.id,
     credential: server.credential,
     size: imageSize || 300,
   });
+
+  const imagePlaceholderUrl = getCoverArtUrl({
+    baseUrl: server.url,
+    coverArtId: item.albumId,
+    credential: server.credential,
+    size: 1,
+  });
+
   let id;
 
   // Dynamically determine the id field based on whether or not the item is a playlist song
@@ -481,6 +489,7 @@ const normalizeSong = (
     duration: item.duration,
     genres: item.genres,
     id,
+    imagePlaceholderUrl,
     imageUrl,
     isFavorite: item.starred,
     lastPlayedAt: item.playDate ? item.playDate : null,

src/renderer/api/types.ts

@@ -174,6 +174,7 @@ export type Song = {
   duration: number;
   genres: Genre[];
   id: string;
+  imagePlaceholderUrl: string | null;
   imageUrl: string | null;
   isFavorite: boolean;
   lastPlayedAt: string | null;