@banou/media-player 0.10.16 → 0.10.18

package/README.md

@@ -158,6 +158,10 @@ an offer to skip an opening or ending, volume on a log curve, mute, playback spe
 selection, subtitle track selection, picture in picture, fullscreen, and keyboard shortcuts. Nothing
 is persisted: volume, speed and track choices start at their defaults every load.
 
+The shortcuts (Space or `k`, `f`, `m`, the arrow keys) listen on the whole page. Pass `shortcuts="player"` for a
+player among other content: a key then acts only from inside the player (a click on the picture puts the focus
+there) or while it is fullscreen, and Space and the arrows keep scrolling the page everywhere else.
+
 ### Chapters
 
 Chapters come from the container, and the seekbar draws them as segments with a break at each

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-C9vSEJYW.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-C4Gj_4zs.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/source-buffer.d.ts

@@ -8,5 +8,5 @@ export declare const updateSourceBuffer: (sourceBuffer: SourceBuffer, mediaSourc
     appendBuffer: (buffer: ArrayBuffer | Uint8Array) => Promise<void>;
     unbufferRange: (start: number, end: number) => Promise<void>;
     updateTimestampOffset: (timestampOffset: number) => Promise<void>;
-    endOfStream: () => Promise<void>;
+    endOfStream: (allowed?: () => boolean) => Promise<void>;
 };

package/dist/{engine-C9vSEJYW.js → engine-C4Gj_4zs.js}

@@ -26,8 +26,8 @@ var i = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 		updateTimestampOffset: (t) => r(async () => {
 			e.timestampOffset = t;
 		}),
-		endOfStream: () => r(async () => {
-			if (!(t.readyState !== "open" || e.updating)) try {
+		endOfStream: (n = () => !0) => r(async () => {
+			if (t.readyState === "open" && !e.updating && n()) try {
 				t.endOfStream();
 			} catch {}
 		})
@@ -174,13 +174,13 @@ var i = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 	constructor(e, t) {
 		super(e, t), this.name = "MediaElementError";
 	}
-}, _ = (e) => !!e && typeof e == "object" && e.mediaElement === !0, v = -20, y = 60, b = 30, x = -5, S = 20, C = 5, w = 15e3, T = 1, E = 3, ee = 12, D = 200, O = 250, k = 25e5, A = (e) => {
+}, _ = (e) => !!e && typeof e == "object" && e.mediaElement === !0, v = -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();
 	});
