diff --git a/src/renderer/api/jellyfin.api.ts b/src/renderer/api/jellyfin.api.ts index 3c0ec9b7..5595dac6 100644 --- a/src/renderer/api/jellyfin.api.ts +++ b/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, diff --git a/src/renderer/api/navidrome.api.ts b/src/renderer/api/navidrome.api.ts index 9143a1f0..f86ccf06 100644 --- a/src/renderer/api/navidrome.api.ts +++ b/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, diff --git a/src/renderer/api/types.ts b/src/renderer/api/types.ts index 9c38922e..9c6c406b 100644 --- a/src/renderer/api/types.ts +++ b/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; diff --git a/src/renderer/components/virtual-table/cells/combined-title-cell.tsx b/src/renderer/components/virtual-table/cells/combined-title-cell.tsx index b38ff156..9bacb3ac 100644 --- a/src/renderer/components/virtual-table/cells/combined-title-cell.tsx +++ b/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