@banou/media-player 0.8.15 → 0.8.16

package/README.md

@@ -1,3 +1,5 @@
+
+
 # @banou/media-player
 
 A React video player for files the browser cannot open on its own. It takes a `read(offset, size)` and
@@ -21,6 +23,7 @@ import MediaPlayer from '@banou/media-player'
   libavWorkerUrl="/libav-worker.js"
   jassubWorkerUrl={jassubWorkerUrl}
   jassubWasmUrl="/jassub-worker-modern.wasm"
+  jassubLegacyWasmUrl="/jassub-worker.wasm"
   defaultFontUrl="/default.woff2"
   title="episode.mkv"
   autoplay

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-CDdjRm_U.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-DPnChmYc.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-CDdjRm_U.js → engine-DPnChmYc.js}

@@ -32,34 +32,10 @@ var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 			} catch {}
 		})
 	};
-}, c = -1, l = (e) => new Date(e).toISOString().slice(11, 22), u = (e, t) => e.createStyle({
-	...t,
-	treat_fontname_as_pattern: 0,
-	Blur: 0,
-	Justify: 0,
-	FontName: t.Fontname,
-	FontSize: Number(t.Fontsize),
-	PrimaryColour: Number(t.PrimaryColour),
-	SecondaryColour: Number(t.SecondaryColour),
-	OutlineColour: Number(t.OutlineColour),
-	BackColour: Number(t.BackColour),
-	Bold: Number(t.Bold),
-	Italic: Number(t.Italic),
-	Underline: Number(t.Underline),
-	StrikeOut: Number(t.StrikeOut),
-	ScaleX: Number(t.ScaleX),
-	ScaleY: Number(t.ScaleY),
-	Spacing: Number(t.Spacing),
-	Angle: Number(t.Angle),
-	BorderStyle: Number(t.BorderStyle),
-	Outline: Number(t.Outline),
-	Shadow: Number(t.Shadow),
-	Alignment: Number(t.Alignment),
-	MarginL: Number(t.MarginL),
-	MarginR: Number(t.MarginR),
-	MarginV: Number(t.MarginV),
-	Encoding: Number(t.Encoding)
-}), d = (e) => {
+}, c = -1, l = (e, t) => e.createEvent(t), u = (e) => new Date(e).toISOString().slice(11, 22), d = 1, f = (e) => new Map(r(e).styles.style.map((e, t) => [e.Name, t + d])), p = (e, t) => {
+	let n = t.replace(/^\*+/, ""), r = n.toLowerCase() === "default" ? "Default" : n;
+	return e.styles.get(r) ?? e.styles.get("Default") ?? 0;
+}, m = (e) => {
 	let t = r(e);
 	return i({
 		...t,
@@ -70,17 +46,17 @@ var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 			LayoutResY: ""
 		}
 	});
