javier/jellyfin-audio-player
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: missing cover images in now playing view

Browse Source 
(fixes #245 and fixes #209)
This commit is contained in:
Lei Nelissen
2025-01-26 21:59:46 +01:00
parent 9462a3e294
commit 96a11804ba
1 changed files with 25 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/CoverImage.tsx
View File

@@ -31,6 +31,9 @@ interface Props {
src: string; src: string;
} }
const emptyAlbumLight = require('@/assets/images/empty-album-light.png');
const emptyAlbumDark = require('@/assets/images/empty-album-dark.png');
/** /**
* This will take a cover image, and apply shadows and a really nice background * This will take a cover image, and apply shadows and a really nice background
* blur to the image in question. Additionally, we'll add some margin and radius * blur to the image in question. Additionally, we'll add some margin and radius
@@ -47,19 +50,14 @@ function CoverImage({
const defaultStyles = useDefaultStyles(); const defaultStyles = useDefaultStyles();
const colorScheme = useUserOrSystemScheme(); const colorScheme = useUserOrSystemScheme();
const image = useImage(src || null); const image = useImage(src || null, console.log);
const fallback = useImage(colorScheme === 'light' const fallback = useImage(colorScheme === 'light' ? emptyAlbumLight: emptyAlbumDark);
? require('@/assets/images/empty-album-light.png')
: require('@/assets/images/empty-album-dark.png')
);
const { canvasSize, imageSize } = useMemo(() => { const { canvasSize, imageSize } = useMemo(() => {
const imageSize = Screen.width - margin; const imageSize = Screen.width - margin;
const canvasSize = imageSize + blurRadius * 2; const canvasSize = imageSize + blurRadius * 2;
return { imageSize, canvasSize }; return { imageSize, canvasSize };
}, [blurRadius, margin]); }, [blurRadius, margin]);
const skiaImage = useMemo(() => (image || fallback), [image, fallback]);
return ( return (
<Container size={imageSize} style={style}> <Container size={imageSize} style={style}>
<BlurContainer size={canvasSize} offset={blurRadius}> <BlurContainer size={canvasSize} offset={blurRadius}>
@@ -70,14 +68,30 @@ function CoverImage({
<Shadow dx={0} dy={8} blur={16} color="#0000000d" /> <Shadow dx={0} dy={8} blur={16} color="#0000000d" />
<Shadow dx={0} dy={16} blur={32} color="#0000000d" /> <Shadow dx={0} dy={16} blur={32} color="#0000000d" />
</RoundedRect> </RoundedRect>
{skiaImage ? ( {image ? (
<> <>
<SkiaImage image={skiaImage} width={imageSize} height={imageSize} opacity={opacity}> <SkiaImage
image={image || fallback}
width={imageSize}
height={imageSize}
opacity={opacity}
key={image ? 'image-blur' : 'fallback-blur'}
>
<Offset x={blurRadius} y={blurRadius} /> <Offset x={blurRadius} y={blurRadius} />
<Blur blur={blurRadius / 2} /> <Blur blur={blurRadius / 2} />
</SkiaImage> </SkiaImage>
<Mask mask={<RoundedRect width={imageSize} height={imageSize} x={blurRadius} y={blurRadius} r={radius} />}> <Mask
<SkiaImage image={skiaImage} width={imageSize} height={imageSize}> mask={
<RoundedRect
width={imageSize}
height={imageSize}
x={blurRadius}
y={blurRadius} r={radius}
/>
}
key={image ? 'image' : 'fallback'}
>
<SkiaImage image={image || fallback} width={imageSize} height={imageSize}>
<Offset x={blurRadius} y={blurRadius} /> <Offset x={blurRadius} y={blurRadius} />
</SkiaImage> </SkiaImage>
</Mask> </Mask>