Web: Components: delete context menu when is preview file, added ontouch display ui for video player

packages/components/viewer/index.js

@@ -59,12 +59,17 @@ export const Viewer = (props) => {
   }, []);
 
   React.useEffect(() => {
-    document.addEventListener("mousemove", resetTimer);
-    return () => {
-      document.removeEventListener("mousemove", resetTimer);
-      clearTimeout(timer);
-      setPanelVisible(true);
-    };
+    document.addEventListener("touchstart", onTouch);
+    if (!isMobileOnly) {
+      document.addEventListener("mousemove", resetTimer);
+
+      return () => {
+        document.removeEventListener("mousemove", resetTimer);
+        clearTimeout(timer);
+        setPanelVisible(true);
+      };
+    }
+    return () => document.removeEventListener("touchstart", onTouch);
   }, []);
 
   function resetTimer() {
@@ -73,6 +78,12 @@ export const Viewer = (props) => {
     timer = setTimeout(() => setPanelVisible(false), 5000);
   }
 
+  const onTouch = (e) => {
+    if (e.target === videoElement.current) {
+      setPanelVisible((visible) => !visible);
+    }
+  };
+
   React.useEffect(() => {
     if (props.visible && !init) {
       setInit(true);
@@ -106,19 +117,25 @@ export const Viewer = (props) => {
       <Text fontSize="14px" color={"#fff"} className="title">
         {title}
       </Text>
-      <div className="details-context">
-        <MediaContextMenu className="mobile-context" onClick={onContextMenu} />
-        <ContextMenu
-          getContextModel={contextModel}
-          ref={cm}
-          withBackdrop={true}
-          header={contextMenuHeader}
-        />
-      </div>
+      {!props.isPreviewFile && (
+        <div className="details-context">
+          <MediaContextMenu
+            className="mobile-context"
+            onClick={onContextMenu}
+          />
+          <ContextMenu
+            getContextModel={contextModel}
+            ref={cm}
+            withBackdrop={true}
+            header={contextMenuHeader}
+          />
+        </div>
+      )}
     </StyledMobileDetails>
   );
 
   const displayUI = isAudio || panelVisible;
+  // const displayUI = true;
 
   const viewerPortal = ReactDOM.createPortal(
     <StyledViewer
@@ -144,6 +161,7 @@ export const Viewer = (props) => {
       displayUI={displayUI}
       title={title}
       onMaskClick={onMaskClick}
+      setPanelVisible={setPanelVisible}
       generateContextMenu={generateContextMenu}
       setIsFullScreen={setIsFullScreen}
       videoRef={videoElement}

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

@@ -50,6 +50,7 @@ const ViewerBase = (props) => {
     onNextClick,
     onPrevClick,
     onMaskClick,
+    isPreviewFile,
   } = props;
 
   const initialState = {
@@ -621,7 +622,7 @@ const ViewerBase = (props) => {
       }}
       ref={viewerCore}
     >
-      {isMobileOnly && mobileDetails}
+      {isMobileOnly && props.displayUI && mobileDetails}
       <div className={`${prefixCls}-mask`} style={{ zIndex: zIndex }} />
       <ViewerImage
         prefixCls={prefixCls}
@@ -679,6 +680,7 @@ const ViewerBase = (props) => {
                   height={state.imageHeight}
                   percent={state.percent}
                   attribute={attribute}
+                  isPreviewFile={isPreviewFile}
                   zoomable={zoomable}
                   rotatable={rotatable}
                   onPercentClick={onPercentClick}

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

@@ -274,10 +274,6 @@ const StyledVideoControls = styled.div`
     }
   }
 
-  .volume-container-audio {
-    margin-left: -2px;
-  }
-
   ${isMobileOnly &&
   css`
     height: 80px;
@@ -456,6 +452,7 @@ export default function ViewerPlayer(props) {
 
   const togglePlay = (e) => {
     e.stopPropagation();
+    if (e.target === videoRef.current && isMobileOnly) return;
     dispatch(
       createAction(ACTION_TYPES.update, {
         isPlaying: !state.isPlaying,
@@ -501,7 +498,7 @@ export default function ViewerPlayer(props) {
     );
   };
 
-  const toggleContext = () => {
+  const toggleContext = (e) => {
     dispatch(
       createAction(ACTION_TYPES.update, {
         isOpenContext: !state.isOpenContext,
@@ -686,7 +683,6 @@ export default function ViewerPlayer(props) {
     dispatch(
       createAction(ACTION_TYPES.update, {
         volumeSelection: false,
-        speedSelection: false,
         isOpenContext: false,
       })
     );
@@ -769,6 +765,14 @@ export default function ViewerPlayer(props) {
     });
   }, [props.activeIndex]);
 
+  React.useEffect(() => {
+    let timer;
+    if (isMobileOnly && videoRef.current && displayUI) {
+      clearTimeout(timer);
+      timer = setTimeout(() => props.setPanelVisible(false), 5000);
+    }
+  }, [displayUI]);
+
   let contextRight = 9;
   let contextBottom = 48;
   const contextMenu = generateContextMenu(
@@ -801,7 +805,7 @@ translateX(${state.left !== null ? state.left + "px" : "auto"}) translateY(${
       audio={isAudio.toString()}
     >
       <div className="video-backdrop" style={{ zIndex: 300 }} />
-      {isMobileOnly && mobileDetails}
+      {isMobileOnly && displayUI && mobileDetails}
       <div className="video-wrapper" onClick={onClose}>
         <div
           style={{
@@ -953,7 +957,7 @@ translateX(${state.left !== null ? state.left + "px" : "auto"}) translateY(${
                   </div>
                 )}
 
-                {!isMobileOnly && (
+                {!isMobileOnly && !props.isPreviewFile && (
                   <div
                     className="controller context-menu-wrapper"
                     onClick={toggleContext}

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

@@ -167,6 +167,13 @@ export default function ViewerToolbar(props) {
   if (!props.scalable) {
     toolbars = deleteToolbarFromKey(toolbars, ["scaleX", "scaleY"]);
   }
+
+  if (props.isPreviewFile) {
+    toolbars = deleteToolbarFromKey(toolbars, [
+      "context-menu",
+      "context-separator",
+    ]);
+  }
   // if (!props.downloadable) {
   //   toolbars = deleteToolbarFromKey(toolbars, ["download"]);
   // }