New feature experiment: pinch-zoom for images

This will probably be very buggy

package-lock.json

@@ -26,6 +26,7 @@
         "preact": "~10.13.1",
         "react-hotkeys-hook": "~4.3.8",
         "react-intersection-observer": "~9.4.3",
+        "react-quick-pinch-zoom": "~4.6.0",
         "react-router-dom": "6.6.2",
         "string-length": "~5.0.1",
         "swiped-events": "~1.1.7",
@@ -5814,6 +5815,27 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-quick-pinch-zoom": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/react-quick-pinch-zoom/-/react-quick-pinch-zoom-4.6.0.tgz",
+      "integrity": "sha512-M3woYVzWt8Kh6FCAytBtJJ4KC/5noG98GpI8ZTxTIE2sjR1XRPjV0NpFRhFgxPQpDvD+lkMp63sxP130uhafaw==",
+      "peerDependencies": {
+        "react": ">=16.4.0",
+        "react-dom": ">=16.4.0",
+        "tslib": ">=2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        },
+        "tslib": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-router": {
       "version": "6.6.2",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.2.tgz",
@@ -11072,6 +11094,12 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-quick-pinch-zoom": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/react-quick-pinch-zoom/-/react-quick-pinch-zoom-4.6.0.tgz",
+      "integrity": "sha512-M3woYVzWt8Kh6FCAytBtJJ4KC/5noG98GpI8ZTxTIE2sjR1XRPjV0NpFRhFgxPQpDvD+lkMp63sxP130uhafaw==",
+      "requires": {}
+    },
     "react-router": {
       "version": "6.6.2",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.2.tgz",

package.json

@@ -28,6 +28,7 @@
     "preact": "~10.13.1",
     "react-hotkeys-hook": "~4.3.8",
     "react-intersection-observer": "~9.4.3",
+    "react-quick-pinch-zoom": "~4.6.0",
     "react-router-dom": "6.6.2",
     "string-length": "~5.0.1",
     "swiped-events": "~1.1.7",

src/components/media-modal.jsx

@@ -93,7 +93,8 @@ function MediaModal({
         onClick={(e) => {
           if (
             e.target.classList.contains('carousel-item') ||
-            e.target.classList.contains('media')
+            e.target.classList.contains('media') ||
+            e.target.classList.contains('media-zoom')
           ) {
             onClose();
           }

src/components/media.jsx

@@ -1,5 +1,6 @@
 import { getBlurHashAverageColor } from 'fast-blurhash';
-import { useRef } from 'preact/hooks';
+import { useCallback, useRef, useState } from 'preact/hooks';
+import QuickPinchZoom, { make3dTransformValue } from 'react-quick-pinch-zoom';
 
 import Icon from './icon';
 import { formatDuration } from './status';
@@ -39,6 +40,19 @@ function Media({ media, showOriginal, autoAnimate, onClick = () => {} }) {
     focalBackgroundPosition = `${x.toFixed(0)}% ${y.toFixed(0)}%`;
   }
 
+  const imgRef = useRef();
+  const onUpdate = useCallback(({ x, y, scale }) => {
+    const { current: img } = imgRef;
+
+    if (img) {
+      const value = make3dTransformValue({ x, y, scale });
+
+      img.style.setProperty('transform', value);
+    }
+  }, []);
+
+  const [imageLoaded, setImageLoaded] = useState(false);
+
   if (type === 'image' || (type === 'unknown' && previewUrl && url)) {
     // Note: type: unknown might not have width/height
     return (
@@ -46,33 +60,55 @@ function Media({ media, showOriginal, autoAnimate, onClick = () => {} }) {
         class={`media media-image`}
         onClick={onClick}
         style={
-          showOriginal && {
+          showOriginal &&
+          !imageLoaded && {
             backgroundImage: `url(${previewUrl})`,
           }
         }
       >
-        <img
+        {showOriginal ? (
-          src={mediaURL}
+          <QuickPinchZoom
-          alt={description}
+            enabled={imageLoaded}
-          width={width}
+            draggableUnZoomed={false}
-          height={height}
+            inertiaFriction={0.9}
-          loading={showOriginal ? 'eager' : 'lazy'}
+            containerProps={{
-          style={
+              className: 'media-zoom',
-            !showOriginal && {
+              style: {
+                width: 'inherit',
+                height: 'inherit',
+              },
+            }}
+            onUpdate={onUpdate}
+          >
+            <img
+              ref={imgRef}
+              src={mediaURL}
+              alt={description}
+              width={width}
+              height={height}
+              loading="eager"
+              onLoad={(e) => {
+                setImageLoaded(true);
+              }}
+            />
+          </QuickPinchZoom>
+        ) : (
+          <img
+            src={mediaURL}
+            alt={description}
+            width={width}
+            height={height}
+            loading="lazy"
+            style={{
               backgroundColor:
                 rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`,
               backgroundPosition: focalBackgroundPosition || 'center',
-            }
+            }}
-          }
+            onLoad={(e) => {
-          onDblClick={() => {
+              setImageLoaded(true);
-            // Open original image in new tab
+            }}
-            window.open(url, '_blank');
+          />
-          }}
+        )}
-          onLoad={(e) => {
-            // Hide background image after image loads
-            e.target.parentElement.style.backgroundImage = 'none';
-          }}
-        />
       </div>
     );
   } else if (type === 'gifv' || type === 'video') {

src/components/status.css

@@ -668,6 +668,7 @@ body:has(#modal-container .carousel) .status .media img:hover {
   align-items: center;
   gap: 8px;
   font-size: 90%;
+  z-index: 1;
 }
 .carousel-item button.media-alt .media-alt-desc {
   overflow: hidden;