Add card placeholder images

This commit is contained in:
jeffvli 2022-12-30 21:31:13 -08:00
parent b3d95f765c
commit 1f232fa4da
5 changed files with 15 additions and 5 deletions

View file

@ -636,7 +636,11 @@ const normalizeAlbum = (item: JFAlbum, server: ServerListItem, imageSize?: numbe
duration: item.RunTimeTicks / 10000000, duration: item.RunTimeTicks / 10000000,
genres: item.GenreItems?.map((entry) => ({ id: entry.Id, name: entry.Name })), genres: item.GenreItems?.map((entry) => ({ id: entry.Id, name: entry.Name })),
id: item.Id, id: item.Id,
imagePlaceholderUrl: null, imagePlaceholderUrl: getAlbumCoverArtUrl({
baseUrl: server.url,
item,
size: 1,
}),
imageUrl: getAlbumCoverArtUrl({ imageUrl: getAlbumCoverArtUrl({
baseUrl: server.url, baseUrl: server.url,
item, item,

View file

@ -466,7 +466,13 @@ const normalizeAlbum = (item: NDAlbum, server: ServerListItem, imageSize?: numbe
size: imageSize || 300, 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; const imageBackdropUrl = imageUrl?.replace(/size=\d+/, 'size=1000') || null;
return { return {

View file

@ -151,7 +151,7 @@ export const AlbumCard = ({
animationDuration={0.3} animationDuration={0.3}
height={size} height={size}
imgStyle={{ objectFit: 'cover' }} imgStyle={{ objectFit: 'cover' }}
placeholder="var(--card-default-bg)" placeholder={data?.imagePlaceholderUrl || 'var(--card-default-bg)'}
src={data?.imageUrl} src={data?.imageUrl}
width={size} width={size}
/> />

View file

@ -158,7 +158,7 @@ export const DefaultCard = ({
animationDuration={0.3} animationDuration={0.3}
height={cardSize} height={cardSize}
imgStyle={{ objectFit: 'cover' }} imgStyle={{ objectFit: 'cover' }}
placeholder="var(--card-default-bg)" placeholder={data?.imagePlaceholderUrl || 'var(--card-default-bg)'}
src={data?.imageUrl} src={data?.imageUrl}
width={cardSize} width={cardSize}
/> />

View file

@ -153,7 +153,7 @@ export const PosterCard = ({
animationDuration={0.3} animationDuration={0.3}
height={sizes.itemWidth} height={sizes.itemWidth}
importance="auto" importance="auto"
placeholder="var(--card-default-bg)" placeholder={data?.imagePlaceholderUrl || 'var(--card-default-bg)'}
src={data?.imageUrl} src={data?.imageUrl}
width={sizes.itemWidth} width={sizes.itemWidth}
/> />