added pinch zoom for image embeds

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "qortal-go",
-  "version": "0.3.3",
+  "version": "0.3.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "qortal-go",
-      "version": "0.3.3",
+      "version": "0.3.6",
       "dependencies": {
         "@capacitor/android": "^6.1.2",
         "@capacitor/app": "^6.0.1",
@@ -68,6 +68,7 @@
         "react-infinite-scroller": "^1.2.6",
         "react-intersection-observer": "^9.13.0",
         "react-qr-code": "^2.0.15",
+        "react-quick-pinch-zoom": "^5.1.0",
         "react-quill": "^2.0.0",
         "react-redux": "^9.1.2",
         "react-virtualized": "^9.22.5",
@@ -11960,6 +11961,30 @@
         "react": "*"
       }
     },
+    "node_modules/react-quick-pinch-zoom": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/react-quick-pinch-zoom/-/react-quick-pinch-zoom-5.1.0.tgz",
+      "integrity": "sha512-c8iOBrhbWwuJkUgbM0itkxhYHN3Zc15fvwYclo52scuicPidOuXJxwoVboNtccgtG24w33EhpuKVA7aLt93oSA==",
+      "dependencies": {
+        "tslib": ">=2.0.0"
+      },
+      "peerDependencies": {
+        "prop-types": ">=15.0.0",
+        "react": ">=16.4.0",
+        "react-dom": ">=16.4.0"
+      },
+      "peerDependenciesMeta": {
+        "prop-types": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-quill": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/react-quill/-/react-quill-2.0.0.tgz",

package.json

@@ -72,6 +72,7 @@
     "react-infinite-scroller": "^1.2.6",
     "react-intersection-observer": "^9.13.0",
     "react-qr-code": "^2.0.15",
+    "react-quick-pinch-zoom": "^5.1.0",
     "react-quill": "^2.0.0",
     "react-redux": "^9.1.2",
     "react-virtualized": "^9.22.5",

src/components/Embeds/ImageEmbed.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect,  useState } from "react";
+import React, { useCallback, useEffect,  useRef,  useState } from "react";
 import {
   Card,
   CardContent,
@@ -11,6 +11,8 @@ import {
   IconButton,
 
 } from "@mui/material";
+import QuickPinchZoom,  { make3dTransformValue } from "react-quick-pinch-zoom";
+
 
 import RefreshIcon from "@mui/icons-material/Refresh";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
@@ -179,16 +181,25 @@ export const ImageCard = ({
 
   export function ImageViewer({ src, alt = "" }) {
     const [isFullscreen, setIsFullscreen] = useState(false);
+    const imgRef = useRef(null);
   
     const handleOpenFullscreen = () => setIsFullscreen(true);
     const handleCloseFullscreen = () => setIsFullscreen(false);
   
+    const onUpdate = ({ x, y, scale }) => {
+      const img = imgRef.current;
+      if (img) {
+        const transformValue = make3dTransformValue({ x, y, scale });
+        img.style.transform = transformValue;
+      }
+    };
+  
+  
     return (
       <>
-        {/* Image in container */}
         <Box
           sx={{
-            maxWidth: "100%", // Prevent horizontal overflow
+            maxWidth: "100%",
             display: "flex",
             justifyContent: "center",
             cursor: "pointer",
@@ -200,7 +211,7 @@ export const ImageCard = ({
             alt={alt}
             style={{
               maxWidth: "100%",
-              maxHeight: "450px", // Adjust max height for small containers
+              maxHeight: "450px", 
               objectFit: "contain", // Preserve aspect ratio
             }}
           />
@@ -219,7 +230,7 @@ export const ImageCard = ({
               maxWidth: "100%",
               width: "100%",
               height: "100vh",
-              overflow: "hidden", // Prevent scrollbars
+              overflow: "hidden", 
             },
           }}
         >
@@ -228,10 +239,7 @@ export const ImageCard = ({
               position: "relative",
               width: "100%",
               height: "100%",
-              display: "flex",
+              backgroundColor: "#000", 
-              justifyContent: "center",
-              alignItems: "center",
-              backgroundColor: "#000", // Optional: dark background for fullscreen mode
             }}
           >
             {/* Close Button */}
@@ -243,21 +251,28 @@ export const ImageCard = ({
                 right: 8,
                 zIndex: 10,
                 color: "white",
+                background: 'rgb(29, 29, 29)',
+                borderRadius: '50%',
+                padding: '5px'
               }}
             >
               <CloseIcon />
             </IconButton>
   
-            {/* Fullscreen Image */}
+            {/* Fullscreen Image with Pinch-Zoom */}
+            <QuickPinchZoom onUpdate={onUpdate}>
               <img
+                ref={imgRef}
                 src={src}
                 alt={alt}
                 style={{
                   maxWidth: "100%",
                   maxHeight: "100%",
-                objectFit: "contain", // Preserve aspect ratio
+                  objectFit: "contain",
+                  touchAction: "none", // Allow gestures directly on the image
                 }}
               />
+            </QuickPinchZoom>
           </Box>
         </Dialog>
       </>