pepepper/fluxer
1
0 Fork 0
mirror of https://github.com/fluxerapp/fluxer synced 2026-10-17 04:55:42 +09:00
Code Issues Packages Projects Releases Wiki Activity

fix(app): give mature media blur the real media dimensions (#2084)

Browse Source
This commit is contained in:
Hampus authored and GitHub committed 2026-08-29 16:04:55 +02:00
1 parent 827451d12d
commit 4d15c39cd7
1 file changed
+12 -6
Download Patch File Download Diff File Expand all files Collapse all files
fluxer_app/src/features/channel/components/embeds/media/EmbedGifv.tsx
+12 -6
View File
@@ -408,7 +408,7 @@ export const EmbedGifv: FC<
}, },
[visibilityRef], [visibilityRef],
); );
const {dimensions, style} = mediaCalculator.calculate({width: naturalWidth, height: naturalHeight}); const {dimensions} = mediaCalculator.calculate({width: naturalWidth, height: naturalHeight});
const canPlayInline = isInlinePlayableVideoSize({width: naturalWidth, height: naturalHeight}); const canPlayInline = isInlinePlayableVideoSize({width: naturalWidth, height: naturalHeight});
const posterSource = thumbnailProxyURL && thumbnailProxyURL.length > 0 ? thumbnailProxyURL : videoProxyURL; const posterSource = thumbnailProxyURL && thumbnailProxyURL.length > 0 ? thumbnailProxyURL : videoProxyURL;
const posterURL = useMemo(() => { const posterURL = useMemo(() => {
@@ -534,8 +534,11 @@ export const EmbedGifv: FC<
safePause(video); safePause(video);
}, [shouldPlay]); }, [shouldPlay]);
if (shouldBlur) { if (shouldBlur) {
const {width: _width, height: _height, ...styleWithoutDimensions} = style; const blurContainerStyle: React.CSSProperties = {
const blurContainerStyle = {...styleWithoutDimensions, maxWidth: '100%', width: '100%'}; maxWidth: '100%',
width: remFromPx(dimensions.width),
...aspectRatioStyle,
};
return ( return (
<div <div
ref={visibilityRef} ref={visibilityRef}
@@ -719,7 +722,7 @@ export const EmbedGif: FC<
}, },
[visibilityRef], [visibilityRef],
); );
const {dimensions, style} = mediaCalculator.calculate({width: naturalWidth, height: naturalHeight}); const {dimensions} = mediaCalculator.calculate({width: naturalWidth, height: naturalHeight});
const {width: displayWidth, height: displayHeight} = dimensions; const {width: displayWidth, height: displayHeight} = dimensions;
const gifAutoPlay = useShouldAnimate({kind: 'gif'}); const gifAutoPlay = useShouldAnimate({kind: 'gif'});
const animationPolicyAllowed = useShouldAnimate({ const animationPolicyAllowed = useShouldAnimate({
@@ -856,8 +859,11 @@ export const EmbedGif: FC<
], ],
); );
if (shouldBlur) { if (shouldBlur) {
const {width: _width, height: _height, ...styleWithoutDimensions} = style; const blurContainerStyle: React.CSSProperties = {
const blurContainerStyle = {...styleWithoutDimensions, maxWidth: '100%', width: '100%'}; maxWidth: '100%',
width: remFromPx(dimensions.width),
...aspectRatioStyle,
};
return ( return (
<div <div
ref={visibilityRef} ref={visibilityRef}