simono41/phanpy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Remove this setState

Browse source
This commit is contained in:
Lim Chee Aun 2023-03-28 01:16:49 +08:00
parent fa3229ca9d
commit 64953f9bd3
1 changed files with 4 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/components/media.jsx
View file

@ -1,5 +1,5 @@
import { getBlurHashAverageColor } from 'fast-blurhash'; import { getBlurHashAverageColor } from 'fast-blurhash';
import { useCallback, useRef, useState } from 'preact/hooks'; import { useCallback, useRef } from 'preact/hooks';
import QuickPinchZoom, { make3dTransformValue } from 'react-quick-pinch-zoom'; import QuickPinchZoom, { make3dTransformValue } from 'react-quick-pinch-zoom';
import Icon from './icon'; import Icon from './icon';
@ -51,8 +51,6 @@ function Media({ media, showOriginal, autoAnimate, onClick = () => {} }) {
} }
}, []); }, []);
const [imageLoaded, setImageLoaded] = useState(false);
if (type === 'image' || (type === 'unknown' && previewUrl && url)) { if (type === 'image' || (type === 'unknown' && previewUrl && url)) {
// Note: type: unknown might not have width/height // Note: type: unknown might not have width/height
return ( return (
@ -60,15 +58,13 @@ function Media({ media, showOriginal, autoAnimate, onClick = () => {} }) {
class={`media media-image`} class={`media media-image`}
onClick={onClick} onClick={onClick}
style={ style={
showOriginal && showOriginal && {
!imageLoaded && {
backgroundImage: `url(${previewUrl})`, backgroundImage: `url(${previewUrl})`,
} }
} }
> >
{showOriginal ? ( {showOriginal ? (
<QuickPinchZoom <QuickPinchZoom
enabled={imageLoaded}
draggableUnZoomed={false} draggableUnZoomed={false}
inertiaFriction={0.9} inertiaFriction={0.9}
containerProps={{ containerProps={{
@ -89,7 +85,7 @@ function Media({ media, showOriginal, autoAnimate, onClick = () => {} }) {
loading="eager" loading="eager"
decoding="async" decoding="async"
onLoad={(e) => { onLoad={(e) => {
setImageLoaded(true); e.target.closest('.media-image').style.backgroundImage = '';
}} }}
/> />
</QuickPinchZoom> </QuickPinchZoom>
@ -106,7 +102,7 @@ function Media({ media, showOriginal, autoAnimate, onClick = () => {} }) {
backgroundPosition: focalBackgroundPosition || 'center', backgroundPosition: focalBackgroundPosition || 'center',
}} }}
onLoad={(e) => { onLoad={(e) => {
setImageLoaded(true); e.target.closest('.media-image').style.backgroundImage = '';
}} }}
/> />
)} )}