@banou/media-player 0.10.12 → 0.10.14

package/dist/engine/index.js

@@ -1,2 +1,2 @@
-import { a as e, c as t, d as n, f as r, i, l as a, n as o, o as s, r as c, s as l, t as u, u as d } from "../engine-DKjUYAmJ.js";
+import { a as e, c as t, d as n, f as r, i, l as a, n as o, o as s, r as c, s as l, t as u, u as d } from "../engine-DdbOiEX3.js";
 export { i as DEFAULT_BUFFER_SIZE, e as MediaElementError, a as SUBTITLES_OFF, u as createPictureInPicture, d as createSubtitleRenderer, c as createThumbnailGenerator, n as getTimeRanges, s as isMediaElementError, o as pictureInPictureMode, l as startPlayback, t as terminateRemuxer, r as updateSourceBuffer };

package/dist/{engine-DKjUYAmJ.js → engine-DdbOiEX3.js}

@@ -239,139 +239,136 @@ var i = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 			m.addEventListener("sourceopen", a, { once: !0 }), m.addEventListener("sourceclose", o, { once: !0 }), m.addEventListener("error", o, { once: !0 });
 		}), { appendBuffer: F, unbufferRange: se, updateTimestampOffset: ce, endOfStream: le } = o(A, m);
 		await F(e.data), e.subtitles?.length && s.pushFragments(e.subtitles), te?.();