-}, f = (e) => {
+}, h = (e) => {
 	let t = e.content.match(/\r?\n\[Events\]\r?\nFormat: (.*)/)?.[0];
 	return t ? {
 		type: "header",
 		streamIndex: e.streamIndex,
 		content: e.content,
 		eventsContent: t,
-		parsed: r(e.content)
+		styles: f(e.content)
 	} : (console.warn(`subtitle stream ${e.streamIndex} has no Events format, ignoring the track`), null);
-}, p = (e, t) => {
-	let [n, i] = t.content.split(","), a = Number(n), o = `Dialogue: ${i},${l(t.start)},${l(t.end)},${t.content.replace(`${a},${i},`, "")}`, s = r(`${e.eventsContent}\r\n${o}`).events.dialogue[0];
+}, g = (e, t) => {
+	let [n, i] = t.content.split(","), a = Number(n), o = `Dialogue: ${i},${u(t.start)},${u(t.end)},${t.content.replace(`${a},${i},`, "")}`, s = r(`${e.eventsContent}\r\n${o}`).events.dialogue[0];
 	if (!s) throw Error("dialogue event is undefined");
 	return {
 		type: "dialogue",
@@ -88,6 +64,7 @@ var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 		index: a,
 		assEvent: {
 			...s,
+			Style: p(e, s.Style),
 			Effect: s.Effect ?? "",
 			Text: s.Text.raw,
 			Duration: (s.End - s.Start) * 1e3,
@@ -97,63 +74,61 @@ var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 			_index: a
 		}
 	};
-}, m = (e) => {
-	let { video: t, canvas: r, workerUrl: i, wasmUrl: a, legacyWasmUrl: o, defaultFontUrl: s } = e, c, l = [], m = /* @__PURE__ */ new Map(), h = [], g = /* @__PURE__ */ new Map(), _, v = e.onStreams, y = setInterval(() => {
+}, _ = (e) => {
+	let { video: t, canvas: r, workerUrl: i, wasmUrl: a, legacyWasmUrl: o, defaultFontUrl: s } = e, c, u = [], d = /* @__PURE__ */ new Map(), f = [], p = /* @__PURE__ */ new Map(), _, v = e.onStreams, y = setInterval(() => {
 		c?.setCurrentTime(t.paused, t.currentTime, t.playbackRate);
 	}, 100), b = () => c?.setRate(t.playbackRate), x = (e) => {
 		c = new n({
 			onDemandRender: !1,
 			video: t,
 			canvas: r,
-			subContent: d(e.content),
+			subContent: m(e.content),
 			workerUrl: i,
 			modernWasmUrl: a,
 			...o ? { wasmUrl: o } : {},
-			fonts: l.map(([, e]) => e),
+			fonts: u.map(([, e]) => e),
 			availableFonts: {
-				...Object.fromEntries(l),
+				...Object.fromEntries(u),
 				...s ? { "liberation sans": s } : {}
 			}
 		}), t.removeEventListener("ratechange", c._boundSetRate), t.addEventListener("ratechange", b);
-		for (let t of e.parsed.styles.style) u(c, t);
 	};
 	return {
 		pushAttachments: (e) => {
-			l = [...l, ...e.map((e) => [e.filename, new Uint8Array(e.data)])];
+			u = [...u, ...e.map((e) => [e.filename, new Uint8Array(e.data)])];
 		},
 		pushFragments: (e) => {
 			for (let t of e) if (t.type === "header") {
-				if (m.has(t.streamIndex)) continue;
-				let e = f(t);
+				if (d.has(t.streamIndex)) continue;
+				let e = h(t);
 				if (!e) continue;
-				m.set(t.streamIndex, e), h.push({
+				d.set(t.streamIndex, e), f.push({
 					streamIndex: t.streamIndex,
 					title: t.title,
 					language: t.language
-				}), v?.([...h]), _ === void 0 && (_ = t.streamIndex), c || x(e);
+				}), v?.([...f]), _ === void 0 && (_ = t.streamIndex), c || x(e);
 			} else {
-				let e = m.get(t.streamIndex);
+				let e = d.get(t.streamIndex);
 				if (!e) continue;
-				let n = g.get(t.streamIndex);
-				n || (n = /* @__PURE__ */ new Map(), g.set(t.streamIndex, n));
-				let r = p(e, t);
+				let n = p.get(t.streamIndex);
+				n || (n = /* @__PURE__ */ new Map(), p.set(t.streamIndex, n));
+				let r = g(e, t);
 				if (n.has(r.index)) continue;
-				n.set(r.index, r), _ === t.streamIndex && c?.createEvent(r.assEvent);
+				n.set(r.index, r), _ === t.streamIndex && c && l(c, r.assEvent);
 			}
 		},
 		selectStream: (e) => {
 			let n = e ?? -1;
 			if (n === _ || !c) return;
 			_ = n, c.freeTrack();
-			let r = m.get(n);
+			let r = d.get(n);
 			if (r) {
-				c.setTrack(d(r.content));
-				for (let e of r.parsed.styles.style) u(c, e);
-				for (let e of g.get(n)?.values() ?? []) c.createEvent(e.assEvent);
+				c.setTrack(m(r.content));
+				for (let e of p.get(n)?.values() ?? []) l(c, e.assEvent);
 				c.setCurrentTime(t.paused, t.currentTime, t.playbackRate);
 			}
 		},
-		getStreams: () => [...h],
+		getStreams: () => [...f],
 		getSelectedStream: () => _,
 		setOnStreams: (e) => {
 			v = e;
@@ -162,24 +137,24 @@ var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 			clearInterval(y), t.removeEventListener("ratechange", b), c?.destroy(), c = void 0;
 		}
 	};
-}, h = class extends Error {
+}, v = class extends Error {
 	mediaElement = !0;
 	constructor(e, t) {
 		super(e, t), this.name = "MediaElementError";
 	}
-}, g = (e) => !!e && typeof e == "object" && e.mediaElement === !0, _ = -20, v = 60, y = 30, b = -5, x = 20, ee = 5, S = 15e3, C = 1, w = 3, te = 12, T = 200, E = 250, D = 25e5, O = (e) => {
+}, y = (e) => !!e && typeof e == "object" && e.mediaElement === !0, b = -20, x = 60, S = 30, C = -5, w = 20, T = 5, ee = 15e3, E = 1, D = 3, te = 12, ne = 200, re = 250, O = 25e5, k = (e) => {
 	let { worker: t } = e, n = setTimeout(() => t.terminate(), 2e3);
 	e.destroy().catch(() => {}).finally(() => {
 		clearTimeout(n), t.terminate();
 	});
-}, k = async (t) => {
-	let { videoElement: n, canvasElement: r, read: i, length: o, publicPath: c, libavWorkerUrl: l, jassubWorkerUrl: u, jassubWasmUrl: d, jassubLegacyWasmUrl: f, defaultFontUrl: p, bufferSize: g = D, audioStreamIndex: k, onReady: ne, onError: re, onRecovered: ie, onSeek: ae, onSubtitleStreams: oe, onAudioStreams: se } = t, A = await e({
+}, ie = async (t) => {
+	let { videoElement: n, canvasElement: r, read: i, length: o, publicPath: c, libavWorkerUrl: l, jassubWorkerUrl: u, jassubWasmUrl: d, jassubLegacyWasmUrl: f, defaultFontUrl: p, bufferSize: m = O, audioStreamIndex: h, onReady: g, onError: y, onRecovered: ie, onSeek: ae, onSubtitleStreams: oe, onAudioStreams: se } = t, A = await e({
 		publicPath: c,
 		workerUrl: l,
 		workerOptions: { type: "module" },
-		bufferSize: g,
+		bufferSize: m,
 		length: o,
-		audioStreamIndex: k,
+		audioStreamIndex: h,
 		read: i
 	}), j = [], M = !1, N = () => {
 		if (!M) {
@@ -189,11 +164,11 @@ var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 			} catch {}
 		}
 	};
-	j.push(() => O(A));
+	j.push(() => k(A));
 	try {
-		let e = await A.init(), t = e.audioStreams ?? [], i = t.some((e) => e.streamIndex === k) ? k : t[0]?.streamIndex ?? -1;
+		let e = await A.init(), t = e.audioStreams ?? [], i = t.some((e) => e.streamIndex === h) ? h : t[0]?.streamIndex ?? -1;
 		se?.(t, i);
-		let o = m({
+		let o = _({
 			video: n,
 			canvas: r,
 			workerUrl: u,
@@ -205,85 +180,85 @@ var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 		if (j.push(() => o.destroy()), e.attachments?.length && o.pushAttachments(e.attachments), !e.info.output.videoMimeType) throw Error("The video codec in this file could not be identified");
 		let c = [e.info.output.videoMimeType, e.info.output.audioMimeType].filter(Boolean).join(","), l = `video/mp4; codecs="${c}"`;
 		if (!MediaSource.isTypeSupported(l)) throw Error(`This browser cannot play the codecs in this file: ${c}`);
-		let g = new MediaSource(), D = URL.createObjectURL(g);
-		j.push(() => URL.revokeObjectURL(D)), n.src = D, j.push(() => {
+		let m = new MediaSource(), O = URL.createObjectURL(m);
+		j.push(() => URL.revokeObjectURL(O)), n.src = O, j.push(() => {
 			try {
 				n.pause();
 			} catch {}
 			n.removeAttribute("src"), n.load();
 		});
-		let O = await new Promise((t, n) => {
+		let k = await new Promise((t, n) => {
 			let r = setTimeout(() => {
 				i(), n(/* @__PURE__ */ Error("The MediaSource never opened"));
-			}, S), i = () => {
-				clearTimeout(r), g.removeEventListener("sourceopen", a), g.removeEventListener("sourceclose", o), g.removeEventListener("error", o);
+			}, ee), i = () => {
+				clearTimeout(r), m.removeEventListener("sourceopen", a), m.removeEventListener("sourceclose", o), m.removeEventListener("error", o);
 			}, a = () => {
 				try {
-					let n = g.addSourceBuffer(l);
+					let n = m.addSourceBuffer(l);
 					n.mode = "segments";
 					let r = e.info.input.duration;
-					Number.isFinite(r) && r > 0 && (g.duration = r), i(), t(n);
+					Number.isFinite(r) && r > 0 && (m.duration = r), i(), t(n);
 				} catch (e) {
 					i(), n(e);
 				}
 			}, o = () => {
 				i(), n(/* @__PURE__ */ Error("The MediaSource closed before a SourceBuffer could be created"));
 			};
-			g.addEventListener("sourceopen", a, { once: !0 }), g.addEventListener("sourceclose", o, { once: !0 }), g.addEventListener("error", o, { once: !0 });
-		}), { appendBuffer: P, unbufferRange: ce, updateTimestampOffset: le, endOfStream: ue } = s(O, g);
-		await P(e.data), e.subtitles?.length && o.pushFragments(e.subtitles), ne?.();
-		let F = !1, I = !1, L = 0, R, de = () => R ?? n.currentTime, z = !1, B = 0, V = 0, H = null, U = 0, W = 0, G = !1, K = 0, q = (e, t, n = !1) => {
+			m.addEventListener("sourceopen", a, { once: !0 }), m.addEventListener("sourceclose", o, { once: !0 }), m.addEventListener("error", o, { once: !0 });
+		}), { appendBuffer: P, unbufferRange: ce, updateTimestampOffset: le, endOfStream: ue } = s(k, m);
+		await P(e.data), e.subtitles?.length && o.pushFragments(e.subtitles), g?.();
+		let F = !1, I = !1, L = 0, R, de = () => R ?? n.currentTime, z = !1, B = 0, V = 0, H = null, U = 0, W = 0, G = !1, fe = 0, K = (e, t, n = !1) => {
 			let r = e?.message === "Cancelled";
-			t && r || (console.error(e), !(G && !n) && (G = !0, re?.(r ? Error("Reading the video file failed", { cause: e }) : e)));
-		}, fe = async (e = !1) => {
+			t && r || (console.error(e), !(G && !n) && (G = !0, y?.(r ? Error("Reading the video file failed", { cause: e }) : e)));
+		}, pe = async (e = !1) => {
 			if (L > 0 && !e) return;
-			let t = n.currentTime, r = e ? b : _, i = e ? x : v;
-			for (let { start: e, end: n } of a(O)) e < t + r && await ce(e, t + r), n > t + i && await ce(t + i, n);
-		}, pe = () => {
-			let e = a(O);
-			if (!e.length) return !0;
-			let t = de(), n = e.find((e) => e.start <= t + C && t < e.end);
-			return n && n.end >= t + v ? !1 : !n || n.end < t + y;
+			let t = n.currentTime, r = e ? C : b, i = e ? w : x;
+			for (let { start: e, end: n } of a(k)) e < t + r && await ce(e, t + r), n > t + i && await ce(t + i, n);
 		}, me = () => {
-			let e = n.currentTime;
-			return a(O).find((t) => t.start <= e + C && e < t.end);
+			let e = a(k);
+			if (!e.length) return !0;
+			let t = de(), n = e.find((e) => e.start <= t + E && t < e.end);
+			return n && n.end >= t + x ? !1 : !n || n.end < t + S;
 		}, he = () => {
-			let e = me();
-			return !!e && e.end >= W - .1;
+			let e = n.currentTime;
+			return a(k).find((t) => t.start <= e + E && e < t.end);
 		}, ge = () => {
-			let e = a(O).map((e) => e.end);
+			let e = he();
+			return !!e && e.end >= W - .1;
+		}, _e = () => {
+			let e = a(k).map((e) => e.end);
 			e.length && (W = Math.max(W, ...e));
-		}, J = async (e) => {
-			I = !0, H = null, U = 0, K = e;
+		}, q = async (e) => {
+			I = !0, H = null, U = 0, fe = e;
 			let t = ++V;
 			try {
 				let { data: n, pts: r, subtitles: i, finished: a } = await A.seek(e);
 				if (M || t !== V || (a && (z = !0), i?.length && o.pushFragments(i), await le(r), M || t !== V)) return;
-				n.byteLength && (await P(n), ge());
+				n.byteLength && (await P(n), _e());
 			} catch (e) {
-				q(e, M || t !== V);
+				K(e, M || t !== V);
 			} finally {
 				t === V && (I = !1);
 			}
-		}, _e = async () => {
+		}, ve = async () => {
 			let e = H;
 			if (e) try {
-				await P(e), ge(), H === e && (H = null, U = 0);
+				await P(e), _e(), H === e && (H = null, U = 0);
 			} catch (t) {
 				if (H !== e) return;
 				if (t?.name === "QuotaExceededError") {
-					let t = await fe(!0).then(() => !0, () => !1);
+					let t = await pe(!0).then(() => !0, () => !1);
 					if (H !== e) return;
 					if (t) {
-						z = !1, await J(me()?.end ?? n.currentTime);
+						z = !1, await q(he()?.end ?? n.currentTime);
 						return;
 					}
 				}
-				if (U += 1, U < ee) return;
+				if (U += 1, U < T) return;
 				throw H = null, t;
 			}
-		}, ve = async () => {
-			if (F || I || $ !== void 0 || M || !H && (z || !pe())) return;
+		}, ye = async () => {
+			if (F || I || Q !== void 0 || M || !H && (z || !me())) return;
 			let e = ++B, t = V, n = () => M || e !== B || t !== V;
 			F = !0;
 			try {
@@ -292,78 +267,78 @@ var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 					if (n() || (r && (z = !0), t?.length && o.pushFragments(t), !e.byteLength)) return;
 					H = e, U = 0;
 				}
-				await _e(), !n() && G && (G = !1, ie?.());
+				await ve(), !n() && G && (G = !1, ie?.());
 			} catch (e) {
-				q(e, n());
+				K(e, n());
 			} finally {
 				e === B && (F = !1);
 			}
-		}, ye = (e) => e >= K && !!me(), be = (e) => a(O).some((t) => t.start <= e + C && e < t.end), Y = (e) => {
-			let t = a(O).find((t) => t.start <= e + C && e < t.end);
+		}, be = (e) => e >= fe && !!he(), xe = (e) => a(k).some((t) => t.start <= e + E && e < t.end), J = (e) => {
+			let t = a(k).find((t) => t.start <= e + E && e < t.end);
 			return t ? t.end - e : 0;
-		}, xe = async (e) => {
-			if (!M && !(Y(e) >= w)) {
+		}, Se = async (e) => {
+			if (!M && !(J(e) >= D)) {
 				z = !1, L++, R = e;
 				try {
-					be(e) || await J(e);
+					xe(e) || await q(e);
 					let t = V;
-					for (let n = 0; n < te && !(M || t !== V || z || Y(e) >= w); n++) {
-						let t = Y(e);
-						if (await ve(), Y(e) <= t) break;
+					for (let n = 0; n < te && !(M || t !== V || z || J(e) >= D); n++) {
+						let t = J(e);
+						if (await ye(), J(e) <= t) break;
 					}
 				} finally {
 					L--, R === e && (R = void 0);
 				}
 			}
-		}, X = 0, Z = null, Q, Se = (e) => {
-			let t = performance.now(), n = t - X;
-			if (n >= T) {
-				X = t, Z = null, ae?.(e);
+		}, Y = 0, X = null, Z, Ce = (e) => {
+			let t = performance.now(), n = t - Y;
+			if (n >= ne) {
+				Y = t, X = null, ae?.(e);
 				return;
 			}
-			Z = e, !Q && (Q = setTimeout(() => {
-				Q = void 0;
-				let e = Z;
-				Z = null, !(e === null || M) && (X = performance.now(), ae?.(e));
-			}, T - n));
+			X = e, !Z && (Z = setTimeout(() => {
+				Z = void 0;
+				let e = X;
+				X = null, !(e === null || M) && (Y = performance.now(), ae?.(e));
+			}, ne - n));
 		};
 		j.push(() => {
-			Q && clearTimeout(Q);
+			Z && clearTimeout(Z);
 		});
-		let Ce = 0, $;
+		let we = 0, Q;
 		j.push(() => {
-			$ && clearTimeout($);
+			Q && clearTimeout(Q);
 		});
-		let we = () => {
+		let Te = () => {
 			let t = n.currentTime, r = e.info.input.duration || n.duration;
-			r > 0 && Se(Math.min(Math.max(t / r, 0), 1));
-			let i = performance.now(), a = i - Ce < E;
-			if (Ce = i, !ye(t) && !(I && Math.abs(t - K) < .001)) {
-				if (z = !1, $ && clearTimeout($), !a) {
-					$ = void 0, J(t);
+			r > 0 && Ce(Math.min(Math.max(t / r, 0), 1));
+			let i = performance.now(), a = i - we < re;
+			if (we = i, !be(t) && !(I && Math.abs(t - fe) < .001)) {
+				if (z = !1, Q && clearTimeout(Q), !a) {
+					Q = void 0, q(t);
 					return;
 				}
-				$ = setTimeout(() => {
-					if ($ = void 0, M) return;
+				Q = setTimeout(() => {
+					if (Q = void 0, M) return;
 					let e = n.currentTime;
-					ye(e) || (z = !1, J(e));
-				}, E);
+					be(e) || (z = !1, q(e));
+				}, re);
 			}
 		};
-		n.addEventListener("seeking", we), j.push(() => n.removeEventListener("seeking", we));
-		let Te = !1, Ee = () => {
-			if (Te) return;
-			Te = !0;
+		n.addEventListener("seeking", Te), j.push(() => n.removeEventListener("seeking", Te));
+		let $ = !1, Ee = () => {
+			if ($) return;
+			$ = !0;
 			let e = n.error;
-			q(new h(`the media element failed: ${e?.message ?? "unknown"}`, { cause: e }), !1, !0);
+			K(new v(`the media element failed: ${e?.message ?? "unknown"}`, { cause: e }), !1, !0);
 		};
 		n.addEventListener("error", Ee), j.push(() => n.removeEventListener("error", Ee));
 		let De = setInterval(() => {
-			Te || n.error || (fe().catch(() => {}), ve().catch((e) => q(e, !1)), z && !H && he() && g.readyState === "open" && ue().catch(() => {}));
+			$ || n.error || (pe().catch(() => {}), ye().catch((e) => K(e, !1)), z && !H && ge() && m.readyState === "open" && ue().catch(() => {}));
 		}, 100);
 		return j.push(() => clearInterval(De)), {
 			destroy: N,
-			prepareSeek: xe,
+			prepareSeek: Se,
 			videoElement: n,
 			selectSubtitleStream: (e) => o.selectStream(e),
 			indexes: e.indexes ?? [],
@@ -374,8 +349,8 @@ var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 	} catch (e) {
 		throw N(), e;
 	}
-}, ne = 5, re = 500, ie = 320, ae = 1e6, oe = 3, se = 1e4, A = async (e) => {
-	let { publicPath: n, workerUrl: r, length: i, read: a, onThumbnails: o, width: s = ie } = e, c = await t({
+}, ae = 5, oe = 500, se = 320, A = 1e6, j = 3, M = 1e4, N = async (e) => {
+	let { publicPath: n, workerUrl: r, length: i, read: a, onThumbnails: o, width: s = se } = e, c = await t({
 		publicPath: n,
 		workerUrl: r,
 		workerOptions: { type: "module" },
@@ -383,14 +358,14 @@ var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 		read: a
 	});
 	try {
-		let t = await c.init(), n = t.duration, r = Math.max(e.interval ?? ne, n / re), a = [];
+		let t = await c.init(), n = t.duration, r = Math.max(e.interval ?? ae, n / oe), a = [];
 		for (let [e, o] of t.indexes.entries()) {
 			let s = a.at(-1);
 			s && o.timestamp - s.timestamp < r || a.push({
 				timestamp: o.timestamp,
 				endTime: n,
 				startByte: o.pos,
-				endByte: Math.min((t.indexes[e + 1]?.pos ?? i) + ae, i),
+				endByte: Math.min((t.indexes[e + 1]?.pos ?? i) + A, i),
 				done: !1,
 				attempts: 0
 			});
@@ -421,7 +396,7 @@ var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 		}, p = (e) => {
 			e.done = !0, d = d.then(async () => {
 				if (u) return;
-				let t = await Promise.race([c.readKeyframe(e.timestamp), new Promise((e, t) => setTimeout(() => t(/* @__PURE__ */ Error("timed out")), se))]), n = await createImageBitmap(new Blob([t], { type: "image/png" })), r = new OffscreenCanvas(s, Math.max(1, Math.round(n.height * (s / n.width))));
+				let t = await Promise.race([c.readKeyframe(e.timestamp), new Promise((e, t) => setTimeout(() => t(/* @__PURE__ */ Error("timed out")), M))]), n = await createImageBitmap(new Blob([t], { type: "image/png" })), r = new OffscreenCanvas(s, Math.max(1, Math.round(n.height * (s / n.width))));
 				r.getContext("2d").drawImage(n, 0, 0, r.width, r.height), n.close();
 				let i = await r.convertToBlob({
 					type: "image/webp",
@@ -433,7 +408,7 @@ var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 					endTime: e.endTime
 				}].sort((e, t) => e.startTime - t.startTime), f());
 			}).catch(() => {
-				e.attempts += 1, e.done = e.attempts >= oe;
+				e.attempts += 1, e.done = e.attempts >= j;
 			});
 		};
 		return f(), {
@@ -443,14 +418,14 @@ var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 			destroy: () => {
 				u = !0;
 				for (let e of l) URL.revokeObjectURL(e.url);
-				l = [], O(c);
+				l = [], k(c);
 			}
 		};
 	} catch (e) {
-		throw O(c), e;
+		throw k(c), e;
 	}
-}, j = 1280, M = 1920, N = 250, P = 100, ce = () => typeof HTMLCanvasElement < "u" && "captureStream" in HTMLCanvasElement.prototype, le = () => typeof document < "u" && typeof HTMLVideoElement < "u" && typeof HTMLVideoElement.prototype.requestPictureInPicture == "function" && !!document.pictureInPictureEnabled, ue = () => typeof HTMLVideoElement < "u" && "mozCaptureStream" in HTMLVideoElement.prototype, F = () => ce() ? le() ? "window" : ue() ? "burn-in" : null : null, I = (e) => {
-	let { video: t, canvas: n } = e, r = e.mode ?? F() ?? "window", i = e.maxWidth ?? (r === "burn-in" ? M : j), 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) => {
+}, P = 1280, ce = 1920, le = 250, ue = 100, F = () => typeof HTMLCanvasElement < "u" && "captureStream" in HTMLCanvasElement.prototype, I = () => typeof document < "u" && typeof HTMLVideoElement < "u" && typeof HTMLVideoElement.prototype.requestPictureInPicture == "function" && !!document.pictureInPictureEnabled, L = () => typeof HTMLVideoElement < "u" && "mozCaptureStream" in HTMLVideoElement.prototype, R = () => F() ? I() ? "window" : L() ? "burn-in" : null : null, de = (e) => {
+	let { video: t, canvas: n } = e, r = e.mode ?? R() ?? "window", i = e.maxWidth ?? (r === "burn-in" ? ce : P), 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), n.width > 0 && n.height > 0 && r.drawImage(n, 0, 0, e.width, e.height);
 	}, h = () => {
 		a && m(a.composite, a.context);
@@ -464,52 +439,52 @@ var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 		"mediaSession" in navigator && (navigator.mediaSession.playbackState = t.paused ? "paused" : "playing");
 	}, x = () => {
 		c || l || !t.paused || t.play().catch(() => {});
-	}, ee = () => {
+	}, S = () => {
 		c || l || (t.paused || t.pause(), r !== "burn-in" && (c = !0, a?.mirror.play().catch(() => {}).finally(() => {
 			c = !1;
 		})));
-	}, S = () => {
-		b(), a?.mirror.play().catch(() => {});
 	}, C = () => {
-		b(), r === "burn-in" && a?.mirror.pause();
+		b(), a?.mirror.play().catch(() => {});
 	}, w = () => {
+		b(), r === "burn-in" && a?.mirror.pause();
+	}, T = () => {
 		if (r !== "burn-in" || !a || !t.paused || l) return;
 		l = !0;
 		let { mirror: e } = a;
 		h(), e.play().then(() => new Promise((e) => {
-			setTimeout(e, P);
+			setTimeout(e, ue);
 		})).catch(() => {}).finally(() => {
 			e.pause(), setTimeout(() => {
 				l = !1;
-			}, P);
+			}, ue);
 		});
-	}, te = [["play", () => {
+	}, ee = [["play", () => {
 		t.play().catch(() => {});
-	}], ["pause", () => t.pause()]], T = (e) => {
-		if ("mediaSession" in navigator) for (let [t, n] of te) try {
+	}], ["pause", () => t.pause()]], E = (e) => {
+		if ("mediaSession" in navigator) for (let [t, n] of ee) try {
 			navigator.mediaSession.setActionHandler(t, e ? n : null);
 		} catch {}
-	}, E = () => {
-		if (y(), T(!1), t.removeEventListener("play", S), t.removeEventListener("pause", C), t.removeEventListener("seeked", w), !a) {
+	}, D = () => {
+		if (y(), E(!1), t.removeEventListener("play", C), t.removeEventListener("pause", w), t.removeEventListener("seeked", T), !a) {
 			f?.();
 			return;
 		}
 		let { stream: e, mirror: n } = a;
-		n.removeEventListener("play", x), n.removeEventListener("pause", ee), n.removeEventListener("leavepictureinpicture", D);
+		n.removeEventListener("play", x), n.removeEventListener("pause", S), n.removeEventListener("leavepictureinpicture", te);
 		for (let t of e.getTracks()) t.stop();
 		n.remove(), a = void 0, f?.();
-	}, D = () => E(), O = (e) => {
+	}, te = () => D(), ne = (e) => {
 		let r = t.style.opacity, i = n.style.display;
 		e.style.cssText = "position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;z-index:1", t.style.opacity = "0", n.style.display = "none", f = () => {
 			f = void 0, t.style.opacity = r, n.style.display = i;
 		};
-	}, k = async () => {
+	}, re = async () => {
 		let n = Math.min(t.videoWidth || i, i), o = Math.round(n * ((t.videoHeight || 9) / (t.videoWidth || 16))), c = document.createElement("canvas");
 		c.width = n, c.height = o;
 		let l = c.getContext("2d");
 		if (!l) throw Error("the picture in picture composite has no 2d context");
 		let u = document.createElement("video");
-		u.muted = !0, u.playsInline = !0, r === "burn-in" ? O(u) : u.style.cssText = "position:fixed;width:1px;height:1px;opacity:0;pointer-events:none;left:-1px;top:-1px", m(c, l);
+		u.muted = !0, u.playsInline = !0, r === "burn-in" ? ne(u) : u.style.cssText = "position:fixed;width:1px;height:1px;opacity:0;pointer-events:none;left:-1px;top:-1px", m(c, l);
 		let f = {
 			composite: c,
 			context: l,
@@ -518,7 +493,7 @@ var a = (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();
-		}, N), u.play().catch(() => {}), u.readyState === 0 && await new Promise((e) => {
+		}, le), u.play().catch(() => {}), u.readyState === 0 && await new Promise((e) => {
 			let t = () => {
 				clearTimeout(n), e();
 			}, n = setTimeout(t, 1e3);
@@ -527,7 +502,7 @@ var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 			u.remove();
 			return;
 		}
-		if (u.addEventListener("play", x), u.addEventListener("pause", ee), u.addEventListener("leavepictureinpicture", D), t.addEventListener("play", S), t.addEventListener("pause", C), t.addEventListener("seeked", w), T(!0), b(), r === "burn-in") {
+		if (u.addEventListener("play", x), u.addEventListener("pause", S), u.addEventListener("leavepictureinpicture", te), t.addEventListener("play", C), t.addEventListener("pause", w), t.addEventListener("seeked", T), E(!0), b(), r === "burn-in") {
 			t.paused && u.pause(), e.onBurnedInChange?.(!0);
 			return;
 		}
@@ -540,7 +515,7 @@ var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 				try {
 					if (p()) {
 						if (r === "burn-in") {
-							E(), e.onBurnedInChange?.(!1);
+							D(), e.onBurnedInChange?.(!1);
 							return;
 						}
 						await document.exitPictureInPicture().catch(() => {});
@@ -548,9 +523,9 @@ var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 					}
 					r !== "burn-in" && document.pictureInPictureElement && await document.exitPictureInPicture().catch(() => {});
 					try {
-						await k();
+						await re();
 					} catch (t) {
-						console.warn("subtitle compositing for picture in picture failed", t), E(), r === "burn-in" && e.onBurnedInChange?.(!1);
+						console.warn("subtitle compositing for picture in picture failed", t), D(), r === "burn-in" && e.onBurnedInChange?.(!1);
 					}
 				} finally {
 					u = !1;
@@ -559,9 +534,9 @@ var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 		},
 		mode: r,
 		destroy: () => {
-			d = !0, r !== "burn-in" && p() && document.exitPictureInPicture().catch(() => {}), E(), r === "burn-in" && e.onBurnedInChange?.(!1);
+			d = !0, r !== "burn-in" && p() && document.exitPictureInPicture().catch(() => {}), D(), r === "burn-in" && e.onBurnedInChange?.(!1);
 		}
 	};
 };
 //#endregion
-export { h as a, O as c, a as d, s as f, D as i, c as l, F as n, g as o, A as r, k as s, I as t, m as u };
+export { v as a, k as c, a as d, s as f, O as i, c as l, R as n, y as o, N as r, ie as s, de as t, _ 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-CDdjRm_U.js";
+import { l as e, n as t, o as n, r, s as i, t as a, u as o } from "./engine-DPnChmYc.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 } from "react";
 import { css as h, keyframes as g } from "@emotion/react";
 import { createPlayer as _, useContainerAttach as v, useMediaAttach as y } from "@videojs/react";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banou/media-player",
-  "version": "0.8.15",
+  "version": "0.8.16",
   "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/engine/subtitles.ts

@@ -1,4 +1,3 @@
-import type { ParsedASS, ParsedASSStyles } from 'ass-compiler'
 import type { ASS_Event } from 'jassub'
 import type { Attachment, SubtitleFragment } from 'libav-wasm/build/worker'
 
@@ -10,8 +9,17 @@ export type SubtitleStream = { streamIndex: number, title: string, language: str
 /** -1 turns subtitles off. It frees the track and matches no header, so nothing is set. */
 export const SUBTITLES_OFF = -1
 
-type SubtitleHeaderPart = { type: 'header', streamIndex: number, content: string, eventsContent: string, parsed: ParsedASS }
-type SubtitleDialoguePart = { type: 'dialogue', streamIndex: number, index: number, assEvent: ASS_Event }
+/**
+ * jassub's `ASS_Event` types `Style` as a string, which the library it wraps does not agree with:
+ * the field is written straight through to libass's `int Style`, an index into the track's style
+ * list. Corrected once, here, so a name cannot end up in it again.
+ */
+type StyledEvent = Omit<ASS_Event, 'Style'> & { Style: number }
+
+const createEvent = (jassub: JASSUB, event: StyledEvent) => jassub.createEvent(event as unknown as ASS_Event)
+
+type SubtitleHeaderPart = { type: 'header', streamIndex: number, content: string, eventsContent: string, styles: Map<string, number> }
+type SubtitleDialoguePart = { type: 'dialogue', streamIndex: number, index: number, assEvent: StyledEvent }
 
 export type SubtitleRendererOptions = {
   video: HTMLVideoElement
@@ -34,35 +42,36 @@ export type SubtitleRendererOptions = {
 
 const convertTimestamp = (ms: number) => new Date(ms).toISOString().slice(11, 22)
 
-const appendParsedStyle = (jassub: JASSUB, style: ParsedASSStyles['style'][number]) =>
-  jassub.createStyle({
-    ...style,
-    treat_fontname_as_pattern: 0,
-    Blur: 0,
-    Justify: 0,
-    FontName: style.Fontname,
-    FontSize: Number(style.Fontsize),
-    PrimaryColour: Number(style.PrimaryColour),
-    SecondaryColour: Number(style.SecondaryColour),
-    OutlineColour: Number(style.OutlineColour),
-    BackColour: Number(style.BackColour),
-    Bold: Number(style.Bold),
-    Italic: Number(style.Italic),
-    Underline: Number(style.Underline),
-    StrikeOut: Number(style.StrikeOut),
-    ScaleX: Number(style.ScaleX),
-    ScaleY: Number(style.ScaleY),
-    Spacing: Number(style.Spacing),
-    Angle: Number(style.Angle),
-    BorderStyle: Number(style.BorderStyle),
-    Outline: Number(style.Outline),
-    Shadow: Number(style.Shadow),
-    Alignment: Number(style.Alignment),
-    MarginL: Number(style.MarginL),
-    MarginR: Number(style.MarginR),
-    MarginV: Number(style.MarginV),
-    Encoding: Number(style.Encoding),
-  } as Parameters<JASSUB['createStyle']>[0])
+/**
+ * How many styles libass keeps in front of the ones the file declares.
+ *
+ * `ass_new_track` always allocates its own "Default" at index 0 before parsing a line of the header,
+ * so the file's first style lands at 1. That number is what an event's `Style` field holds: libass
+ * reads it as an index into the track's style list and nothing else. `subtitle-scale.browser.test.tsx`
+ * is what pins this, by measuring the rendered text against what libass itself draws.
+ */
+const LIBASS_OWN_STYLES = 1
+
+const headerStyles = (content: string) =>
+  // a duplicated name resolves to the LAST one, the way libass's own lookup scans the list backwards
+  new Map(parse(content).styles.style.map((style, index) => [style.Name, index + LIBASS_OWN_STYLES]))
+
+/**
+ * The index libass will resolve this event's style to.
+ *
+ * jassub types `ASS_Event.Style` as a string and writes it straight through to an `int`, so handing
+ * it a style NAME stores 0, which is libass's own default: Arial at size 18, with margins and a drop
+ * shadow of its own. Subtitles still appear, in a face and a size the file never asked for.
+ *
+ * Falling back to the header's own "Default", then to 0, is what libass does for a name it cannot
+ * find. The leading-`*` strip and the case fold on "Default" are its normalisation, kept so a
+ * `*Default` written by an older tool resolves here too.
+ */
+const styleIndex = (header: SubtitleHeaderPart, name: string) => {
+  const stripped = name.replace(/^\*+/, '')
+  const key = stripped.toLowerCase() === 'default' ? 'Default' : stripped
+  return header.styles.get(key) ?? header.styles.get('Default') ?? 0
+}
 
 // cleared so jassub scales the script to the canvas, not to the authored resolution
 const renderable = (content: string) => {
@@ -84,7 +93,7 @@ const toHeaderPart = (fragment: SubtitleFragment & { type: 'header' }): Subtitle
     console.warn(`subtitle stream ${fragment.streamIndex} has no Events format, ignoring the track`)
     return null
   }
-  return { type: 'header', streamIndex: fragment.streamIndex, content: fragment.content, eventsContent, parsed: parse(fragment.content) }
+  return { type: 'header', streamIndex: fragment.streamIndex, content: fragment.content, eventsContent, styles: headerStyles(fragment.content) }
 }
 
 const toDialoguePart = (header: SubtitleHeaderPart, fragment: SubtitleFragment & { type: 'dialogue' }): SubtitleDialoguePart => {
@@ -102,6 +111,7 @@ const toDialoguePart = (header: SubtitleHeaderPart, fragment: SubtitleFragment &
     index: dialogueIndex,
     assEvent: {
       ...event,
+      Style: styleIndex(header, event.Style),
       Effect: event.Effect ?? '',
       Text: event.Text.raw,
       Duration: (event.End - event.Start) * 1000,
@@ -109,7 +119,7 @@ const toDialoguePart = (header: SubtitleHeaderPart, fragment: SubtitleFragment &
       End: event.End * 1000,
       ReadOrder: dialogueIndex,
       _index: dialogueIndex,
-    } as ASS_Event,
+    } as StyledEvent,
   }
 }
 
@@ -149,7 +159,6 @@ export const createSubtitleRenderer = (options: SubtitleRendererOptions) => {
     // jassub 1.8.x binds setRate as the ratechange listener, so the Event becomes the rate
     video.removeEventListener('ratechange', (jassub as unknown as { _boundSetRate: EventListener })._boundSetRate)
     video.addEventListener('ratechange', onRateChange)
-    for (const style of header.parsed.styles.style) appendParsedStyle(jassub, style)
   }
 
   const pushAttachments = (incoming: Attachment[]) => {
@@ -175,7 +184,7 @@ export const createSubtitleRenderer = (options: SubtitleRendererOptions) => {
         const part = toDialoguePart(header, fragment)
         if (byIndex.has(part.index)) continue
         byIndex.set(part.index, part)
-        if (selected === fragment.streamIndex) jassub?.createEvent(part.assEvent)
+        if (selected === fragment.streamIndex && jassub) createEvent(jassub, part.assEvent)
       }
     }
   }
@@ -188,8 +197,7 @@ export const createSubtitleRenderer = (options: SubtitleRendererOptions) => {
     const header = headers.get(next)
     if (!header) return
     jassub.setTrack(renderable(header.content))
-    for (const style of header.parsed.styles.style) appendParsedStyle(jassub, style)
-    for (const part of dialogues.get(next)?.values() ?? []) jassub.createEvent(part.assEvent)
+    for (const part of dialogues.get(next)?.values() ?? []) createEvent(jassub, part.assEvent)
     jassub.setCurrentTime(video.paused, video.currentTime, video.playbackRate)
   }