yet-another-react-lightbox 3.23.2 → 3.23.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/plugins/video/index.js +68 -4
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { useLightboxProps, useEvents, useContainerRect, useEventCallback, reflow, clsx, cssClass } from '../../index.js';
|
|
2
|
+
import { useLightboxProps, useEvents, useContainerRect, useDocumentContext, useEventCallback, reflow, clsx, cssClass } from '../../index.js';
|
|
3
3
|
import { ACTIVE_SLIDE_LOADING, CLASS_FLEX_CENTER, CLASS_SLIDE_WRAPPER, ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_PLAYING } from '../../types.js';
|
|
4
4
|
|
|
5
5
|
const defaultVideoProps = {
|
|
@@ -15,12 +15,22 @@ function useVideoProps() {
|
|
|
15
15
|
return resolveVideoProps(video);
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
+
function isChromium() {
|
|
19
|
+
var _a;
|
|
20
|
+
return (((_a = navigator.userAgentData) === null || _a === void 0 ? void 0 : _a.brands.some(({ brand }) => brand === "Chromium")) || !!window.chrome);
|
|
21
|
+
}
|
|
22
|
+
function isWebKit() {
|
|
23
|
+
return /^((?!chrome|android).)*(safari|mobile)/i.test(navigator.userAgent);
|
|
24
|
+
}
|
|
25
|
+
|
|
18
26
|
function VideoSlide({ slide, offset }) {
|
|
19
27
|
const video = useVideoProps();
|
|
20
28
|
const { publish } = useEvents();
|
|
21
29
|
const { setContainerRef, containerRect, containerRef } = useContainerRect();
|
|
30
|
+
const { getOwnerDocument } = useDocumentContext();
|
|
22
31
|
const { animation } = useLightboxProps();
|
|
23
32
|
const videoRef = React.useRef(null);
|
|
33
|
+
const freezeNavigation = React.useRef(false);
|
|
24
34
|
React.useEffect(() => {
|
|
25
35
|
if (offset !== 0 && videoRef.current && !videoRef.current.paused) {
|
|
26
36
|
videoRef.current.pause();
|
|
@@ -44,9 +54,7 @@ function VideoSlide({ slide, offset }) {
|
|
|
44
54
|
return () => clearTimeout(timeoutId);
|
|
45
55
|
});
|
|
46
56
|
React.useEffect(() => {
|
|
47
|
-
|
|
48
|
-
const isChromium = ((_a = navigator.userAgentData) === null || _a === void 0 ? void 0 : _a.brands.some(({ brand }) => brand === "Chromium")) || !!window.chrome;
|
|
49
|
-
if (isChromium && offset === 0) {
|
|
57
|
+
if (isChromium() && offset === 0) {
|
|
50
58
|
return fixupPlayerControls();
|
|
51
59
|
}
|
|
52
60
|
}, [offset, fixupPlayerControls]);
|
|
@@ -61,6 +69,50 @@ function VideoSlide({ slide, offset }) {
|
|
|
61
69
|
handleVideoRef(node);
|
|
62
70
|
}
|
|
63
71
|
}, [handleVideoRef]);
|
|
72
|
+
React.useEffect(() => {
|
|
73
|
+
if (offset === 0) {
|
|
74
|
+
let fullscreen = false;
|
|
75
|
+
const onFullscreenChange = () => {
|
|
76
|
+
fullscreen = getOwnerDocument().fullscreenElement === videoRef.current;
|
|
77
|
+
freezeNavigation.current = fullscreen;
|
|
78
|
+
};
|
|
79
|
+
getOwnerDocument().addEventListener("fullscreenchange", onFullscreenChange);
|
|
80
|
+
return () => {
|
|
81
|
+
getOwnerDocument().removeEventListener("fullscreenchange", onFullscreenChange);
|
|
82
|
+
if (fullscreen) {
|
|
83
|
+
freezeNavigation.current = false;
|
|
84
|
+
getOwnerDocument()
|
|
85
|
+
.exitFullscreen()
|
|
86
|
+
.catch(() => { });
|
|
87
|
+
}
|
|
88
|
+
};
|
|
89
|
+
}
|
|
90
|
+
}, [offset, getOwnerDocument]);
|
|
91
|
+
React.useEffect(() => {
|
|
92
|
+
if (offset === 0) {
|
|
93
|
+
let pip = false;
|
|
94
|
+
const trackPiP = (pipValue) => (event) => {
|
|
95
|
+
if (event.target === videoRef.current) {
|
|
96
|
+
pip = pipValue;
|
|
97
|
+
freezeNavigation.current = pip;
|
|
98
|
+
}
|
|
99
|
+
};
|
|
100
|
+
const onEnterPiP = trackPiP(true);
|
|
101
|
+
const onLeavePiP = trackPiP(false);
|
|
102
|
+
getOwnerDocument().addEventListener("enterpictureinpicture", onEnterPiP);
|
|
103
|
+
getOwnerDocument().addEventListener("leavepictureinpicture", onLeavePiP);
|
|
104
|
+
return () => {
|
|
105
|
+
getOwnerDocument().removeEventListener("enterpictureinpicture", onEnterPiP);
|
|
106
|
+
getOwnerDocument().removeEventListener("leavepictureinpicture", onLeavePiP);
|
|
107
|
+
if (pip) {
|
|
108
|
+
freezeNavigation.current = false;
|
|
109
|
+
getOwnerDocument()
|
|
110
|
+
.exitPictureInPicture()
|
|
111
|
+
.catch(() => { });
|
|
112
|
+
}
|
|
113
|
+
};
|
|
114
|
+
}
|
|
115
|
+
}, [offset, getOwnerDocument]);
|
|
64
116
|
const { width, height, poster, sources } = slide;
|
|
65
117
|
const scaleWidthAndHeight = () => {
|
|
66
118
|
const scalingProps = {};
|
|
@@ -93,6 +145,11 @@ function VideoSlide({ slide, offset }) {
|
|
|
93
145
|
}
|
|
94
146
|
return null;
|
|
95
147
|
};
|
|
148
|
+
const suppressWhenFrozen = (event) => {
|
|
149
|
+
if (freezeNavigation.current) {
|
|
150
|
+
event.stopPropagation();
|
|
151
|
+
}
|
|
152
|
+
};
|
|
96
153
|
return (React.createElement(React.Fragment, null, sources && (React.createElement("div", { ref: setContainerRef, style: {
|
|
97
154
|
width: "100%",
|
|
98
155
|
height: "100%",
|
|
@@ -106,6 +163,13 @@ function VideoSlide({ slide, offset }) {
|
|
|
106
163
|
publish(ACTIVE_SLIDE_PLAYING);
|
|
107
164
|
}, onEnded: () => {
|
|
108
165
|
publish(ACTIVE_SLIDE_COMPLETE);
|
|
166
|
+
}, onWheel: suppressWhenFrozen, onKeyDown: suppressWhenFrozen, onPointerDown: (event) => {
|
|
167
|
+
suppressWhenFrozen(event);
|
|
168
|
+
if (isWebKit() &&
|
|
169
|
+
videoRef.current &&
|
|
170
|
+
videoRef.current.getBoundingClientRect().bottom - event.clientY < 40) {
|
|
171
|
+
event.stopPropagation();
|
|
172
|
+
}
|
|
109
173
|
} }, sources.map(({ src, type, media }) => (React.createElement("source", { key: [src, type, media].filter(Boolean).join("|"), src: src, type: type, media: media })))))))));
|
|
110
174
|
}
|
|
111
175
|
|