@banou/media-player 0.8.15 → 0.8.17

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-B8CKGIng.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/subtitles.d.ts

@@ -20,7 +20,12 @@ export type SubtitleRendererOptions = {
      * which throws. So leaving this unset does not degrade to the slower build, it fails outright.
      */
     legacyWasmUrl?: string;
-    /** Fallback face for `liberation sans`. Without it jassub falls back to whatever the wasm build embeds. */
+    /**
+     * Fallback face for `liberation sans`. Without it jassub falls back to whatever the wasm build embeds.
+     *
+     * May be relative: it is resolved against the document before the worker sees it, for the reason
+     * given on `workerFetched`.
+     */
     defaultFontUrl?: string;
     onStreams?: (streams: SubtitleStream[]) => void;
 };

package/dist/{engine-CDdjRm_U.js → engine-B8CKGIng.js}

@@ -1,12 +1,12 @@
 import { makeRemuxer as e, makeThumbnailer as t } from "libav-wasm";
 import n from "jassub";
-import { parse as r, stringify as i } from "ass-compiler";
+import { parse as r } from "ass-compiler";
 //#region src/lib/engine/source-buffer.ts
-var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
+var i = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 	index: n,
 	start: e.buffered.start(n),
 	end: e.buffered.end(n)
-})), o = (e) => new Promise((t, n) => {
+})), a = (e) => new Promise((t, n) => {
 	let r = () => {
 		e.removeEventListener("updateend", i), e.removeEventListener("abort", i), e.removeEventListener("error", a);
 	}, i = () => {
@@ -15,14 +15,14 @@ var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 		r(), n(Error("The browser rejected a media segment", { cause: e }));
 	};
 	e.addEventListener("updateend", i, { once: !0 }), e.addEventListener("abort", i, { once: !0 }), e.addEventListener("error", a, { once: !0 });
-}), s = (e, t) => {
+}), o = (e, t) => {
 	let n = Promise.resolve(), r = (e) => {
 		let t = n.then(e, e);
 		return n = t.catch(() => {}), t;
 	};
 	return {
-		appendBuffer: (t) => r(() => (e.appendBuffer(t), o(e))),
-		unbufferRange: (t, n) => r(() => t >= n ? Promise.resolve() : (e.remove(t, n), o(e))),
+		appendBuffer: (t) => r(() => (e.appendBuffer(t), a(e))),
+		unbufferRange: (t, n) => r(() => t >= n ? Promise.resolve() : (e.remove(t, n), a(e))),
 		updateTimestampOffset: (t) => r(async () => {
 			e.timestampOffset = t;
 		}),
@@ -32,55 +32,20 @@ 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) => {
-	let t = r(e);
-	return i({
-		...t,
-		info: {
-			...t.info,
-			ScaledBorderAndShadow: "no",
-			LayoutResX: "",
-			LayoutResY: ""
-		}
-	});
-}, f = (e) => {
+}, s = -1, c = (e, t) => e.createEvent(t), l = (e) => e === void 0 ? void 0 : new URL(e, document.baseURI).toString(), 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 = 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];
+}, h = (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 +53,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,285 +63,283 @@ 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(() => {
-		c?.setCurrentTime(t.paused, t.currentTime, t.playbackRate);
-	}, 100), b = () => c?.setRate(t.playbackRate), x = (e) => {
-		c = new n({
+}, g = (e) => {
+	let { video: t, canvas: r, workerUrl: i } = e, a = l(e.wasmUrl), o = l(e.legacyWasmUrl), s = l(e.defaultFontUrl), u, d = [], f = /* @__PURE__ */ new Map(), p = [], g = /* @__PURE__ */ new Map(), _, v = e.onStreams, ee = setInterval(() => {
+		u?.setCurrentTime(t.paused, t.currentTime, t.playbackRate);
+	}, 100), y = () => u?.setRate(t.playbackRate), b = (e) => {
+		u = new n({
 			onDemandRender: !1,
 			video: t,
 			canvas: r,
-			subContent: d(e.content),
+			subContent: e.content,
 			workerUrl: i,
 			modernWasmUrl: a,
 			...o ? { wasmUrl: o } : {},
-			fonts: l.map(([, e]) => e),
+			fonts: d.map(([, e]) => e),
 			availableFonts: {
-				...Object.fromEntries(l),
+				...Object.fromEntries(d),
 				...s ? { "liberation sans": s } : {}
 			}
-		}), t.removeEventListener("ratechange", c._boundSetRate), t.addEventListener("ratechange", b);
-		for (let t of e.parsed.styles.style) u(c, t);
+		}), t.removeEventListener("ratechange", u._boundSetRate), t.addEventListener("ratechange", y);
 	};
 	return {
 		pushAttachments: (e) => {
-			l = [...l, ...e.map((e) => [e.filename, new Uint8Array(e.data)])];
+			d = [...d, ...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 (f.has(t.streamIndex)) continue;
+				let e = m(t);
 				if (!e) continue;
-				m.set(t.streamIndex, e), h.push({
+				f.set(t.streamIndex, e), p.push({
 					streamIndex: t.streamIndex,
 					title: t.title,
 					language: t.language
-				}), v?.([...h]), _ === void 0 && (_ = t.streamIndex), c || x(e);
+				}), v?.([...p]), _ === void 0 && (_ = t.streamIndex), u || b(e);
 			} else {
-				let e = m.get(t.streamIndex);
+				let e = f.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 r = h(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 && u && c(u, r.assEvent);
 			}
 		},
 		selectStream: (e) => {
 			let n = e ?? -1;
-			if (n === _ || !c) return;
-			_ = n, c.freeTrack();
-			let r = m.get(n);
+			if (n === _ || !u) return;
+			_ = n, u.freeTrack();
+			let r = f.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.setCurrentTime(t.paused, t.currentTime, t.playbackRate);
+				u.setTrack(r.content);
+				for (let e of g.get(n)?.values() ?? []) c(u, e.assEvent);
+				u.setCurrentTime(t.paused, t.currentTime, t.playbackRate);
 			}
 		},
-		getStreams: () => [...h],
+		getStreams: () => [...p],
 		getSelectedStream: () => _,
 		setOnStreams: (e) => {
 			v = e;
 		},
 		destroy: () => {
-			clearInterval(y), t.removeEventListener("ratechange", b), c?.destroy(), c = void 0;
+			clearInterval(ee), t.removeEventListener("ratechange", y), u?.destroy(), u = void 0;
 		}
 	};
-}, h = class extends Error {
+}, _ = 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) => {
+}, v = (e) => !!e && typeof e == "object" && e.mediaElement === !0, ee = -20, y = 60, b = 30, x = -5, S = 20, C = 5, w = 15e3, T = 1, E = 3, D = 12, O = 200, k = 250, A = 25e5, j = (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({
+}, te = async (t) => {
+	let { videoElement: n, canvasElement: r, read: a, length: s, publicPath: c, libavWorkerUrl: l, jassubWorkerUrl: u, jassubWasmUrl: d, jassubLegacyWasmUrl: f, defaultFontUrl: p, bufferSize: m = A, audioStreamIndex: h, onReady: v, onError: te, onRecovered: ne, onSeek: M, onSubtitleStreams: re, onAudioStreams: ie } = t, N = await e({
 		publicPath: c,
 		workerUrl: l,
 		workerOptions: { type: "module" },
-		bufferSize: g,
-		length: o,
-		audioStreamIndex: k,
-		read: i
-	}), j = [], M = !1, N = () => {
-		if (!M) {
-			M = !0;
-			for (let e of [...j].reverse()) try {
+		bufferSize: m,
+		length: s,
+		audioStreamIndex: h,
+		read: a
+	}), P = [], F = !1, ae = () => {
+		if (!F) {
+			F = !0;
+			for (let e of [...P].reverse()) try {
 				e();
 			} catch {}
 		}
 	};
-	j.push(() => O(A));
+	P.push(() => j(N));
 	try {
-		let e = await A.init(), t = e.audioStreams ?? [], i = t.some((e) => e.streamIndex === k) ? k : t[0]?.streamIndex ?? -1;
-		se?.(t, i);
-		let o = m({
+		let e = await N.init(), t = e.audioStreams ?? [], a = t.some((e) => e.streamIndex === h) ? h : t[0]?.streamIndex ?? -1;
+		ie?.(t, a);
+		let s = g({
 			video: n,
 			canvas: r,
 			workerUrl: u,
 			wasmUrl: d,
 			legacyWasmUrl: f,
 			defaultFontUrl: p,
-			onStreams: oe
+			onStreams: re
 		});
-		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");
+		if (P.push(() => s.destroy()), e.attachments?.length && s.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(), A = URL.createObjectURL(m);
+		P.push(() => URL.revokeObjectURL(A)), n.src = A, P.push(() => {
 			try {
 				n.pause();
 			} catch {}
 			n.removeAttribute("src"), n.load();
 		});
-		let O = await new Promise((t, n) => {
+		let j = 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);
+			}, w), 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: I, unbufferRange: oe, updateTimestampOffset: se, endOfStream: ce } = o(j, m);
+		await I(e.data), e.subtitles?.length && s.pushFragments(e.subtitles), v?.();
+		let L = !1, R = !1, z = 0, B, le = () => B ?? n.currentTime, V = !1, H = 0, U = 0, W = null, G = 0, K = 0, q = !1, ue = 0, J = (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) => {
-			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);
+			t && r || (console.error(e), !(q && !n) && (q = !0, te?.(r ? Error("Reading the video file failed", { cause: e }) : e)));
+		}, de = async (e = !1) => {
+			if (z > 0 && !e) return;
+			let t = n.currentTime, r = e ? x : ee, a = e ? S : y;
+			for (let { start: e, end: n } of i(j)) e < t + r && await oe(e, t + r), n > t + a && await oe(t + a, n);
+		}, fe = () => {
+			let e = i(j);
 			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;
-		}, me = () => {
+			let t = le(), n = e.find((e) => e.start <= t + T && t < e.end);
+			return n && n.end >= t + y ? !1 : !n || n.end < t + b;
+		}, pe = () => {
 			let e = n.currentTime;
-			return a(O).find((t) => t.start <= e + C && e < t.end);
+			return i(j).find((t) => t.start <= e + T && e < t.end);
+		}, me = () => {
+			let e = pe();
+			return !!e && e.end >= K - .1;
 		}, he = () => {
-			let e = me();
-			return !!e && e.end >= W - .1;
-		}, ge = () => {
-			let e = a(O).map((e) => e.end);
-			e.length && (W = Math.max(W, ...e));
-		}, J = async (e) => {
-			I = !0, H = null, U = 0, K = e;
-			let t = ++V;
+			let e = i(j).map((e) => e.end);
+			e.length && (K = Math.max(K, ...e));
+		}, Y = async (e) => {
+			R = !0, W = null, G = 0, ue = e;
+			let t = ++U;
 			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());
+				let { data: n, pts: r, subtitles: i, finished: a } = await N.seek(e);
+				if (F || t !== U || (a && (V = !0), i?.length && s.pushFragments(i), await se(r), F || t !== U)) return;
+				n.byteLength && (await I(n), he());
 			} catch (e) {
-				q(e, M || t !== V);
+				J(e, F || t !== U);
 			} finally {
-				t === V && (I = !1);
+				t === U && (R = !1);
 			}
-		}, _e = async () => {
-			let e = H;
+		}, ge = async () => {
+			let e = W;
 			if (e) try {
-				await P(e), ge(), H === e && (H = null, U = 0);
+				await I(e), he(), W === e && (W = null, G = 0);
 			} catch (t) {
-				if (H !== e) return;
+				if (W !== e) return;
 				if (t?.name === "QuotaExceededError") {
-					let t = await fe(!0).then(() => !0, () => !1);
-					if (H !== e) return;
+					let t = await de(!0).then(() => !0, () => !1);
+					if (W !== e) return;
 					if (t) {
-						z = !1, await J(me()?.end ?? n.currentTime);
+						V = !1, await Y(pe()?.end ?? n.currentTime);
 						return;
 					}
 				}
-				if (U += 1, U < ee) return;
-				throw H = null, t;
+				if (G += 1, G < C) return;
+				throw W = null, t;
 			}
-		}, ve = async () => {
-			if (F || I || $ !== void 0 || M || !H && (z || !pe())) return;
-			let e = ++B, t = V, n = () => M || e !== B || t !== V;
-			F = !0;
+		}, _e = async () => {
+			if (L || R || $ !== void 0 || F || !W && (V || !fe())) return;
+			let e = ++H, t = U, n = () => F || e !== H || t !== U;
+			L = !0;
 			try {
-				if (!H) {
-					let { data: e, subtitles: t, finished: r } = await A.read();
-					if (n() || (r && (z = !0), t?.length && o.pushFragments(t), !e.byteLength)) return;
-					H = e, U = 0;
+				if (!W) {
+					let { data: e, subtitles: t, finished: r } = await N.read();
+					if (n() || (r && (V = !0), t?.length && s.pushFragments(t), !e.byteLength)) return;
+					W = e, G = 0;
 				}
-				await _e(), !n() && G && (G = !1, ie?.());
+				await ge(), !n() && q && (q = !1, ne?.());
 			} catch (e) {
-				q(e, n());
+				J(e, n());
 			} finally {
-				e === B && (F = !1);
+				e === H && (L = !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);
+		}, ve = (e) => e >= ue && !!pe(), ye = (e) => i(j).some((t) => t.start <= e + T && e < t.end), X = (e) => {
+			let t = i(j).find((t) => t.start <= e + T && e < t.end);
 			return t ? t.end - e : 0;
-		}, xe = async (e) => {
-			if (!M && !(Y(e) >= w)) {
-				z = !1, L++, R = e;
+		}, be = async (e) => {
+			if (!F && !(X(e) >= E)) {
+				V = !1, z++, B = e;
 				try {
-					be(e) || await J(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;
+					ye(e) || await Y(e);
+					let t = U;
+					for (let n = 0; n < D && !(F || t !== U || V || X(e) >= E); n++) {
+						let t = X(e);
+						if (await _e(), X(e) <= t) break;
 					}
 				} finally {
-					L--, R === e && (R = void 0);
+					z--, B === e && (B = 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);
+		}, xe = 0, Z = null, Q, Se = (e) => {
+			let t = performance.now(), n = t - xe;
+			if (n >= O) {
+				xe = t, Z = null, M?.(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));
+				Z = null, !(e === null || F) && (xe = performance.now(), M?.(e));
+			}, O - n));
 		};
-		j.push(() => {
+		P.push(() => {
 			Q && clearTimeout(Q);
 		});
 		let Ce = 0, $;
-		j.push(() => {
+		P.push(() => {
 			$ && clearTimeout($);
 		});
 		let we = () => {
 			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);
+			let i = performance.now(), a = i - Ce < k;
+			if (Ce = i, !ve(t) && !(R && Math.abs(t - ue) < .001)) {
+				if (V = !1, $ && clearTimeout($), !a) {
+					$ = void 0, Y(t);
 					return;
 				}
 				$ = setTimeout(() => {
-					if ($ = void 0, M) return;
+					if ($ = void 0, F) return;
 					let e = n.currentTime;
-					ye(e) || (z = !1, J(e));
-				}, E);
+					ve(e) || (V = !1, Y(e));
+				}, k);
 			}
 		};
-		n.addEventListener("seeking", we), j.push(() => n.removeEventListener("seeking", we));
+		n.addEventListener("seeking", we), P.push(() => n.removeEventListener("seeking", we));
 		let Te = !1, Ee = () => {
 			if (Te) return;
 			Te = !0;
 			let e = n.error;
-			q(new h(`the media element failed: ${e?.message ?? "unknown"}`, { cause: e }), !1, !0);
+			J(new _(`the media element failed: ${e?.message ?? "unknown"}`, { cause: e }), !1, !0);
 		};
-		n.addEventListener("error", Ee), j.push(() => n.removeEventListener("error", Ee));
+		n.addEventListener("error", Ee), P.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(() => {}));
+			Te || n.error || (de().catch(() => {}), _e().catch((e) => J(e, !1)), V && !W && me() && m.readyState === "open" && ce().catch(() => {}));
 		}, 100);
-		return j.push(() => clearInterval(De)), {
-			destroy: N,
-			prepareSeek: xe,
+		return P.push(() => clearInterval(De)), {
+			destroy: ae,
+			prepareSeek: be,
 			videoElement: n,
-			selectSubtitleStream: (e) => o.selectStream(e),
+			selectSubtitleStream: (e) => s.selectStream(e),
 			indexes: e.indexes ?? [],
 			duration: e.info.input.duration,
 			videoMimeType: e.info.output.videoMimeType,
 			audioMimeType: e.info.output.audioMimeType
 		};
 	} catch (e) {
-		throw N(), e;
+		throw ae(), 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({
+}, ne = 5, M = 500, re = 320, ie = 1e6, N = 3, P = 1e4, F = async (e) => {
+	let { publicPath: n, workerUrl: r, length: i, read: a, onThumbnails: o, width: s = re } = e, c = await t({
 		publicPath: n,
 		workerUrl: r,
 		workerOptions: { type: "module" },
@@ -383,14 +347,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 ?? ne, n / M), 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) + ie, i),
 				done: !1,
 				attempts: 0
 			});
@@ -421,7 +385,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")), P))]), 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 +397,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 >= N;
 			});
 		};
 		return f(), {
@@ -443,14 +407,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 = [], j(c);
 			}
 		};
 	} catch (e) {
-		throw O(c), e;
+		throw j(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) => {
+}, ae = 1280, I = 1920, oe = 250, se = 100, ce = () => 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, z = () => ce() ? L() ? "window" : R() ? "burn-in" : null : null, B = (e) => {
+	let { video: t, canvas: n } = e, r = e.mode ?? z() ?? "window", i = e.maxWidth ?? (r === "burn-in" ? I : ae), 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);
@@ -458,58 +422,58 @@ var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 		h(), v();
 	}, v = () => {
 		d || !a || (o = g ? t.requestVideoFrameCallback(_) : requestAnimationFrame(_));
-	}, y = () => {
+	}, ee = () => {
 		o !== void 0 && (g ? t.cancelVideoFrameCallback(o) : cancelAnimationFrame(o)), s !== void 0 && clearInterval(s), o = void 0, s = void 0;
-	}, b = () => {
+	}, y = () => {
 		"mediaSession" in navigator && (navigator.mediaSession.playbackState = t.paused ? "paused" : "playing");
-	}, x = () => {
+	}, b = () => {
 		c || l || !t.paused || t.play().catch(() => {});
-	}, ee = () => {
+	}, x = () => {
 		c || l || (t.paused || t.pause(), r !== "burn-in" && (c = !0, a?.mirror.play().catch(() => {}).finally(() => {
 			c = !1;
 		})));
 	}, S = () => {
-		b(), a?.mirror.play().catch(() => {});
+		y(), a?.mirror.play().catch(() => {});
 	}, C = () => {
-		b(), r === "burn-in" && a?.mirror.pause();
+		y(), r === "burn-in" && a?.mirror.pause();
 	}, w = () => {
 		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, se);
 		})).catch(() => {}).finally(() => {
 			e.pause(), setTimeout(() => {
 				l = !1;
-			}, P);
+			}, se);
 		});
