@@ -9,10 +9,12 @@ import {
9
9
clsx ,
10
10
cssClass ,
11
11
LightboxProps ,
12
+ reflow ,
12
13
SlideVideo ,
13
14
useContainerRect ,
14
15
useEventCallback ,
15
16
useEvents ,
17
+ useLightboxProps ,
16
18
} from "../../index.js" ;
17
19
import { useVideoProps } from "./props.js" ;
18
20
@@ -25,7 +27,8 @@ export type VideoSlideProps = {
25
27
export function VideoSlide ( { slide, offset } : VideoSlideProps ) {
26
28
const video = useVideoProps ( ) ;
27
29
const { publish } = useEvents ( ) ;
28
- const { setContainerRef, containerRect } = useContainerRect ( ) ;
30
+ const { setContainerRef, containerRect, containerRef } = useContainerRect ( ) ;
31
+ const { animation } = useLightboxProps ( ) ;
29
32
const videoRef = React . useRef < HTMLVideoElement > ( null ) ;
30
33
31
34
React . useEffect ( ( ) => {
@@ -42,6 +45,33 @@ export function VideoSlide({ slide, offset }: VideoSlideProps) {
42
45
}
43
46
} , [ offset , video . autoPlay , slide . autoPlay , publish ] ) ;
44
47
48
+ const fixupPlayerControls = useEventCallback ( ( ) => {
49
+ const timeoutId = setTimeout (
50
+ ( ) => {
51
+ if ( containerRef . current ) {
52
+ const borderStyle = containerRef . current . style . border ;
53
+ containerRef . current . style . border = "1px solid transparent" ;
54
+ reflow ( containerRef . current ) ;
55
+ containerRef . current . style . border = borderStyle ;
56
+ }
57
+ } ,
58
+ Math . max ( animation . swipe , animation . navigation || 0 ) + 50 ,
59
+ ) ;
60
+
61
+ return ( ) => clearTimeout ( timeoutId ) ;
62
+ } ) ;
63
+
64
+ React . useEffect ( ( ) => {
65
+ const isChromium =
66
+ ( navigator as { userAgentData ?: { brands : { brand : string } [ ] } } ) . userAgentData ?. brands . some (
67
+ ( { brand } ) => brand === "Chromium" ,
68
+ ) || ! ! ( window as { chrome ?: unknown } ) . chrome ;
69
+
70
+ if ( isChromium && offset === 0 ) {
71
+ return fixupPlayerControls ( ) ;
72
+ }
73
+ } , [ offset , fixupPlayerControls ] ) ;
74
+
45
75
const handleVideoRef = useEventCallback ( ( node : HTMLVideoElement ) => {
46
76
if ( offset === 0 && ( video . autoPlay || slide . autoPlay ) && node . paused ) {
47
77
node . play ( ) . catch ( ( ) => { } ) ;
0 commit comments