Merge branch 'develop' into bugfix/trash-room-title

packages/common/components/MediaViewer/index.tsx

@@ -1,4 +1,4 @@
-import { isMobileOnly } from "react-device-detect";
+import { isMobile } from "react-device-detect";
 import React, { useState, useCallback, useMemo, useEffect } from "react";
 
 import ViewerWrapper from "./sub-components/ViewerWrapper";
@@ -229,9 +229,9 @@ function MediaViewer({
       },
     ];
 
-    return isMobileOnly
+    return isMobile
       ? model
-      : isImage && !isMobileOnly
+      : isImage && !isMobile
       ? desktopModel.filter((el) => el.key !== "download")
       : desktopModel;
   };

packages/components/viewer/index.js

@@ -11,7 +11,7 @@ import ControlBtn from "./sub-components/control-btn";
 import Text from "@docspace/components/text";
 import IconButton from "@docspace/components/icon-button";
 
-import { isMobileOnly } from "react-device-detect";
+import { isMobile } from "react-device-detect";
 
 import ViewerMediaCloseSvgUrl from "PUBLIC_DIR/images/viewer.media.close.svg?url";
 import MediaNextIcon from "PUBLIC_DIR/images/viewer.next.react.svg";
@@ -70,7 +70,7 @@ export const Viewer = (props) => {
     if ((!isPlay || isOpenContextMenu) && (!isImage || isOpenContextMenu))
       return clearTimeout(timer);
     document.addEventListener("touchstart", onTouch);
-    if (!isMobileOnly) {
+    if (!isMobile) {
       document.addEventListener("mousemove", resetTimer);
 
       return () => {
@@ -157,7 +157,7 @@ export const Viewer = (props) => {
     </StyledMobileDetails>
   );
 
-  const displayUI = (isMobileOnly && isAudio) || panelVisible;
+  const displayUI = (isMobile && isAudio) || panelVisible;
 
   const viewerPortal = ReactDOM.createPortal(
     <StyledViewer
@@ -207,7 +207,7 @@ export const Viewer = (props) => {
 
   return (
     <StyledViewerContainer visible={visible}>
-      {!isFullscreen && !isMobileOnly && displayUI && (
+      {!isFullscreen && !isMobile && displayUI && (
         <div>
           <div className="details" ref={detailsContainerRef}>
             <Text isBold fontSize="14px" className="title">
@@ -228,7 +228,7 @@ export const Viewer = (props) => {
         </div>
       )}
 
-      {playlist.length > 1 && !isFullscreen && displayUI && (
+      {playlist.length > 1 && !isFullscreen && displayUI && !isMobile && (
         <>
           {playlistPos !== 0 && (
             <StyledSwitchToolbar left onClick={prevClick}>

packages/components/viewer/sub-components/media-error.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import styled from "styled-components";
 import Text from "@docspace/components/text";
-import { isMobileOnly } from "react-device-detect";
+import { isMobile } from "react-device-detect";
 import { ReactSVG } from "react-svg";
 
 const StyledMediaError = styled.div`
@@ -54,7 +54,7 @@ export const MediaError = ({
   let errorLeft = (window.innerWidth - width) / 2 + "px";
   let errorTop = (window.innerHeight - height) / 2 + "px";
 
-  const items = !isMobileOnly
+  const items = !isMobile
     ? model.filter((el) => el.key !== "rename")
     : model.filter((el) => el.key === "delete" || el.key === "download");
 

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

@@ -56,14 +56,14 @@ function MobileViewer({
     api.start({ ...point });
   }, [left, top]);
 
-  React.useEffect(()=>{
+  React.useEffect(() => {
     api.set({
       width,
       height,
-      x:left,
-      y:top,
-    })
-  },[height, width])
+      x: left,
+      y: top,
+    });
+  }, [height, width]);
 
   React.useEffect(() => {
     unmountRef.current = false;
@@ -321,6 +321,7 @@ function MobileViewer({
         }
       },
     },
+
     {
       drag: {
         from: () => [style.x.get(), style.y.get()],

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

@@ -2,7 +2,7 @@ import * as React from "react";
 import ViewerImage from "./viewer-image";
 import classnames from "classnames";
 import ViewerToolbar, { defaultToolbars } from "./viewer-toolbar";
-import { isMobileOnly } from "react-device-detect";
+import { isMobile } from "react-device-detect";
 import Icon, { ActionType } from "./icon";
 
 const ACTION_TYPES = {
@@ -219,13 +219,12 @@ const ViewerBase = (props) => {
 
     if (imageRef.current) {
       //abort previous image request
-      imageRef.current.src = ""
+      imageRef.current.src = "";
     }
 
-
     let loadComplete = false;
     let img = new Image();
-    imageRef.current = img
+    imageRef.current = img;
     img.src = activeImage.src;
 
     img.onload = () => {
@@ -455,7 +454,9 @@ const ViewerBase = (props) => {
       document[funcName]("keydown", handleKeydown, true);
     }
     if (viewerCore.current) {
-      viewerCore.current[funcName]("wheel", handleMouseScroll, {passive: true});
+      viewerCore.current[funcName]("wheel", handleMouseScroll, {
+        passive: true,
+      });
     }
   }
 
@@ -654,17 +655,18 @@ const ViewerBase = (props) => {
       }}
       ref={viewerCore}
     >
-      {isMobileOnly && !displayVisible && mobileDetails}
+      {isMobile && !displayVisible && mobileDetails}
       <div
         className={`${prefixCls}-mask`}
         style={{
           zIndex: zIndex,
-          backgroundColor: `${isMobileOnly
+          backgroundColor: `${
+            isMobile
               ? !displayVisible
                 ? "rgba(55,55,55,0.6)"
                 : "#000"
               : "rgba(55,55,55,0.6)"
-            }`,
+          }`,
         }}
       />
       <ViewerImage
@@ -708,7 +710,7 @@ const ViewerBase = (props) => {
         container={props.container}
       />
       {props.noFooter ||
-        (!isMobileOnly && props.displayUI && (
+        (!isMobile && props.displayUI && (
           <div className={`${prefixCls}-container`}>
             <div
               className={`${prefixCls}-footer`}
@@ -716,7 +718,7 @@ const ViewerBase = (props) => {
             >
               {noToolbar || (
                 <ViewerToolbar
-                  isMobileOnly={isMobileOnly}
+                  isMobileOnly={isMobile}
                   imageTimer={props.imageTimer}
                   prefixCls={prefixCls}
                   onAction={handleAction}

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

@@ -2,7 +2,7 @@ import * as React from "react";
 import classnames from "classnames";
 import ViewerLoading from "./viewer-loading";
 import { useSwipeable } from "../../react-swipeable";
-import { isMobileOnly } from "react-device-detect";
+import { isIOS, isMobile } from "react-device-detect";
 
 import MobileViewer from "./mobile-viewer";
 function ViewerImage(props) {
@@ -375,7 +375,11 @@ function ViewerImage(props) {
   }
 
   function onClose(e) {
-    if (e.target === imgRef.current || e.nativeEvent.pointerType === "touch")
+    if (
+      e.target === imgRef.current ||
+      e.nativeEvent.pointerType === "touch" ||
+      e.type === "touchend"
+    )
       return;
     props.onMaskClick();
   }
@@ -422,7 +426,7 @@ translateX(${props.left !== null ? props.left + "px" : "auto"}) translateY(${
   let imgNode = null;
 
   if (props.imgSrc !== "") {
-    imgNode = isMobileOnly ? (
+    imgNode = isMobile ? (
       <MobileViewer
         className={imgClass}
         src={props.imgSrc}
@@ -462,12 +466,14 @@ translateX(${props.left !== null ? props.left + "px" : "auto"}) translateY(${
     );
   }
 
-  if (isMobileOnly) {
+  if (isMobile) {
+    const events = isIOS ? { onTouchEnd: onClose } : { onClick: onClose };
+
     return (
       <div
         className={`${props.prefixCls}-canvas`}
-        onClick={onClose}
         style={styleIndex}
+        {...events}
       >
         {imgNode}
       </div>