@banou/media-player 0.6.2 → 0.7.0

package/dist/index.js

@@ -0,0 +1,1566 @@
+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 ee } from "react-tooltip";
+//#region src/lib/react/source-feature.ts
+var te = {
+	indexes: [],
+	thumbnails: [],
+	subtitleStreams: [],
+	selectedSubtitleStream: void 0,
+	selectSubtitleStream: () => {},
+	audioStreams: [],
+	selectedAudioStream: -1,
+	selectAudioStream: () => {},
+	hideUI: !1,
+	setHideUI: () => {},
+	togglePictureInPicture: () => {},
+	playbackError: null,
+	ready: !1,
+	setSourceState: () => {}
+}, j = h({
+	name: "source",
+	state: () => ({ ...te }),
+	attach({ set: e }) {
+		e({
+			setSourceState: (t) => e(t),
+			setHideUI: (t) => e({ hideUI: t })
+		});
+	}
+}), M = f({
+	features: [...g, j],
+	displayName: "MediaPlayer"
+}), N = M.usePlayer, ne = (t, n, r) => {
+	let i = N(), { 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) => {
+		C.current = !0, i.setSourceState({ selectedSubtitleStream: e }), x.current?.selectSubtitleStream(e);
+	}, [i]), O = a((e) => {
+		i.setSourceState({ selectedAudioStream: e }), b(e);
+	}, [i]), k = N((e) => e.setSourceState);
+	o(() => {
+		k({
+			selectSubtitleStream: D,
+			selectAudioStream: 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({
+							subtitleStreams: e,
+							...C.current ? {} : { selectedSubtitleStream: e[0]?.streamIndex }
+						});
+					},
+					onAudioStreams: (e, t) => {
+						r || i.setSourceState({
+							audioStreams: e,
+							selectedAudioStream: t
+						});
+					}
+				});
+				if (r) {
+					o.destroy();
+					return;
+				}
+				x.current = o, i.setSourceState({ indexes: o.indexes });
+				let s = i.selectedSubtitleStream;
+				s !== void 0 && 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,
+		s,
+		d,
+		f,
+		p,
+		m,
+		h,
+		g,
+		_,
+		y,
+		v
+	]);
+}, re = 5e3, ie = 6e4, P = ({ 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) return;
+		let a = !1, o = null, s, c = re, 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, ie));
+			});
+		};
+		return l(), () => {
+			a = !0, clearTimeout(s), f.current = null, o?.destroy(), d([]);
+		};
+	}, [
+		r,
+		e,
+		n
+	]), o(() => {
+		f.current?.update(m);
+	}, [m]), u;
+}, F = (e, t) => {
+	let n = N(), 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);
+		});
+	}, []);
+}, I = {
+	headings: {
+		large: "\n      font-weight: 600;\n      font-size: 2.8rem;\n      line-height: 3.4rem;\n      @media (min-width: 960px) {\n        font-size: 3.4rem;\n        line-height: 4.1rem;\n      }\n    ",
+		medium: "\n      font-weight: 600;\n      font-size: 2.4rem;\n      line-height: 2.9rem;\n      @media (min-width: 960px) {\n        font-size: 2.8rem;\n        line-height: 3.4rem;\n      }\n    ",
+		small: "\n      font-weight: 500;\n      font-size: 1.8rem;\n      line-height: 1.9rem;\n      @media (min-width: 960px) {\n        font-size: 1.8rem;\n        line-height: 2.2rem;\n      }\n      @media (min-width: 2560px) {\n        font-size: 2.2rem;\n        line-height: 2.6rem;\n      }\n    ",
+		extraSmall: "\n      font-weight: 500;\n      font-size: 1.4rem;\n      line-height: 1.7rem;\n      @media (min-width: 960px) {\n        font-size: 1.6rem;\n        line-height: 1.9rem;\n      }\n    "
+	},
+	bLarge: {
+		bold: "\n      font-weight: 600;\n      font-size: 1.4rem;\n      line-height: 2rem;\n      @media (min-width: 960px) {\n        font-size: 1.6rem;\n        line-height: 2.2rem;\n      }\n    ",
+		medium: "\n      font-weight: 500;\n      font-size: 1.4rem;\n      line-height: 2rem;\n      @media (min-width: 960px) {\n        font-size: 1.6rem;\n        line-height: 2.2rem;\n      }\n    ",
+		regular: "\n      font-weight: 400;\n      font-size: 1.4rem;\n      line-height: 2rem;\n      @media (min-width: 960px) {\n        font-size: 1.6rem;\n        line-height: 2.2rem;\n      }\n    "
+	},
+	bMedium: {
+		bold: "\n      font-weight: 600;\n      font-size: 1.2rem;\n      line-height: 1.7rem;\n      @media (min-width: 960px) {\n        font-size: 1.4rem;\n        line-height: 2rem;\n      }\n    ",
+		medium: "\n      font-weight: 500;\n      font-size: 1.2rem;\n      line-height: 1.7rem;\n      @media (min-width: 960px) {\n        font-size: 1.4rem;\n        line-height: 2rem;\n      }\n    ",
+		regular: "\n      font-weight: 400;\n      font-size: 1.2rem;\n      line-height: 1.7rem;\n      @media (min-width: 960px) {\n        font-size: 1.4rem;\n        line-height: 2rem;\n      }\n    "
+	},
+	bSmall: {
+		bold: "\n      font-weight: 600;\n      font-size: 1rem;\n      line-height: 1.4rem;\n      @media (min-width: 960px) {\n        font-size: 1.2rem;\n        line-height: 1.7rem;\n      }\n    ",
+		medium: "\n      font-weight: 500;\n      font-size: 1rem;\n      line-height: 1.4rem;\n      @media (min-width: 960px) {\n        font-size: 1.2rem;\n        line-height: 1.7rem;\n      }\n    ",
+		regular: "\n      font-weight: 400;\n      font-size: 1rem;\n      line-height: 1.4rem;\n      @media (min-width: 960px) {\n        font-size: 1.2rem;\n        line-height: 1.7rem;\n      }\n    "
+	},
+	bExtraSmall: {
+		bold: "\n      font-weight: 600;\n      font-size: 0.8rem;\n      line-height: 1.1rem;\n      @media (min-width: 960px) {\n        font-size: 1rem;\n        line-height: 1.4rem;\n      }\n    ",
+		medium: "\n      font-weight: 500;\n      font-size: 0.8rem;\n      line-height: 1.1rem;\n      @media (min-width: 960px) {\n        font-size: 1rem;\n        line-height: 1.4rem;\n      }\n    ",
+		regular: "\n      font-weight: 400;\n      font-size: 0.8rem;\n      line-height: 1.1rem;\n      @media (min-width: 960px) {\n        font-size: 1rem;\n        line-height: 1.4rem;\n      }\n    "
+	}
+}, ae = u`
+  top: unset !important;
+  left: unset !important;
+  width: 100%;
+  height: 100%;
+  margin: auto;
+  pointer-events: none;
+`, L = u`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  padding: 1.2rem 1.6rem;
+  /* clears a notch once the player is fullscreen; resolves to zero everywhere else */
+  padding-top: calc(1.2rem + env(safe-area-inset-top, 0px));
+  ${I.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: 2.4rem;
+    padding-top: calc(2.4rem + 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: 4rem;
+    height: 4rem;
+    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 2rem;
+  text-align: center;
+  color: #fff;
+  ${I.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 = N((e) => e.title), n = N((e) => e.hideUI), r = N((e) => e.playbackError), i = N((e) => e.ready), a = N((e) => e.size);
+	return /* @__PURE__ */ y(_, { children: [
+		t ? /* @__PURE__ */ v("div", {
+			css: L,
+			style: { ...n ? {
+				opacity: "0",
+				pointerEvents: "none"
+			} : {} },
+			children: t
+		}) : void 0,
+		a && !i && !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: ae
+		})
+	] });
+}, R = 1e-4, z = 1, B = (e) => Math.max(R, Math.min(z, e)) ** 2, V = (e) => Math.max(R, Math.min(z, e)) ** (z / 2), H = (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}`;
+}, U = (e, t) => `${H(e)} / ${H(t)}`, W = (e) => u`
+  display: flex;
+  justify-content: flex-end;
+
+  border-radius: 0.4rem;
+  user-select: none;
+
+  z-index: 3;
+
+  * {
+    ${I.bMedium.regular}
+  }
+
+  ${e === "sm" && u`
+    padding: 0.4rem!important;
+  `}
+  ${e === "md" && u`
+    padding: 0.6rem!important;
+  `}
+  ${e === "lg" && u`
+    padding: 1.2rem!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__ */ 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(ee, {
+	css: W(c),
+	id: e,
+	noArrow: !0,
+	children: t
+})] }), K = ({ 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" }
+		}
+	};
+}, ue = u`
+  position: relative;
+  height: .4rem;
+
+  --thumbnail-width: 25rem;
+  --thumbnail-half: 12.5rem;
+
+  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: -.1rem;
+    }
+    .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);
+    ${I.bMedium.bold}
+
+    position: absolute;
+    top: -2.5rem;
+    width: 5rem;
+
+    margin-left: -2.5rem;
+    pointer-events: none;
+  }
+
+  .loaded {
+    transform-origin: 0 0;
+    position: absolute;
+    bottom: 0;
+    height: .4rem;
+    width: 100%;
+    .loaded-part {
+      transform-origin: 0 0;
+      bottom: 0;
+      height: .4rem;
+      width: 100%;
+      position: absolute;
+      background-color: hsla(0, 100%, 100%, .4);
+    }
+  }
+
+  .play-container {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: .4rem;
+  }
+
+  .play {
+    transform-origin: 0 0;
+    background-color: #f03;
+    position: absolute;
+    bottom: 0;
+    height: .4rem;
+    width: 100%;
+  }
+
+  .padding {
+    position: absolute;
+    bottom: -7.5px;
+    height: 2rem;
+    width: 100%;
+  }
+
+  .thumbnail {
+    display: flex;
+    justify-content: center;
+
+    position: absolute;
+    top: calc(-3.4375rem - 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: .4rem;
+      box-shadow: 0 0 1rem 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 to .6rem */
+  @media (pointer: coarse) {
+    height: .6rem;
+
+    /* 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: .6rem;
+      .loaded-part {
+        height: .6rem;
+      }
+    }
+
+    .play-container {
+      height: .6rem;
+    }
+
+    .play {
+      height: .6rem;
+    }
+
+    /* 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: 18rem;
+    --thumbnail-half: 9rem;
+  }
+`, de = () => {
+	let e = N(), t = N((e) => e.currentTime), n = N((e) => e.duration), r = N((e) => e.size), i = N((e) => e.downloadedRanges), a = N((e) => e.indexes), u = N((e) => e.thumbnails), d = c(null), [f, p] = l(void 0), [m, h] = l(void 0), g = c(void 0), { dragging: _, handlers: b } = K({
+		ref: d,
+		onChange: (e) => {
+			p(e), g.current !== "mouse" && h(e * n);
+		}
+	}), x = (e) => {
+		g.current = e.pointerType, b.onPointerDown(e);
+	}, S = (e) => {
+		b.onPointerUp(e), e.pointerType !== "mouse" && h(void 0);
+	}, C = (e) => {
+		if (!d.current) return;
+		let { left: t, right: r } = d.current.getBoundingClientRect();
+		return Math.min(Math.max((e - t) / (r - t), 0), 1) * n;
+	}, w = (e) => {
+		h(C(e.clientX));
+	}, T = () => {
+		d.current && h(void 0);
+	}, E = (e) => n ? e / n * 100 : 0, D = 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(",")
+	]), O = s(() => {
+		if (!m || m < 0) return;
+		let e = Math.floor(m / 3600), t = Math.floor((m - e * 3600) / 60), n = Math.floor(m - e * 3600 - t * 60);
+		return `${e > 0 ? `${e}:` : ""}${t < 10 ? "0" : ""}${t}:${n < 10 ? "0" : ""}${n}`;
+	}, [m]);
+	o(() => {
+		if (f === void 0 || !n) return;
+		let t = f * n;
+		e.seek(t);
+	}, [
+		e,
+		f,
+		n
+	]);
+	let k = s(() => !n || typeof t != "number" ? 0 : t / n, [n, t]), A = s(() => {
+		if (!(!u.length || !m)) return u.find(({ startTime: e, endTime: t }) => e <= m && m < t);
+	}, [u.length, m]);
+	return /* @__PURE__ */ y("div", {
+		css: ue,
+		ref: d,
+		className: _ ? "progress-bar dragging" : "progress-bar",
+		onMouseMove: w,
+		onMouseOut: T,
+		children: [
+			/* @__PURE__ */ v("div", { className: "background-bar" }),
+			m ? /* @__PURE__ */ v("div", {
+				className: "cursor-time",
+				style: { left: `clamp(1.8rem, ${E(m)}%, calc(100% - 1.8rem))` },
+				children: O
+			}) : void 0,
+			/* @__PURE__ */ v("div", { className: "progress" }),
+			/* @__PURE__ */ v("div", {
+				className: "loaded",
+				children: D
+			}),
+			/* @__PURE__ */ v("div", { className: "hover" }),
+			/* @__PURE__ */ v("div", {
+				className: "play-container",
+				children: /* @__PURE__ */ v("div", {
+					className: "play",
+					style: { transform: `scaleX(${k})` }
+				})
+			}),
+			/* @__PURE__ */ v("div", { className: "chapters" }),
+			/* @__PURE__ */ v("div", { className: "scrubber" }),
+			/* @__PURE__ */ v("div", {
+				className: "padding",
+				...b,
+				onPointerDown: x,
+				onPointerUp: S,
+				onPointerCancel: S
+			}),
+			/* @__PURE__ */ v("div", {
+				className: "thumbnail",
+				style: { left: `clamp(var(--thumbnail-half), ${E(m ?? 1)}%, calc(100% - var(--thumbnail-half)))` },
+				children: A?.url ? /* @__PURE__ */ v("img", { src: A.url }) : void 0
+			})
+		]
+	});
+}, fe = "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", pe = (e) => {
+	if (!(!e || e === "und")) try {
+		return new Intl.DisplayNames([navigator.language || "en"], {
+			type: "language",
+			fallback: "none"
+		}).of(e) || void 0;
+	} catch {
+		return;
+	}
+}, q = (e) => e?.replace(/_/g, " ").trim() || void 0, me = (e) => {
+	let t = e.map((e) => pe(e.language) ?? q(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 = q(e.title);
+		return {
+			track: e,
+			label: (n[i] ?? 0) > 1 && a && a !== i ? `${i} (${a})` : i
+		};
+	});
+}, 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 = N(), t = N((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 } = K({
+		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);
+  ${I.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;
+        ${I.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;
+  }
+}
+`, J = (e) => me(e).map(({ track: e, label: t }) => ({
+	streamIndex: e.streamIndex,
+	label: t
+})), 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(({ streamIndex: 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 = N(), t = N((e) => e.playbackRate), n = N((e) => e.subtitleStreams), r = N((e) => e.selectedSubtitleStream), i = N((e) => e.selectSubtitleStream), a = N((e) => e.audioStreams), u = N((e) => e.selectedAudioStream), d = N((e) => e.selectAudioStream), [f, p] = l(!1), [m, h] = l(0), g = c(null), _ = () => {
+		p(!f), h(0);
+	}, S = (t) => {
+		e.setPlaybackRate(t), h(0);
+	};
+	o(() => {
+		let e = (e) => {
+			f && g.current && !g.current.contains(e.target) && _();
+		};
+		return document.addEventListener("pointerdown", e), () => document.removeEventListener("pointerdown", e);
+	}, [f]);
+	let C = s(() => J(n), [n]), w = s(() => J(a), [a]), T = (e) => {
+		i(e), _();
+	}, E = (e) => {
+		e !== void 0 && d(e), _();
+	}, O = (e) => () => {
+		h(e);
+	};
+	return /* @__PURE__ */ y("div", {
+		css: _e,
+		ref: g,
+		children: [
+			/* @__PURE__ */ v(G, {
+				id: "settings",
+				disabled: f,
+				text: /* @__PURE__ */ v("button", {
+					className: "settings",
+					type: "button",
+					onClick: _,
+					children: /* @__PURE__ */ v(D, {})
+				}),
+				toolTipText: /* @__PURE__ */ v("span", { children: "Settings" })
+			}),
+			f && m === 0 && /* @__PURE__ */ y("div", {
+				className: "popover menu",
+				children: [
+					w.length > 1 ? /* @__PURE__ */ y("div", {
+						onClick: O(3),
+						children: [/* @__PURE__ */ v("div", { children: "Audio" }), /* @__PURE__ */ v("div", { children: /* @__PURE__ */ v(x, {}) })]
+					}) : null,
+					C.length > 0 ? /* @__PURE__ */ y("div", {
+						onClick: O(2),
+						children: [/* @__PURE__ */ v("div", { children: "Subtitles" }), /* @__PURE__ */ v("div", { children: /* @__PURE__ */ v(x, {}) })]
+					}) : null,
+					/* @__PURE__ */ y("div", {
+						onClick: O(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, {})] })]
+					})
+				]
+			}),
+			f && m === 1 && /* @__PURE__ */ y("div", {
+				className: "popover playback-rate",
+				children: [
+					/* @__PURE__ */ y("div", {
+						className: "back",
+						onClick: O(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: () => S(.5),
+								children: "0.5x"
+							}),
+							/* @__PURE__ */ v("div", {
+								onClick: () => S(1),
+								children: "1x"
+							}),
+							/* @__PURE__ */ v("div", {
+								onClick: () => S(1.5),
+								children: "1.5x"
+							}),
+							/* @__PURE__ */ v("div", {
+								onClick: () => S(2),
+								children: "2x"
+							})
+						]
+					})
+				]
+			}),
+			f && m === 2 && /* @__PURE__ */ v(Y, {
+				title: "Subtitles",
+				tracks: C,
+				selected: r,
+				onSelect: T,
+				onBack: O(0),
+				allowDisable: !0
+			}),
+			f && m === 3 && /* @__PURE__ */ v(Y, {
+				title: "Audio",
+				tracks: w,
+				selected: u,
+				onSelect: E,
+				onBack: O(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 = N((e) => e.volume), r = N((e) => e.muted), i = c(null), a = c(null), { handlers: l } = K({
+		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 : V(n) * 100), [n, r]);
+	return /* @__PURE__ */ v(G, {
+		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 {
+        ${I.bMedium.regular};
+        color: #ffffff;
+      }
+    }
+  }
+
+  &:hover .volume-slider-container {
+    width: 9rem;
+
+    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 = N(), n = N((e) => e.volume), r = N((e) => e.muted), i = s(() => V(n), [n]);
+	return /* @__PURE__ */ y("div", {
+		css: Se,
+		children: [/* @__PURE__ */ v(G, {
+			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(B(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 {
+        ${I.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 = N(), t = N((e) => e.paused), n = N((e) => e.currentTime), r = N((e) => e.duration), i = N((e) => e.fullscreen), s = N((e) => e.hideUI), c = N((e) => e.togglePictureInPicture), [u, d] = l(null), f = r > 0 && n === r, p = a(({ direction: t, stepSize: n }) => {
+		let r = V(e.volume), i = t === "up" ? n : -n, a = Math.max(0, Math.min(1, r + i)), o = e.muted;
+		e.setVolume(B(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(de, {}), /* @__PURE__ */ y("div", {
+			className: "actions",
+			children: [/* @__PURE__ */ y("div", {
+				className: "left",
+				children: [
+					/* @__PURE__ */ v(G, {
+						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: U(n, r)
+					})
+				]
+			}), /* @__PURE__ */ y("div", {
+				className: "right",
+				children: [
+					/* @__PURE__ */ v(ve, {}),
+					/* @__PURE__ */ v(G, {
+						id: "picture-in-picture",
+						text: /* @__PURE__ */ v("button", {
+							className: "picture-in-picture",
+							type: "button",
+							onClick: c,
+							children: /* @__PURE__ */ v("img", { src: fe })
+						}),
+						toolTipText: /* @__PURE__ */ v("span", { children: "Picture in picture" })
+					}),
+					/* @__PURE__ */ v(G, {
+						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, children: r }) => {
+	let i = N(), a = N((e) => e.hideUI), s = N((e) => e.setHideUI), l = c(void 0), u = c("mouse");
+	o(() => () => clearTimeout(l.current), []);
+	let d = () => {
+		s(!1), clearTimeout(l.current), l.current = setTimeout(() => s(!0), Ee);
+	};
+	return /* @__PURE__ */ y("div", {
+		css: De,
+		ref: e,
+		onPointerMove: (e) => {
+			u.current = e.pointerType, e.pointerType === "mouse" && d();
+		},
+		onPointerDown: (e) => {
+			u.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(l.current), s(!0));
+		},
+		className: a ? "hide" : "",
+		children: [
+			/* @__PURE__ */ v(le, { onCanvasRef: n }),
+			/* @__PURE__ */ v(Te, {}),
+			/* @__PURE__ */ y("div", {
+				className: "video",
+				onClick: () => {
+					if (u.current === "mouse") {
+						i.togglePaused();
+						return;
+					}
+					a ? d() : (clearTimeout(l.current), s(!0));
+				},
+				children: [/* @__PURE__ */ v("video", {
+					ref: t,
+					playsInline: !0
+				}), r]
+			})
+		]
+	});
+}, ke = ({ options: e, children: t }) => {
+	let { title: n, size: r, downloadedRanges: i, publicPath: a, libavWorkerUrl: s, read: c } = e, u = m(), d = p(), [f, h] = l(null), [g, _] = l(null);
+	o(() => (u?.(f), () => u?.(null)), [f, u]), ne(f, g, e);
+	let y = P({
+		publicPath: a,
+		workerUrl: s,
+		length: r,
+		read: c,
+		downloadedRanges: i
+	}), b = F(f, g), x = N((e) => e.setSourceState);
+	return o(() => {
+		x({
+			title: n,
+			size: r,
+			downloadedRanges: i
+		});
+	}, [
+		x,
+		n,
+		r,
+		i
+	]), o(() => {
+		x({
+			thumbnails: y,
+			togglePictureInPicture: b
+		});
+	}, [
+		x,
+		y,
+		b
+	]), /* @__PURE__ */ v(Oe, {
+		ref: d,
+		onVideoRef: h,
+		onCanvasRef: _,
+		children: t
+	});
+}, Q = u`
+  display: flex;
+  justify-content: center;
+  background-color: #111;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+`, $ = (e) => /* @__PURE__ */ v("div", {
+	css: Q,
+	children: /* @__PURE__ */ v(M.Provider, { children: /* @__PURE__ */ v(ke, {
+		options: e,
+		children: e.children
+	}) })
+}), Ae = ({ 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()
+}), je = 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;
+}, Me = async ({ url: e, length: t, name: n, credentials: r }) => {
+	let i = t ?? await je(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();
+		}
+	};
+}, Ne = async (e) => {
+	if ("blob" in e) return Ae(e);
+	if ("url" in e) return Me(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, M as Player, n as SUBTITLES_OFF, i as createPictureInPicture, r as createSubtitleRenderer, t as createThumbnailGenerator, Ne as inputToRemuxerInput, j as sourceFeature, e as startPlayback, F as usePictureInPicture, N as usePlayer, P as useSeekThumbnails };