@banou/media-player 0.8.18 → 0.8.19

package/dist/index.js

@@ -2113,16 +2113,36 @@ ${X}
 		item: e
 	}];
 }), ut = ({ ref: e, onVideoRef: t, onCanvasRef: n, overlay: r, controls: i, children: a }) => {
-	let o = R(), s = R((e) => e.hideUI), c = R((e) => e.setHideUI), l = p(void 0), u = p("mouse");
+	let o = R(), s = R((e) => e.hideUI), c = R((e) => e.setHideUI), l = p(void 0), u = p("mouse"), f = p({
+		x: -1,
+		y: -1
+	}), m = p(null);
 	d(() => () => clearTimeout(l.current), []);
-	let f = () => {
-		c(!1), clearTimeout(l.current), l.current = setTimeout(() => c(!0), ot);
+	let h = (t) => {
+		m.current = t, typeof e == "function" ? e(t) : e && (e.current = t);
+	}, g = () => {
+		if (u.current !== "mouse") return !1;
+		let { x: e, y: t } = f.current;
+		if (!m.current || e < 0) return !1;
+		let n = document.elementFromPoint(e, t);
+		return !!n && m.current.contains(n) && !n.closest(".video");
+	}, _ = () => {
+		if (g()) {
+			l.current = setTimeout(_, ot);
+			return;
+		}
+		c(!0);
+	}, v = () => {
+		c(!1), clearTimeout(l.current), l.current = setTimeout(_, ot);
 	};
 	return /* @__PURE__ */ w("div", {
 		css: ct,
-		ref: e,
+		ref: h,
 		onPointerMove: (e) => {
-			u.current = e.pointerType, e.pointerType === "mouse" && f();
+			u.current = e.pointerType, e.pointerType === "mouse" && (f.current = {
+				x: e.clientX,
+				y: e.clientY
+			}, v());
 		},
 		onPointerDown: (e) => {
 			u.current = e.pointerType;
@@ -2154,7 +2174,7 @@ ${X}
 						o.togglePaused();
 						return;
 					}
-					s ? f() : (clearTimeout(l.current), c(!0));
+					s ? v() : (clearTimeout(l.current), c(!0));
 				},
 				children: [t ? /* @__PURE__ */ C("video", {
 					ref: t,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banou/media-player",
-  "version": "0.8.18",
+  "version": "0.8.19",
   "description": "A video player for containers and codecs the browser cannot play natively, remuxed on the fly",
   "type": "module",
   "main": "dist/index.js",

package/src/lib/react/components/chrome.tsx

@@ -108,13 +108,56 @@ export const Chrome = ({ ref, onVideoRef, onCanvasRef, overlay, controls, childr
   const autoHide = useRef<ReturnType<typeof setTimeout>>(undefined)
   // a tap and a click mean different things, so the last pointer kind is remembered
   const lastPointerType = useRef<string>('mouse')
+  // where the mouse last was, which is where it still is when nothing has moved
+  const pointer = useRef({ x: -1, y: -1 })
+  const root = useRef<HTMLDivElement | null>(null)
 
   useEffect(() => () => clearTimeout(autoHide.current), [])
 
+  // The caller's ref still gets the element: video.js attaches the fullscreen container through it,
+  // and this needs the same node to hit test against.
+  const setRoot = (element: HTMLDivElement | null) => {
+    root.current = element
+    if (typeof ref === 'function') ref(element)
+    else if (ref) (ref as { current: HTMLDivElement | null }).current = element
+  }
+
+  /**
+   * Is the mouse sitting on something it could press right now?
+   *
+   * The hide is a timeout on the last MOVEMENT, so a pointer parked on a control still runs it out
+   * and the control disappears from under the cursor. Everything then falls through to the video:
+   * `elementFromPoint` at the button's own centre returns the `video`, so a click pauses playback
+   * and a right click offers the browser's video menu rather than the control's. That is how a link
+   * drawn in an overlay stops behaving like a link, which is what this exists to stop.
+   *
+   * Only what actually takes pointer events can be hit, so this needs no list of selectors: the
+   * chrome's own layers opt out, an overlay item opts out until an app opts a child back in, and the
+   * picture is excluded here because resting on the picture is exactly when hiding is right.
+   *
+   * The mouse only. A finger has no resting position, and `elementFromPoint` on the last tap would
+   * keep the controls up forever after one press.
+   */
+  const pointerRestsOnAControl = () => {
+    if (lastPointerType.current !== 'mouse') return false
+    const { x, y } = pointer.current
+    if (!root.current || x < 0) return false
+    const hit = document.elementFromPoint(x, y)
+    return !!hit && root.current.contains(hit) && !hit.closest('.video')
+  }
+
+  const hideUnlessTheMouseIsOnAControl = () => {
+    if (pointerRestsOnAControl()) {
+      autoHide.current = setTimeout(hideUnlessTheMouseIsOnAControl, AUTO_HIDE_DELAY)
+      return
+    }
+    setHideUI(true)
+  }
+
   const reveal = () => {
     setHideUI(false)
     clearTimeout(autoHide.current)
-    autoHide.current = setTimeout(() => setHideUI(true), AUTO_HIDE_DELAY)
+    autoHide.current = setTimeout(hideUnlessTheMouseIsOnAControl, AUTO_HIDE_DELAY)
   }
 
   // Hides after the delay whether or not playback is running. A finger produces no move, so this is
@@ -122,6 +165,7 @@ export const Chrome = ({ ref, onVideoRef, onCanvasRef, overlay, controls, childr
   const onPointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
     lastPointerType.current = event.pointerType
     if (event.pointerType !== 'mouse') return
+    pointer.current = { x: event.clientX, y: event.clientY }
     reveal()
   }
 
@@ -157,7 +201,7 @@ export const Chrome = ({ ref, onVideoRef, onCanvasRef, overlay, controls, childr
   return (
     <div
       css={style}
-      ref={ref}
+      ref={setRoot}
       onPointerMove={onPointerMove}
       onPointerDown={onPointerDown}
       onMouseOut={onMouseOut}