this repo has no description
Make GIFs zoomable too
+58
-44
+58
-44
src/components/media.jsx
+58
-44
src/components/media.jsx
···
40
40
focalBackgroundPosition = `${x.toFixed(0)}% ${y.toFixed(0)}%`;
41
41
}
42
42
43
-
const imgRef = useRef();
43
+
const mediaRef = useRef();
44
44
const onUpdate = useCallback(({ x, y, scale }) => {
45
-
const { current: img } = imgRef;
45
+
const { current: media } = mediaRef;
46
46
47
-
if (img) {
47
+
if (media) {
48
48
const value = make3dTransformValue({ x, y, scale });
49
49
50
-
img.style.setProperty('transform', value);
50
+
media.style.setProperty('transform', value);
51
51
52
-
img.closest('.media-zoom').style.touchAction = scale <= 1 ? 'pan-x' : '';
52
+
media.closest('.media-zoom').style.touchAction =
53
+
scale <= 1 ? 'pan-x' : '';
53
54
}
54
55
}, []);
55
56
57
+
const quickPinchZoomProps = {
58
+
draggableUnZoomed: false,
59
+
inertiaFriction: 0.9,
60
+
containerProps: {
61
+
className: 'media-zoom',
62
+
style: {
63
+
width: 'inherit',
64
+
height: 'inherit',
65
+
justifyContent: 'inherit',
66
+
alignItems: 'inherit',
67
+
// display: 'inherit',
68
+
},
69
+
},
70
+
onUpdate,
71
+
};
72
+
56
73
if (type === 'image' || (type === 'unknown' && previewUrl && url)) {
57
74
// Note: type: unknown might not have width/height
75
+
quickPinchZoomProps.containerProps.style.display = 'inherit';
58
76
return (
59
77
<div
60
78
class={`media media-image`}
···
66
84
}
67
85
>
68
86
{showOriginal ? (
69
-
<QuickPinchZoom
70
-
draggableUnZoomed={false}
71
-
inertiaFriction={0.9}
72
-
containerProps={{
73
-
className: 'media-zoom',
74
-
style: {
75
-
width: 'inherit',
76
-
height: 'inherit',
77
-
justifyContent: 'inherit',
78
-
alignItems: 'inherit',
79
-
display: 'inherit',
80
-
},
81
-
}}
82
-
onUpdate={onUpdate}
83
-
>
87
+
<QuickPinchZoom {...quickPinchZoomProps}>
84
88
<img
85
-
ref={imgRef}
89
+
ref={mediaRef}
86
90
src={mediaURL}
87
91
alt={description}
88
92
width={width}
···
122
126
const formattedDuration = formatDuration(original.duration);
123
127
const hoverAnimate = !showOriginal && !autoAnimate && isGIF;
124
128
const autoGIFAnimate = !showOriginal && autoAnimate && isGIF;
129
+
130
+
const videoHTML = `
131
+
<video
132
+
src="${url}"
133
+
poster="${previewUrl}"
134
+
width="${width}"
135
+
height="${height}"
136
+
preload="auto"
137
+
autoplay
138
+
muted="${isGIF}"
139
+
${isGIF ? '' : 'controls'}
140
+
playsinline
141
+
loop="${loopable}"
142
+
${isGIF ? 'ondblclick="this.paused ? this.play() : this.pause()"' : ''}
143
+
></video>
144
+
`;
145
+
125
146
return (
126
147
<div
127
148
class={`media media-${isGIF ? 'gif' : 'video'} ${
···
157
178
}}
158
179
>
159
180
{showOriginal || autoGIFAnimate ? (
160
-
<div
161
-
dangerouslySetInnerHTML={{
162
-
__html: `
163
-
<video
164
-
src="${url}"
165
-
poster="${previewUrl}"
166
-
width="${width}"
167
-
height="${height}"
168
-
preload="auto"
169
-
autoplay
170
-
muted="${isGIF}"
171
-
${isGIF ? '' : 'controls'}
172
-
playsinline
173
-
loop="${loopable}"
174
-
${
175
-
isGIF
176
-
? 'ondblclick="this.paused ? this.play() : this.pause()"'
177
-
: ''
178
-
}
179
-
></video>
180
-
`,
181
-
}}
182
-
/>
181
+
isGIF ? (
182
+
<QuickPinchZoom {...quickPinchZoomProps}>
183
+
<div
184
+
ref={mediaRef}
185
+
dangerouslySetInnerHTML={{
186
+
__html: videoHTML,
187
+
}}
188
+
/>
189
+
</QuickPinchZoom>
190
+
) : (
191
+
<div
192
+
dangerouslySetInnerHTML={{
193
+
__html: videoHTML,
194
+
}}
195
+
/>
196
+
)
183
197
) : isGIF ? (
184
198
<video
185
199
ref={videoRef}