Skip to content

Commit 1c69812

Browse files
committed
fix: fixup video player controls in Chrome (fix #352)
1 parent f02ab89 commit 1c69812

File tree

3 files changed

+38
-5
lines changed

3 files changed

+38
-5
lines changed

src/modules/Portal.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { createPortal } from "react-dom";
44
import { ComponentProps } from "../types.js";
55
import { LightboxDefaultProps } from "../props.js";
66
import { createModule } from "../config.js";
7-
import { clsx, composePrefix, cssClass, cssVar } from "../utils.js";
7+
import { clsx, composePrefix, cssClass, cssVar, reflow } from "../utils.js";
88
import { useEventCallback, useMotionPreference } from "../hooks/index.js";
99
import { useEvents, useTimeouts } from "../contexts/index.js";
1010
import { LightboxRoot } from "../components/index.js";
@@ -72,9 +72,7 @@ export function Portal({ children, animation, styles, className, on, portal, clo
7272
React.useEffect(() => subscribe(ACTION_CLOSE, handleClose), [subscribe, handleClose]);
7373

7474
const handleEnter = useEventCallback((node: HTMLDivElement) => {
75-
// reflow
76-
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
77-
node.scrollTop;
75+
reflow(node);
7876

7977
setVisible(true);
8078

src/plugins/video/VideoSlide.tsx

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,12 @@ import {
99
clsx,
1010
cssClass,
1111
LightboxProps,
12+
reflow,
1213
SlideVideo,
1314
useContainerRect,
1415
useEventCallback,
1516
useEvents,
17+
useLightboxProps,
1618
} from "../../index.js";
1719
import { useVideoProps } from "./props.js";
1820

@@ -25,7 +27,8 @@ export type VideoSlideProps = {
2527
export function VideoSlide({ slide, offset }: VideoSlideProps) {
2628
const video = useVideoProps();
2729
const { publish } = useEvents();
28-
const { setContainerRef, containerRect } = useContainerRect();
30+
const { setContainerRef, containerRect, containerRef } = useContainerRect();
31+
const { animation } = useLightboxProps();
2932
const videoRef = React.useRef<HTMLVideoElement>(null);
3033

3134
React.useEffect(() => {
@@ -42,6 +45,33 @@ export function VideoSlide({ slide, offset }: VideoSlideProps) {
4245
}
4346
}, [offset, video.autoPlay, slide.autoPlay, publish]);
4447

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+
4575
const handleVideoRef = useEventCallback((node: HTMLVideoElement) => {
4676
if (offset === 0 && (video.autoPlay || slide.autoPlay) && node.paused) {
4777
node.play().catch(() => {});

src/utils.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -165,3 +165,8 @@ export function makeInertWhen(condition: boolean) {
165165
const legacyValue = condition ? "" : undefined;
166166
return { inert: isReact19 ? condition : legacyValue } as { inert: boolean };
167167
}
168+
169+
export function reflow(node: HTMLElement) {
170+
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
171+
node.scrollTop;
172+
}

0 commit comments

Comments
 (0)