-	}, te = [["play", () => {
+	}, T = [["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 T) 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 (ee(), E(!1), t.removeEventListener("play", S), t.removeEventListener("pause", C), t.removeEventListener("seeked", w), !a) {
 			f?.();
 			return;
 		}
 		let { stream: e, mirror: n } = a;
-		n.removeEventListener("play", x), n.removeEventListener("pause", ee), n.removeEventListener("leavepictureinpicture", D);
+		n.removeEventListener("play", b), n.removeEventListener("pause", x), n.removeEventListener("leavepictureinpicture", O);
 		for (let t of e.getTracks()) t.stop();
 		n.remove(), a = void 0, f?.();
-	}, D = () => E(), O = (e) => {
+	}, O = () => D(), k = (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 () => {
+	}, A = 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" ? k(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 +482,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) => {
+		}, oe), u.play().catch(() => {}), u.readyState === 0 && await new Promise((e) => {
 			let t = () => {
 				clearTimeout(n), e();
 			}, n = setTimeout(t, 1e3);
@@ -527,7 +491,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", b), u.addEventListener("pause", x), u.addEventListener("leavepictureinpicture", O), t.addEventListener("play", S), t.addEventListener("pause", C), t.addEventListener("seeked", w), E(!0), y(), r === "burn-in") {
 			t.paused && u.pause(), e.onBurnedInChange?.(!0);
 			return;
 		}
@@ -540,7 +504,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 +512,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 A();
 					} 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 +523,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 { _ as a, j as c, i as d, o as f, A as i, s as l, z as n, v as o, F as r, te as s, B as t, g 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-B8CKGIng.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.17",
   "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,17 +1,25 @@
-import type { ParsedASS, ParsedASSStyles } from 'ass-compiler'
 import type { ASS_Event } from 'jassub'
 import type { Attachment, SubtitleFragment } from 'libav-wasm/build/worker'
 
 import JASSUB from 'jassub'
-import { parse, stringify } from 'ass-compiler'
+import { parse } from 'ass-compiler'
 
 export type SubtitleStream = { streamIndex: number, title: string, language: string }
 
 /** -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
@@ -27,47 +35,61 @@ export type SubtitleRendererOptions = {
    * which throws. So leaving this unset does not degrade to the slower build, it fails outright.
    */
   legacyWasmUrl?: string
-  /** Fallback face for `liberation sans`. Without it jassub falls back to whatever the wasm build embeds. */
+  /**
+   * Fallback face for `liberation sans`. Without it jassub falls back to whatever the wasm build embeds.
+   *
+   * May be relative: it is resolved against the document before the worker sees it, for the reason
+   * given on `workerFetched`.
+   */
   defaultFontUrl?: string
   onStreams?: (streams: SubtitleStream[]) => void
 }
 
+/**
+ * A url the WORKER will fetch, resolved against the document first.
+ *
+ * jassub's worker is built from a `blob:` url, so a relative url handed to it resolves against that
+ * blob inside the worker and the fetch never lands. For the wasm that fails loudly. For the fallback
+ * font it fails in SILENCE: libass is left with no face to draw with, so the track renders nothing at
+ * all and the picture simply has no subtitles on it, with no error anywhere to say why.
+ *
+ * `workerUrl` is deliberately not passed through here. `new Worker()` is called on the main thread,
+ * where a relative url already resolves against the document.
+ */
+const workerFetched = (url: string | undefined) =>
+  url === undefined ? undefined : new URL(url, document.baseURI).toString()
+
 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])
