@banou/media-player 0.8.7 → 0.8.9

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-B6flRjLd.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-BwK7ycv0.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-B6flRjLd.js → engine-BwK7ycv0.js}

@@ -201,7 +201,12 @@ var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 		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);
-		N.push(() => URL.revokeObjectURL(w)), n.src = w;
+		N.push(() => URL.revokeObjectURL(w)), n.src = w, N.push(() => {
+			try {
+				n.pause();
+			} catch {}
+			n.removeAttribute("src"), n.load();
+		});
 		let T = await new Promise((t, n) => {
 			let r = setTimeout(() => {
 				i(), n(/* @__PURE__ */ Error("The MediaSource never opened"));
@@ -248,8 +253,8 @@ var a = (e) => Array(e.buffered.length).fill(void 0).map((t, n) => ({
 			V = !0, G = null, K = 0, te = e;
 			let t = ++W;
 			try {
-				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;
+				let { data: n, pts: r, subtitles: i, finished: a } = await M.seek(e);
+				if (P || t !== W || (a && (H = !0), i?.length && o.pushFragments(i), await R(r), P || t !== W)) return;
 				n.byteLength && (await I(n), Q());
 			} catch (e) {
 				Y(e, P || t !== W);

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-B6flRjLd.js";
+import { a as e, c as t, n, r, s as i, t as a } from "./engine-BwK7ycv0.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.7",
+  "version": "0.8.9",
   "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

@@ -130,6 +130,28 @@ export const startPlayback = async (options: PlaybackOptions): Promise<PlaybackC
     const mediaSourceUrl = URL.createObjectURL(mediaSource)
     teardown.push(() => URL.revokeObjectURL(mediaSourceUrl))
     videoElement.src = mediaSourceUrl
+    /**
+     * Give the element back, before the url it is holding is revoked.
+     *
+     * Revoking alone detaches nothing: `src` still names the dead MediaSource, the old SourceBuffer
+     * is still attached to it, and the decoder keeps whatever state it was in. That matters because
+     * this pipeline is REBUILT in place, on the same element, whenever the audio track changes, and
+     * the rebuild awaits a wasm load plus a header read before it assigns a new `src`. On a torrent
+     * that is seconds of the element sitting on a corpse.
+     *
+     * `load()` is the only thing that actually resets it: the media element load algorithm aborts
+     * the current resource and clears the decoder. Without it the element goes from an ended source
+     * straight into fresh appends with no seek in between, which is exactly the sequence that makes
+     * firefox hand a real packet to a drained decoder (`avcodec_send_packet error: End of file`).
+     * Pushed AFTER the revoke so the reversed teardown runs it FIRST.
+     */
+    teardown.push(() => {
+      try { videoElement.pause() } catch {}
+      videoElement.removeAttribute('src')
+      // no src and no <source> children means the load algorithm goes straight to NETWORK_EMPTY
+      // without firing `error`, so this cannot manufacture the failure it exists to prevent
+      videoElement.load()
+    })
 
     const sourceBuffer = await new Promise<SourceBuffer>((resolve, reject) => {
       const timeout = setTimeout(() => { cleanup(); reject(new Error('The MediaSource never opened')) }, SOURCE_OPEN_TIMEOUT)
@@ -230,8 +252,13 @@ export const startPlayback = async (options: PlaybackOptions): Promise<PlaybackC
       lastSeekPosition = time
       const generation = ++seekGeneration
       try {
-        const { data, pts, subtitles: fragments } = await remuxer.seek(time)
+        // `seek` ends by reading, and that read can hit the end of the file, which finalizes the
+        // muxer: libav writes the mp4 trailer and cannot be read from again. Dropping the flag left
+        // this side believing the stream was still open, so the next pump read straight back into a
+        // context that had already been torn down.
+        const { data, pts, subtitles: fragments, finished: done } = await remuxer.seek(time)
         if (destroyed || generation !== seekGeneration) return
+        if (done) finished = true
         if (fragments?.length) subtitles.pushFragments(fragments)
         await updateTimestampOffset(pts)
         if (destroyed || generation !== seekGeneration) return

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 })