@banou/media-player 0.6.2 → 0.8.0

package/dist/index.js

@@ -0,0 +1,1610 @@
+import { i as e, n as t, o as n, s as r, t as i } from "./engine-Dmc7JSd9.js";
+import { useCallback as a, useEffect as o, useMemo as s, useRef as c, useState as l } from "react";
+import { css as u, keyframes as d } from "@emotion/react";
+import { createPlayer as f, useContainerAttach as p, useMediaAttach as m } from "@videojs/react";
+import { definePlayerFeature as h, videoFeatures as g } from "@videojs/core/dom";
+import { Fragment as _, jsx as v, jsxs as y } from "@emotion/react/jsx-runtime";
+import { ChevronLeft as b, ChevronRight as x, Maximize as S, Minimize as C, Pause as w, Play as T, RotateCcw as E, Settings as D, Volume1 as O, Volume2 as k, VolumeX as A } from "react-feather";
+import { Tooltip as j } from "react-tooltip";
+//#region src/lib/react/source-feature.ts
+var ee = {
+	indexes: [],
+	thumbnails: [],
+	subtitleTracks: [],
+	selectedSubtitleTrack: void 0,
+	selectSubtitleTrack: () => {},
+	audioTracks: [],
+	selectedAudioTrack: void 0,
+	selectAudioTrack: () => {},
+	hideUI: !1,
+	setHideUI: () => {},
+	togglePictureInPicture: () => {},
+	playbackError: null,
+	ready: !1,
+	setSourceState: () => {}
+}, M = h({
+	name: "source",
+	state: () => ({ ...ee }),
+	attach({ set: e }) {
+		e({
+			setSourceState: (t) => e(t),
+			setHideUI: (t) => e({ hideUI: t })
+		});
+	}
+}), N = f({
+	features: [...g, M],
+	displayName: "MediaPlayer"
+}), P = N.usePlayer, te = (e) => {
+	if (!(!e || e === "und")) try {
+		return new Intl.DisplayNames([navigator.language || "en"], {
+			type: "language",
+			fallback: "none"
+		}).of(e) || void 0;
+	} catch {
+		return;
+	}
+}, F = (e) => e?.replace(/_/g, " ").trim() || void 0, ne = (e) => {
+	let t = e.map((e) => te(e.language) ?? F(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);
+		return {
+			track: e,
+			label: (n[i] ?? 0) > 1 && a && a !== i ? `${i} (${a})` : i
+		};
+	});
+}, I = (e) => ne(e).map(({ track: e, label: t }) => ({
+	id: e.streamIndex,
+	label: t
+})), re = (t, n, r) => {
+	let i = P(), { read: s, size: u, publicPath: d = "", libavWorkerUrl: f = "", jassubWorkerUrl: p = "", jassubWasmUrl: m = "", jassubLegacyWasmUrl: h, defaultFontUrl: g, bufferSize: _, autoplay: v = !1 } = r ?? {}, [y, b] = l(void 0), x = c(null), S = c(0), C = c(!1), w = c(s);
+	w.current = s;
+	let T = c(r?.onSeek);
+	T.current = r?.onSeek;
+	let E = c(r?.onPlaybackError);
+	E.current = r?.onPlaybackError;
+	let D = a((e) => {
+		let t = typeof e == "number" ? e : void 0;
+		C.current = !0, i.setSourceState({ selectedSubtitleTrack: t }), x.current?.selectSubtitleStream(t);
+	}, [i]), O = a((e) => {
+		typeof e == "number" && (i.setSourceState({ selectedAudioTrack: e }), b(e));
+	}, [i]), k = P((e) => e.setSourceState);
+	o(() => {
+		k({
+			selectSubtitleTrack: D,
+			selectAudioTrack: O
+		});
+	}, [
+		k,
+		D,
+		O
+	]), o(() => {
+		if (!t || !n || !u || !s) return;
+		let r = !1;
+		i.setSourceState({
+			playbackError: null,
+			ready: !1
+		});
+		let a = (e) => {
+			r || (console.error("playback failed", e), i.setSourceState({ playbackError: e }), E.current?.(e));
+		};
+		return (async () => {
+			try {
+				let o = await e({
+					videoElement: t,
+					canvasElement: n,
+					read: (e, t) => w.current(e, t),
+					length: u,
+					publicPath: d,
+					libavWorkerUrl: f,
+					jassubWorkerUrl: p,
+					jassubWasmUrl: m,
+					jassubLegacyWasmUrl: h,
+					defaultFontUrl: g,
+					bufferSize: _,
+					audioStreamIndex: y,
+					onReady: () => {
+						r || (i.setSourceState({ ready: !0 }), S.current > 0 && (t.currentTime = S.current, S.current = 0), v && t.play().catch(() => {}));
+					},
+					onError: a,
+					onRecovered: () => {
+						r || i.setSourceState({ playbackError: null });
+					},
+					onSeek: (e) => T.current?.(e),
+					onSubtitleStreams: (e) => {
+						r || i.setSourceState({
+							subtitleTracks: I(e),
+							...C.current ? {} : { selectedSubtitleTrack: e[0]?.streamIndex }
+						});
+					},
+					onAudioStreams: (e, t) => {
+						r || i.setSourceState({
+							audioTracks: I(e),
+							selectedAudioTrack: t
+						});
+					}
+				});
+				if (r) {
+					o.destroy();
+					return;
+				}
+				x.current = o, i.setSourceState({ indexes: o.indexes });
+				let s = i.selectedSubtitleTrack;
+				typeof s == "number" && o.selectSubtitleStream(s);
+			} catch (e) {
+				a(e);
+			}
+		})(), () => {
+			r = !0, S.current = t.currentTime, x.current?.destroy(), x.current = null, i.setSourceState({ ready: !1 });
+		};
+	}, [
+		i,
+		t,
+		n,
+		u,
+		d,
+		f,
+		p,
+		m,
+		h,
+		g,
+		_,
+		y,
+		v
+	]);
+}, L = 5e3, R = 6e4, z = ({ publicPath: e, workerUrl: n, length: r, read: i, downloadedRanges: a }) => {
+	let [u, d] = l([]), f = c(null), p = c(i);
+	p.current = i;
+	let m = s(() => a?.map(({ startByteOffset: e, endByteOffset: t }) => [e, t]), [a?.map(({ startByteOffset: e, endByteOffset: t }) => `${e}-${t}`).join(",")]), h = c(m);
+	return h.current = m, o(() => {
+		if (!r || !i || !e || !n) return;
+		let a = !1, o = null, s, c = L, l = () => {
+			t({
+				publicPath: e,
+				workerUrl: n,
+				length: r,
+				read: (e, t) => p.current(e, t),
+				onThumbnails: (e) => {
+					a || d(e);
+				}
+			}).then((e) => {
+				if (a) {
+					e.destroy();
+					return;
+				}
+				o = e, f.current = e, e.update(h.current);
+			}, () => {
+				a || (s = setTimeout(l, c), c = Math.min(c * 2, R));
+			});
+		};
+		return l(), () => {
+			a = !0, clearTimeout(s), f.current = null, o?.destroy(), d([]);
+		};
+	}, [
+		r,
+		e,
+		n
+	]), o(() => {
+		f.current?.update(m);
+	}, [m]), u;
+}, B = (e, t) => {
+	let n = P(), r = c(null);
+	return o(() => {
+		if (!e || !t) return;
+		let a = i({
+			video: e,
+			canvas: t,
+			fallback: () => n.togglePictureInPicture()
+		});
+		return r.current = a, () => {
+			a.destroy(), r.current = null;
+		};
+	}, [
+		e,
+		t,
+		n
+	]), a(() => {
+		r.current?.toggle().catch((e) => {
+			console.warn("picture in picture was refused", e);
+		});
+	}, []);
+}, V = {
+	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    ",
+		small: "\n      font-weight: 500;\n      font-size: calc(1.8 * var(--mp-unit));\n      line-height: calc(1.9 * var(--mp-unit));\n      @media (min-width: 960px) {\n        font-size: calc(1.8 * var(--mp-unit));\n        line-height: calc(2.2 * var(--mp-unit));\n      }\n      @media (min-width: 2560px) {\n        font-size: calc(2.2 * var(--mp-unit));\n        line-height: calc(2.6 * var(--mp-unit));\n      }\n    ",
+		extraSmall: "\n      font-weight: 500;\n      font-size: calc(1.4 * var(--mp-unit));\n      line-height: calc(1.7 * var(--mp-unit));\n      @media (min-width: 960px) {\n        font-size: calc(1.6 * var(--mp-unit));\n        line-height: calc(1.9 * var(--mp-unit));\n      }\n    "
+	},
+	bLarge: {
+		bold: "\n      font-weight: 600;\n      font-size: calc(1.4 * var(--mp-unit));\n      line-height: calc(2 * var(--mp-unit));\n      @media (min-width: 960px) {\n        font-size: calc(1.6 * var(--mp-unit));\n        line-height: calc(2.2 * var(--mp-unit));\n      }\n    ",
+		medium: "\n      font-weight: 500;\n      font-size: calc(1.4 * var(--mp-unit));\n      line-height: calc(2 * var(--mp-unit));\n      @media (min-width: 960px) {\n        font-size: calc(1.6 * var(--mp-unit));\n        line-height: calc(2.2 * var(--mp-unit));\n      }\n    ",
+		regular: "\n      font-weight: 400;\n      font-size: calc(1.4 * var(--mp-unit));\n      line-height: calc(2 * var(--mp-unit));\n      @media (min-width: 960px) {\n        font-size: calc(1.6 * var(--mp-unit));\n        line-height: calc(2.2 * var(--mp-unit));\n      }\n    "
+	},
+	bMedium: {
+		bold: "\n      font-weight: 600;\n      font-size: calc(1.2 * var(--mp-unit));\n      line-height: calc(1.7 * var(--mp-unit));\n      @media (min-width: 960px) {\n        font-size: calc(1.4 * var(--mp-unit));\n        line-height: calc(2 * var(--mp-unit));\n      }\n    ",
+		medium: "\n      font-weight: 500;\n      font-size: calc(1.2 * var(--mp-unit));\n      line-height: calc(1.7 * var(--mp-unit));\n      @media (min-width: 960px) {\n        font-size: calc(1.4 * var(--mp-unit));\n        line-height: calc(2 * var(--mp-unit));\n      }\n    ",
+		regular: "\n      font-weight: 400;\n      font-size: calc(1.2 * var(--mp-unit));\n      line-height: calc(1.7 * var(--mp-unit));\n      @media (min-width: 960px) {\n        font-size: calc(1.4 * var(--mp-unit));\n        line-height: calc(2 * var(--mp-unit));\n      }\n    "
+	},
+	bSmall: {
+		bold: "\n      font-weight: 600;\n      font-size: calc(1 * var(--mp-unit));\n      line-height: calc(1.4 * var(--mp-unit));\n      @media (min-width: 960px) {\n        font-size: calc(1.2 * var(--mp-unit));\n        line-height: calc(1.7 * var(--mp-unit));\n      }\n    ",
+		medium: "\n      font-weight: 500;\n      font-size: calc(1 * var(--mp-unit));\n      line-height: calc(1.4 * var(--mp-unit));\n      @media (min-width: 960px) {\n        font-size: calc(1.2 * var(--mp-unit));\n        line-height: calc(1.7 * var(--mp-unit));\n      }\n    ",
+		regular: "\n      font-weight: 400;\n      font-size: calc(1 * var(--mp-unit));\n      line-height: calc(1.4 * var(--mp-unit));\n      @media (min-width: 960px) {\n        font-size: calc(1.2 * var(--mp-unit));\n        line-height: calc(1.7 * var(--mp-unit));\n      }\n    "
+	},
+	bExtraSmall: {
+		bold: "\n      font-weight: 600;\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    ",
+		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    "
+	}
+}, ie = u`
+  top: unset !important;
+  left: unset !important;
+  width: 100%;
+  height: 100%;
+  margin: auto;
+  pointer-events: none;
+`, ae = u`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  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}
+  color: white;
+  text-shadow: 0 0 4px rgba(0, 0, 0, 1);
+  z-index: 2;
+  pointer-events: none;
+
+  /* one line with an ellipsis until there is width to wrap, since a release filename would
+     otherwise run to four lines on a phone */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  @media (min-width: 768px) {
+    padding: calc(2.4 * var(--mp-unit));
+    padding-top: calc(calc(2.4 * var(--mp-unit)) + env(safe-area-inset-top, 0px));
+    white-space: normal;
+    overflow: visible;
+  }
+
+  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);
+`, oe = u`
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+
+  ::after {
+    content: '';
+    width: calc(4 * var(--mp-unit));
+    height: calc(4 * var(--mp-unit));
+    border-radius: 50%;
+    border: 3px solid rgba(255, 255, 255, 0.25);
+    border-top-color: #fff;
+    animation: ${d`
+  to { transform: rotate(360deg); }
+`} 0.8s linear infinite;
+  }
+`, se = u`
+  position: absolute;
+  inset: auto 0 20%;
+  z-index: 3;
+  padding: 0 calc(2 * var(--mp-unit));
+  text-align: center;
+  color: #fff;
+  ${V.bLarge.regular}
+  text-shadow: 0 0 4px rgba(0, 0, 0, 1);
+  pointer-events: none;
+`, ce = (e) => e instanceof Error ? e.message : typeof e == "string" ? e : "Playback failed", le = ({ 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__ */ y(_, { children: [
+		t ? /* @__PURE__ */ v("div", {
+			css: ae,
+			style: { ...n ? {
+				opacity: "0",
+				pointerEvents: "none"
+			} : {} },
+			children: t
+		}) : void 0,
+		(a ? !i : o) && !r ? /* @__PURE__ */ v("div", { css: oe }) : void 0,
+		r ? /* @__PURE__ */ v("div", {
+			css: se,
+			children: ce(r)
+		}) : void 0,
+		/* @__PURE__ */ v("canvas", {
+			ref: e,
+			css: ie
+		})
+	] });
+}, 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) => {
+	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}`;
+}, ue = (e, t) => `${K(e)} / ${K(t)}`, de = (e) => u`
+  display: flex;
+  justify-content: flex-end;
+
+  border-radius: calc(0.4 * var(--mp-unit));
+  user-select: none;
+
+  z-index: 3;
+
+  * {
+    ${V.bMedium.regular}
+  }
+
+  ${e === "sm" && u`
+    padding: calc(0.4 * var(--mp-unit))!important;
+  `}
+  ${e === "md" && u`
+    padding: calc(0.6 * var(--mp-unit))!important;
+  `}
+  ${e === "lg" && u`
+    padding: calc(1.2 * var(--mp-unit))!important;
+  `}
+`, q = ({ id: e, toolTipText: t, text: n, delayShow: r = 0, closeDelay: i = 0, offset: a = 20, tooltipPlace: o = "top", disabled: s = !1, size: c = "md" }) => /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v("div", {
+	"data-tooltip-id": e,
+	"data-open": !0,
+	"data-tooltip-offset": a,
+	"data-tooltip-delay-show": r,
+	"data-tooltip-delay-hide": i,
+	"data-tooltip-place": o,
+	children: n
+}), !s && /* @__PURE__ */ v(j, {
+	css: de(c),
+	id: e,
+	noArrow: !0,
+	children: t
+})] }), J = ({ ref: e, onChange: t, orientation: n = "horizontal", disabled: r = !1 }) => {
+	let [i, s] = l(!1), u = c(t);
+	u.current = t;
+	let d = c(null), f = a((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 = a((e) => {
+		r || e.button > 0 || (d.current = e.pointerId, e.currentTarget.setPointerCapture?.(e.pointerId), s(!0), u.current(f(e.clientX, e.clientY)));
+	}, [r, f]), m = a((e) => {
+		d.current === e.pointerId && u.current(f(e.clientX, e.clientY));
+	}, [f]), h = a((e) => {
+		d.current === e.pointerId && (d.current = null, e.currentTarget.releasePointerCapture?.(e.pointerId), s(!1));
+	}, []);
+	return o(() => {
+		r && (d.current = null, s(!1));
+	}, [r]), {
+		dragging: i,
+		handlers: {
+			onPointerDown: p,
+			onPointerMove: m,
+			onPointerUp: h,
+			onPointerCancel: h,
+			style: { touchAction: "none" }
+		}
+	};
+}, fe = u`
+  position: relative;
+  height: calc(.4 * var(--mp-unit));
+
+  --thumbnail-width: calc(25 * var(--mp-unit));
+  --thumbnail-half: calc(12.5 * var(--mp-unit));
+
+  transition: transform .2s ease-in-out;
+
+  margin: 0 12px;
+  @media (min-width: 768px) {
+    margin: 0 16px;
+  }
+  @media (min-width: 2560px) {
+    margin: 0 24px;
+  }
+
+  user-select: none;
+  cursor: pointer;
+
+  :hover {
+    .background-bar {
+      transform: scaleY(1.5);
+    }
+    .loaded {
+      transform: scaleY(1.5);
+      top: calc(-.1 * var(--mp-unit));
+    }
+    .play-container {
+      transform: scaleY(1.5);
+    }
+  }
+
+
+  .background-bar {
+    position: absolute;
+    inset: 0;
+    background-color: hsla(0, 100%, 100%, .2);
+  }
+
+  .cursor-time {
+    display: flex;
+    justify-content: center;
+
+    text-shadow: 0 0 4px rgba(0, 0, 0, 1);
+    ${V.bMedium.bold}
+
+    position: absolute;
+    top: calc(-2.5 * var(--mp-unit));
+    width: calc(5 * var(--mp-unit));
+
+    margin-left: calc(-2.5 * var(--mp-unit));
+    pointer-events: none;
+  }
+
+  .loaded {
+    transform-origin: 0 0;
+    position: absolute;
+    bottom: 0;
+    height: calc(.4 * var(--mp-unit));
+    width: 100%;
+    .loaded-part {
+      transform-origin: 0 0;
+      bottom: 0;
+      height: calc(.4 * var(--mp-unit));
+      width: 100%;
+      position: absolute;
+      background-color: hsla(0, 100%, 100%, .4);
+    }
+  }
+
+  .play-container {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: calc(.4 * var(--mp-unit));
+  }
+
+  .play {
+    transform-origin: 0 0;
+    background-color: #f03;
+    position: absolute;
+    bottom: 0;
+    height: calc(.4 * var(--mp-unit));
+    width: 100%;
+  }
+
+  .padding {
+    position: absolute;
+    bottom: -7.5px;
+    height: calc(2 * var(--mp-unit));
+    width: 100%;
+  }
+
+  .thumbnail {
+    display: flex;
+    justify-content: center;
+
+    position: absolute;
+    top: calc(calc(-3.4375 * var(--mp-unit)) - var(--thumbnail-width) * 9/16);
+    height: calc(var(--thumbnail-width) * 9/16);
+    width: var(--thumbnail-width);
+
+    margin-left: calc(var(--thumbnail-half) * -1);
+    pointer-events: none;
+
+    img {
+      border-radius: calc(.4 * var(--mp-unit));
+      box-shadow: 0 0 calc(1 * var(--mp-unit)) rgba(0, 0, 0, .5);
+
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  /* a thumb is far wider than a cursor, so the hit strip grows to 44px and the track thickens */
+  @media (pointer: coarse) {
+    height: calc(.6 * var(--mp-unit));
+
+    /* press feedback, coarse only: a finger has no hover, so without this the bar gives no sign
+       it is being dragged */
+    &.dragging {
+      .background-bar, .loaded, .play-container {
+        transform: scaleY(1.5);
+      }
+    }
+
+    .loaded {
+      height: calc(.6 * var(--mp-unit));
+      .loaded-part {
+        height: calc(.6 * var(--mp-unit));
+      }
+    }
+
+    .play-container {
+      height: calc(.6 * var(--mp-unit));
+    }
+
+    .play {
+      height: calc(.6 * var(--mp-unit));
+    }
+
+    /* grows upward into the video: centred, it would hang over the control row and win hit
+       testing against taps meant for play, mute and fullscreen */
+    .padding {
+      height: 44px;
+      bottom: 0;
+    }
+  }
+
+  /* the clamp only holds the preview inside the bar while the bar is the wider of the two, so
+     below that the preview is narrowed instead */
+  @media (max-width: 480px) {
+    --thumbnail-width: calc(18 * var(--mp-unit));
+    --thumbnail-half: calc(9 * var(--mp-unit));
+  }
+`, pe = () => {
+	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), u = P((e) => e.thumbnails), d = P((e) => e.thumbnailAt), f = c(null), [p, m] = l(void 0), [h, g] = l(void 0), _ = c(void 0), { dragging: b, handlers: x } = J({
+		ref: f,
+		onChange: (e) => {
+			m(e), _.current !== "mouse" && g(e * n);
+		}
+	}), S = (e) => {
+		_.current = e.pointerType, x.onPointerDown(e);
+	}, C = (e) => {
+		x.onPointerUp(e), e.pointerType !== "mouse" && g(void 0);
+	}, w = (e) => {
+		if (!f.current) return;
+		let { left: t, right: r } = f.current.getBoundingClientRect();
+		return Math.min(Math.max((e - t) / (r - t), 0), 1) * n;
+	}, T = (e) => {
+		g(w(e.clientX));
+	}, E = () => {
+		f.current && g(void 0);
+	}, D = (e) => n ? e / n * 100 : 0, O = s(() => 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__ */ v("div", {
+			className: "loaded-part",
+			style: {
+				transform: `scaleX(${u})`,
+				marginLeft: `${d}%`
+			}
+		}, t);
+	}) ?? [], [
+		n,
+		a.length,
+		i?.map(({ startByteOffset: e, endByteOffset: t }) => `${e}/${t}`).join(",")
+	]), k = s(() => {
+		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]);
+	o(() => {
+		if (p === void 0 || !n) return;
+		let t = p * n;
+		e.seek(t);
+	}, [
+		e,
+		p,
+		n
+	]);
+	let A = s(() => !n || typeof t != "number" ? 0 : t / n, [n, t]), j = s(() => {
+		if (h) {
+			if (d) return d(h);
+			if (u.length) return u.find(({ startTime: e, endTime: t }) => e <= h && h < t);
+		}
+	}, [
+		u,
+		d,
+		h
+	]);
+	return /* @__PURE__ */ y("div", {
+		css: fe,
+		ref: f,
+		className: b ? "progress-bar dragging" : "progress-bar",
+		onMouseMove: T,
+		onMouseOut: E,
+		children: [
+			/* @__PURE__ */ v("div", { className: "background-bar" }),
+			h ? /* @__PURE__ */ v("div", {
+				className: "cursor-time",
+				style: { left: `clamp(calc(1.8 * var(--mp-unit)), ${D(h)}%, calc(100% - calc(1.8 * var(--mp-unit))))` },
+				children: k
+			}) : void 0,
+			/* @__PURE__ */ v("div", { className: "progress" }),
+			/* @__PURE__ */ v("div", {
+				className: "loaded",
+				children: O
+			}),
+			/* @__PURE__ */ v("div", { className: "hover" }),
+			/* @__PURE__ */ v("div", {
+				className: "play-container",
+				children: /* @__PURE__ */ v("div", {
+					className: "play",
+					style: { transform: `scaleX(${A})` }
+				})
+			}),
+			/* @__PURE__ */ v("div", { className: "chapters" }),
+			/* @__PURE__ */ v("div", { className: "scrubber" }),
+			/* @__PURE__ */ v("div", {
+				className: "padding",
+				...x,
+				onPointerDown: S,
+				onPointerUp: C,
+				onPointerCancel: C
+			}),
+			/* @__PURE__ */ v("div", {
+				className: "thumbnail",
+				style: { left: `clamp(var(--thumbnail-half), ${D(h ?? 1)}%, calc(100% - var(--thumbnail-half)))` },
+				children: j?.url ? /* @__PURE__ */ v("img", { src: j.url }) : void 0
+			})
+		]
+	});
+}, me = "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", he = u`
+display: flex;
+align-items: center;
+justify-content: center;
+flex-direction: column;
+width: 100%;
+
+.playback-slider {
+  display: flex;
+  align-items: center;
+
+  padding: 8px 4px;
+  margin: 0 2px;
+  /* a finger needs a 44px band to press, so the padding grows while the track stays 3px */
+  @media (pointer: coarse) {
+    padding: 20px 8px;
+  }
+
+  cursor: pointer;
+
+  > div {
+    position: relative;
+
+    background: #ccc;
+    border-radius: 4px;
+
+    width: 120px;
+    max-width: 100%;
+    height: 3px;
+    @media (min-width: 768px) {
+      height: 4px;
+    }
+  }
+
+  .playback-handle {
+    position: absolute;
+
+
+    background: #ffffff;
+    border-radius: 50%;
+    transform: translateX(-50%);
+    pointer-events: none;
+
+    width: 10px;
+    height: 10px;
+    top: -3.5px;
+    @media (min-width: 768px) {
+      width: 12px;
+      height: 12px;
+      top: -4px;
+    }
+  }
+}
+`, ge = () => {
+	let e = P(), t = P((e) => e.playbackRate), n = c(null), r = c(null), i = .25, a = 3 - i, s = (e, t = .05) => Math.round(e / t) * t, l = s(t || 1), u = (e) => (e - i) / a * 100, d = (e) => s(i + e * a), { handlers: f } = J({
+		ref: r,
+		onChange: (t) => e.setPlaybackRate(d(t))
+	}), p = (t) => {
+		t.preventDefault();
+		let n = .05, r = l;
+		r = t.deltaY < 0 ? Math.min(3, r + n) : Math.max(i, r - n), e.setPlaybackRate(r);
+	};
+	o(() => {
+		let e = n.current;
+		return e && e.addEventListener("wheel", p, { passive: !1 }), () => {
+			e && e.removeEventListener("wheel", p);
+		};
+	}, [t]);
+	let m = u(l);
+	return /* @__PURE__ */ y("div", {
+		css: he,
+		children: [/* @__PURE__ */ y("div", { children: [l.toFixed(2), "x"] }), /* @__PURE__ */ v("div", {
+			className: "playback-slider",
+			ref: n,
+			...f,
+			children: /* @__PURE__ */ v("div", {
+				ref: r,
+				style: { background: `linear-gradient(to right,
+              #fff 0% ${m}%,
+              #3A3A3A ${m}% 100%
+            )` },
+				children: /* @__PURE__ */ v("div", {
+					className: "playback-handle",
+					style: { left: `${m}%` }
+				})
+			})
+		})]
+	});
+}, _e = u`
+position: relative;
+
+.settings {
+  /* the icon keeps its size, the pressable box grows around it */
+  @media (pointer: coarse) {
+    box-sizing: border-box;
+    justify-content: center;
+
+    min-width: 44px;
+    min-height: 44px;
+  }
+}
+
+.popover {
+  position: absolute;
+  /* the gear sits a couple of buttons in from the right edge, so a centred popover hangs off that
+     edge on a phone. It anchors to the button instead until the viewport has room to centre it. */
+  right: 0;
+  transform: none;
+
+  overflow-y: auto;
+  width: 180px;
+  max-width: calc(100vw - 24px);
+  height: 160px;
+  top: -180px;
+  @media (min-width: 768px) {
+    right: 50%;
+    transform: translateX(50%);
+    width: 250px;
+    height: 160px;
+  }
+
+  display: flex;
+  flex-direction: column;
+
+  border-radius: 8px;
+  background-color: rgba(28,28,28,0.95);
+  ${V.bMedium.regular}
+
+  z-index: 4;
+
+  > div {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    color: #fff;
+    outline: none;
+
+    padding: 8px 6px 8px 12px;
+
+    width: 100%;
+    /* rows keep their own height inside the fixed height column, so a long page scrolls rather than
+       squashing every row into it */
+    flex-shrink: 0;
+    @media (pointer: coarse) {
+      box-sizing: border-box;
+      min-height: 44px;
+    }
+
+    :first-of-type {
+      border-radius: 8px 8px 0 0;
+    }
+    :last-of-type {
+      border-radius: 0 0 8px 8px;
+    }
+    :not(&.no-hover) {
+      cursor: pointer;
+    }
+    :not(&.no-hover):hover {
+      background-color: rgba(255,255,255,.1);
+    }
+
+    > div {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .secondary {
+        color: #eee;
+        ${V.bSmall.regular}
+      }
+    }
+  }
+
+  .back {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    border-bottom: 1px solid #4D4D4E;
+
+    svg {
+      transform: translateX(-4px);
+      transition: transform 0.2s ease-in-out;
+    }
+
+    :hover {
+      svg {
+        transform: translateX(-8px);
+      }
+    }
+  }
+}
+
+.playback-rate {
+  .slider {
+    width: 100%;
+  }
+  .options {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    align-items: center;
+
+    padding: 8px 12px;
+    /* four presets across a 180px popover leave targets 34px wide, so a finger gets two rows of two
+       until the popover is wide enough for the row of four */
+    @media (pointer: coarse) {
+      grid-template-columns: 1fr 1fr;
+    }
+    @media (pointer: coarse) and (min-width: 768px) {
+      grid-template-columns: 1fr 1fr 1fr 1fr;
+    }
+
+    > div {
+      display: flex;
+      align-items: center;
+      border-radius: 4px;
+
+      padding: 8px 6px;
+      height: 100%;
+      @media (pointer: coarse) {
+        box-sizing: border-box;
+        min-height: 44px;
+      }
+
+      cursor: pointer;
+      :hover {
+        background-color: rgba(255,255,255,.1);
+      }
+    }
+  }
+}
+
+.track-list {
+  .description {
+    word-break: break-word;
+  }
+}
+`, Y = ({ title: e, tracks: t, selected: n, onSelect: r, onBack: i, allowDisable: a }) => /* @__PURE__ */ y("div", {
+	className: "popover track-list",
+	children: [
+		/* @__PURE__ */ y("div", {
+			className: "back",
+			onClick: i,
+			children: [/* @__PURE__ */ v(b, {}), /* @__PURE__ */ v("span", { children: e })]
+		}),
+		a ? /* @__PURE__ */ y("div", {
+			onClick: () => r(void 0),
+			children: [/* @__PURE__ */ v("span", { children: "Disable" }), /* @__PURE__ */ v("span", { children: n === void 0 ? "✓" : "" })]
+		}) : null,
+		t.map(({ id: e, label: t }) => /* @__PURE__ */ y("div", {
+			onClick: () => r(e),
+			className: "description",
+			children: [/* @__PURE__ */ v("span", { children: t }), /* @__PURE__ */ v("span", { children: n === e ? "✓" : "" })]
+		}, e))
+	]
+}), ve = () => {
+	let e = P(), t = P((e) => e.playbackRate), n = P((e) => e.subtitleTracks), r = P((e) => e.selectedSubtitleTrack), i = P((e) => e.selectSubtitleTrack), a = P((e) => e.audioTracks), s = P((e) => e.selectedAudioTrack), u = P((e) => e.selectAudioTrack), [d, f] = l(!1), [p, m] = l(0), h = c(null), g = () => {
+		f(!d), m(0);
+	}, _ = (t) => {
+		e.setPlaybackRate(t), m(0);
+	};
+	o(() => {
+		let e = (e) => {
+			d && h.current && !h.current.contains(e.target) && g();
+		};
+		return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
+	}, [d]);
+	let S = (e) => {
+		i(e), g();
+	}, C = (e) => {
+		e !== void 0 && u(e), g();
+	}, w = (e) => () => {
+		m(e);
+	};
+	return /* @__PURE__ */ y("div", {
+		css: _e,
+		ref: h,
+		children: [
+			/* @__PURE__ */ v(q, {
+				id: "settings",
+				disabled: d,
+				text: /* @__PURE__ */ v("button", {
+					className: "settings",
+					type: "button",
+					onClick: g,
+					children: /* @__PURE__ */ v(D, {})
+				}),
+				toolTipText: /* @__PURE__ */ v("span", { children: "Settings" })
+			}),
+			d && p === 0 && /* @__PURE__ */ y("div", {
+				className: "popover menu",
+				children: [
+					a.length > 1 ? /* @__PURE__ */ y("div", {
+						onClick: w(3),
+						children: [/* @__PURE__ */ v("div", { children: "Audio" }), /* @__PURE__ */ v("div", { children: /* @__PURE__ */ v(x, {}) })]
+					}) : null,
+					n.length > 0 ? /* @__PURE__ */ y("div", {
+						onClick: w(2),
+						children: [/* @__PURE__ */ v("div", { children: "Subtitles" }), /* @__PURE__ */ v("div", { children: /* @__PURE__ */ v(x, {}) })]
+					}) : null,
+					/* @__PURE__ */ y("div", {
+						onClick: w(1),
+						children: [/* @__PURE__ */ v("div", { children: "Playback speed" }), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("span", {
+							className: "secondary",
+							children: t === 1 ? "(Default)" : t.toFixed(2)
+						}), /* @__PURE__ */ v(x, {})] })]
+					})
+				]
+			}),
+			d && p === 1 && /* @__PURE__ */ y("div", {
+				className: "popover playback-rate",
+				children: [
+					/* @__PURE__ */ y("div", {
+						className: "back",
+						onClick: w(0),
+						children: [/* @__PURE__ */ v(b, {}), /* @__PURE__ */ v("span", { children: "Playback speed" })]
+					}),
+					/* @__PURE__ */ v("div", {
+						className: "slider no-hover",
+						children: /* @__PURE__ */ v(ge, {})
+					}),
+					/* @__PURE__ */ y("div", {
+						className: "options no-hover",
+						children: [
+							/* @__PURE__ */ v("div", {
+								onClick: () => _(.5),
+								children: "0.5x"
+							}),
+							/* @__PURE__ */ v("div", {
+								onClick: () => _(1),
+								children: "1x"
+							}),
+							/* @__PURE__ */ v("div", {
+								onClick: () => _(1.5),
+								children: "1.5x"
+							}),
+							/* @__PURE__ */ v("div", {
+								onClick: () => _(2),
+								children: "2x"
+							})
+						]
+					})
+				]
+			}),
+			d && p === 2 && /* @__PURE__ */ v(Y, {
+				title: "Subtitles",
+				tracks: n,
+				selected: r,
+				onSelect: S,
+				onBack: w(0),
+				allowDisable: !0
+			}),
+			d && p === 3 && /* @__PURE__ */ v(Y, {
+				title: "Audio",
+				tracks: a,
+				selected: s,
+				onSelect: C,
+				onBack: w(0)
+			})
+		]
+	});
+}, ye = {
+	primary: "#EAEBEE",
+	secondary: "#D0D0D9",
+	hover: "rgba(255, 255, 255, 0.13)",
+	borderPrimary: "#384F70",
+	backgroundTooltip: "#222222"
+}, be = u`
+  display: flex;
+  align-items: center;
+
+  padding: 16px 4px;
+  margin: 0 2px;
+  /* a finger needs a 44px band to press, so the padding grows while the track stays 3px */
+  @media (pointer: coarse) {
+    padding: 22px 4px;
+  }
+
+  cursor: pointer;
+
+  > div {
+    position: relative;
+
+    background: #ccc;
+    border-radius: 4px;
+
+    width: 80px;
+    height: 3px;
+    /* the control bar has under 360px to fit every button once the slider is always open, so the
+       track lends some of its length back on a phone and takes it again on anything wider */
+    @media (pointer: coarse) {
+      width: 64px;
+    }
+    @media (pointer: coarse) and (min-width: 768px) {
+      width: 80px;
+    }
+  }
+
+  .volume-handle {
+    position: absolute;
+    top: -3.5px;
+
+    background: #ffffff;
+    border-radius: 50%;
+    transform: translateX(-50%);
+    pointer-events: none;
+
+    width: 10px;
+    height: 10px;
+  }
+`, xe = ({ value: e, onChange: t }) => {
+	let n = P((e) => e.volume), r = P((e) => e.muted), i = c(null), a = c(null), { handlers: l } = J({
+		ref: a,
+		onChange: t
+	}), u = (n) => {
+		n.preventDefault();
+		let r = .05, i = e;
+		i = n.deltaY < 0 ? Math.min(1, i + r) : Math.max(0, i - r), t(i);
+	};
+	o(() => {
+		let e = i.current;
+		return e && e.addEventListener("wheel", u, { passive: !1 }), () => {
+			e && e.removeEventListener("wheel", u);
+		};
+	}, [e]);
+	let d = e * 100, f = s(() => Math.round(r ? 0 : G(n) * 100), [n, r]);
+	return /* @__PURE__ */ v(q, {
+		id: "volume-slider",
+		text: /* @__PURE__ */ v("div", {
+			ref: i,
+			css: be,
+			...l,
+			children: /* @__PURE__ */ v("div", {
+				ref: a,
+				style: { background: `linear-gradient(to right,
+                #fff 0% ${d}%,
+                #3A3A3A ${d}% 100%
+              )` },
+				children: /* @__PURE__ */ v("div", {
+					className: "volume-handle",
+					style: { left: `${e * 100}%` }
+				})
+			})
+		}),
+		toolTipText: /* @__PURE__ */ y("div", {
+			className: "volume-value",
+			children: [f, "%"]
+		})
+	});
+}, Se = u`
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  .volume-slider-container {
+    display: flex;
+    align-items: center;
+
+    width: 0;
+    margin-right: 0;
+    overflow: hidden;
+    pointer-events: none;
+
+    transition: margin .2s cubic-bezier(0.4,0,1,1), width .2s cubic-bezier(0.4,0,1,1);
+    -webkit-transition: margin .2s cubic-bezier(0.4,0,1,1), width .2s cubic-bezier(0.4,0,1,1);
+
+    .volume-slider-background {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      border-radius: 4px;
+
+      .volume-value {
+        ${V.bMedium.regular};
+        color: #ffffff;
+      }
+    }
+  }
+
+  &:hover .volume-slider-container {
+    width: calc(9 * var(--mp-unit));
+
+    transition: margin .2s cubic-bezier(0,0,0.2,1), width .2s cubic-bezier(0,0,0.2,1);
+    -webkit-transition: margin .2s cubic-bezier(0,0,0.2,1), width .2s cubic-bezier(0,0,0.2,1);
+
+    pointer-events: auto;
+  }
+
+  /* a touch screen has no hover, so the slider stays open there and the button only mutes */
+  @media (pointer: coarse) {
+    /* auto, not a fixed rem: the container keeps overflow: hidden, so a narrower fixed width
+       silently clips the track and makes the clipped part unhittable */
+    .volume-slider-container,
+    &:hover .volume-slider-container {
+      width: auto;
+
+      pointer-events: auto;
+    }
+
+    /* a 44px press target around an 18px icon, floored here because the control bar sets the
+       padding at a higher specificity */
+    .sound {
+      /* border-box explicitly, since a consumer reset cannot be assumed */
+      box-sizing: border-box;
+      justify-content: center;
+
+      min-width: 44px;
+      min-height: 44px;
+    }
+  }
+
+`, Ce = ({ ref: e }) => {
+	let t = P(), n = P((e) => e.volume), r = P((e) => e.muted), i = s(() => G(n), [n]);
+	return /* @__PURE__ */ y("div", {
+		css: Se,
+		children: [/* @__PURE__ */ v(q, {
+			id: "sound",
+			text: /* @__PURE__ */ v("button", {
+				className: "sound",
+				type: "button",
+				onClick: () => t.toggleMuted(),
+				ref: e,
+				children: v(r || n === 0 ? A : n <= .5 ? O : k, {
+					size: 18,
+					color: "#fff"
+				})
+			}),
+			toolTipText: /* @__PURE__ */ v("span", { children: r ? "Unmute (m)" : "Mute (m)" })
+		}), /* @__PURE__ */ v("div", {
+			className: "volume-slider-container",
+			children: /* @__PURE__ */ v("div", {
+				className: "volume-slider-background",
+				children: /* @__PURE__ */ v(xe, {
+					value: r ? 0 : i,
+					onChange: (e) => {
+						t.setVolume(W(e));
+					}
+				})
+			})
+		})]
+	});
+}, X = .05, Z = 5, we = u`
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+
+  background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.45) 20%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0.15) 70%, transparent 100%);
+  transition: opacity 0.1s cubic-bezier(.4,0,1,1);
+
+  .actions {
+    display: flex;
+    justify-content: space-between;
+
+    /* repeated per breakpoint: nested at-rules are hoisted after the rule, so a shorthand inside a
+       media query would override a longhand above it and silently drop the safe-area inset */
+    padding: 6px calc(12px + env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) calc(12px + env(safe-area-inset-left, 0px));
+    @media (min-width: 768px) {
+      padding: 8px calc(16px + env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px));
+    }
+    @media (min-width: 2560px) {
+      padding: 8px calc(24px + env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) calc(24px + env(safe-area-inset-left, 0px));
+    }
+
+    .left, .right {
+      display: flex;
+      align-items: center;
+
+      button {
+        display: flex;
+        align-items: center;
+
+        outline: none;
+        border: none;
+        background: none;
+
+        svg {
+          width: 18px;
+          height: 18px;
+          @media (min-width: 768px) {
+            width: 24px;
+            height: 24px;
+          }
+          @media (min-width: 2560px) {
+            width: 28px;
+            height: 28px;
+          }
+        }
+
+        svg {
+          stroke: #fff;
+        }
+      }
+
+      .play, .sound, .time, .settings, .picture-in-picture, .full-screen {
+        display: flex;
+        align-items: center;
+
+        height: 100%;
+
+        border-radius: 4px;
+        user-select: none;
+
+        padding: 8px;
+        @media (min-width: 768px) {
+          padding: 8px 12px;
+        }
+        @media (min-width: 2560px) {
+          padding: 8px 12px;
+        }
+      }
+
+      .play, .sound, .settings, .picture-in-picture, .full-screen {
+        border-radius: 4px;
+
+        padding: 8px;
+        @media (min-width: 768px) {
+          padding: 8px 12px;
+        }
+        @media (min-width: 2560px) {
+          padding: 8px 12px;
+        }
+
+        cursor: pointer;
+
+        :hover {
+          background-color: ${ye.hover};
+        }
+
+        /* the hit area grows, the icon does not, keyed on the pointer because a narrow desktop
+           window still has a mouse */
+        @media (pointer: coarse) {
+          /* border-box explicitly, since a consumer reset cannot be assumed */
+          box-sizing: border-box;
+          min-width: 44px;
+          min-height: 44px;
+          justify-content: center;
+        }
+      }
+    }
+
+    .left {
+      .time {
+        ${V.bMedium.regular}
+        text-shadow: 0 0 4px rgba(0, 0, 0, 1);
+      }
+    }
+    .right {
+      .picture-in-picture {
+        img {
+          width: 22px;
+          height: 22px;
+          @media (min-width: 768px) {
+            width: 28px;
+            height: 28px;
+          }
+          @media (min-width: 2560px) {
+            width: 32px;
+            height: 32px;
+          }
+        }
+      }
+    }
+  }
+`, Te = () => {
+	let e = P(), t = P((e) => e.paused), n = P((e) => e.currentTime), r = P((e) => e.duration), i = P((e) => e.fullscreen), s = P((e) => e.hideUI), c = P((e) => e.togglePictureInPicture), [u, d] = l(null), f = r > 0 && n === r, p = a(({ 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]);
+	o(() => {
+		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") p({
+				direction: "up",
+				stepSize: X
+			});
+			else if (t.key === "ArrowDown") p({
+				direction: "down",
+				stepSize: X
+			});
+			else if (t.key === "ArrowRight") {
+				if (!e.duration) return;
+				e.seek(Math.min(e.currentTime + Z, e.duration));
+			} else t.key === "ArrowLeft" ? e.seek(Math.max(e.currentTime - Z, 0)) : r = !1;
+			r && t.preventDefault();
+		};
+		return window.addEventListener("keydown", t), () => window.removeEventListener("keydown", t);
+	}, [e, p]);
+	let m = a((e) => {
+		e.preventDefault(), e.deltaY < 0 ? p({
+			direction: "up",
+			stepSize: X
+		}) : p({
+			direction: "down",
+			stepSize: X
+		});
+	}, [p]);
+	return o(() => {
+		if (u) return u.addEventListener("wheel", m, { passive: !1 }), () => u.removeEventListener("wheel", m);
+	}, [u, m]), /* @__PURE__ */ y("div", {
+		css: we,
+		style: { ...s ? {
+			opacity: "0",
+			pointerEvents: "none"
+		} : {} },
+		children: [/* @__PURE__ */ v(pe, {}), /* @__PURE__ */ y("div", {
+			className: "actions",
+			children: [/* @__PURE__ */ y("div", {
+				className: "left",
+				children: [
+					/* @__PURE__ */ v(q, {
+						id: "play",
+						tooltipPlace: "top-start",
+						text: /* @__PURE__ */ v("button", {
+							className: "play",
+							type: "button",
+							onClick: () => e.togglePaused(),
+							children: v(f ? E : t ? T : w, {})
+						}),
+						toolTipText: /* @__PURE__ */ v("span", { children: f ? "Replay (k)" : t ? "Play (k)" : "Pause (k)" })
+					}),
+					/* @__PURE__ */ v(Ce, { ref: d }),
+					/* @__PURE__ */ v("div", {
+						className: "time",
+						children: ue(n, r)
+					})
+				]
+			}), /* @__PURE__ */ y("div", {
+				className: "right",
+				children: [
+					/* @__PURE__ */ v(ve, {}),
+					/* @__PURE__ */ v(q, {
+						id: "picture-in-picture",
+						text: /* @__PURE__ */ v("button", {
+							className: "picture-in-picture",
+							type: "button",
+							onClick: c,
+							children: /* @__PURE__ */ v("img", { src: me })
+						}),
+						toolTipText: /* @__PURE__ */ v("span", { children: "Picture in picture" })
+					}),
+					/* @__PURE__ */ v(q, {
+						id: "full-screen",
+						tooltipPlace: "top-end",
+						text: /* @__PURE__ */ v("button", {
+							className: "full-screen",
+							type: "button",
+							onClick: () => e.toggleFullscreen(),
+							children: v(i ? C : S, {})
+						}),
+						toolTipText: /* @__PURE__ */ v("span", { children: i ? "Exit full screen (f)" : "Full screen (f)" })
+					})
+				]
+			})]
+		})]
+	});
+}, Ee = 3e3, De = u`
+  position: relative;
+  background-color: black;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+
+  & > div:not(:last-of-type) {
+    position: absolute;
+    z-index: 2;
+  }
+
+  canvas {
+    height: 100%;
+    width: 100%;
+    pointer-events: none;
+    position: absolute;
+    z-index: 1;
+  }
+
+  .video, video {
+    height: 100%;
+    width: 100%;
+    background-color: black;
+    object-fit: contain;
+  }
+
+  &.hide {
+    cursor: none;
+  }
+`, Oe = ({ ref: e, onVideoRef: t, onCanvasRef: n, overlay: r, children: i }) => {
+	let a = P(), s = P((e) => e.hideUI), l = P((e) => e.setHideUI), u = c(void 0), d = c("mouse");
+	o(() => () => clearTimeout(u.current), []);
+	let f = () => {
+		l(!1), clearTimeout(u.current), u.current = setTimeout(() => l(!0), Ee);
+	};
+	return /* @__PURE__ */ y("div", {
+		css: De,
+		ref: e,
+		onPointerMove: (e) => {
+			d.current = e.pointerType, e.pointerType === "mouse" && f();
+		},
+		onPointerDown: (e) => {
+			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), l(!0));
+		},
+		className: s ? "hide" : "",
+		children: [
+			/* @__PURE__ */ v(le, { onCanvasRef: n }),
+			r,
+			/* @__PURE__ */ v(Te, {}),
+			/* @__PURE__ */ y("div", {
+				className: "video",
+				onClick: () => {
+					if (d.current === "mouse") {
+						a.togglePaused();
+						return;
+					}
+					s ? f() : (clearTimeout(u.current), l(!0));
+				},
+				children: [t ? /* @__PURE__ */ v("video", {
+					ref: t,
+					playsInline: !0
+				}) : null, i]
+			})
+		]
+	});
+}, Q = ({ options: e, children: t }) => {
+	let n = "media" in e ? e : null, r = n ? null : e, { title: i } = e, { size: a, downloadedRanges: s, publicPath: c, libavWorkerUrl: u, read: d, thumbnailRead: f, thumbnailsEnabled: h } = r ?? {}, g = m(), _ = p(), [y, b] = l(null), [x, S] = l(null), C = n?.media ?? y;
+	o(() => (g?.(C), () => g?.(null)), [C, g]), re(y, x, r);
+	let w = z({
+		publicPath: c,
+		workerUrl: u,
+		length: h === !1 ? void 0 : a,
+		read: f ?? d,
+		downloadedRanges: s
+	}), T = n?.thumbnails?.all ?? w, E = B(y, x), D = P((e) => e.setSourceState);
+	o(() => {
+		D({
+			title: i,
+			size: a,
+			downloadedRanges: s
+		});
+	}, [
+		D,
+		i,
+		a,
+		s
+	]);
+	let O = n?.thumbnails?.at;
+	o(() => {
+		D({
+			thumbnails: T,
+			thumbnailAt: O,
+			togglePictureInPicture: E
+		});
+	}, [
+		D,
+		T,
+		O,
+		E
+	]);
+	let k = n?.subtitles?.selection, A = n?.audioTracks?.selection;
+	return o(() => {
+		k && D({
+			subtitleTracks: k.options.map(({ id: e, label: t }) => ({
+				id: e,
+				label: t
+			})),
+			selectedSubtitleTrack: k.selectedId ?? void 0,
+			selectSubtitleTrack: (e) => k.select(e == null ? null : String(e))
+		});
+	}, [D, k]), o(() => {
+		A && D({
+			audioTracks: A.options.map(({ id: e, label: t }) => ({
+				id: e,
+				label: t
+			})),
+			selectedAudioTrack: A.selectedId ?? void 0,
+			selectAudioTrack: (e) => A.select(String(e))
+		});
+	}, [D, A]), /* @__PURE__ */ v(Oe, {
+		ref: _,
+		onVideoRef: n ? void 0 : b,
+		onCanvasRef: S,
+		overlay: e.overlay,
+		children: t
+	});
+}, ke = u`
+  /**
+   * The chrome's whole scale, in one place.
+   *
+   * Everything inside is sized against this rather than against \`rem\`, because \`rem\` is root
+   * relative and a library cannot own the host page's root font. The old contract was that the host
+   * set \`html { font-size: 62.5% }\`, which silently rendered every control 1.6x too large in any app
+   * that did not, and could not be met by an app whose own screens are sized against the default.
+   * Override it on the player element to rescale the whole chrome.
+   */
+  --mp-unit: 10px;
+
+  display: flex;
+  justify-content: center;
+  background-color: #111;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+`, $ = (e) => /* @__PURE__ */ v("div", {
+	css: ke,
+	children: /* @__PURE__ */ v(N.Provider, { children: /* @__PURE__ */ v(Q, {
+		options: e,
+		children: e.children
+	}) })
+}), Ae = (e) => !!e && typeof e == "object" && "at" in e, je = (e) => !!e && typeof e == "object" && "selection" in e, Me = ({ 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()
+}), Ne = async (e, t) => {
+	let n = await fetch(e, {
+		headers: { Range: "bytes=0-1" },
+		credentials: t
+	});
+	if (!n.ok) throw Error(`The source could not be read: HTTP ${n.status}`);
+	let r = n.headers.get("Content-Range")?.split("/").at(1), i = Number(r || n.headers.get("Content-Length"));
+	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;
+}, Pe = async ({ url: e, length: t, name: n, credentials: r }) => {
+	let i = t ?? await Ne(e, r);
+	return {
+		length: i,
+		name: n,
+		read: async (t, n) => {
+			let a = await fetch(e, {
+				headers: { Range: `bytes=${t}-${Math.min(t + n, i) - 1}` },
+				credentials: r
+			});
+			if (!a.ok) throw Error(`The source could not be read: HTTP ${a.status}`);
+			return a.arrayBuffer();
+		}
+	};
+}, Fe = async (e) => {
+	if ("blob" in e) return Me(e);
+	if ("url" in e) return Pe(e);
+	if ("read" in e) return {
+		length: e.length,
+		name: e.name,
+		read: e.read
+	};
+	throw Error(`Unknown source type: ${e}`);
+};
+//#endregion
+export { $ as MediaPlayer, $ as default, N as Player, n as SUBTITLES_OFF, i as createPictureInPicture, r as createSubtitleRenderer, t as createThumbnailGenerator, Fe as inputToRemuxerInput, je as isDelegatedTracks, Ae as isExternalThumbnails, M as sourceFeature, e as startPlayback, B as usePictureInPicture, P as usePlayer, z as useSeekThumbnails };