Web:MediaViewer Added hot keys

packages/client/src/pages/Home/MediaViewer/index.js

@@ -56,6 +56,7 @@ const FilesMediaViewer = (props) => {
     activeFiles,
     activeFolders,
     onClickDownloadAs,
+    someDialogIsOpen,
   } = props;
 
   const navigate = useNavigate();
@@ -193,6 +194,7 @@ const FilesMediaViewer = (props) => {
       <MediaViewer
         t={t}
         userAccess={userAccess}
+        someDialogIsOpen={someDialogIsOpen}
         currentFileId={currentMediaFileId}
         visible={visible}
         playlist={playlist}
@@ -311,6 +313,7 @@ export default inject(
       extsMediaPreviewed,
       setRemoveMediaItem: dialogsStore.setRemoveMediaItem,
       deleteDialogVisible: dialogsStore.deleteDialogVisible,
+      someDialogIsOpen: dialogsStore.someDialogIsOpen,
       fetchFiles,
       previewFile,
       setIsLoading,

packages/common/components/MediaViewer/MediaViewer.props.ts

@@ -17,6 +17,8 @@ export interface MediaViewerProps {
   extsMediaPreviewed: string[];
   extsImagePreviewed: string[];
 
+  someDialogIsOpen: boolean;
+
   deleteDialogVisible: boolean;
   errorLabel: string;
   isPreviewFile: boolean;

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

@@ -1,4 +1,4 @@
-import {
+import type {
   ContextMenuModel,
   NullOrUndefined,
   PlaylistType,
@@ -22,6 +22,11 @@ export enum KeyboardEventKeys {
   KeyS = "KeyS",
   Numpad1 = "Numpad1",
   Digit1 = "Digit1",
+
+  NumpadAdd = "NumpadAdd",
+  NumpadSubtract = "NumpadSubtract",
+  Equal = "Equal",
+  Minus = "Minus",
 }
 
 export enum ToolbarActionType {

packages/common/components/MediaViewer/index.tsx

@@ -137,6 +137,7 @@ function MediaViewer({
     props.files.length,
     playlistPos,
     props.deleteDialogVisible,
+    props.someDialogIsOpen,
   ]);
 
   const getContextModel = () => {
@@ -256,7 +257,7 @@ function MediaViewer({
 
   const onKeydown = (event: KeyboardEvent) => {
     const { code, ctrlKey } = event;
-    if (props.deleteDialogVisible) return;
+    if (props.deleteDialogVisible || props.someDialogIsOpen) return;
 
     if (code in KeyboardEventKeys) {
       const includesKeyboardCode = [
@@ -396,6 +397,7 @@ function MediaViewer({
           errorTitle={props.t("Common:MediaError")}
           headerIcon={headerIcon}
           audioIcon={audioIcon}
+          someDialogIsOpen={props.someDialogIsOpen}
         />
       )}
     </>

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

@@ -12,6 +12,7 @@ interface ImageViewerProps {
   isFistImage: boolean;
   isLastImage: boolean;
   panelVisible: boolean;
+  someDialogIsOpen: boolean;
   mobileDetails: JSX.Element;
   toolbar: ReturnType<typeof getCustomToolbar>;
 

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

@@ -54,6 +54,7 @@ function ImageViewer({
   isTiff,
   contextModel,
   errorTitle,
+  someDialogIsOpen,
 }: ImageViewerProps) {
   const imgRef = useRef<HTMLImageElement>(null);
   const imgWrapperRef = useRef<HTMLDivElement>(null);
@@ -106,7 +107,7 @@ function ImageViewer({
     return () => {
       document.removeEventListener("keydown", onKeyDown);
     };
-  }, []);
+  }, [someDialogIsOpen]);
 
   const restartScaleAndSize = () => {
     if (!imgRef.current || style.scale.isAnimating) return;
@@ -138,7 +139,7 @@ function ImageViewer({
   };
 
   const changeSource = React.useCallback(
-    (src) => {
+    (src: any) => {
       if (!window.DocSpaceConfig.imageThumbnails) return;
       changeSourceTimeoutRef.current = setTimeout(() => {
         if (imgRef.current && !unmountRef.current) {
@@ -545,6 +546,8 @@ function ImageViewer({
   const onKeyDown = (event: KeyboardEvent) => {
     const { code, ctrlKey } = event;
 
+    if (someDialogIsOpen) return;
+
     switch (code) {
       case KeyboardEventKeys.ArrowLeft:
       case KeyboardEventKeys.ArrowRight:
@@ -555,9 +558,13 @@ function ImageViewer({
         }
         break;
       case KeyboardEventKeys.ArrowUp:
+      case KeyboardEventKeys.NumpadAdd:
+      case KeyboardEventKeys.Equal:
         zoomIn();
         break;
       case KeyboardEventKeys.ArrowDown:
+      case KeyboardEventKeys.NumpadSubtract:
+      case KeyboardEventKeys.Minus:
         zoomOut();
         break;
       case KeyboardEventKeys.Digit1:

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

@@ -10,6 +10,7 @@ interface ViewerProps {
   visible: boolean;
   isImage: boolean;
   isPdf: boolean;
+  someDialogIsOpen: boolean;
 
   playlist: PlaylistType[];
   inactive: boolean;

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

@@ -2,8 +2,6 @@ import ReactDOM from "react-dom";
 import { isMobile } from "react-device-detect";
 import React, { useRef, useState, useEffect, useCallback } from "react";
 
-import ContextMenu from "@docspace/components/context-menu";
-
 import { StyledViewerContainer } from "../../StyledComponents";
 
 import NextButton from "../NextButton";
@@ -32,7 +30,7 @@ function Viewer(props: ViewerProps) {
   const panelVisibleRef = useRef<boolean>(false);
   const panelToolbarRef = useRef<boolean>(false);
 
-  const contextMenuRef = useRef<ContextMenu>(null);
+  const contextMenuRef = useRef<{ show: (e: any) => void }>(null);
 
   const [isFullscreen, setIsFullScreen] = useState<boolean>(false);
   useEffect(() => {
@@ -130,12 +128,21 @@ function Viewer(props: ViewerProps) {
     if (isFullscreen) {
       if (document.exitFullscreen) {
         document.exitFullscreen();
-      } else if (document["webkitExitFullscreen"]) {
-        document["webkitExitFullscreen"]();
-      } else if (document["mozCancelFullScreen"]) {
-        document["mozCancelFullScreen"]();
-      } else if (document["msExitFullscreen"]) {
-        document["msExitFullscreen"]();
+      } else if (
+        "webkitExitFullscreen" in document &&
+        typeof document.webkitExitFullscreen === "function"
+      ) {
+        document.webkitExitFullscreen();
+      } else if (
+        "mozCancelFullScreen" in document &&
+        typeof document.mozCancelFullScreen === "function"
+      ) {
+        document.mozCancelFullScreen();
+      } else if (
+        "msExitFullscreen" in document &&
+        typeof document.msExitFullscreen === "function"
+      ) {
+        document.msExitFullscreen();
       }
     }
 
@@ -202,6 +209,7 @@ function Viewer(props: ViewerProps) {
               resetToolbarVisibleTimer={resetToolbarVisibleTimer}
               contextModel={props.contextModel}
               errorTitle={props.errorTitle}
+              someDialogIsOpen={props.someDialogIsOpen}
             />,
             containerRef.current
           )

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

@@ -16,6 +16,7 @@ interface ViewerWrapperProps {
   isVideo: boolean;
   isPdf: boolean;
   isPreviewFile: boolean;
+  someDialogIsOpen: boolean;
 
   archiveRoom: boolean;
 

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

@@ -124,6 +124,7 @@ function ViewerWrapper(props: ViewerWrapperProps) {
       onDownloadClick={props.onDownloadClick}
       generateContextMenu={generateContextMenu}
       onSetSelectionFile={props.onSetSelectionFile}
+      someDialogIsOpen={props.someDialogIsOpen}
     />
   );
 }