@banou/media-player 0.8.13 → 0.8.16

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-BUcS6UrE.js";
+import { l as e, n as t, o as n, r, s as i, t as a, u as o } from "./engine-DPnChmYc.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 F, Volume1 as I, Volume2 as L, VolumeX as ee } from "react-feather";
-import { Tooltip as te } 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 ee, VolumeX as te } from "react-feather";
+import { Tooltip as ne } from "react-tooltip";
 //#region src/lib/react/source-feature.ts
-var ne = {
+var re = {
 	indexes: [],
 	thumbnails: [],
 	subtitleTracks: [],
@@ -25,19 +25,19 @@ var ne = {
 	playbackErrors: [],
 	ready: !1,
 	setSourceState: () => {}
-}, re = b({
+}, ie = b({
 	name: "source",
-	state: () => ({ ...ne }),
+	state: () => ({ ...re }),
 	attach({ set: e }) {
 		e({
 			setSourceState: (t) => e(t),
 			setHideUI: (t) => e({ hideUI: t })
 		});
 	}
-}), R = _({
-	features: [...x, re],
+}), L = _({
+	features: [...x, ie],
 	displayName: "MediaPlayer"
-}), z = R.usePlayer, ie = (e) => {
+}), R = L.usePlayer, ae = (e) => {
 	if (!(!e || e === "und")) try {
 		return new Intl.DisplayNames([navigator.language || "en"], {
 			type: "language",
@@ -46,39 +46,39 @@ var ne = {
 	} catch {
 		return;
 	}
-}, 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) => ({
+}, oe = (e) => e?.replace(/_/g, " ").trim() || void 0, se = (e) => {
+	let t = e.map((e) => ae(e.language) ?? oe(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 = B(e.title);
+		let i = t[r], a = oe(e.title);
 		return {
 			track: e,
 			label: (n[i] ?? 0) > 1 && a && a !== i ? `${i} (${a})` : i
 		};
 	});
-}, V = (e) => ae(e).map(({ track: e, label: t }) => ({
+}, ce = (e) => se(e).map(({ track: e, label: t }) => ({
 	id: e.streamIndex,
 	label: t
-})), H = [
+})), le = [
 	0,
 	250,
 	1e3,
 	3e3,
 	1e4
-], oe = 6e4, se = 500, ce = 250, le = (e) => e instanceof Error ? e.message : String(e), ue = (e) => {
+], ue = 6e4, de = 500, z = (e) => e instanceof Error ? e.message : String(e), fe = (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(z(n)), n = n?.cause;
 	}
 	return t.length ? t.join("\n") : void 0;
-}, 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({
+}, pe = (e, t, r) => {
+	let a = R(), { read: o, size: s, publicPath: c = "", libavWorkerUrl: l = "", jassubWorkerUrl: f = "", jassubWasmUrl: h = "", jassubLegacyWasmUrl: g, defaultFontUrl: _, bufferSize: v, autoplay: y = !1, seekPrepareBudgetMs: b = de } = r ?? {}, [x, S] = m(void 0), [C, w] = m(0), T = p({
 		count: 0,
 		at: 0
 	}), E = p(void 0);
@@ -88,46 +88,47 @@ var ne = {
 	}, a.setSourceState({ playbackErrors: [] }), () => {
 		E.current && clearTimeout(E.current);
 	}), [s]);
-	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 D = p(null), O = p(null), k = p(!1), A = p(o);
+	A.current = o;
+	let j = p(r?.onSeek);
+	j.current = r?.onSeek;
+	let M = p(r?.onPlaybackError);
+	M.current = r?.onPlaybackError;
+	let N = u((e) => {
 		let t = typeof e == "number" ? e : void 0;
-		A.current = !0, a.setSourceState({ selectedSubtitleTrack: t }), D.current?.selectSubtitleStream(t);
-	}, [a]), F = u((e) => {
+		k.current = !0, a.setSourceState({ selectedSubtitleTrack: t }), D.current?.selectSubtitleStream(t);
+	}, [a]), P = 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);
+		let n = typeof window < "u" && window.__mediaPlayerSeekDebug, r = performance.now(), i = !1, o = "prepared", s = () => {
+			if (!i && (i = !0, a.seek(e), n)) {
+				let n = t.videoElement, i = 0;
+				if (n) for (let t = 0; t < n.buffered.length; t++) n.buffered.start(t) <= e + 1 && e < n.buffered.end(t) && (i = n.buffered.end(t) - e);
+				console.warn(`[media-player] seek to ${e.toFixed(2)} moved after ${Math.round(performance.now() - r)}ms via ${o}, runway ${i.toFixed(1)}s${o === "deadline" ? " (EXPOSED: moved before its data was ready)" : ""}`);
+			}
+		}, c = setTimeout(() => {
+			o = "deadline", s();
+		}, b);
 		t.prepareSeek(e).catch(() => {}).finally(() => {
-			clearTimeout(s), o();
+			clearTimeout(c), s();
 		});
-	}, [a, b]), I = u((e) => {
+	}, [a, b]), F = u((e) => {
 		typeof e == "number" && (a.setSourceState({ selectedAudioTrack: e }), S(e));
-	}, [a]), L = z((e) => e.setSourceState);
+	}, [a]), I = R((e) => e.setSourceState);
 	d(() => {
-		L({
-			selectSubtitleTrack: P,
-			selectAudioTrack: I,
-			requestSeek: F
+		I({
+			selectSubtitleTrack: N,
+			selectAudioTrack: F,
+			requestSeek: P
 		});
 	}, [
-		L,
-		P,
 		I,
-		F
+		N,
+		F,
+		P
 	]), d(() => {
 		if (!e || !t || !s || !o) return;
 		let r = !1;
@@ -136,7 +137,7 @@ var ne = {
 			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 = z(t), o = fe(t), s = a.playbackErrors, c = s[s.length - 1];
 			if (c && c.message === i && c.detail === o && c.recovered === n) {
 				let e = {
 					...c,
@@ -161,25 +162,25 @@ var ne = {
 			let t = n(e);
 			if (u(e, t), t) {
 				let t = performance.now();
-				t - T.current.at > oe && (T.current = {
+				t - T.current.at > ue && (T.current = {
 					count: 0,
 					at: t
 				});
-				let n = H[Math.min(T.current.count, H.length - 1)];
+				let n = le[Math.min(T.current.count, le.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), E.current && clearTimeout(E.current), E.current = setTimeout(() => w((e) => e + 1), n);
 				return;
 			}
-			console.error("playback failed", e), a.setSourceState({ playbackError: e }), N.current?.(e);
+			console.error("playback failed", e), a.setSourceState({ playbackError: e }), M.current?.(e);
 		};
 		return (async () => {
 			try {
 				let n = await i({
 					videoElement: e,
 					canvasElement: t,
-					read: (e, t) => j.current(e, t),
+					read: (e, t) => A.current(e, t),
 					length: s,
 					publicPath: c,
 					libavWorkerUrl: l,
@@ -199,16 +200,16 @@ var ne = {
 					onRecovered: () => {
 						r || a.setSourceState({ playbackError: null });
 					},
-					onSeek: (e) => M.current?.(e),
+					onSeek: (e) => j.current?.(e),
 					onSubtitleStreams: (e) => {
 						r || a.setSourceState({
-							subtitleTracks: V(e),
-							...A.current ? {} : { selectedSubtitleTrack: e[0]?.streamIndex }
+							subtitleTracks: ce(e),
+							...k.current ? {} : { selectedSubtitleTrack: e[0]?.streamIndex }
 						});
 					},
 					onAudioStreams: (e, t) => {
 						r || a.setSourceState({
-							audioTracks: V(e),
+							audioTracks: ce(e),
 							selectedAudioTrack: t
 						});
 					}
@@ -245,13 +246,13 @@ var ne = {
 		y,
 		C
 	]);
-}, fe = 5e3, pe = 6e4, me = ({ publicPath: e, workerUrl: t, length: n, read: i, downloadedRanges: a }) => {
+}, me = 5e3, he = 6e4, B = ({ 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 = fe, f = () => {
+		let a = !1, o = null, u, d = me, f = () => {
 			r({
 				publicPath: e,
 				workerUrl: t,
@@ -267,7 +268,7 @@ var ne = {
 				}
 				o = e, c.current = e, e.update(h.current);
 			}, () => {
-				a || (u = setTimeout(f, d), d = Math.min(d * 2, pe));
+				a || (u = setTimeout(f, d), d = Math.min(d * 2, he));
 			});
 		};
 		return f(), () => {
@@ -280,7 +281,7 @@ var ne = {
 	]), d(() => {
 		c.current?.update(u);
 	}, [u]), o;
-}, he = (e, n) => {
+}, V = (e, n) => {
 	let r = p(null), [i, o] = m(!1), [s] = m(() => t());
 	d(() => {
 		if (!e || !n || !s) return;
@@ -308,7 +309,7 @@ var ne = {
 		mode: s,
 		burnedIn: i
 	};
-}, U = {
+}, H = {
 	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    ",
@@ -350,7 +351,7 @@ var ne = {
   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));
-  ${U.headings.small}
+  ${H.headings.small}
   color: white;
   text-shadow: 0 0 4px rgba(0, 0, 0, 1);
   z-index: 2;
@@ -398,11 +399,11 @@ var ne = {
   padding: 0 calc(2 * var(--mp-unit));
   text-align: center;
   color: #fff;
-  ${U.bLarge.regular}
+  ${H.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 = 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);
+	let t = R((e) => e.title), n = R((e) => e.hideUI), r = R((e) => e.playbackError), i = R((e) => e.ready), a = R((e) => e.size), o = R((e) => e.waiting);
 	return /* @__PURE__ */ w(S, { children: [
 		t ? /* @__PURE__ */ C("div", {
 			className: "title",
@@ -423,11 +424,11 @@ var ne = {
 			css: ge
 		})
 	] });
-}, 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) => {
+}, U = 1e-4, W = 1, Se = (e) => Math.max(U, Math.min(W, e)) ** 2, G = (e) => Math.max(U, 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) => `${K(e)} / ${K(t)}`, Te = (e) => h`
+}, Ce = (e, t) => `${K(e)} / ${K(t)}`, we = (e) => h`
   display: flex;
   justify-content: flex-end;
 
@@ -437,7 +438,7 @@ var ne = {
   z-index: 3;
 
   * {
-    ${U.bMedium.regular}
+    ${H.bMedium.regular}
   }
 
   ${e === "sm" && h`
@@ -457,8 +458,8 @@ var ne = {
 	"data-tooltip-delay-hide": i,
 	"data-tooltip-place": o,
 	children: n
-}), !s && /* @__PURE__ */ C(te, {
-	css: Te(c),
+}), !s && /* @__PURE__ */ C(ne, {
+	css: we(c),
 	id: e,
 	noArrow: !0,
 	children: t
@@ -471,11 +472,23 @@ var ne = {
 		let { left: a, right: o, top: s, bottom: c } = i.getBoundingClientRect(), l = n === "horizontal" ? (t - a) / (o - a) : (c - r) / (c - s);
 		return Math.min(Math.max(l, 0), 1);
 	}, [e, n]), l = u((e) => {
-		r || e.button > 0 || (s.current = e.pointerId, e.currentTarget.setPointerCapture?.(e.pointerId), a(!0), o.current(c(e.clientX, e.clientY)));
+		if (!(r || e.button > 0)) {
+			s.current = e.pointerId;
+			try {
+				e.currentTarget.setPointerCapture?.(e.pointerId);
+			} catch {}
+			a(!0), o.current(c(e.clientX, e.clientY));
+		}
 	}, [r, c]), f = u((e) => {
 		s.current === e.pointerId && o.current(c(e.clientX, e.clientY));
 	}, [c]), h = u((e) => {
-		s.current === e.pointerId && (s.current = null, e.currentTarget.releasePointerCapture?.(e.pointerId), a(!1));
+		if (s.current === e.pointerId) {
+			s.current = null;
+			try {
+				e.currentTarget.releasePointerCapture?.(e.pointerId);
+			} catch {}
+			a(!1);
+		}
 	}, []);
 	return d(() => {
 		r && (s.current = null, a(!1));
@@ -489,7 +502,7 @@ var ne = {
 			style: { touchAction: "none" }
 		}
 	};
-}, Ee = h`
+}, Te = h`
   position: relative;
   height: calc(.4 * var(--mp-unit));
 
@@ -543,7 +556,7 @@ var ne = {
     box-shadow: 0 0 calc(1 * var(--mp-unit)) rgba(0, 0, 0, .5);
 
     text-shadow: 0 0 4px rgba(0, 0, 0, 1);
-    ${U.bMedium.bold}
+    ${H.bMedium.bold}
 
     position: absolute;
     /* Anchored on its bottom edge rather than its top: now that it has a background its height
@@ -660,25 +673,36 @@ var ne = {
     --thumbnail-width: calc(18 * var(--mp-unit));
     --thumbnail-half: calc(9 * var(--mp-unit));
   }
-`, 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({
+`, Ee = 4, De = () => {
+	let e = R(), t = R((e) => e.currentTime), n = R((e) => e.requestSeek), r = R((e) => e.duration), i = R((e) => e.size), a = R((e) => e.downloadedRanges), o = R((e) => e.indexes), s = R((e) => e.thumbnails), c = R((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,
 		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 > Ee && (S.current = !0);
+			}
 			h(e), v.current !== "mouse" && _(e * r);
 		}
-	}), x = (e) => {
-		v.current = e.pointerType, b.onPointerDown(e);
-	}, S = (e) => {
-		b.onPointerUp(e), e.pointerType !== "mouse" && _(void 0);
-	}, T = (e) => {
+	}), 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;
+		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();
 		return Math.min(Math.max((e - t) / (n - t), 0), 1) * r;
-	}, E = (e) => {
-		_(T(e.clientX));
-	}, D = () => {
+	}, A = (e) => {
+		_(k(e.clientX));
+	}, j = () => {
 		l.current && _(void 0);
-	}, O = (e) => r ? e / r * 100 : 0, k = f(() => a?.map((e, t) => {
+	}, M = (e) => r ? e / r * 100 : 0, N = 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;
@@ -694,22 +718,20 @@ var ne = {
 		r,
 		o.length,
 		a?.map(({ startByteOffset: e, endByteOffset: t }) => `${e}/${t}`).join(",")
-	]), A = f(() => {
+	]), 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);
 		return `${e > 0 ? `${e}:` : ""}${t < 10 ? "0" : ""}${t}:${n < 10 ? "0" : ""}${n}`;
 	}, [g]);
 	d(() => {
-		if (u === void 0 || !r) return;
-		let t = u * r;
-		n ? n(t) : e.seek(t);
+		u === void 0 || !r || !T || !S.current || e.seek(u * r);
 	}, [
 		e,
-		n,
+		T,
 		u,
 		r
 	]);
-	let j = f(() => !r || typeof t != "number" ? 0 : t / r, [r, t]), M = f(() => {
+	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);
@@ -720,44 +742,44 @@ var ne = {
 		g
 	]);
 	return /* @__PURE__ */ w("div", {
-		css: Ee,
+		css: Te,
 		ref: l,
-		className: y ? "progress-bar dragging" : "progress-bar",
-		onMouseMove: E,
-		onMouseOut: D,
+		className: T ? "progress-bar dragging" : "progress-bar",
+		onMouseMove: A,
+		onMouseOut: j,
 		children: [
 			/* @__PURE__ */ C("div", { className: "background-bar" }),
 			g ? /* @__PURE__ */ C("div", {
 				className: "cursor-time",
-				style: { left: `clamp(calc(3 * var(--mp-unit)), ${O(g)}%, calc(100% - calc(3 * var(--mp-unit))))` },
-				children: A
+				style: { left: `clamp(calc(3 * var(--mp-unit)), ${M(g)}%, calc(100% - calc(3 * var(--mp-unit))))` },
+				children: P
 			}) : void 0,
 			/* @__PURE__ */ C("div", { className: "progress" }),
 			/* @__PURE__ */ C("div", {
 				className: "loaded",
-				children: k
+				children: N
 			}),
 			/* @__PURE__ */ C("div", { className: "hover" }),
 			/* @__PURE__ */ C("div", {
 				className: "play-container",
 				children: /* @__PURE__ */ C("div", {
 					className: "play",
-					style: { transform: `scaleX(${j})` }
+					style: { transform: `scaleX(${F})` }
 				})
 			}),
 			/* @__PURE__ */ C("div", { className: "chapters" }),
 			/* @__PURE__ */ C("div", { className: "scrubber" }),
 			/* @__PURE__ */ C("div", {
 				className: "padding",
-				...b,
-				onPointerDown: x,
-				onPointerUp: S,
-				onPointerCancel: S
+				...E,
+				onPointerDown: D,
+				onPointerUp: O,
+				onPointerCancel: O
 			}),
 			/* @__PURE__ */ C("div", {
 				className: "thumbnail",
-				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
+				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
 			})
 		]
 	});
@@ -856,7 +878,7 @@ var ne = {
 
   border-radius: 8px;
   background-color: rgba(28,28,28,0.95);
-  ${U.bMedium.regular}
+  ${H.bMedium.regular}
 
   z-index: 4;
 
@@ -899,7 +921,7 @@ var ne = {
 
       .secondary {
         color: #eee;
-        ${U.bSmall.regular}
+        ${H.bSmall.regular}
       }
     }
   }
@@ -941,7 +963,7 @@ var ne = {
   .failed {
     border-bottom: 1px solid #4D4D4E;
     color: #f66;
-    ${U.bSmall.regular}
+    ${H.bSmall.regular}
   }
 }
 `, Me = ({ title: e, tracks: t, selected: n, onSelect: r, onBack: i, offLabel: a, pending: o, failed: s }) => {
@@ -1056,7 +1078,7 @@ ${X}
 
     color: #fff;
     cursor: pointer;
-    ${U.bSmall.regular}
+    ${H.bSmall.regular}
 
     &:hover {
       background-color: rgba(255,255,255,.1);
@@ -1077,7 +1099,7 @@ ${X}
 
     .when {
       color: #bbb;
-      ${U.bSmall.regular}
+      ${H.bSmall.regular}
 
       /* the one part of the line worth scanning for, so it is the one part at full brightness */
       .count {
@@ -1096,7 +1118,7 @@ ${X}
       color: #ddd;
       overflow-wrap: anywhere;
       white-space: pre-wrap;
-      ${U.bSmall.regular}
+      ${H.bSmall.regular}
     }
   }
 }
@@ -1108,7 +1130,7 @@ ${X}
 		e.detail
 	].filter(Boolean).join("\n");
 }).join("\n\n"), Le = () => {
-	let e = z((e) => e.playbackErrors), { open: t, toggle: n, containerRef: r } = Z(), [i, a] = m(!1);
+	let e = R((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(Ie(e)).then(() => {
@@ -1223,7 +1245,7 @@ width: 100%;
   }
 }
 `, 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({
+	let e = R(), t = R((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) => {
@@ -1317,7 +1339,7 @@ ${X}
 }
 
 `, 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) => {
+	let e = R(), t = R((e) => e.playbackRate), n = R((e) => e.audioTracks), r = R((e) => e.selectedAudioTrack), i = R((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));
@@ -1418,7 +1440,7 @@ position: static;
 
 ${X}
 `, 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();
+	let e = R((e) => e.subtitleTracks), t = R((e) => e.selectedSubtitleTrack), n = R((e) => e.selectSubtitleTrack), r = R((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", {
@@ -1498,7 +1520,7 @@ ${X}
     height: 10px;
   }
 `, 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({
+	let n = R((e) => e.volume), r = R((e) => e.muted), i = p(null), a = p(null), { handlers: o } = J({
 		ref: a,
 		onChange: t
 	}), s = (n) => {
@@ -1561,7 +1583,7 @@ ${X}
       border-radius: 4px;
 
       .volume-value {
-        ${U.bMedium.regular};
+        ${H.bMedium.regular};
         color: #ffffff;
       }
     }
@@ -1600,7 +1622,7 @@ ${X}
   }
 
 `, Je = ({ ref: e }) => {
-	let t = z(), n = z((e) => e.volume), r = z((e) => e.muted), i = f(() => G(n), [n]);
+	let t = R(), n = R((e) => e.volume), r = R((e) => e.muted), i = f(() => G(n), [n]);
 	return /* @__PURE__ */ w("div", {
 		css: qe,
 		children: [/* @__PURE__ */ C(q, {
@@ -1612,7 +1634,7 @@ ${X}
 				ref: e,
 				"aria-label": "Mute",
 				"aria-pressed": r || n === 0,
-				children: C(r || n === 0 ? ee : n <= .5 ? I : L, {
+				children: C(r || n === 0 ? te : n <= .5 ? I : ee, {
 					size: 18,
 					color: "#fff"
 				})
@@ -1625,7 +1647,7 @@ ${X}
 				children: /* @__PURE__ */ C(Ke, {
 					value: r ? 0 : i,
 					onChange: (e) => {
-						t.setVolume(Ce(e));
+						t.setVolume(Se(e));
 					}
 				})
 			})
@@ -1759,7 +1781,7 @@ ${X}
 
     .left {
       .time {
-        ${U.bMedium.regular}
+        ${H.bMedium.regular}
         text-shadow: 0 0 4px rgba(0, 0, 0, 1);
       }
     }
@@ -1781,9 +1803,9 @@ ${X}
     }
   }
 `, 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 e = R(), t = R((e) => e.paused), n = R((e) => e.currentTime), r = R((e) => e.duration), i = R((e) => e.fullscreen), a = R((e) => e.hideUI), o = R((e) => e.togglePictureInPicture), s = R((e) => e.pictureInPictureMode), c = R((e) => e.burnedInSubtitles), l = R((e) => e.subtitleTracks), f = R((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(Ce(a)), o && !e.muted && e.toggleMuted();
+		e.setVolume(Se(a)), o && !e.muted && e.toggleMuted();
 	}, [e]);
 	d(() => {
 		let t = (t) => f ? f(t) : e.seek(t), n = (n) => {
@@ -1851,7 +1873,7 @@ ${X}
 					/* @__PURE__ */ C(Je, { ref: h }),
 					/* @__PURE__ */ C("div", {
 						className: "time",
-						children: we(n, r)
+						children: Ce(n, r)
 					})
 				]
 			}), /* @__PURE__ */ w("div", {
@@ -1941,12 +1963,12 @@ ${X}
   }
 
   .title {
-    ${U.bMedium.bold}
+    ${H.bMedium.bold}
     color: #fff;
   }
 
   .body {
-    ${U.bSmall.regular}
+    ${H.bSmall.regular}
     color: rgba(255, 255, 255, 0.75);
   }
 
@@ -1958,7 +1980,7 @@ ${X}
     color: #6EA8FE;
   }
 `, tt = () => {
-	let e = z((e) => e.burnedInSubtitles), t = z((e) => e.pictureInPictureMode), [n, r] = m(!1);
+	let e = R((e) => e.burnedInSubtitles), t = R((e) => e.pictureInPictureMode), [n, r] = m(!1);
 	return d(() => {
 		if (t !== "burn-in" || !e) {
 			r(!1);
@@ -2039,7 +2061,7 @@ ${X}
 		item: e
 	}];
 }), 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");
+	let o = R(), s = R((e) => e.hideUI), c = R((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), nt);
@@ -2091,14 +2113,14 @@ ${X}
 	});
 }, 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]), de(g, b, r);
-	let w = me({
+	d(() => (p?.(S), () => p?.(null)), [S, p]), pe(g, b, r);
+	let w = B({
 		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 } = he(g, b), k = z((e) => e.setSourceState);
+	}), T = n?.thumbnails?.all ?? w, { toggle: E, mode: D, burnedIn: O } = V(g, b), k = R((e) => e.setSourceState);
 	d(() => {
 		k({
 			title: i,
@@ -2230,7 +2252,7 @@ ${X}
   overflow: hidden;
 `, lt = (e) => /* @__PURE__ */ C("div", {
 	css: ct,
-	children: /* @__PURE__ */ C(R.Provider, { children: /* @__PURE__ */ C(st, {
+	children: /* @__PURE__ */ C(L.Provider, { children: /* @__PURE__ */ C(st, {
 		options: e,
 		children: e.children
 	}) })
@@ -2273,4 +2295,4 @@ ${X}
 	throw Error(`Unknown source type: ${e}`);
 };
 //#endregion
-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 };
+export { lt as MediaPlayer, lt as default, L as Player, e as SUBTITLES_OFF, a as createPictureInPicture, o as createSubtitleRenderer, r as createThumbnailGenerator, ht as inputToRemuxerInput, dt as isDelegatedTracks, ut as isExternalThumbnails, ie as sourceFeature, i as startPlayback, V as usePictureInPicture, R as usePlayer, B as useSeekThumbnails };