@banou/media-player 0.8.6 → 0.8.8

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";
@@ -61,7 +61,7 @@ var re = {
 	id: e.streamIndex,
 	label: t
 })), oe = (t, n, r) => {
-	let i = F(), { read: a, size: o, publicPath: s = "", libavWorkerUrl: c = "", jassubWorkerUrl: d = "", jassubWasmUrl: m = "", jassubLegacyWasmUrl: h, defaultFontUrl: g, bufferSize: _, autoplay: v = !1 } = r ?? {}, [y, b] = p(void 0), x = f(null), S = f(0), C = f(!1), w = f(a);
+	let i = F(), { read: a, size: o, publicPath: s = "", libavWorkerUrl: c = "", jassubWorkerUrl: d = "", jassubWasmUrl: m = "", jassubLegacyWasmUrl: h, defaultFontUrl: g, bufferSize: _, autoplay: v = !1 } = r ?? {}, [y, b] = p(void 0), x = f(null), S = f(null), C = f(!1), w = f(a);
 	w.current = a;
 	let T = f(r?.onSeek);
 	T.current = r?.onSeek;
@@ -108,7 +108,10 @@ var re = {
 					bufferSize: _,
 					audioStreamIndex: y,
 					onReady: () => {
-						r || (i.setSourceState({ ready: !0 }), S.current > 0 && (t.currentTime = S.current, S.current = 0), v && t.play().catch(() => {}));
+						if (r) return;
+						i.setSourceState({ ready: !0 });
+						let e = S.current;
+						S.current = null, e && e.size === o && e.time > 0 && (t.currentTime = e.time), v && t.play().catch(() => {});
 					},
 					onError: l,
 					onRecovered: () => {
@@ -139,7 +142,10 @@ var re = {
 				l(e);
 			}
 		})(), () => {
-			r = !0, S.current = t.currentTime, x.current?.destroy(), x.current = null, i.setSourceState({ ready: !1 });
+			r = !0, S.current = {
+				time: t.currentTime,
+				size: o
+			}, x.current?.destroy(), x.current = null, i.setSourceState({ ready: !1 });
 		};
 	}, [
 		i,
@@ -1088,6 +1094,8 @@ ${Y}
 					className: "settings",
 					type: "button",
 					onClick: c,
+					"aria-label": "Settings",
+					"aria-expanded": s,
 					children: /* @__PURE__ */ S(j, {})
 				}),
 				toolTipText: /* @__PURE__ */ S("span", { children: "Settings" })