-}, te = async (t) => {
-	let { videoElement: n, subtitleContainer: r, read: a, length: s, publicPath: c, libavWorkerUrl: l, jassubWorkerUrl: u, jassubWasmUrl: d, jassubLegacyWasmUrl: f, defaultFontUrl: p, bufferSize: m = k, audioStreamIndex: _, onReady: te, onError: ne, onRecovered: re, onSeek: ie, onSubtitleStreams: ae, onAudioStreams: oe } = t, j = await e({
+}, ee = async (t) => {
+	let { videoElement: n, subtitleContainer: r, read: a, length: s, publicPath: c, libavWorkerUrl: l, jassubWorkerUrl: u, jassubWasmUrl: d, jassubLegacyWasmUrl: f, defaultFontUrl: p, bufferSize: m = A, audioStreamIndex: _, onReady: ee, onError: te, onRecovered: ne, onSeek: re, onSubtitleStreams: ie, onAudioStreams: ae } = t, M = await e({
 		publicPath: c,
 		workerUrl: l,
 		workerOptions: { type: "module" },
@@ -188,18 +188,18 @@ var i = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 		length: s,
 		audioStreamIndex: _,
 		read: a
-	}), M = [], N = !1, se = () => {
-		if (!N) {
-			N = !0;
-			for (let e of [...M].reverse()) try {
+	}), N = [], P = !1, F = () => {
+		if (!P) {
+			P = !0;
+			for (let e of [...N].reverse()) try {
 				e();
 			} catch {}
 		}
 	};
-	M.push(() => A(j));
+	N.push(() => j(M));
 	try {
-		let e = await j.init(), t = e.audioStreams ?? [], a = t.some((e) => e.streamIndex === _) ? _ : t[0]?.streamIndex ?? -1;
-		oe?.(t, a);
+		let e = await M.init(), t = e.audioStreams ?? [], a = t.some((e) => e.streamIndex === _) ? _ : t[0]?.streamIndex ?? -1;
+		ae?.(t, a);
 		let s = h({
 			video: n,
 			container: r,
@@ -207,19 +207,19 @@ var i = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 			wasmUrl: d,
 			legacyWasmUrl: f,
 			defaultFontUrl: p,
-			onStreams: ae
+			onStreams: ie
 		});
-		if (M.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");
+		if (N.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 m = new MediaSource(), k = URL.createObjectURL(m);
-		M.push(() => URL.revokeObjectURL(k)), n.src = k, M.push(() => {
+		let m = new MediaSource(), A = URL.createObjectURL(m);
+		N.push(() => URL.revokeObjectURL(A)), n.src = A, N.push(() => {
 			try {
 				n.pause();
 			} catch {}
 			n.removeAttribute("src"), n.load();
 		});
-		let A = await new Promise((t, n) => {
+		let j = await new Promise((t, n) => {
 			let r = setTimeout(() => {
 				i(), n(/* @__PURE__ */ Error("The MediaSource never opened"));
 			}, w), i = () => {
@@ -237,138 +237,138 @@ var i = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 				i(), n(/* @__PURE__ */ Error("The MediaSource closed before a SourceBuffer could be created"));
 			};
 			m.addEventListener("sourceopen", a, { once: !0 }), m.addEventListener("sourceclose", o, { once: !0 }), m.addEventListener("error", o, { once: !0 });
-		}), { appendBuffer: P, unbufferRange: ce, updateTimestampOffset: le, endOfStream: ue } = o(A, m);
-		await P(e.data), e.subtitles?.length && s.pushFragments(e.subtitles), te?.();
-		let F = !1, I = !1, L = 0, R, de = () => R ?? n.currentTime, z = !1, fe = !1, pe = 0, B = 0, V = null, H = 0, U = 0, W = !1, G = 0, K = !0, q = (e, t, n = !1) => {
+		}), { appendBuffer: I, unbufferRange: oe, updateTimestampOffset: se, endOfStream: ce } = o(j, m);
+		await I(e.data), e.subtitles?.length && s.pushFragments(e.subtitles), ee?.();
+		let L = !1, R = !1, z = 0, B, le = () => B ?? n.currentTime, V = !1, ue = !1, de = 0, H = 0, U = null, W = 0, G = 0, K = !1, fe = 0, q = !0, J = (e, t, n = !1) => {
 			let r = e?.message === "Cancelled";
-			t && r || (console.error(e), (!W || n) && (W = !0, ne?.(r ? Error("Reading the video file failed", { cause: e }) : e)));
-		}, me = async (e = !1) => {
-			if (L > 0 && !e) return;
-			let t = n.currentTime, r = e ? x : v, a = e ? S : y, o = i(A), s = (e, t) => (K = !1, ce(e, t));
+			t && r || (console.error(e), (!K || n) && (K = !0, te?.(r ? Error("Reading the video file failed", { cause: e }) : e)));
+		}, pe = async (e = !1) => {
+			if (z > 0 && !e) return;
+			let t = n.currentTime, r = e ? x : v, a = e ? S : y, o = i(j), s = (e, t) => (q = !1, oe(e, t));
 			o.length && o[0].start < t + r && await s(0, t + r);
 			for (let { end: e } of o) e > t + a && await s(t + a, e);
-		}, he = () => {
-			let e = i(A);
+		}, me = () => {
+			let e = i(j);
 			if (!e.length) return !0;
-			let t = de(), n = e.find((e) => e.start <= t + T && t < e.end);
-			return be() && ve(t) && (!n || n.start <= t) || n && n.end >= t + y ? !1 : !n || n.end < t + b;
-		}, ge = (e) => i(A).find((t) => t.start <= e + T && e < t.end), _e = () => ge(n.currentTime), ve = (e = n.currentTime) => {
-			let t = ge(e);
-			return e >= U - .1 || !!t && t.end >= U - .1;
-		}, ye = () => {
-			let e = i(A).map((e) => e.end);
-			e.length && (U = Math.max(U, ...e)), z && (fe = !0);
-		}, be = () => z || fe && (i(A).at(-1)?.end ?? 0) >= U - .1, J = async (e) => {
-			I = !0, V = null, H = 0, G = e, K = !0;
-			let t = ++B;
+			let t = le(), n = e.find((e) => e.start <= t + T && t < e.end);
+			return ye() && _e(t) && (!n || n.start <= t) || n && n.end >= t + y ? !1 : !n || n.end < t + b;
+		}, he = (e) => i(j).find((t) => t.start <= e + T && e < t.end), ge = () => he(n.currentTime), _e = (e = n.currentTime) => {
+			let t = he(e);
+			return e >= G - .1 || !!t && t.end >= G - .1;
+		}, ve = () => {
+			let e = i(j).map((e) => e.end);
+			e.length && (G = Math.max(G, ...e)), V && (ue = !0);
+		}, ye = () => V || ue && (i(j).at(-1)?.end ?? 0) >= G - .1, Y = async (e) => {
+			R = !0, U = null, W = 0, fe = e, q = !0;
+			let t = ++H;
 			try {
-				let { data: n, pts: r, subtitles: i, finished: a } = await j.seek(e);
-				if (N || t !== B || (a && (z = !0), i?.length && s.pushFragments(i), await le(r), N || t !== B)) return;
-				n.byteLength && (await P(n), ye());
+				let { data: n, pts: r, subtitles: i, finished: a } = await M.seek(e);
+				if (P || t !== H || (a && (V = !0), i?.length && s.pushFragments(i), await se(r), P || t !== H)) return;
+				n.byteLength && (await I(n), ve());
 			} catch (e) {
-				t === B && (K = !1), q(e, N || t !== B);
+				t === H && (q = !1), J(e, P || t !== H);
 			} finally {
-				t === B && (I = !1);
+				t === H && (R = !1);
 			}
-		}, xe = async () => {
-			let e = V;
+		}, be = async () => {
+			let e = U;
 			if (e) try {
-				await P(e), ye(), V === e && (V = null, H = 0);
+				await I(e), ve(), U === e && (U = null, W = 0);
 			} catch (t) {
-				if (V !== e) return;
+				if (U !== e) return;
 				if (t?.name === "QuotaExceededError") {
-					let t = await me(!0).then(() => !0, () => !1);
-					if (V !== e) return;
+					let t = await pe(!0).then(() => !0, () => !1);
+					if (U !== e) return;
 					if (t) {
-						z = !1, await J(_e()?.end ?? n.currentTime);
+						V = !1, await Y(ge()?.end ?? n.currentTime);
 						return;
 					}
 				}
-				if (H += 1, H < C) return;
-				throw V = null, t;
+				if (W += 1, W < C) return;
+				throw U = null, t;
 			}
-		}, Se = async () => {
-			if (F || I || Q !== void 0 || N || !V && (z || !he())) return;
-			let e = ++pe, t = B, n = () => N || e !== pe || t !== B;
-			F = !0;
+		}, xe = async () => {
+			if (L || R || $ !== void 0 || P || !U && (V || !me())) return;
+			let e = ++de, t = H, n = () => P || e !== de || t !== H;
+			L = !0;
 			try {
-				if (!V) {
-					let { data: e, subtitles: t, finished: r } = await j.read();
-					if (n() || (r && (z = !0), t?.length && s.pushFragments(t), !e.byteLength)) return;
-					V = e, H = 0;
+				if (!U) {
+					let { data: e, subtitles: t, finished: r } = await M.read();
+					if (n() || (r && (V = !0), t?.length && s.pushFragments(t), !e.byteLength)) return;
+					U = e, W = 0;
 				}
-				await xe(), !n() && W && (W = !1, re?.());
+				await be(), !n() && K && (K = !1, ne?.());
 			} catch (e) {
-				q(e, n());
+				J(e, n());
 			} finally {
-				e === pe && (F = !1);
+				e === de && (L = !1);
 			}
-		}, Ce = (e) => e >= G && we(e) && Te(e), we = (e) => i(A).some((t) => t.start <= e && e < t.end), Y = (e) => {
-			let t = ge(e);
+		}, Se = (e) => e >= fe && Ce(e) && we(e), Ce = (e) => i(j).some((t) => t.start <= e && e < t.end), X = (e) => {
+			let t = he(e);
 			return t ? t.end - e : 0;
-		}, Te = (e) => Y(e) >= E || be() && ve(e), Ee = async (e) => {
-			if (!N && !(we(e) && Te(e))) {
-				z = !1, L++, R = e;
+		}, we = (e) => X(e) >= E || ye() && _e(e), Te = async (e) => {
+			if (!P && !(Ce(e) && we(e))) {
+				V = !1, z++, B = e;
 				try {
-					await J(e);
-					let t = B;
-					for (let n = 0; n < ee && !(N || t !== B || z || Y(e) >= E); n++) {
-						let t = Y(e);
-						if (await Se(), Y(e) <= t) break;
+					await Y(e);
+					let t = H;
+					for (let n = 0; n < D && !(P || t !== H || V || X(e) >= E); n++) {
+						let t = X(e);
+						if (await xe(), X(e) <= t) break;
 					}
 				} finally {
-					L--, R === e && (R = void 0);
+					z--, B === e && (B = void 0);
 				}
 			}
-		}, De = 0, X = null, Z, Oe = (e) => {
-			let t = performance.now(), n = t - De;
-			if (n >= D) {
-				De = t, X = null, ie?.(e);
+		}, Ee = 0, Z = null, Q, De = (e) => {
+			let t = performance.now(), n = t - Ee;
+			if (n >= O) {
+				Ee = t, Z = null, re?.(e);
 				return;
 			}
-			X = e, !Z && (Z = setTimeout(() => {
-				Z = void 0;
-				let e = X;
-				X = null, !(e === null || N) && (De = performance.now(), ie?.(e));
-			}, D - n));
+			Z = e, !Q && (Q = setTimeout(() => {
+				Q = void 0;
+				let e = Z;
+				Z = null, !(e === null || P) && (Ee = performance.now(), re?.(e));
+			}, O - n));
 		};
-		M.push(() => {
-			Z && clearTimeout(Z);
-		});
-		let ke = 0, Q;
-		M.push(() => {
+		N.push(() => {
 			Q && clearTimeout(Q);
 		});
-		let Ae = () => {
+		let Oe = 0, $;
+		N.push(() => {
+			$ && clearTimeout($);
+		});
+		let ke = () => {
 			let t = n.currentTime, r = e.info.input.duration || n.duration;
-			r > 0 && Oe(Math.min(Math.max(t / r, 0), 1));
-			let i = performance.now(), a = i - ke < O;
-			if (ke = i, !Ce(t) && !(K && (I || Y(t) > 0) && Math.abs(t - G) < .001)) {
-				if (z = !1, Q && clearTimeout(Q), !a) {
-					Q = void 0, J(t);
+			r > 0 && De(Math.min(Math.max(t / r, 0), 1));
+			let i = performance.now(), a = i - Oe < k;
+			if (Oe = i, !Se(t) && !(q && (R || X(t) > 0) && Math.abs(t - fe) < .001)) {
+				if (V = !1, $ && clearTimeout($), !a) {
+					$ = void 0, Y(t);
 					return;
 				}
-				Q = setTimeout(() => {
-					if (Q = void 0, N) return;
+				$ = setTimeout(() => {
+					if ($ = void 0, P) return;
 					let e = n.currentTime;
-					Ce(e) || (z = !1, J(e));
-				}, O);
+					Se(e) || (V = !1, Y(e));
+				}, k);
 			}
 		};
-		n.addEventListener("seeking", Ae), M.push(() => n.removeEventListener("seeking", Ae));
-		let $ = !1, je = () => {
-			if ($) return;
-			$ = !0;
+		n.addEventListener("seeking", ke), N.push(() => n.removeEventListener("seeking", ke));
+		let Ae = !1, je = () => {
+			if (Ae) return;
+			Ae = !0;
 			let e = n.error;
-			q(new g(`the media element failed: ${e?.message ?? "unknown"}`, { cause: e }), !1, !0);
+			J(new g(`the media element failed: ${e?.message ?? "unknown"}`, { cause: e }), !1, !0);
 		};
-		n.addEventListener("error", je), M.push(() => n.removeEventListener("error", je));
+		n.addEventListener("error", je), N.push(() => n.removeEventListener("error", je));
 		let Me = setInterval(() => {
-			$ || n.error || (me().catch(() => {}), Se().catch((e) => q(e, !1)), be() && !V && ve() && m.readyState === "open" && ue().catch(() => {}));
+			Ae || n.error || (pe().catch(() => {}), xe().catch((e) => J(e, !1)), ye() && !U && _e() && m.readyState === "open" && ce(() => !R).catch(() => {}));
 		}, 100);
-		return M.push(() => clearInterval(Me)), {
-			destroy: se,
-			prepareSeek: Ee,
+		return N.push(() => clearInterval(Me)), {
+			destroy: F,
+			prepareSeek: Te,
 			videoElement: n,
 			selectSubtitleStream: (e) => s.selectStream(e),
 			indexes: e.indexes ?? [],
@@ -378,10 +378,10 @@ var i = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 			audioMimeType: e.info.output.audioMimeType
 		};
 	} catch (e) {
-		throw se(), e;
+		throw F(), e;
 	}
-}, ne = 5, re = 500, ie = 320, ae = 1e6, oe = 3, j = 1e4, M = 1.5, N = 4e6, se = 3e4, P = async (e) => {
-	let { publicPath: n, workerUrl: r, length: i, read: a, onThumbnails: o, width: s = ie } = e, c = await t({
+}, te = 5, ne = 500, re = 320, ie = 1e6, ae = 3, M = 1e4, N = 1.5, P = 4e6, F = 3e4, I = 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" },
@@ -389,7 +389,7 @@ var i = (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 = [], l = (e) => {
+		let t = await c.init(), n = t.duration, r = Math.max(e.interval ?? te, n / ne), a = [], l = (e) => {
 			let t = [];
 			for (let [a, o] of e.entries()) {
 				let s = t.at(-1);
@@ -397,7 +397,7 @@ var i = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 					timestamp: o.timestamp,
 					endTime: n,
 					startByte: o.pos,
-					endByte: Math.min((e[a + 1]?.pos ?? i) + ae, i),
+					endByte: Math.min((e[a + 1]?.pos ?? i) + ie, i),
 					done: !1,
 					attempts: 0
 				});
@@ -436,7 +436,7 @@ var i = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 			}), o(e);
 		}, x = async (e) => {
 			if (d) return;
-			let t = await Promise.race([c.readKeyframe(e.timestamp), new Promise((e, t) => setTimeout(() => t(/* @__PURE__ */ Error("timed out")), j))]), 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",
@@ -460,7 +460,7 @@ var i = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 			if (!f.length) return;
 			let e = f.splice(y(), 1)[0];
 			p = !0, x(e).catch(() => {
-				e.attempts += 1, e.done = e.attempts >= oe;
+				e.attempts += 1, e.done = e.attempts >= ae;
 			}).finally(() => {
 				p = !1, S();
 			});
@@ -469,7 +469,7 @@ var i = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 		}, w = async (e) => {
 			_ = !0;
 			try {
-				let t = await Promise.race([c.init(), new Promise((e, t) => setTimeout(() => t(/* @__PURE__ */ Error("timed out")), se))]);
+				let t = await Promise.race([c.init(), new Promise((e, t) => setTimeout(() => t(/* @__PURE__ */ Error("timed out")), F))]);
 				if (d) return;
 				h = e;
 				let n = l(t.indexes);
@@ -495,7 +495,7 @@ var i = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 				if (d) return;
 				v = e;
 				let t = T(e);
-				h < 0 ? h = t : (t >= Math.max(h * M, h + N) || t >= i && h < i) && (g = !0), E(e), S();
+				h < 0 ? h = t : (t >= Math.max(h * N, h + P) || t >= i && h < i) && (g = !0), E(e), S();
 			},
 			prioritize: (e) => {
 				d || (m = e);
@@ -503,14 +503,14 @@ var i = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 			destroy: () => {
 				d = !0, f.length = 0;
 				for (let e of u) URL.revokeObjectURL(e.url);
-				u = [], A(c);
+				u = [], j(c);
 			}
 		};
 	} catch (e) {
-		throw A(c), e;
+		throw j(c), e;
 	}
-}, ce = 1280, le = 1920, ue = 250, F = 100, I = () => typeof HTMLCanvasElement < "u" && "captureStream" in HTMLCanvasElement.prototype, L = () => typeof document < "u" && typeof HTMLVideoElement < "u" && typeof HTMLVideoElement.prototype.requestPictureInPicture == "function" && !!document.pictureInPictureEnabled, R = () => typeof HTMLVideoElement < "u" && "mozCaptureStream" in HTMLVideoElement.prototype, de = () => I() ? L() ? "window" : R() ? "burn-in" : null : null, z = (e) => {
-	let { video: t, subtitles: n } = e, r = e.mode ?? de() ?? "window", i = e.maxWidth ?? (r === "burn-in" ? le : ce), a, o, s, c = !1, l = !1, u = !1, d = !1, f, p = () => r === "burn-in" ? !!a : !!a && document.pictureInPictureElement === a.mirror, m = (e, r) => {
+}, oe = 1280, se = 1920, ce = 250, L = 100, R = () => typeof HTMLCanvasElement < "u" && "captureStream" in HTMLCanvasElement.prototype, z = () => typeof document < "u" && typeof HTMLVideoElement < "u" && typeof HTMLVideoElement.prototype.requestPictureInPicture == "function" && !!document.pictureInPictureEnabled, B = () => typeof HTMLVideoElement < "u" && "mozCaptureStream" in HTMLVideoElement.prototype, le = () => R() ? z() ? "window" : B() ? "burn-in" : null : null, V = (e) => {
+	let { video: t, subtitles: n } = e, r = e.mode ?? le() ?? "window", i = e.maxWidth ?? (r === "burn-in" ? se : oe), a, o, s, c = !1, l = !1, u = !1, d = !1, f, p = () => r === "burn-in" ? !!a : !!a && document.pictureInPictureElement === a.mirror, m = (e, r) => {
 		r.drawImage(t, 0, 0, e.width, e.height);
 		let i = n.querySelector("canvas");
 		i && i.width > 0 && i.height > 0 && r.drawImage(i, 0, 0, e.width, e.height);
@@ -539,39 +539,39 @@ var i = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 		l = !0;
 		let { mirror: e } = a;
 		h(), e.play().then(() => new Promise((e) => {
-			setTimeout(e, F);
+			setTimeout(e, L);
 		})).catch(() => {}).finally(() => {
 			e.pause(), setTimeout(() => {
 				l = !1;
-			}, F);
+			}, L);
 		});
 	}, E = [["play", () => {
 		t.play().catch(() => {});
-	}], ["pause", () => t.pause()]], ee = (e) => {
+	}], ["pause", () => t.pause()]], D = (e) => {
 		if ("mediaSession" in navigator) for (let [t, n] of E) try {
 			navigator.mediaSession.setActionHandler(t, e ? n : null);
 		} catch {}
-	}, D = () => {
-		if (y(), ee(!1), t.removeEventListener("play", C), t.removeEventListener("pause", w), t.removeEventListener("seeked", T), !a) {
+	}, O = () => {
+		if (y(), D(!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", S), n.removeEventListener("leavepictureinpicture", O);
+		n.removeEventListener("play", x), n.removeEventListener("pause", S), n.removeEventListener("leavepictureinpicture", k);
 		for (let t of e.getTracks()) t.stop();
 		n.remove(), a = void 0, f?.();
-	}, O = () => D(), k = (e) => {
+	}, k = () => O(), A = (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;
 		};
-	}, A = async () => {
+	}, j = 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" ? k(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" ? A(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,
@@ -580,7 +580,7 @@ var i = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 		};
 		if (a = f, u.srcObject = f.stream, (e.container ?? t.parentElement ?? document.body).appendChild(u), v(), s = setInterval(() => {
 			t.paused && h();
-		}, ue), u.play().catch(() => {}), u.readyState === 0 && await new Promise((e) => {
+		}, ce), u.play().catch(() => {}), u.readyState === 0 && await new Promise((e) => {
 			let t = () => {
 				clearTimeout(n), e();
 			}, n = setTimeout(t, 1e3);
@@ -589,7 +589,7 @@ var i = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 			u.remove();
 			return;
 		}
-		if (u.addEventListener("play", x), u.addEventListener("pause", S), u.addEventListener("leavepictureinpicture", O), t.addEventListener("play", C), t.addEventListener("pause", w), t.addEventListener("seeked", T), ee(!0), b(), r === "burn-in") {
+		if (u.addEventListener("play", x), u.addEventListener("pause", S), u.addEventListener("leavepictureinpicture", k), t.addEventListener("play", C), t.addEventListener("pause", w), t.addEventListener("seeked", T), D(!0), b(), r === "burn-in") {
 			t.paused && u.pause(), e.onBurnedInChange?.(!0);
 			return;
 		}
@@ -602,7 +602,7 @@ var i = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 				try {
 					if (p()) {
 						if (r === "burn-in") {
-							D(), e.onBurnedInChange?.(!1);
+							O(), e.onBurnedInChange?.(!1);
 							return;
 						}
 						await document.exitPictureInPicture().catch(() => {});
@@ -610,9 +610,9 @@ var i = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 					}
 					r !== "burn-in" && document.pictureInPictureElement && await document.exitPictureInPicture().catch(() => {});
 					try {
-						await A();
+						await j();
 					} catch (t) {
-						console.warn("subtitle compositing for picture in picture failed", t), D(), r === "burn-in" && e.onBurnedInChange?.(!1);
+						console.warn("subtitle compositing for picture in picture failed", t), O(), r === "burn-in" && e.onBurnedInChange?.(!1);
 					}
 				} finally {
 					u = !1;
@@ -621,9 +621,9 @@ var i = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 		},
 		mode: r,
 		destroy: () => {
-			d = !0, r !== "burn-in" && p() && document.exitPictureInPicture().catch(() => {}), D(), r === "burn-in" && e.onBurnedInChange?.(!1);
+			d = !0, r !== "burn-in" && p() && document.exitPictureInPicture().catch(() => {}), O(), r === "burn-in" && e.onBurnedInChange?.(!1);
 		}
 	};
 };
 //#endregion
-export { g as a, A as c, i as d, o as f, k as i, s as l, de as n, _ as o, P as r, te as s, z as t, h as u };
+export { g as a, j as c, i as d, o as f, A as i, s as l, le as n, _ as o, I as r, ee as s, V as t, h as u };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { l as e, n as t, o as n, r, s as i, t as a, u as o } from "./engine-C9vSEJYW.js";
+import { l as e, n as t, o as n, r, s as i, t as a, u as o } from "./engine-C4Gj_4zs.js";
 import { Children as s, Fragment as c, isValidElement as l, useCallback as u, useEffect as d, useMemo as f, useRef as p, useState as m, useSyncExternalStore as h } from "react";
 import { css as g, keyframes as _ } from "@emotion/react";
 import { createPlayer as v, useContainerAttach as y, useMediaAttach as b } from "@videojs/react";
@@ -2252,82 +2252,90 @@ ${gt}
       }
     }
   }
-`, Vt = () => {
-	let e = G(), t = G((e) => e.paused), n = G((e) => e.currentTime), r = G((e) => e.duration), i = G((e) => e.seekingTo), a = G((e) => e.fullscreen), o = G((e) => e.hideUI), s = G((e) => e.togglePictureInPicture), c = G((e) => e.pictureInPictureMode), l = G((e) => e.burnedInSubtitles), f = G((e) => e.passThroughPictureInPicture), h = G((e) => e.subtitleTracks), g = G((e) => e.requestSeek), [_, v] = m(null), y = p(null), b = p(void 0), x = c === "burn-in", S = h.length > 0, C = r > 0 && n === r, w = u(({ direction: t, stepSize: n }) => {
-		let r = Ne(e.volume), i = t === "up" ? n : -n, a = Math.max(0, Math.min(1, r + i)), o = e.muted;
-		e.setVolume(Me(a)), o && !e.muted && e.toggleMuted();
-	}, [e]);
+`, Vt = ({ shortcuts: e = "window", root: t }) => {
+	let n = G(), r = G((e) => e.paused), i = G((e) => e.currentTime), a = G((e) => e.duration), o = G((e) => e.seekingTo), s = G((e) => e.fullscreen), c = G((e) => e.hideUI), l = G((e) => e.togglePictureInPicture), f = G((e) => e.pictureInPictureMode), h = G((e) => e.burnedInSubtitles), g = G((e) => e.passThroughPictureInPicture), _ = G((e) => e.subtitleTracks), v = G((e) => e.requestSeek), [y, b] = m(null), x = p(null), S = p(void 0), C = f === "burn-in", w = _.length > 0, D = a > 0 && i === a, O = u(({ direction: e, stepSize: t }) => {
+		let r = Ne(n.volume), i = e === "up" ? t : -t, a = Math.max(0, Math.min(1, r + i)), o = n.muted;
+		n.setVolume(Me(a)), o && !n.muted && n.toggleMuted();
+	}, [n]), k = p(!1);
 	d(() => {
-		let t = (t) => g ? g(t) : e.seek(t), n = (n) => {
-			let r = n.target;
-			if (r?.isContentEditable || /^(input|textarea|select)$/i.test(r?.tagName ?? "")) return;
-			let i = !0;
-			if (n.key === "f") e.toggleFullscreen();
-			else if (n.key === "k") e.togglePaused();
-			else if (n.key === " ") e.togglePaused();
-			else if (n.key === "m") e.toggleMuted();
-			else if (n.key === "ArrowUp") w({
+		let r = (e) => v ? v(e) : n.seek(e), i = (e) => e.composedPath()[0], a = (e) => {
+			k.current = !!t.current?.contains(i(e) ?? null);
+		}, o = (a) => {
+			let o = i(a);
+			if (o?.isContentEditable || /^(input|textarea|select)$/i.test(o?.tagName ?? "")) return;
+			let s = t.current?.contains(o ?? null) || o === document.body && k.current;
+			if (e === "player" && !n.fullscreen && !s) return;
+			let c = !0;
+			if (a.key === "f") n.toggleFullscreen();
+			else if (a.key === "k") n.togglePaused();
+			else if (a.key === " ") n.togglePaused();
+			else if (a.key === "m") n.toggleMuted();
+			else if (a.key === "ArrowUp") O({
 				direction: "up",
 				stepSize: It
 			});
-			else if (n.key === "ArrowDown") w({
+			else if (a.key === "ArrowDown") O({
 				direction: "down",
 				stepSize: It
 			});
-			else if (n.key === "ArrowRight") {
-				if (!e.duration) return;
-				t(Math.min(e.currentTime + Lt, e.duration));
-			} else n.key === "ArrowLeft" ? t(Math.max(e.currentTime - Lt, 0)) : i = !1;
-			i && n.preventDefault();
+			else if (a.key === "ArrowRight") {
+				if (!n.duration) return;
+				r(Math.min(n.currentTime + Lt, n.duration));
+			} else a.key === "ArrowLeft" ? r(Math.max(n.currentTime - Lt, 0)) : c = !1;
+			c && a.preventDefault();
+		};
+		return window.addEventListener("keydown", o), window.addEventListener("pointerdown", a, !0), window.addEventListener("focusin", a, !0), () => {
+			window.removeEventListener("keydown", o), window.removeEventListener("pointerdown", a, !0), window.removeEventListener("focusin", a, !0);
 		};
-		return window.addEventListener("keydown", n), () => window.removeEventListener("keydown", n);
 	}, [
+		n,
+		O,
+		v,
 		e,
-		w,
-		g
+		t
 	]);
-	let D = u((e) => {
-		e.preventDefault(), e.deltaY < 0 ? w({
+	let A = u((e) => {
+		e.preventDefault(), e.deltaY < 0 ? O({
 			direction: "up",
 			stepSize: It
-		}) : w({
+		}) : O({
 			direction: "down",
 			stepSize: It
 		});
-	}, [w]);
+	}, [O]);
 	d(() => {
-		if (_) return _.addEventListener("wheel", D, { passive: !1 }), () => _.removeEventListener("wheel", D);
-	}, [_, D]);
-	let O = (e) => {
-		if (!f || f.active || f.armed || e.pointerType === "touch") return;
+		if (y) return y.addEventListener("wheel", A, { passive: !1 }), () => y.removeEventListener("wheel", A);
+	}, [y, A]);
+	let j = (e) => {
+		if (!g || g.active || g.armed || e.pointerType === "touch") return;
 		let { left: t, top: n, width: r, height: i } = e.currentTarget.getBoundingClientRect();
-		f.arm({
+		g.arm({
 			left: t,
 			top: n,
 			width: r,
 			height: i
 		});
-	}, k = !!f?.armed;
+	}, M = !!g?.armed;
 	return d(() => {
-		if (!k) return;
-		clearInterval(b.current);
+		if (!M) return;
+		clearInterval(S.current);
 		let e = Infinity, t = setInterval(() => {
 			if (Date.now() > e) {
 				clearInterval(t);
 				return;
 			}
-			let n = y.current, r = document.activeElement;
+			let n = x.current, r = document.activeElement;
 			n && r?.tagName === "IFRAME" && r.closest(".video")?.parentElement?.contains(n) && n.focus({ preventScroll: !0 });
 		}, Rt);
-		return b.current = t, () => {
+		return S.current = t, () => {
 			e = Date.now() + zt;
 		};
-	}, [k]), d(() => () => clearInterval(b.current), []), /* @__PURE__ */ E("div", {
+	}, [M]), d(() => () => clearInterval(S.current), []), /* @__PURE__ */ E("div", {
 		css: Bt,
-		style: { ...o ? {
+		style: { ...c ? {
 			opacity: "0",
 			pointerEvents: "none"
-		} : k ? { pointerEvents: "none" } : {} },
+		} : M ? { pointerEvents: "none" } : {} },
 		children: [/* @__PURE__ */ T(dt, {}), /* @__PURE__ */ E("div", {
 			className: "actions",
 			children: [/* @__PURE__ */ E("div", {
@@ -2339,16 +2347,16 @@ ${gt}
 						text: /* @__PURE__ */ T("button", {
 							className: "play",
 							type: "button",
-							onClick: () => e.togglePaused(),
-							"aria-label": C ? "Replay" : t ? "Play" : "Pause",
-							children: T(C ? L : t ? I : F, {})
+							onClick: () => n.togglePaused(),
+							"aria-label": D ? "Replay" : r ? "Play" : "Pause",
+							children: T(D ? L : r ? I : F, {})
 						}),
-						toolTipText: /* @__PURE__ */ T("span", { children: C ? "Replay (k)" : t ? "Play (k)" : "Pause (k)" })
+						toolTipText: /* @__PURE__ */ T("span", { children: D ? "Replay (k)" : r ? "Play (k)" : "Pause (k)" })
 					}),
-					/* @__PURE__ */ T(Ft, { ref: v }),
+					/* @__PURE__ */ T(Ft, { ref: b }),
 					/* @__PURE__ */ T("div", {
 						className: "time",
-						children: Fe(i ?? n, r)
+						children: Fe(o ?? i, a)
 					})
 				]
 			}), /* @__PURE__ */ E("div", {
@@ -2357,40 +2365,40 @@ ${gt}
 					/* @__PURE__ */ T(wt, {}),
 					/* @__PURE__ */ T(At, {}),
 					/* @__PURE__ */ T(Ot, {}),
-					f ? /* @__PURE__ */ T($, {
+					g ? /* @__PURE__ */ T($, {
 						id: "picture-in-picture",
 						tooltipPlace: "top-end",
 						text: /* @__PURE__ */ T("button", {
-							ref: y,
-							className: f.armed ? "picture-in-picture armed" : "picture-in-picture",
+							ref: x,
+							className: g.armed ? "picture-in-picture armed" : "picture-in-picture",
 							type: "button",
-							onPointerEnter: O,
-							onPointerMove: O,
-							onClick: f.active ? f.exit : void 0,
+							onPointerEnter: j,
+							onPointerMove: j,
+							onClick: g.active ? g.exit : void 0,
 							"aria-label": "Picture in picture",
-							"aria-pressed": f.active,
+							"aria-pressed": g.active,
 							children: /* @__PURE__ */ T("img", {
 								src: ft,
 								alt: ""
 							})
 						}),
-						toolTipText: /* @__PURE__ */ T("span", { children: f.active ? "Exit picture in picture" : "Picture in picture" })
-					}) : s ? /* @__PURE__ */ T($, {
+						toolTipText: /* @__PURE__ */ T("span", { children: g.active ? "Exit picture in picture" : "Picture in picture" })
+					}) : l ? /* @__PURE__ */ T($, {
 						id: "picture-in-picture",
 						tooltipPlace: "top-end",
 						text: /* @__PURE__ */ T("button", {
 							className: "picture-in-picture",
 							type: "button",
-							onClick: s,
-							disabled: x && !S,
-							"aria-label": x ? "Put the subtitles in the video" : "Picture in picture",
-							"aria-pressed": x ? l : void 0,
-							children: x ? T(l ? mt : ht, {}) : /* @__PURE__ */ T("img", {
+							onClick: l,
+							disabled: C && !w,
+							"aria-label": C ? "Put the subtitles in the video" : "Picture in picture",
+							"aria-pressed": C ? h : void 0,
+							children: C ? T(h ? mt : ht, {}) : /* @__PURE__ */ T("img", {
 								src: ft,
 								alt: ""
 							})
 						}),
-						toolTipText: /* @__PURE__ */ T("span", { children: x ? S ? l ? "Subtitles are in the picture" : "Put the subtitles in the picture" : "This file has no subtitles" : "Picture in picture" })
+						toolTipText: /* @__PURE__ */ T("span", { children: C ? w ? h ? "Subtitles are in the picture" : "Put the subtitles in the picture" : "This file has no subtitles" : "Picture in picture" })
 					}) : null,
 					/* @__PURE__ */ T($, {
 						id: "full-screen",
@@ -2398,12 +2406,12 @@ ${gt}
 						text: /* @__PURE__ */ T("button", {
 							className: "full-screen",
 							type: "button",
-							onClick: () => e.toggleFullscreen(),
+							onClick: () => n.toggleFullscreen(),
 							"aria-label": "Full screen",
-							"aria-pressed": a,
-							children: T(a ? P : N, {})
+							"aria-pressed": s,
+							children: T(s ? P : N, {})
 						}),
-						toolTipText: /* @__PURE__ */ T("span", { children: a ? "Exit full screen (f)" : "Full screen (f)" })
+						toolTipText: /* @__PURE__ */ T("span", { children: s ? "Exit full screen (f)" : "Full screen (f)" })
 					})
 				]
 			})]
@@ -2594,6 +2602,9 @@ ${gt}
   align-items: center;
   height: 100%;
   width: 100%;
+  /* focusable with shortcuts='player', and the first key after a click on the picture would otherwise
+     ring the whole player as :focus-visible */
+  outline: none;
 
   & > div:not(:last-of-type) {
     position: absolute;
@@ -2646,85 +2657,89 @@ ${gt}
 		key: r,
 		item: e
 	}];
-}), nn = ({ ref: e, onVideoRef: t, onSubtitleRef: n, overlay: r, controls: i, children: a }) => {
-	let o = G(), s = G((e) => e.hideUI), c = G((e) => e.setHideUI), l = G((e) => e.hasMedia), u = G((e) => e.passThroughPictureInPicture), f = p(void 0), m = p("mouse"), h = p({
+}), nn = ({ ref: e, onVideoRef: t, onSubtitleRef: n, overlay: r, controls: i, shortcuts: a, children: o }) => {
+	let s = G(), c = G((e) => e.hideUI), l = G((e) => e.setHideUI), u = G((e) => e.hasMedia), f = G((e) => e.passThroughPictureInPicture), m = p(void 0), h = p("mouse"), g = p({
 		x: -1,
 		y: -1
-	}), g = p(null);
-	d(() => () => clearTimeout(f.current), []), d(() => {
-		l || (clearTimeout(f.current), c(!1));
-	}, [l, c]);
-	let _ = () => {
-		l && c(!0);
-	}, v = (t) => {
-		g.current = t, typeof e == "function" ? e(t) : e && (e.current = t);
-	}, y = () => {
-		if (o.passThroughPictureInPicture?.armed) return !0;
-		if (m.current !== "mouse") return !1;
-		let { x: e, y: t } = h.current;
-		if (!g.current || e < 0) return !1;
-		let n = document.elementFromPoint(e, t);
-		return !!n && g.current.contains(n) && !n.closest(".video");
+	}), _ = p(null);
+	d(() => () => clearTimeout(m.current), []), d(() => {
+		u || (clearTimeout(m.current), l(!1));
+	}, [u, l]);
+	let v = () => {
+		u && l(!0);
+	}, y = (t) => {
+		_.current = t, typeof e == "function" ? e(t) : e && (e.current = t);
 	}, b = () => {
-		if (y()) {
-			f.current = setTimeout(b, Zt);
+		if (s.passThroughPictureInPicture?.armed) return !0;
+		if (h.current !== "mouse") return !1;
+		let { x: e, y: t } = g.current;
+		if (!_.current || e < 0) return !1;
+		let n = document.elementFromPoint(e, t);
+		return !!n && _.current.contains(n) && !n.closest(".video");
+	}, x = () => {
+		if (b()) {
+			m.current = setTimeout(x, Zt);
 			return;
 		}
-		_();
-	}, x = () => {
-		c(!1), clearTimeout(f.current), f.current = setTimeout(b, Zt);
+		v();
+	}, S = () => {
+		l(!1), clearTimeout(m.current), m.current = setTimeout(x, Zt);
 	};
 	return /* @__PURE__ */ E("div", {
 		css: en,
-		ref: v,
+		ref: y,
 		onPointerMove: (e) => {
-			m.current = e.pointerType, e.pointerType === "mouse" && (h.current = {
+			h.current = e.pointerType, e.pointerType === "mouse" && (g.current = {
 				x: e.clientX,
 				y: e.clientY
-			}, x());
+			}, S());
 		},
 		onPointerDown: (e) => {
-			m.current = e.pointerType;
+			h.current = e.pointerType;
 		},
 		onMouseOut: (e) => {
 			let t = e.relatedTarget;
 			if (t && e.currentTarget.contains(t)) return;
 			let { left: n, right: r, top: i, bottom: a } = e.currentTarget.getBoundingClientRect();
-			e.clientX >= n && e.clientX < r && e.clientY >= i && e.clientY < a || (clearTimeout(f.current), _());
+			e.clientX >= n && e.clientX < r && e.clientY >= i && e.clientY < a || (clearTimeout(m.current), v());
 		},
-		className: s ? "hide" : "",
+		className: c ? "hide" : "",
+		tabIndex: a === "player" ? -1 : void 0,
 		children: [
 			/* @__PURE__ */ T(ke, { onSubtitleRef: n }),
 			tn(r).map(({ key: e, item: t }) => /* @__PURE__ */ T("div", {
 				css: Qt,
-				style: { ...s ? {
+				style: { ...c ? {
 					opacity: "0",
 					visibility: "hidden",
 					pointerEvents: "none"
 				} : {} },
 				children: t
 			}, e)),
-			i === !1 ? null : /* @__PURE__ */ T(Vt, {}),
+			i === !1 ? null : /* @__PURE__ */ T(Vt, {
+				shortcuts: a,
+				root: _
+			}),
 			/* @__PURE__ */ T(Wt, {}),
 			/* @__PURE__ */ T(Xt, {}),
-			u?.armed && g.current ? /* @__PURE__ */ T("div", {
+			f?.armed && _.current ? /* @__PURE__ */ T("div", {
 				className: "pass-through",
-				style: { clipPath: $t(u.armed, g.current.getBoundingClientRect()) },
-				onPointerOver: u.disarm
+				style: { clipPath: $t(f.armed, _.current.getBoundingClientRect()) },
+				onPointerOver: f.disarm
 			}) : null,
 			/* @__PURE__ */ E("div", {
 				className: "video",
 				onClick: () => {
-					if (m.current === "mouse") {
-						o.togglePaused();
+					if (h.current === "mouse") {
+						s.togglePaused();
 						return;
 					}
-					s ? x() : (clearTimeout(f.current), _());
+					c ? S() : (clearTimeout(m.current), v());
 				},
 				children: [t ? /* @__PURE__ */ T("video", {
 					ref: t,
 					playsInline: !0
-				}) : null, a]
+				}) : null, o]
 			})
 		]
 	});
@@ -2839,6 +2854,7 @@ ${gt}
 		onSubtitleRef: w,
 		overlay: e.overlay,
 		controls: e.controls,
+		shortcuts: e.shortcuts,
 		children: t
 	});
 }, an = g`

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

@@ -8,7 +8,8 @@ export type ChromeProps = {
     overlay?: ReactNode;
     /** False draws no control bar at all, leaving the picture, the title and the overlay. */
     controls?: boolean;
+    shortcuts?: 'window' | 'player';
     children?: ReactNode;
 };
-export declare const Chrome: ({ ref, onVideoRef, onSubtitleRef, overlay, controls, children }: ChromeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Chrome: ({ ref, onVideoRef, onSubtitleRef, overlay, controls, shortcuts, children }: ChromeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Chrome;

package/dist/react/components/control-bar.d.ts

@@ -1,2 +1,6 @@
-export declare const ControlBar: () => import("@emotion/react/jsx-runtime").JSX.Element;
+import type { RefObject } from 'react';
+export declare const ControlBar: ({ shortcuts, root }: {
+    shortcuts?: 'window' | 'player';
+    root: RefObject<HTMLDivElement | null>;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default ControlBar;

package/dist/react/video-player.d.ts

@@ -59,6 +59,13 @@ type CommonOptions = {
      * store's `attach` and does nothing at all until a media arrives.
      */
     controls?: boolean;
+    /**
+     * Where the keyboard shortcuts listen. `'window'`, the default, takes keys from the whole page, which suits a
+     * page that is only the player. `'player'` takes a key only when the focus is inside the player (a click on the
+     * picture puts it there), or nothing has the focus and the last click or focus was in the player, or the player
+     * is fullscreen, so Space and the arrow keys keep scrolling the page and pressing its buttons everywhere else.
+     */
+    shortcuts?: 'window' | 'player';
     /**
      * The app's own content over the video: a download readout, a badge, a logo, anything the player
      * itself has no opinion about.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banou/media-player",
-  "version": "0.10.16",
+  "version": "0.10.18",
   "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/playback.ts

@@ -709,8 +709,10 @@ export const startPlayback = async (options: PlaybackOptions): Promise<PlaybackC
       if (elementFailed || videoElement.error) return
       evict().catch(() => {})
       pump().catch((error) => reportError(error, false))
-      // every remove() puts the MediaSource back to 'open', so the end has to be re-armed
-      if (endInBuffer() && !pending && atEnd() && mediaSource.readyState === 'open') endOfStream().catch(() => {})
+      // Every remove() puts the MediaSource back to 'open', so the end has to be re-armed, though not while a remuxer
+      // seek runs: queued behind a remove() and run after a move had started one, it came before that seek's append over
+      // the end, and Firefox 151 then sometimes waited at the end for good (4 of 1060 end moves, measured 2026-10-12)
+      if (endInBuffer() && !pending && atEnd() && mediaSource.readyState === 'open') endOfStream(() => !seeking).catch(() => {})
     }, 100)
     teardown.push(() => clearInterval(interval))
 

package/src/lib/engine/source-buffer.ts

@@ -50,10 +50,13 @@ export const updateSourceBuffer = (sourceBuffer: SourceBuffer, mediaSource: Medi
   const updateTimestampOffset = (timestampOffset: number) =>
     enqueue(async () => { sourceBuffer.timestampOffset = timestampOffset })
 
-  // endOfStream throws mid-update and is undone by the next remove(), so the caller re-arms it
-  const endOfStream = () =>
+  /**
+   * endOfStream throws mid-update and is undone by the next remove(), so the caller re-arms it.
+   * `allowed` is asked when the call reaches the front of the queue, not when it is queued.
+   */
+  const endOfStream = (allowed = () => true) =>
     enqueue(async () => {
-      if (mediaSource.readyState !== 'open' || sourceBuffer.updating) return
+      if (mediaSource.readyState !== 'open' || sourceBuffer.updating || !allowed()) return
       try { mediaSource.endOfStream() } catch {}
     })
 

package/src/lib/react/components/chrome.tsx

@@ -52,6 +52,9 @@ const style = css`
   align-items: center;
   height: 100%;
   width: 100%;
+  /* focusable with shortcuts='player', and the first key after a click on the picture would otherwise
+     ring the whole player as :focus-visible */
+  outline: none;
 
   & > div:not(:last-of-type) {
     position: absolute;
@@ -129,10 +132,11 @@ export type ChromeProps = {
   overlay?: ReactNode
   /** False draws no control bar at all, leaving the picture, the title and the overlay. */
   controls?: boolean
+  shortcuts?: 'window' | 'player'
   children?: ReactNode
 }
 
-export const Chrome = ({ ref, onVideoRef, onSubtitleRef, overlay, controls, children }: ChromeProps) => {
+export const Chrome = ({ ref, onVideoRef, onSubtitleRef, overlay, controls, shortcuts, children }: ChromeProps) => {
   const player = usePlayer()
   const hideUI = usePlayer((state) => state.hideUI)
   const setHideUI = usePlayer((state) => state.setHideUI)
@@ -264,6 +268,8 @@ export const Chrome = ({ ref, onVideoRef, onSubtitleRef, overlay, controls, chil
       onPointerDown={onPointerDown}
       onMouseOut={onMouseOut}
       className={hideUI ? 'hide' : ''}
+      // focusable, so a click on the picture puts the focus, and with it the shortcuts, inside the player
+      tabIndex={shortcuts === 'player' ? -1 : undefined}
     >
       <Overlay onSubtitleRef={onSubtitleRef} />
       {overlayItems(overlay).map(({ key, item }) => (
@@ -275,7 +281,7 @@ export const Chrome = ({ ref, onVideoRef, onSubtitleRef, overlay, controls, chil
           {item}
         </div>
       ))}
-      {controls === false ? null : <ControlBar />}
+      {controls === false ? null : <ControlBar shortcuts={shortcuts} root={root} />}
       {/* Not tied to `hideUI`: it says what to do next, and it is on screen for nine seconds. */}
       <BurnInHint />
       <SkipChapter />

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

@@ -1,4 +1,6 @@
 /// <reference types="@emotion/react/types/css-prop" />
+import type { RefObject } from 'react'
+
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { css } from '@emotion/react'
 import { Maximize, Minimize, Pause, Play, RotateCcw } from 'lucide-react'
@@ -157,7 +159,9 @@ const style = css`
   }
 `
 
-export const ControlBar = () => {
+export const ControlBar = (
+  { shortcuts = 'window', root }: { shortcuts?: 'window' | 'player', root: RefObject<HTMLDivElement | null> },
+) => {
   const player = usePlayer()
   const paused = usePlayer((state) => state.paused)
   const currentTime = usePlayer((state) => state.currentTime)
@@ -198,12 +202,21 @@ export const ControlBar = () => {
     if (wasMuted && !player.muted) player.toggleMuted()
   }, [player])
 
+  // whether the last press or focus on the page landed in the player: a focused control that goes away (Skip
+  // Opening, once pressed) leaves the focus on the body, and the shortcuts stay with the player through that
+  const engaged = useRef(false)
+
   useEffect(() => {
     const seek = (time: number) => requestSeek ? requestSeek(time) : player.seek(time)
+    // the path, not ev.target, which a shadow root around the player retargets to its host
+    const targetOf = (ev: Event) => ev.composedPath()[0] as HTMLElement | undefined
+    const engage = (ev: Event) => { engaged.current = !!root.current?.contains(targetOf(ev) ?? null) }
     const eventListener = (ev: KeyboardEvent) => {
-      // on the window, so typing into a consumer's own input is the one case that opts out
-      const target = ev.target as HTMLElement | null
+      // on the window, so typing into a consumer's own input opts out
+      const target = targetOf(ev)
       if (target?.isContentEditable || /^(input|textarea|select)$/i.test(target?.tagName ?? '')) return
+      const fromPlayer = root.current?.contains(target ?? null) || (target === document.body && engaged.current)
+      if (shortcuts === 'player' && !player.fullscreen && !fromPlayer) return
 
       let shouldPreventDefault = true
       // space would otherwise reach the browser's own shortcut
@@ -233,8 +246,14 @@ export const ControlBar = () => {
       }
     }
     window.addEventListener('keydown', eventListener)
-    return () => window.removeEventListener('keydown', eventListener)
-  }, [player, modifyVolume, requestSeek])
+    window.addEventListener('pointerdown', engage, true)
+    window.addEventListener('focusin', engage, true)
+    return () => {
+      window.removeEventListener('keydown', eventListener)
+      window.removeEventListener('pointerdown', engage, true)
+      window.removeEventListener('focusin', engage, true)
+    }
+  }, [player, modifyVolume, requestSeek, shortcuts, root])
 
   const handleWheel = useCallback((e: WheelEvent) => {
     e.preventDefault()

package/src/lib/react/video-player.tsx

@@ -73,6 +73,14 @@ type CommonOptions = {
    */
   controls?: boolean
 
+  /**
+   * Where the keyboard shortcuts listen. `'window'`, the default, takes keys from the whole page, which suits a
+   * page that is only the player. `'player'` takes a key only when the focus is inside the player (a click on the
+   * picture puts it there), or nothing has the focus and the last click or focus was in the player, or the player
+   * is fullscreen, so Space and the arrow keys keep scrolling the page and pressing its buttons everywhere else.
+   */
+  shortcuts?: 'window' | 'player'
+
   /**
    * The app's own content over the video: a download readout, a badge, a logo, anything the player
    * itself has no opinion about.
@@ -411,6 +419,7 @@ const PlayerRoot = ({ options, children }: { options: MediaPlayerOptions, childr
       onSubtitleRef={setSubtitleLayer}
       overlay={options.overlay}
       controls={options.controls}
+      shortcuts={options.shortcuts}
     >
       {children}
     </Chrome>