Web: fixed mode preview for images

packages/components/viewer/sub-components/mobile-viewer.js

@@ -258,7 +258,19 @@ function MobileViewer({
           lastTapTime.current = time;
           setTimeoutIDTap.current = setTimeout(() => {
             // onTap
-            setPanelVisible((visible) => !visible);
+
+            setPanelVisible((visible) => {
+              let display = visible;
+              const displayVisible =
+                JSON.parse(localStorage.getItem("displayVisible")) || null;
+
+              if (displayVisible !== null) {
+                display = !displayVisible;
+              }
+
+              localStorage.setItem("displayVisible", display);
+              return !visible;
+            });
           }, 300);
         }
       },

packages/components/viewer/sub-components/viewer-base.js

@@ -609,6 +609,7 @@ const ViewerBase = (props) => {
     activeImg = getActiveImage();
   }
 
+  const displayVisible = JSON.parse(localStorage.getItem("displayVisible"));
   return (
     <div
       className={className}
@@ -625,14 +626,14 @@ const ViewerBase = (props) => {
       }}
       ref={viewerCore}
     >
-      {isMobileOnly && props.displayUI && mobileDetails}
+      {isMobileOnly && displayVisible !== "true" && mobileDetails}
       <div
         className={`${prefixCls}-mask`}
         style={{
           zIndex: zIndex,
           backgroundColor: `${
             isMobileOnly
-              ? props.displayUI
+              ? !displayVisible
                 ? "rgba(55,55,55,0.6)"
                 : "#000"
               : "rgba(55,55,55,0.6)"

packages/components/viewer/sub-components/viewer-player.js

@@ -816,6 +816,8 @@ export default function ViewerPlayer(props) {
 
     setPanelVisible(true);
 
+    localStorage.setItem("displayVisible", false);
+
     const [width, height, left, top] = getVideoPosition(video);
     dispatch(
       createAction(ACTION_TYPES.update, {