Web: Components: added on tap ui disable for image viewer

packages/components/viewer/index.js

@@ -135,7 +135,6 @@ export const Viewer = (props) => {
   );
 
   const displayUI = isAudio || panelVisible;
-  // const displayUI = true;
 
   const viewerPortal = ReactDOM.createPortal(
     <StyledViewer
@@ -144,6 +143,7 @@ export const Viewer = (props) => {
       mobileDetails={mobileDetails}
       container={container}
       onMaskClick={onMaskClick}
+      setPanelVisible={setPanelVisible}
       generateContextMenu={generateContextMenu}
     />,
     container

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

@@ -239,6 +239,7 @@ const ViewerBase = (props) => {
         scaleX = state.scaleX;
         scaleY = state.scaleY;
       }
+      props.setPanelVisible(true);
       dispatch(
         createAction(ACTION_TYPES.update, {
           width: width,
@@ -623,7 +624,13 @@ const ViewerBase = (props) => {
       ref={viewerCore}
     >
       {isMobileOnly && props.displayUI && mobileDetails}
-      <div className={`${prefixCls}-mask`} style={{ zIndex: zIndex }} />
+      <div
+        className={`${prefixCls}-mask`}
+        style={{
+          zIndex: zIndex,
+          backgroundColor: `${props.displayUI ? "transparent" : "#000"}`,
+        }}
+      />
       <ViewerImage
         prefixCls={prefixCls}
         imgSrc={
@@ -641,6 +648,7 @@ const ViewerBase = (props) => {
         currentTop={currentTop}
         opacity={state.opacity}
         getImageCenterXY={getImageCenterXY}
+        setPanelVisible={props.setPanelVisible}
         handleZoom={handleZoom}
         handleResetZoom={handleResetZoom}
         height={state.height}

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

@@ -12,6 +12,7 @@ export default function ViewerImage(props) {
     playlist,
     playlistPos,
     containerSize,
+    setPanelVisible,
   } = props;
   const navMenuHeight = 53;
   const isMouseDown = React.useRef(false);
@@ -221,6 +222,9 @@ export default function ViewerImage(props) {
         return;
       if (e.deltaY > 70) props.onMaskClick();
     },
+    onTap: (e) => {
+      setPanelVisible((visible) => !visible);
+    },
     onSwiped: () => {
       console.log("onTouchEndOrOnMouseUp");
       let Point = {