Skip to content

fix(player): stabilize iOS Safari controls toggle on tap #632

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
stackia merged 4 commits into from
Jul 9, 2026
Merged

fix(player): stabilize iOS Safari controls toggle on tap #632

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8397fb0
fix(player): stabilize iOS Safari controls toggle on tap
cursoragent Jul 9, 2026
0062184
refactor(player): hide controls via timer only, not mouseleave
cursoragent Jul 9, 2026
432679d
refactor(player): wake controls via mouse move/enter only
cursoragent Jul 9, 2026
62c15ad
docs(player): drop historical click-toggle note from comment
cursoragent Jul 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 7 additions & 12 deletions web-ui/src/components/player/video-player.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -386,6 +386,8 @@ export function VideoPlayer({
}, 3000);
}, []);

// Wake / keep-alive: mouseenter + mousemove (including touch-synthesized move on iOS).
// Auto-hide is timer-only.
const showControlsImmediately = useCallback(() => {
setShowControls(true);
resetControlsTimer();
Expand Down Expand Up @@ -1241,14 +1243,6 @@ export function VideoPlayer({
};
}, [isDocumentPiP]);

const handleVideoClick = useCallback(() => {
if (showControls) {
hideControlsImmediately();
} else {
showControlsImmediately();
}
}, [showControls, hideControlsImmediately, showControlsImmediately]);

const handleMuteToggle = useEffectEvent(() => {
const video = getActiveVideo();
if (video) {
Expand Down Expand Up @@ -1405,8 +1399,8 @@ export function VideoPlayer({
isDocumentPiP ? "h-screen min-h-screen aspect-auto" : "md:aspect-auto md:h-full",
!showControls && "cursor-none",
)}
onMouseEnter={showControlsImmediately}
onMouseMove={showControlsImmediately}
onMouseLeave={hideControlsImmediately}
>
{/* Player area sizes the 16:9 frame via container queries; sources stretch to 16:9 inside it. */}
<div className="relative aspect-video h-auto max-h-full w-full max-w-full overflow-hidden [@container_video_(max-aspect-ratio:_16/9)]:h-auto [@container_video_(max-aspect-ratio:_16/9)]:w-full [@container_video_(min-aspect-ratio:_16/9)]:h-full [@container_video_(min-aspect-ratio:_16/9)]:w-auto">
Expand All @@ -1427,7 +1421,6 @@ export function VideoPlayer({
playsInline
webkit-playsinline="true"
x5-playsinline="true"
onClick={visibleSlotId === slotId ? handleVideoClick : undefined}
/>
<canvas
ref={slotId === "a" ? slotACanvasRef : slotBCanvasRef}
Expand Down Expand Up @@ -1457,7 +1450,7 @@ export function VideoPlayer({
<div
className={clsx(
"absolute top-4 right-4 md:top-8 md:right-8 z-10 flex flex-col gap-2 md:gap-3 items-end transition-opacity duration-300",
showControls ? "opacity-100" : "opacity-0",
showControls ? "opacity-100" : "opacity-0 pointer-events-none",
)}
>
<div
Expand Down Expand Up @@ -1534,7 +1527,9 @@ export function VideoPlayer({
role="toolbar"
className={clsx(
"absolute bottom-0 left-0 right-0 z-10 transition-opacity duration-300",
showControls ? "opacity-100" : "opacity-0 has-focus-visible:opacity-100",
showControls
? "opacity-100"
: "opacity-0 pointer-events-none has-focus-visible:opacity-100 has-focus-visible:pointer-events-auto",
)}
onMouseEnter={showControlsImmediately}
>
Expand Down
Loading