@banou/media-player 0.8.5 → 0.8.7

package/dist/index.js

@@ -1,10 +1,10 @@
-import { i as e, n as t, o as n, s as r, t as i } from "./engine-Dmc7JSd9.js";
-import { Children as a, Fragment as o, isValidElement as s, useCallback as c, useEffect as l, useMemo as u, useRef as d, useState as f } from "react";
-import { css as p, keyframes as m } from "@emotion/react";
-import { createPlayer as h, useContainerAttach as g, useMediaAttach as _ } from "@videojs/react";
-import { definePlayerFeature as v, videoFeatures as y } from "@videojs/core/dom";
-import { Fragment as b, jsx as x, jsxs as S } from "@emotion/react/jsx-runtime";
-import { ChevronLeft as C, ChevronRight as w, Maximize as T, Minimize as E, Pause as D, Play as O, RotateCcw as k, Settings as A, Volume1 as j, Volume2 as ee, VolumeX as te } from "react-feather";
+import { a as e, c as t, n, r, s as i, t as a } from "./engine-B6flRjLd.js";
+import { Children as o, Fragment as s, isValidElement as c, useCallback as l, useEffect as u, useMemo as d, useRef as f, useState as p } from "react";
+import { css as m, keyframes as h } from "@emotion/react";
+import { createPlayer as g, useContainerAttach as _, useMediaAttach as v } from "@videojs/react";
+import { definePlayerFeature as y, videoFeatures as b } from "@videojs/core/dom";
+import { Fragment as x, jsx as S, jsxs as C } from "@emotion/react/jsx-runtime";
+import { ChevronLeft as w, ChevronRight as T, Maximize as E, Minimize as D, Pause as O, Play as k, RotateCcw as A, Settings as j, Volume1 as M, Volume2 as ee, VolumeX as te } from "react-feather";
 import { Tooltip as ne } from "react-tooltip";
 //#region src/lib/react/source-feature.ts
 var re = {
@@ -19,10 +19,12 @@ var re = {
 	hideUI: !1,
 	setHideUI: () => {},
 	togglePictureInPicture: null,
+	pictureInPictureMode: null,
+	burnedInSubtitles: !1,
 	playbackError: null,
 	ready: !1,
 	setSourceState: () => {}
-}, M = v({
+}, N = y({
 	name: "source",
 	state: () => ({ ...re }),
 	attach({ set: e }) {
@@ -31,10 +33,10 @@ var re = {
 			setHideUI: (t) => e({ hideUI: t })
 		});
 	}
-}), N = h({
-	features: [...y, M],
+}), P = g({
+	features: [...b, N],
 	displayName: "MediaPlayer"
-}), P = N.usePlayer, ie = (e) => {
+}), F = P.usePlayer, ie = (e) => {
 	if (!(!e || e === "und")) try {
 		return new Intl.DisplayNames([navigator.language || "en"], {
 			type: "language",
@@ -43,35 +45,35 @@ var re = {
 	} catch {
 		return;
 	}
-}, F = (e) => e?.replace(/_/g, " ").trim() || void 0, ae = (e) => {
-	let t = e.map((e) => ie(e.language) ?? F(e.title) ?? `Track ${e.streamIndex}`), n = t.reduce((e, t) => ({
+}, I = (e) => e?.replace(/_/g, " ").trim() || void 0, ae = (e) => {
+	let t = e.map((e) => ie(e.language) ?? I(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 = F(e.title);
+		let i = t[r], a = I(e.title);
 		return {
 			track: e,
 			label: (n[i] ?? 0) > 1 && a && a !== i ? `${i} (${a})` : i
 		};
 	});
-}, I = (e) => ae(e).map(({ track: e, label: t }) => ({
+}, L = (e) => ae(e).map(({ track: e, label: t }) => ({
 	id: e.streamIndex,
 	label: t
 })), oe = (t, n, r) => {
-	let i = P(), { read: a, size: o, publicPath: s = "", libavWorkerUrl: u = "", jassubWorkerUrl: p = "", jassubWasmUrl: m = "", jassubLegacyWasmUrl: h, defaultFontUrl: g, bufferSize: _, autoplay: v = !1 } = r ?? {}, [y, b] = f(void 0), x = d(null), S = d(0), C = d(!1), w = d(a);
+	let i = F(), { read: a, size: o, publicPath: s = "", libavWorkerUrl: c = "", jassubWorkerUrl: d = "", jassubWasmUrl: m = "", jassubLegacyWasmUrl: h, defaultFontUrl: g, bufferSize: _, autoplay: v = !1 } = r ?? {}, [y, b] = p(void 0), x = f(null), S = f(0), C = f(!1), w = f(a);
 	w.current = a;
-	let T = d(r?.onSeek);
+	let T = f(r?.onSeek);
 	T.current = r?.onSeek;
-	let E = d(r?.onPlaybackError);
+	let E = f(r?.onPlaybackError);
 	E.current = r?.onPlaybackError;
-	let D = c((e) => {
+	let D = l((e) => {
 		let t = typeof e == "number" ? e : void 0;
 		C.current = !0, i.setSourceState({ selectedSubtitleTrack: t }), x.current?.selectSubtitleStream(t);
-	}, [i]), O = c((e) => {
+	}, [i]), O = l((e) => {
 		typeof e == "number" && (i.setSourceState({ selectedAudioTrack: e }), b(e));
-	}, [i]), k = P((e) => e.setSourceState);
-	l(() => {
+	}, [i]), k = F((e) => e.setSourceState);
+	u(() => {
 		k({
 			selectSubtitleTrack: D,
 			selectAudioTrack: O
@@ -80,14 +82,14 @@ var re = {
 		k,
 		D,
 		O
-	]), l(() => {
+	]), u(() => {
 		if (!t || !n || !o || !a) return;
 		let r = !1;
 		i.setSourceState({
 			playbackError: null,
 			ready: !1
 		});
-		let c = (e) => {
+		let l = (e) => {
 			r || (console.error("playback failed", e), i.setSourceState({ playbackError: e }), E.current?.(e));
 		};
 		return (async () => {
@@ -98,8 +100,8 @@ var re = {
 					read: (e, t) => w.current(e, t),
 					length: o,
 					publicPath: s,
-					libavWorkerUrl: u,
-					jassubWorkerUrl: p,
+					libavWorkerUrl: c,
+					jassubWorkerUrl: d,
 					jassubWasmUrl: m,
 					jassubLegacyWasmUrl: h,
 					defaultFontUrl: g,
@@ -108,20 +110,20 @@ var re = {
 					onReady: () => {
 						r || (i.setSourceState({ ready: !0 }), S.current > 0 && (t.currentTime = S.current, S.current = 0), v && t.play().catch(() => {}));
 					},
-					onError: c,
+					onError: l,
 					onRecovered: () => {
 						r || i.setSourceState({ playbackError: null });
 					},
 					onSeek: (e) => T.current?.(e),
 					onSubtitleStreams: (e) => {
 						r || i.setSourceState({
-							subtitleTracks: I(e),
+							subtitleTracks: L(e),
 							...C.current ? {} : { selectedSubtitleTrack: e[0]?.streamIndex }
 						});
 					},
 					onAudioStreams: (e, t) => {
 						r || i.setSourceState({
-							audioTracks: I(e),
+							audioTracks: L(e),
 							selectedAudioTrack: t
 						});
 					}
@@ -131,10 +133,10 @@ var re = {
 					return;
 				}
 				x.current = a, i.setSourceState({ indexes: a.indexes });
-				let l = i.selectedSubtitleTrack;
-				typeof l == "number" && a.selectSubtitleStream(l);
+				let u = i.selectedSubtitleTrack;
+				typeof u == "number" && a.selectSubtitleStream(u);
 			} catch (e) {
-				c(e);
+				l(e);
 			}
 		})(), () => {
 			r = !0, S.current = t.currentTime, x.current?.destroy(), x.current = null, i.setSourceState({ ready: !1 });
@@ -145,8 +147,8 @@ var re = {
 		n,
 		o,
 		s,
-		u,
-		p,
+		c,
+		d,
 		m,
 		h,
 		g,
@@ -154,18 +156,18 @@ var re = {
 		y,
 		v
 	]);
-}, se = 5e3, ce = 6e4, L = ({ publicPath: e, workerUrl: n, length: r, read: i, downloadedRanges: a }) => {
-	let [o, s] = f([]), c = d(null), p = d(i);
-	p.current = i;
-	let m = u(() => a?.map(({ startByteOffset: e, endByteOffset: t }) => [e, t]), [a?.map(({ startByteOffset: e, endByteOffset: t }) => `${e}-${t}`).join(",")]), h = d(m);
-	return h.current = m, l(() => {
-		if (!r || !i || !e || !n) return;
-		let a = !1, o = null, l, u = se, d = () => {
-			t({
+}, se = 5e3, ce = 6e4, R = ({ publicPath: e, workerUrl: t, length: n, read: i, downloadedRanges: a }) => {
+	let [o, s] = p([]), c = f(null), l = f(i);
+	l.current = i;
+	let m = d(() => a?.map(({ startByteOffset: e, endByteOffset: t }) => [e, t]), [a?.map(({ startByteOffset: e, endByteOffset: t }) => `${e}-${t}`).join(",")]), h = f(m);
+	return h.current = m, u(() => {
+		if (!n || !i || !e || !t) return;
+		let a = !1, o = null, u, d = se, f = () => {
+			r({
 				publicPath: e,
-				workerUrl: n,
-				length: r,
-				read: (e, t) => p.current(e, t),
+				workerUrl: t,
+				length: n,
+				read: (e, t) => l.current(e, t),
 				onThumbnails: (e) => {
 					a || s(e);
 				}
@@ -176,43 +178,48 @@ var re = {
 				}
 				o = e, c.current = e, e.update(h.current);
 			}, () => {
-				a || (l = setTimeout(d, u), u = Math.min(u * 2, ce));
+				a || (u = setTimeout(f, d), d = Math.min(d * 2, ce));
 			});
 		};
-		return d(), () => {
-			a = !0, clearTimeout(l), c.current = null, o?.destroy(), s([]);
+		return f(), () => {
+			a = !0, clearTimeout(u), c.current = null, o?.destroy(), s([]);
 		};
 	}, [
-		r,
+		n,
 		e,
-		n
-	]), l(() => {
+		t
+	]), u(() => {
 		c.current?.update(m);
 	}, [m]), o;
-}, R = (e, t) => {
-	let n = P(), r = d(null);
-	l(() => {
-		if (!e || !t) return;
-		let a = i({
+}, z = (e, t) => {
+	let r = f(null), [i, o] = p(!1), [s] = p(() => n());
+	u(() => {
+		if (!e || !t || !s) return;
+		let n = a({
 			video: e,
 			canvas: t,
-			fallback: () => n.togglePictureInPicture()
+			mode: s,
+			onBurnedInChange: o
 		});
-		return r.current = a, () => {
-			a.destroy(), r.current = null;
+		return r.current = n, () => {
+			n.destroy(), r.current = null, o(!1);
 		};
 	}, [
 		e,
 		t,
-		n
+		s
 	]);
-	let a = c(() => {
+	let c = l(() => {
 		r.current?.toggle().catch((e) => {
 			console.warn("picture in picture was refused", e);
 		});
 	}, []);
-	return e && t ? a : null;
-}, z = {
+	return {
+		toggle: e && t && s ? c : null,
+		mode: s,
+		burnedIn: i
+	};
+}, B = {
 	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    ",
@@ -239,14 +246,14 @@ var re = {
 		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    "
 	}
-}, le = p`
+}, le = m`
   top: unset !important;
   left: unset !important;
   width: 100%;
   height: 100%;
   margin: auto;
   pointer-events: none;
-`, ue = p`
+`, ue = m`
   position: absolute;
   top: 0;
   left: 0;
@@ -254,7 +261,7 @@ var re = {
   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));
-  ${z.headings.small}
+  ${B.headings.small}
   color: white;
   text-shadow: 0 0 4px rgba(0, 0, 0, 1);
   z-index: 2;
@@ -275,7 +282,7 @@ var re = {
 
   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);
-`, de = p`
+`, de = m`
   position: absolute;
   inset: 0;
   z-index: 2;
@@ -291,24 +298,24 @@ var re = {
     border-radius: 50%;
     border: 3px solid rgba(255, 255, 255, 0.25);
     border-top-color: #fff;
-    animation: ${m`
+    animation: ${h`
   to { transform: rotate(360deg); }
 `} 0.8s linear infinite;
   }
-`, fe = p`
+`, fe = m`
   position: absolute;
   inset: auto 0 20%;
   z-index: 3;
   padding: 0 calc(2 * var(--mp-unit));
   text-align: center;
   color: #fff;
-  ${z.bLarge.regular}
+  ${B.bLarge.regular}
   text-shadow: 0 0 4px rgba(0, 0, 0, 1);
   pointer-events: none;
 `, pe = (e) => e instanceof Error ? e.message : typeof e == "string" ? e : "Playback failed", me = ({ onCanvasRef: e }) => {
-	let t = P((e) => e.title), n = P((e) => e.hideUI), r = P((e) => e.playbackError), i = P((e) => e.ready), a = P((e) => e.size), o = P((e) => e.waiting);
-	return /* @__PURE__ */ S(b, { children: [
-		t ? /* @__PURE__ */ x("div", {
+	let t = F((e) => e.title), n = F((e) => e.hideUI), r = F((e) => e.playbackError), i = F((e) => e.ready), a = F((e) => e.size), o = F((e) => e.waiting);
+	return /* @__PURE__ */ C(x, { children: [
+		t ? /* @__PURE__ */ S("div", {
 			className: "title",
 			css: ue,
 			style: { ...n ? {
@@ -317,21 +324,21 @@ var re = {
 			} : {} },
 			children: t
 		}) : void 0,
-		(a ? !i : o) && !r ? /* @__PURE__ */ x("div", { css: de }) : void 0,
-		r ? /* @__PURE__ */ x("div", {
+		(a ? !i : o) && !r ? /* @__PURE__ */ S("div", { css: de }) : void 0,
+		r ? /* @__PURE__ */ S("div", {
 			css: fe,
 			children: pe(r)
 		}) : void 0,
-		/* @__PURE__ */ x("canvas", {
+		/* @__PURE__ */ S("canvas", {
 			ref: e,
 			css: le
 		})
 	] });
-}, B = 1e-4, V = 1, H = (e) => Math.max(B, Math.min(V, e)) ** 2, U = (e) => Math.max(B, Math.min(V, e)) ** (V / 2), W = (e) => {
+}, V = 1e-4, H = 1, U = (e) => Math.max(V, Math.min(H, e)) ** 2, W = (e) => Math.max(V, Math.min(H, e)) ** (H / 2), G = (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}`;
-}, he = (e, t) => `${W(e)} / ${W(t)}`, ge = (e) => p`
+}, he = (e, t) => `${G(e)} / ${G(t)}`, ge = (e) => m`
   display: flex;
   justify-content: flex-end;
 
@@ -341,19 +348,19 @@ var re = {
   z-index: 3;
 
   * {
-    ${z.bMedium.regular}
+    ${B.bMedium.regular}
   }
 
-  ${e === "sm" && p`
+  ${e === "sm" && m`
     padding: calc(0.4 * var(--mp-unit))!important;
   `}
-  ${e === "md" && p`
+  ${e === "md" && m`
     padding: calc(0.6 * var(--mp-unit))!important;
   `}
-  ${e === "lg" && p`
+  ${e === "lg" && m`
     padding: calc(1.2 * var(--mp-unit))!important;
   `}
-`, G = ({ id: e, toolTipText: t, text: n, delayShow: r = 0, closeDelay: i = 0, offset: a = 20, tooltipPlace: o = "top", disabled: s = !1, size: c = "md" }) => /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x("div", {
+`, K = ({ id: e, toolTipText: t, text: n, delayShow: r = 0, closeDelay: i = 0, offset: a = 20, tooltipPlace: o = "top", disabled: s = !1, size: c = "md" }) => /* @__PURE__ */ C(x, { children: [/* @__PURE__ */ S("div", {
 	"data-tooltip-id": e,
 	"data-open": !0,
 	"data-tooltip-offset": a,
@@ -361,39 +368,39 @@ var re = {
 	"data-tooltip-delay-hide": i,
 	"data-tooltip-place": o,
 	children: n
-}), !s && /* @__PURE__ */ x(ne, {
+}), !s && /* @__PURE__ */ S(ne, {
 	css: ge(c),
 	id: e,
 	noArrow: !0,
 	children: t
-})] }), K = ({ ref: e, onChange: t, orientation: n = "horizontal", disabled: r = !1 }) => {
-	let [i, a] = f(!1), o = d(t);
+})] }), q = ({ ref: e, onChange: t, orientation: n = "horizontal", disabled: r = !1 }) => {
+	let [i, a] = p(!1), o = f(t);
 	o.current = t;
-	let s = d(null), u = c((t, r) => {
+	let s = f(null), c = l((t, r) => {
 		let i = e.current;
 		if (!i) return 0;
 		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]), p = c((e) => {
-		r || e.button > 0 || (s.current = e.pointerId, e.currentTarget.setPointerCapture?.(e.pointerId), a(!0), o.current(u(e.clientX, e.clientY)));
-	}, [r, u]), m = c((e) => {
-		s.current === e.pointerId && o.current(u(e.clientX, e.clientY));
-	}, [u]), h = c((e) => {
+	}, [e, n]), d = l((e) => {
+		r || e.button > 0 || (s.current = e.pointerId, e.currentTarget.setPointerCapture?.(e.pointerId), a(!0), o.current(c(e.clientX, e.clientY)));
+	}, [r, c]), m = l((e) => {
+		s.current === e.pointerId && o.current(c(e.clientX, e.clientY));
+	}, [c]), h = l((e) => {
 		s.current === e.pointerId && (s.current = null, e.currentTarget.releasePointerCapture?.(e.pointerId), a(!1));
 	}, []);
-	return l(() => {
+	return u(() => {
 		r && (s.current = null, a(!1));
 	}, [r]), {
 		dragging: i,
 		handlers: {
-			onPointerDown: p,
+			onPointerDown: d,
 			onPointerMove: m,
 			onPointerUp: h,
 			onPointerCancel: h,
 			style: { touchAction: "none" }
 		}
 	};
-}, _e = p`
+}, _e = m`
   position: relative;
   height: calc(.4 * var(--mp-unit));
 
@@ -447,7 +454,7 @@ var re = {
     box-shadow: 0 0 calc(1 * var(--mp-unit)) rgba(0, 0, 0, .5);
 
     text-shadow: 0 0 4px rgba(0, 0, 0, 1);
-    ${z.bMedium.bold}
+    ${B.bMedium.bold}
 
     position: absolute;
     /* Anchored on its bottom edge rather than its top: now that it has a background its height
@@ -565,14 +572,14 @@ var re = {
     --thumbnail-half: calc(9 * var(--mp-unit));
   }
 `, ve = () => {
-	let e = P(), t = P((e) => e.currentTime), n = P((e) => e.duration), r = P((e) => e.size), i = P((e) => e.downloadedRanges), a = P((e) => e.indexes), o = P((e) => e.thumbnails), s = P((e) => e.thumbnailAt), c = d(null), [p, m] = f(void 0), [h, g] = f(void 0), _ = d(void 0), { dragging: v, handlers: y } = K({
+	let e = F(), t = F((e) => e.currentTime), n = F((e) => e.duration), r = F((e) => e.size), i = F((e) => e.downloadedRanges), a = F((e) => e.indexes), o = F((e) => e.thumbnails), s = F((e) => e.thumbnailAt), c = f(null), [l, m] = p(void 0), [h, g] = p(void 0), _ = f(void 0), { dragging: v, handlers: y } = q({
 		ref: c,
 		onChange: (e) => {
 			m(e), _.current !== "mouse" && g(e * n);
 		}
 	}), b = (e) => {
 		_.current = e.pointerType, y.onPointerDown(e);
-	}, C = (e) => {
+	}, x = (e) => {
 		y.onPointerUp(e), e.pointerType !== "mouse" && g(void 0);
 	}, w = (e) => {
 		if (!c.current) return;
@@ -582,12 +589,12 @@ var re = {
 		g(w(e.clientX));
 	}, E = () => {
 		c.current && g(void 0);
-	}, D = (e) => n ? e / n * 100 : 0, O = u(() => i?.map((e, t) => {
+	}, D = (e) => n ? e / n * 100 : 0, O = d(() => 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;
-		return /* @__PURE__ */ x("div", {
+		return /* @__PURE__ */ S("div", {
 			className: "loaded-part",
 			style: {
 				transform: `scaleX(${u})`,
@@ -598,21 +605,21 @@ var re = {
 		n,
 		a.length,
 		i?.map(({ startByteOffset: e, endByteOffset: t }) => `${e}/${t}`).join(",")
-	]), k = u(() => {
+	]), k = d(() => {
 		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);
 		return `${e > 0 ? `${e}:` : ""}${t < 10 ? "0" : ""}${t}:${n < 10 ? "0" : ""}${n}`;
 	}, [h]);
-	l(() => {
-		if (p === void 0 || !n) return;
-		let t = p * n;
+	u(() => {
+		if (l === void 0 || !n) return;
+		let t = l * n;
 		e.seek(t);
 	}, [
 		e,
-		p,
+		l,
 		n
 	]);
-	let A = u(() => !n || typeof t != "number" ? 0 : t / n, [n, t]), j = u(() => {
+	let A = d(() => !n || typeof t != "number" ? 0 : t / n, [n, t]), j = d(() => {
 		if (h) {
 			if (s) return s(h);
 			if (o.length) return o.find(({ startTime: e, endTime: t }) => e <= h && h < t);
@@ -622,49 +629,105 @@ var re = {
 		s,
 		h
 	]);
-	return /* @__PURE__ */ S("div", {
+	return /* @__PURE__ */ C("div", {
 		css: _e,
 		ref: c,
 		className: v ? "progress-bar dragging" : "progress-bar",
 		onMouseMove: T,
 		onMouseOut: E,
 		children: [
-			/* @__PURE__ */ x("div", { className: "background-bar" }),
-			h ? /* @__PURE__ */ x("div", {
+			/* @__PURE__ */ S("div", { className: "background-bar" }),
+			h ? /* @__PURE__ */ S("div", {
 				className: "cursor-time",
 				style: { left: `clamp(calc(3 * var(--mp-unit)), ${D(h)}%, calc(100% - calc(3 * var(--mp-unit))))` },
 				children: k
 			}) : void 0,
-			/* @__PURE__ */ x("div", { className: "progress" }),
-			/* @__PURE__ */ x("div", {
+			/* @__PURE__ */ S("div", { className: "progress" }),
+			/* @__PURE__ */ S("div", {
 				className: "loaded",
 				children: O
 			}),
-			/* @__PURE__ */ x("div", { className: "hover" }),
-			/* @__PURE__ */ x("div", {
+			/* @__PURE__ */ S("div", { className: "hover" }),
+			/* @__PURE__ */ S("div", {
 				className: "play-container",
-				children: /* @__PURE__ */ x("div", {
+				children: /* @__PURE__ */ S("div", {
 					className: "play",
 					style: { transform: `scaleX(${A})` }
 				})
 			}),
-			/* @__PURE__ */ x("div", { className: "chapters" }),
-			/* @__PURE__ */ x("div", { className: "scrubber" }),
-			/* @__PURE__ */ x("div", {
+			/* @__PURE__ */ S("div", { className: "chapters" }),
+			/* @__PURE__ */ S("div", { className: "scrubber" }),
+			/* @__PURE__ */ S("div", {
 				className: "padding",
 				...y,
 				onPointerDown: b,
-				onPointerUp: C,
-				onPointerCancel: C
+				onPointerUp: x,
+				onPointerCancel: x
 			}),
-			/* @__PURE__ */ x("div", {
+			/* @__PURE__ */ S("div", {
 				className: "thumbnail",
 				style: { left: `clamp(var(--thumbnail-half), ${D(h ?? 1)}%, calc(100% - var(--thumbnail-half)))` },
-				children: j?.url ? /* @__PURE__ */ x("img", { src: j.url }) : void 0
+				children: j?.url ? /* @__PURE__ */ S("img", { src: j.url }) : void 0
 			})
 		]
 	});
-}, ye = "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", be = p`
+}, ye = "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", J = {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 24,
+	height: 24,
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 2,
+	strokeLinecap: "round",
+	strokeLinejoin: "round"
+}, be = (e) => /* @__PURE__ */ C("svg", {
+	...J,
+	...e,
+	children: [/* @__PURE__ */ S("rect", {
+		x: "3",
+		y: "5",
+		width: "18",
+		height: "14",
+		rx: "2",
+		ry: "2"
+	}), /* @__PURE__ */ S("path", { d: "M7 15h4m4 0h2M7 11h2m4 0h4" })]
+}), xe = (e) => /* @__PURE__ */ C("svg", {
+	...J,
+	...e,
+	children: [
+		/* @__PURE__ */ S("rect", {
+			x: "3",
+			y: "5",
+			width: "18",
+			height: "14",
+			rx: "2",
+			ry: "2"
+		}),
+		/* @__PURE__ */ S("path", { d: "M7 15h4m4 0h2M7 11h2m4 0h4" }),
+		/* @__PURE__ */ S("line", {
+			x1: "2",
+			y1: "2",
+			x2: "22",
+			y2: "22"
+		})
+	]
+}), Se = (e) => /* @__PURE__ */ C("svg", {
+	...J,
+	...e,
+	children: [
+		/* @__PURE__ */ S("path", { d: "M21 11V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h5" }),
+		/* @__PURE__ */ S("rect", {
+			x: "12",
+			y: "13",
+			width: "10",
+			height: "8",
+			rx: "1",
+			ry: "1"
+		}),
+		/* @__PURE__ */ S("path", { d: "M14.5 18.5h2m2 0h1" })
+	]
+}), Ce = m`
 display: flex;
 align-items: center;
 justify-content: center;
@@ -717,42 +780,42 @@ width: 100%;
     }
   }
 }
-`, xe = () => {
-	let e = P(), t = P((e) => e.playbackRate), n = d(null), r = d(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, u = (e) => o(i + e * a), { handlers: f } = K({
+`, we = () => {
+	let e = F(), t = F((e) => e.playbackRate), n = f(null), r = f(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: d } = q({
 		ref: r,
-		onChange: (t) => e.setPlaybackRate(u(t))
+		onChange: (t) => e.setPlaybackRate(l(t))
 	}), p = (t) => {
 		t.preventDefault();
 		let n = .05, r = s;
 		r = t.deltaY < 0 ? Math.min(3, r + n) : Math.max(i, r - n), e.setPlaybackRate(r);
 	};
-	l(() => {
+	u(() => {
 		let e = n.current;
 		return e && e.addEventListener("wheel", p, { passive: !1 }), () => {
 			e && e.removeEventListener("wheel", p);
 		};
 	}, [t]);
 	let m = c(s);
-	return /* @__PURE__ */ S("div", {
-		css: be,
-		children: [/* @__PURE__ */ S("div", { children: [s.toFixed(2), "x"] }), /* @__PURE__ */ x("div", {
+	return /* @__PURE__ */ C("div", {
+		css: Ce,
+		children: [/* @__PURE__ */ C("div", { children: [s.toFixed(2), "x"] }), /* @__PURE__ */ S("div", {
 			className: "playback-slider",
 			ref: n,
-			...f,
-			children: /* @__PURE__ */ x("div", {
+			...d,
+			children: /* @__PURE__ */ S("div", {
 				ref: r,
 				style: { background: `linear-gradient(to right,
               #fff 0% ${m}%,
               #3A3A3A ${m}% 100%
             )` },
-				children: /* @__PURE__ */ x("div", {
+				children: /* @__PURE__ */ S("div", {
 					className: "playback-handle",
 					style: { left: `${m}%` }
 				})
 			})
 		})]
 	});
-}, q = p`
+}, Y = m`
 .popover {
   position: absolute;
   /* Anchored to the PLAYER's right edge, never to the gear. The gear is not the last control in the
@@ -791,7 +854,7 @@ width: 100%;
 
   border-radius: 8px;
   background-color: rgba(28,28,28,0.95);
-  ${z.bMedium.regular}
+  ${B.bMedium.regular}
 
   z-index: 4;
 
@@ -834,7 +897,7 @@ width: 100%;
 
       .secondary {
         color: #eee;
-        ${z.bSmall.regular}
+        ${B.bSmall.regular}
       }
     }
   }
@@ -876,29 +939,29 @@ width: 100%;
   .failed {
     border-bottom: 1px solid #4D4D4E;
     color: #f66;
-    ${z.bSmall.regular}
+    ${B.bSmall.regular}
   }
 }
-`, J = ({ title: e, tracks: t, selected: n, onSelect: r, onBack: i, offLabel: a, pending: o, failed: s }) => {
+`, X = ({ 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__ */ S("div", {
+		return /* @__PURE__ */ C("div", {
 			onClick: () => {
 				l || r(e ?? void 0);
 			},
 			className: [a, l ? "unavailable" : null].filter(Boolean).join(" ") || void 0,
-			children: [/* @__PURE__ */ x("span", { children: i }), /* @__PURE__ */ x("span", { children: s ? "…" : (n ?? null) === e ? "✓" : "" })]
+			children: [/* @__PURE__ */ S("span", { children: i }), /* @__PURE__ */ S("span", { children: s ? "…" : (n ?? null) === e ? "✓" : "" })]
 		}, e ?? "__off__");
 	};
-	return /* @__PURE__ */ S("div", {
+	return /* @__PURE__ */ C("div", {
 		className: "popover track-list",
 		children: [
-			/* @__PURE__ */ S("div", {
+			/* @__PURE__ */ C("div", {
 				className: i ? "back" : "back no-hover",
 				onClick: i,
-				children: [i ? /* @__PURE__ */ x(C, {}) : null, /* @__PURE__ */ x("span", { children: e })]
+				children: [i ? /* @__PURE__ */ S(w, {}) : null, /* @__PURE__ */ S("span", { children: e })]
 			}),
-			s ? /* @__PURE__ */ x("div", {
+			s ? /* @__PURE__ */ S("div", {
 				className: "no-hover failed",
 				children: "Could not switch. Try again."
 			}) : null,
@@ -906,15 +969,15 @@ width: 100%;
 			t.map(({ id: e, label: t }) => l(e, t, "description"))
 		]
 	});
-}, Y = ({ onReset: e } = {}) => {
-	let t = d(null), [n, r] = f(!1), [i, a] = f(void 0), [o, s] = f(!1), c = d(e);
+}, Z = ({ onReset: e } = {}) => {
+	let t = f(null), [n, r] = p(!1), [i, a] = p(void 0), [o, s] = p(!1), c = f(e);
 	c.current = e;
-	let u = () => {
+	let l = () => {
 		r(!1), c.current?.();
 	};
-	return l(() => {
+	return u(() => {
 		let e = (e) => {
-			n && t.current && !t.current.contains(e.target) && u();
+			n && t.current && !t.current.contains(e.target) && l();
 		};
 		return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
 	}, [n]), {
@@ -922,7 +985,7 @@ width: 100%;
 		toggle: () => {
 			r((e) => !e), s(!1), c.current?.();
 		},
-		close: u,
+		close: l,
 		containerRef: t,
 		pending: i,
 		failed: o,
@@ -937,17 +1000,17 @@ width: 100%;
 				return;
 			}
 			if (!(n instanceof Promise)) {
-				u();
+				l();
 				return;
 			}
 			a(e), n.then(() => {
-				a(void 0), u();
+				a(void 0), l();
 			}, (e) => {
 				console.warn("[media-player] track selection failed:", e), a(void 0), s(!0);
 			});
 		}
 	};
-}, Se = p`
+}, Te = m`
 /* 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
@@ -965,7 +1028,7 @@ position: static;
   }
 }
 
-${q}
+${Y}
 
 .playback-rate {
   .slider {
@@ -1006,70 +1069,70 @@ ${q}
   }
 }
 
-`, Ce = () => {
-	let e = P(), t = P((e) => e.playbackRate), n = P((e) => e.audioTracks), r = P((e) => e.selectedAudioTrack), i = P((e) => e.selectAudioTrack), [a, o] = f(0), { open: s, toggle: c, containerRef: l, pending: u, failed: d, runSelect: p } = Y({ onReset: () => o(0) }), m = (t) => {
+`, Ee = () => {
+	let e = F(), t = F((e) => e.playbackRate), n = F((e) => e.audioTracks), r = F((e) => e.selectedAudioTrack), i = F((e) => e.selectAudioTrack), [a, o] = p(0), { open: s, toggle: c, containerRef: l, pending: u, failed: d, runSelect: f } = Z({ onReset: () => o(0) }), m = (t) => {
 		e.setPlaybackRate(t), o(0);
 	}, h = (e) => {
-		e !== void 0 && p(e, () => i(e));
+		e !== void 0 && f(e, () => i(e));
 	}, g = (e) => () => {
 		o(e);
 	};
-	return /* @__PURE__ */ S("div", {
-		css: Se,
+	return /* @__PURE__ */ C("div", {
+		css: Te,
 		ref: l,
 		children: [
-			/* @__PURE__ */ x(G, {
+			/* @__PURE__ */ S(K, {
 				id: "settings",
 				disabled: s,
-				text: /* @__PURE__ */ x("button", {
+				text: /* @__PURE__ */ S("button", {
 					className: "settings",
 					type: "button",
 					onClick: c,
-					children: /* @__PURE__ */ x(A, {})
+					children: /* @__PURE__ */ S(j, {})
 				}),
-				toolTipText: /* @__PURE__ */ x("span", { children: "Settings" })
+				toolTipText: /* @__PURE__ */ S("span", { children: "Settings" })
 			}),
-			s && a === 0 && /* @__PURE__ */ S("div", {
+			s && a === 0 && /* @__PURE__ */ C("div", {
 				className: "popover menu",
-				children: [n.length > 1 ? /* @__PURE__ */ S("div", {
+				children: [n.length > 1 ? /* @__PURE__ */ C("div", {
 					onClick: g(2),
-					children: [/* @__PURE__ */ x("div", { children: "Audio" }), /* @__PURE__ */ x("div", { children: /* @__PURE__ */ x(w, {}) })]
-				}) : null, /* @__PURE__ */ S("div", {
+					children: [/* @__PURE__ */ S("div", { children: "Audio" }), /* @__PURE__ */ S("div", { children: /* @__PURE__ */ S(T, {}) })]
+				}) : null, /* @__PURE__ */ C("div", {
 					onClick: g(1),
-					children: [/* @__PURE__ */ x("div", { children: "Playback speed" }), /* @__PURE__ */ S("div", { children: [/* @__PURE__ */ x("span", {
+					children: [/* @__PURE__ */ S("div", { children: "Playback speed" }), /* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("span", {
 						className: "secondary",
 						children: t === 1 ? "(Default)" : t.toFixed(2)
-					}), /* @__PURE__ */ x(w, {})] })]
+					}), /* @__PURE__ */ S(T, {})] })]
 				})]
 			}),
-			s && a === 1 && /* @__PURE__ */ S("div", {
+			s && a === 1 && /* @__PURE__ */ C("div", {
 				className: "popover playback-rate",
 				children: [
-					/* @__PURE__ */ S("div", {
+					/* @__PURE__ */ C("div", {
 						className: "back",
 						onClick: g(0),
-						children: [/* @__PURE__ */ x(C, {}), /* @__PURE__ */ x("span", { children: "Playback speed" })]
+						children: [/* @__PURE__ */ S(w, {}), /* @__PURE__ */ S("span", { children: "Playback speed" })]
 					}),
-					/* @__PURE__ */ x("div", {
+					/* @__PURE__ */ S("div", {
 						className: "slider no-hover",
-						children: /* @__PURE__ */ x(xe, {})
+						children: /* @__PURE__ */ S(we, {})
 					}),
-					/* @__PURE__ */ S("div", {
+					/* @__PURE__ */ C("div", {
 						className: "options no-hover",
 						children: [
-							/* @__PURE__ */ x("div", {
+							/* @__PURE__ */ S("div", {
 								onClick: () => m(.5),
 								children: "0.5x"
 							}),
-							/* @__PURE__ */ x("div", {
+							/* @__PURE__ */ S("div", {
 								onClick: () => m(1),
 								children: "1x"
 							}),
-							/* @__PURE__ */ x("div", {
+							/* @__PURE__ */ S("div", {
 								onClick: () => m(1.5),
 								children: "1.5x"
 							}),
-							/* @__PURE__ */ x("div", {
+							/* @__PURE__ */ S("div", {
 								onClick: () => m(2),
 								children: "2x"
 							})
@@ -1077,7 +1140,7 @@ ${q}
 					})
 				]
 			}),
-			s && a === 2 && /* @__PURE__ */ x(J, {
+			s && a === 2 && /* @__PURE__ */ S(X, {
 				title: "Audio",
 				tracks: n,
 				selected: r,
@@ -1088,48 +1151,7 @@ ${q}
 			})
 		]
 	});
-}, X = {
-	xmlns: "http://www.w3.org/2000/svg",
-	width: 24,
-	height: 24,
-	viewBox: "0 0 24 24",
-	fill: "none",
-	stroke: "currentColor",
-	strokeWidth: 2,
-	strokeLinecap: "round",
-	strokeLinejoin: "round"
-}, we = (e) => /* @__PURE__ */ S("svg", {
-	...X,
-	...e,
-	children: [/* @__PURE__ */ x("rect", {
-		x: "3",
-		y: "5",
-		width: "18",
-		height: "14",
-		rx: "2",
-		ry: "2"
-	}), /* @__PURE__ */ x("path", { d: "M7 15h4m4 0h2M7 11h2m4 0h4" })]
-}), Te = (e) => /* @__PURE__ */ S("svg", {
-	...X,
-	...e,
-	children: [
-		/* @__PURE__ */ x("rect", {
-			x: "3",
-			y: "5",
-			width: "18",
-			height: "14",
-			rx: "2",
-			ry: "2"
-		}),
-		/* @__PURE__ */ x("path", { d: "M7 15h4m4 0h2M7 11h2m4 0h4" }),
-		/* @__PURE__ */ x("line", {
-			x1: "2",
-			y1: "2",
-			x2: "22",
-			y2: "22"
-		})
-	]
-}), Ee = p`
+}, De = m`
 /* 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;
@@ -1145,23 +1167,23 @@ position: static;
   }
 }
 
-${q}
-`, De = () => {
-	let e = P((e) => e.subtitleTracks), t = P((e) => e.selectedSubtitleTrack), n = P((e) => e.selectSubtitleTrack), r = P((e) => e.subtitleOffLabel), { open: i, toggle: a, containerRef: o, pending: s, failed: c, runSelect: l } = Y();
-	return e.length === 0 ? null : /* @__PURE__ */ S("div", {
-		css: Ee,
+${Y}
+`, Oe = () => {
+	let e = F((e) => e.subtitleTracks), t = F((e) => e.selectedSubtitleTrack), n = F((e) => e.selectSubtitleTrack), r = F((e) => e.subtitleOffLabel), { open: i, toggle: a, containerRef: o, pending: s, failed: c, runSelect: l } = Z();
+	return e.length === 0 ? null : /* @__PURE__ */ C("div", {
+		css: De,
 		ref: o,
-		children: [/* @__PURE__ */ x(G, {
+		children: [/* @__PURE__ */ S(K, {
 			id: "subtitles",
 			disabled: i,
-			text: /* @__PURE__ */ x("button", {
+			text: /* @__PURE__ */ S("button", {
 				className: "subtitles",
 				type: "button",
 				onClick: a,
-				children: t === void 0 ? /* @__PURE__ */ x(Te, { className: "captions-off" }) : /* @__PURE__ */ x(we, { className: "captions" })
+				children: t === void 0 ? /* @__PURE__ */ S(xe, { className: "captions-off" }) : /* @__PURE__ */ S(be, { className: "captions" })
 			}),
-			toolTipText: /* @__PURE__ */ x("span", { children: "Subtitles" })
-		}), i && /* @__PURE__ */ x(J, {
+			toolTipText: /* @__PURE__ */ S("span", { children: "Subtitles" })
+		}), i && /* @__PURE__ */ S(X, {
 			title: "Subtitles",
 			tracks: e,
 			selected: t,
@@ -1171,13 +1193,14 @@ ${q}
 			failed: c
 		})]
 	});
-}, Oe = {
+}, Q = {
 	primary: "#EAEBEE",
 	secondary: "#D0D0D9",
 	hover: "rgba(255, 255, 255, 0.13)",
+	accent: "#6EA8FE",
 	borderPrimary: "#384F70",
 	backgroundTooltip: "#222222"
-}, ke = p`
+}, ke = m`
   display: flex;
   align-items: center;
 
@@ -1221,7 +1244,7 @@ ${q}
     height: 10px;
   }
 `, Ae = ({ value: e, onChange: t }) => {
-	let n = P((e) => e.volume), r = P((e) => e.muted), i = d(null), a = d(null), { handlers: o } = K({
+	let n = F((e) => e.volume), r = F((e) => e.muted), i = f(null), a = f(null), { handlers: o } = q({
 		ref: a,
 		onChange: t
 	}), s = (n) => {
@@ -1229,37 +1252,37 @@ ${q}
 		let r = .05, i = e;
 		i = n.deltaY < 0 ? Math.min(1, i + r) : Math.max(0, i - r), t(i);
 	};
-	l(() => {
+	u(() => {
 		let e = i.current;
 		return e && e.addEventListener("wheel", s, { passive: !1 }), () => {
 			e && e.removeEventListener("wheel", s);
 		};
 	}, [e]);
-	let c = e * 100, f = u(() => Math.round(r ? 0 : U(n) * 100), [n, r]);
-	return /* @__PURE__ */ x(G, {
+	let c = e * 100, l = d(() => Math.round(r ? 0 : W(n) * 100), [n, r]);
+	return /* @__PURE__ */ S(K, {
 		id: "volume-slider",
-		text: /* @__PURE__ */ x("div", {
+		text: /* @__PURE__ */ S("div", {
 			ref: i,
 			css: ke,
 			...o,
-			children: /* @__PURE__ */ x("div", {
+			children: /* @__PURE__ */ S("div", {
 				ref: a,
 				style: { background: `linear-gradient(to right,
                 #fff 0% ${c}%,
                 #3A3A3A ${c}% 100%
               )` },
-				children: /* @__PURE__ */ x("div", {
+				children: /* @__PURE__ */ S("div", {
 					className: "volume-handle",
 					style: { left: `${e * 100}%` }
 				})
 			})
 		}),
-		toolTipText: /* @__PURE__ */ S("div", {
+		toolTipText: /* @__PURE__ */ C("div", {
 			className: "volume-value",
-			children: [f, "%"]
+			children: [l, "%"]
 		})
 	});
-}, je = p`
+}, je = m`
   position: relative;
   display: flex;
   align-items: center;
@@ -1284,7 +1307,7 @@ ${q}
       border-radius: 4px;
 
       .volume-value {
-        ${z.bMedium.regular};
+        ${B.bMedium.regular};
         color: #ffffff;
       }
     }
@@ -1323,36 +1346,47 @@ ${q}
   }
 
 `, Me = ({ ref: e }) => {
-	let t = P(), n = P((e) => e.volume), r = P((e) => e.muted), i = u(() => U(n), [n]);
-	return /* @__PURE__ */ S("div", {
+	let t = F(), n = F((e) => e.volume), r = F((e) => e.muted), i = d(() => W(n), [n]);
+	return /* @__PURE__ */ C("div", {
 		css: je,
-		children: [/* @__PURE__ */ x(G, {
+		children: [/* @__PURE__ */ S(K, {
 			id: "sound",
-			text: /* @__PURE__ */ x("button", {
+			text: /* @__PURE__ */ S("button", {
 				className: "sound",
 				type: "button",
 				onClick: () => t.toggleMuted(),
 				ref: e,
-				children: x(r || n === 0 ? te : n <= .5 ? j : ee, {
+				children: S(r || n === 0 ? te : n <= .5 ? M : ee, {
 					size: 18,
 					color: "#fff"
 				})
 			}),
-			toolTipText: /* @__PURE__ */ x("span", { children: r ? "Unmute (m)" : "Mute (m)" })
-		}), /* @__PURE__ */ x("div", {
+			toolTipText: /* @__PURE__ */ S("span", { children: r ? "Unmute (m)" : "Mute (m)" })
+		}), /* @__PURE__ */ S("div", {
 			className: "volume-slider-container",
-			children: /* @__PURE__ */ x("div", {
+			children: /* @__PURE__ */ S("div", {
 				className: "volume-slider-background",
-				children: /* @__PURE__ */ x(Ae, {
+				children: /* @__PURE__ */ S(Ae, {
 					value: r ? 0 : i,
 					onChange: (e) => {
-						t.setVolume(H(e));
+						t.setVolume(U(e));
 					}
 				})
 			})
 		})]
 	});
-}, Z = .05, Q = 5, Ne = p`
+}, $ = .05, Ne = 5, Pe = m`
+  display: flex;
+  flex-direction: column;
+  gap: calc(0.4 * var(--mp-unit));
+  max-width: calc(26 * var(--mp-unit));
+  white-space: normal;
+
+  .hint {
+    opacity: 0.72;
+    font-size: 0.9em;
+  }
+`, Fe = m`
   position: absolute;
   bottom: 0;
   width: 100%;
@@ -1402,6 +1436,22 @@ ${q}
         svg {
           stroke: #fff;
         }
+
+        /* Reads as unavailable rather than absent, so the bar does not reflow when tracks land. */
+        &:disabled {
+          cursor: default;
+          opacity: .4;
+        }
+      }
+
+      /**
+       * The burn-in control's own on state.
+       *
+       * Not \`colors.hover\`: the pointer is on the button at the moment of the click, so an on state
+       * drawn in the hover colour is invisible exactly when it is being looked for.
+       */
+      button[aria-pressed='true'] svg {
+        stroke: ${Q.accent};
       }
 
       .play, .sound, .time, .subtitles, .settings, .picture-in-picture, .full-screen {
@@ -1436,7 +1486,7 @@ ${q}
         cursor: pointer;
 
         :hover {
-          background-color: ${Oe.hover};
+          background-color: ${Q.hover};
         }
 
         /* the hit area grows, the icon does not, keyed on the pointer because a narrow desktop
@@ -1453,7 +1503,7 @@ ${q}
 
     .left {
       .time {
-        ${z.bMedium.regular}
+        ${B.bMedium.regular}
         text-shadow: 0 0 4px rgba(0, 0, 0, 1);
       }
     }
@@ -1474,12 +1524,12 @@ ${q}
       }
     }
   }
-`, Pe = () => {
-	let e = P(), t = P((e) => e.paused), n = P((e) => e.currentTime), r = P((e) => e.duration), i = P((e) => e.fullscreen), a = P((e) => e.hideUI), o = P((e) => e.togglePictureInPicture), [s, u] = f(null), d = r > 0 && n === r, p = c(({ direction: t, stepSize: n }) => {
-		let r = U(e.volume), i = t === "up" ? n : -n, a = Math.max(0, Math.min(1, r + i)), o = e.muted;
-		e.setVolume(H(a)), o && !e.muted && e.toggleMuted();
+`, Ie = () => {
+	let e = F(), t = F((e) => e.paused), n = F((e) => e.currentTime), r = F((e) => e.duration), i = F((e) => e.fullscreen), a = F((e) => e.hideUI), o = F((e) => e.togglePictureInPicture), s = F((e) => e.pictureInPictureMode), c = F((e) => e.burnedInSubtitles), d = F((e) => e.subtitleTracks), [f, m] = p(null), h = s === "burn-in", g = d.length > 0, _ = r > 0 && n === r, v = l(({ 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(U(a)), o && !e.muted && e.toggleMuted();
 	}, [e]);
-	l(() => {
+	u(() => {
 		let t = (t) => {
 			let n = t.target;
 			if (n?.isContentEditable || /^(input|textarea|select)$/i.test(n?.tagName ?? "")) return;
@@ -1488,92 +1538,194 @@ ${q}
 			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") p({
+			else if (t.key === "ArrowUp") v({
 				direction: "up",
-				stepSize: Z
+				stepSize: $
 			});
-			else if (t.key === "ArrowDown") p({
+			else if (t.key === "ArrowDown") v({
 				direction: "down",
-				stepSize: Z
+				stepSize: $
 			});
 			else if (t.key === "ArrowRight") {
 				if (!e.duration) return;
-				e.seek(Math.min(e.currentTime + Q, e.duration));
-			} else t.key === "ArrowLeft" ? e.seek(Math.max(e.currentTime - Q, 0)) : r = !1;
+				e.seek(Math.min(e.currentTime + Ne, e.duration));
+			} else t.key === "ArrowLeft" ? e.seek(Math.max(e.currentTime - Ne, 0)) : r = !1;
 			r && t.preventDefault();
 		};
 		return window.addEventListener("keydown", t), () => window.removeEventListener("keydown", t);
-	}, [e, p]);
-	let m = c((e) => {
-		e.preventDefault(), e.deltaY < 0 ? p({
+	}, [e, v]);
+	let y = l((e) => {
+		e.preventDefault(), e.deltaY < 0 ? v({
 			direction: "up",
-			stepSize: Z
-		}) : p({
+			stepSize: $
+		}) : v({
 			direction: "down",
-			stepSize: Z
+			stepSize: $
 		});
-	}, [p]);
-	return l(() => {
-		if (s) return s.addEventListener("wheel", m, { passive: !1 }), () => s.removeEventListener("wheel", m);
-	}, [s, m]), /* @__PURE__ */ S("div", {
-		css: Ne,
+	}, [v]);
+	return u(() => {
+		if (f) return f.addEventListener("wheel", y, { passive: !1 }), () => f.removeEventListener("wheel", y);
+	}, [f, y]), /* @__PURE__ */ C("div", {
+		css: Fe,
 		style: { ...a ? {
 			opacity: "0",
 			pointerEvents: "none"
 		} : {} },
-		children: [/* @__PURE__ */ x(ve, {}), /* @__PURE__ */ S("div", {
+		children: [/* @__PURE__ */ S(ve, {}), /* @__PURE__ */ C("div", {
 			className: "actions",
-			children: [/* @__PURE__ */ S("div", {
+			children: [/* @__PURE__ */ C("div", {
 				className: "left",
 				children: [
-					/* @__PURE__ */ x(G, {
+					/* @__PURE__ */ S(K, {
 						id: "play",
 						tooltipPlace: "top-start",
-						text: /* @__PURE__ */ x("button", {
+						text: /* @__PURE__ */ S("button", {
 							className: "play",
 							type: "button",
 							onClick: () => e.togglePaused(),
-							children: x(d ? k : t ? O : D, {})
+							children: S(_ ? A : t ? k : O, {})
 						}),
-						toolTipText: /* @__PURE__ */ x("span", { children: d ? "Replay (k)" : t ? "Play (k)" : "Pause (k)" })
+						toolTipText: /* @__PURE__ */ S("span", { children: _ ? "Replay (k)" : t ? "Play (k)" : "Pause (k)" })
 					}),
-					/* @__PURE__ */ x(Me, { ref: u }),
-					/* @__PURE__ */ x("div", {
+					/* @__PURE__ */ S(Me, { ref: m }),
+					/* @__PURE__ */ S("div", {
 						className: "time",
 						children: he(n, r)
 					})
 				]
-			}), /* @__PURE__ */ S("div", {
+			}), /* @__PURE__ */ C("div", {
 				className: "right",
 				children: [
-					/* @__PURE__ */ x(De, {}),
-					/* @__PURE__ */ x(Ce, {}),
-					o ? /* @__PURE__ */ x(G, {
+					/* @__PURE__ */ S(Oe, {}),
+					/* @__PURE__ */ S(Ee, {}),
+					o ? /* @__PURE__ */ S(K, {
 						id: "picture-in-picture",
-						text: /* @__PURE__ */ x("button", {
+						tooltipPlace: "top-end",
+						text: /* @__PURE__ */ S("button", {
 							className: "picture-in-picture",
 							type: "button",
 							onClick: o,
-							children: /* @__PURE__ */ x("img", { src: ye })
+							disabled: h && !g,
+							"aria-label": h ? "Put the subtitles in the video" : "Picture in picture",
+							"aria-pressed": h ? c : void 0,
+							children: h ? /* @__PURE__ */ S(Se, {}) : /* @__PURE__ */ S("img", {
+								src: ye,
+								alt: ""
+							})
 						}),
-						toolTipText: /* @__PURE__ */ x("span", { children: "Picture in picture" })
+						toolTipText: /* @__PURE__ */ C("span", {
+							css: Pe,
+							children: [/* @__PURE__ */ S("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__ */ S("span", {
+								className: "hint",
+								children: "Then hover the video and click your browser's own pop out button"
+							}) : null]
+						})
 					}) : null,
-					/* @__PURE__ */ x(G, {
+					/* @__PURE__ */ S(K, {
 						id: "full-screen",
 						tooltipPlace: "top-end",
-						text: /* @__PURE__ */ x("button", {
+						text: /* @__PURE__ */ S("button", {
 							className: "full-screen",
 							type: "button",
 							onClick: () => e.toggleFullscreen(),
-							children: x(i ? E : T, {})
+							children: S(i ? D : E, {})
 						}),
-						toolTipText: /* @__PURE__ */ x("span", { children: i ? "Exit full screen (f)" : "Full screen (f)" })
+						toolTipText: /* @__PURE__ */ S("span", { children: i ? "Exit full screen (f)" : "Full screen (f)" })
 					})
 				]
 			})]
 		})]
 	});
-}, Fe = 3e3, Ie = p`
+}, Le = 9e3, Re = m`
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  pointer-events: none;
+
+  .card {
+    position: absolute;
+    /* Where Firefox draws its own toggle: right aligned, a little past the middle of the height. */
+    top: 52%;
+    right: calc(7 * var(--mp-unit));
+    transform: translateY(-50%);
+
+    display: flex;
+    align-items: center;
+    gap: calc(1.2 * var(--mp-unit));
+
+    max-width: min(calc(42 * var(--mp-unit)), 60%);
+    padding: calc(1.4 * var(--mp-unit)) calc(1.8 * var(--mp-unit));
+    border-radius: calc(0.8 * var(--mp-unit));
+    background-color: rgba(20, 20, 22, 0.94);
+    box-shadow: 0 0 calc(2 * var(--mp-unit)) rgba(0, 0, 0, 0.6);
+
+    opacity: 0;
+    transition: opacity 0.25s ease;
+  }
+
+  &.show .card {
+    opacity: 1;
+  }
+
+  .words {
+    display: flex;
+    flex-direction: column;
+    gap: calc(0.3 * var(--mp-unit));
+  }
+
+  .title {
+    ${B.bMedium.bold}
+    color: #fff;
+  }
+
+  .body {
+    ${B.bSmall.regular}
+    color: rgba(255, 255, 255, 0.75);
+  }
+
+  /* Points at the edge the browser's control lives on, which is the whole message. */
+  .arrow {
+    flex: none;
+    font-size: calc(2.6 * var(--mp-unit));
+    line-height: 1;
+    color: #6EA8FE;
+  }
+`, ze = () => {
+	let e = F((e) => e.burnedInSubtitles), t = F((e) => e.pictureInPictureMode), [n, r] = p(!1);
+	return u(() => {
+		if (t !== "burn-in" || !e) {
+			r(!1);
+			return;
+		}
+		r(!0);
+		let n = setTimeout(() => r(!1), Le);
+		return () => clearTimeout(n);
+	}, [t, e]), t !== "burn-in" || !e ? null : /* @__PURE__ */ S("div", {
+		css: Re,
+		className: n ? "show" : "",
+		role: "status",
+		children: /* @__PURE__ */ C("div", {
+			className: "card",
+			children: [/* @__PURE__ */ C("div", {
+				className: "words",
+				children: [/* @__PURE__ */ S("div", {
+					className: "title",
+					children: "Subtitles are in the picture"
+				}), /* @__PURE__ */ S("div", {
+					className: "body",
+					children: "Now hover the video and click your browser's own pop out button"
+				})]
+			}), /* @__PURE__ */ S("div", {
+				className: "arrow",
+				"aria-hidden": "true",
+				children: "→"
+			})]
+		})
+	});
+}, Be = 3e3, Ve = m`
   position: absolute;
   inset: 0;
   z-index: 2;
@@ -1584,7 +1736,7 @@ ${q}
      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;
-`, Le = p`
+`, He = m`
   position: relative;
   background-color: black;
   display: flex;
@@ -1616,38 +1768,38 @@ ${q}
   &.hide {
     cursor: none;
   }
-`, $ = (e, t = "") => a.toArray(e).flatMap((e, n) => {
-	let r = `${t}${s(e) && e.key != null ? e.key : n}`;
-	return s(e) && e.type === o ? $(e.props.children, `${r}/`) : [{
+`, Ue = (e, t = "") => o.toArray(e).flatMap((e, n) => {
+	let r = `${t}${c(e) && e.key != null ? e.key : n}`;
+	return c(e) && e.type === s ? Ue(e.props.children, `${r}/`) : [{
 		key: r,
 		item: e
 	}];
-}), Re = ({ ref: e, onVideoRef: t, onCanvasRef: n, overlay: r, controls: i, children: a }) => {
-	let o = P(), s = P((e) => e.hideUI), c = P((e) => e.setHideUI), u = d(void 0), f = d("mouse");
-	l(() => () => clearTimeout(u.current), []);
+}), We = ({ ref: e, onVideoRef: t, onCanvasRef: n, overlay: r, controls: i, children: a }) => {
+	let o = F(), s = F((e) => e.hideUI), c = F((e) => e.setHideUI), l = f(void 0), d = f("mouse");
+	u(() => () => clearTimeout(l.current), []);
 	let p = () => {
-		c(!1), clearTimeout(u.current), u.current = setTimeout(() => c(!0), Fe);
+		c(!1), clearTimeout(l.current), l.current = setTimeout(() => c(!0), Be);
 	};
-	return /* @__PURE__ */ S("div", {
-		css: Le,
+	return /* @__PURE__ */ C("div", {
+		css: He,
 		ref: e,
 		onPointerMove: (e) => {
-			f.current = e.pointerType, e.pointerType === "mouse" && p();
+			d.current = e.pointerType, e.pointerType === "mouse" && p();
 		},
 		onPointerDown: (e) => {
-			f.current = e.pointerType;
+			d.current = e.pointerType;
 		},
 		onMouseOut: (e) => {
 			let t = e.relatedTarget;
 			if (t && e.currentTarget.contains(t)) return;
 			let { left: n, right: r, top: i, bottom: a } = e.currentTarget.getBoundingClientRect();
-			e.clientX >= n && e.clientX < r && e.clientY >= i && e.clientY < a || (clearTimeout(u.current), c(!0));
+			e.clientX >= n && e.clientX < r && e.clientY >= i && e.clientY < a || (clearTimeout(l.current), c(!0));
 		},
 		className: s ? "hide" : "",
 		children: [
-			/* @__PURE__ */ x(me, { onCanvasRef: n }),
-			$(r).map(({ key: e, item: t }) => /* @__PURE__ */ x("div", {
-				css: Ie,
+			/* @__PURE__ */ S(me, { onCanvasRef: n }),
+			Ue(r).map(({ key: e, item: t }) => /* @__PURE__ */ S("div", {
+				css: Ve,
 				style: { ...s ? {
 					opacity: "0",
 					visibility: "hidden",
@@ -1655,89 +1807,94 @@ ${q}
 				} : {} },
 				children: t
 			}, e)),
-			i === !1 ? null : /* @__PURE__ */ x(Pe, {}),
-			/* @__PURE__ */ S("div", {
+			i === !1 ? null : /* @__PURE__ */ S(Ie, {}),
+			/* @__PURE__ */ S(ze, {}),
+			/* @__PURE__ */ C("div", {
 				className: "video",
 				onClick: () => {
-					if (f.current === "mouse") {
+					if (d.current === "mouse") {
 						o.togglePaused();
 						return;
 					}
-					s ? p() : (clearTimeout(u.current), c(!0));
+					s ? p() : (clearTimeout(l.current), c(!0));
 				},
-				children: [t ? /* @__PURE__ */ x("video", {
+				children: [t ? /* @__PURE__ */ S("video", {
 					ref: t,
 					playsInline: !0
 				}) : null, a]
 			})
 		]
 	});
-}, ze = ({ 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: u, thumbnailRead: d, thumbnailsEnabled: p } = r ?? {}, m = _(), h = g(), [v, y] = f(null), [b, S] = f(null), C = n?.media ?? v;
-	l(() => (m?.(C), () => m?.(null)), [C, m]), oe(v, b, r);
-	let w = L({
+}, Ge = ({ 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: d, thumbnailsEnabled: f } = r ?? {}, m = v(), h = _(), [g, y] = p(null), [b, x] = p(null), C = n?.media ?? g;
+	u(() => (m?.(C), () => m?.(null)), [C, m]), oe(g, b, r);
+	let w = R({
 		publicPath: s,
 		workerUrl: c,
-		length: p === !1 ? void 0 : a,
-		read: d ?? u,
+		length: f === !1 ? void 0 : a,
+		read: d ?? l,
 		downloadedRanges: o
-	}), T = n?.thumbnails?.all ?? w, E = R(v, b), D = P((e) => e.setSourceState);
-	l(() => {
-		D({
+	}), T = n?.thumbnails?.all ?? w, { toggle: E, mode: D, burnedIn: O } = z(g, b), k = F((e) => e.setSourceState);
+	u(() => {
+		k({
 			title: i,
 			size: a,
 			downloadedRanges: o
 		});
 	}, [
-		D,
+		k,
 		i,
 		a,
 		o
 	]);
-	let O = n?.thumbnails?.at;
-	l(() => {
-		D({
+	let A = n?.thumbnails?.at;
+	u(() => {
+		k({
 			thumbnails: T,
-			thumbnailAt: O,
-			togglePictureInPicture: E
+			thumbnailAt: A,
+			togglePictureInPicture: E,
+			pictureInPictureMode: D,
+			burnedInSubtitles: O
 		});
 	}, [
-		D,
+		k,
 		T,
-		O,
-		E
+		A,
+		E,
+		D,
+		O
 	]);
-	let k = n?.subtitles?.selection, A = n?.audioTracks?.selection;
-	return l(() => {
-		k && D({
-			subtitleTracks: k.options.map(({ id: e, label: t, disabled: n }) => ({
+	let j = n?.subtitles?.selection, M = n?.audioTracks?.selection;
+	return u(() => {
+		j && k({
+			subtitleTracks: j.options.map(({ id: e, label: t, disabled: n }) => ({
 				id: e,
 				label: t,
 				disabled: n
 			})),
-			selectedSubtitleTrack: k.selectedId ?? void 0,
-			selectSubtitleTrack: (e) => k.select(e == null ? null : String(e)),
-			subtitleOffLabel: k.offLabel
+			selectedSubtitleTrack: j.selectedId ?? void 0,
+			selectSubtitleTrack: (e) => j.select(e == null ? null : String(e)),
+			subtitleOffLabel: j.offLabel
 		});
-	}, [D, k]), l(() => {
-		A && D({
-			audioTracks: A.options.map(({ id: e, label: t, disabled: n }) => ({
+	}, [k, j]), u(() => {
+		M && k({
+			audioTracks: M.options.map(({ id: e, label: t, disabled: n }) => ({
 				id: e,
 				label: t,
 				disabled: n
 			})),
-			selectedAudioTrack: A.selectedId ?? void 0,
-			selectAudioTrack: (e) => A.select(String(e))
+			selectedAudioTrack: M.selectedId ?? void 0,
+			selectAudioTrack: (e) => M.select(String(e))
 		});
-	}, [D, A]), /* @__PURE__ */ x(Re, {
+	}, [k, M]), /* @__PURE__ */ S(We, {
 		ref: h,
 		onVideoRef: n ? void 0 : y,
-		onCanvasRef: S,
+		onCanvasRef: x,
 		overlay: e.overlay,
 		controls: e.controls,
 		children: t
 	});
-}, Be = p`
+}, Ke = m`
   /**
    * The chrome's whole scale, in one place.
    *
@@ -1807,17 +1964,17 @@ ${q}
   height: 100%;
   width: 100%;
   overflow: hidden;
-`, Ve = (e) => /* @__PURE__ */ x("div", {
-	css: Be,
-	children: /* @__PURE__ */ x(N.Provider, { children: /* @__PURE__ */ x(ze, {
+`, qe = (e) => /* @__PURE__ */ S("div", {
+	css: Ke,
+	children: /* @__PURE__ */ S(P.Provider, { children: /* @__PURE__ */ S(Ge, {
 		options: e,
 		children: e.children
 	}) })
-}), He = (e) => !!e && typeof e == "object" && "at" in e, Ue = (e) => !!e && typeof e == "object" && "selection" in e, We = ({ blob: e, name: t }) => ({
+}), Je = (e) => !!e && typeof e == "object" && "at" in e, Ye = (e) => !!e && typeof e == "object" && "selection" in e, Xe = ({ 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()
-}), Ge = async (e, t) => {
+}), Ze = async (e, t) => {
 	let n = await fetch(e, {
 		headers: { Range: "bytes=0-1" },
 		credentials: t
@@ -1827,8 +1984,8 @@ ${q}
 	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;
-}, Ke = async ({ url: e, length: t, name: n, credentials: r }) => {
-	let i = t ?? await Ge(e, r);
+}, Qe = async ({ url: e, length: t, name: n, credentials: r }) => {
+	let i = t ?? await Ze(e, r);
 	return {
 		length: i,
 		name: n,
@@ -1841,9 +1998,9 @@ ${q}
 			return a.arrayBuffer();
 		}
 	};
-}, qe = async (e) => {
-	if ("blob" in e) return We(e);
-	if ("url" in e) return Ke(e);
+}, $e = async (e) => {
+	if ("blob" in e) return Xe(e);
+	if ("url" in e) return Qe(e);
 	if ("read" in e) return {
 		length: e.length,
 		name: e.name,
@@ -1852,4 +2009,4 @@ ${q}
 	throw Error(`Unknown source type: ${e}`);
 };
 //#endregion
-export { Ve as MediaPlayer, Ve as default, N as Player, n as SUBTITLES_OFF, i as createPictureInPicture, r as createSubtitleRenderer, t as createThumbnailGenerator, qe as inputToRemuxerInput, Ue as isDelegatedTracks, He as isExternalThumbnails, M as sourceFeature, e as startPlayback, R as usePictureInPicture, P as usePlayer, L as useSeekThumbnails };
+export { qe as MediaPlayer, qe as default, P as Player, i as SUBTITLES_OFF, a as createPictureInPicture, t as createSubtitleRenderer, r as createThumbnailGenerator, $e as inputToRemuxerInput, Ye as isDelegatedTracks, Je as isExternalThumbnails, N as sourceFeature, e as startPlayback, z as usePictureInPicture, F as usePlayer, R as useSeekThumbnails };