Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-02 14:16:39 +01:00
Code Issues Projects Releases Packages Wiki Activity

Attempt to fix weird unloaded image on Mobile Safari

Browse source
This commit is contained in:
Lim Chee Aun 2023-04-09 19:46:49 +08:00
parent 72082f5558
commit ea4db6bdcf
1 changed files with 5 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/media.jsx
View file

@ -1,5 +1,5 @@
import { getBlurHashAverageColor } from 'fast-blurhash'; import { getBlurHashAverageColor } from 'fast-blurhash';
import { useCallback, useRef } from 'preact/hooks'; import { useCallback, useRef, useState } 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';
@ -54,7 +54,9 @@ function Media({ media, showOriginal, autoAnimate, onClick = () => {} }) {
} }
}, []); }, []);
const [pinchZoomEnabled, setPinchZoomEnabled] = useState(false);
const quickPinchZoomProps = { const quickPinchZoomProps = {
enabled: pinchZoomEnabled,
draggableUnZoomed: false, draggableUnZoomed: false,
inertiaFriction: 0.9, inertiaFriction: 0.9,
containerProps: { containerProps: {
@ -97,6 +99,7 @@ function Media({ media, showOriginal, autoAnimate, onClick = () => {} }) {
onLoad={(e) => { onLoad={(e) => {
e.target.closest('.media-image').style.backgroundImage = ''; e.target.closest('.media-image').style.backgroundImage = '';
e.target.closest('.media-zoom').style.display = ''; e.target.closest('.media-zoom').style.display = '';
setPinchZoomEnabled(true);
}} }}
/> />
</QuickPinchZoom> </QuickPinchZoom>
@ -180,7 +183,7 @@ function Media({ media, showOriginal, autoAnimate, onClick = () => {} }) {
> >
{showOriginal || autoGIFAnimate ? ( {showOriginal || autoGIFAnimate ? (
isGIF && showOriginal ? ( isGIF && showOriginal ? (
<QuickPinchZoom {...quickPinchZoomProps}> <QuickPinchZoom {...quickPinchZoomProps} enabled>
<div <div
ref={mediaRef} ref={mediaRef}
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{