@banou/media-player 0.8.21 → 0.10.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { l as e, n as t, o as n, r, s as i, t as a, u as o } from "./engine-B8CKGIng.js";
+import { l as e, n as t, o as n, r, s as i, t as a, u as o } from "./engine-YeMWShCv.js";
 import { Children as s, Fragment as c, isValidElement as l, useCallback as u, useEffect as d, useMemo as f, useRef as p, useState as m } from "react";
 import { css as h, keyframes as g } from "@emotion/react";
 import { createPlayer as _, useContainerAttach as v, useMediaAttach as y } from "@videojs/react";
@@ -7,9 +7,10 @@ import { Fragment as S, jsx as C, jsxs as w } from "@emotion/react/jsx-runtime";
 import { AlertTriangle as T, Check as E, ChevronLeft as D, ChevronRight as O, Copy as k, Maximize as A, Minimize as j, Pause as M, Play as N, RotateCcw as P, Settings as F, Volume1 as I, Volume2 as L, VolumeX as R } from "react-feather";
 import { Tooltip as z } from "react-tooltip";
 //#region src/lib/react/source-feature.ts
-var ee = {
+var B = {
 	indexes: [],
 	thumbnails: [],
+	requestThumbnail: () => {},
 	subtitleTracks: [],
 	selectedSubtitleTrack: void 0,
 	selectSubtitleTrack: () => {},
@@ -25,19 +26,19 @@ var ee = {
 	playbackErrors: [],
 	ready: !1,
 	setSourceState: () => {}
-}, te = b({
+}, ee = b({
 	name: "source",
-	state: () => ({ ...ee }),
+	state: () => ({ ...B }),
 	attach({ set: e }) {
 		e({
 			setSourceState: (t) => e(t),
 			setHideUI: (t) => e({ hideUI: t })
 		});
 	}
-}), B = _({
-	features: [...x, te],
+}), V = _({
+	features: [...x, ee],
 	displayName: "MediaPlayer"
-}), V = B.usePlayer, ne = (e) => {
+}), H = V.usePlayer, te = (e) => {
 	if (!(!e || e === "und")) try {
 		return new Intl.DisplayNames([navigator.language || "en"], {
 			type: "language",
@@ -46,39 +47,39 @@ var ee = {
 	} catch {
 		return;
 	}
-}, re = (e) => e?.replace(/_/g, " ").trim() || void 0, ie = (e) => {
-	let t = e.map((e) => ne(e.language) ?? re(e.title) ?? `Track ${e.streamIndex}`), n = t.reduce((e, t) => ({
+}, ne = (e) => e?.replace(/_/g, " ").trim() || void 0, re = (e) => {
+	let t = e.map((e) => te(e.language) ?? ne(e.title) ?? `Track ${e.streamIndex}`), n = t.reduce((e, t) => ({
 		...e,
 		[t]: (e[t] ?? 0) + 1
 	}), {});
 	return e.map((e, r) => {
-		let i = t[r], a = re(e.title);
+		let i = t[r], a = ne(e.title);
 		return {
 			track: e,
 			label: (n[i] ?? 0) > 1 && a && a !== i ? `${i} (${a})` : i
 		};
 	});
-}, ae = (e) => ie(e).map(({ track: e, label: t }) => ({
+}, ie = (e) => re(e).map(({ track: e, label: t }) => ({
 	id: e.streamIndex,
 	label: t
-})), oe = [
+})), ae = [
 	0,
 	250,
 	1e3,
 	3e3,
 	1e4
-], se = 6e4, ce = 500, le = (e) => e instanceof Error ? e.message : String(e), ue = (e) => {
+], oe = 6e4, se = 500, ce = (e) => e instanceof Error ? e.message : String(e), le = (e) => {
 	let t = [], n = e?.cause;
 	for (let e = 0; n != null && e < 8; e++) {
 		if (typeof MediaError < "u" && n instanceof MediaError) {
 			t.push(`MediaError code ${n.code}${n.message ? `: ${n.message}` : ""}`);
 			break;
 		}
-		t.push(le(n)), n = n?.cause;
+		t.push(ce(n)), n = n?.cause;
 	}
 	return t.length ? t.join("\n") : void 0;
-}, de = (e, t, r) => {
-	let a = V(), { read: o, size: s, publicPath: c = "", libavWorkerUrl: l = "", jassubWorkerUrl: f = "", jassubWasmUrl: h = "", jassubLegacyWasmUrl: g, defaultFontUrl: _, bufferSize: v, autoplay: y = !1, seekPrepareBudgetMs: b = ce } = r ?? {}, [x, S] = m(void 0), [C, w] = m(0), T = p({
+}, ue = (e, t, r) => {
+	let a = H(), { read: o, size: s, publicPath: c = "", libavWorkerUrl: l = "", jassubWorkerUrl: f = "", jassubWasmUrl: h = "", jassubLegacyWasmUrl: g, defaultFontUrl: _, bufferSize: v, autoplay: y = !1, seekPrepareBudgetMs: b = se } = r ?? {}, [x, S] = m(void 0), [C, w] = m(0), T = p({
 		count: 0,
 		at: 0
 	}), E = p(void 0);
@@ -117,7 +118,7 @@ var ee = {
 		});
 	}, [a, b]), F = u((e) => {
 		typeof e == "number" && (a.setSourceState({ selectedAudioTrack: e }), S(e));
-	}, [a]), I = V((e) => e.setSourceState);
+	}, [a]), I = H((e) => e.setSourceState);
 	d(() => {
 		I({
 			selectSubtitleTrack: N,
@@ -137,7 +138,7 @@ var ee = {
 			ready: !1
 		});
 		let u = (t, n) => {
-			let r = Date.now(), i = le(t), o = ue(t), s = a.playbackErrors, c = s[s.length - 1];
+			let r = Date.now(), i = ce(t), o = le(t), s = a.playbackErrors, c = s[s.length - 1];
 			if (c && c.message === i && c.detail === o && c.recovered === n) {
 				let e = {
 					...c,
@@ -162,11 +163,11 @@ var ee = {
 			let t = n(e);
 			if (u(e, t), t) {
 				let t = performance.now();
-				t - T.current.at > se && (T.current = {
+				t - T.current.at > oe && (T.current = {
 					count: 0,
 					at: t
 				});
-				let n = oe[Math.min(T.current.count, oe.length - 1)];
+				let n = ae[Math.min(T.current.count, ae.length - 1)];
 				T.current = {
 					count: T.current.count + 1,
 					at: t
@@ -179,7 +180,7 @@ var ee = {
 			try {
 				let n = await i({
 					videoElement: e,
-					canvasElement: t,
+					subtitleContainer: t,
 					read: (e, t) => A.current(e, t),
 					length: s,
 					publicPath: c,
@@ -203,13 +204,13 @@ var ee = {
 					onSeek: (e) => j.current?.(e),
 					onSubtitleStreams: (e) => {
 						r || a.setSourceState({
-							subtitleTracks: ae(e),
+							subtitleTracks: ie(e),
 							...k.current ? {} : { selectedSubtitleTrack: e[0]?.streamIndex }
 						});
 					},
 					onAudioStreams: (e, t) => {
 						r || a.setSourceState({
-							audioTracks: ae(e),
+							audioTracks: ie(e),
 							selectedAudioTrack: t
 						});
 					}
@@ -246,13 +247,13 @@ var ee = {
 		y,
 		C
 	]);
-}, fe = 5e3, pe = 6e4, me = ({ publicPath: e, workerUrl: t, length: n, read: i, downloadedRanges: a }) => {
+}, de = 5e3, fe = 6e4, pe = ({ publicPath: e, workerUrl: t, length: n, read: i, downloadedRanges: a }) => {
 	let [o, s] = m([]), c = p(null), l = p(i);
 	l.current = i;
-	let u = f(() => a?.map(({ startByteOffset: e, endByteOffset: t }) => [e, t]), [a?.map(({ startByteOffset: e, endByteOffset: t }) => `${e}-${t}`).join(",")]), h = p(u);
-	return h.current = u, d(() => {
+	let h = f(() => a?.map(({ startByteOffset: e, endByteOffset: t }) => [e, t]), [a?.map(({ startByteOffset: e, endByteOffset: t }) => `${e}-${t}`).join(",")]), g = p(h);
+	return g.current = h, d(() => {
 		if (!n || !i || !e || !t) return;
-		let a = !1, o = null, u, d = fe, f = () => {
+		let a = !1, o = null, u, d = de, f = () => {
 			r({
 				publicPath: e,
 				workerUrl: t,
@@ -266,9 +267,9 @@ var ee = {
 					e.destroy();
 					return;
 				}
-				o = e, c.current = e, e.update(h.current);
+				o = e, c.current = e, e.update(g.current);
 			}, () => {
-				a || (u = setTimeout(f, d), d = Math.min(d * 2, pe));
+				a || (u = setTimeout(f, d), d = Math.min(d * 2, fe));
 			});
 		};
 		return f(), () => {
@@ -279,15 +280,20 @@ var ee = {
 		e,
 		t
 	]), d(() => {
-		c.current?.update(u);
-	}, [u]), o;
-}, he = (e, n) => {
+		c.current?.update(h);
+	}, [h]), {
+		thumbnails: o,
+		requestThumbnail: u((e) => {
+			c.current?.prioritize(e);
+		}, [])
+	};
+}, me = (e, n) => {
 	let r = p(null), [i, o] = m(!1), [s] = m(() => t());
 	d(() => {
 		if (!e || !n || !s) return;
 		let t = a({
 			video: e,
-			canvas: n,
+			subtitles: n,
 			mode: s,
 			onBurnedInChange: o
 		});
@@ -309,7 +315,7 @@ var ee = {
 		mode: s,
 		burnedIn: i
 	};
-}, H = {
+}, U = {
 	headings: {
 		large: "\n      font-weight: 600;\n      font-size: calc(2.8 * var(--mp-unit));\n      line-height: calc(3.4 * var(--mp-unit));\n      @media (min-width: 960px) {\n        font-size: calc(3.4 * var(--mp-unit));\n        line-height: calc(4.1 * var(--mp-unit));\n      }\n    ",
 		medium: "\n      font-weight: 600;\n      font-size: calc(2.4 * var(--mp-unit));\n      line-height: calc(2.9 * var(--mp-unit));\n      @media (min-width: 960px) {\n        font-size: calc(2.8 * var(--mp-unit));\n        line-height: calc(3.4 * var(--mp-unit));\n      }\n    ",
@@ -336,14 +342,20 @@ var ee = {
 		medium: "\n      font-weight: 500;\n      font-size: calc(0.8 * var(--mp-unit));\n      line-height: calc(1.1 * var(--mp-unit));\n      @media (min-width: 960px) {\n        font-size: calc(1 * var(--mp-unit));\n        line-height: calc(1.4 * var(--mp-unit));\n      }\n    ",
 		regular: "\n      font-weight: 400;\n      font-size: calc(0.8 * var(--mp-unit));\n      line-height: calc(1.1 * var(--mp-unit));\n      @media (min-width: 960px) {\n        font-size: calc(1 * var(--mp-unit));\n        line-height: calc(1.4 * var(--mp-unit));\n      }\n    "
 	}
-}, ge = h`
-  top: unset !important;
-  left: unset !important;
-  width: 100%;
-  height: 100%;
-  margin: auto;
-  pointer-events: none;
-`, _e = h`
+}, he = h`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  canvas {
+    top: unset !important;
+    left: unset !important;
+    width: 100%;
+    height: 100%;
+    margin: auto;
+    pointer-events: none;
+  }
+`, ge = h`
   position: absolute;
   top: 0;
   left: 0;
@@ -351,7 +363,7 @@ var ee = {
   padding: calc(1.2 * var(--mp-unit)) calc(1.6 * var(--mp-unit));
   /* clears a notch once the player is fullscreen; resolves to zero everywhere else */
   padding-top: calc(calc(1.2 * var(--mp-unit)) + env(safe-area-inset-top, 0px));
-  ${H.headings.small}
+  ${U.headings.small}
   color: white;
   text-shadow: 0 0 4px rgba(0, 0, 0, 1);
   z-index: 2;
@@ -372,7 +384,7 @@ var ee = {
 
   background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.1) 80%, transparent 100%);
   transition: opacity 0.1s cubic-bezier(.4,0,1,1);
-`, ve = h`
+`, _e = h`
   position: absolute;
   inset: 0;
   z-index: 2;
@@ -392,43 +404,44 @@ var ee = {
   to { transform: rotate(360deg); }
 `} 0.8s linear infinite;
   }
-`, ye = h`
+`, ve = h`
   position: absolute;
   inset: auto 0 20%;
   z-index: 3;
   padding: 0 calc(2 * var(--mp-unit));
   text-align: center;
   color: #fff;
-  ${H.bLarge.regular}
+  ${U.bLarge.regular}
   text-shadow: 0 0 4px rgba(0, 0, 0, 1);
   pointer-events: none;
-`, be = (e) => e instanceof Error ? e.message : typeof e == "string" ? e : "Playback failed", xe = ({ onCanvasRef: e }) => {
-	let t = V((e) => e.title), n = V((e) => e.hideUI), r = V((e) => e.playbackError), i = V((e) => e.ready), a = V((e) => e.size), o = V((e) => e.waiting);
+`, ye = (e) => e instanceof Error ? e.message : typeof e == "string" ? e : "Playback failed", be = ({ onSubtitleRef: e }) => {
+	let t = H((e) => e.title), n = H((e) => e.hideUI), r = H((e) => e.playbackError), i = H((e) => e.ready), a = H((e) => e.size), o = H((e) => e.waiting);
 	return /* @__PURE__ */ w(S, { children: [
 		t ? /* @__PURE__ */ C("div", {
 			className: "title",
-			css: _e,
+			css: ge,
 			style: { ...n ? {
 				opacity: "0",
 				pointerEvents: "none"
 			} : {} },
 			children: t
 		}) : void 0,
-		(a ? !i : o) && !r ? /* @__PURE__ */ C("div", { css: ve }) : void 0,
+		(a ? !i : o) && !r ? /* @__PURE__ */ C("div", { css: _e }) : void 0,
 		r ? /* @__PURE__ */ C("div", {
-			css: ye,
-			children: be(r)
+			css: ve,
+			children: ye(r)
 		}) : void 0,
-		/* @__PURE__ */ C("canvas", {
+		/* @__PURE__ */ C("div", {
+			className: "subtitles",
 			ref: e,
-			css: ge
+			css: he
 		})
 	] });
-}, Se = 1e-4, U = 1, Ce = (e) => Math.max(Se, Math.min(U, e)) ** 2, W = (e) => Math.max(Se, Math.min(U, e)) ** (U / 2), G = (e) => {
+}, xe = 1e-4, W = 1, Se = (e) => Math.max(xe, Math.min(W, e)) ** 2, G = (e) => Math.max(xe, Math.min(W, e)) ** (W / 2), K = (e) => {
 	if (e === void 0) return "0:00";
 	let t = Math.floor(e / 3600), n = Math.floor(e % 3600 / 60), r = Math.floor(e % 60);
 	return t > 0 ? `${t}:${n < 10 ? "0" : ""}${n}:${r < 10 ? "0" : ""}${r}` : `${n}:${r < 10 ? "0" : ""}${r}`;
-}, we = (e, t) => `${G(e)} / ${G(t)}`, Te = (e) => h`
+}, Ce = (e, t) => `${K(e)} / ${K(t)}`, we = (e) => h`
   display: flex;
   justify-content: flex-start;
 
@@ -460,7 +473,7 @@ var ee = {
   z-index: 3;
 
   * {
-    ${H.bMedium.regular}
+    ${U.bMedium.regular}
   }
 
   ${e === "sm" && h`
@@ -472,25 +485,25 @@ var ee = {
   ${e === "lg" && h`
     padding: calc(1.2 * var(--mp-unit))!important;
   `}
-`, K = {
+`, q = {
 	x: -1,
 	y: -1,
 	anchors: 0
-}, Ee = (e) => {
-	K.x = e.clientX, K.y = e.clientY;
-}, De = () => (K.anchors++ === 0 && window.addEventListener("pointermove", Ee, {
+}, Te = (e) => {
+	q.x = e.clientX, q.y = e.clientY;
+}, Ee = () => (q.anchors++ === 0 && window.addEventListener("pointermove", Te, {
 	capture: !0,
 	passive: !0
 }), () => {
-	--K.anchors === 0 && window.removeEventListener("pointermove", Ee, { capture: !0 });
-}), q = ({ id: e, toolTipText: t, text: n, delayShow: r = 0, closeDelay: i = 0, offset: a = 20, tooltipPlace: o = "top", disabled: s = !1, size: c = "md" }) => {
+	--q.anchors === 0 && window.removeEventListener("pointermove", Te, { capture: !0 });
+}), J = ({ id: e, toolTipText: t, text: n, delayShow: r = 0, closeDelay: i = 0, offset: a = 20, tooltipPlace: o = "top", disabled: s = !1, size: c = "md" }) => {
 	let l = p(null), u = p(null);
 	return d(() => {
-		let e = De(), t = () => {
+		let e = Ee(), t = () => {
 			let e = l.current;
 			if (!e) return;
 			let { left: t, right: n, top: r, bottom: i } = e.getBoundingClientRect();
-			K.x >= t && K.x < n && K.y >= r && K.y < i || u.current?.close();
+			q.x >= t && q.x < n && q.y >= r && q.y < i || u.current?.close();
 		}, n = ["fullscreenchange", "webkitfullscreenchange"];
 		for (let e of n) document.addEventListener(e, t);
 		return () => {
@@ -508,12 +521,12 @@ var ee = {
 		children: n
 	}), !s && /* @__PURE__ */ C(z, {
 		ref: u,
-		css: Te(c),
+		css: we(c),
 		id: e,
 		noArrow: !0,
 		children: t
 	})] });
-}, J = ({ ref: e, onChange: t, orientation: n = "horizontal", disabled: r = !1 }) => {
+}, Y = ({ ref: e, onChange: t, orientation: n = "horizontal", disabled: r = !1 }) => {
 	let [i, a] = m(!1), o = p(t);
 	o.current = t;
 	let s = p(null), c = u((t, r) => {
@@ -552,7 +565,7 @@ var ee = {
 			style: { touchAction: "none" }
 		}
 	};
-}, Oe = h`
+}, De = h`
   position: relative;
   height: calc(.4 * var(--mp-unit));
 
@@ -606,7 +619,7 @@ var ee = {
     box-shadow: 0 0 calc(1 * var(--mp-unit)) rgba(0, 0, 0, .5);
 
     text-shadow: 0 0 4px rgba(0, 0, 0, 1);
-    ${H.bMedium.bold}
+    ${U.bMedium.bold}
 
     position: absolute;
     /* Anchored on its bottom edge rather than its top: now that it has a background its height
@@ -723,36 +736,38 @@ var ee = {
     --thumbnail-width: calc(18 * var(--mp-unit));
     --thumbnail-half: calc(9 * var(--mp-unit));
   }
-`, ke = 4, Ae = () => {
-	let e = V(), t = V((e) => e.currentTime), n = V((e) => e.requestSeek), r = V((e) => e.duration), i = V((e) => e.size), a = V((e) => e.downloadedRanges), o = V((e) => e.indexes), s = V((e) => e.thumbnails), c = V((e) => e.thumbnailAt), l = p(null), [u, h] = m(void 0), [g, _] = m(void 0), v = p(void 0), y = p(0), b = p(void 0), x = p(void 0), S = p(!1), { dragging: T, handlers: E } = J({
-		ref: l,
+`, Oe = 4, ke = () => {
+	let e = H(), t = H((e) => e.currentTime), n = H((e) => e.requestSeek), r = H((e) => e.duration), i = H((e) => e.size), a = H((e) => e.downloadedRanges), o = H((e) => e.indexes), s = H((e) => e.thumbnails), c = H((e) => e.thumbnailAt), l = H((e) => e.requestThumbnail), u = p(null), [h, g] = m(void 0), [_, v] = m(void 0), y = (e) => {
+		v(e), l(e);
+	}, b = p(void 0), x = p(0), S = p(void 0), T = p(void 0), E = p(!1), { dragging: D, handlers: O } = Y({
+		ref: u,
 		onChange: (e) => {
-			if (y.current += 1, b.current = e, x.current === void 0) x.current = e;
-			else if (!S.current) {
-				let t = l.current?.getBoundingClientRect().width ?? 0;
-				Math.abs(e - x.current) * t > ke && (S.current = !0);
+			if (x.current += 1, S.current = e, T.current === void 0) T.current = e;
+			else if (!E.current) {
+				let t = u.current?.getBoundingClientRect().width ?? 0;
+				Math.abs(e - T.current) * t > Oe && (E.current = !0);
 			}
-			h(e), v.current !== "mouse" && _(e * r);
+			g(e), b.current !== "mouse" && y(e * r);
 		}
-	}), D = (e) => {
-		v.current = e.pointerType, y.current = 0, x.current = void 0, S.current = !1, E.onPointerDown(e);
-	}, O = (t) => {
-		E.onPointerUp(t);
-		let i = y.current > 0 ? b.current : void 0;
+	}), k = (e) => {
+		b.current = e.pointerType, x.current = 0, T.current = void 0, E.current = !1, O.onPointerDown(e);
+	}, A = (t) => {
+		O.onPointerUp(t);
+		let i = x.current > 0 ? S.current : void 0;
 		if (i !== void 0 && r) {
 			let t = i * r;
 			n ? n(t) : e.seek(t);
 		}
-		y.current = 0, S.current = !1, x.current = void 0, t.pointerType !== "mouse" && _(void 0);
-	}, k = (e) => {
-		if (!l.current) return;
-		let { left: t, right: n } = l.current.getBoundingClientRect();
+		x.current = 0, E.current = !1, T.current = void 0, t.pointerType !== "mouse" && y(void 0);
+	}, j = (e) => {
+		if (!u.current) return;
+		let { left: t, right: n } = u.current.getBoundingClientRect();
 		return Math.min(Math.max((e - t) / (n - t), 0), 1) * r;
-	}, A = (e) => {
-		_(k(e.clientX));
-	}, j = () => {
-		l.current && _(void 0);
-	}, M = (e) => r ? e / r * 100 : 0, N = f(() => a?.map((e, t) => {
+	}, M = (e) => {
+		y(j(e.clientX));
+	}, N = () => {
+		u.current && y(void 0);
+	}, P = (e) => r ? e / r * 100 : 0, F = f(() => a?.map((e, t) => {
 		if (!i || !r) return null;
 		let n = o.filter((t) => e.startByteOffset <= t.pos && t.pos <= e.endByteOffset), a = n.at(0), s = n.at(-1);
 		if (!a || !s) return null;
@@ -768,72 +783,72 @@ var ee = {
 		r,
 		o.length,
 		a?.map(({ startByteOffset: e, endByteOffset: t }) => `${e}/${t}`).join(",")
-	]), P = f(() => {
-		if (!g || g < 0) return;
-		let e = Math.floor(g / 3600), t = Math.floor((g - e * 3600) / 60), n = Math.floor(g - e * 3600 - t * 60);
+	]), I = f(() => {
+		if (!_ || _ < 0) return;
+		let e = Math.floor(_ / 3600), t = Math.floor((_ - e * 3600) / 60), n = Math.floor(_ - e * 3600 - t * 60);
 		return `${e > 0 ? `${e}:` : ""}${t < 10 ? "0" : ""}${t}:${n < 10 ? "0" : ""}${n}`;
-	}, [g]);
+	}, [_]);
 	d(() => {
-		u === void 0 || !r || !T || !S.current || e.seek(u * r);
+		h === void 0 || !r || !D || !E.current || e.seek(h * r);
 	}, [
 		e,
-		T,
-		u,
+		D,
+		h,
 		r
 	]);
-	let F = f(() => !r || typeof t != "number" ? 0 : t / r, [r, t]), I = f(() => {
-		if (g) {
-			if (c) return c(g);
-			if (s.length) return s.find(({ startTime: e, endTime: t }) => e <= g && g < t);
+	let L = f(() => !r || typeof t != "number" ? 0 : t / r, [r, t]), R = f(() => {
+		if (_) {
+			if (c) return c(_);
+			if (s.length) return s.find(({ startTime: e, endTime: t }) => e <= _ && _ < t);
 		}
 	}, [
 		s,
 		c,
-		g
+		_
 	]);
 	return /* @__PURE__ */ w("div", {
-		css: Oe,
-		ref: l,
-		className: T ? "progress-bar dragging" : "progress-bar",
-		onMouseMove: A,
-		onMouseOut: j,
+		css: De,
+		ref: u,
+		className: D ? "progress-bar dragging" : "progress-bar",
+		onMouseMove: M,
+		onMouseOut: N,
 		children: [
 			/* @__PURE__ */ C("div", { className: "background-bar" }),
-			g ? /* @__PURE__ */ C("div", {
+			_ ? /* @__PURE__ */ C("div", {
 				className: "cursor-time",
-				style: { left: `clamp(calc(3 * var(--mp-unit)), ${M(g)}%, calc(100% - calc(3 * var(--mp-unit))))` },
-				children: P
+				style: { left: `clamp(calc(3 * var(--mp-unit)), ${P(_)}%, calc(100% - calc(3 * var(--mp-unit))))` },
+				children: I
 			}) : void 0,
 			/* @__PURE__ */ C("div", { className: "progress" }),
 			/* @__PURE__ */ C("div", {
 				className: "loaded",
-				children: N
+				children: F
 			}),
 			/* @__PURE__ */ C("div", { className: "hover" }),
 			/* @__PURE__ */ C("div", {
 				className: "play-container",
 				children: /* @__PURE__ */ C("div", {
 					className: "play",
-					style: { transform: `scaleX(${F})` }
+					style: { transform: `scaleX(${L})` }
 				})
 			}),
 			/* @__PURE__ */ C("div", { className: "chapters" }),
 			/* @__PURE__ */ C("div", { className: "scrubber" }),
 			/* @__PURE__ */ C("div", {
 				className: "padding",
-				...E,
-				onPointerDown: D,
-				onPointerUp: O,
-				onPointerCancel: O
+				...O,
+				onPointerDown: k,
+				onPointerUp: A,
+				onPointerCancel: A
 			}),
 			/* @__PURE__ */ C("div", {
 				className: "thumbnail",
-				style: { left: `clamp(var(--thumbnail-half), ${M(g ?? 1)}%, calc(100% - var(--thumbnail-half)))` },
-				children: I?.url ? /* @__PURE__ */ C("img", { src: I.url }) : void 0
+				style: { left: `clamp(var(--thumbnail-half), ${P(_ ?? 1)}%, calc(100% - var(--thumbnail-half)))` },
+				children: R?.url ? /* @__PURE__ */ C("img", { src: R.url }) : void 0
 			})
 		]
 	});
-}, je = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20class='icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-picture-in-picture'%3e%3cpath%20stroke='none'%20d='M0%200h24v24H0z'%20fill='none'%20/%3e%3cpath%20d='M11%2019h-6a2%202%200%200%201%20-2%20-2v-10a2%202%200%200%201%202%20-2h14a2%202%200%200%201%202%202v4'%20/%3e%3cpath%20d='M14%2014m0%201a1%201%200%200%201%201%20-1h5a1%201%200%200%201%201%201v3a1%201%200%200%201%20-1%201h-5a1%201%200%200%201%20-1%20-1z'%20/%3e%3c/svg%3e", Y = {
+}, Ae = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20class='icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-picture-in-picture'%3e%3cpath%20stroke='none'%20d='M0%200h24v24H0z'%20fill='none'%20/%3e%3cpath%20d='M11%2019h-6a2%202%200%200%201%20-2%20-2v-10a2%202%200%200%201%202%20-2h14a2%202%200%200%201%202%202v4'%20/%3e%3cpath%20d='M14%2014m0%201a1%201%200%200%201%201%20-1h5a1%201%200%200%201%201%201v3a1%201%200%200%201%20-1%201h-5a1%201%200%200%201%20-1%20-1z'%20/%3e%3c/svg%3e", X = {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
 	height: 24,
@@ -843,8 +858,8 @@ var ee = {
 	strokeWidth: 2,
 	strokeLinecap: "round",
 	strokeLinejoin: "round"
-}, Me = (e) => /* @__PURE__ */ w("svg", {
-	...Y,
+}, je = (e) => /* @__PURE__ */ w("svg", {
+	...X,
 	...e,
 	children: [/* @__PURE__ */ C("rect", {
 		x: "3",
@@ -854,8 +869,8 @@ var ee = {
 		rx: "2",
 		ry: "2"
 	}), /* @__PURE__ */ C("path", { d: "M7 15h4m4 0h2M7 11h2m4 0h4" })]
-}), Ne = (e) => /* @__PURE__ */ w("svg", {
-	...Y,
+}), Me = (e) => /* @__PURE__ */ w("svg", {
+	...X,
 	...e,
 	children: [
 		/* @__PURE__ */ C("rect", {
@@ -874,8 +889,8 @@ var ee = {
 			y2: "22"
 		})
 	]
-}), Pe = (e) => /* @__PURE__ */ w("svg", {
-	...Y,
+}), Ne = (e) => /* @__PURE__ */ w("svg", {
+	...X,
 	...e,
 	children: [
 		/* @__PURE__ */ C("path", { d: "M21 11V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h5" }),
@@ -889,8 +904,8 @@ var ee = {
 		}),
 		/* @__PURE__ */ C("path", { d: "M14.5 18.5h2m2 0h1" })
 	]
-}), Fe = (e) => /* @__PURE__ */ w("svg", {
-	...Y,
+}), Pe = (e) => /* @__PURE__ */ w("svg", {
+	...X,
 	...e,
 	children: [
 		/* @__PURE__ */ C("path", { d: "M21 11V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h5" }),
@@ -904,7 +919,7 @@ var ee = {
 		}),
 		/* @__PURE__ */ C("path", { d: "M6 9h3m2 0h2" })
 	]
-}), X = h`
+}), Z = h`
 .popover {
   position: absolute;
   /* Anchored to the PLAYER's right edge, never to the gear. The gear is not the last control in the
@@ -943,7 +958,7 @@ var ee = {
 
   border-radius: 8px;
   background-color: rgba(28,28,28,0.95);
-  ${H.bMedium.regular}
+  ${U.bMedium.regular}
 
   z-index: 4;
 
@@ -986,7 +1001,7 @@ var ee = {
 
       .secondary {
         color: #eee;
-        ${H.bSmall.regular}
+        ${U.bSmall.regular}
       }
     }
   }
@@ -1028,10 +1043,10 @@ var ee = {
   .failed {
     border-bottom: 1px solid #4D4D4E;
     color: #f66;
-    ${H.bSmall.regular}
+    ${U.bSmall.regular}
   }
 }
-`, Ie = ({ title: e, tracks: t, selected: n, onSelect: r, onBack: i, offLabel: a, pending: o, failed: s }) => {
+`, Fe = ({ title: e, tracks: t, selected: n, onSelect: r, onBack: i, offLabel: a, pending: o, failed: s }) => {
 	let c = o !== void 0, l = (e, i, a) => {
 		let s = c && o === e, l = c || t.find((t) => t.id === e)?.disabled;
 		return /* @__PURE__ */ w("div", {
@@ -1058,7 +1073,7 @@ var ee = {
 			t.map(({ id: e, label: t }) => l(e, t, "description"))
 		]
 	});
-}, Z = ({ onReset: e } = {}) => {
+}, Ie = ({ onReset: e } = {}) => {
 	let t = p(null), [n, r] = m(!1), [i, a] = m(void 0), [o, s] = m(!1), c = p(e);
 	c.current = e;
 	let l = () => {
@@ -1115,7 +1130,7 @@ position: static;
   }
 }
 
-${X}
+${Z}
 
 .popover.error-list {
   /* Wider than a track menu and taller, because these rows are sentences rather than labels, and a
@@ -1143,7 +1158,7 @@ ${X}
 
     color: #fff;
     cursor: pointer;
-    ${H.bSmall.regular}
+    ${U.bSmall.regular}
 
     &:hover {
       background-color: rgba(255,255,255,.1);
@@ -1164,7 +1179,7 @@ ${X}
 
     .when {
       color: #bbb;
-      ${H.bSmall.regular}
+      ${U.bSmall.regular}
 
       /* the one part of the line worth scanning for, so it is the one part at full brightness */
       .count {
@@ -1183,11 +1198,11 @@ ${X}
       color: #ddd;
       overflow-wrap: anywhere;
       white-space: pre-wrap;
-      ${H.bSmall.regular}
+      ${U.bSmall.regular}
     }
   }
 }
-`, Re = (e) => new Date(e).toLocaleTimeString(), Q = (e) => e === void 0 || !Number.isFinite(e) ? void 0 : G(Math.max(0, e)), ze = (e) => e.reduce((e, t) => e + t.count, 0), Be = (e) => e.map((e, t) => {
+`, Re = (e) => new Date(e).toLocaleTimeString(), Q = (e) => e === void 0 || !Number.isFinite(e) ? void 0 : K(Math.max(0, e)), ze = (e) => e.reduce((e, t) => e + t.count, 0), Be = (e) => e.map((e, t) => {
 	let n = Q(e.atMediaTime), r = e.count > 1 ? `${new Date(e.at).toISOString()} to ${new Date(e.lastAt).toISOString()} ×${e.count}` : new Date(e.at).toISOString();
 	return [
 		`${t + 1}. ${r}${n ? ` (at ${n})` : ""}${e.recovered ? " [recovered]" : ""}`,
@@ -1195,7 +1210,7 @@ ${X}
 		e.detail
 	].filter(Boolean).join("\n");
 }).join("\n\n"), Ve = () => {
-	let e = V((e) => e.playbackErrors), { open: t, toggle: n, containerRef: r } = Z(), [i, a] = m(!1);
+	let e = H((e) => e.playbackErrors), { open: t, toggle: n, containerRef: r } = Ie(), [i, a] = m(!1);
 	if (e.length === 0) return null;
 	let o = () => {
 		navigator.clipboard?.writeText(Be(e)).then(() => {
@@ -1205,7 +1220,7 @@ ${X}
 	return /* @__PURE__ */ w("div", {
 		css: Le,
 		ref: r,
-		children: [/* @__PURE__ */ C(q, {
+		children: [/* @__PURE__ */ C(J, {
 			id: "errors",
 			disabled: t,
 			text: /* @__PURE__ */ C("button", {
@@ -1310,7 +1325,7 @@ width: 100%;
   }
 }
 `, Ue = () => {
-	let e = V(), t = V((e) => e.playbackRate), n = p(null), r = p(null), i = .25, a = 3 - i, o = (e, t = .05) => Math.round(e / t) * t, s = o(t || 1), c = (e) => (e - i) / a * 100, l = (e) => o(i + e * a), { handlers: u } = J({
+	let e = H(), t = H((e) => e.playbackRate), n = p(null), r = p(null), i = .25, a = 3 - i, o = (e, t = .05) => Math.round(e / t) * t, s = o(t || 1), c = (e) => (e - i) / a * 100, l = (e) => o(i + e * a), { handlers: u } = Y({
 		ref: r,
 		onChange: (t) => e.setPlaybackRate(l(t))
 	}), f = (t) => {
@@ -1362,7 +1377,7 @@ position: static;
   }
 }
 
-${X}
+${Z}
 
 .playback-rate {
   .slider {
@@ -1404,7 +1419,7 @@ ${X}
 }
 
 `, Ge = () => {
-	let e = V(), t = V((e) => e.playbackRate), n = V((e) => e.audioTracks), r = V((e) => e.selectedAudioTrack), i = V((e) => e.selectAudioTrack), [a, o] = m(0), { open: s, toggle: c, containerRef: l, pending: u, failed: d, runSelect: f } = Z({ onReset: () => o(0) }), p = (t) => {
+	let e = H(), t = H((e) => e.playbackRate), n = H((e) => e.audioTracks), r = H((e) => e.selectedAudioTrack), i = H((e) => e.selectAudioTrack), [a, o] = m(0), { open: s, toggle: c, containerRef: l, pending: u, failed: d, runSelect: f } = Ie({ onReset: () => o(0) }), p = (t) => {
 		e.setPlaybackRate(t), o(0);
 	}, h = (e) => {
 		e !== void 0 && f(e, () => i(e));
@@ -1415,7 +1430,7 @@ ${X}
 		css: We,
 		ref: l,
 		children: [
-			/* @__PURE__ */ C(q, {
+			/* @__PURE__ */ C(J, {
 				id: "settings",
 				disabled: s,
 				text: /* @__PURE__ */ C("button", {
@@ -1476,7 +1491,7 @@ ${X}
 					})
 				]
 			}),
-			s && a === 2 && /* @__PURE__ */ C(Ie, {
+			s && a === 2 && /* @__PURE__ */ C(Fe, {
 				title: "Audio",
 				tracks: n,
 				selected: r,
@@ -1503,15 +1518,15 @@ position: static;
   }
 }
 
-${X}
+${Z}
 `, qe = () => {
-	let e = V((e) => e.subtitleTracks), t = V((e) => e.selectedSubtitleTrack), n = V((e) => e.selectSubtitleTrack), r = V((e) => e.subtitleOffLabel), { open: i, toggle: a, containerRef: o, pending: s, failed: c, runSelect: l } = Z();
+	let e = H((e) => e.subtitleTracks), t = H((e) => e.selectedSubtitleTrack), n = H((e) => e.selectSubtitleTrack), r = H((e) => e.subtitleOffLabel), { open: i, toggle: a, containerRef: o, pending: s, failed: c, runSelect: l } = Ie();
 	if (e.length === 0) return null;
 	let u = t !== void 0;
 	return /* @__PURE__ */ w("div", {
 		css: Ke,
 		ref: o,
-		children: [/* @__PURE__ */ C(q, {
+		children: [/* @__PURE__ */ C(J, {
 			id: "subtitles",
 			disabled: i,
 			text: /* @__PURE__ */ C("button", {
@@ -1521,10 +1536,10 @@ ${X}
 				"aria-label": "Subtitles",
 				"aria-expanded": i,
 				"aria-pressed": u,
-				children: u ? /* @__PURE__ */ C(Me, { className: "captions" }) : /* @__PURE__ */ C(Ne, { className: "captions-off" })
+				children: u ? /* @__PURE__ */ C(je, { className: "captions" }) : /* @__PURE__ */ C(Me, { className: "captions-off" })
 			}),
 			toolTipText: /* @__PURE__ */ C("span", { children: "Subtitles" })
-		}), i && /* @__PURE__ */ C(Ie, {
+		}), i && /* @__PURE__ */ C(Fe, {
 			title: "Subtitles",
 			tracks: e,
 			selected: t,
@@ -1584,7 +1599,7 @@ ${X}
     height: 10px;
   }
 `, Xe = ({ value: e, onChange: t }) => {
-	let n = V((e) => e.volume), r = V((e) => e.muted), i = p(null), a = p(null), { handlers: o } = J({
+	let n = H((e) => e.volume), r = H((e) => e.muted), i = p(null), a = p(null), { handlers: o } = Y({
 		ref: a,
 		onChange: t
 	}), s = (n) => {
@@ -1598,8 +1613,8 @@ ${X}
 			e && e.removeEventListener("wheel", s);
 		};
 	}, [e]);
-	let c = e * 100, l = f(() => Math.round(r ? 0 : W(n) * 100), [n, r]);
-	return /* @__PURE__ */ C(q, {
+	let c = e * 100, l = f(() => Math.round(r ? 0 : G(n) * 100), [n, r]);
+	return /* @__PURE__ */ C(J, {
 		id: "volume-slider",
 		text: /* @__PURE__ */ C("div", {
 			ref: i,
@@ -1647,7 +1662,7 @@ ${X}
       border-radius: 4px;
 
       .volume-value {
-        ${H.bMedium.regular};
+        ${U.bMedium.regular};
         color: #ffffff;
       }
     }
@@ -1686,10 +1701,10 @@ ${X}
   }
 
 `, Qe = ({ ref: e }) => {
-	let t = V(), n = V((e) => e.volume), r = V((e) => e.muted), i = f(() => W(n), [n]);
+	let t = H(), n = H((e) => e.volume), r = H((e) => e.muted), i = f(() => G(n), [n]);
 	return /* @__PURE__ */ w("div", {
 		css: Ze,
-		children: [/* @__PURE__ */ C(q, {
+		children: [/* @__PURE__ */ C(J, {
 			id: "sound",
 			text: /* @__PURE__ */ C("button", {
 				className: "sound",
@@ -1711,7 +1726,7 @@ ${X}
 				children: /* @__PURE__ */ C(Xe, {
 					value: r ? 0 : i,
 					onChange: (e) => {
-						t.setVolume(Ce(e));
+						t.setVolume(Se(e));
 					}
 				})
 			})
@@ -1833,7 +1848,7 @@ ${X}
 
     .left {
       .time {
-        ${H.bMedium.regular}
+        ${U.bMedium.regular}
         text-shadow: 0 0 4px rgba(0, 0, 0, 1);
       }
     }
@@ -1855,9 +1870,9 @@ ${X}
     }
   }
 `, nt = () => {
-	let e = V(), t = V((e) => e.paused), n = V((e) => e.currentTime), r = V((e) => e.duration), i = V((e) => e.fullscreen), a = V((e) => e.hideUI), o = V((e) => e.togglePictureInPicture), s = V((e) => e.pictureInPictureMode), c = V((e) => e.burnedInSubtitles), l = V((e) => e.subtitleTracks), f = V((e) => e.requestSeek), [p, h] = m(null), g = s === "burn-in", _ = l.length > 0, v = r > 0 && n === r, y = u(({ direction: t, stepSize: n }) => {
-		let r = W(e.volume), i = t === "up" ? n : -n, a = Math.max(0, Math.min(1, r + i)), o = e.muted;
-		e.setVolume(Ce(a)), o && !e.muted && e.toggleMuted();
+	let e = H(), t = H((e) => e.paused), n = H((e) => e.currentTime), r = H((e) => e.duration), i = H((e) => e.fullscreen), a = H((e) => e.hideUI), o = H((e) => e.togglePictureInPicture), s = H((e) => e.pictureInPictureMode), c = H((e) => e.burnedInSubtitles), l = H((e) => e.subtitleTracks), f = H((e) => e.requestSeek), [p, h] = m(null), g = s === "burn-in", _ = l.length > 0, v = r > 0 && n === r, y = u(({ direction: t, stepSize: n }) => {
+		let r = G(e.volume), i = t === "up" ? n : -n, a = Math.max(0, Math.min(1, r + i)), o = e.muted;
+		e.setVolume(Se(a)), o && !e.muted && e.toggleMuted();
 	}, [e]);
 	d(() => {
 		let t = (t) => f ? f(t) : e.seek(t), n = (n) => {
@@ -1905,12 +1920,12 @@ ${X}
 			opacity: "0",
 			pointerEvents: "none"
 		} : {} },
-		children: [/* @__PURE__ */ C(Ae, {}), /* @__PURE__ */ w("div", {
+		children: [/* @__PURE__ */ C(ke, {}), /* @__PURE__ */ w("div", {
 			className: "actions",
 			children: [/* @__PURE__ */ w("div", {
 				className: "left",
 				children: [
-					/* @__PURE__ */ C(q, {
+					/* @__PURE__ */ C(J, {
 						id: "play",
 						tooltipPlace: "top-start",
 						text: /* @__PURE__ */ C("button", {
@@ -1925,7 +1940,7 @@ ${X}
 					/* @__PURE__ */ C(Qe, { ref: h }),
 					/* @__PURE__ */ C("div", {
 						className: "time",
-						children: we(n, r)
+						children: Ce(n, r)
 					})
 				]
 			}), /* @__PURE__ */ w("div", {
@@ -1934,7 +1949,7 @@ ${X}
 					/* @__PURE__ */ C(Ve, {}),
 					/* @__PURE__ */ C(qe, {}),
 					/* @__PURE__ */ C(Ge, {}),
-					o ? /* @__PURE__ */ C(q, {
+					o ? /* @__PURE__ */ C(J, {
 						id: "picture-in-picture",
 						tooltipPlace: "top-end",
 						text: /* @__PURE__ */ C("button", {
@@ -1944,8 +1959,8 @@ ${X}
 							disabled: g && !_,
 							"aria-label": g ? "Put the subtitles in the video" : "Picture in picture",
 							"aria-pressed": g ? c : void 0,
-							children: g ? C(c ? Pe : Fe, {}) : /* @__PURE__ */ C("img", {
-								src: je,
+							children: g ? C(c ? Ne : Pe, {}) : /* @__PURE__ */ C("img", {
+								src: Ae,
 								alt: ""
 							})
 						}),
@@ -1960,7 +1975,7 @@ ${X}
 							}) : null]
 						})
 					}) : null,
-					/* @__PURE__ */ C(q, {
+					/* @__PURE__ */ C(J, {
 						id: "full-screen",
 						tooltipPlace: "top-end",
 						text: /* @__PURE__ */ C("button", {
@@ -2015,12 +2030,12 @@ ${X}
   }
 
   .title {
-    ${H.bMedium.bold}
+    ${U.bMedium.bold}
     color: #fff;
   }
 
   .body {
-    ${H.bSmall.regular}
+    ${U.bSmall.regular}
     color: rgba(255, 255, 255, 0.75);
   }
 
@@ -2032,7 +2047,7 @@ ${X}
     color: #fff;
   }
 `, at = () => {
-	let e = V((e) => e.burnedInSubtitles), t = V((e) => e.pictureInPictureMode), [n, r] = m(!1);
+	let e = H((e) => e.burnedInSubtitles), t = H((e) => e.pictureInPictureMode), [n, r] = m(!1);
 	return d(() => {
 		if (t !== "burn-in" || !e) {
 			r(!1);
@@ -2088,6 +2103,19 @@ ${X}
     z-index: 2;
   }
 
+  /* The subtitle layer sits UNDER the title and the spinner, where the canvas itself used to sit.
+     As a plain child div it is matched by the rule above and raised to the overlay items' level,
+     which paints subtitles over the title's gradient, over the spinner and over the error text.
+     Naming the type as well is what takes it back: :not() carries the specificity of its argument,
+     so the rule above is (0,2,1) and a bare .subtitles at (0,2,0) loses to it whatever the source
+     order, while div.subtitles ties at (0,2,1) and second place in the same block then wins.
+     subtitle-layering.browser.test.tsx measures the computed value rather than trusting this. */
+  & > div.subtitles {
+    inset: 0;
+    z-index: 1;
+    pointer-events: none;
+  }
+
   canvas {
     height: 100%;
     width: 100%;
@@ -2112,8 +2140,8 @@ ${X}
 		key: r,
 		item: e
 	}];
-}), ut = ({ ref: e, onVideoRef: t, onCanvasRef: n, overlay: r, controls: i, children: a }) => {
-	let o = V(), s = V((e) => e.hideUI), c = V((e) => e.setHideUI), l = p(void 0), u = p("mouse"), f = p({
+}), ut = ({ ref: e, onVideoRef: t, onSubtitleRef: n, overlay: r, controls: i, children: a }) => {
+	let o = H(), s = H((e) => e.hideUI), c = H((e) => e.setHideUI), l = p(void 0), u = p("mouse"), f = p({
 		x: -1,
 		y: -1
 	}), m = p(null);
@@ -2155,7 +2183,7 @@ ${X}
 		},
 		className: s ? "hide" : "",
 		children: [
-			/* @__PURE__ */ C(xe, { onCanvasRef: n }),
+			/* @__PURE__ */ C(be, { onSubtitleRef: n }),
 			lt(r).map(({ key: e, item: t }) => /* @__PURE__ */ C("div", {
 				css: st,
 				style: { ...s ? {
@@ -2203,69 +2231,71 @@ ${X}
 		O,
 		k,
 		A
-	]), de(_, x, r);
-	let j = me({
+	]), ue(_, x, r);
+	let { thumbnails: j, requestThumbnail: M } = pe({
 		publicPath: s,
 		workerUrl: c,
 		length: f === !1 ? void 0 : a,
 		read: u ?? l,
 		downloadedRanges: o
-	}), M = n?.thumbnails?.all ?? j, { toggle: N, mode: P, burnedIn: F } = he(_, x), I = V((e) => e.setSourceState);
+	}), N = n?.thumbnails?.all ?? j, { toggle: P, mode: F, burnedIn: I } = me(_, x), L = H((e) => e.setSourceState);
 	d(() => {
-		I({
+		L({
 			title: i,
 			size: a,
 			downloadedRanges: o
 		});
 	}, [
-		I,
+		L,
 		i,
 		a,
 		o
 	]);
-	let L = n?.thumbnails?.at;
+	let R = n?.thumbnails?.at;
 	d(() => {
-		I({
-			thumbnails: M,
-			thumbnailAt: L,
-			togglePictureInPicture: N,
-			pictureInPictureMode: P,
-			burnedInSubtitles: F
+		L({
+			thumbnails: N,
+			thumbnailAt: R,
+			requestThumbnail: M,
+			togglePictureInPicture: P,
+			pictureInPictureMode: F,
+			burnedInSubtitles: I
 		});
 	}, [
-		I,
-		M,
 		L,
 		N,
+		R,
+		M,
 		P,
-		F
+		F,
+		I
 	]);
-	let R = n?.subtitles?.selection, z = n?.audioTracks?.selection;
+	let z = n?.subtitles?.selection, B = n?.audioTracks?.selection;
 	return d(() => {
-		R && I({
-			subtitleTracks: R.options.map(({ id: e, label: t, disabled: n }) => ({
+		z && L({
+			subtitleTracks: z.options.map(({ id: e, label: t, disabled: n }) => ({
 				id: e,
 				label: t,
 				disabled: n
 			})),
-			selectedSubtitleTrack: R.selectedId ?? void 0,
-			selectSubtitleTrack: (e) => R.select(e == null ? null : String(e)),
-			subtitleOffLabel: R.offLabel
+			selectedSubtitleTrack: z.selectedId ?? void 0,
+			selectSubtitleTrack: (e) => z.select(e == null ? null : String(e)),
+			subtitleOffLabel: z.offLabel
 		});
-	}, [I, R]), d(() => {
-		z && I({
-			audioTracks: z.options.map(({ id: e, label: t, disabled: n }) => ({
+	}, [L, z]), d(() => {
+		B && L({
+			audioTracks: B.options.map(({ id: e, label: t, disabled: n }) => ({
 				id: e,
 				label: t,
 				disabled: n
 			})),
-			selectedAudioTrack: z.selectedId ?? void 0,
-			selectAudioTrack: (e) => z.select(String(e))
+			selectedAudioTrack: B.selectedId ?? void 0,
+			selectAudioTrack: (e) => B.select(String(e))
 		});
-	}, [I, z]), /* @__PURE__ */ C(ut, {
+	}, [L, B]), /* @__PURE__ */ C(ut, {
 		ref: g,
 		onVideoRef: n ? void 0 : b,
-		onCanvasRef: S,
+		onSubtitleRef: S,
 		overlay: e.overlay,
 		controls: e.controls,
 		children: t
@@ -2342,7 +2372,7 @@ ${X}
   overflow: hidden;
 `, pt = (e) => /* @__PURE__ */ C("div", {
 	css: ft,
-	children: /* @__PURE__ */ C(B.Provider, { children: /* @__PURE__ */ C(dt, {
+	children: /* @__PURE__ */ C(V.Provider, { children: /* @__PURE__ */ C(dt, {
 		options: e,
 		children: e.children
 	}) })
@@ -2385,4 +2415,4 @@ ${X}
 	throw Error(`Unknown source type: ${e}`);
 };
 //#endregion
-export { pt as MediaPlayer, pt as default, B as Player, e as SUBTITLES_OFF, a as createPictureInPicture, o as createSubtitleRenderer, r as createThumbnailGenerator, yt as inputToRemuxerInput, ht as isDelegatedTracks, mt as isExternalThumbnails, te as sourceFeature, i as startPlayback, he as usePictureInPicture, V as usePlayer, me as useSeekThumbnails };
+export { pt as MediaPlayer, pt as default, V as Player, e as SUBTITLES_OFF, a as createPictureInPicture, o as createSubtitleRenderer, r as createThumbnailGenerator, yt as inputToRemuxerInput, ht as isDelegatedTracks, mt as isExternalThumbnails, ee as sourceFeature, i as startPlayback, me as usePictureInPicture, H as usePlayer, pe as useSeekThumbnails };