Web:MediaViewer Added hot keys
This commit is contained in:
parent
86c1a6df53
commit
15673efae5
@ -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,
|
||||
|
@ -17,6 +17,8 @@ export interface MediaViewerProps {
|
||||
extsMediaPreviewed: string[];
|
||||
extsImagePreviewed: string[];
|
||||
|
||||
someDialogIsOpen: boolean;
|
||||
|
||||
deleteDialogVisible: boolean;
|
||||
errorLabel: string;
|
||||
isPreviewFile: boolean;
|
||||
|
@ -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 {
|
||||
|
@ -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}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
|
@ -12,6 +12,7 @@ interface ImageViewerProps {
|
||||
isFistImage: boolean;
|
||||
isLastImage: boolean;
|
||||
panelVisible: boolean;
|
||||
someDialogIsOpen: boolean;
|
||||
mobileDetails: JSX.Element;
|
||||
toolbar: ReturnType<typeof getCustomToolbar>;
|
||||
|
||||
|
@ -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:
|
||||
|
@ -10,6 +10,7 @@ interface ViewerProps {
|
||||
visible: boolean;
|
||||
isImage: boolean;
|
||||
isPdf: boolean;
|
||||
someDialogIsOpen: boolean;
|
||||
|
||||
playlist: PlaylistType[];
|
||||
inactive: boolean;
|
||||
|
@ -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
|
||||
)
|
||||
|
@ -16,6 +16,7 @@ interface ViewerWrapperProps {
|
||||
isVideo: boolean;
|
||||
isPdf: boolean;
|
||||
isPreviewFile: boolean;
|
||||
someDialogIsOpen: boolean;
|
||||
|
||||
archiveRoom: boolean;
|
||||
|
||||
|
@ -124,6 +124,7 @@ function ViewerWrapper(props: ViewerWrapperProps) {
|
||||
onDownloadClick={props.onDownloadClick}
|
||||
generateContextMenu={generateContextMenu}
|
||||
onSetSelectionFile={props.onSetSelectionFile}
|
||||
someDialogIsOpen={props.someDialogIsOpen}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user