Web:Common:Components:MediaViewer:Sub-Components Refactoring and added ImageViewer

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

@@ -13,10 +13,9 @@ interface ViewerProps {
   inactive: boolean;
 
   audioIcon: string;
-  zoomSpeed: number;
   errorTitle: string;
   headerIcon: string;
-  customToolbar: () => ReturnType<typeof getCustomToolbar>;
+  toolbar: ReturnType<typeof getCustomToolbar>;
   playlistPos: number;
   archiveRoom: boolean;
   isPreviewFile: boolean;
@@ -27,8 +26,8 @@ interface ViewerProps {
   onDownloadClick: VoidFunction;
   generateContextMenu: (
     isOpen: boolean,
-    right: string,
-    bottom: string
+    right?: string,
+    bottom?: string
   ) => JSX.Element;
   onSetSelectionFile: VoidFunction;
 }

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

@@ -1,24 +1,20 @@
 import ReactDOM from "react-dom";
+import { isMobileOnly, isMobile } from "react-device-detect";
 import React, { useRef, useState, useEffect, useCallback } from "react";
-import { isMobileOnly } from "react-device-detect";
 
-import Text from "@docspace/components/text";
-import IconButton from "@docspace/components/icon-button";
 import ContextMenu from "@docspace/components/context-menu";
-
-import { StyledViewer } from "@docspace/components/viewer/styled-viewer";
 import ViewerPlayer from "@docspace/components/viewer/sub-components/viewer-player";
 
-import { ControlBtn, StyledViewerContainer } from "../../StyledComponents";
+import { StyledViewerContainer } from "../../StyledComponents";
 
-import MobileDetails from "../MobileDetails";
-import PrevButton from "../PrevButton";
 import NextButton from "../NextButton";
+import PrevButton from "../PrevButton";
+import ImageViewer from "../ImageViewer";
+import MobileDetails from "../MobileDetails";
+import DesktopDetails from "../DesktopDetails";
 
 import type ViewerProps from "./Viewer.props";
 
-import ViewerMediaCloseSvgUrl from "PUBLIC_DIR/images/viewer.media.close.svg?url";
-
 function Viewer(props: ViewerProps) {
   const timerIDRef = useRef<NodeJS.Timeout>();
 
@@ -49,20 +45,22 @@ function Viewer(props: ViewerProps) {
       return clearTimeout(timerIDRef.current);
   }, [isPlay, isOpenContextMenu, props.isImage]);
 
+  const resetToolbarVisibleTimer = () => {
+    setPanelVisible(true);
+    clearTimeout(timerIDRef.current);
+    timerIDRef.current = setTimeout(() => setPanelVisible(false), 2500);
+    setImageTimer(timerIDRef.current);
+  };
+
   useEffect(() => {
-    if (isMobileOnly) return;
+    if (isMobile) return;
 
-    const resetTimer = () => {
-      setPanelVisible(true);
-      clearTimeout(timerIDRef.current);
-      timerIDRef.current = setTimeout(() => setPanelVisible(false), 2500);
-      setImageTimer(timerIDRef.current);
-    };
-
-    document.addEventListener("mousemove", resetTimer, { passive: true });
+    document.addEventListener("mousemove", resetToolbarVisibleTimer, {
+      passive: true,
+    });
 
     return () => {
-      document.removeEventListener("mousemove", resetTimer);
+      document.removeEventListener("mousemove", resetToolbarVisibleTimer);
       clearTimeout(timerIDRef.current);
       setPanelVisible(true);
     };
@@ -108,15 +106,15 @@ function Viewer(props: ViewerProps) {
 
   const mobileDetails = (
     <MobileDetails
+      onHide={onHide}
       isError={isError}
       title={props.title}
-      icon={props.headerIcon}
-      contextModel={props.contextModel}
-      isPreviewFile={props.isPreviewFile}
-      onHide={onHide}
-      onContextMenu={onMobileContextMenu}
-      onMaskClick={props.onMaskClick}
       ref={contextMenuRef}
+      icon={props.headerIcon}
+      onMaskClick={props.onMaskClick}
+      contextModel={props.contextModel}
+      onContextMenu={onMobileContextMenu}
+      isPreviewFile={props.isPreviewFile}
     />
   );
 
@@ -127,38 +125,11 @@ function Viewer(props: ViewerProps) {
 
   return (
     <StyledViewerContainer visible={props.visible}>
-      {!isFullscreen && !isMobileOnly && displayUI && (
-        <div>
-          <div className="details">
-            <Text
-              isBold
-              fontSize="14px"
-              className="title"
-              title={undefined}
-              tag={undefined}
-              as={undefined}
-              fontWeight={undefined}
-              color={undefined}
-              textAlign={undefined}
-            >
-              {props.title}
-            </Text>
-            <ControlBtn
-              onClick={props.onMaskClick}
-              className="mediaPlayerClose"
-            >
-              <IconButton
-                color={"#fff"}
-                iconName={ViewerMediaCloseSvgUrl}
-                size={28}
-                isClickable
-              />
-            </ControlBtn>
-          </div>
-        </div>
+      {!isFullscreen && !isMobile && panelVisible && (
+        <DesktopDetails title={props.title} onMaskClick={props.onMaskClick} />
       )}
 
-      {props.playlist.length > 1 && !isFullscreen && displayUI && (
+      {props.playlist.length > 1 && !isFullscreen && !isMobile && (
         <>
           {isNotFirstElement && <PrevButton prevClick={prevClick} />}
           {isNotLastElement && <NextButton nextClick={nextClick} />}
@@ -167,16 +138,20 @@ function Viewer(props: ViewerProps) {
 
       {props.isImage
         ? ReactDOM.createPortal(
-            <StyledViewer
-              {...props}
-              displayUI={displayUI}
+            <ImageViewer
+              panelVisible={panelVisible}
+              toolbar={props.toolbar}
+              src={props.images[0].src}
               mobileDetails={mobileDetails}
-              setIsOpenContextMenu={setIsOpenContextMenu}
-              container={containerRef.current}
-              imageTimer={imageTimer}
-              onMaskClick={props.onMaskClick}
+              onMask={props.onMaskClick}
+              onPrev={props.onPrevClick}
+              onNext={props.onNextClick}
+              isLastImage={!isNotLastElement}
+              isFistImage={!isNotFirstElement}
               setPanelVisible={setPanelVisible}
               generateContextMenu={props.generateContextMenu}
+              setIsOpenContextMenu={setIsOpenContextMenu}
+              resetToolbarVisibleTimer={resetToolbarVisibleTimer}
             />,
             containerRef.current
           )

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

@@ -10,8 +10,6 @@ import { StyledDropDown } from "../StyledDropDown";
 import { StyledDropDownItem } from "../StyledDropDownItem";
 import ViewerWrapperProps from "./ViewerWrapper.props";
 
-const DefaultSpeedZoom = 0.25;
-
 function ViewerWrapper(props: ViewerWrapperProps) {
   const onClickContextItem = useCallback(
     (item: ContextMenuModel) => {
@@ -24,8 +22,8 @@ function ViewerWrapper(props: ViewerWrapperProps) {
 
   const generateContextMenu = (
     isOpen: boolean,
-    right: string,
-    bottom: string
+    right?: string,
+    bottom?: string
   ) => {
     const model = props.contextModel();
 
@@ -58,7 +56,7 @@ function ViewerWrapper(props: ViewerWrapperProps) {
     );
   };
 
-  const toolbars = useMemo(() => {
+  const toolbar = useMemo(() => {
     const {
       onDeleteClick,
       onDownloadClick,
@@ -97,10 +95,9 @@ function ViewerWrapper(props: ViewerWrapperProps) {
       playlist={props.playlist}
       inactive={props.inactive}
       audioIcon={props.audioIcon}
-      zoomSpeed={DefaultSpeedZoom}
       errorTitle={props.errorTitle}
       headerIcon={props.headerIcon}
-      customToolbar={() => toolbars}
+      toolbar={toolbar}
       playlistPos={props.playlistPos}
       archiveRoom={props.archiveRoom}
       isPreviewFile={props.isPreviewFile}