@banou/media-player 0.8.6 → 0.8.7

package/dist/engine/index.js

@@ -1,2 +1,2 @@
-import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c, u as l } from "../engine--OlGG-Ve.js";
+import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c, u as l } from "../engine-B6flRjLd.js";
 export { n as DEFAULT_BUFFER_SIZE, s as SUBTITLES_OFF, c as createPictureInPicture, t as createSubtitleRenderer, o as createThumbnailGenerator, r as getTimeRanges, i as pictureInPictureMode, e as startPlayback, a as terminateRemuxer, l as updateSourceBuffer };

package/dist/{engine--OlGG-Ve.js → engine-B6flRjLd.js}

@@ -168,7 +168,7 @@ var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 		clearTimeout(n), t.terminate();
 	});
 }, T = async (t) => {
-	let { videoElement: n, canvasElement: r, read: i, length: o, publicPath: c, libavWorkerUrl: l, jassubWorkerUrl: u, jassubWasmUrl: d, jassubLegacyWasmUrl: f, defaultFontUrl: p, bufferSize: T = C, audioStreamIndex: E, onReady: D, onError: O, onRecovered: k, onSeek: A, onSubtitleStreams: j, onAudioStreams: M } = t, N = await e({
+	let { videoElement: n, canvasElement: r, read: i, length: o, publicPath: c, libavWorkerUrl: l, jassubWorkerUrl: u, jassubWasmUrl: d, jassubLegacyWasmUrl: f, defaultFontUrl: p, bufferSize: T = C, audioStreamIndex: E, onReady: D, onError: O, onRecovered: k, onSeek: A, onSubtitleStreams: j, onAudioStreams: ee } = t, M = await e({
 		publicPath: c,
 		workerUrl: l,
 		workerOptions: { type: "module" },
@@ -176,18 +176,18 @@ var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 		length: o,
 		audioStreamIndex: E,
 		read: i
-	}), P = [], F = !1, I = () => {
-		if (!F) {
-			F = !0;
-			for (let e of [...P].reverse()) try {
+	}), N = [], P = !1, F = () => {
+		if (!P) {
+			P = !0;
+			for (let e of [...N].reverse()) try {
 				e();
 			} catch {}
 		}
 	};
-	P.push(() => w(N));
+	N.push(() => w(M));
 	try {
-		let e = await N.init(), t = e.audioStreams ?? [], i = t.some((e) => e.streamIndex === E) ? E : t[0]?.streamIndex ?? -1;
-		M?.(t, i);
+		let e = await M.init(), t = e.audioStreams ?? [], i = t.some((e) => e.streamIndex === E) ? E : t[0]?.streamIndex ?? -1;
+		ee?.(t, i);
 		let o = m({
 			video: n,
 			canvas: r,
@@ -197,11 +197,11 @@ var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 			defaultFontUrl: p,
 			onStreams: j
 		});
-		if (P.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 (N.push(() => o.destroy()), e.attachments?.length && o.pushAttachments(e.attachments), !e.info.output.videoMimeType) throw Error("The video codec in this file could not be identified");
 		let c = [e.info.output.videoMimeType, e.info.output.audioMimeType].filter(Boolean).join(","), l = `video/mp4; codecs="${c}"`;
 		if (!MediaSource.isTypeSupported(l)) throw Error(`This browser cannot play the codecs in this file: ${c}`);
 		let C = new MediaSource(), w = URL.createObjectURL(C);
-		P.push(() => URL.revokeObjectURL(w)), n.src = w;
+		N.push(() => URL.revokeObjectURL(w)), n.src = w;
 		let T = await new Promise((t, n) => {
 			let r = setTimeout(() => {
 				i(), n(/* @__PURE__ */ Error("The MediaSource never opened"));
@@ -220,85 +220,92 @@ var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 				i(), n(/* @__PURE__ */ Error("The MediaSource closed before a SourceBuffer could be created"));
 			};
 			C.addEventListener("sourceopen", a, { once: !0 }), C.addEventListener("sourceclose", o, { once: !0 }), C.addEventListener("error", o, { once: !0 });
-		}), { appendBuffer: L, unbufferRange: R, updateTimestampOffset: z, endOfStream: B } = s(T, C);
-		await L(e.data), e.subtitles?.length && o.pushFragments(e.subtitles), D?.();
-		let V = !1, H = !1, U = !1, W = 0, G = 0, K = null, q = 0, J = 0, Y = !1, X = 0, Z = (e, t) => {
+		}), { appendBuffer: I, unbufferRange: L, updateTimestampOffset: R, endOfStream: z } = s(T, C);
+		await I(e.data), e.subtitles?.length && o.pushFragments(e.subtitles), D?.();
+		let B = !1, V = !1, H = !1, U = 0, W = 0, G = null, K = 0, q = 0, J = !1, te = 0, Y = (e, t) => {
 			let n = e?.message === "Cancelled";
-			t && n || (console.error(e), !Y && (Y = !0, O?.(n ? Error("Reading the video file failed", { cause: e }) : e)));
-		}, Q = async (e = !1) => {
+			t && n || (console.error(e), !J && (J = !0, O?.(n ? Error("Reading the video file failed", { cause: e }) : e)));
+		}, X = async (e = !1) => {
 			let t = n.currentTime, r = e ? v : h, i = e ? y : g;
-			for (let { start: e, end: n } of a(T)) e < t + r && await R(e, t + r), n > t + i && await R(t + i, n);
-		}, ee = () => {
+			for (let { start: e, end: n } of a(T)) e < t + r && await L(e, t + r), n > t + i && await L(t + i, n);
+		}, ne = () => {
 			let e = a(T);
 			if (!e.length) return !0;
 			let t = n.currentTime;
 			if (Math.max(...e.map((e) => e.end)) >= t + g) return !1;
 			let r = e.find((e) => e.start <= t + S && t < e.end);
 			return !r || r.end < t + _;
-		}, $ = () => {
+		}, Z = () => {
 			let e = n.currentTime;
 			return a(T).find((t) => t.start <= e + S && e < t.end);
-		}, te = () => {
-			let e = $();
-			return !!e && e.end >= J - .1;
-		}, ne = () => {
+		}, re = () => {
+			let e = Z();
+			return !!e && e.end >= q - .1;
+		}, Q = () => {
 			let e = a(T).map((e) => e.end);
-			e.length && (J = Math.max(J, ...e));
-		}, re = async (e) => {
-			H = !0, K = null, q = 0, X = e;
-			let t = ++G;
+			e.length && (q = Math.max(q, ...e));
+		}, ie = async (e) => {
+			V = !0, G = null, K = 0, te = e;
+			let t = ++W;
 			try {
-				let { data: n, pts: r, subtitles: i } = await N.seek(e);
-				if (F || t !== G || (i?.length && o.pushFragments(i), await z(r), F || t !== G)) return;
-				n.byteLength && (await L(n), ne());
+				let { data: n, pts: r, subtitles: i } = await M.seek(e);
+				if (P || t !== W || (i?.length && o.pushFragments(i), await R(r), P || t !== W)) return;
+				n.byteLength && (await I(n), Q());
 			} catch (e) {
-				Z(e, F || t !== G);
+				Y(e, P || t !== W);
 			} finally {
-				t === G && (H = !1);
+				t === W && (V = !1);
 			}
-		}, ie = async () => {
-			let e = K;
+		}, ae = async () => {
+			let e = G;
 			if (e) try {
-				await L(e), ne(), K === e && (K = null, q = 0);
+				await I(e), Q(), G === e && (G = null, K = 0);
 			} catch (t) {
-				if (K !== e) return;
+				if (G !== e) return;
 				if (t?.name === "QuotaExceededError") {
-					let t = await Q(!0).then(() => !0, () => !1);
-					if (K !== e) return;
+					let t = await X(!0).then(() => !0, () => !1);
+					if (G !== e) return;
 					if (t) {
-						U = !1, await re($()?.end ?? n.currentTime);
+						H = !1, await ie(Z()?.end ?? n.currentTime);
 						return;
 					}
 				}
-				if (q += 1, q < b) return;
-				throw K = null, t;
+				if (K += 1, K < b) return;
+				throw G = null, t;
 			}
-		}, ae = async () => {
-			if (V || H || F || !K && (U || !ee())) return;
-			let e = ++W, t = G, n = () => F || e !== W || t !== G;
-			V = !0;
+		}, oe = async () => {
+			if (B || V || P || !G && (H || !ne())) return;
+			let e = ++U, t = W, n = () => P || e !== U || t !== W;
+			B = !0;
 			try {
-				if (!K) {
-					let { data: e, subtitles: t, finished: r } = await N.read();
-					if (n() || (r && (U = !0), t?.length && o.pushFragments(t), !e.byteLength)) return;
-					K = e, q = 0;
+				if (!G) {
+					let { data: e, subtitles: t, finished: r } = await M.read();
+					if (n() || (r && (H = !0), t?.length && o.pushFragments(t), !e.byteLength)) return;
+					G = e, K = 0;
 				}
-				await ie(), !n() && Y && (Y = !1, k?.());
+				await ae(), !n() && J && (J = !1, k?.());
 			} catch (e) {
-				Z(e, n());
+				Y(e, n());
 			} finally {
-				e === W && (V = !1);
+				e === U && (B = !1);
 			}
-		}, oe = (e) => e >= X && !!$(), se = () => {
+		}, se = (e) => e >= te && !!Z(), ce = () => {
 			let t = n.currentTime, r = e.info.input.duration || n.duration;
-			r > 0 && A?.(Math.min(Math.max(t / r, 0), 1)), !oe(t) && (U = !1, re(t));
+			r > 0 && A?.(Math.min(Math.max(t / r, 0), 1)), !se(t) && (H = !1, ie(t));
+		};
+		n.addEventListener("seeking", ce), N.push(() => n.removeEventListener("seeking", ce));
+		let $ = !1, le = () => {
+			if ($) return;
+			$ = !0;
+			let e = n.error;
+			Y(Error(`the media element failed: ${e?.message ?? "unknown"}`, { cause: e }), !1);
 		};
-		n.addEventListener("seeking", se), P.push(() => n.removeEventListener("seeking", se));
-		let ce = setInterval(() => {
-			Q().catch(() => {}), ae().catch((e) => Z(e, !1)), U && !K && te() && C.readyState === "open" && B().catch(() => {});
+		n.addEventListener("error", le), N.push(() => n.removeEventListener("error", le));
+		let ue = setInterval(() => {
+			$ || n.error || (X().catch(() => {}), oe().catch((e) => Y(e, !1)), H && !G && re() && C.readyState === "open" && z().catch(() => {}));
 		}, 100);
-		return P.push(() => clearInterval(ce)), {
-			destroy: I,
+		return N.push(() => clearInterval(ue)), {
+			destroy: F,
 			selectSubtitleStream: (e) => o.selectStream(e),
 			indexes: e.indexes ?? [],
 			duration: e.info.input.duration,
@@ -306,9 +313,9 @@ var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 			audioMimeType: e.info.output.audioMimeType
 		};
 	} catch (e) {
-		throw I(), e;
+		throw F(), e;
 	}
-}, E = 5, D = 500, O = 320, k = 1e6, A = 3, j = 1e4, M = async (e) => {
+}, E = 5, D = 500, O = 320, k = 1e6, A = 3, j = 1e4, ee = async (e) => {
 	let { publicPath: n, workerUrl: r, length: i, read: a, onThumbnails: o, width: s = O } = e, c = await t({
 		publicPath: n,
 		workerUrl: r,
@@ -383,8 +390,8 @@ var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 	} catch (e) {
 		throw w(c), e;
 	}
-}, N = 1280, P = 1920, F = 250, I = 100, L = () => typeof HTMLCanvasElement < "u" && "captureStream" in HTMLCanvasElement.prototype, R = () => typeof document < "u" && typeof HTMLVideoElement < "u" && typeof HTMLVideoElement.prototype.requestPictureInPicture == "function" && !!document.pictureInPictureEnabled, z = () => typeof HTMLVideoElement < "u" && "mozCaptureStream" in HTMLVideoElement.prototype, B = () => L() ? R() ? "window" : z() ? "burn-in" : null : null, V = (e) => {
-	let { video: t, canvas: n } = e, r = e.mode ?? B() ?? "window", i = e.maxWidth ?? (r === "burn-in" ? P : N), 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) => {
+}, M = 1280, N = 1920, P = 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, z = () => I() ? 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" ? N : M), 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);
@@ -411,11 +418,11 @@ var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 		l = !0;
 		let { mirror: e } = a;
 		h(), e.play().then(() => new Promise((e) => {
-			setTimeout(e, I);
+			setTimeout(e, F);
 		})).catch(() => {}).finally(() => {
 			e.pause(), setTimeout(() => {
 				l = !1;
-			}, I);
+			}, F);
 		});
 	}, E = [["play", () => {
 		t.play().catch(() => {});
@@ -452,7 +459,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();
-		}, F), u.play().catch(() => {}), u.readyState === 0 && await new Promise((e) => {
+		}, P), u.play().catch(() => {}), u.readyState === 0 && await new Promise((e) => {
 			let t = () => {
 				clearTimeout(n), e();
 			}, n = setTimeout(t, 1e3);
@@ -498,4 +505,4 @@ var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 	};
 };
 //#endregion
-export { T as a, m as c, C as i, a as l, B as n, w as o, M as r, c as s, V as t, s as u };
+export { T as a, m as c, C as i, a as l, z as n, w as o, ee as r, c as s, B as t, s as u };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as e, c as t, n, r, s as i, t as a } from "./engine--OlGG-Ve.js";
+import { a as e, c as t, n, r, s as i, t as a } from "./engine-B6flRjLd.js";
 import { Children as o, Fragment as s, isValidElement as c, useCallback as l, useEffect as u, useMemo as d, useRef as f, useState as p } from "react";
 import { css as m, keyframes as h } from "@emotion/react";
 import { createPlayer as g, useContainerAttach as _, useMediaAttach as v } from "@videojs/react";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banou/media-player",
-  "version": "0.8.6",
+  "version": "0.8.7",
   "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

@@ -329,7 +329,35 @@ export const startPlayback = async (options: PlaybackOptions): Promise<PlaybackC
     videoElement.addEventListener('seeking', onSeeking)
     teardown.push(() => videoElement.removeEventListener('seeking', onSeeking))
 
+    /**
+     * A terminal failure of the media element, which NOTHING here used to observe.
+     *
+     * `MediaError` is set once and the element never plays again, but the pump below kept running,
+     * and every `appendBuffer` after it throws `InvalidStateError: The HTMLMediaElement.error
+     * attribute is not null`. `updateSourceBuffer`'s chain deliberately survives a rejection, so that
+     * repeated forever, and `flushPending` swallows four attempts and rethrows the fifth. What
+     * reached the viewer was therefore the FIFTH `InvalidStateError` rather than the real cause, and
+     * the real cause never appeared anywhere at all.
+     *
+     * That cost a session: a decode failure presented as an append bug, which is a completely
+     * different place to look. Report what actually happened, then stop.
+     */
+    let elementFailed = false
+    const onElementError = () => {
+      if (elementFailed) return
+      elementFailed = true
+      const error = videoElement.error
+      reportError(
+        new Error(`the media element failed: ${error?.message ?? 'unknown'}`, { cause: error }),
+        false,
+      )
+    }
+    videoElement.addEventListener('error', onElementError)
+    teardown.push(() => videoElement.removeEventListener('error', onElementError))
+
     const interval = setInterval(() => {
+      // Nothing below can succeed against a failed element, and retrying only buries the real error.
+      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