fix(player): controls bar taps are not player gestures (DR-098)

The bottom play/pause button did nothing. The gesture listener lives on
the outer container and touch events bubble, so tapping the button ran
handleTouchStart (toggle #1) and then the button's own onclick (toggle
#2). The two cancelled out, leaving the control apparently dead.

Ignore container-level gestures for touches that land on an interactive
control: buttons, links, inputs (the seek bar), or anything inside the
controls bar, now marked `data-player-controls`. The rule itself is a
pure function over the ancestor chain (isControlSurfaceTouch), so it is
unit tested without a DOM.

Same root shape as the play-overlay bug in the previous commit: a second
click target over the video that the gesture layer did not account for.
This commit is contained in:
2026-07-30 15:27:01 +02:00
parent b98a530f48
commit dc8b732465
7 changed files with 84 additions and 5 deletions
@@ -9,6 +9,7 @@ import {
clampSeekTarget,
END_SEEK_MARGIN_SECONDS,
isSynthesizedTouchClick,
isControlSurfaceTouch,
TOUCH_CLICK_SUPPRESS_MS,
} from "./tapGestures";
@@ -199,6 +200,34 @@ describe("seek target resolution", () => {
});
});
describe("control-surface touches are not gestures", () => {
// Regression: the gesture listener is on the outer container and touch events
// bubble, so tapping the bottom play/pause button ran the gesture handler
// (toggle #1) AND the button's own click handler (toggle #2). The two
// cancelled out and the control appeared dead.
it("treats a tap on a button as a control, not a gesture", () => {
expect(isControlSurfaceTouch([{ tag: "svg" }, { tag: "button" }, { tag: "div" }])).toBe(true);
});
it("treats the seek bar input as a control", () => {
expect(isControlSurfaceTouch([{ tag: "input" }, { tag: "div" }])).toBe(true);
});
it("treats anything inside the controls bar as a control", () => {
expect(
isControlSurfaceTouch([{ tag: "span" }, { tag: "div", isPlayerControls: true }])
).toBe(true);
});
it("lets a tap on the bare video surface through as a gesture", () => {
expect(isControlSurfaceTouch([{ tag: "video" }, { tag: "div" }, { tag: "div" }])).toBe(false);
});
it("is case-insensitive about tag names", () => {
expect(isControlSurfaceTouch([{ tag: "BUTTON" }])).toBe(true);
});
});
describe("synthesized touch-click suppression", () => {
// Regression: pausing renders a full-screen play-overlay button over the
// video, so the compatibility click Android synthesizes from the tap lands on