Web: Components: fixed hide image ui

packages/components/viewer/index.js

@@ -51,6 +51,8 @@ export const Viewer = (props) => {
   const [globalTimer, setGlobalTimer] = React.useState(null);
   const [init, setInit] = React.useState(false);
 
+  const [imageTimer, setImageTimer] = React.useState(null);
+
   const detailsContainerRef = React.useRef(null);
   const videoControls = React.useRef(null);
   const videoElement = React.useRef(null);
@@ -81,6 +83,7 @@ export const Viewer = (props) => {
     setPanelVisible(true);
     clearTimeout(timer);
     timer = setTimeout(() => setPanelVisible(false), 5000);
+    setImageTimer(timer);
   }
 
   const onTouch = (e, canTouch) => {
@@ -150,6 +153,7 @@ export const Viewer = (props) => {
       mobileDetails={mobileDetails}
       setIsOpenContextMenu={setIsOpenContextMenu}
       container={container}
+      imageTimer={imageTimer}
       onMaskClick={onMaskClick}
       setPanelVisible={setPanelVisible}
       generateContextMenu={generateContextMenu}

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

@@ -690,6 +690,7 @@ const ViewerBase = (props) => {
               {noToolbar || (
                 <ViewerToolbar
                   isMobileOnly={isMobileOnly}
+                  imageTimer={props.imageTimer}
                   prefixCls={prefixCls}
                   onAction={handleAction}
                   alt={activeImg.alt}

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

@@ -93,6 +93,7 @@ function deleteToolbarFromKey(toolbars, keys) {
 
 export default function ViewerToolbar(props) {
   function handleAction(config) {
+    clearTimeout(props.imageTimer);
     if (config.key === "percent") return props.onPercentClick();
     props.onAction(config);
   }