@banou/media-player 0.10.13 → 0.10.15

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-DdbOiEX3.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-DQ537ehC.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-DdbOiEX3.js → engine-DQ537ehC.js}

@@ -188,7 +188,7 @@ var i = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 		length: s,
 		audioStreamIndex: _,
 		read: a
-	}), M = [], N = !1, P = () => {
+	}), M = [], N = !1, se = () => {
 		if (!N) {
 			N = !0;
 			for (let e of [...M].reverse()) try {
@@ -237,138 +237,138 @@ var i = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 				i(), n(/* @__PURE__ */ Error("The MediaSource closed before a SourceBuffer could be created"));
 			};
 			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, 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) => {
+		}), { appendBuffer: P, unbufferRange: ce, updateTimestampOffset: le, endOfStream: ue } = o(A, m);
+		await P(e.data), e.subtitles?.length && s.pushFragments(e.subtitles), te?.();
+		let F = !1, I = !1, L = 0, R, de = () => R ?? n.currentTime, z = !1, fe = !1, pe = 0, B = 0, V = null, H = 0, U = 0, W = !1, G = 0, K = !0, q = (e, t, n = !1) => {
 			let r = e?.message === "Cancelled";
-			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), s = (e, t) => (K = !1, se(e, t));
+			t && r || (console.error(e), (!W || n) && (W = !0, ne?.(r ? Error("Reading the video file failed", { cause: e }) : e)));
+		}, me = async (e = !1) => {
+			if (L > 0 && !e) return;
+			let t = n.currentTime, r = e ? x : v, a = e ? S : y, o = i(A), s = (e, t) => (K = !1, ce(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 = () => {
+		}, he = () => {
 			let e = i(A);
 			if (!e.length) return !0;
-			let t = ue(), n = e.find((e) => e.start <= t + T && t < e.end);
+			let t = de(), n = e.find((e) => e.start <= t + T && t < e.end);
 			return n && n.end >= t + y ? !1 : !n || n.end < t + b;
-		}, 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 = () => {
+		}, ge = (e) => i(A).find((t) => t.start <= e + T && e < t.end), _e = () => ge(n.currentTime), ve = (e = n.currentTime) => {
+			let t = ge(e);
+			return e >= U - .1 || !!t && t.end >= U - .1;
+		}, ye = () => {
 			let e = i(A).map((e) => e.end);
-			e.length && (W = Math.max(W, ...e));
-		}, J = async (e) => {
-			L = !0, H = null, U = 0, fe = e, K = !0;
-			let t = ++V;
+			e.length && (U = Math.max(U, ...e)), z && (fe = !0);
+		}, be = () => z || fe && (i(A).at(-1)?.end ?? 0) >= U - .1, J = async (e) => {
+			I = !0, V = null, H = 0, G = e, K = !0;
+			let t = ++B;
 			try {
 				let { data: n, pts: r, subtitles: i, finished: a } = await j.seek(e);
-				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());
+				if (N || t !== B || (a && (z = !0), i?.length && s.pushFragments(i), await le(r), N || t !== B)) return;
+				n.byteLength && (await P(n), ye());
 			} catch (e) {
-				t === V && (K = !1), q(e, N || t !== V);
+				t === B && (K = !1), q(e, N || t !== B);
 			} finally {
-				t === V && (L = !1);
+				t === B && (I = !1);
 			}
-		}, ye = async () => {
-			let e = H;
+		}, xe = async () => {
+			let e = V;
 			if (e) try {
-				await F(e), ve(), H === e && (H = null, U = 0);
+				await P(e), ye(), V === e && (V = null, H = 0);
 			} catch (t) {
-				if (H !== e) return;
+				if (V !== e) return;
 				if (t?.name === "QuotaExceededError") {
-					let t = await pe(!0).then(() => !0, () => !1);
-					if (H !== e) return;
+					let t = await me(!0).then(() => !0, () => !1);
+					if (V !== e) return;
 					if (t) {
-						B = !1, await J(ge()?.end ?? n.currentTime);
+						z = !1, await J(_e()?.end ?? n.currentTime);
 						return;
 					}
 				}
-				if (U += 1, U < C) return;
-				throw H = null, t;
+				if (H += 1, H < C) return;
+				throw V = null, t;
 			}
-		}, 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;
+		}, Se = async () => {
+			if (F || I || Q !== void 0 || N || !V && (z || !he())) return;
+			let e = ++pe, t = B, n = () => N || e !== pe || t !== B;
+			F = !0;
 			try {
-				if (!H) {
+				if (!V) {
 					let { data: e, subtitles: t, finished: r } = await j.read();
-					if (n() || (r && (B = !0), t?.length && s.pushFragments(t), !e.byteLength)) return;
-					H = e, U = 0;
+					if (n() || (r && (z = !0), t?.length && s.pushFragments(t), !e.byteLength)) return;
+					V = e, H = 0;
 				}
-				await ye(), !n() && G && (G = !1, re?.());
+				await xe(), !n() && W && (W = !1, re?.());
 			} catch (e) {
 				q(e, n());
 			} finally {
-				e === de && (I = !1);
+				e === pe && (F = !1);
 			}
-		}, 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);
+		}, Ce = (e) => e >= G && we(e) && Te(e), we = (e) => i(A).some((t) => t.start <= e && e < t.end), Y = (e) => {
+			let t = ge(e);
 			return t ? t.end - e : 0;
-		}, Ce = (e) => Y(e) >= E || B && _e(e), we = async (e) => {
-			if (!N && !(Se(e) && Ce(e))) {
-				B = !1, R++, z = e;
+		}, Te = (e) => Y(e) >= E || be() && ve(e), Ee = async (e) => {
+			if (!N && !(we(e) && Te(e))) {
+				z = !1, L++, R = e;
 				try {
 					await J(e);
-					let t = V;
-					for (let n = 0; n < ee && !(N || t !== V || B || Y(e) >= E); n++) {
+					let t = B;
+					for (let n = 0; n < ee && !(N || t !== B || z || Y(e) >= E); n++) {
 						let t = Y(e);
-						if (await be(), Y(e) <= t) break;
+						if (await Se(), Y(e) <= t) break;
 					}
 				} finally {
-					R--, z === e && (z = void 0);
+					L--, R === e && (R = void 0);
 				}
 			}
-		}, Te = 0, X = null, Z, Ee = (e) => {
-			let t = performance.now(), n = t - Te;
+		}, De = 0, X = null, Z, Oe = (e) => {
+			let t = performance.now(), n = t - De;
 			if (n >= D) {
-				Te = t, X = null, ie?.(e);
+				De = t, X = null, ie?.(e);
 				return;
 			}
 			X = e, !Z && (Z = setTimeout(() => {
 				Z = void 0;
 				let e = X;
-				X = null, !(e === null || N) && (Te = performance.now(), ie?.(e));
+				X = null, !(e === null || N) && (De = performance.now(), ie?.(e));
 			}, D - n));
 		};
 		M.push(() => {
 			Z && clearTimeout(Z);
 		});
-		let De = 0, Q;
+		let ke = 0, Q;
 		M.push(() => {
 			Q && clearTimeout(Q);
 		});
-		let Oe = () => {
+		let Ae = () => {
 			let t = n.currentTime, r = e.info.input.duration || n.duration;
-			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) {
+			r > 0 && Oe(Math.min(Math.max(t / r, 0), 1));
+			let i = performance.now(), a = i - ke < O;
+			if (ke = i, !Ce(t) && !(K && (I || Y(t) > 0) && Math.abs(t - G) < .001)) {
+				if (z = !1, Q && clearTimeout(Q), !a) {
 					Q = void 0, J(t);
 					return;
 				}
 				Q = setTimeout(() => {
 					if (Q = void 0, N) return;
 					let e = n.currentTime;
-					xe(e) || (B = !1, J(e));
+					Ce(e) || (z = !1, J(e));
 				}, O);
 			}
 		};
-		n.addEventListener("seeking", Oe), M.push(() => n.removeEventListener("seeking", Oe));
-		let $ = !1, ke = () => {
+		n.addEventListener("seeking", Ae), M.push(() => n.removeEventListener("seeking", Ae));
+		let $ = !1, je = () => {
 			if ($) return;
 			$ = !0;
 			let e = n.error;
 			q(new g(`the media element failed: ${e?.message ?? "unknown"}`, { cause: e }), !1, !0);
 		};
-		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(() => {}));
+		n.addEventListener("error", je), M.push(() => n.removeEventListener("error", je));
+		let Me = setInterval(() => {
+			$ || n.error || (me().catch(() => {}), Se().catch((e) => q(e, !1)), be() && !V && ve() && m.readyState === "open" && ue().catch(() => {}));
 		}, 100);
-		return M.push(() => clearInterval(Ae)), {
-			destroy: P,
-			prepareSeek: we,
+		return M.push(() => clearInterval(Me)), {
+			destroy: se,
+			prepareSeek: Ee,
 			videoElement: n,
 			selectSubtitleStream: (e) => s.selectStream(e),
 			indexes: e.indexes ?? [],
@@ -378,9 +378,9 @@ var i = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 			audioMimeType: e.info.output.audioMimeType
 		};
 	} catch (e) {
-		throw P(), e;
+		throw se(), e;
 	}
-}, ne = 5, re = 500, ie = 320, ae = 1e6, oe = 3, j = 1e4, M = 1.5, N = 4e6, P = 3e4, F = async (e) => {
+}, ne = 5, re = 500, ie = 320, ae = 1e6, oe = 3, j = 1e4, M = 1.5, N = 4e6, se = 3e4, P = async (e) => {
 	let { publicPath: n, workerUrl: r, length: i, read: a, onThumbnails: o, width: s = ie } = e, c = await t({
 		publicPath: n,
 		workerUrl: r,
@@ -469,7 +469,7 @@ var i = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 		}, w = async (e) => {
 			_ = !0;
 			try {
-				let t = await Promise.race([c.init(), new Promise((e, t) => setTimeout(() => t(/* @__PURE__ */ Error("timed out")), P))]);
+				let t = await Promise.race([c.init(), new Promise((e, t) => setTimeout(() => t(/* @__PURE__ */ Error("timed out")), se))]);
 				if (d) return;
 				h = e;
 				let n = l(t.indexes);
@@ -509,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, 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) => {
+}, ce = 1280, le = 1920, ue = 250, F = 100, I = () => typeof HTMLCanvasElement < "u" && "captureStream" in HTMLCanvasElement.prototype, L = () => typeof document < "u" && typeof HTMLVideoElement < "u" && typeof HTMLVideoElement.prototype.requestPictureInPicture == "function" && !!document.pictureInPictureEnabled, R = () => typeof HTMLVideoElement < "u" && "mozCaptureStream" in HTMLVideoElement.prototype, de = () => I() ? L() ? "window" : R() ? "burn-in" : null : null, z = (e) => {
+	let { video: t, subtitles: n } = e, r = e.mode ?? de() ?? "window", i = e.maxWidth ?? (r === "burn-in" ? le : ce), 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);
@@ -539,11 +539,11 @@ var i = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 		l = !0;
 		let { mirror: e } = a;
 		h(), e.play().then(() => new Promise((e) => {
-			setTimeout(e, I);
+			setTimeout(e, F);
 		})).catch(() => {}).finally(() => {
 			e.pause(), setTimeout(() => {
 				l = !1;
-			}, I);
+			}, F);
 		});
 	}, E = [["play", () => {
 		t.play().catch(() => {});
@@ -580,7 +580,7 @@ var i = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 		};
 		if (a = f, u.srcObject = f.stream, (e.container ?? t.parentElement ?? document.body).appendChild(u), v(), s = setInterval(() => {
 			t.paused && h();
-		}, le), u.play().catch(() => {}), u.readyState === 0 && await new Promise((e) => {
+		}, ue), u.play().catch(() => {}), u.readyState === 0 && await new Promise((e) => {
 			let t = () => {
 				clearTimeout(n), e();
 			}, n = setTimeout(t, 1e3);
@@ -626,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, ue as n, _ as o, F as r, te as s, B as t, h as u };
+export { g as a, A as c, i as d, o as f, k as i, s as l, de as n, _ as o, P as r, te as s, z 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-DdbOiEX3.js";
+import { l as e, n as t, o as n, r, s as i, t as a, u as o } from "./engine-DQ537ehC.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.13",
+  "version": "0.10.15",
   "description": "A video player for containers and codecs the browser cannot play natively, remuxed on the fly",
   "type": "module",
   "main": "dist/index.js",
@@ -44,7 +44,7 @@
     "@videojs/react": "10.0.0-beta.26",
     "ass-compiler": "^0.1.16",
     "jassub": "^2.5.16",
-    "libav-wasm": "^0.8.7",
+    "libav-wasm": "^0.8.9",
     "lucide-react": "^0.536.0",
     "osra": "^0.6.12",
     "react-tooltip": "^5.28.0"

package/src/lib/engine/playback.ts

@@ -271,6 +271,8 @@ export const startPlayback = async (options: PlaybackOptions): Promise<PlaybackC
     let prepareTarget: number | undefined
     const bufferAnchor = () => prepareTarget ?? videoElement.currentTime
     let finished = false
+    // whether the end of the file was ever appended, which unlike `finished` a seek does not clear
+    let endAppended = false
     // libav aborts the running task when a new one starts, so both flags need a generation token
     let readGeneration = 0
     let seekGeneration = 0
@@ -364,7 +366,16 @@ export const startPlayback = async (options: PlaybackOptions): Promise<PlaybackC
     const trackAppendedEnd = () => {
       const ends = getTimeRanges(sourceBuffer).map((r) => r.end)
       if (ends.length) lastAppendedEnd = Math.max(lastAppendedEnd, ...ends)
+      if (finished) endAppended = true
     }
+    /*
+     * Whether the end of the file is in the buffer. A seek clears `finished`, so past one it is read back
+     * from `buffered`, since evict() and the browser both remove data: counted from a flag alone, a move to
+     * the end of a file whose end had been removed signalled the end there, endOfStream cut the duration to
+     * what was buffered, and the playhead went back to 20 s of 30 in both engines (measured 2026-10-12).
+     */
+    const endInBuffer = () =>
+      finished || (endAppended && (getTimeRanges(sourceBuffer).at(-1)?.end ?? 0) >= lastAppendedEnd - 0.1)
 
     const seekTo = async (time: number) => {
       seeking = true
@@ -489,15 +500,17 @@ export const startPlayback = async (options: PlaybackOptions): Promise<PlaybackC
     }
 
     /**
-     * Whether a position has its runway, which stops at the end of the file once the remuxer has read to it.
+     * Whether a position has its runway, which stops at the end of the file while the end is in the buffer.
      *
      * 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).
+     * over the buffered end, after which Firefox 151 stays at the end and never fires `ended`: its demuxer
+     * had read the track's last frame, and once that frame is replaced it waits for one starting at the
+     * track's end. So the end counts while it is buffered, even with the reader re-reading toward it after
+     * a seek back (measured 2026-10-12). 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))
+    const hasRunway = (time: number) => runwayFrom(time) >= SEEK_RUNWAY || (endInBuffer() && atEnd(time))
 
     /**
      * Put the data in place for a position the playhead has NOT moved to yet.
@@ -692,7 +705,7 @@ export const startPlayback = async (options: PlaybackOptions): Promise<PlaybackC
       evict().catch(() => {})
       pump().catch((error) => reportError(error, false))
       // every remove() puts the MediaSource back to 'open', so the end has to be re-armed
-      if (finished && !pending && atEnd() && mediaSource.readyState === 'open') endOfStream().catch(() => {})
+      if (endInBuffer() && !pending && atEnd() && mediaSource.readyState === 'open') endOfStream().catch(() => {})
     }, 100)
     teardown.push(() => clearInterval(interval))
 

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>
                 }
               />