yet-another-react-lightbox 3.23.3 → 3.23.4

package/dist/plugins/video/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useLightboxProps, useEvents, useContainerRect, useEventCallback, reflow, clsx, cssClass } from '../../index.js';
+import { useLightboxProps, useEvents, useContainerRect, useDocumentContext, useEventCallback, reflow, clsx, cssClass } from '../../index.js';
 import { ACTIVE_SLIDE_LOADING, CLASS_FLEX_CENTER, CLASS_SLIDE_WRAPPER, ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_PLAYING } from '../../types.js';
 
 const defaultVideoProps = {
@@ -15,12 +15,22 @@ function useVideoProps() {
     return resolveVideoProps(video);
 }
 
+function isChromium() {
+    var _a;
+    return (((_a = navigator.userAgentData) === null || _a === void 0 ? void 0 : _a.brands.some(({ brand }) => brand === "Chromium")) || !!window.chrome);
+}
+function isWebKit() {
+    return /^((?!chrome|android).)*(safari|mobile)/i.test(navigator.userAgent);
+}
+
 function VideoSlide({ slide, offset }) {
     const video = useVideoProps();
     const { publish } = useEvents();
     const { setContainerRef, containerRect, containerRef } = useContainerRect();
+    const { getOwnerDocument } = useDocumentContext();
     const { animation } = useLightboxProps();
     const videoRef = React.useRef(null);
+    const freezeNavigation = React.useRef(false);
     React.useEffect(() => {
         if (offset !== 0 && videoRef.current && !videoRef.current.paused) {
             videoRef.current.pause();
@@ -44,9 +54,7 @@ function VideoSlide({ slide, offset }) {
         return () => clearTimeout(timeoutId);
     });
     React.useEffect(() => {
-        var _a;
-        const isChromium = ((_a = navigator.userAgentData) === null || _a === void 0 ? void 0 : _a.brands.some(({ brand }) => brand === "Chromium")) || !!window.chrome;
-        if (isChromium && offset === 0) {
+        if (isChromium() && offset === 0) {
             return fixupPlayerControls();
         }
     }, [offset, fixupPlayerControls]);
@@ -61,6 +69,50 @@ function VideoSlide({ slide, offset }) {
             handleVideoRef(node);
         }
     }, [handleVideoRef]);
+    React.useEffect(() => {
+        if (offset === 0) {
+            let fullscreen = false;
+            const onFullscreenChange = () => {
+                fullscreen = getOwnerDocument().fullscreenElement === videoRef.current;
+                freezeNavigation.current = fullscreen;
+            };
+            getOwnerDocument().addEventListener("fullscreenchange", onFullscreenChange);
+            return () => {
+                getOwnerDocument().removeEventListener("fullscreenchange", onFullscreenChange);
+                if (fullscreen) {
+                    freezeNavigation.current = false;
+                    getOwnerDocument()
+                        .exitFullscreen()
+                        .catch(() => { });
+                }
+            };
+        }
+    }, [offset, getOwnerDocument]);
+    React.useEffect(() => {
+        if (offset === 0) {
+            let pip = false;
+            const trackPiP = (pipValue) => (event) => {
+                if (event.target === videoRef.current) {
+                    pip = pipValue;
+                    freezeNavigation.current = pip;
+                }
+            };
+            const onEnterPiP = trackPiP(true);
+            const onLeavePiP = trackPiP(false);
+            getOwnerDocument().addEventListener("enterpictureinpicture", onEnterPiP);
+            getOwnerDocument().addEventListener("leavepictureinpicture", onLeavePiP);
+            return () => {
+                getOwnerDocument().removeEventListener("enterpictureinpicture", onEnterPiP);
+                getOwnerDocument().removeEventListener("leavepictureinpicture", onLeavePiP);
+                if (pip) {
+                    freezeNavigation.current = false;
+                    getOwnerDocument()
+                        .exitPictureInPicture()
+                        .catch(() => { });
+                }
+            };
+        }
+    }, [offset, getOwnerDocument]);
     const { width, height, poster, sources } = slide;
     const scaleWidthAndHeight = () => {
         const scalingProps = {};
@@ -93,8 +145,8 @@ function VideoSlide({ slide, offset }) {
         }
         return null;
     };
-    const stopPropagationInSafari = (event) => {
-        if (/^((?!chrome|android).)*(safari|mobile)/i.test(navigator.userAgent)) {
+    const suppressWhenFrozen = (event) => {
+        if (freezeNavigation.current) {
             event.stopPropagation();
         }
     };
@@ -111,7 +163,14 @@ function VideoSlide({ slide, offset }) {
             publish(ACTIVE_SLIDE_PLAYING);
         }, onEnded: () => {
             publish(ACTIVE_SLIDE_COMPLETE);
-        }, onPointerUp: stopPropagationInSafari, onPointerDown: stopPropagationInSafari, onPointerMove: stopPropagationInSafari }, sources.map(({ src, type, media }) => (React.createElement("source", { key: [src, type, media].filter(Boolean).join("|"), src: src, type: type, media: media })))))))));
+        }, onWheel: suppressWhenFrozen, onKeyDown: suppressWhenFrozen, onPointerDown: (event) => {
+            suppressWhenFrozen(event);
+            if (isWebKit() &&
+                videoRef.current &&
+                videoRef.current.getBoundingClientRect().bottom - event.clientY < 40) {
+                event.stopPropagation();
+            }
+        } }, sources.map(({ src, type, media }) => (React.createElement("source", { key: [src, type, media].filter(Boolean).join("|"), src: src, type: type, media: media })))))))));
 }
 
 function isVideoSlide(slide) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yet-another-react-lightbox",
-  "version": "3.23.3",
+  "version": "3.23.4",
   "description": "Modern React lightbox component",
   "author": "Igor Danchenko",
   "license": "MIT",