this repo has no description
Fix Flash of Enlarged Image (FOEI)
Let's see if this works!
+25
-2
+25
-2
src/components/media.jsx
+25
-2
src/components/media.jsx
···
1
1
import { getBlurHashAverageColor } from 'fast-blurhash';
2
-
import { useCallback, useMemo, useRef, useState } from 'preact/hooks';
2
+
import {
3
+
useCallback,
4
+
useLayoutEffect,
5
+
useMemo,
6
+
useRef,
7
+
useState,
8
+
} from 'preact/hooks';
3
9
import QuickPinchZoom, { make3dTransformValue } from 'react-quick-pinch-zoom';
4
10
5
11
import Icon from './icon';
···
95
101
[to],
96
102
);
97
103
98
-
if (type === 'image' || (type === 'unknown' && previewUrl && url)) {
104
+
const isImage = type === 'image' || (type === 'unknown' && previewUrl);
105
+
106
+
const parentRef = useRef();
107
+
const [imageSmallerThanParent, setImageSmallerThanParent] = useState(false);
108
+
useLayoutEffect(() => {
109
+
if (!isImage) return;
110
+
if (!showOriginal) return;
111
+
if (!parentRef.current) return;
112
+
const { offsetWidth, offsetHeight } = parentRef.current;
113
+
const smaller = width < offsetWidth && height < offsetHeight;
114
+
if (smaller) setImageSmallerThanParent(smaller);
115
+
}, [width, height]);
116
+
117
+
if (isImage) {
99
118
// Note: type: unknown might not have width/height
100
119
quickPinchZoomProps.containerProps.style.display = 'inherit';
101
120
return (
102
121
<Parent
122
+
ref={parentRef}
103
123
class={`media media-image`}
104
124
onClick={onClick}
105
125
style={
106
126
showOriginal && {
107
127
backgroundImage: `url(${previewUrl})`,
128
+
backgroundSize: imageSmallerThanParent
129
+
? `${width}px ${height}px`
130
+
: undefined,
108
131
}
109
132
}
110
133
>