yet-another-react-lightbox 3.23.3 → 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.
Files changed (2) hide show
  1. package/dist/plugins/video/index.js +66 -7
  2. package/package.json +1 -1
package/dist/plugins/video/index.js CHANGED
@@ -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
- var _a;
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,8 +145,8 @@ function VideoSlide({ slide, offset }) {
93
145
  }
94
146
  return null;
95
147
  };
96
- const stopPropagationInSafari = (event) => {
97
- if (/^((?!chrome|android).)*(safari|mobile)/i.test(navigator.userAgent)) {
148
+ const suppressWhenFrozen = (event) => {
149
+ if (freezeNavigation.current) {
98
150
  event.stopPropagation();
99
151
  }
100
152
  };
@@ -111,7 +163,14 @@ function VideoSlide({ slide, offset }) {
111
163
  publish(ACTIVE_SLIDE_PLAYING);
112
164
  }, onEnded: () => {
113
165
  publish(ACTIVE_SLIDE_COMPLETE);
114
- }, 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 })))))))));
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
+ }
173
+ } }, sources.map(({ src, type, media }) => (React.createElement("source", { key: [src, type, media].filter(Boolean).join("|"), src: src, type: type, media: media })))))))));
115
174
  }
116
175
 
117
176
  function isVideoSlide(slide) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "yet-another-react-lightbox",
3
- "version": "3.23.3",
3
+ "version": "3.23.4",
4
4
  "description": "Modern React lightbox component",
5
5
  "author": "Igor Danchenko",
6
6
  "license": "MIT",