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;

src/renderer/components/virtual-table/cells/combined-title-cell.tsx

@@ -5,6 +5,7 @@ import { motion } from 'framer-motion';
 import { RiAlbumFill } from 'react-icons/ri';
 import { generatePath } from 'react-router';
 import { Link } from 'react-router-dom';
+import { SimpleImg } from 'react-simple-img';
 import styled from 'styled-components';
 import type { AlbumArtist, Artist } from '/@/renderer/api/types';
 import { Text } from '/@/renderer/components/text';
@@ -40,8 +41,10 @@ const MetadataWrapper = styled.div`
   width: 100%;
 `;
 
-const StyledImage = styled.img`
-  object-fit: cover;
+const StyledImage = styled(SimpleImg)`
+  img {
+    object-fit: cover;
+  }
 `;
 
 export const CombinedTitleCell = ({ value, rowIndex, node }: ICellRendererParams) => {
@@ -78,6 +81,7 @@ export const CombinedTitleCell = ({ value, rowIndex, node }: ICellRendererParams
           <StyledImage
             alt="cover"
             height={(node.rowHeight || 40) - 10}
+            placeholder={value.imagePlaceholderUrl || 'var(--placeholder-bg)'}
             src={value.imageUrl}
             style={{}}
             width={(node.rowHeight || 40) - 10}

src/renderer/components/virtual-table/index.tsx

@@ -217,6 +217,7 @@ const tableColumns: { [key: string]: ColDef } = {
         ? {
             albumArtists: params.data?.albumArtists,
             artists: params.data?.artists,
+            imagePlaceholderUrl: params.data?.imagePlaceholderUrl,
             imageUrl: params.data?.imageUrl,
             name: params.data?.name,
             rowHeight: params.node?.rowHeight,