MediaViewer Apply new breakpoints and fixed import

packages/common/components/MediaViewer/index.tsx

@@ -1,4 +1,3 @@
-import { isMobile } from "react-device-detect";
 import React, {
   useState,
   useCallback,
@@ -7,25 +6,29 @@ import React, {
   useRef,
 } from "react";
 
-import ViewerWrapper from "./sub-components/ViewerWrapper";
+import {
+  isMobile as isMobileUtils,
+  isTablet,
+} from "@docspace/components/utils/device";
+
+import { FileStatus } from "../../constants";
+import { getFileExtension } from "../../utils";
+import { checkDialogsOpen } from "../../utils/checkDialogsOpen";
 
-import { MediaViewerProps } from "./MediaViewer.props";
-import { FileStatus } from "@docspace/common/constants";
 import {
   isNullOrUndefined,
   KeyboardEventKeys,
   mapSupplied,
   mediaTypes,
 } from "./helpers";
-import { getFileExtension } from "@docspace/common/utils";
-
 import {
   getDesktopMediaContextModel,
   getMobileMediaContextModel,
   getPDFContextModel,
 } from "./helpers/contextModel";
+import ViewerWrapper from "./sub-components/ViewerWrapper";
 
-import { checkDialogsOpen } from "../../utils/checkDialogsOpen";
+import type { MediaViewerProps } from "./MediaViewer.props";
 
 function MediaViewer({
   playlistPos,
@@ -244,6 +247,8 @@ function MediaViewer({
       });
     }
 
+    const isMobile = isMobileUtils() || isTablet();
+
     return isMobile
       ? model
       : isImage && !isMobile

packages/common/components/MediaViewer/sub-components/ImageViewer/ImageViewer.props.ts

@@ -1,6 +1,6 @@
-import { Dispatch, SetStateAction } from "react";
+import type { Dispatch, SetStateAction } from "react";
 import { getCustomToolbar } from "../../helpers/getCustomToolbar";
-import { ContextMenuModel } from "../../types";
+import type { ContextMenuModel, DevicesType } from "../../types";
 
 interface ImageViewerProps {
   src?: string;
@@ -14,6 +14,7 @@ interface ImageViewerProps {
   panelVisible: boolean;
   mobileDetails: JSX.Element;
   toolbar: ReturnType<typeof getCustomToolbar>;
+  devices: DevicesType;
 
   onPrev: VoidFunction;
   onNext: VoidFunction;

packages/common/components/MediaViewer/sub-components/ImageViewer/index.tsx

@@ -1,5 +1,5 @@
 import { useGesture } from "@use-gesture/react";
-import { isMobile, isDesktop } from "react-device-detect";
+import { isDesktop as isDesktopDeviceDetect } from "react-device-detect";
 import { useSpring, config } from "@react-spring/web";
 import React, { SyntheticEvent, useEffect, useRef, useState } from "react";
 
@@ -55,6 +55,7 @@ function ImageViewer({
   isTiff,
   contextModel,
   errorTitle,
+  devices,
 }: ImageViewerProps) {
   const imgRef = useRef<HTMLImageElement>(null);
   const imgWrapperRef = useRef<HTMLDivElement>(null);
@@ -84,6 +85,8 @@ function ImageViewer({
     opacity: 1,
   }));
 
+  const { isMobile, isDesktop } = devices;
+
   useEffect(() => {
     unmountRef.current = false;
 
@@ -846,10 +849,15 @@ function ImageViewer({
       },
 
       onClick: ({ pinching, event }) => {
-        if (isDesktop && event.target === imgWrapperRef.current)
+        if (isDesktopDeviceDetect && event.target === imgWrapperRef.current)
           return onMask();
 
-        if (!imgRef.current || !containerRef.current || pinching || isDesktop)
+        if (
+          !imgRef.current ||
+          !containerRef.current ||
+          pinching ||
+          isDesktopDeviceDetect
+        )
           return;
 
         const time = new Date().getTime();
@@ -1030,7 +1038,7 @@ function ImageViewer({
         </ImageWrapper>
       </ImageViewerContainer>
 
-      {isDesktop && panelVisible && !isError && (
+      {isDesktop && !isMobile && panelVisible && !isError && (
         <ImageViewerToolbar
           ref={toolbarRef}
           toolbar={toolbar}

packages/common/components/MediaViewer/sub-components/PDFViewer/PDFViewer.props.ts

@@ -1,5 +1,6 @@
-import { Dispatch, SetStateAction } from "react";
+import type { Dispatch, SetStateAction } from "react";
 import { getPDFToolbar } from "./../../helpers/getCustomToolbar";
+import type { DevicesType } from "../../types";
 interface PDFViewerProps {
   src: string;
   title: string;
@@ -9,6 +10,7 @@ interface PDFViewerProps {
 
   isLastImage: boolean;
   isFistImage: boolean;
+  devices: DevicesType;
 
   onMask: VoidFunction;
   generateContextMenu: (

packages/common/components/MediaViewer/sub-components/PlayerMessageError/PlayerMessageError.props.ts

@@ -3,6 +3,7 @@ interface PlayerMessageErrorProps {
   errorTitle: string;
   model: ContextMenuModel[];
   onMaskClick: VoidFunction;
+  isMobile: boolean;
 }
 
 export default PlayerMessageErrorProps;

packages/common/components/MediaViewer/sub-components/PlayerMessageError/index.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { isMobile } from "react-device-detect";
 import { ReactSVG } from "react-svg";
 
 import Text from "@docspace/components/text";
@@ -11,8 +10,9 @@ import {
 import { isSeparator } from "../../helpers";
 
 function PlayerMessageError({
-  errorTitle,
   model,
+  isMobile,
+  errorTitle,
   onMaskClick,
 }: PlayerMessageErrorProps) {
   const items = !isMobile

packages/common/components/MediaViewer/sub-components/PlayerSpeedControl/index.tsx

@@ -28,12 +28,10 @@ function PlayerSpeedControl({
 
   const timerRef = useRef<NodeJS.Timeout>();
 
-  const [currentIndexSpeed, setCurrentIndexSpeed] = useState<number>(
-    DefaultIndexSpeed
-  );
-  const [isOpenSpeedContextMenu, setIsOpenSpeedContextMenu] = useState<boolean>(
-    false
-  );
+  const [currentIndexSpeed, setCurrentIndexSpeed] =
+    useState<number>(DefaultIndexSpeed);
+  const [isOpenSpeedContextMenu, setIsOpenSpeedContextMenu] =
+    useState<boolean>(false);
   const [speedToastVisible, setSpeedToastVisible] = useState<boolean>(false);
 
   useEffect(() => {

packages/common/components/MediaViewer/sub-components/PlayerTimeline/PlayerTimeline.styled.ts

@@ -1,6 +1,7 @@
-import { isMobile } from "react-device-detect";
 import styled, { css } from "styled-components";
 
+import { tablet } from "@docspace/components/utils/device";
+
 export const HoverProgress = styled.div`
   display: none;
   position: absolute;
@@ -177,5 +178,7 @@ export const PlayerTimelineWrapper = styled.div`
     }
   }
 
-  ${isMobile && mobileCss}
+  @media ${tablet} {
+    ${mobileCss}
+  }
 `;

packages/common/components/MediaViewer/sub-components/PlayerVolumeControl/PlayerVolumeControl.styled.ts

@@ -1,7 +1,7 @@
-import { tablet } from "@docspace/components/utils/device";
-import { isMobile } from "react-device-detect";
 import styled, { css } from "styled-components";
 
+import { tablet } from "@docspace/components/utils/device";
+
 export const PlayerVolumeControlWrapper = styled.div`
   display: flex;
   align-items: center;
@@ -143,5 +143,7 @@ export const VolumeWrapper = styled.div`
     }
   }
 
-  ${isMobile && mobilecss}
+  @media ${tablet} {
+    ${mobilecss}
+  }
 `;

packages/common/components/MediaViewer/sub-components/Viewer/Viewer.props.ts

@@ -32,6 +32,8 @@ interface ViewerProps {
     bottom?: string
   ) => JSX.Element;
   onSetSelectionFile: VoidFunction;
+
+  currentDeviceType?: string;
 }
 
 export default ViewerProps;

packages/common/components/MediaViewer/sub-components/Viewer/index.tsx

@@ -1,7 +1,14 @@
 import ReactDOM from "react-dom";
-import { isMobile } from "react-device-detect";
-import React, { useRef, useState, useEffect, useCallback } from "react";
+import { inject, observer } from "mobx-react";
+import React, {
+  useRef,
+  useState,
+  useEffect,
+  useCallback,
+  useMemo,
+} from "react";
 
+import { DeviceType } from "../../../../constants";
 import { StyledViewerContainer } from "../../StyledComponents";
 
 import NextButton from "../NextButton";
@@ -33,6 +40,19 @@ function Viewer(props: ViewerProps) {
   const contextMenuRef = useRef<{ show: (e: any) => void }>(null);
 
   const [isFullscreen, setIsFullScreen] = useState<boolean>(false);
+
+  const devices = useMemo(
+    () => ({
+      isMobileOnly: props.currentDeviceType === DeviceType.mobile,
+      isMobile:
+        props.currentDeviceType === DeviceType.tablet ||
+        props.currentDeviceType === DeviceType.mobile,
+      isDesktop: props.currentDeviceType === DeviceType.desktop,
+    }),
+    [props.currentDeviceType]
+  );
+  const { isMobile } = devices;
+
   useEffect(() => {
     document.body.appendChild(containerRef.current);
     containerRef.current.style.direction = "ltr";
@@ -61,7 +81,7 @@ function Viewer(props: ViewerProps) {
       clearTimeout(timerIDRef.current);
       setPanelVisible(true);
     };
-  }, [setImageTimer, setPanelVisible]);
+  }, [setImageTimer, setPanelVisible, isMobile]);
 
   const resetToolbarVisibleTimer = () => {
     if (panelToolbarRef.current) return;
@@ -210,6 +230,7 @@ function Viewer(props: ViewerProps) {
               resetToolbarVisibleTimer={resetToolbarVisibleTimer}
               contextModel={props.contextModel}
               errorTitle={props.errorTitle}
+              devices={devices}
             />,
             containerRef.current
           )
@@ -243,6 +264,7 @@ function Viewer(props: ViewerProps) {
               removeToolbarVisibleTimer={removeToolbarVisibleTimer}
               removePanelVisibleTimeout={removePanelVisibleTimeout}
               restartToolbarVisibleTimer={restartToolbarVisibleTimer}
+              devices={devices}
             />,
             containerRef.current
           )
@@ -262,6 +284,7 @@ function Viewer(props: ViewerProps) {
               isFistImage={!isNotFirstElement}
               onPrev={props.onPrevClick}
               onNext={props.onNextClick}
+              devices={devices}
             />,
             containerRef.current
           )}
@@ -269,4 +292,8 @@ function Viewer(props: ViewerProps) {
   );
 }
 
-export default Viewer;
+export default inject<any>(({ auth }) => {
+  const { currentDeviceType } = auth.settingsStore;
+
+  return { currentDeviceType };
+})(observer(Viewer));

packages/common/components/MediaViewer/sub-components/ViewerPlayer/ViewerPlayer.props.ts

@@ -1,4 +1,4 @@
-import { ContextMenuModel } from "../../types";
+import type { ContextMenuModel, DevicesType } from "../../types";
 
 interface ViewerPlayerProps {
   src?: string;
@@ -16,6 +16,7 @@ interface ViewerPlayerProps {
   isOpenContextMenu: boolean;
   mobileDetails: JSX.Element;
   thumbnailSrc?: string;
+  devices: DevicesType;
   onMask: VoidFunction;
   onPrev: VoidFunction;
   onNext: VoidFunction;

packages/common/components/MediaViewer/sub-components/ViewerPlayer/ViewerPlayer.styled.ts

@@ -1,7 +1,8 @@
-import { isMobile, isMobileOnly } from "react-device-detect";
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import { animated } from "@react-spring/web";
 
+import { tablet, mobile } from "@docspace/components/utils/device";
+
 export const ContainerPlayer = styled.div<{ $isFullScreen: boolean }>`
   position: fixed;
   inset: 0;
@@ -30,11 +31,6 @@ export const VideoWrapper = styled(animated.div)<{ $visible: boolean }>`
   }
 `;
 
-const StyledMobilePlayerControls = css`
-  background-color: rgba(0, 0, 0, 0.8);
-  height: 80px;
-`;
-
 export const StyledPlayerControls = styled.div<{ $isShow: boolean }>`
   position: fixed;
   right: 0px;
@@ -55,7 +51,10 @@ export const StyledPlayerControls = styled.div<{ $isShow: boolean }>`
     rgba(0, 0, 0, 0.89) 100%
   );
 
-  ${isMobile && StyledMobilePlayerControls}
+  @media ${tablet} {
+    background-color: rgba(0, 0, 0, 0.8);
+    height: 80px;
+  }
 `;
 
 export const ControlContainer = styled.div`
@@ -71,13 +70,12 @@ export const ControlContainer = styled.div`
     justify-content: space-between;
   }
 
-  ${isMobile &&
-  css`
+  @media ${tablet} {
     margin-top: 8px;
     .player_right-control {
       margin-right: -8px;
     }
-  `}
+  }
 `;
 
 export const PlayerControlsWrapper = styled.div`
@@ -85,13 +83,11 @@ export const PlayerControlsWrapper = styled.div`
   width: 100%;
   margin-top: 80px;
 
-  ${isMobile &&
-  css`
+  @media ${tablet} {
     margin-top: 0px;
-  `}
+  }
 
-  ${isMobileOnly &&
-  css`
+  @media ${mobile} {
     padding: 0 15px;
-  `}
+  }
 `;

packages/common/components/MediaViewer/sub-components/ViewerPlayer/index.tsx

@@ -1,7 +1,11 @@
 import lodash from "lodash";
 import { useGesture } from "@use-gesture/react";
 import { useSpring, animated } from "@react-spring/web";
-import { isMobile, isDesktop, isIOS, isMobileOnly } from "react-device-detect";
+import {
+  isDesktop as isDesktopDeviceDetect,
+  isIOS,
+  isMobileOnly,
+} from "react-device-detect";
 import React, {
   useCallback,
   useEffect,
@@ -42,6 +46,7 @@ function ViewerPlayer({
   isAudio,
   isVideo,
   isError,
+  devices,
   audioIcon,
   errorTitle,
   isLastImage,
@@ -72,6 +77,8 @@ function ViewerPlayer({
 
   const isDurationInfinityRef = useRef<boolean>(false);
 
+  const { isDesktop, isMobile } = devices;
+
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [isPlaying, setIsPlaying] = useState<boolean>(false);
   const [isWaiting, setIsWaiting] = useState<boolean>(false);
@@ -232,7 +239,8 @@ function ViewerPlayer({
         });
       },
       onClick: ({ dragging, event }) => {
-        if (isDesktop && event.target === containerRef.current) return onMask();
+        if (isDesktopDeviceDetect && event.target === containerRef.current)
+          return onMask();
 
         if (
           dragging ||
@@ -385,7 +393,7 @@ function ViewerPlayer({
       videoRef.current.play();
       setIsPlaying(true);
     }
-  }, [isPlaying, isVideo]);
+  }, [isPlaying, isVideo, isMobile]);
 
   const handleBigPlayButtonClick = () => {
     togglePlay();
@@ -612,6 +620,7 @@ function ViewerPlayer({
           model={model}
           onMaskClick={onMask}
           errorTitle={errorTitle}
+          isMobile={isMobile}
         />
       ) : (
         <StyledPlayerControls

packages/common/components/MediaViewer/sub-components/ViewerWrapper/index.tsx

@@ -1,5 +1,6 @@
-import React, { useMemo, memo, useCallback } from "react";
 import equal from "fast-deep-equal/react";
+import { useTheme } from "styled-components";
+import React, { useMemo, memo, useCallback } from "react";
 
 import Viewer from "../Viewer";
 import { isSeparator } from "../../helpers";
@@ -12,7 +13,6 @@ import { ContextMenuModel } from "../../types";
 import { StyledDropDown } from "../StyledDropDown";
 import { StyledDropDownItem } from "../StyledDropDownItem";
 import ViewerWrapperProps from "./ViewerWrapper.props";
-import { useTheme } from "styled-components";
 
 function ViewerWrapper(props: ViewerWrapperProps) {
   const { interfaceDirection } = useTheme();

packages/common/components/MediaViewer/types/index.ts

@@ -17,6 +17,12 @@ export type NumberOrString = number | string;
 
 export type NullOrUndefined = null | undefined;
 
+export type DevicesType = {
+  isMobile: boolean;
+  isMobileOnly: boolean;
+  isDesktop: boolean;
+};
+
 export type PlaylistType = {
   id: number;
   canShare: boolean;