@banou/media-player 0.8.12 → 0.8.13

package/dist/index.js

@@ -1,13 +1,13 @@
-import { l as e, n as t, o as n, r, s as i, t as a, u as o } from "./engine-Cownv8gD.js";
+import { l as e, n as t, o as n, r, s as i, t as a, u as o } from "./engine-BUcS6UrE.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";
 import { definePlayerFeature as b, videoFeatures as x } from "@videojs/core/dom";
 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 ee, Volume1 as te, Volume2 as ne, VolumeX as re } from "react-feather";
-import { Tooltip as ie } from "react-tooltip";
+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 ee } from "react-feather";
+import { Tooltip as te } from "react-tooltip";
 //#region src/lib/react/source-feature.ts
-var ae = {
+var ne = {
 	indexes: [],
 	thumbnails: [],
 	subtitleTracks: [],
@@ -25,19 +25,19 @@ var ae = {
 	playbackErrors: [],
 	ready: !1,
 	setSourceState: () => {}
-}, F = b({
+}, re = b({
 	name: "source",
-	state: () => ({ ...ae }),
+	state: () => ({ ...ne }),
 	attach({ set: e }) {
 		e({
 			setSourceState: (t) => e(t),
 			setHideUI: (t) => e({ hideUI: t })
 		});
 	}
-}), I = _({
-	features: [...x, F],
+}), R = _({
+	features: [...x, re],
 	displayName: "MediaPlayer"
-}), L = I.usePlayer, oe = (e) => {
+}), z = R.usePlayer, ie = (e) => {
 	if (!(!e || e === "und")) try {
 		return new Intl.DisplayNames([navigator.language || "en"], {
 			type: "language",
@@ -46,69 +46,88 @@ var ae = {
 	} catch {
 		return;
 	}
-}, se = (e) => e?.replace(/_/g, " ").trim() || void 0, ce = (e) => {
-	let t = e.map((e) => oe(e.language) ?? se(e.title) ?? `Track ${e.streamIndex}`), n = t.reduce((e, t) => ({
+}, B = (e) => e?.replace(/_/g, " ").trim() || void 0, ae = (e) => {
+	let t = e.map((e) => ie(e.language) ?? B(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 = se(e.title);
+		let i = t[r], a = B(e.title);
 		return {
 			track: e,
 			label: (n[i] ?? 0) > 1 && a && a !== i ? `${i} (${a})` : i
 		};
 	});
-}, le = (e) => ce(e).map(({ track: e, label: t }) => ({
+}, V = (e) => ae(e).map(({ track: e, label: t }) => ({
 	id: e.streamIndex,
 	label: t
-})), ue = [
+})), H = [
 	0,
 	250,
 	1e3,
 	3e3,
 	1e4
-], de = 6e4, R = (e) => e instanceof Error ? e.message : String(e), fe = (e) => {
+], oe = 6e4, se = 500, ce = 250, le = (e) => e instanceof Error ? e.message : String(e), ue = (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(R(n)), n = n?.cause;
+		t.push(le(n)), n = n?.cause;
 	}
 	return t.length ? t.join("\n") : void 0;
-}, pe = (e, t, r) => {
-	let a = L(), { read: o, size: s, publicPath: c = "", libavWorkerUrl: l = "", jassubWorkerUrl: f = "", jassubWasmUrl: h = "", jassubLegacyWasmUrl: g, defaultFontUrl: _, bufferSize: v, autoplay: y = !1 } = r ?? {}, [b, x] = m(void 0), [S, C] = m(0), w = p({
+}, de = (e, t, r) => {
+	let a = z(), { 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
-	}), T = p(void 0);
-	d(() => (w.current = {
+	}), E = p(void 0);
+	d(() => (T.current = {
 		count: 0,
 		at: 0
 	}, a.setSourceState({ playbackErrors: [] }), () => {
-		T.current && clearTimeout(T.current);
+		E.current && clearTimeout(E.current);
 	}), [s]);
-	let E = p(null), D = p(null), O = p(!1), k = p(o);
-	k.current = o;
-	let A = p(r?.onSeek);
-	A.current = r?.onSeek;
-	let j = p(r?.onPlaybackError);
-	j.current = r?.onPlaybackError;
-	let M = u((e) => {
+	let D = p(null), O = p(null), k = p(0), A = p(!1), j = p(o);
+	j.current = o;
+	let M = p(r?.onSeek);
+	M.current = r?.onSeek;
+	let N = p(r?.onPlaybackError);
+	N.current = r?.onPlaybackError;
+	let P = u((e) => {
 		let t = typeof e == "number" ? e : void 0;
-		O.current = !0, a.setSourceState({ selectedSubtitleTrack: t }), E.current?.selectSubtitleStream(t);
-	}, [a]), N = u((e) => {
-		typeof e == "number" && (a.setSourceState({ selectedAudioTrack: e }), x(e));
-	}, [a]), P = L((e) => e.setSourceState);
+		A.current = !0, a.setSourceState({ selectedSubtitleTrack: t }), D.current?.selectSubtitleStream(t);
+	}, [a]), F = u((e) => {
+		let t = D.current;
+		if (!t || b <= 0) {
+			a.seek(e);
+			return;
+		}
+		let n = performance.now(), r = n - k.current < ce;
+		if (k.current = n, r) {
+			a.seek(e);
+			return;
+		}
+		let i = !1, o = () => {
+			i || (i = !0, a.seek(e));
+		}, s = setTimeout(o, b);
+		t.prepareSeek(e).catch(() => {}).finally(() => {
+			clearTimeout(s), o();
+		});
+	}, [a, b]), I = u((e) => {
+		typeof e == "number" && (a.setSourceState({ selectedAudioTrack: e }), S(e));
+	}, [a]), L = z((e) => e.setSourceState);
 	d(() => {
-		P({
-			selectSubtitleTrack: M,
-			selectAudioTrack: N
+		L({
+			selectSubtitleTrack: P,
+			selectAudioTrack: I,
+			requestSeek: F
 		});
 	}, [
+		L,
 		P,
-		M,
-		N
+		I,
+		F
 	]), d(() => {
 		if (!e || !t || !s || !o) return;
 		let r = !1;
@@ -117,7 +136,7 @@ var ae = {
 			ready: !1
 		});
 		let u = (t, n) => {
-			let r = Date.now(), i = R(t), o = fe(t), s = a.playbackErrors, c = s[s.length - 1];
+			let r = Date.now(), i = le(t), o = ue(t), s = a.playbackErrors, c = s[s.length - 1];
 			if (c && c.message === i && c.detail === o && c.recovered === n) {
 				let e = {
 					...c,
@@ -142,25 +161,25 @@ var ae = {
 			let t = n(e);
 			if (u(e, t), t) {
 				let t = performance.now();
-				t - w.current.at > de && (w.current = {
+				t - T.current.at > oe && (T.current = {
 					count: 0,
 					at: t
 				});
-				let n = ue[Math.min(w.current.count, ue.length - 1)];
-				w.current = {
-					count: w.current.count + 1,
+				let n = H[Math.min(T.current.count, H.length - 1)];
+				T.current = {
+					count: T.current.count + 1,
 					at: t
-				}, console.warn(`the media element failed; rebuilding the pipeline${n ? ` in ${n}ms` : ""}`, e), T.current && clearTimeout(T.current), T.current = setTimeout(() => C((e) => e + 1), n);
+				}, console.warn(`the media element failed; rebuilding the pipeline${n ? ` in ${n}ms` : ""}`, e), E.current && clearTimeout(E.current), E.current = setTimeout(() => w((e) => e + 1), n);
 				return;
 			}
-			console.error("playback failed", e), a.setSourceState({ playbackError: e }), j.current?.(e);
+			console.error("playback failed", e), a.setSourceState({ playbackError: e }), N.current?.(e);
 		};
 		return (async () => {
 			try {
 				let n = await i({
 					videoElement: e,
 					canvasElement: t,
-					read: (e, t) => k.current(e, t),
+					read: (e, t) => j.current(e, t),
 					length: s,
 					publicPath: c,
 					libavWorkerUrl: l,
@@ -169,27 +188,27 @@ var ae = {
 					jassubLegacyWasmUrl: g,
 					defaultFontUrl: _,
 					bufferSize: v,
-					audioStreamIndex: b,
+					audioStreamIndex: x,
 					onReady: () => {
 						if (r) return;
 						a.setSourceState({ ready: !0 });
-						let t = D.current;
-						D.current = null, t && t.size === s && t.time > 0 && (e.currentTime = t.time), y && e.play().catch(() => {});
+						let t = O.current;
+						O.current = null, t && t.size === s && t.time > 0 && (e.currentTime = t.time), y && e.play().catch(() => {});
 					},
 					onError: d,
 					onRecovered: () => {
 						r || a.setSourceState({ playbackError: null });
 					},
-					onSeek: (e) => A.current?.(e),
+					onSeek: (e) => M.current?.(e),
 					onSubtitleStreams: (e) => {
 						r || a.setSourceState({
-							subtitleTracks: le(e),
-							...O.current ? {} : { selectedSubtitleTrack: e[0]?.streamIndex }
+							subtitleTracks: V(e),
+							...A.current ? {} : { selectedSubtitleTrack: e[0]?.streamIndex }
 						});
 					},
 					onAudioStreams: (e, t) => {
 						r || a.setSourceState({
-							audioTracks: le(e),
+							audioTracks: V(e),
 							selectedAudioTrack: t
 						});
 					}
@@ -198,17 +217,17 @@ var ae = {
 					n.destroy();
 					return;
 				}
-				E.current = n, a.setSourceState({ indexes: n.indexes });
+				D.current = n, a.setSourceState({ indexes: n.indexes });
 				let o = a.selectedSubtitleTrack;
 				typeof o == "number" && n.selectSubtitleStream(o);
 			} catch (e) {
 				d(e);
 			}
 		})(), () => {
-			r = !0, D.current = {
+			r = !0, O.current = {
 				time: e.currentTime,
 				size: s
-			}, E.current?.destroy(), E.current = null, a.setSourceState({ ready: !1 });
+			}, D.current?.destroy(), D.current = null, a.setSourceState({ ready: !1 });
 		};
 	}, [
 		a,
@@ -222,17 +241,17 @@ var ae = {
 		g,
 		_,
 		v,
-		b,
+		x,
 		y,
-		S
+		C
 	]);
-}, me = 5e3, he = 6e4, z = ({ publicPath: e, workerUrl: t, length: n, read: i, downloadedRanges: a }) => {
+}, fe = 5e3, pe = 6e4, me = ({ 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(() => {
 		if (!n || !i || !e || !t) return;
-		let a = !1, o = null, u, d = me, f = () => {
+		let a = !1, o = null, u, d = fe, f = () => {
 			r({
 				publicPath: e,
 				workerUrl: t,
@@ -248,7 +267,7 @@ var ae = {
 				}
 				o = e, c.current = e, e.update(h.current);
 			}, () => {
-				a || (u = setTimeout(f, d), d = Math.min(d * 2, he));
+				a || (u = setTimeout(f, d), d = Math.min(d * 2, pe));
 			});
 		};
 		return f(), () => {
@@ -261,7 +280,7 @@ var ae = {
 	]), d(() => {
 		c.current?.update(u);
 	}, [u]), o;
-}, B = (e, n) => {
+}, he = (e, n) => {
 	let r = p(null), [i, o] = m(!1), [s] = m(() => t());
 	d(() => {
 		if (!e || !n || !s) return;
@@ -289,7 +308,7 @@ var ae = {
 		mode: s,
 		burnedIn: i
 	};
-}, V = {
+}, 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    ",
@@ -331,7 +350,7 @@ var ae = {
   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));
-  ${V.headings.small}
+  ${U.headings.small}
   color: white;
   text-shadow: 0 0 4px rgba(0, 0, 0, 1);
   z-index: 2;
@@ -379,11 +398,11 @@ var ae = {
   padding: 0 calc(2 * var(--mp-unit));
   text-align: center;
   color: #fff;
-  ${V.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 = L((e) => e.title), n = L((e) => e.hideUI), r = L((e) => e.playbackError), i = L((e) => e.ready), a = L((e) => e.size), o = L((e) => e.waiting);
+	let t = z((e) => e.title), n = z((e) => e.hideUI), r = z((e) => e.playbackError), i = z((e) => e.ready), a = z((e) => e.size), o = z((e) => e.waiting);
 	return /* @__PURE__ */ w(S, { children: [
 		t ? /* @__PURE__ */ C("div", {
 			className: "title",
@@ -404,11 +423,11 @@ var ae = {
 			css: ge
 		})
 	] });
-}, H = 1e-4, U = 1, W = (e) => Math.max(H, Math.min(U, e)) ** 2, G = (e) => Math.max(H, Math.min(U, e)) ** (U / 2), K = (e) => {
+}, Se = 1e-4, W = 1, Ce = (e) => Math.max(Se, Math.min(W, e)) ** 2, G = (e) => Math.max(Se, 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}`;
-}, Se = (e, t) => `${K(e)} / ${K(t)}`, Ce = (e) => h`
+}, we = (e, t) => `${K(e)} / ${K(t)}`, Te = (e) => h`
   display: flex;
   justify-content: flex-end;
 
@@ -418,7 +437,7 @@ var ae = {
   z-index: 3;
 
   * {
-    ${V.bMedium.regular}
+    ${U.bMedium.regular}
   }
 
   ${e === "sm" && h`
@@ -438,8 +457,8 @@ var ae = {
 	"data-tooltip-delay-hide": i,
 	"data-tooltip-place": o,
 	children: n
-}), !s && /* @__PURE__ */ C(ie, {
-	css: Ce(c),
+}), !s && /* @__PURE__ */ C(te, {
+	css: Te(c),
 	id: e,
 	noArrow: !0,
 	children: t
@@ -470,7 +489,7 @@ var ae = {
 			style: { touchAction: "none" }
 		}
 	};
-}, we = h`
+}, Ee = h`
   position: relative;
   height: calc(.4 * var(--mp-unit));
 
@@ -524,7 +543,7 @@ var ae = {
     box-shadow: 0 0 calc(1 * var(--mp-unit)) rgba(0, 0, 0, .5);
 
     text-shadow: 0 0 4px rgba(0, 0, 0, 1);
-    ${V.bMedium.bold}
+    ${U.bMedium.bold}
 
     position: absolute;
     /* Anchored on its bottom edge rather than its top: now that it has a background its height
@@ -641,29 +660,29 @@ var ae = {
     --thumbnail-width: calc(18 * var(--mp-unit));
     --thumbnail-half: calc(9 * var(--mp-unit));
   }
-`, Te = () => {
-	let e = L(), t = L((e) => e.currentTime), n = L((e) => e.duration), r = L((e) => e.size), i = L((e) => e.downloadedRanges), a = L((e) => e.indexes), o = L((e) => e.thumbnails), s = L((e) => e.thumbnailAt), c = p(null), [l, u] = m(void 0), [h, g] = m(void 0), _ = p(void 0), { dragging: v, handlers: y } = J({
-		ref: c,
+`, De = () => {
+	let e = z(), t = z((e) => e.currentTime), n = z((e) => e.requestSeek), r = z((e) => e.duration), i = z((e) => e.size), a = z((e) => e.downloadedRanges), o = z((e) => e.indexes), s = z((e) => e.thumbnails), c = z((e) => e.thumbnailAt), l = p(null), [u, h] = m(void 0), [g, _] = m(void 0), v = p(void 0), { dragging: y, handlers: b } = J({
+		ref: l,
 		onChange: (e) => {
-			u(e), _.current !== "mouse" && g(e * n);
+			h(e), v.current !== "mouse" && _(e * r);
 		}
-	}), b = (e) => {
-		_.current = e.pointerType, y.onPointerDown(e);
-	}, x = (e) => {
-		y.onPointerUp(e), e.pointerType !== "mouse" && g(void 0);
+	}), x = (e) => {
+		v.current = e.pointerType, b.onPointerDown(e);
 	}, S = (e) => {
-		if (!c.current) return;
-		let { left: t, right: r } = c.current.getBoundingClientRect();
-		return Math.min(Math.max((e - t) / (r - t), 0), 1) * n;
+		b.onPointerUp(e), e.pointerType !== "mouse" && _(void 0);
 	}, T = (e) => {
-		g(S(e.clientX));
-	}, E = () => {
-		c.current && g(void 0);
-	}, D = (e) => n ? e / n * 100 : 0, O = f(() => i?.map((e, t) => {
-		if (!r || !n) return null;
-		let i = a.filter((t) => e.startByteOffset <= t.pos && t.pos <= e.endByteOffset), o = i.at(0), s = i.at(-1);
-		if (!o || !s) return null;
-		let c = o.timestamp / n, l = s.timestamp / n, u = Number((l - c).toFixed(2)), d = c * 100;
+		if (!l.current) return;
+		let { left: t, right: n } = l.current.getBoundingClientRect();
+		return Math.min(Math.max((e - t) / (n - t), 0), 1) * r;
+	}, E = (e) => {
+		_(T(e.clientX));
+	}, D = () => {
+		l.current && _(void 0);
+	}, O = (e) => r ? e / r * 100 : 0, k = 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;
+		let c = a.timestamp / r, l = s.timestamp / r, u = Number((l - c).toFixed(2)), d = c * 100;
 		return /* @__PURE__ */ C("div", {
 			className: "loaded-part",
 			style: {
@@ -672,76 +691,77 @@ var ae = {
 			}
 		}, t);
 	}) ?? [], [
-		n,
-		a.length,
-		i?.map(({ startByteOffset: e, endByteOffset: t }) => `${e}/${t}`).join(",")
-	]), k = f(() => {
-		if (!h || h < 0) return;
-		let e = Math.floor(h / 3600), t = Math.floor((h - e * 3600) / 60), n = Math.floor(h - e * 3600 - t * 60);
+		r,
+		o.length,
+		a?.map(({ startByteOffset: e, endByteOffset: t }) => `${e}/${t}`).join(",")
+	]), A = 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);
 		return `${e > 0 ? `${e}:` : ""}${t < 10 ? "0" : ""}${t}:${n < 10 ? "0" : ""}${n}`;
-	}, [h]);
+	}, [g]);
 	d(() => {
-		if (l === void 0 || !n) return;
-		let t = l * n;
-		e.seek(t);
+		if (u === void 0 || !r) return;
+		let t = u * r;
+		n ? n(t) : e.seek(t);
 	}, [
 		e,
-		l,
-		n
+		n,
+		u,
+		r
 	]);
-	let A = f(() => !n || typeof t != "number" ? 0 : t / n, [n, t]), j = f(() => {
-		if (h) {
-			if (s) return s(h);
-			if (o.length) return o.find(({ startTime: e, endTime: t }) => e <= h && h < t);
+	let j = f(() => !r || typeof t != "number" ? 0 : t / r, [r, t]), M = f(() => {
+		if (g) {
+			if (c) return c(g);
+			if (s.length) return s.find(({ startTime: e, endTime: t }) => e <= g && g < t);
 		}
 	}, [
-		o,
 		s,
-		h
+		c,
+		g
 	]);
 	return /* @__PURE__ */ w("div", {
-		css: we,
-		ref: c,
-		className: v ? "progress-bar dragging" : "progress-bar",
-		onMouseMove: T,
-		onMouseOut: E,
+		css: Ee,
+		ref: l,
+		className: y ? "progress-bar dragging" : "progress-bar",
+		onMouseMove: E,
+		onMouseOut: D,
 		children: [
 			/* @__PURE__ */ C("div", { className: "background-bar" }),
-			h ? /* @__PURE__ */ C("div", {
+			g ? /* @__PURE__ */ C("div", {
 				className: "cursor-time",
-				style: { left: `clamp(calc(3 * var(--mp-unit)), ${D(h)}%, calc(100% - calc(3 * var(--mp-unit))))` },
-				children: k
+				style: { left: `clamp(calc(3 * var(--mp-unit)), ${O(g)}%, calc(100% - calc(3 * var(--mp-unit))))` },
+				children: A
 			}) : void 0,
 			/* @__PURE__ */ C("div", { className: "progress" }),
 			/* @__PURE__ */ C("div", {
 				className: "loaded",
-				children: O
+				children: k
 			}),
 			/* @__PURE__ */ C("div", { className: "hover" }),
 			/* @__PURE__ */ C("div", {
 				className: "play-container",
 				children: /* @__PURE__ */ C("div", {
 					className: "play",
-					style: { transform: `scaleX(${A})` }
+					style: { transform: `scaleX(${j})` }
 				})
 			}),
 			/* @__PURE__ */ C("div", { className: "chapters" }),
 			/* @__PURE__ */ C("div", { className: "scrubber" }),
 			/* @__PURE__ */ C("div", {
 				className: "padding",
-				...y,
-				onPointerDown: b,
-				onPointerUp: x,
-				onPointerCancel: x
+				...b,
+				onPointerDown: x,
+				onPointerUp: S,
+				onPointerCancel: S
 			}),
 			/* @__PURE__ */ C("div", {
 				className: "thumbnail",
-				style: { left: `clamp(var(--thumbnail-half), ${D(h ?? 1)}%, calc(100% - var(--thumbnail-half)))` },
-				children: j?.url ? /* @__PURE__ */ C("img", { src: j.url }) : void 0
+				style: { left: `clamp(var(--thumbnail-half), ${O(g ?? 1)}%, calc(100% - var(--thumbnail-half)))` },
+				children: M?.url ? /* @__PURE__ */ C("img", { src: M.url }) : void 0
 			})
 		]
 	});
-}, Ee = "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 = {
+}, Oe = "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 = {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: 24,
 	height: 24,
@@ -751,7 +771,7 @@ var ae = {
 	strokeWidth: 2,
 	strokeLinecap: "round",
 	strokeLinejoin: "round"
-}, De = (e) => /* @__PURE__ */ w("svg", {
+}, ke = (e) => /* @__PURE__ */ w("svg", {
 	...Y,
 	...e,
 	children: [/* @__PURE__ */ C("rect", {
@@ -762,7 +782,7 @@ var ae = {
 		rx: "2",
 		ry: "2"
 	}), /* @__PURE__ */ C("path", { d: "M7 15h4m4 0h2M7 11h2m4 0h4" })]
-}), Oe = (e) => /* @__PURE__ */ w("svg", {
+}), Ae = (e) => /* @__PURE__ */ w("svg", {
 	...Y,
 	...e,
 	children: [
@@ -782,7 +802,7 @@ var ae = {
 			y2: "22"
 		})
 	]
-}), ke = (e) => /* @__PURE__ */ w("svg", {
+}), je = (e) => /* @__PURE__ */ w("svg", {
 	...Y,
 	...e,
 	children: [
@@ -836,7 +856,7 @@ var ae = {
 
   border-radius: 8px;
   background-color: rgba(28,28,28,0.95);
-  ${V.bMedium.regular}
+  ${U.bMedium.regular}
 
   z-index: 4;
 
@@ -879,7 +899,7 @@ var ae = {
 
       .secondary {
         color: #eee;
-        ${V.bSmall.regular}
+        ${U.bSmall.regular}
       }
     }
   }
@@ -921,10 +941,10 @@ var ae = {
   .failed {
     border-bottom: 1px solid #4D4D4E;
     color: #f66;
-    ${V.bSmall.regular}
+    ${U.bSmall.regular}
   }
 }
-`, Ae = ({ title: e, tracks: t, selected: n, onSelect: r, onBack: i, offLabel: a, pending: o, failed: s }) => {
+`, Me = ({ 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", {
@@ -992,7 +1012,7 @@ var ae = {
 			});
 		}
 	};
-}, je = h`
+}, Ne = h`
 /* Not a containing block, for the reason given on popoverStyle: the menu anchors to the control bar,
    which is the width of the player box, so it can be clamped to it. */
 position: static;
@@ -1036,7 +1056,7 @@ ${X}
 
     color: #fff;
     cursor: pointer;
-    ${V.bSmall.regular}
+    ${U.bSmall.regular}
 
     &:hover {
       background-color: rgba(255,255,255,.1);
@@ -1057,7 +1077,7 @@ ${X}
 
     .when {
       color: #bbb;
-      ${V.bSmall.regular}
+      ${U.bSmall.regular}
 
       /* the one part of the line worth scanning for, so it is the one part at full brightness */
       .count {
@@ -1076,27 +1096,27 @@ ${X}
       color: #ddd;
       overflow-wrap: anywhere;
       white-space: pre-wrap;
-      ${V.bSmall.regular}
+      ${U.bSmall.regular}
     }
   }
 }
-`, Me = (e) => new Date(e).toLocaleTimeString(), Q = (e) => e === void 0 || !Number.isFinite(e) ? void 0 : K(Math.max(0, e)), Ne = (e) => e.reduce((e, t) => e + t.count, 0), Pe = (e) => e.map((e, t) => {
+`, Pe = (e) => new Date(e).toLocaleTimeString(), Q = (e) => e === void 0 || !Number.isFinite(e) ? void 0 : K(Math.max(0, e)), Fe = (e) => e.reduce((e, t) => e + t.count, 0), Ie = (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]" : ""}`,
 		e.message,
 		e.detail
 	].filter(Boolean).join("\n");
-}).join("\n\n"), Fe = () => {
-	let e = L((e) => e.playbackErrors), { open: t, toggle: n, containerRef: r } = Z(), [i, a] = m(!1);
+}).join("\n\n"), Le = () => {
+	let e = z((e) => e.playbackErrors), { open: t, toggle: n, containerRef: r } = Z(), [i, a] = m(!1);
 	if (e.length === 0) return null;
 	let o = () => {
-		navigator.clipboard?.writeText(Pe(e)).then(() => {
+		navigator.clipboard?.writeText(Ie(e)).then(() => {
 			a(!0), setTimeout(() => a(!1), 2e3);
 		}, (e) => console.warn("[media-player] could not copy the errors:", e));
-	}, s = `Playback errors (${Ne(e)})`;
+	}, s = `Playback errors (${Fe(e)})`;
 	return /* @__PURE__ */ w("div", {
-		css: je,
+		css: Ne,
 		ref: r,
 		children: [/* @__PURE__ */ C(q, {
 			id: "errors",
@@ -1127,8 +1147,8 @@ ${X}
 					/* @__PURE__ */ w("span", {
 						className: "when",
 						children: [
-							Me(e.at),
-							e.count > 1 ? ` to ${Me(e.lastAt)}` : "",
+							Pe(e.at),
+							e.count > 1 ? ` to ${Pe(e.lastAt)}` : "",
 							Q(e.atMediaTime) ? ` at ${Q(e.atMediaTime)}` : "",
 							e.recovered ? " recovered" : "",
 							e.count > 1 ? /* @__PURE__ */ C("span", {
@@ -1149,7 +1169,7 @@ ${X}
 			}, `${e.at}-${t}`))]
 		})]
 	});
-}, Ie = h`
+}, Re = h`
 display: flex;
 align-items: center;
 justify-content: center;
@@ -1202,8 +1222,8 @@ width: 100%;
     }
   }
 }
-`, Le = () => {
-	let e = L(), t = L((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({
+`, ze = () => {
+	let e = z(), t = z((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({
 		ref: r,
 		onChange: (t) => e.setPlaybackRate(l(t))
 	}), f = (t) => {
@@ -1219,7 +1239,7 @@ width: 100%;
 	}, [t]);
 	let m = c(s);
 	return /* @__PURE__ */ w("div", {
-		css: Ie,
+		css: Re,
 		children: [/* @__PURE__ */ w("div", { children: [s.toFixed(2), "x"] }), /* @__PURE__ */ C("div", {
 			className: "playback-slider",
 			ref: n,
@@ -1237,7 +1257,7 @@ width: 100%;
 			})
 		})]
 	});
-}, Re = h`
+}, Be = h`
 /* Deliberately NOT a containing block. The menu anchors to the control bar instead, which is exactly
    as wide as the player box and can therefore be clamped to it. The outside-click check uses
    \`contains\` on the ref, which is DOM containment and needs no position, and the bar's other
@@ -1296,8 +1316,8 @@ ${X}
   }
 }
 
-`, ze = () => {
-	let e = L(), t = L((e) => e.playbackRate), n = L((e) => e.audioTracks), r = L((e) => e.selectedAudioTrack), i = L((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) => {
+`, Ve = () => {
+	let e = z(), t = z((e) => e.playbackRate), n = z((e) => e.audioTracks), r = z((e) => e.selectedAudioTrack), i = z((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) => {
 		e.setPlaybackRate(t), o(0);
 	}, h = (e) => {
 		e !== void 0 && f(e, () => i(e));
@@ -1305,7 +1325,7 @@ ${X}
 		o(e);
 	};
 	return /* @__PURE__ */ w("div", {
-		css: Re,
+		css: Be,
 		ref: l,
 		children: [
 			/* @__PURE__ */ C(q, {
@@ -1317,7 +1337,7 @@ ${X}
 					onClick: c,
 					"aria-label": "Settings",
 					"aria-expanded": s,
-					children: /* @__PURE__ */ C(ee, {})
+					children: /* @__PURE__ */ C(F, {})
 				}),
 				toolTipText: /* @__PURE__ */ C("span", { children: "Settings" })
 			}),
@@ -1344,7 +1364,7 @@ ${X}
 					}),
 					/* @__PURE__ */ C("div", {
 						className: "slider no-hover",
-						children: /* @__PURE__ */ C(Le, {})
+						children: /* @__PURE__ */ C(ze, {})
 					}),
 					/* @__PURE__ */ w("div", {
 						className: "options no-hover",
@@ -1369,7 +1389,7 @@ ${X}
 					})
 				]
 			}),
-			s && a === 2 && /* @__PURE__ */ C(Ae, {
+			s && a === 2 && /* @__PURE__ */ C(Me, {
 				title: "Audio",
 				tracks: n,
 				selected: r,
@@ -1380,7 +1400,7 @@ ${X}
 			})
 		]
 	});
-}, Be = h`
+}, He = h`
 /* Not a containing block, for the reason given on popoverStyle: the menu anchors to the control bar,
    which is the width of the player box, so it can be clamped to it. */
 position: static;
@@ -1397,12 +1417,12 @@ position: static;
 }
 
 ${X}
-`, Ve = () => {
-	let e = L((e) => e.subtitleTracks), t = L((e) => e.selectedSubtitleTrack), n = L((e) => e.selectSubtitleTrack), r = L((e) => e.subtitleOffLabel), { open: i, toggle: a, containerRef: o, pending: s, failed: c, runSelect: l } = Z();
+`, Ue = () => {
+	let e = z((e) => e.subtitleTracks), t = z((e) => e.selectedSubtitleTrack), n = z((e) => e.selectSubtitleTrack), r = z((e) => e.subtitleOffLabel), { open: i, toggle: a, containerRef: o, pending: s, failed: c, runSelect: l } = Z();
 	if (e.length === 0) return null;
 	let u = t !== void 0;
 	return /* @__PURE__ */ w("div", {
-		css: Be,
+		css: He,
 		ref: o,
 		children: [/* @__PURE__ */ C(q, {
 			id: "subtitles",
@@ -1414,10 +1434,10 @@ ${X}
 				"aria-label": "Subtitles",
 				"aria-expanded": i,
 				"aria-pressed": u,
-				children: u ? /* @__PURE__ */ C(De, { className: "captions" }) : /* @__PURE__ */ C(Oe, { className: "captions-off" })
+				children: u ? /* @__PURE__ */ C(ke, { className: "captions" }) : /* @__PURE__ */ C(Ae, { className: "captions-off" })
 			}),
 			toolTipText: /* @__PURE__ */ C("span", { children: "Subtitles" })
-		}), i && /* @__PURE__ */ C(Ae, {
+		}), i && /* @__PURE__ */ C(Me, {
 			title: "Subtitles",
 			tracks: e,
 			selected: t,
@@ -1427,14 +1447,14 @@ ${X}
 			failed: c
 		})]
 	});
-}, He = {
+}, We = {
 	primary: "#EAEBEE",
 	secondary: "#D0D0D9",
 	hover: "rgba(255, 255, 255, 0.13)",
 	accent: "#6EA8FE",
 	borderPrimary: "#384F70",
 	backgroundTooltip: "#222222"
-}, Ue = h`
+}, Ge = h`
   display: flex;
   align-items: center;
 
@@ -1477,8 +1497,8 @@ ${X}
     width: 10px;
     height: 10px;
   }
-`, We = ({ value: e, onChange: t }) => {
-	let n = L((e) => e.volume), r = L((e) => e.muted), i = p(null), a = p(null), { handlers: o } = J({
+`, Ke = ({ value: e, onChange: t }) => {
+	let n = z((e) => e.volume), r = z((e) => e.muted), i = p(null), a = p(null), { handlers: o } = J({
 		ref: a,
 		onChange: t
 	}), s = (n) => {
@@ -1497,7 +1517,7 @@ ${X}
 		id: "volume-slider",
 		text: /* @__PURE__ */ C("div", {
 			ref: i,
-			css: Ue,
+			css: Ge,
 			...o,
 			children: /* @__PURE__ */ C("div", {
 				ref: a,
@@ -1516,7 +1536,7 @@ ${X}
 			children: [l, "%"]
 		})
 	});
-}, Ge = h`
+}, qe = h`
   position: relative;
   display: flex;
   align-items: center;
@@ -1541,7 +1561,7 @@ ${X}
       border-radius: 4px;
 
       .volume-value {
-        ${V.bMedium.regular};
+        ${U.bMedium.regular};
         color: #ffffff;
       }
     }
@@ -1579,10 +1599,10 @@ ${X}
     }
   }
 
-`, Ke = ({ ref: e }) => {
-	let t = L(), n = L((e) => e.volume), r = L((e) => e.muted), i = f(() => G(n), [n]);
+`, Je = ({ ref: e }) => {
+	let t = z(), n = z((e) => e.volume), r = z((e) => e.muted), i = f(() => G(n), [n]);
 	return /* @__PURE__ */ w("div", {
-		css: Ge,
+		css: qe,
 		children: [/* @__PURE__ */ C(q, {
 			id: "sound",
 			text: /* @__PURE__ */ C("button", {
@@ -1592,7 +1612,7 @@ ${X}
 				ref: e,
 				"aria-label": "Mute",
 				"aria-pressed": r || n === 0,
-				children: C(r || n === 0 ? re : n <= .5 ? te : ne, {
+				children: C(r || n === 0 ? ee : n <= .5 ? I : L, {
 					size: 18,
 					color: "#fff"
 				})
@@ -1602,16 +1622,16 @@ ${X}
 			className: "volume-slider-container",
 			children: /* @__PURE__ */ C("div", {
 				className: "volume-slider-background",
-				children: /* @__PURE__ */ C(We, {
+				children: /* @__PURE__ */ C(Ke, {
 					value: r ? 0 : i,
 					onChange: (e) => {
-						t.setVolume(W(e));
+						t.setVolume(Ce(e));
 					}
 				})
 			})
 		})]
 	});
-}, $ = .05, qe = 5, Je = h`
+}, $ = .05, Ye = 5, Xe = h`
   display: flex;
   flex-direction: column;
   gap: calc(0.4 * var(--mp-unit));
@@ -1622,7 +1642,7 @@ ${X}
     opacity: 0.72;
     font-size: 0.9em;
   }
-`, Ye = h`
+`, Ze = h`
   position: absolute;
   bottom: 0;
   width: 100%;
@@ -1687,7 +1707,7 @@ ${X}
        * drawn in the hover colour is invisible exactly when it is being looked for.
        */
       button[aria-pressed='true'] svg {
-        stroke: ${He.accent};
+        stroke: ${We.accent};
       }
 
       .play, .sound, .time, .errors, .subtitles, .settings, .picture-in-picture, .full-screen {
@@ -1722,7 +1742,7 @@ ${X}
         cursor: pointer;
 
         :hover {
-          background-color: ${He.hover};
+          background-color: ${We.hover};
         }
 
         /* the hit area grows, the icon does not, keyed on the pointer because a narrow desktop
@@ -1739,7 +1759,7 @@ ${X}
 
     .left {
       .time {
-        ${V.bMedium.regular}
+        ${U.bMedium.regular}
         text-shadow: 0 0 4px rgba(0, 0, 0, 1);
       }
     }
@@ -1760,54 +1780,58 @@ ${X}
       }
     }
   }
-`, Xe = () => {
-	let e = L(), t = L((e) => e.paused), n = L((e) => e.currentTime), r = L((e) => e.duration), i = L((e) => e.fullscreen), a = L((e) => e.hideUI), o = L((e) => e.togglePictureInPicture), s = L((e) => e.pictureInPictureMode), c = L((e) => e.burnedInSubtitles), l = L((e) => e.subtitleTracks), [f, p] = m(null), h = s === "burn-in", g = l.length > 0, _ = r > 0 && n === r, v = u(({ direction: t, stepSize: n }) => {
+`, Qe = () => {
+	let e = z(), t = z((e) => e.paused), n = z((e) => e.currentTime), r = z((e) => e.duration), i = z((e) => e.fullscreen), a = z((e) => e.hideUI), o = z((e) => e.togglePictureInPicture), s = z((e) => e.pictureInPictureMode), c = z((e) => e.burnedInSubtitles), l = z((e) => e.subtitleTracks), f = z((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(W(a)), o && !e.muted && e.toggleMuted();
+		e.setVolume(Ce(a)), o && !e.muted && e.toggleMuted();
 	}, [e]);
 	d(() => {
-		let t = (t) => {
-			let n = t.target;
-			if (n?.isContentEditable || /^(input|textarea|select)$/i.test(n?.tagName ?? "")) return;
-			let r = !0;
-			if (t.key === "f") e.toggleFullscreen();
-			else if (t.key === "k") e.togglePaused();
-			else if (t.key === " ") e.togglePaused();
-			else if (t.key === "m") e.toggleMuted();
-			else if (t.key === "ArrowUp") v({
+		let t = (t) => f ? f(t) : e.seek(t), n = (n) => {
+			let r = n.target;
+			if (r?.isContentEditable || /^(input|textarea|select)$/i.test(r?.tagName ?? "")) return;
+			let i = !0;
+			if (n.key === "f") e.toggleFullscreen();
+			else if (n.key === "k") e.togglePaused();
+			else if (n.key === " ") e.togglePaused();
+			else if (n.key === "m") e.toggleMuted();
+			else if (n.key === "ArrowUp") y({
 				direction: "up",
 				stepSize: $
 			});
-			else if (t.key === "ArrowDown") v({
+			else if (n.key === "ArrowDown") y({
 				direction: "down",
 				stepSize: $
 			});
-			else if (t.key === "ArrowRight") {
+			else if (n.key === "ArrowRight") {
 				if (!e.duration) return;
-				e.seek(Math.min(e.currentTime + qe, e.duration));
-			} else t.key === "ArrowLeft" ? e.seek(Math.max(e.currentTime - qe, 0)) : r = !1;
-			r && t.preventDefault();
+				t(Math.min(e.currentTime + Ye, e.duration));
+			} else n.key === "ArrowLeft" ? t(Math.max(e.currentTime - Ye, 0)) : i = !1;
+			i && n.preventDefault();
 		};
-		return window.addEventListener("keydown", t), () => window.removeEventListener("keydown", t);
-	}, [e, v]);
-	let y = u((e) => {
-		e.preventDefault(), e.deltaY < 0 ? v({
+		return window.addEventListener("keydown", n), () => window.removeEventListener("keydown", n);
+	}, [
+		e,
+		y,
+		f
+	]);
+	let b = u((e) => {
+		e.preventDefault(), e.deltaY < 0 ? y({
 			direction: "up",
 			stepSize: $
-		}) : v({
+		}) : y({
 			direction: "down",
 			stepSize: $
 		});
-	}, [v]);
+	}, [y]);
 	return d(() => {
-		if (f) return f.addEventListener("wheel", y, { passive: !1 }), () => f.removeEventListener("wheel", y);
-	}, [f, y]), /* @__PURE__ */ w("div", {
-		css: Ye,
+		if (p) return p.addEventListener("wheel", b, { passive: !1 }), () => p.removeEventListener("wheel", b);
+	}, [p, b]), /* @__PURE__ */ w("div", {
+		css: Ze,
 		style: { ...a ? {
 			opacity: "0",
 			pointerEvents: "none"
 		} : {} },
-		children: [/* @__PURE__ */ C(Te, {}), /* @__PURE__ */ w("div", {
+		children: [/* @__PURE__ */ C(De, {}), /* @__PURE__ */ w("div", {
 			className: "actions",
 			children: [/* @__PURE__ */ w("div", {
 				className: "left",
@@ -1819,23 +1843,23 @@ ${X}
 							className: "play",
 							type: "button",
 							onClick: () => e.togglePaused(),
-							"aria-label": _ ? "Replay" : t ? "Play" : "Pause",
-							children: C(_ ? P : t ? N : M, {})
+							"aria-label": v ? "Replay" : t ? "Play" : "Pause",
+							children: C(v ? P : t ? N : M, {})
 						}),
-						toolTipText: /* @__PURE__ */ C("span", { children: _ ? "Replay (k)" : t ? "Play (k)" : "Pause (k)" })
+						toolTipText: /* @__PURE__ */ C("span", { children: v ? "Replay (k)" : t ? "Play (k)" : "Pause (k)" })
 					}),
-					/* @__PURE__ */ C(Ke, { ref: p }),
+					/* @__PURE__ */ C(Je, { ref: h }),
 					/* @__PURE__ */ C("div", {
 						className: "time",
-						children: Se(n, r)
+						children: we(n, r)
 					})
 				]
 			}), /* @__PURE__ */ w("div", {
 				className: "right",
 				children: [
-					/* @__PURE__ */ C(Fe, {}),
+					/* @__PURE__ */ C(Le, {}),
+					/* @__PURE__ */ C(Ue, {}),
 					/* @__PURE__ */ C(Ve, {}),
-					/* @__PURE__ */ C(ze, {}),
 					o ? /* @__PURE__ */ C(q, {
 						id: "picture-in-picture",
 						tooltipPlace: "top-end",
@@ -1843,20 +1867,20 @@ ${X}
 							className: "picture-in-picture",
 							type: "button",
 							onClick: o,
-							disabled: h && !g,
-							"aria-label": h ? "Put the subtitles in the video" : "Picture in picture",
-							"aria-pressed": h ? c : void 0,
-							children: h ? /* @__PURE__ */ C(ke, {}) : /* @__PURE__ */ C("img", {
-								src: Ee,
+							disabled: g && !_,
+							"aria-label": g ? "Put the subtitles in the video" : "Picture in picture",
+							"aria-pressed": g ? c : void 0,
+							children: g ? /* @__PURE__ */ C(je, {}) : /* @__PURE__ */ C("img", {
+								src: Oe,
 								alt: ""
 							})
 						}),
 						toolTipText: /* @__PURE__ */ w("span", {
-							css: Je,
+							css: Xe,
 							children: [/* @__PURE__ */ C("span", {
 								className: "lead",
-								children: h ? g ? c ? "Subtitles are in the picture" : "Put the subtitles in the picture" : "This file has no subtitles" : "Picture in picture"
-							}), h && g ? /* @__PURE__ */ C("span", {
+								children: g ? _ ? c ? "Subtitles are in the picture" : "Put the subtitles in the picture" : "This file has no subtitles" : "Picture in picture"
+							}), g && _ ? /* @__PURE__ */ C("span", {
 								className: "hint",
 								children: "Then hover the video and click your browser's own pop out button"
 							}) : null]
@@ -1879,7 +1903,7 @@ ${X}
 			})]
 		})]
 	});
-}, Ze = 9e3, Qe = h`
+}, $e = 9e3, et = h`
   position: absolute;
   inset: 0;
   z-index: 2;
@@ -1917,12 +1941,12 @@ ${X}
   }
 
   .title {
-    ${V.bMedium.bold}
+    ${U.bMedium.bold}
     color: #fff;
   }
 
   .body {
-    ${V.bSmall.regular}
+    ${U.bSmall.regular}
     color: rgba(255, 255, 255, 0.75);
   }
 
@@ -1933,18 +1957,18 @@ ${X}
     line-height: 1;
     color: #6EA8FE;
   }
-`, $e = () => {
-	let e = L((e) => e.burnedInSubtitles), t = L((e) => e.pictureInPictureMode), [n, r] = m(!1);
+`, tt = () => {
+	let e = z((e) => e.burnedInSubtitles), t = z((e) => e.pictureInPictureMode), [n, r] = m(!1);
 	return d(() => {
 		if (t !== "burn-in" || !e) {
 			r(!1);
 			return;
 		}
 		r(!0);
-		let n = setTimeout(() => r(!1), Ze);
+		let n = setTimeout(() => r(!1), $e);
 		return () => clearTimeout(n);
 	}, [t, e]), t !== "burn-in" || !e ? null : /* @__PURE__ */ C("div", {
-		css: Qe,
+		css: et,
 		className: n ? "show" : "",
 		role: "status",
 		children: /* @__PURE__ */ w("div", {
@@ -1965,7 +1989,7 @@ ${X}
 			})]
 		})
 	});
-}, et = 3e3, tt = h`
+}, nt = 3e3, rt = h`
   position: absolute;
   inset: 0;
   z-index: 2;
@@ -1976,7 +2000,7 @@ ${X}
      hoverable while faded out, popping a tooltip over nothing. It cascades where pointer-events does
      not, and transitioning it holds the item on screen for the length of the fade. */
   transition: opacity 0.1s cubic-bezier(.4,0,1,1), visibility 0.1s;
-`, nt = h`
+`, it = h`
   position: relative;
   background-color: black;
   display: flex;
@@ -2008,20 +2032,20 @@ ${X}
   &.hide {
     cursor: none;
   }
-`, rt = (e, t = "") => s.toArray(e).flatMap((e, n) => {
+`, at = (e, t = "") => s.toArray(e).flatMap((e, n) => {
 	let r = `${t}${l(e) && e.key != null ? e.key : n}`;
-	return l(e) && e.type === c ? rt(e.props.children, `${r}/`) : [{
+	return l(e) && e.type === c ? at(e.props.children, `${r}/`) : [{
 		key: r,
 		item: e
 	}];
-}), it = ({ ref: e, onVideoRef: t, onCanvasRef: n, overlay: r, controls: i, children: a }) => {
-	let o = L(), s = L((e) => e.hideUI), c = L((e) => e.setHideUI), l = p(void 0), u = p("mouse");
+}), ot = ({ ref: e, onVideoRef: t, onCanvasRef: n, overlay: r, controls: i, children: a }) => {
+	let o = z(), s = z((e) => e.hideUI), c = z((e) => e.setHideUI), l = p(void 0), u = p("mouse");
 	d(() => () => clearTimeout(l.current), []);
 	let f = () => {
-		c(!1), clearTimeout(l.current), l.current = setTimeout(() => c(!0), et);
+		c(!1), clearTimeout(l.current), l.current = setTimeout(() => c(!0), nt);
 	};
 	return /* @__PURE__ */ w("div", {
-		css: nt,
+		css: it,
 		ref: e,
 		onPointerMove: (e) => {
 			u.current = e.pointerType, e.pointerType === "mouse" && f();
@@ -2038,8 +2062,8 @@ ${X}
 		className: s ? "hide" : "",
 		children: [
 			/* @__PURE__ */ C(xe, { onCanvasRef: n }),
-			rt(r).map(({ key: e, item: t }) => /* @__PURE__ */ C("div", {
-				css: tt,
+			at(r).map(({ key: e, item: t }) => /* @__PURE__ */ C("div", {
+				css: rt,
 				style: { ...s ? {
 					opacity: "0",
 					visibility: "hidden",
@@ -2047,8 +2071,8 @@ ${X}
 				} : {} },
 				children: t
 			}, e)),
-			i === !1 ? null : /* @__PURE__ */ C(Xe, {}),
-			/* @__PURE__ */ C($e, {}),
+			i === !1 ? null : /* @__PURE__ */ C(Qe, {}),
+			/* @__PURE__ */ C(tt, {}),
 			/* @__PURE__ */ w("div", {
 				className: "video",
 				onClick: () => {
@@ -2065,16 +2089,16 @@ ${X}
 			})
 		]
 	});
-}, at = ({ options: e, children: t }) => {
+}, st = ({ options: e, children: t }) => {
 	let n = "media" in e ? e : null, r = n ? null : e, { title: i } = e, { size: a, downloadedRanges: o, publicPath: s, libavWorkerUrl: c, read: l, thumbnailRead: u, thumbnailsEnabled: f } = r ?? {}, p = y(), h = v(), [g, _] = m(null), [b, x] = m(null), S = n?.media ?? g;
-	d(() => (p?.(S), () => p?.(null)), [S, p]), pe(g, b, r);
-	let w = z({
+	d(() => (p?.(S), () => p?.(null)), [S, p]), de(g, b, r);
+	let w = me({
 		publicPath: s,
 		workerUrl: c,
 		length: f === !1 ? void 0 : a,
 		read: u ?? l,
 		downloadedRanges: o
-	}), T = n?.thumbnails?.all ?? w, { toggle: E, mode: D, burnedIn: O } = B(g, b), k = L((e) => e.setSourceState);
+	}), T = n?.thumbnails?.all ?? w, { toggle: E, mode: D, burnedIn: O } = he(g, b), k = z((e) => e.setSourceState);
 	d(() => {
 		k({
 			title: i,
@@ -2126,7 +2150,7 @@ ${X}
 			selectedAudioTrack: M.selectedId ?? void 0,
 			selectAudioTrack: (e) => M.select(String(e))
 		});
-	}, [k, M]), /* @__PURE__ */ C(it, {
+	}, [k, M]), /* @__PURE__ */ C(ot, {
 		ref: h,
 		onVideoRef: n ? void 0 : _,
 		onCanvasRef: x,
@@ -2134,7 +2158,7 @@ ${X}
 		controls: e.controls,
 		children: t
 	});
-}, ot = h`
+}, ct = h`
   /**
    * The chrome's whole scale, in one place.
    *
@@ -2204,17 +2228,17 @@ ${X}
   height: 100%;
   width: 100%;
   overflow: hidden;
-`, st = (e) => /* @__PURE__ */ C("div", {
-	css: ot,
-	children: /* @__PURE__ */ C(I.Provider, { children: /* @__PURE__ */ C(at, {
+`, lt = (e) => /* @__PURE__ */ C("div", {
+	css: ct,
+	children: /* @__PURE__ */ C(R.Provider, { children: /* @__PURE__ */ C(st, {
 		options: e,
 		children: e.children
 	}) })
-}), ct = (e) => !!e && typeof e == "object" && "at" in e, lt = (e) => !!e && typeof e == "object" && "selection" in e, ut = ({ blob: e, name: t }) => ({
+}), ut = (e) => !!e && typeof e == "object" && "at" in e, dt = (e) => !!e && typeof e == "object" && "selection" in e, ft = ({ blob: e, name: t }) => ({
 	length: e.size,
 	name: t ?? (e instanceof File ? e.name : void 0),
 	read: (t, n) => e.slice(t, t + n).arrayBuffer()
-}), dt = async (e, t) => {
+}), pt = async (e, t) => {
 	let n = await fetch(e, {
 		headers: { Range: "bytes=0-1" },
 		credentials: t
@@ -2224,8 +2248,8 @@ ${X}
 	if (!Number.isFinite(i) || i <= 0) throw Error("The source did not report its length");
 	if (!r && n.status !== 206) throw Error("The source does not support range requests");
 	return i;
-}, ft = async ({ url: e, length: t, name: n, credentials: r }) => {
-	let i = t ?? await dt(e, r);
+}, mt = async ({ url: e, length: t, name: n, credentials: r }) => {
+	let i = t ?? await pt(e, r);
 	return {
 		length: i,
 		name: n,
@@ -2238,9 +2262,9 @@ ${X}
 			return a.arrayBuffer();
 		}
 	};
-}, pt = async (e) => {
-	if ("blob" in e) return ut(e);
-	if ("url" in e) return ft(e);
+}, ht = async (e) => {
+	if ("blob" in e) return ft(e);
+	if ("url" in e) return mt(e);
 	if ("read" in e) return {
 		length: e.length,
 		name: e.name,
@@ -2249,4 +2273,4 @@ ${X}
 	throw Error(`Unknown source type: ${e}`);
 };
 //#endregion
-export { st as MediaPlayer, st as default, I as Player, e as SUBTITLES_OFF, a as createPictureInPicture, o as createSubtitleRenderer, r as createThumbnailGenerator, pt as inputToRemuxerInput, lt as isDelegatedTracks, ct as isExternalThumbnails, F as sourceFeature, i as startPlayback, B as usePictureInPicture, L as usePlayer, z as useSeekThumbnails };
+export { lt as MediaPlayer, lt as default, R as Player, e as SUBTITLES_OFF, a as createPictureInPicture, o as createSubtitleRenderer, r as createThumbnailGenerator, ht as inputToRemuxerInput, dt as isDelegatedTracks, ut as isExternalThumbnails, re as sourceFeature, i as startPlayback, he as usePictureInPicture, z as usePlayer, me as useSeekThumbnails };