@@ -1170,7 +1178,9 @@ position: static;
 ${Y}
 `, Oe = () => {
 	let e = F((e) => e.subtitleTracks), t = F((e) => e.selectedSubtitleTrack), n = F((e) => e.selectSubtitleTrack), r = F((e) => e.subtitleOffLabel), { open: i, toggle: a, containerRef: o, pending: s, failed: c, runSelect: l } = Z();
-	return e.length === 0 ? null : /* @__PURE__ */ C("div", {
+	if (e.length === 0) return null;
+	let u = t !== void 0;
+	return /* @__PURE__ */ C("div", {
 		css: De,
 		ref: o,
 		children: [/* @__PURE__ */ S(K, {
@@ -1180,7 +1190,10 @@ ${Y}
 				className: "subtitles",
 				type: "button",
 				onClick: a,
-				children: t === void 0 ? /* @__PURE__ */ S(xe, { className: "captions-off" }) : /* @__PURE__ */ S(be, { className: "captions" })
+				"aria-label": "Subtitles",
+				"aria-expanded": i,
+				"aria-pressed": u,
+				children: u ? /* @__PURE__ */ S(be, { className: "captions" }) : /* @__PURE__ */ S(xe, { className: "captions-off" })
 			}),
 			toolTipText: /* @__PURE__ */ S("span", { children: "Subtitles" })
 		}), i && /* @__PURE__ */ S(X, {
@@ -1356,6 +1369,8 @@ ${Y}
 				type: "button",
 				onClick: () => t.toggleMuted(),
 				ref: e,
+				"aria-label": "Mute",
+				"aria-pressed": r || n === 0,
 				children: S(r || n === 0 ? te : n <= .5 ? M : ee, {
 					size: 18,
 					color: "#fff"
@@ -1583,6 +1598,7 @@ ${Y}
 							className: "play",
 							type: "button",
 							onClick: () => e.togglePaused(),
+							"aria-label": _ ? "Replay" : t ? "Play" : "Pause",
 							children: S(_ ? A : t ? k : O, {})
 						}),
 						toolTipText: /* @__PURE__ */ S("span", { children: _ ? "Replay (k)" : t ? "Play (k)" : "Pause (k)" })
@@ -1631,6 +1647,8 @@ ${Y}
 							className: "full-screen",
 							type: "button",
 							onClick: () => e.toggleFullscreen(),
+							"aria-label": "Full screen",
+							"aria-pressed": i,
 							children: S(i ? D : E, {})
 						}),
 						toolTipText: /* @__PURE__ */ S("span", { children: i ? "Exit full screen (f)" : "Full screen (f)" })

package/package.json

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

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

@@ -276,6 +276,9 @@ export const ControlBar = () => {
                 className='play'
                 type='button'
                 onClick={() => player.togglePaused()}
+                // This one genuinely changes what it does, so the name changes with it rather than
+                // carrying a pressed state. Replay is a third action, not an on or off.
+                aria-label={ended ? 'Replay' : paused ? 'Play' : 'Pause'}
               >
                 {
                   ended
@@ -363,6 +366,8 @@ export const ControlBar = () => {
                 className='full-screen'
                 type='button'
                 onClick={() => player.toggleFullscreen()}
+                aria-label='Full screen'
+                aria-pressed={fullscreen}
               >
                 {
                   fullscreen

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

@@ -112,6 +112,8 @@ export const SettingsAction = () => {
             className='settings'
             type='button'
             onClick={toggle}
+            aria-label='Settings'
+            aria-expanded={open}
           >
             <Settings />
           </button>

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

@@ -105,6 +105,10 @@ export const Sound = ({ ref }: SoundProps) => {
             type='button'
             onClick={() => player.toggleMuted()}
             ref={ref}
+            // A static name with the state on `aria-pressed`. Renaming a control when it is activated
+            // announces the state twice and breaks the expectation that a control keeps its name.
+            aria-label='Mute'
+            aria-pressed={muted || volume === 0}
           >
             {muted || volume === 0
               ? <VolumeX size={18} color='#fff' />

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

@@ -54,7 +54,14 @@ export const SubtitlesAction = () => {
         id='subtitles'
         disabled={open}
         text={
-          <button className='subtitles' type='button' onClick={toggle}>
+          <button
+            className='subtitles'
+            type='button'
+            onClick={toggle}
+            aria-label='Subtitles'
+            aria-expanded={open}
+            aria-pressed={on}
+          >
             {on ? <Captions className='captions' /> : <CaptionsOff className='captions-off' />}
           </button>
         }

package/src/lib/react/hooks/use-playback.ts

@@ -30,7 +30,18 @@ export const usePlayback = (
   const [audioStreamIndex, setAudioStreamIndex] = useState<number | undefined>(undefined)
 
   const controllerRef = useRef<PlaybackController | null>(null)
-  const resumeTimeRef = useRef(0)
+  /**
+   * Where to pick playback back up, and WHICH media that position belongs to.
+   *
+   * The position exists so a rebuild of the pipeline is invisible: switching audio track tears the
+   * whole thing down and starts again, and dropping the viewer back at zero for that would be absurd.
+   * But the same rebuild happens when the media itself changes, and then the position is meaningless:
+   * dropping a second file in while the first was playing used to open it 40 minutes in.
+   *
+   * `size` is the identity, because it is the one piece of the source in the effect's deps. `read` is
+   * deliberately not, since a streaming consumer passes a fresh closure several times a second.
+   */
+  const resumeRef = useRef<{ time: number, size: number } | null>(null)
   // The renderer turns the first track on by itself, so the menu has to mirror that or it shows
   // "Disable" ticked over subtitles that are visibly on screen.
   const subtitleChoiceMade = useRef(false)
@@ -94,9 +105,11 @@ export const usePlayback = (
           onReady: () => {
             if (cancelled) return
             player.setSourceState({ ready: true })
-            if (resumeTimeRef.current > 0) {
-              video.currentTime = resumeTimeRef.current
-              resumeTimeRef.current = 0
+            const resume = resumeRef.current
+            resumeRef.current = null
+            // only a position belonging to THIS media, or a new file opens where the last one stopped
+            if (resume && resume.size === size && resume.time > 0) {
+              video.currentTime = resume.time
             }
             if (autoplay) video.play().catch(() => {})
           },
@@ -130,7 +143,7 @@ export const usePlayback = (
     })()
     return () => {
       cancelled = true
-      resumeTimeRef.current = video.currentTime
+      resumeRef.current = { time: video.currentTime, size }
       controllerRef.current?.destroy()
       controllerRef.current = null
       player.setSourceState({ ready: false })