Merge branch 'develop' into bugfix/trash-room-title
This commit is contained in:
commit
f716fc6a78
@ -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;
|
||||
};
|
||||
|
@ -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}>
|
||||
|
@ -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");
|
||||
|
||||
|
@ -62,8 +62,8 @@ function MobileViewer({
|
||||
height,
|
||||
x: left,
|
||||
y: top,
|
||||
})
|
||||
},[height, width])
|
||||
});
|
||||
}, [height, width]);
|
||||
|
||||
React.useEffect(() => {
|
||||
unmountRef.current = false;
|
||||
@ -321,6 +321,7 @@ function MobileViewer({
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
drag: {
|
||||
from: () => [style.x.get(), style.y.get()],
|
||||
|
@ -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,12 +655,13 @@ 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"
|
||||
@ -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}
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user