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 React, { useState, useCallback, useMemo, useEffect } from "react";
|
||||||
|
|
||||||
import ViewerWrapper from "./sub-components/ViewerWrapper";
|
import ViewerWrapper from "./sub-components/ViewerWrapper";
|
||||||
@ -229,9 +229,9 @@ function MediaViewer({
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
return isMobileOnly
|
return isMobile
|
||||||
? model
|
? model
|
||||||
: isImage && !isMobileOnly
|
: isImage && !isMobile
|
||||||
? desktopModel.filter((el) => el.key !== "download")
|
? desktopModel.filter((el) => el.key !== "download")
|
||||||
: desktopModel;
|
: desktopModel;
|
||||||
};
|
};
|
||||||
|
@ -11,7 +11,7 @@ import ControlBtn from "./sub-components/control-btn";
|
|||||||
import Text from "@docspace/components/text";
|
import Text from "@docspace/components/text";
|
||||||
import IconButton from "@docspace/components/icon-button";
|
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 ViewerMediaCloseSvgUrl from "PUBLIC_DIR/images/viewer.media.close.svg?url";
|
||||||
import MediaNextIcon from "PUBLIC_DIR/images/viewer.next.react.svg";
|
import MediaNextIcon from "PUBLIC_DIR/images/viewer.next.react.svg";
|
||||||
@ -70,7 +70,7 @@ export const Viewer = (props) => {
|
|||||||
if ((!isPlay || isOpenContextMenu) && (!isImage || isOpenContextMenu))
|
if ((!isPlay || isOpenContextMenu) && (!isImage || isOpenContextMenu))
|
||||||
return clearTimeout(timer);
|
return clearTimeout(timer);
|
||||||
document.addEventListener("touchstart", onTouch);
|
document.addEventListener("touchstart", onTouch);
|
||||||
if (!isMobileOnly) {
|
if (!isMobile) {
|
||||||
document.addEventListener("mousemove", resetTimer);
|
document.addEventListener("mousemove", resetTimer);
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
@ -157,7 +157,7 @@ export const Viewer = (props) => {
|
|||||||
</StyledMobileDetails>
|
</StyledMobileDetails>
|
||||||
);
|
);
|
||||||
|
|
||||||
const displayUI = (isMobileOnly && isAudio) || panelVisible;
|
const displayUI = (isMobile && isAudio) || panelVisible;
|
||||||
|
|
||||||
const viewerPortal = ReactDOM.createPortal(
|
const viewerPortal = ReactDOM.createPortal(
|
||||||
<StyledViewer
|
<StyledViewer
|
||||||
@ -207,7 +207,7 @@ export const Viewer = (props) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledViewerContainer visible={visible}>
|
<StyledViewerContainer visible={visible}>
|
||||||
{!isFullscreen && !isMobileOnly && displayUI && (
|
{!isFullscreen && !isMobile && displayUI && (
|
||||||
<div>
|
<div>
|
||||||
<div className="details" ref={detailsContainerRef}>
|
<div className="details" ref={detailsContainerRef}>
|
||||||
<Text isBold fontSize="14px" className="title">
|
<Text isBold fontSize="14px" className="title">
|
||||||
@ -228,7 +228,7 @@ export const Viewer = (props) => {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{playlist.length > 1 && !isFullscreen && displayUI && (
|
{playlist.length > 1 && !isFullscreen && displayUI && !isMobile && (
|
||||||
<>
|
<>
|
||||||
{playlistPos !== 0 && (
|
{playlistPos !== 0 && (
|
||||||
<StyledSwitchToolbar left onClick={prevClick}>
|
<StyledSwitchToolbar left onClick={prevClick}>
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
import Text from "@docspace/components/text";
|
import Text from "@docspace/components/text";
|
||||||
import { isMobileOnly } from "react-device-detect";
|
import { isMobile } from "react-device-detect";
|
||||||
import { ReactSVG } from "react-svg";
|
import { ReactSVG } from "react-svg";
|
||||||
|
|
||||||
const StyledMediaError = styled.div`
|
const StyledMediaError = styled.div`
|
||||||
@ -54,7 +54,7 @@ export const MediaError = ({
|
|||||||
let errorLeft = (window.innerWidth - width) / 2 + "px";
|
let errorLeft = (window.innerWidth - width) / 2 + "px";
|
||||||
let errorTop = (window.innerHeight - height) / 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 !== "rename")
|
||||||
: model.filter((el) => el.key === "delete" || el.key === "download");
|
: model.filter((el) => el.key === "delete" || el.key === "download");
|
||||||
|
|
||||||
|
@ -56,14 +56,14 @@ function MobileViewer({
|
|||||||
api.start({ ...point });
|
api.start({ ...point });
|
||||||
}, [left, top]);
|
}, [left, top]);
|
||||||
|
|
||||||
React.useEffect(()=>{
|
React.useEffect(() => {
|
||||||
api.set({
|
api.set({
|
||||||
width,
|
width,
|
||||||
height,
|
height,
|
||||||
x:left,
|
x: left,
|
||||||
y:top,
|
y: top,
|
||||||
})
|
});
|
||||||
},[height, width])
|
}, [height, width]);
|
||||||
|
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
unmountRef.current = false;
|
unmountRef.current = false;
|
||||||
@ -321,6 +321,7 @@ function MobileViewer({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
drag: {
|
drag: {
|
||||||
from: () => [style.x.get(), style.y.get()],
|
from: () => [style.x.get(), style.y.get()],
|
||||||
|
@ -2,7 +2,7 @@ import * as React from "react";
|
|||||||
import ViewerImage from "./viewer-image";
|
import ViewerImage from "./viewer-image";
|
||||||
import classnames from "classnames";
|
import classnames from "classnames";
|
||||||
import ViewerToolbar, { defaultToolbars } from "./viewer-toolbar";
|
import ViewerToolbar, { defaultToolbars } from "./viewer-toolbar";
|
||||||
import { isMobileOnly } from "react-device-detect";
|
import { isMobile } from "react-device-detect";
|
||||||
import Icon, { ActionType } from "./icon";
|
import Icon, { ActionType } from "./icon";
|
||||||
|
|
||||||
const ACTION_TYPES = {
|
const ACTION_TYPES = {
|
||||||
@ -219,13 +219,12 @@ const ViewerBase = (props) => {
|
|||||||
|
|
||||||
if (imageRef.current) {
|
if (imageRef.current) {
|
||||||
//abort previous image request
|
//abort previous image request
|
||||||
imageRef.current.src = ""
|
imageRef.current.src = "";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
let loadComplete = false;
|
let loadComplete = false;
|
||||||
let img = new Image();
|
let img = new Image();
|
||||||
imageRef.current = img
|
imageRef.current = img;
|
||||||
img.src = activeImage.src;
|
img.src = activeImage.src;
|
||||||
|
|
||||||
img.onload = () => {
|
img.onload = () => {
|
||||||
@ -455,7 +454,9 @@ const ViewerBase = (props) => {
|
|||||||
document[funcName]("keydown", handleKeydown, true);
|
document[funcName]("keydown", handleKeydown, true);
|
||||||
}
|
}
|
||||||
if (viewerCore.current) {
|
if (viewerCore.current) {
|
||||||
viewerCore.current[funcName]("wheel", handleMouseScroll, {passive: true});
|
viewerCore.current[funcName]("wheel", handleMouseScroll, {
|
||||||
|
passive: true,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -654,17 +655,18 @@ const ViewerBase = (props) => {
|
|||||||
}}
|
}}
|
||||||
ref={viewerCore}
|
ref={viewerCore}
|
||||||
>
|
>
|
||||||
{isMobileOnly && !displayVisible && mobileDetails}
|
{isMobile && !displayVisible && mobileDetails}
|
||||||
<div
|
<div
|
||||||
className={`${prefixCls}-mask`}
|
className={`${prefixCls}-mask`}
|
||||||
style={{
|
style={{
|
||||||
zIndex: zIndex,
|
zIndex: zIndex,
|
||||||
backgroundColor: `${isMobileOnly
|
backgroundColor: `${
|
||||||
|
isMobile
|
||||||
? !displayVisible
|
? !displayVisible
|
||||||
? "rgba(55,55,55,0.6)"
|
? "rgba(55,55,55,0.6)"
|
||||||
: "#000"
|
: "#000"
|
||||||
: "rgba(55,55,55,0.6)"
|
: "rgba(55,55,55,0.6)"
|
||||||
}`,
|
}`,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<ViewerImage
|
<ViewerImage
|
||||||
@ -708,7 +710,7 @@ const ViewerBase = (props) => {
|
|||||||
container={props.container}
|
container={props.container}
|
||||||
/>
|
/>
|
||||||
{props.noFooter ||
|
{props.noFooter ||
|
||||||
(!isMobileOnly && props.displayUI && (
|
(!isMobile && props.displayUI && (
|
||||||
<div className={`${prefixCls}-container`}>
|
<div className={`${prefixCls}-container`}>
|
||||||
<div
|
<div
|
||||||
className={`${prefixCls}-footer`}
|
className={`${prefixCls}-footer`}
|
||||||
@ -716,7 +718,7 @@ const ViewerBase = (props) => {
|
|||||||
>
|
>
|
||||||
{noToolbar || (
|
{noToolbar || (
|
||||||
<ViewerToolbar
|
<ViewerToolbar
|
||||||
isMobileOnly={isMobileOnly}
|
isMobileOnly={isMobile}
|
||||||
imageTimer={props.imageTimer}
|
imageTimer={props.imageTimer}
|
||||||
prefixCls={prefixCls}
|
prefixCls={prefixCls}
|
||||||
onAction={handleAction}
|
onAction={handleAction}
|
||||||
|
@ -2,7 +2,7 @@ import * as React from "react";
|
|||||||
import classnames from "classnames";
|
import classnames from "classnames";
|
||||||
import ViewerLoading from "./viewer-loading";
|
import ViewerLoading from "./viewer-loading";
|
||||||
import { useSwipeable } from "../../react-swipeable";
|
import { useSwipeable } from "../../react-swipeable";
|
||||||
import { isMobileOnly } from "react-device-detect";
|
import { isIOS, isMobile } from "react-device-detect";
|
||||||
|
|
||||||
import MobileViewer from "./mobile-viewer";
|
import MobileViewer from "./mobile-viewer";
|
||||||
function ViewerImage(props) {
|
function ViewerImage(props) {
|
||||||
@ -375,7 +375,11 @@ function ViewerImage(props) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function onClose(e) {
|
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;
|
return;
|
||||||
props.onMaskClick();
|
props.onMaskClick();
|
||||||
}
|
}
|
||||||
@ -422,7 +426,7 @@ translateX(${props.left !== null ? props.left + "px" : "auto"}) translateY(${
|
|||||||
let imgNode = null;
|
let imgNode = null;
|
||||||
|
|
||||||
if (props.imgSrc !== "") {
|
if (props.imgSrc !== "") {
|
||||||
imgNode = isMobileOnly ? (
|
imgNode = isMobile ? (
|
||||||
<MobileViewer
|
<MobileViewer
|
||||||
className={imgClass}
|
className={imgClass}
|
||||||
src={props.imgSrc}
|
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 (
|
return (
|
||||||
<div
|
<div
|
||||||
className={`${props.prefixCls}-canvas`}
|
className={`${props.prefixCls}-canvas`}
|
||||||
onClick={onClose}
|
|
||||||
style={styleIndex}
|
style={styleIndex}
|
||||||
|
{...events}
|
||||||
>
|
>
|
||||||
{imgNode}
|
{imgNode}
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user