-		let I = !1, L = !1, R = 0, z, B = () => z ?? n.currentTime, V = !1, H = 0, U = 0, W = null, G = 0, ue = 0, K = !1, de = 0, q = (e, t, n = !1) => {
+		let I = !1, L = !1, R = 0, z, ue = () => z ?? n.currentTime, B = !1, de = 0, V = 0, H = null, U = 0, W = 0, G = !1, fe = 0, K = !0, q = (e, t, n = !1) => {
 			let r = e?.message === "Cancelled";
-			t && r || (console.error(e), (!K || n) && (K = !0, ne?.(r ? Error("Reading the video file failed", { cause: e }) : e)));
-		}, fe = async (e = !1) => {
+			t && r || (console.error(e), (!G || n) && (G = !0, ne?.(r ? Error("Reading the video file failed", { cause: e }) : e)));
+		}, pe = async (e = !1) => {
 			if (R > 0 && !e) return;
-			let t = n.currentTime, r = e ? x : v, a = e ? S : y, o = i(A);
-			o.length && o[0].start < t + r && await se(0, t + r);
-			for (let { end: e } of o) e > t + a && await se(t + a, e);
-		}, pe = () => {
+			let t = n.currentTime, r = e ? x : v, a = e ? S : y, o = i(A), s = (e, t) => (K = !1, se(e, t));
+			o.length && o[0].start < t + r && await s(0, t + r);
+			for (let { end: e } of o) e > t + a && await s(t + a, e);
+		}, me = () => {
 			let e = i(A);
 			if (!e.length) return !0;
-			let t = B(), n = e.find((e) => e.start <= t + T && t < e.end);
+			let t = ue(), n = e.find((e) => e.start <= t + T && t < e.end);
 			return n && n.end >= t + y ? !1 : !n || n.end < t + b;
-		}, me = () => {
-			let e = n.currentTime;
-			return i(A).find((t) => t.start <= e + T && e < t.end);
-		}, he = () => {
-			let e = me();
-			return !!e && e.end >= ue - .1;
-		}, ge = () => {
+		}, he = (e) => i(A).find((t) => t.start <= e + T && e < t.end), ge = () => he(n.currentTime), _e = (e = n.currentTime) => {
+			let t = he(e);
+			return e >= W - .1 || !!t && t.end >= W - .1;
+		}, ve = () => {
 			let e = i(A).map((e) => e.end);
-			e.length && (ue = Math.max(ue, ...e));
+			e.length && (W = Math.max(W, ...e));
 		}, J = async (e) => {
-			L = !0, W = null, G = 0, de = e;
-			let t = ++U;
+			L = !0, H = null, U = 0, fe = e, K = !0;
+			let t = ++V;
 			try {
 				let { data: n, pts: r, subtitles: i, finished: a } = await j.seek(e);
-				if (N || t !== U || (a && (V = !0), i?.length && s.pushFragments(i), await ce(r), N || t !== U)) return;
-				n.byteLength && (await F(n), ge());
+				if (N || t !== V || (a && (B = !0), i?.length && s.pushFragments(i), await ce(r), N || t !== V)) return;
+				n.byteLength && (await F(n), ve());
 			} catch (e) {
-				q(e, N || t !== U);
+				t === V && (K = !1), q(e, N || t !== V);
 			} finally {
-				t === U && (L = !1);
+				t === V && (L = !1);
 			}
-		}, _e = async () => {
-			let e = W;
+		}, ye = async () => {
+			let e = H;
 			if (e) try {
-				await F(e), ge(), W === e && (W = null, G = 0);
+				await F(e), ve(), H === e && (H = null, U = 0);
 			} catch (t) {
-				if (W !== e) return;
+				if (H !== e) return;
 				if (t?.name === "QuotaExceededError") {
-					let t = await fe(!0).then(() => !0, () => !1);
-					if (W !== e) return;
+					let t = await pe(!0).then(() => !0, () => !1);
+					if (H !== e) return;
 					if (t) {
-						V = !1, await J(me()?.end ?? n.currentTime);
+						B = !1, await J(ge()?.end ?? n.currentTime);
 						return;
 					}
 				}
-				if (G += 1, G < C) return;
-				throw W = null, t;
+				if (U += 1, U < C) return;
+				throw H = null, t;
 			}
-		}, ve = async () => {
-			if (I || L || Q !== void 0 || N || !W && (V || !pe())) return;
-			let e = ++H, t = U, n = () => N || e !== H || t !== U;
+		}, be = async () => {
+			if (I || L || Q !== void 0 || N || !H && (B || !me())) return;
+			let e = ++de, t = V, n = () => N || e !== de || t !== V;
 			I = !0;
 			try {
-				if (!W) {
+				if (!H) {
 					let { data: e, subtitles: t, finished: r } = await j.read();
-					if (n() || (r && (V = !0), t?.length && s.pushFragments(t), !e.byteLength)) return;
-					W = e, G = 0;
+					if (n() || (r && (B = !0), t?.length && s.pushFragments(t), !e.byteLength)) return;
+					H = e, U = 0;
 				}
-				await _e(), !n() && K && (K = !1, re?.());
+				await ye(), !n() && G && (G = !1, re?.());
 			} catch (e) {
 				q(e, n());
 			} finally {
-				e === H && (I = !1);
+				e === de && (I = !1);
 			}
-		}, ye = (e) => e >= de && be(e), be = (e) => i(A).some((t) => t.start <= e && e < t.end), Y = (e) => {
-			let t = i(A).find((t) => t.start <= e + T && e < t.end);
+		}, xe = (e) => e >= fe && Se(e) && Ce(e), Se = (e) => i(A).some((t) => t.start <= e && e < t.end), Y = (e) => {
+			let t = he(e);
 			return t ? t.end - e : 0;
-		}, xe = async (e) => {
-			if (!N && !(be(e) && Y(e) >= E)) {
-				V = !1, R++, z = e;
+		}, Ce = (e) => Y(e) >= E || B && _e(e), we = async (e) => {
+			if (!N && !(Se(e) && Ce(e))) {
+				B = !1, R++, z = e;
 				try {
-					be(e) || await J(e);
-					let t = U;
-					for (let n = 0; n < ee && !(N || t !== U || V || Y(e) >= E); n++) {
+					await J(e);
+					let t = V;
+					for (let n = 0; n < ee && !(N || t !== V || B || Y(e) >= E); n++) {
 						let t = Y(e);
-						if (await ve(), Y(e) <= t) break;
+						if (await be(), Y(e) <= t) break;
 					}
 				} finally {
 					R--, z === e && (z = void 0);
 				}
 			}
-		}, Se = 0, X = null, Z, Ce = (e) => {
-			let t = performance.now(), n = t - Se;
+		}, Te = 0, X = null, Z, Ee = (e) => {
+			let t = performance.now(), n = t - Te;
 			if (n >= D) {
-				Se = t, X = null, ie?.(e);
+				Te = t, X = null, ie?.(e);
 				return;
 			}
 			X = e, !Z && (Z = setTimeout(() => {
 				Z = void 0;
 				let e = X;
-				X = null, !(e === null || N) && (Se = performance.now(), ie?.(e));
+				X = null, !(e === null || N) && (Te = performance.now(), ie?.(e));
 			}, D - n));
 		};
 		M.push(() => {
 			Z && clearTimeout(Z);
 		});
-		let we = 0, Q;
+		let De = 0, Q;
 		M.push(() => {
 			Q && clearTimeout(Q);
 		});
-		let Te = () => {
+		let Oe = () => {
 			let t = n.currentTime, r = e.info.input.duration || n.duration;
-			r > 0 && Ce(Math.min(Math.max(t / r, 0), 1));
-			let i = performance.now(), a = i - we < O;
-			if (we = i, !ye(t) && !(L && Math.abs(t - de) < .001)) {
-				if (V = !1, Q && clearTimeout(Q), !a) {
+			r > 0 && Ee(Math.min(Math.max(t / r, 0), 1));
+			let i = performance.now(), a = i - De < O;
+			if (De = i, !xe(t) && !(K && (L || Y(t) > 0) && Math.abs(t - fe) < .001)) {
+				if (B = !1, Q && clearTimeout(Q), !a) {
 					Q = void 0, J(t);
 					return;
 				}
 				Q = setTimeout(() => {
 					if (Q = void 0, N) return;
 					let e = n.currentTime;
-					ye(e) || (V = !1, J(e));
+					xe(e) || (B = !1, J(e));
 				}, O);
 			}
 		};
-		n.addEventListener("seeking", Te), M.push(() => n.removeEventListener("seeking", Te));
-		let $ = !1, Ee = () => {
+		n.addEventListener("seeking", Oe), M.push(() => n.removeEventListener("seeking", Oe));
+		let $ = !1, ke = () => {
 			if ($) return;
 			$ = !0;
 			let e = n.error;
 			q(new g(`the media element failed: ${e?.message ?? "unknown"}`, { cause: e }), !1, !0);
 		};
-		n.addEventListener("error", Ee), M.push(() => n.removeEventListener("error", Ee));
-		let De = setInterval(() => {
-			$ || n.error || (fe().catch(() => {}), ve().catch((e) => q(e, !1)), V && !W && he() && m.readyState === "open" && le().catch(() => {}));
+		n.addEventListener("error", ke), M.push(() => n.removeEventListener("error", ke));
+		let Ae = setInterval(() => {
+			$ || n.error || (pe().catch(() => {}), be().catch((e) => q(e, !1)), B && !H && _e() && m.readyState === "open" && le().catch(() => {}));
 		}, 100);
-		return M.push(() => clearInterval(De)), {
+		return M.push(() => clearInterval(Ae)), {
 			destroy: P,
-			prepareSeek: xe,
+			prepareSeek: we,
 			videoElement: n,
 			selectSubtitleStream: (e) => s.selectStream(e),
 			indexes: e.indexes ?? [],
@@ -512,8 +509,8 @@ var i = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 	} catch (e) {
 		throw A(c), e;
 	}
-}, se = 1280, ce = 1920, le = 250, I = 100, L = () => typeof HTMLCanvasElement < "u" && "captureStream" in HTMLCanvasElement.prototype, R = () => typeof document < "u" && typeof HTMLVideoElement < "u" && typeof HTMLVideoElement.prototype.requestPictureInPicture == "function" && !!document.pictureInPictureEnabled, z = () => typeof HTMLVideoElement < "u" && "mozCaptureStream" in HTMLVideoElement.prototype, B = () => L() ? R() ? "window" : z() ? "burn-in" : null : null, V = (e) => {
-	let { video: t, subtitles: n } = e, r = e.mode ?? B() ?? "window", i = e.maxWidth ?? (r === "burn-in" ? ce : se), a, o, s, c = !1, l = !1, u = !1, d = !1, f, p = () => r === "burn-in" ? !!a : !!a && document.pictureInPictureElement === a.mirror, m = (e, r) => {
+}, se = 1280, ce = 1920, le = 250, I = 100, L = () => typeof HTMLCanvasElement < "u" && "captureStream" in HTMLCanvasElement.prototype, R = () => typeof document < "u" && typeof HTMLVideoElement < "u" && typeof HTMLVideoElement.prototype.requestPictureInPicture == "function" && !!document.pictureInPictureEnabled, z = () => typeof HTMLVideoElement < "u" && "mozCaptureStream" in HTMLVideoElement.prototype, ue = () => L() ? R() ? "window" : z() ? "burn-in" : null : null, B = (e) => {
+	let { video: t, subtitles: n } = e, r = e.mode ?? ue() ?? "window", i = e.maxWidth ?? (r === "burn-in" ? ce : se), a, o, s, c = !1, l = !1, u = !1, d = !1, f, p = () => r === "burn-in" ? !!a : !!a && document.pictureInPictureElement === a.mirror, m = (e, r) => {
 		r.drawImage(t, 0, 0, e.width, e.height);
 		let i = n.querySelector("canvas");
 		i && i.width > 0 && i.height > 0 && r.drawImage(i, 0, 0, e.width, e.height);
@@ -629,4 +626,4 @@ var i = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 	};
 };
 //#endregion
-export { g as a, A as c, i as d, o as f, k as i, s as l, B as n, _ as o, F as r, te as s, V as t, h as u };
+export { g as a, A as c, i as d, o as f, k as i, s as l, ue as n, _ as o, F as r, te as s, B as t, h as u };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { l as e, n as t, o as n, r, s as i, t as a, u as o } from "./engine-DKjUYAmJ.js";
+import { l as e, n as t, o as n, r, s as i, t as a, u as o } from "./engine-DdbOiEX3.js";
 import { Children as s, Fragment as c, isValidElement as l, useCallback as u, useEffect as d, useMemo as f, useRef as p, useState as m, useSyncExternalStore as h } from "react";
 import { css as g, keyframes as _ } from "@emotion/react";
 import { createPlayer as v, useContainerAttach as y, useMediaAttach as b } from "@videojs/react";
@@ -2123,15 +2123,6 @@ ${gt}
 		})]
 	});
 }, It = .05, Lt = 5, Rt = 50, zt = 1e3, Bt = g`
-  display: flex;
-  flex-direction: column;
-  gap: calc(0.4 * var(--mp-unit));
-
-  .hint {
-    opacity: 0.72;
-    font-size: 0.9em;
-  }
-`, Vt = g`
   position: absolute;
   bottom: 0;
   width: 100%;
@@ -2261,7 +2252,7 @@ ${gt}
       }
     }
   }
-`, Ht = () => {
+`, Vt = () => {
 	let e = G(), t = G((e) => e.paused), n = G((e) => e.currentTime), r = G((e) => e.duration), i = G((e) => e.seekingTo), a = G((e) => e.fullscreen), o = G((e) => e.hideUI), s = G((e) => e.togglePictureInPicture), c = G((e) => e.pictureInPictureMode), l = G((e) => e.burnedInSubtitles), f = G((e) => e.passThroughPictureInPicture), h = G((e) => e.subtitleTracks), g = G((e) => e.requestSeek), [_, v] = m(null), y = p(null), b = p(void 0), x = c === "burn-in", S = h.length > 0, C = r > 0 && n === r, w = u(({ direction: t, stepSize: n }) => {
 		let r = Ne(e.volume), i = t === "up" ? n : -n, a = Math.max(0, Math.min(1, r + i)), o = e.muted;
 		e.setVolume(Me(a)), o && !e.muted && e.toggleMuted();
@@ -2332,7 +2323,7 @@ ${gt}
 			e = Date.now() + zt;
 		};
 	}, [k]), d(() => () => clearInterval(b.current), []), /* @__PURE__ */ E("div", {
-		css: Vt,
+		css: Bt,
 		style: { ...o ? {
 			opacity: "0",
 			pointerEvents: "none"
@@ -2399,16 +2390,7 @@ ${gt}
 								alt: ""
 							})
 						}),
-						toolTipText: /* @__PURE__ */ E("span", {
-							css: Bt,
-							children: [/* @__PURE__ */ T("span", {
-								className: "lead",
-								children: x ? S ? l ? "Subtitles are in the picture" : "Put the subtitles in the picture" : "This file has no subtitles" : "Picture in picture"
-							}), x && S ? /* @__PURE__ */ T("span", {
-								className: "hint",
-								children: "Then hover the video and click your browser's own pop out button"
-							}) : null]
-						})
+						toolTipText: /* @__PURE__ */ T("span", { children: x ? S ? l ? "Subtitles are in the picture" : "Put the subtitles in the picture" : "This file has no subtitles" : "Picture in picture" })
 					}) : null,
 					/* @__PURE__ */ T($, {
 						id: "full-screen",
@@ -2427,7 +2409,7 @@ ${gt}
 			})]
 		})]
 	});
-}, Ut = 9e3, Wt = g`
+}, Ht = 9e3, Ut = g`
   position: absolute;
   inset: 0;
   z-index: 2;
@@ -2458,22 +2440,11 @@ ${gt}
     opacity: 1;
   }
 
-  .words {
-    display: flex;
-    flex-direction: column;
-    gap: calc(0.3 * var(--mp-unit));
-  }
-
-  .title {
-    ${Z.bMedium.bold}
+  .text {
+    ${Z.bMedium.medium}
     color: #fff;
   }
 
-  .body {
-    ${Z.bSmall.regular}
-    color: rgba(255, 255, 255, 0.75);
-  }
-
   /* Points at the edge the browser's control lives on, which is the whole message. */
   .arrow {
     flex: none;
@@ -2481,7 +2452,7 @@ ${gt}
     line-height: 1;
     color: #fff;
   }
-`, Gt = () => {
+`, Wt = () => {
 	let e = G((e) => e.burnedInSubtitles), t = G((e) => e.pictureInPictureMode), [n, r] = m(!1);
 	return d(() => {
 		if (t !== "burn-in" || !e) {
@@ -2489,23 +2460,17 @@ ${gt}
 			return;
 		}
 		r(!0);
-		let n = setTimeout(() => r(!1), Ut);
+		let n = setTimeout(() => r(!1), Ht);
 		return () => clearTimeout(n);
 	}, [t, e]), t !== "burn-in" || !e ? null : /* @__PURE__ */ T("div", {
-		css: Wt,
+		css: Ut,
 		className: n ? "show" : "",
 		role: "status",
 		children: /* @__PURE__ */ E("div", {
 			className: "card",
-			children: [/* @__PURE__ */ E("div", {
-				className: "words",
-				children: [/* @__PURE__ */ T("div", {
-					className: "title",
-					children: "Subtitles are in the picture"
-				}), /* @__PURE__ */ T("div", {
-					className: "body",
-					children: "Now hover the video and click your browser's own pop out button"
-				})]
+			children: [/* @__PURE__ */ T("div", {
+				className: "text",
+				children: "Now click your browser's pop out button"
 			}), /* @__PURE__ */ T("div", {
 				className: "arrow",
 				"aria-hidden": "true",
@@ -2513,10 +2478,10 @@ ${gt}
 			})]
 		})
 	});
-}, Kt = 1, qt = 6e3, Jt = 1, Yt = {
+}, Gt = 1, Kt = 6e3, qt = 1, Jt = {
 	opening: "Skip Opening",
 	ending: "Skip Ending"
-}, Xt = g`
+}, Yt = g`
   position: absolute;
   inset: 0;
   z-index: 2;
@@ -2567,10 +2532,10 @@ ${gt}
       bottom: calc(9 * var(--mp-unit));
     }
   }
-`, Zt = () => {
+`, Xt = () => {
 	let e = G((e) => e.chapters), t = G((e) => e.currentTime), n = G((e) => e.requestSeek), r = G((e) => e.seekPreview), i = G(), a = f(() => ct(e), [e]), o = f(() => {
 		if (typeof t != "number") return;
-		let n = e.findIndex((e, n) => a[n] !== void 0 && e.start - Kt <= t && t < e.end), r = n >= 0 ? a[n] : void 0;
+		let n = e.findIndex((e, n) => a[n] !== void 0 && e.start - Gt <= t && t < e.end), r = n >= 0 ? a[n] : void 0;
 		return r ? {
 			kind: r,
 			end: e[n].end
@@ -2582,7 +2547,7 @@ ${gt}
 	]), s = p(0), [c, l] = m(0);
 	d(() => {
 		let e = typeof t == "number" ? t : 0, n = s.current;
-		s.current = e, e < n - Jt && l((e) => e + 1);
+		s.current = e, e < n - qt && l((e) => e + 1);
 	}, [t]);
 	let [u, h] = m(!1), g = o ? `${o.kind}@${o.end}` : "";
 	return d(() => {
@@ -2591,12 +2556,12 @@ ${gt}
 			return;
 		}
 		h(!0);
-		let e = setTimeout(() => h(!1), qt);
+		let e = setTimeout(() => h(!1), Kt);
 		return () => clearTimeout(e);
 	}, [g, c]), d(() => {
 		o || h(!1);
 	}, [o]), o ? /* @__PURE__ */ T("div", {
-		css: Xt,
+		css: Yt,
 		className: u && !r ? "show" : "",
 		children: /* @__PURE__ */ T("button", {
 			type: "button",
@@ -2604,10 +2569,10 @@ ${gt}
 			onClick: () => {
 				h(!1), n ? n(o.end) : i.seek(o.end);
 			},
-			children: Yt[o.kind]
+			children: Jt[o.kind]
 		})
 	}) : null;
-}, Qt = 3e3, $t = g`
+}, Zt = 3e3, Qt = g`
   position: absolute;
   inset: 0;
   z-index: 2;
@@ -2618,10 +2583,10 @@ ${gt}
      hoverable while faded out, popping a tooltip over nothing. It cascades where pointer-events does
      not, and transitioning it holds the item on screen for the length of the fade. */
   transition: opacity 0.1s cubic-bezier(.4,0,1,1), visibility 0.1s;
-`, en = (e, t) => {
+`, $t = (e, t) => {
 	let n = e.left - t.left, r = e.top - t.top;
 	return `path(evenodd, 'M0 0H${t.width}V${t.height}H0Z M${n} ${r}H${n + e.width}V${r + e.height}H${n}Z')`;
-}, tn = g`
+}, en = g`
   position: relative;
   background-color: black;
   display: flex;
@@ -2675,13 +2640,13 @@ ${gt}
   &.hide {
     cursor: none;
   }
-`, nn = (e, t = "") => s.toArray(e).flatMap((e, n) => {
+`, tn = (e, t = "") => s.toArray(e).flatMap((e, n) => {
 	let r = `${t}${l(e) && e.key != null ? e.key : n}`;
-	return l(e) && e.type === c ? nn(e.props.children, `${r}/`) : [{
+	return l(e) && e.type === c ? tn(e.props.children, `${r}/`) : [{
 		key: r,
 		item: e
 	}];
-}), rn = ({ ref: e, onVideoRef: t, onSubtitleRef: n, overlay: r, controls: i, children: a }) => {
+}), nn = ({ ref: e, onVideoRef: t, onSubtitleRef: n, overlay: r, controls: i, children: a }) => {
 	let o = G(), s = G((e) => e.hideUI), c = G((e) => e.setHideUI), l = G((e) => e.hasMedia), u = G((e) => e.passThroughPictureInPicture), f = p(void 0), m = p("mouse"), h = p({
 		x: -1,
 		y: -1
@@ -2702,15 +2667,15 @@ ${gt}
 		return !!n && g.current.contains(n) && !n.closest(".video");
 	}, b = () => {
 		if (y()) {
-			f.current = setTimeout(b, Qt);
+			f.current = setTimeout(b, Zt);
 			return;
 		}
 		_();
 	}, x = () => {
-		c(!1), clearTimeout(f.current), f.current = setTimeout(b, Qt);
+		c(!1), clearTimeout(f.current), f.current = setTimeout(b, Zt);
 	};
 	return /* @__PURE__ */ E("div", {
-		css: tn,
+		css: en,
 		ref: v,
 		onPointerMove: (e) => {
 			m.current = e.pointerType, e.pointerType === "mouse" && (h.current = {
@@ -2730,8 +2695,8 @@ ${gt}
 		className: s ? "hide" : "",
 		children: [
 			/* @__PURE__ */ T(ke, { onSubtitleRef: n }),
-			nn(r).map(({ key: e, item: t }) => /* @__PURE__ */ T("div", {
-				css: $t,
+			tn(r).map(({ key: e, item: t }) => /* @__PURE__ */ T("div", {
+				css: Qt,
 				style: { ...s ? {
 					opacity: "0",
 					visibility: "hidden",
@@ -2739,12 +2704,12 @@ ${gt}
 				} : {} },
 				children: t
 			}, e)),
-			i === !1 ? null : /* @__PURE__ */ T(Ht, {}),
-			/* @__PURE__ */ T(Gt, {}),
-			/* @__PURE__ */ T(Zt, {}),
+			i === !1 ? null : /* @__PURE__ */ T(Vt, {}),
+			/* @__PURE__ */ T(Wt, {}),
+			/* @__PURE__ */ T(Xt, {}),
 			u?.armed && g.current ? /* @__PURE__ */ T("div", {
 				className: "pass-through",
-				style: { clipPath: en(u.armed, g.current.getBoundingClientRect()) },
+				style: { clipPath: $t(u.armed, g.current.getBoundingClientRect()) },
 				onPointerOver: u.disarm
 			}) : null,
 			/* @__PURE__ */ E("div", {
@@ -2763,7 +2728,7 @@ ${gt}
 			})
 		]
 	});
-}, an = ({ options: e, children: t }) => {
+}, rn = ({ options: e, children: t }) => {
 	let n = "media" in e ? e : null, r = n ? null : e, { title: i, chapters: a } = e, { size: o, downloadedRanges: s, publicPath: c, libavWorkerUrl: l, read: u, thumbnailRead: h, thumbnailsEnabled: g } = r ?? {}, _ = b(), v = y(), [x, S] = m(null), [C, w] = m(null), E = n?.media ?? x;
 	d(() => (_?.(E), () => _?.(null)), [E, _]);
 	let { expose: D } = e, O = D === !0 ? {} : D || void 0, k = p(O);
@@ -2868,7 +2833,7 @@ ${gt}
 		});
 	}, [K, X]), d(() => {
 		a && K({ chapters: a });
-	}, [K, a]), /* @__PURE__ */ T(rn, {
+	}, [K, a]), /* @__PURE__ */ T(nn, {
 		ref: v,
 		onVideoRef: n ? void 0 : S,
 		onSubtitleRef: w,
@@ -2876,7 +2841,7 @@ ${gt}
 		controls: e.controls,
 		children: t
 	});
-}, on = g`
+}, an = g`
   /**
    * The chrome's whole scale, in one place.
    *
@@ -2946,17 +2911,17 @@ ${gt}
   height: 100%;
   width: 100%;
   overflow: hidden;
-`, sn = (e) => /* @__PURE__ */ T("div", {
-	css: on,
-	children: /* @__PURE__ */ T(W.Provider, { children: /* @__PURE__ */ T(an, {
+`, on = (e) => /* @__PURE__ */ T("div", {
+	css: an,
+	children: /* @__PURE__ */ T(W.Provider, { children: /* @__PURE__ */ T(rn, {
 		options: e,
 		children: e.children
 	}) })
-}), cn = (e) => !!e && typeof e == "object" && "at" in e, ln = (e) => !!e && typeof e == "object" && "selection" in e, un = ({ blob: e, name: t }) => ({
+}), sn = (e) => !!e && typeof e == "object" && "at" in e, cn = (e) => !!e && typeof e == "object" && "selection" in e, ln = ({ blob: e, name: t }) => ({
 	length: e.size,
 	name: t ?? (e instanceof File ? e.name : void 0),
 	read: (t, n) => e.slice(t, t + n).arrayBuffer()
-}), dn = async (e, t) => {
+}), un = async (e, t) => {
 	let n = await fetch(e, {
 		headers: { Range: "bytes=0-1" },
 		credentials: t
@@ -2966,8 +2931,8 @@ ${gt}
 	if (!Number.isFinite(i) || i <= 0) throw Error("The source did not report its length");
 	if (!r && n.status !== 206) throw Error("The source does not support range requests");
 	return i;
-}, fn = async ({ url: e, length: t, name: n, credentials: r }) => {
-	let i = t ?? await dn(e, r);
+}, dn = async ({ url: e, length: t, name: n, credentials: r }) => {
+	let i = t ?? await un(e, r);
 	return {
 		length: i,
 		name: n,
@@ -2982,9 +2947,9 @@ ${gt}
 			return o.arrayBuffer();
 		}
 	};
-}, pn = async (e) => {
-	if ("blob" in e) return un(e);
-	if ("url" in e) return fn(e);
+}, fn = async (e) => {
+	if ("blob" in e) return ln(e);
+	if ("url" in e) return dn(e);
 	if ("read" in e) return {
 		length: e.length,
 		name: e.name,
@@ -2993,4 +2958,4 @@ ${gt}
 	throw Error(`Unknown source type: ${e}`);
 };
 //#endregion
-export { sn as MediaPlayer, sn as default, W as Player, e as SUBTITLES_OFF, a as createPictureInPicture, o as createSubtitleRenderer, r as createThumbnailGenerator, pn as inputToRemuxerInput, ln as isDelegatedTracks, cn as isExternalThumbnails, U as sourceFeature, i as startPlayback, de as usePictureInPicture, G as usePlayer, ue as useSeekThumbnails };
+export { on as MediaPlayer, on as default, W as Player, e as SUBTITLES_OFF, a as createPictureInPicture, o as createSubtitleRenderer, r as createThumbnailGenerator, fn as inputToRemuxerInput, cn as isDelegatedTracks, sn as isExternalThumbnails, U as sourceFeature, i as startPlayback, de as usePictureInPicture, G as usePlayer, ue as useSeekThumbnails };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banou/media-player",
-  "version": "0.10.12",
+  "version": "0.10.14",
   "description": "A video player for containers and codecs the browser cannot play natively, remuxed on the fly",
   "type": "module",
   "main": "dist/index.js",
@@ -23,10 +23,7 @@
   },
   "files": [
     "dist",
-    "src/lib",
-    "!src/lib/**/*.test.ts",
-    "!src/lib/**/*.test.tsx",
-    "!src/lib/**/*.fixture.ts"
+    "src/lib"
   ],
   "scripts": {
     "dev": "npm run copy-assets && vp dev --port 4560",

package/src/lib/engine/playback.ts

@@ -280,6 +280,8 @@ export const startPlayback = async (options: PlaybackOptions): Promise<PlaybackC
     let outstandingError = false
     // where the remuxer was last positioned, which is the floor of what it can still read forward from
     let lastSeekPosition = 0
+    // whether nothing was removed since, so everything read forward from there is still buffered
+    let positioned = true
 
     // 'Cancelled' covers both an aborted task and a read that gave up, so it is only noise mid-seek
     const reportError = (error: unknown, aborted: boolean, terminal = false) => {
@@ -313,12 +315,16 @@ export const startPlayback = async (options: PlaybackOptions): Promise<PlaybackC
       const pre = tight ? PRE_EVICT_TIGHT : PRE_EVICT
       const post = tight ? POST_EVICT_TIGHT : POST_EVICT
       const ranges = getTimeRanges(sourceBuffer)
+      const remove = (start: number, end: number) => {
+        positioned = false
+        return unbufferRange(start, end)
+      }
       // From 0, never from the reported start: once a group is removed, Firefox 151 reports the start
       // 1 ms after the keyframe it still holds, so a remove from there keeps that frame for good
       // (measured 2026-10-11).
-      if (ranges.length && ranges[0].start < ct + pre) await unbufferRange(0, ct + pre)
+      if (ranges.length && ranges[0].start < ct + pre) await remove(0, ct + pre)
       for (const { end } of ranges) {
-        if (end > ct + post) await unbufferRange(ct + post, end)
+        if (end > ct + post) await remove(ct + post, end)
       }
     }
 
@@ -344,15 +350,16 @@ export const startPlayback = async (options: PlaybackOptions): Promise<PlaybackC
       return !range || range.end < ct + BUFFER_TARGET
     }
 
-    const playheadRange = () => {
-      const ct = videoElement.currentTime
-      return getTimeRanges(sourceBuffer).find((r) => r.start <= ct + BOUNDARY_SLACK && ct < r.end)
-    }
+    const rangeAt = (time: number) =>
+      getTimeRanges(sourceBuffer).find((r) => r.start <= time + BOUNDARY_SLACK && time < r.end)
+    const playheadRange = () => rangeAt(videoElement.currentTime)
 
-    // the end may only be signalled once the playhead's own range covers it
-    const atEnd = () => {
-      const range = playheadRange()
-      return !!range && range.end >= lastAppendedEnd - 0.1
+    // whether a position is at the furthest append, or the range holding it runs to it; the end may only
+    // be signalled then. Past the shorter track's end no range holds the playhead while the MediaSource is
+    // open, so a range alone never re-armed the end of a file whose tracks end 1 s apart (measured 2026-10-11)
+    const atEnd = (time = videoElement.currentTime) => {
+      const range = rangeAt(time)
+      return time >= lastAppendedEnd - 0.1 || (!!range && range.end >= lastAppendedEnd - 0.1)
     }
     const trackAppendedEnd = () => {
       const ends = getTimeRanges(sourceBuffer).map((r) => r.end)
@@ -364,6 +371,7 @@ export const startPlayback = async (options: PlaybackOptions): Promise<PlaybackC
       pending = null
       pendingAttempts = 0
       lastSeekPosition = time
+      positioned = true
       const generation = ++seekGeneration
       try {
         // `seek` ends by reading, and that read can hit the end of the file, which finalizes the
@@ -381,6 +389,7 @@ export const startPlayback = async (options: PlaybackOptions): Promise<PlaybackC
           trackAppendedEnd()
         }
       } catch (error) {
+        if (generation === seekGeneration) positioned = false
         reportError(error, destroyed || generation !== seekGeneration)
       } finally {
         if (generation === seekGeneration) seeking = false
@@ -454,12 +463,14 @@ export const startPlayback = async (options: PlaybackOptions): Promise<PlaybackC
      * BOTH the input and the output context and re-runs write_header, because the fragmented mp4 muxer
      * cannot rewind. Skipping it when the target is already playable is most of what a seek costs.
      *
-     * Both conditions are needed. Buffered alone is not enough: landing before the last remuxer position
-     * means the reader is somewhere ahead, so the gap between here and it can never be filled without a
-     * seek, and playback would stall at the end of this range instead. At or after it, the bytes from
-     * here to the read cursor are contiguous and reading simply carries on.
+     * Buffered alone is not enough: landing before the last remuxer position means the reader is
+     * somewhere ahead, so the gap between here and it can never be filled without a seek, and playback
+     * would stall at the end of this range instead. Nor is landing after it: the range holding the
+     * target can be an island ahead of the reader, so the target also needs its runway, or the element
+     * plays to the island's end and waits there until the reader has read the whole gap, which over a
+     * torrent is as long as downloading it.
      */
-    const alreadyPlayable = (time: number) => time >= lastSeekPosition && playableAt(time)
+    const alreadyPlayable = (time: number) => time >= lastSeekPosition && playableAt(time) && hasRunway(time)
 
     /**
      * Whether the element can play from a GIVEN time without a fetch.
@@ -471,6 +482,23 @@ export const startPlayback = async (options: PlaybackOptions): Promise<PlaybackC
     const playableAt = (time: number) =>
       getTimeRanges(sourceBuffer).some((r) => r.start <= time && time < r.end)
 
+    /** Seconds of contiguous data past a position that make it safe to play from. */
+    const runwayFrom = (time: number) => {
+      const range = rangeAt(time)
+      return range ? range.end - time : 0
+    }
+
+    /**
+     * Whether a position has its runway, which stops at the end of the file once the remuxer has read to it.
+     *
+     * No target in the last 3 s can have the full runway, and re-positioning the remuxer there re-appends
+     * over the buffered end, after which Firefox 151 stays at the end and never fires `ended`. The end is
+     * the furthest append, the one `endOfStream` waits on, never the declared duration: that is the longer
+     * track, while an open MediaSource's `buffered` ends at the shorter one, and evict() reopens it on
+     * every trim (measured 2026-10-11).
+     */
+    const hasRunway = (time: number) => runwayFrom(time) >= SEEK_RUNWAY || (finished && atEnd(time))
+
     /**
      * Put the data in place for a position the playhead has NOT moved to yet.
      *
@@ -484,24 +512,19 @@ export const startPlayback = async (options: PlaybackOptions): Promise<PlaybackC
      * delays the seek: delaying the seek by the same amount while appending nothing still wedged 4
      * out of 4, so it is the data and not the delay.
      *
-     * Returns as soon as there is nothing to wait for, so a seek into buffered ground costs nothing.
-     * The CALLER owns the deadline: this can take as long as a read takes, and over a torrent that
-     * is unbounded.
+     * Returns at once when the target already has its runway, so a seek into buffered ground costs
+     * nothing. Otherwise the remuxer is positioned at the target, since the range holding it can be an
+     * island the reader never extends. The CALLER owns the deadline: this can take as long as a read
+     * takes, and over a torrent that is unbounded.
      */
-    /** Seconds of contiguous data past a position that make it safe to play from. */
-    const runwayFrom = (time: number) => {
-      const range = getTimeRanges(sourceBuffer).find((r) => r.start <= time + BOUNDARY_SLACK && time < r.end)
-      return range ? range.end - time : 0
-    }
-
     const prepareSeek = async (time: number) => {
       if (destroyed) return
-      if (playableAt(time) && runwayFrom(time) >= SEEK_RUNWAY) return
+      if (playableAt(time) && hasRunway(time)) return
       finished = false
       preparing++
       prepareTarget = time
       try {
-        if (!playableAt(time)) await seekTo(time)
+        await seekTo(time)
         /*
          * Captured AFTER the seek, never before.
          *
@@ -599,14 +622,18 @@ export const startPlayback = async (options: PlaybackOptions): Promise<PlaybackC
       lastSeekingAt = now
       if (alreadyPlayable(time)) return
       /*
-       * A seek for exactly this position is already running, so let it finish.
+       * The remuxer is already positioned at exactly this time with nothing removed since, so let it
+       * read on. Its seek still running or data at the target is required too: the browser also removes
+       * data, by its own eviction when an append goes over its memory budget.
        *
-       * `prepareSeek` starts one BEFORE the playhead moves, and the caller moves the playhead anyway
-       * once its budget runs out. Without this, the move fires `seeking`, which starts the identical
-       * read again and bumps the generation, throwing away everything the first one had done. The
-       * benchmark caught it as a seek that took twice as long as seeking the old way.
+       * `prepareSeek` positions it BEFORE the playhead moves, and the caller moves the playhead anyway
+       * once its budget runs out, with the seek or the runway's reads still running. Without this, the
+       * move fires `seeking`, which starts the identical read again and bumps the generation, throwing
+       * away everything the first one had done. The benchmark caught it as a seek that took twice as
+       * long as seeking the old way. It also covers a finished prepare to a keyframe in Firefox, whose
+       * range starts the reorder delay past the target, so the target never counts as buffered.
        */
-      if (seeking && Math.abs(time - lastSeekPosition) < 0.001) return
+      if (positioned && (seeking || runwayFrom(time) > 0) && Math.abs(time - lastSeekPosition) < 0.001) return
       finished = false
       if (dragTimer) clearTimeout(dragTimer)
       if (!dragging) {

package/src/lib/react/components/burn-in-hint.tsx

@@ -4,7 +4,6 @@ import { css } from '@emotion/react'
 import { fonts } from '../../utils/fonts'
 import { usePlayer } from '../player'
 
-/** Long enough to read twice, short enough not to sit over the picture. */
 const VISIBLE_MS = 9000
 
 const style = css`
@@ -38,22 +37,11 @@ const style = css`
     opacity: 1;
   }
 
-  .words {
-    display: flex;
-    flex-direction: column;
-    gap: calc(0.3 * var(--mp-unit));
-  }
-
-  .title {
-    ${fonts.bMedium.bold}
+  .text {
+    ${fonts.bMedium.medium}
     color: #fff;
   }
 
-  .body {
-    ${fonts.bSmall.regular}
-    color: rgba(255, 255, 255, 0.75);
-  }
-
   /* Points at the edge the browser's control lives on, which is the whole message. */
   .arrow {
     flex: none;
@@ -90,12 +78,7 @@ export const BurnInHint = () => {
   return (
     <div css={style} className={show ? 'show' : ''} role='status'>
       <div className='card'>
-        <div className='words'>
-          <div className='title'>Subtitles are in the picture</div>
-          <div className='body'>
-            Now hover the video and click your browser&apos;s own pop out button
-          </div>
-        </div>
+        <div className='text'>Now click your browser&apos;s pop out button</div>
         <div className='arrow' aria-hidden='true'>&rarr;</div>
       </div>
     </div>

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

@@ -25,23 +25,6 @@ const SEEK_STEP = 5
 const REFOCUS_POLL = 50
 const REFOCUS_AFTER = 1_000
 
-/**
- * Two stacked lines inside a tooltip.
- *
- * The width to wrap against is no longer here: TooltipDisplay bounds every chip it draws, at the
- * same 26 units this had imposed by hand, so a call site only says what its content is.
- */
-const tooltipLinesStyle = css`
-  display: flex;
-  flex-direction: column;
-  gap: calc(0.4 * var(--mp-unit));
-
-  .hint {
-    opacity: 0.72;
-    font-size: 0.9em;
-  }
-`
-
 const style = css`
   position: absolute;
   bottom: 0;
@@ -384,7 +367,6 @@ export const ControlBar = () => {
             ? (
               <TooltipDisplay
                 id='picture-in-picture'
-                // anchored to its end, or the two-line burn-in copy runs off the right of the player
                 tooltipPlace='top-end'
                 text={
                   <button
@@ -409,26 +391,14 @@ export const ControlBar = () => {
                   </button>
                 }
                 toolTipText={
-                  // The chip is drawn in its own subtree, where the control bar's rules never
-                  // reach it: a bare `small` stays inline and runs straight on from the line above
-                  // it. Both lines carry their layout themselves.
-                  <span css={tooltipLinesStyle}>
-                    <span className='lead'>
-                      {!burnIn
-                        ? 'Picture in picture'
-                        : !hasSubtitles
-                            ? 'This file has no subtitles'
-                            : burnedInSubtitles
-                              ? 'Subtitles are in the picture'
-                              : 'Put the subtitles in the picture'}
-                    </span>
-                    {burnIn && hasSubtitles
-                      ? (
-                        <span className='hint'>
-                          Then hover the video and click your browser&apos;s own pop out button
-                        </span>
-                      )
-                      : null}
+                  <span>
+                    {!burnIn
+                      ? 'Picture in picture'
+                      : !hasSubtitles
+                          ? 'This file has no subtitles'
+                          : burnedInSubtitles
+                            ? 'Subtitles are in the picture'
+                            : 'Put the subtitles in the picture'}
                   </span>
                 }
               />