@banou/media-player 0.10.19 → 0.10.20

package/dist/index.js

@@ -2351,6 +2351,7 @@ ${gt}
 			e = Date.now() + zt;
 		};
 	}, [M]), d(() => () => clearInterval(S.current), []), /* @__PURE__ */ E("div", {
+		className: "control-bar",
 		css: Bt,
 		style: { ...c ? {
 			opacity: "0",
@@ -2681,47 +2682,51 @@ ${gt}
 	let s = W(), c = W((e) => e.hideUI), l = W((e) => e.setHideUI), u = W((e) => e.hasMedia), f = W((e) => e.passThroughPictureInPicture), m = p(void 0), h = p("mouse"), g = p({
 		x: -1,
 		y: -1
-	}), _ = p(null);
+	}), _ = p(!1), v = p(null);
 	d(() => () => clearTimeout(m.current), []), d(() => {
 		u || (clearTimeout(m.current), l(!1));
 	}, [u, l]);
-	let v = () => {
+	let y = () => {
 		u && l(!0);
-	}, y = (t) => {
-		_.current = t, typeof e == "function" ? e(t) : e && (e.current = t);
-	}, b = () => {
+	}, b = (t) => {
+		v.current = t, typeof e == "function" ? e(t) : e && (e.current = t);
+	}, x = () => {
 		if (s.passThroughPictureInPicture?.armed) return !0;
 		if (h.current !== "mouse") return !1;
 		let { x: e, y: t } = g.current;
-		if (!_.current || e < 0) return !1;
+		if (!v.current || e < 0) return !1;
 		let n = document.elementFromPoint(e, t);
-		return !!n && _.current.contains(n) && !n.closest(".video");
-	}, x = () => {
-		if (b()) {
-			m.current = setTimeout(x, Zt);
+		return !n || !v.current.contains(n) || n.closest(".video") ? !1 : !n.closest(".control-bar") || _.current || !!v.current.querySelector(".control-bar [aria-expanded=\"true\"]");
+	}, S = () => {
+		if (x()) {
+			m.current = setTimeout(S, Zt);
 			return;
 		}
-		v();
-	}, S = () => {
-		l(!1), clearTimeout(m.current), m.current = setTimeout(x, Zt);
-	};
+		y();
+	}, C = () => {
+		l(!1), clearTimeout(m.current), m.current = setTimeout(S, Zt);
+	}, w = (e) => {
+		h.current = e.pointerType, e.pointerType === "mouse" && (g.current = {
+			x: e.clientX,
+			y: e.clientY
+		}, C());
+	}, D = (e) => {
+		h.current = e.pointerType, _.current = !0;
+	}, O = () => {
+		_.current = !1;
+	}, k = p(!0);
 	return /* @__PURE__ */ E("div", {
 		css: en,
-		ref: y,
-		onPointerMove: (e) => {
-			h.current = e.pointerType, e.pointerType === "mouse" && (g.current = {
-				x: e.clientX,
-				y: e.clientY
-			}, S());
-		},
-		onPointerDown: (e) => {
-			h.current = e.pointerType;
-		},
+		ref: b,
+		onPointerMove: w,
+		onPointerDown: D,
+		onPointerUp: O,
+		onPointerCancel: O,
 		onMouseOut: (e) => {
 			let t = e.relatedTarget;
 			if (t && e.currentTarget.contains(t)) return;
 			let { left: n, right: r, top: i, bottom: a } = e.currentTarget.getBoundingClientRect();
-			e.clientX >= n && e.clientX < r && e.clientY >= i && e.clientY < a || (clearTimeout(m.current), v());
+			e.clientX >= n && e.clientX < r && e.clientY >= i && e.clientY < a || (clearTimeout(m.current), y());
 		},
 		className: c ? "hide" : "",
 		tabIndex: a === "player" ? -1 : void 0,
@@ -2738,23 +2743,27 @@ ${gt}
 			}, e)),
 			i === !1 ? null : /* @__PURE__ */ T(Vt, {
 				shortcuts: a,
-				root: _
+				root: v
 			}),
 			/* @__PURE__ */ T(Wt, {}),
 			/* @__PURE__ */ T(Xt, {}),
-			f?.armed && _.current ? /* @__PURE__ */ T("div", {
+			f?.armed && v.current ? /* @__PURE__ */ T("div", {
 				className: "pass-through",
-				style: { clipPath: $t(f.armed, _.current.getBoundingClientRect()) },
+				style: { clipPath: $t(f.armed, v.current.getBoundingClientRect()) },
 				onPointerOver: f.disarm
 			}) : null,
 			/* @__PURE__ */ E("div", {
 				className: "video",
-				onClick: () => {
+				onClick: (e) => {
 					if (h.current === "mouse") {
-						s.togglePaused();
+						if (e.detail > 1) return;
+						k.current = s.paused, s.togglePaused();
 						return;
 					}
-					c ? S() : (clearTimeout(m.current), v());
+					c ? C() : (clearTimeout(m.current), y());
+				},
+				onDoubleClick: () => {
+					h.current === "mouse" && (k.current ? s.pause() : s.play().catch(() => {}), s.toggleFullscreen());
 				},
 				children: [t ? /* @__PURE__ */ T("video", {
 					ref: t,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banou/media-player",
-  "version": "0.10.19",
+  "version": "0.10.20",
   "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

@@ -147,6 +147,8 @@ export const Chrome = ({ ref, onVideoRef, onSubtitleRef, overlay, controls, shor
   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 })
+  // a mouse button held down with the mouse still is a drag on the seekbar or the volume, not yet over
+  const pressed = useRef(false)
   const root = useRef<HTMLDivElement | null>(null)
 
   useEffect(() => () => clearTimeout(autoHide.current), [])
@@ -189,9 +191,10 @@ export const Chrome = ({ ref, onVideoRef, onSubtitleRef, overlay, controls, shor
    * 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.
+   * Only what actually takes pointer events can be hit: the chrome's own layers opt out, and an
+   * overlay item opts out until an app opts a child back in. The picture and the control bar are
+   * excluded here because resting on them is exactly when hiding is right, unless a button is held
+   * on the bar or one of its menus is open, which are still in use.
    *
    * The mouse only. A finger has no resting position, and `elementFromPoint` on the last tap would
    * keep the controls up forever after one press.
@@ -205,7 +208,9 @@ export const Chrome = ({ ref, onVideoRef, onSubtitleRef, overlay, controls, shor
     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')
+    if (!hit || !root.current.contains(hit) || hit.closest('.video')) return false
+    if (hit.closest('.control-bar')) return pressed.current || !!root.current.querySelector('.control-bar [aria-expanded="true"]')
+    return true
   }
 
   const hideUnlessTheMouseIsOnAControl = () => {
@@ -233,11 +238,20 @@ export const Chrome = ({ ref, onVideoRef, onSubtitleRef, overlay, controls, shor
 
   const onPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
     lastPointerType.current = event.pointerType
+    pressed.current = true
   }
 
+  const onPointerUp = () => {
+    pressed.current = false
+  }
+
+  const pausedBeforeClick = useRef(true)
+
   // play/pause with a mouse, show or hide the controls with a finger, which has no other way back
-  const onVideoClick = () => {
+  const onVideoClick = (event: React.MouseEvent) => {
     if (lastPointerType.current === 'mouse') {
+      if (event.detail > 1) return
+      pausedBeforeClick.current = player.paused
       player.togglePaused()
       return
     }
@@ -248,6 +262,15 @@ export const Chrome = ({ ref, onVideoRef, onSubtitleRef, overlay, controls, shor
     }
   }
 
+  // The first click toggled playback, so it is put back rather than toggled again: a remote media
+  // reports its pause late, and a second toggle would read it as still playing and pause it twice.
+  const onVideoDoubleClick = () => {
+    if (lastPointerType.current !== 'mouse') return
+    if (pausedBeforeClick.current) player.pause()
+    else void player.play().catch(() => {})
+    void player.toggleFullscreen()
+  }
+
   // relatedTarget alone is not enough: the browser fires mouseout with a null one while the pointer
   // still sits over the video, so a null is confirmed against the pointer's own coordinates.
   const onMouseOut: React.DOMAttributes<HTMLDivElement>['onMouseOut'] = (ev) => {
@@ -266,6 +289,8 @@ export const Chrome = ({ ref, onVideoRef, onSubtitleRef, overlay, controls, shor
       ref={setRoot}
       onPointerMove={onPointerMove}
       onPointerDown={onPointerDown}
+      onPointerUp={onPointerUp}
+      onPointerCancel={onPointerUp}
       onMouseOut={onMouseOut}
       className={hideUI ? 'hide' : ''}
       // focusable, so a click on the picture puts the focus, and with it the shortcuts, inside the player
@@ -294,7 +319,7 @@ export const Chrome = ({ ref, onVideoRef, onSubtitleRef, overlay, controls, shor
           />
         )
         : null}
-      <div className="video" onClick={onVideoClick}>
+      <div className="video" onClick={onVideoClick} onDoubleClick={onVideoDoubleClick}>
         {onVideoRef ? <video ref={onVideoRef} playsInline /> : null}
         {children}
       </div>

package/src/lib/react/components/control-bar.tsx

@@ -308,6 +308,7 @@ export const ControlBar = (
     // Armed, the whole bar takes no pointer events, or the rows around the control would still catch
     // the click at its box. The chrome's layer covers everything but the control meanwhile.
     <div
+      className='control-bar'
       css={style}
       style={{ ...hideUI ? { opacity: '0', pointerEvents: 'none' } : armed ? { pointerEvents: 'none' } : {} }}
     >