ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Media Viewer: Fix video play/pause when zoomed and moving (#2094)

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-11-01 18:53:12 +01:00
parent df19a8489b
commit 7712058fe4
3 changed files with 14 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/mediaViewer/MediaViewerContent.tsx
View File

@ -36,6 +36,7 @@ type OwnProps = {
onFooterClick: () => void;
setControlsVisible?: (isVisible: boolean) => void;
areControlsVisible: boolean;
isMoving?: boolean;
};
type StateProps = {
@ -73,6 +74,7 @@ const MediaViewerContent: FC<OwnProps & StateProps> = (props) => {
onClose,
onFooterClick,
setControlsVisible,
isMoving,
} = props;
const isGhostAnimation = animationLevel === 2;
@ -132,6 +134,7 @@ const MediaViewerContent: FC<OwnProps & StateProps> = (props) => {
isMuted
shouldCloseOnClick
volume={0}
isClickDisabled={isMoving}
playbackRate={1}
/>
</div>
@ -176,6 +179,7 @@ const MediaViewerContent: FC<OwnProps & StateProps> = (props) => {
isHidden={isHidden}
isProtected={isProtected}
volume={volume}
isClickDisabled={isMoving}
playbackRate={playbackRate}
/>
))}

7
src/components/mediaViewer/MediaViewerSlides.tsx
View File

@ -554,6 +554,7 @@ const MediaViewerSlides: FC<OwnProps> = ({
setTransform(transform);
},
onClick(e) {
setIsMouseDown(false);
const [isInThreshold, hasNextSlide] = changeSlideOnClick(e as MouseEvent);
if (isInThreshold) {
e.preventDefault();
@ -676,6 +677,7 @@ const MediaViewerSlides: FC<OwnProps> = ({
const offsetX = transformRef.current.x;
const offsetY = transformRef.current.y;
const { scale } = transformRef.current;
const isMoving = isMouseDown && scale > 1;
return (
<div className="MediaViewerSlides" ref={containerRef}>
@ -685,6 +687,7 @@ const MediaViewerSlides: FC<OwnProps> = ({
/* eslint-disable-next-line react/jsx-props-no-spreading */
{...rest}
animationLevel={animationLevel}
isMoving={isMoving}
areControlsVisible={areControlsVisible}
mediaId={prevMediaId}
/>
@ -694,7 +697,7 @@ const MediaViewerSlides: FC<OwnProps> = ({
className={buildClassName(
'MediaViewerSlide',
'MediaViewerSlide--active',
isMouseDown && scale > 1 && 'MediaViewerSlide--moving',
isMoving && 'MediaViewerSlide--moving',
)}
onClick={handleControlsVisibility}
ref={activeSlideRef}
@ -707,6 +710,7 @@ const MediaViewerSlides: FC<OwnProps> = ({
animationLevel={animationLevel}
isActive={isActiveRef.current}
setControlsVisible={setControlsVisible}
isMoving={isMoving}
areControlsVisible={areControlsVisible && scale === 1}
/>
</div>
@ -716,6 +720,7 @@ const MediaViewerSlides: FC<OwnProps> = ({
/* eslint-disable-next-line react/jsx-props-no-spreading */
{...rest}
animationLevel={animationLevel}
isMoving={isMoving}
areControlsVisible={areControlsVisible}
mediaId={nextMediaId}
/>

5
src/components/mediaViewer/VideoPlayer.tsx
View File

@ -41,6 +41,7 @@ type OwnProps = {
shouldCloseOnClick?: boolean;
toggleControls: (isVisible: boolean) => void;
onClose: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
isClickDisabled?: boolean;
};
const MOBILE_VERSION_CONTROL_WIDTH = 400;
@ -63,6 +64,7 @@ const VideoPlayer: FC<OwnProps> = ({
areControlsVisible,
shouldCloseOnClick,
isProtected,
isClickDisabled,
}) => {
const {
setMediaViewerVolume,
@ -156,12 +158,13 @@ const VideoPlayer: FC<OwnProps> = ({
}, [isPlaying]);
const handleClick = useCallback((e: React.MouseEvent<HTMLVideoElement, MouseEvent>) => {
if (isClickDisabled) return;
if (shouldCloseOnClick) {
onClose(e);
} else {
togglePlayState(e);
}
}, [onClose, shouldCloseOnClick, togglePlayState]);
}, [onClose, shouldCloseOnClick, togglePlayState, isClickDisabled]);
useVideoCleanup(videoRef, []);