this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Make GIFs zoomable too

+58 -44
+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}