@banou/media-player 0.8.20 → 0.9.0

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-B8CKGIng.js";
+import { l as e, n as t, o as n, r, s as i, t as a, u as o } from "./engine-DZrYu66u.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";
@@ -179,7 +179,7 @@ var ee = {
 			try {
 				let n = await i({
 					videoElement: e,
-					canvasElement: t,
+					subtitleContainer: t,
 					read: (e, t) => A.current(e, t),
 					length: s,
 					publicPath: c,
@@ -287,7 +287,7 @@ var ee = {
 		if (!e || !n || !s) return;
 		let t = a({
 			video: e,
-			canvas: n,
+			subtitles: n,
 			mode: s,
 			onBurnedInChange: o
 		});
@@ -337,12 +337,18 @@ var ee = {
 		regular: "\n      font-weight: 400;\n      font-size: calc(0.8 * var(--mp-unit));\n      line-height: calc(1.1 * var(--mp-unit));\n      @media (min-width: 960px) {\n        font-size: calc(1 * var(--mp-unit));\n        line-height: calc(1.4 * var(--mp-unit));\n      }\n    "
 	}
 }, ge = h`
-  top: unset !important;
-  left: unset !important;
-  width: 100%;
-  height: 100%;
-  margin: auto;
-  pointer-events: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  canvas {
+    top: unset !important;
+    left: unset !important;
+    width: 100%;
+    height: 100%;
+    margin: auto;
+    pointer-events: none;
+  }
 `, _e = h`
   position: absolute;
   top: 0;
@@ -402,7 +408,7 @@ var ee = {
   ${H.bLarge.regular}
   text-shadow: 0 0 4px rgba(0, 0, 0, 1);
   pointer-events: none;
-`, be = (e) => e instanceof Error ? e.message : typeof e == "string" ? e : "Playback failed", xe = ({ onCanvasRef: e }) => {
+`, be = (e) => e instanceof Error ? e.message : typeof e == "string" ? e : "Playback failed", xe = ({ onSubtitleRef: e }) => {
 	let t = V((e) => e.title), n = V((e) => e.hideUI), r = V((e) => e.playbackError), i = V((e) => e.ready), a = V((e) => e.size), o = V((e) => e.waiting);
 	return /* @__PURE__ */ w(S, { children: [
 		t ? /* @__PURE__ */ C("div", {
@@ -419,7 +425,8 @@ var ee = {
 			css: ye,
 			children: be(r)
 		}) : void 0,
-		/* @__PURE__ */ C("canvas", {
+		/* @__PURE__ */ C("div", {
+			className: "subtitles",
 			ref: e,
 			css: ge
 		})
@@ -2088,6 +2095,19 @@ ${X}
     z-index: 2;
   }
 
+  /* The subtitle layer sits UNDER the title and the spinner, where the canvas itself used to sit.
+     As a plain child div it is matched by the rule above and raised to the overlay items' level,
+     which paints subtitles over the title's gradient, over the spinner and over the error text.
+     Naming the type as well is what takes it back: :not() carries the specificity of its argument,
+     so the rule above is (0,2,1) and a bare .subtitles at (0,2,0) loses to it whatever the source
+     order, while div.subtitles ties at (0,2,1) and second place in the same block then wins.
+     subtitle-layering.browser.test.tsx measures the computed value rather than trusting this. */
+  & > div.subtitles {
+    inset: 0;
+    z-index: 1;
+    pointer-events: none;
+  }
+
   canvas {
     height: 100%;
     width: 100%;
@@ -2112,7 +2132,7 @@ ${X}
 		key: r,
 		item: e
 	}];
-}), ut = ({ ref: e, onVideoRef: t, onCanvasRef: n, overlay: r, controls: i, children: a }) => {
+}), ut = ({ ref: e, onVideoRef: t, onSubtitleRef: n, overlay: r, controls: i, children: a }) => {
 	let o = V(), s = V((e) => e.hideUI), c = V((e) => e.setHideUI), l = p(void 0), u = p("mouse"), f = p({
 		x: -1,
 		y: -1
@@ -2155,7 +2175,7 @@ ${X}
 		},
 		className: s ? "hide" : "",
 		children: [
-			/* @__PURE__ */ C(xe, { onCanvasRef: n }),
+			/* @__PURE__ */ C(xe, { onSubtitleRef: n }),
 			lt(r).map(({ key: e, item: t }) => /* @__PURE__ */ C("div", {
 				css: st,
 				style: { ...s ? {
@@ -2265,7 +2285,7 @@ ${X}
 	}, [I, z]), /* @__PURE__ */ C(ut, {
 		ref: g,
 		onVideoRef: n ? void 0 : b,
-		onCanvasRef: S,
+		onSubtitleRef: S,
 		overlay: e.overlay,
 		controls: e.controls,
 		children: t

package/dist/react/components/chrome.d.ts

@@ -3,12 +3,12 @@ export type ChromeProps = {
     ref?: Ref<HTMLDivElement> | ((element: HTMLDivElement | null) => void);
     /** Absent means render no video element: the media belongs to someone else and arrives as children. */
     onVideoRef?: (element: HTMLVideoElement | null) => void;
-    onCanvasRef: (element: HTMLCanvasElement | null) => void;
+    onSubtitleRef: (element: HTMLDivElement | null) => void;
     /** The app's own content, over the video and outside the click-to-pause region, unlike `children`. */
     overlay?: ReactNode;
     /** False draws no control bar at all, leaving the picture, the title and the overlay. */
     controls?: boolean;
     children?: ReactNode;
 };
-export declare const Chrome: ({ ref, onVideoRef, onCanvasRef, overlay, controls, children }: ChromeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Chrome: ({ ref, onVideoRef, onSubtitleRef, overlay, controls, children }: ChromeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Chrome;

package/dist/react/components/overlay.d.ts

@@ -1,4 +1,4 @@
-export declare const Overlay: ({ onCanvasRef }: {
-    onCanvasRef: (element: HTMLCanvasElement | null) => void;
+export declare const Overlay: ({ onSubtitleRef }: {
+    onSubtitleRef: (element: HTMLDivElement | null) => void;
 }) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Overlay;

package/dist/react/hooks/use-picture-in-picture.d.ts

@@ -13,5 +13,10 @@ export type PictureInPicture = {
  * hidden mirror. Where it does not, and the engine is Gecko, the same composite becomes the picture
  * in the page so that the BROWSER'S own picture in picture control carries the subtitles with it,
  * which it otherwise cannot: it takes a video element, and the subtitles live on a canvas above one.
+ *
+ * The second argument is the subtitle LAYER, not that canvas. From jassub 2 the canvas belongs to the
+ * renderer and is replaced on every pipeline rebuild, so only the layer lives long enough to hold.
  */
-export declare const usePictureInPicture: (video: HTMLVideoElement | null, canvas: HTMLCanvasElement | null) => PictureInPicture;
+export declare const usePictureInPicture: (video: HTMLVideoElement | null, 
+/** The subtitle layer, not the canvas: see `PictureInPictureOptions.subtitles`. */
+subtitles: HTMLElement | null) => PictureInPicture;

package/dist/react/hooks/use-playback.d.ts

@@ -3,6 +3,6 @@ import type { MediaPlayerLocalOptions } from '../video-player';
  * Owns the engine for the life of a source: start, teardown, and every piece of state the pipeline
  * discovers. Nothing is mirrored in React state, so the store is the only place any of it lives.
  */
-export declare const usePlayback: (video: HTMLVideoElement | null, canvas: HTMLCanvasElement | null, 
+export declare const usePlayback: (video: HTMLVideoElement | null, subtitles: HTMLElement | null, 
 /** null when the media is remote: there are no bytes, so there is no pipeline to run. */
 options: MediaPlayerLocalOptions | null) => void;

package/dist/remote/index.d.ts

@@ -83,6 +83,24 @@ export type MediaPlayerHandle = {
      * lifetime or `Promise.race` for the wait alone.
      */
     readonly ready: Promise<void>;
+    /**
+     * Start playing, muting first if that is what the far document requires, and say which happened.
+     *
+     * `play()` runs under the FAR document's autoplay policy, and no message carries a user gesture
+     * across a frame boundary: however deliberately somebody clicked over here, an unmuted element in
+     * a document nobody has touched refuses to start. Muted playback is always permitted, so this
+     * tries honestly first and falls back rather than leaving the player stopped.
+     *
+     * `muted` in the result is what the player ended up as, so an app that gets `true` can offer the
+     * viewer a way to turn sound on. That click is itself the gesture the document was missing, and
+     * clearing `muted` afterwards needs no permission from anyone.
+     *
+     * If muted playback is refused too, the FIRST error is what rejects, since a policy refusal says
+     * more than whatever the retry hit, and the player is left unmuted as it was found.
+     */
+    autoplay: () => Promise<{
+        muted: boolean;
+    }>;
     /** stop mirroring and release the channel; the far player keeps playing */
     destroy: () => void;
 };

package/dist/remote/index.js

@@ -90,29 +90,29 @@ var t = [
 	length: e.length,
 	start: (t) => e[t]?.[0] ?? 0,
 	end: (t) => e[t]?.[1] ?? 0
-}), f = 1e4, p = 8, m = 32, h = (e, t = {}) => {
-	C(t.origin);
+}), f = 1e4, p = 1500, m = () => new DOMException("the far player did not start playing", "NotAllowedError"), h = 8, g = 32, _ = (e, t = {}) => {
+	T(t.origin);
 	let n = typeof window < "u" && window.parent !== window;
-	return !t.transport && !n ? () => {} : v(t).serve(e, t);
-}, g = /* @__PURE__ */ new WeakMap(), _ = /* @__PURE__ */ new Map(), v = (i) => {
-	let a = i.channel ?? "banou-media-player", s = i.transport, l = `${a}|${i.origin ?? "*"}`, d = s ? g.get(s) ?? (g.set(s, /* @__PURE__ */ new Map()), g.get(s)) : _, f = d.get(l);
+	return !t.transport && !n ? () => {} : b(t).serve(e, t);
+}, v = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new Map(), b = (i) => {
+	let a = i.channel ?? "banou-media-player", s = i.transport, l = `${a}|${i.origin ?? "*"}`, d = s ? v.get(s) ?? (v.set(s, /* @__PURE__ */ new Map()), v.get(s)) : y, f = d.get(l);
 	if (f) return f;
-	let h = /* @__PURE__ */ new Map(), v = /* @__PURE__ */ new Map(), y = (e) => v.get(e) ?? v.set(e, /* @__PURE__ */ new Set()).get(e), b = (e, t) => {
-		v.get(e)?.delete(t);
+	let p = /* @__PURE__ */ new Map(), m = /* @__PURE__ */ new Map(), _ = (e) => m.get(e) ?? m.set(e, /* @__PURE__ */ new Set()).get(e), b = (e, t) => {
+		m.get(e)?.delete(t);
 		try {
 			t.onmessage = null, t.close();
 		} catch {}
 	}, x = (e, t, n) => {
-		for (let r of n ? [n] : [...y(e)]) try {
+		for (let r of n ? [n] : [..._(e)]) try {
 			r.postMessage(t);
 		} catch {
 			b(e, r);
 		}
 	}, S = (e) => {
-		let t = h.get(e);
+		let t = p.get(e);
 		return t ? c(t) : void 0;
 	}, C = (e, t) => {
-		if (!v.get(e)?.size) return;
+		if (!m.get(e)?.size) return;
 		let n = S(e);
 		n && x(e, {
 			event: t,
@@ -122,9 +122,9 @@ var t = [
 		subscribe: (e, t) => {
 			if (typeof e != "string") throw TypeError("a player id must be a string");
 			if (typeof MessagePort < "u" && !(t instanceof MessagePort)) throw TypeError("subscribe takes a MessagePort");
-			if (!v.has(e) && v.size >= m) throw RangeError("too many players on this channel");
-			let n = y(e);
-			if (n.size >= p) throw RangeError("too many embedders for this player");
+			if (!m.has(e) && m.size >= g) throw RangeError("too many players on this channel");
+			let n = _(e);
+			if (n.size >= h) throw RangeError("too many embedders for this player");
 			n.add(t), t.onmessage = () => b(e, t), t.start?.();
 			let r = S(e);
 			r && x(e, {
@@ -133,24 +133,28 @@ var t = [
 			}, t);
 		},
 		set: (e, t, r) => {
-			let i = h.get(e);
+			let i = p.get(e);
 			if (!(!i || !n.includes(t))) try {
 				i[t] = r;
 			} catch {}
 		},
 		call: async (e, t) => {
-			let n = h.get(e);
-			!n || !r.includes(t) || (t === "play" ? await n.play() : t === "pause" ? n.pause() : n.load?.());
+			let n = p.get(e);
+			if (!(!n || !r.includes(t))) try {
+				t === "play" ? await n.play() : t === "pause" ? n.pause() : n.load?.();
+			} finally {
+				C(e, "timeupdate");
+			}
 		}
 	}, T = new AbortController();
 	T.signal.addEventListener("abort", () => {
 		d.delete(l);
-		for (let [e, t] of v) for (let n of [...t]) b(e, n);
-		v.clear(), h.clear();
+		for (let [e, t] of m) for (let n of [...t]) b(e, n);
+		m.clear(), p.clear();
 	}, { once: !0 }), e(w, {
 		transport: i.transport ?? {
 			emit: window.parent,
-			receive: O(() => window.parent, i.origin)
+			receive: A(() => window.parent, i.origin)
 		},
 		origin: i.origin,
 		key: a,
@@ -158,18 +162,18 @@ var t = [
 	});
 	let E = { serve: (e, n) => {
 		let r = n.id ?? "default", i = t.map((t) => [t, () => {
-			h.get(r) === e && C(r, t);
+			p.get(r) === e && C(r, t);
 		}]);
 		for (let [t, n] of i) e.addEventListener(t, n);
-		let a = h.has(r);
-		h.set(r, e), a && x(r, {
+		let a = p.has(r);
+		p.set(r, e), a && x(r, {
 			event: "emptied",
 			snapshot: { ...u }
 		});
 		for (let t of o(c(e))) C(r, t);
 		let s = () => {
 			for (let [t, n] of i) e.removeEventListener(t, n);
-			h.get(r) === e && (h.delete(r), x(r, {
+			p.get(r) === e && (p.delete(r), x(r, {
 				event: "emptied",
 				snapshot: { ...u }
 			}));
@@ -179,10 +183,10 @@ var t = [
 		return n.signal && (n.signal.aborted ? l() : n.signal.addEventListener("abort", l, { once: !0 })), s;
 	} };
 	return d.set(l, E), E;
-}, y = /* @__PURE__ */ new WeakMap(), b = (t, n) => {
-	let r = n.channel ?? "banou-media-player", i = `${r}|${n.origin ?? "*"}`, a = y.get(t) ?? (y.set(t, /* @__PURE__ */ new Map()), y.get(t)), o = a.get(i);
+}, x = /* @__PURE__ */ new WeakMap(), S = (t, n) => {
+	let r = n.channel ?? "banou-media-player", i = `${r}|${n.origin ?? "*"}`, a = x.get(t) ?? (x.set(t, /* @__PURE__ */ new Map()), x.get(t)), o = a.get(i);
 	if (o) return o;
-	let s = E(t, n.origin), c = /* @__PURE__ */ new Set(), l = new AbortController(), u, d = (e) => {
+	let s = O(t, n.origin), c = /* @__PURE__ */ new Set(), l = new AbortController(), u, d = (e) => {
 		try {
 			e.port?.postMessage("close");
 		} catch {}
@@ -195,7 +199,7 @@ var t = [
 		let { port1: t, port2: n } = new MessageChannel();
 		e.port = t, t.onmessage = ({ data: t }) => {
 			l.signal.aborted || e.update(t);
-		}, await S(() => u.subscribe(e.id, n)).catch((t) => {
+		}, await w(() => u.subscribe(e.id, n)).catch((t) => {
 			throw d(e), t;
 		});
 	}, p = () => {
@@ -232,24 +236,24 @@ var t = [
 		}
 	};
 	return a.set(i, m), m;
-}, x = (e, t = {}) => {
-	C(t.origin);
-	let r = new AbortController(), i = t.signal ? AbortSignal.any([t.signal, r.signal]) : r.signal, a = t.id ?? "default", s = { ...u }, c = new EventTarget(), l = (e) => c.dispatchEvent(new Event(e)), f, p, m = new Promise((e, t) => {
-		f = e, p = t;
+}, C = (e, t = {}) => {
+	T(t.origin);
+	let r = new AbortController(), i = t.signal ? AbortSignal.any([t.signal, r.signal]) : r.signal, a = t.id ?? "default", s = { ...u }, c = new EventTarget(), l = (e) => c.dispatchEvent(new Event(e)), f, h, g = new Promise((e, t) => {
+		f = e, h = t;
 	});
-	m.catch(() => {});
-	let h = () => new DOMException("the remote player was closed", "AbortError"), g = /* @__PURE__ */ new Set(), _ = () => {
-		for (let e of [...g]) e(h());
-		g.clear();
-	}, v = /* @__PURE__ */ new Map(), y = !1, x = b(e, t).attach({
+	g.catch(() => {});
+	let _ = () => new DOMException("the remote player was closed", "AbortError"), v = /* @__PURE__ */ new Set(), y = () => {
+		for (let e of [...v]) e(_());
+		v.clear();
+	}, b = /* @__PURE__ */ new Map(), x = !1, C = S(e, t).attach({
 		id: a,
 		reset: () => {
-			y = !1, _();
+			x = !1, y();
 		},
 		update: ({ event: e, snapshot: t }) => {
-			let n = !y;
-			y = !0, Object.assign(s, t);
-			for (let [e, t] of v) s[e] = t;
+			let n = !x;
+			x = !0, Object.assign(s, t);
+			for (let [e, t] of b) s[e] = t;
 			if (!n) {
 				l(e);
 				return;
@@ -257,11 +261,11 @@ var t = [
 			for (let e of o(s)) l(e);
 			f();
 		}
-	}), S = () => {
-		x(), _(), p(h());
+	}), w = () => {
+		C(), y(), h(_());
 	};
-	i.aborted ? queueMicrotask(S) : i.addEventListener("abort", S, { once: !0 });
-	let w = (e, t) => Object.defineProperty(c, e, {
+	i.aborted ? queueMicrotask(w) : i.addEventListener("abort", w, { once: !0 });
+	let E = (e, t) => Object.defineProperty(c, e, {
 		get: () => t ? t(s[e]) : s[e],
 		enumerable: !0
 	});
@@ -276,40 +280,70 @@ var t = [
 		"error",
 		"videoWidth",
 		"videoHeight"
-	]) w(e);
-	w("buffered", d), w("seekable", d);
-	let T = (e) => m.then(() => i.aborted ? void 0 : e()).catch(() => {}), E = b(e, t);
+	]) E(e);
+	E("buffered", d), E("seekable", d);
+	let D = (e) => g.then(() => i.aborted ? void 0 : e()).catch(() => {}), O = S(e, t);
 	for (let e of n) Object.defineProperty(c, e, {
 		get: () => s[e],
 		set: (t) => {
-			s[e] = t, v.set(e, t), T(async () => {
-				await E.set(a, e, t), v.get(e) === t && v.delete(e);
+			s[e] = t, b.set(e, t), D(async () => {
+				await O.set(a, e, t), b.get(e) === t && b.delete(e);
 			});
 		},
 		enumerable: !0
 	});
-	let D = (e) => m.then(() => {
-		if (i.aborted) throw h();
-		let t = E.call(a, e);
+	let k = (e) => g.then(() => {
+		if (i.aborted) throw _();
+		let t = O.call(a, e);
 		return new Promise((e, n) => {
-			g.add(n), t.then(() => {
-				g.delete(n), e();
+			v.add(n), t.then(() => {
+				v.delete(n), e();
 			}, (e) => {
-				g.delete(n), n(i.aborted ? h() : e);
+				v.delete(n), n(i.aborted ? _() : e);
 			});
 		});
 	});
-	return c.play = () => (s.paused = !1, D("play").catch((e) => {
+	c.play = () => (s.paused = !1, k("play").catch((e) => {
 		throw s.paused = !0, e;
-	})), c.pause = () => {
-		s.paused = !0, D("pause").catch(() => {});
+	}));
+	let A = () => new Promise((e) => {
+		let t = (t) => {
+			clearTimeout(r), c.removeEventListener("playing", n), c.removeEventListener("play", n), e(t);
+		}, n = () => t(!0);
+		c.addEventListener("playing", n), c.addEventListener("play", n);
+		let r = setTimeout(() => t(!s.paused), p);
+	}), j = async () => {
+		let e = !s.paused, t;
+		try {
+			await c.play();
+		} catch (e) {
+			t = e;
+		}
+		return e ? {
+			started: !0,
+			refusal: t
+		} : {
+			started: await A(),
+			refusal: t
+		};
+	};
+	return c.autoplay = async () => {
+		let e = await j();
+		if (e.started) return { muted: c.muted };
+		if (c.muted || i.aborted) throw e.refusal ?? m();
+		c.muted = !0;
+		let t = await j();
+		if (t.started) return { muted: !0 };
+		throw c.muted = !1, e.refusal ?? t.refusal ?? m();
+	}, c.pause = () => {
+		s.paused = !0, k("pause").catch(() => {});
 	}, c.load = () => {
-		D("load").catch(() => {});
+		k("load").catch(() => {});
 	}, Object.defineProperty(c, "ready", {
-		value: m,
+		value: g,
 		enumerable: !1
 	}), c.destroy = () => r.abort(), c;
-}, S = async (e) => {
+}, w = async (e) => {
 	let t;
 	try {
 		return await Promise.race([e(), new Promise((e, n) => {
@@ -318,7 +352,7 @@ var t = [
 	} finally {
 		t && clearTimeout(t);
 	}
-}, C = (e) => {
+}, T = (e) => {
 	if (e === void 0 || e === "*") return;
 	if (e === "null") throw TypeError("an opaque origin (\"null\") cannot be spoken to; leave `origin` unset and the sender check stands alone");
 	let t;
@@ -328,47 +362,47 @@ var t = [
 		throw TypeError(`\`origin\` must be an origin like https://example.com, not ${e}`);
 	}
 	if (t.origin !== e) throw TypeError(`\`origin\` must be an origin like ${t.origin}, not ${e}`);
-}, w = (e) => {
+}, E = (e) => {
 	try {
 		return !!e && typeof e == "object" && e.window === e;
 	} catch {
 		return !1;
 	}
-}, T = (e) => {
-	if (w(e)) return !1;
+}, D = (e) => {
+	if (E(e)) return !1;
 	try {
 		return !!e && typeof e == "object" && "contentWindow" in e;
 	} catch {
 		return !1;
 	}
-}, E = (e, t) => {
-	if (w(e)) {
-		let n = D(t);
+}, O = (e, t) => {
+	if (E(e)) {
+		let n = k(t);
 		return {
 			emit: (t, r) => {
 				e.postMessage(t, n.target(), r ?? []);
 			},
-			receive: O(() => e, t, n)
+			receive: A(() => e, t, n)
 		};
 	}
-	if (T(e)) {
+	if (D(e)) {
 		if (!e.contentWindow) throw TypeError("mediaPlayer: the iframe has no window yet; append it to a document first");
-		let n = () => e.contentWindow, r = D(t);
+		let n = () => e.contentWindow, r = k(t);
 		return {
 			emit: (e, t) => {
 				n()?.postMessage(e, r.target(), t ?? []);
 			},
-			receive: O(n, t, r)
+			receive: A(n, t, r)
 		};
 	}
 	return e;
-}, D = (e) => {
+}, k = (e) => {
 	let t = e && e !== "*" ? e : void 0;
 	return {
 		target: () => t && t !== "null" ? t : "*",
 		admits: (e) => t ? e === t : (e && (t = e), !0)
 	};
-}, O = (e, t, n = D(t)) => (t) => {
+}, A = (e, t, n = k(t)) => (t) => {
 	let r = (r) => {
 		r.source === e() && n.admits(r.origin) && t(r.data, {
 			source: r.source,
@@ -379,4 +413,4 @@ var t = [
 	return window.addEventListener("message", r), () => window.removeEventListener("message", r);
 };
 //#endregion
-export { a as DEFAULT_PLAYER_ID, i as PLAYER_CHANNEL, t as PLAYER_EVENTS, h as exposePlayer, x as mediaPlayer };
+export { a as DEFAULT_PLAYER_ID, i as PLAYER_CHANNEL, t as PLAYER_EVENTS, _ as exposePlayer, C as mediaPlayer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banou/media-player",
-  "version": "0.8.20",
+  "version": "0.9.0",
   "description": "A video player for containers and codecs the browser cannot play natively, remuxed on the fly",
   "type": "module",
   "main": "dist/index.js",
@@ -34,9 +34,8 @@
     "build-lib": "shx rm -rf dist/ && vp build -c vite.lib.config.ts && npm run types",
     "prepublishOnly": "npm run build-lib",
     "types": "tsc -p tsconfig.lib.json",
-    "copy-assets": "shx mkdir -p public && npm run copy-libav && npm run copy-libass",
+    "copy-assets": "shx mkdir -p public && npm run copy-libav",
     "copy-libav": "shx cp node_modules/libav-wasm/build/worker.js public/libav-worker.js && shx cp node_modules/libav-wasm/build/libav.wasm public/libav.wasm && shx cp node_modules/libav-wasm/build/libav-jspi.wasm public/libav-jspi.wasm",
-    "copy-libass": "shx cp node_modules/jassub/dist/jassub-worker.js public/jassub-worker.js && shx cp node_modules/jassub/dist/jassub-worker.wasm public/jassub-worker.wasm && shx cp node_modules/jassub/dist/jassub-worker-modern.wasm public/jassub-worker-modern.wasm && shx cp node_modules/jassub/dist/default.woff2 public/default.woff2",
     "test": "npm run fixtures && vp test run",
     "fixtures": "node scripts/fixture.mjs"
   },
@@ -45,7 +44,7 @@
     "@videojs/core": "10.0.0-beta.26",
     "@videojs/react": "10.0.0-beta.26",
     "ass-compiler": "^0.1.16",
-    "jassub": "^1.8.6",
+    "jassub": "^2.5.16",
     "libav-wasm": "^0.8.4",
     "osra": "^0.6.12",
     "react-feather": "^2.0.10",

package/src/lib/engine/picture-in-picture.ts

@@ -27,8 +27,15 @@ export type PictureInPictureMode = 'window' | 'burn-in'
 
 export type PictureInPictureOptions = {
   video: HTMLVideoElement
-  /** The subtitle canvas. jassub sizes it to the video's content rect, so it maps 1:1. */
-  canvas: HTMLCanvasElement
+  /**
+   * The subtitle LAYER, not the canvas inside it.
+   *
+   * From jassub 2 the canvas is created and removed by the subtitle renderer, one per pipeline
+   * build, so an element captured here would stop being the one being painted the moment the audio
+   * track changed. The layer is what React owns for the life of the player, so hiding and restoring
+   * it stays correct across a rebuild, and the canvas is looked up per frame.
+   */
+  subtitles: HTMLElement
   maxWidth?: number
   /** Where the mirror is mounted. It must be in the document. Defaults to the video's parent. */
   container?: HTMLElement
@@ -87,7 +94,7 @@ export const pictureInPictureMode = (): PictureInPictureMode | null => {
 
 /** Takes over the document's Media Session play/pause handlers while a session is open. */
 export const createPictureInPicture = (options: PictureInPictureOptions): PictureInPictureController => {
-  const { video, canvas } = options
+  const { video, subtitles } = options
   const mode = options.mode ?? pictureInPictureMode() ?? 'window'
   const maxWidth = options.maxWidth ?? (mode === 'burn-in' ? BURN_IN_MAX_WIDTH : DEFAULT_MAX_WIDTH)
 
@@ -112,9 +119,12 @@ export const createPictureInPicture = (options: PictureInPictureOptions): Pictur
 
   const draw = (composite: HTMLCanvasElement, context: CanvasRenderingContext2D) => {
     context.drawImage(video, 0, 0, composite.width, composite.height)
-    // drawImage throws on a zero-sized source, which the canvas is until jassub has painted
-    if (canvas.width > 0 && canvas.height > 0) {
-      context.drawImage(canvas, 0, 0, composite.width, composite.height)
+    // Resolved per frame: the renderer replaces this element on every pipeline rebuild. A canvas
+    // jassub has transferred reports the size of the last frame its worker committed, so the zero
+    // check still keeps drawImage off a source with no dimensions to read.
+    const surface = subtitles.querySelector('canvas')
+    if (surface && surface.width > 0 && surface.height > 0) {
+      context.drawImage(surface, 0, 0, composite.width, composite.height)
     }
   }
 
@@ -254,18 +264,23 @@ export const createPictureInPicture = (options: PictureInPictureOptions): Pictur
    * The real element is dimmed, never `display: none`: jassub sizes the subtitle canvas from its
    * `offsetWidth`/`offsetHeight`, and a collapsed box silently yields a composite with no subtitles
    * in it, which is exactly the thing being asked for.
+   *
+   * The LAYER is what gets hidden, rather than the canvas inside it. The canvas is replaced whenever
+   * the pipeline is rebuilt, so hiding that would leave the replacement visible over the composite
+   * (doubled subtitles) and would restore `display` onto an element that is no longer in the tree
+   * (subtitles gone for the rest of the session). The layer outlives both.
    */
   const present = (mirror: HTMLVideoElement) => {
     const videoOpacity = video.style.opacity
-    const canvasDisplay = canvas.style.display
+    const subtitlesDisplay = subtitles.style.display
     mirror.style.cssText =
       'position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;z-index:1'
     video.style.opacity = '0'
-    canvas.style.display = 'none'
+    subtitles.style.display = 'none'
     restore = () => {
       restore = undefined
       video.style.opacity = videoOpacity
-      canvas.style.display = canvasDisplay
+      subtitles.style.display = subtitlesDisplay
     }
   }