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

src/components/mediaViewer/MediaViewerContent.tsx

@@ -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}
         />
       ))}

src/components/mediaViewer/MediaViewerSlides.tsx

@@ -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}
           />

src/components/mediaViewer/VideoPlayer.tsx

@@ -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, []);