diff --git a/src/renderer/api/jellyfin.api.ts b/src/renderer/api/jellyfin.api.ts index 8a6e3180..3761bde6 100644 --- a/src/renderer/api/jellyfin.api.ts +++ b/src/renderer/api/jellyfin.api.ts @@ -636,7 +636,11 @@ const normalizeAlbum = (item: JFAlbum, server: ServerListItem, imageSize?: numbe duration: item.RunTimeTicks / 10000000, genres: item.GenreItems?.map((entry) => ({ id: entry.Id, name: entry.Name })), id: item.Id, - imagePlaceholderUrl: null, + imagePlaceholderUrl: getAlbumCoverArtUrl({ + baseUrl: server.url, + item, + size: 1, + }), imageUrl: getAlbumCoverArtUrl({ baseUrl: server.url, item, diff --git a/src/renderer/api/navidrome.api.ts b/src/renderer/api/navidrome.api.ts index 8a40a62c..3763bd43 100644 --- a/src/renderer/api/navidrome.api.ts +++ b/src/renderer/api/navidrome.api.ts @@ -466,7 +466,13 @@ const normalizeAlbum = (item: NDAlbum, server: ServerListItem, imageSize?: numbe size: imageSize || 300, }); - const imagePlaceholderUrl = imageUrl?.replace(/size=\d+/, 'size=50') || null; + const imagePlaceholderUrl = getCoverArtUrl({ + baseUrl: server.url, + coverArtId: item.coverArtId, + credential: server.credential, + size: 1, + }); + const imageBackdropUrl = imageUrl?.replace(/size=\d+/, 'size=1000') || null; return { diff --git a/src/renderer/components/card/album-card.tsx b/src/renderer/components/card/album-card.tsx index 37c5b5a2..a3f98d2c 100644 --- a/src/renderer/components/card/album-card.tsx +++ b/src/renderer/components/card/album-card.tsx @@ -151,7 +151,7 @@ export const AlbumCard = ({ animationDuration={0.3} height={size} imgStyle={{ objectFit: 'cover' }} - placeholder="var(--card-default-bg)" + placeholder={data?.imagePlaceholderUrl || 'var(--card-default-bg)'} src={data?.imageUrl} width={size} /> diff --git a/src/renderer/components/virtual-grid/grid-card/default-card.tsx b/src/renderer/components/virtual-grid/grid-card/default-card.tsx index 8316ab8f..ca30b0bd 100644 --- a/src/renderer/components/virtual-grid/grid-card/default-card.tsx +++ b/src/renderer/components/virtual-grid/grid-card/default-card.tsx @@ -158,7 +158,7 @@ export const DefaultCard = ({ animationDuration={0.3} height={cardSize} imgStyle={{ objectFit: 'cover' }} - placeholder="var(--card-default-bg)" + placeholder={data?.imagePlaceholderUrl || 'var(--card-default-bg)'} src={data?.imageUrl} width={cardSize} /> diff --git a/src/renderer/components/virtual-grid/grid-card/poster-card.tsx b/src/renderer/components/virtual-grid/grid-card/poster-card.tsx index cc274213..b284de29 100644 --- a/src/renderer/components/virtual-grid/grid-card/poster-card.tsx +++ b/src/renderer/components/virtual-grid/grid-card/poster-card.tsx @@ -153,7 +153,7 @@ export const PosterCard = ({ animationDuration={0.3} height={sizes.itemWidth} importance="auto" - placeholder="var(--card-default-bg)" + placeholder={data?.imagePlaceholderUrl || 'var(--card-default-bg)'} src={data?.imageUrl} width={sizes.itemWidth} />