feat: allow mobile user zooming in image preview (#3880)

* Set viewport scalable in image preview dialog for mobile zooming and reset it on destroy

* Format with prettier

* move setViewportScalable() into useEffect

* use const instead of function

web/src/components/PreviewImageDialog.tsx

@@ -1,5 +1,5 @@
 import { XIcon } from "lucide-react";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { generateDialog } from "./Dialog";
 import "@/less/preview-image-dialog.less";
 
@@ -31,7 +31,7 @@ const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrls, initialIndex }:
   let endX = -1;
 
   const handleCloseBtnClick = () => {
-    destroy();
+    destroyAndResetViewport();
   };
 
   const handleTouchStart = (event: React.TouchEvent) => {
@@ -73,7 +73,7 @@ const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrls, initialIndex }:
       setState(defaultState);
       setCurrentIndex(currentIndex - 1);
     } else {
-      destroy();
+      destroyAndResetViewport();
     }
   };
 
@@ -82,7 +82,7 @@ const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrls, initialIndex }:
       setState(defaultState);
       setCurrentIndex(currentIndex + 1);
     } else {
-      destroy();
+      destroyAndResetViewport();
     }
   };
 
@@ -107,11 +107,36 @@ const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrls, initialIndex }:
     });
   };
 
+  const setViewportScalable = () => {
+    const viewport = document.querySelector("meta[name=viewport]");
+    if (viewport) {
+      const contentAttrs = viewport.getAttribute("content");
+      if (contentAttrs) {
+        viewport.setAttribute("content", contentAttrs.replace("user-scalable=no", "user-scalable=yes"));
+      }
+    }
+  };
+
+  const destroyAndResetViewport = () => {
+    const viewport = document.querySelector("meta[name=viewport]");
+    if (viewport) {
+      const contentAttrs = viewport.getAttribute("content");
+      if (contentAttrs) {
+        viewport.setAttribute("content", contentAttrs.replace("user-scalable=yes", "user-scalable=no"));
+      }
+    }
+    destroy();
+  };
+
   const imageComputedStyle = {
     transform: `scale(${state.scale})`,
     transformOrigin: `${state.originX === -1 ? "center" : `${state.originX}px`} ${state.originY === -1 ? "center" : `${state.originY}px`}`,
   };
 
+  useEffect(() => {
+    setViewportScalable();
+  }, []);
+
   return (
     <>
       <div className="btns-container">