-
-// cleared so jassub scales the script to the canvas, not to the authored resolution
-const renderable = (content: string) => {
-  const parsed = parse(content)
-  return stringify({ ...parsed, info: { ...parsed.info, ScaledBorderAndShadow: 'no', LayoutResX: '', LayoutResY: '' } })
+/**
+ * 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
 }
 
 /**
@@ -84,7 +106,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 +124,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,14 +132,17 @@ const toDialoguePart = (header: SubtitleHeaderPart, fragment: SubtitleFragment &
       End: event.End * 1000,
       ReadOrder: dialogueIndex,
       _index: dialogueIndex,
-    } as ASS_Event,
+    } as StyledEvent,
   }
 }
 
 export type SubtitleRenderer = ReturnType<typeof createSubtitleRenderer>
 
 export const createSubtitleRenderer = (options: SubtitleRendererOptions) => {
-  const { video, canvas, workerUrl, wasmUrl, legacyWasmUrl, defaultFontUrl } = options
+  const { video, canvas, workerUrl } = options
+  const wasmUrl = workerFetched(options.wasmUrl)!
+  const legacyWasmUrl = workerFetched(options.legacyWasmUrl)
+  const defaultFontUrl = workerFetched(options.defaultFontUrl)
   let jassub: JASSUB | undefined
   let attachments: [string, Uint8Array][] = []
   const headers = new Map<number, SubtitleHeaderPart>()
@@ -136,7 +162,7 @@ export const createSubtitleRenderer = (options: SubtitleRendererOptions) => {
       onDemandRender: false,
       video,
       canvas,
-      subContent: renderable(header.content),
+      subContent: header.content,
       workerUrl,
       modernWasmUrl: wasmUrl,
       ...legacyWasmUrl ? { wasmUrl: legacyWasmUrl } : {},
@@ -149,7 +175,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 +200,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)
       }
     }
   }
@@ -187,9 +212,8 @@ export const createSubtitleRenderer = (options: SubtitleRendererOptions) => {
     jassub.freeTrack()
     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)
+    jassub.setTrack(header.content)
+    for (const part of dialogues.get(next)?.values() ?? []) createEvent(jassub, part.assEvent)
     jassub.setCurrentTime(video.paused, video.currentTime, video.playbackRate)
   }