@enigmax/primitives 0.24.0 → 0.26.0

package/dist/chunk-JJVZYW5C.js

@@ -0,0 +1,946 @@
+import { SPEEDS, supportsPip, supportsRemote, watchRemote, showCaption, captionTracks, activeCaption, toggleFullscreen, togglePip, promptRemote, isTypingTarget, commandFor, progress, formatTime, bufferedAhead, fullscreenElement, fractionAt } from './chunk-RUEQ3TGP.js';
+import { lazy, useLayoutEffect, useRef, useState, useMemo, useEffect, useCallback, Suspense } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function Rail({ value, secondary, onChange, onCommit, label, valueText, step = 0.05 }) {
+  const ref = useRef(null);
+  const [dragging, setDragging] = useState(false);
+  const fractionAt2 = useCallback((clientX) => {
+    const box = ref.current?.getBoundingClientRect();
+    return box ? fractionAt(box, clientX) : 0;
+  }, []);
+  const onPointerDown = useCallback((event) => {
+    if (event.button !== 0 && event.pointerType === "mouse") return;
+    event.preventDefault();
+    event.currentTarget.focus();
+    setDragging(true);
+    try {
+      event.currentTarget.setPointerCapture(event.pointerId);
+    } catch {
+    }
+    onChange(fractionAt2(event.clientX));
+  }, [fractionAt2, onChange]);
+  const onPointerMove = useCallback((event) => {
+    if (!dragging) return;
+    onChange(fractionAt2(event.clientX));
+  }, [dragging, fractionAt2, onChange]);
+  const end = useCallback((event) => {
+    if (!dragging) return;
+    setDragging(false);
+    onCommit?.(fractionAt2(event.clientX));
+  }, [dragging, fractionAt2, onCommit]);
+  const onKeyDown = useCallback((event) => {
+    const moves = {
+      ArrowLeft: -step,
+      ArrowDown: -step,
+      ArrowRight: step,
+      ArrowUp: step
+    };
+    const by = moves[event.key];
+    if (by === void 0 && event.key !== "Home" && event.key !== "End") return;
+    event.preventDefault();
+    event.stopPropagation();
+    const next = event.key === "Home" ? 0 : event.key === "End" ? 1 : Math.min(Math.max(value + (by ?? 0), 0), 1);
+    onChange(next);
+    onCommit?.(next);
+  }, [step, value, onChange, onCommit]);
+  const percent = Math.round(value * 100);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-enigma-video-rail": "",
+      role: "slider",
+      tabIndex: 0,
+      "aria-label": label,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": percent,
+      "aria-valuetext": valueText ?? `${percent}%`,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp: end,
+      onPointerCancel: end,
+      onKeyDown,
+      children: [
+        /* @__PURE__ */ jsxs("div", { "data-enigma-video-track": "", children: [
+          secondary !== void 0 && /* @__PURE__ */ jsx("span", { "data-enigma-video-buffer": "", style: { width: `${Math.round(secondary * 100)}%` } }),
+          /* @__PURE__ */ jsx("span", { "data-enigma-video-played": "", style: { width: `${percent}%` } })
+        ] }),
+        /* @__PURE__ */ jsx("span", { "data-enigma-video-knob": "", style: { left: `${percent}%` } })
+      ]
+    }
+  );
+}
+function Glyph({ children, filled = false }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      width: "1em",
+      height: "1em",
+      fill: filled ? "currentColor" : "none",
+      stroke: filled ? "none" : "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children
+    }
+  );
+}
+function Play() {
+  return /* @__PURE__ */ jsx(Glyph, { filled: true, children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z" }) });
+}
+function Pause() {
+  return /* @__PURE__ */ jsx(Glyph, { filled: true, children: /* @__PURE__ */ jsx("path", { d: "M7 5h3.5v14H7zM13.5 5H17v14h-3.5z" }) });
+}
+function Volume() {
+  return /* @__PURE__ */ jsxs(Glyph, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M11 5 6 9H2v6h4l5 4z" }),
+    /* @__PURE__ */ jsx("path", { d: "M15.5 8.5a5 5 0 0 1 0 7" }),
+    /* @__PURE__ */ jsx("path", { d: "M19 5a10 10 0 0 1 0 14" })
+  ] });
+}
+function VolumeLow() {
+  return /* @__PURE__ */ jsxs(Glyph, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M11 5 6 9H2v6h4l5 4z" }),
+    /* @__PURE__ */ jsx("path", { d: "M15.5 8.5a5 5 0 0 1 0 7" })
+  ] });
+}
+function Muted() {
+  return /* @__PURE__ */ jsxs(Glyph, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M11 5 6 9H2v6h4l5 4z" }),
+    /* @__PURE__ */ jsx("path", { d: "m16 9 6 6M22 9l-6 6" })
+  ] });
+}
+function Captions() {
+  return /* @__PURE__ */ jsxs(Glyph, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "2", y: "5", width: "20", height: "14", rx: "2.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M7 11h3M7 15h5M14 11h3M14 15h3" })
+  ] });
+}
+function CaptionsOff() {
+  return /* @__PURE__ */ jsxs(Glyph, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M10.5 5H19.5a2.5 2.5 0 0 1 2.5 2.5v9M18 19H4.5A2.5 2.5 0 0 1 2 16.5v-9A2.5 2.5 0 0 1 4.5 5" }),
+    /* @__PURE__ */ jsx("path", { d: "M7 11h3M7 15h5" }),
+    /* @__PURE__ */ jsx("path", { d: "m3 3 18 18" })
+  ] });
+}
+function Settings() {
+  return /* @__PURE__ */ jsxs(Glyph, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2Z" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
+  ] });
+}
+function Pip() {
+  return /* @__PURE__ */ jsxs(Glyph, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M21 11V6.5A2.5 2.5 0 0 0 18.5 4h-13A2.5 2.5 0 0 0 3 6.5v9A2.5 2.5 0 0 0 5.5 18H9" }),
+    /* @__PURE__ */ jsx("rect", { x: "12", y: "12", width: "9", height: "7", rx: "1.5" })
+  ] });
+}
+function Cast() {
+  return /* @__PURE__ */ jsxs(Glyph, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M3 8V6.5A2.5 2.5 0 0 1 5.5 4h13A2.5 2.5 0 0 1 21 6.5v11a2.5 2.5 0 0 1-2.5 2.5H13" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 12a8 8 0 0 1 8 8" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 16a4 4 0 0 1 4 4" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 20h.01" })
+  ] });
+}
+function Expand() {
+  return /* @__PURE__ */ jsx(Glyph, { children: /* @__PURE__ */ jsx("path", { d: "M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5" }) });
+}
+function Collapse() {
+  return /* @__PURE__ */ jsx(Glyph, { children: /* @__PURE__ */ jsx("path", { d: "M9 4v5H4M15 4v5h5M9 20v-5H4M15 20v-5h5" }) });
+}
+function Download() {
+  return /* @__PURE__ */ jsx(Glyph, { children: /* @__PURE__ */ jsx("path", { d: "M12 4v11M7 11l5 5 5-5M4 19h16" }) });
+}
+function Check() {
+  return /* @__PURE__ */ jsx(Glyph, { children: /* @__PURE__ */ jsx("path", { d: "m5 12.5 4.5 4.5L19 7" }) });
+}
+function Loop() {
+  return /* @__PURE__ */ jsxs(Glyph, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M17 2.5 20.5 6 17 9.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M3.5 12V9a3 3 0 0 1 3-3h14" }),
+    /* @__PURE__ */ jsx("path", { d: "M7 21.5 3.5 18 7 14.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M20.5 12v3a3 3 0 0 1-3 3h-14" })
+  ] });
+}
+function Link() {
+  return /* @__PURE__ */ jsxs(Glyph, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M10 13a5 5 0 0 0 7.07 0l2.83-2.83a5 5 0 0 0-7.07-7.07L11.5 4.4" }),
+    /* @__PURE__ */ jsx("path", { d: "M14 11a5 5 0 0 0-7.07 0L4.1 13.83a5 5 0 0 0 7.07 7.07l1.3-1.3" })
+  ] });
+}
+function Clock() {
+  return /* @__PURE__ */ jsxs(Glyph, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 7v5l3.5 2" })
+  ] });
+}
+function Speed() {
+  return /* @__PURE__ */ jsxs(Glyph, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M12 20a8 8 0 1 0-8-8" }),
+    /* @__PURE__ */ jsx("path", { d: "M4 20h16" }),
+    /* @__PURE__ */ jsx("path", { d: "m12 12 4.5-4.5" })
+  ] });
+}
+
+// src/react/video/styles.ts
+var VIDEO_STYLES = `
+:root {
+    --enigma-video-accent: #3b82f6;
+    --enigma-video-bg: #000000;
+    --enigma-video-text: #ffffff;
+    --enigma-video-muted: rgba(255, 255, 255, 0.72);
+    --enigma-video-rail: rgba(255, 255, 255, 0.28);
+    --enigma-video-buffer: rgba(255, 255, 255, 0.45);
+    --enigma-video-panel-bg: rgba(23, 23, 23, 0.96);
+    --enigma-video-radius: 0.5rem;
+    --enigma-video-control-size: 2rem;
+    /* The icons are sized HERE and not in em of the bar's text: 1.25em of a 13px label is a
+       16px icon, and the same markup in a project with larger type silently grew a different
+       player. */
+    --enigma-video-icon-size: 1.125rem;
+    --enigma-video-rail-height: 0.3125rem;
+    --enigma-video-rail-hover: 0.5rem;
+    --enigma-video-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
+}
+
+[data-enigma-video] {
+    position: relative; display: block; width: 100%; overflow: hidden;
+    background: var(--enigma-video-bg); border-radius: var(--enigma-video-radius);
+    color: var(--enigma-video-text);
+    font-size: 0.8125rem; line-height: 1;
+}
+[data-enigma-video] video { display: block; width: 100%; height: 100%; }
+/* Fullscreen needs no sizing of its own: the UA stylesheet pins the fullscreen element to the
+   screen with !important, which outranks anything a page or this sheet can say, and a video
+   element already fits itself with object-fit: contain. Only the corner is ours. */
+[data-enigma-video][data-fullscreen] { border-radius: 0; }
+[data-enigma-video][data-hidden] { cursor: none; }
+
+/* The big one, while nothing is playing. Plyr's shape: a filled circle over the poster,
+   large enough to be the obvious target on a phone. */
+[data-enigma-video-big] {
+    position: absolute; inset: 0; margin: auto;
+    display: grid; place-items: center;
+    width: 3.75rem; height: 3.75rem; padding: 0;
+    color: var(--enigma-video-text); background: var(--enigma-video-accent);
+    border: 0; border-radius: 999px; box-shadow: var(--enigma-video-shadow);
+    cursor: pointer;
+}
+[data-enigma-video-big]:focus-visible { outline: 2px solid var(--enigma-video-text); outline-offset: 3px; }
+
+[data-enigma-video-overlay] { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
+[data-enigma-video-overlay] > * { pointer-events: auto; }
+
+[data-enigma-video-spinner] {
+    width: 2rem; height: 2rem;
+    border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: var(--enigma-video-text);
+    border-radius: 999px; animation: enigma-video-spin 700ms linear infinite;
+}
+@keyframes enigma-video-spin { to { rotate: 360deg; } }
+@media (prefers-reduced-motion: reduce) {
+    [data-enigma-video-spinner] { animation-duration: 2s; }
+}
+
+[data-enigma-video-controls] {
+    position: absolute; inset-inline: 0; bottom: 0;
+    display: flex; align-items: center; gap: 0.375rem;
+    padding: 2.5rem 0.625rem 0.625rem;
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
+    transition: opacity 180ms ease, translate 180ms ease;
+}
+[data-enigma-video][data-hidden] [data-enigma-video-controls] { opacity: 0; translate: 0 0.5rem; pointer-events: none; }
+@media (prefers-reduced-motion: reduce) {
+    [data-enigma-video-controls] { transition: none; }
+}
+
+[data-enigma-video-button] {
+    display: grid; place-items: center; flex: none;
+    width: var(--enigma-video-control-size); height: var(--enigma-video-control-size);
+    padding: 0; color: var(--enigma-video-text); background: none; border: 0; border-radius: 0.375rem;
+    cursor: pointer;
+}
+[data-enigma-video-button] svg { width: var(--enigma-video-icon-size); height: var(--enigma-video-icon-size); flex: none; }
+[data-enigma-video-big] svg { width: 1.5rem; height: 1.5rem; }
+[data-enigma-video-button]:hover { background: rgba(255, 255, 255, 0.16); }
+[data-enigma-video-button]:focus-visible { outline: 2px solid var(--enigma-video-text); outline-offset: 1px; }
+[data-enigma-video-button][aria-pressed="true"] { color: var(--enigma-video-accent); }
+
+[data-enigma-video-time] { flex: none; color: var(--enigma-video-muted); font-variant-numeric: tabular-nums; }
+
+/* The rail. Its hit area is the row, not the 5px line: a scrubber you have to hit exactly is
+   one people miss and then seek by accident. */
+[data-enigma-video-rail] {
+    position: relative; flex: 1; min-width: 3rem; height: 1rem;
+    display: flex; align-items: center;
+    cursor: pointer; touch-action: none;
+}
+[data-enigma-video-track] {
+    position: relative; width: 100%; height: var(--enigma-video-rail-height);
+    background: var(--enigma-video-rail); border-radius: 999px; overflow: hidden;
+    transition: height 120ms ease;
+}
+[data-enigma-video-rail]:hover [data-enigma-video-track],
+[data-enigma-video-rail]:focus-visible [data-enigma-video-track] { height: var(--enigma-video-rail-hover); }
+[data-enigma-video-rail]:focus-visible { outline: 2px solid var(--enigma-video-text); outline-offset: 2px; border-radius: 999px; }
+[data-enigma-video-buffer] { position: absolute; inset-block: 0; left: 0; background: var(--enigma-video-buffer); }
+[data-enigma-video-played] { position: absolute; inset-block: 0; left: 0; background: var(--enigma-video-accent); }
+[data-enigma-video-knob] {
+    position: absolute; top: 50%; translate: -50% -50%;
+    width: 0.75rem; height: 0.75rem; border-radius: 999px;
+    background: var(--enigma-video-text); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
+    pointer-events: none;
+}
+
+/* The volume rail folds away until the control is reached, which is what keeps a narrow
+   player from spending a third of its bar on something rarely touched. */
+[data-enigma-video-volume] { display: flex; align-items: center; flex: none; }
+[data-enigma-video-volume] [data-enigma-video-rail] {
+    width: 0; min-width: 0; opacity: 0; transition: width 140ms ease, opacity 140ms ease;
+}
+[data-enigma-video-volume]:hover [data-enigma-video-rail],
+[data-enigma-video-volume]:focus-within [data-enigma-video-rail] { width: 4.5rem; min-width: 4.5rem; opacity: 1; }
+
+[data-enigma-video-menu] { position: relative; flex: none; }
+/* The panel opens upward, and the player CLIPS - it has to, or a rounded corner is not
+   rounded. So its height is bounded by the room above the button that opened it (measured, and
+   set inline) and what does not fit scrolls. Without this a speed list plus a language list is
+   a panel with its top cut off on any player under about 300px. */
+[data-enigma-video-panel] {
+    position: absolute; right: 0; bottom: calc(100% + 0.5rem); z-index: 2;
+    box-sizing: border-box; min-width: 8.5rem; max-width: calc(100vw - 2rem); padding: 0.25rem;
+    max-height: 14rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
+    background: var(--enigma-video-panel-bg); border-radius: 0.5rem; box-shadow: var(--enigma-video-shadow);
+}
+[data-enigma-video-option] {
+    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
+    width: 100%; padding: 0.4375rem 0.5rem;
+    color: var(--enigma-video-text); background: none; border: 0; border-radius: 0.375rem;
+    font: inherit; text-align: left; cursor: pointer;
+}
+[data-enigma-video-option]:hover { background: rgba(255, 255, 255, 0.12); }
+[data-enigma-video-option][aria-checked="true"] { color: var(--enigma-video-accent); }
+[data-enigma-video-option]:focus-visible { outline: 2px solid var(--enigma-video-text); outline-offset: -2px; }
+/* Sticky because the panel scrolls: the language you are choosing between should still say
+   which list it belongs to when the speeds have scrolled past it. */
+[data-enigma-video-heading] {
+    position: sticky; top: 0; z-index: 1; margin: 0;
+    padding: 0.375rem 0.5rem; color: var(--enigma-video-muted);
+    background: var(--enigma-video-panel-bg);
+    font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em;
+}
+[data-enigma-video-option] svg { width: 0.875rem; height: 0.875rem; flex: none; }
+[data-enigma-video-option] span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+`;
+
+// src/react/video/types.ts
+var CONTROL_DEFAULTS = {
+  play: true,
+  progress: true,
+  currentTime: true,
+  duration: true,
+  volume: true,
+  captions: true,
+  settings: true,
+  pip: true,
+  cast: true,
+  fullscreen: true,
+  download: false
+};
+var VideoMenu = lazy(() => import('./menu-PNQRTRNV.js').then((module) => ({ default: module.VideoMenu })));
+var injected = false;
+function injectStyles() {
+  if (injected || typeof document === "undefined") return;
+  injected = true;
+  if (document.querySelector("[data-enigma-video-styles]")) return;
+  const element = document.createElement("style");
+  element.setAttribute("data-enigma-video-styles", "");
+  element.textContent = VIDEO_STYLES;
+  document.head.prepend(element);
+}
+function same(a, b) {
+  return a.length === b.length && a.every((track, at) => track.index === b[at]?.index && track.label === b[at]?.label);
+}
+var PANEL_GAP = 12;
+var PANEL_MIN = 48;
+function Video(props) {
+  const {
+    src,
+    poster,
+    tracks,
+    controls = true,
+    speeds = SPEEDS,
+    keyboard = true,
+    clickToPlay = true,
+    autoHide = true,
+    autoHideDelay = 2600,
+    contextMenu = true,
+    styles = true,
+    labels = {},
+    download,
+    children,
+    wrapperProps,
+    ...rest
+  } = props;
+  useLayoutEffect(() => {
+    if (styles) injectStyles();
+  }, [styles]);
+  const videoRef = useRef(null);
+  const wrapperRef = useRef(null);
+  const settingsRef = useRef(null);
+  const [playing, setPlaying] = useState(false);
+  const [waiting, setWaiting] = useState(false);
+  const [time, setTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [buffered, setBuffered] = useState(0);
+  const [volume, setVolume] = useState(1);
+  const [muted, setMuted] = useState(false);
+  const [speed, setSpeed] = useState(1);
+  const [looping, setLooping] = useState(false);
+  const [captionList, setCaptionList] = useState([]);
+  const [caption, setCaption] = useState(-1);
+  const [remote, setRemote] = useState(null);
+  const [fullscreen, setFullscreen] = useState(false);
+  const [menu, setMenu] = useState(false);
+  const [panelMax, setPanelMax] = useState(null);
+  const [idle, setIdle] = useState(false);
+  const [overBar, setOverBar] = useState(false);
+  const [armed, setArmed] = useState(false);
+  const show = useMemo(() => controls === false ? null : { ...CONTROL_DEFAULTS, ...controls === true ? {} : controls }, [controls]);
+  const trackKey = (tracks ?? []).map((track) => `${track.src}|${track.srcLang}|${track.label}`).join("\0");
+  const sources = useMemo(() => typeof src === "string" ? [{ src }] : src ?? [], [src]);
+  const pip = show?.pip && supportsPip();
+  const cast = Boolean(show?.cast && remote?.available);
+  const menuOptions = useMemo(() => contextMenu === false ? null : contextMenu === true ? {} : contextMenu, [contextMenu]);
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    const sync = () => {
+      setPlaying(!video.paused && !video.ended);
+      setVolume(video.volume);
+      setMuted(video.muted);
+      setSpeed(video.playbackRate);
+      setLooping(video.loop);
+    };
+    const onTime = () => {
+      setTime(video.currentTime);
+      setBuffered(bufferedAhead(video.buffered, video.currentTime, video.duration));
+    };
+    const onDuration = () => setDuration(Number.isFinite(video.duration) ? video.duration : 0);
+    const events = [
+      ["play", sync],
+      ["pause", sync],
+      ["ended", sync],
+      ["volumechange", sync],
+      ["ratechange", sync],
+      ["timeupdate", onTime],
+      ["progress", onTime],
+      ["seeked", onTime],
+      ["durationchange", onDuration],
+      ["loadedmetadata", onDuration],
+      ["waiting", () => setWaiting(true)],
+      ["playing", () => {
+        setWaiting(false);
+        sync();
+      }],
+      ["canplay", () => setWaiting(false)]
+    ];
+    for (const [name, handler] of events) video.addEventListener(name, handler);
+    sync();
+    onTime();
+    onDuration();
+    return () => {
+      for (const [name, handler] of events) video.removeEventListener(name, handler);
+    };
+  }, [sources]);
+  useEffect(() => {
+    const list = videoRef.current?.textTracks;
+    if (!list) return;
+    const sync = () => {
+      const found = captionTracks(list);
+      setCaptionList((current) => same(current, found) ? current : found);
+      setCaption(activeCaption(list));
+    };
+    sync();
+    for (const name of ["addtrack", "removetrack", "change"]) list.addEventListener(name, sync);
+    return () => {
+      for (const name of ["addtrack", "removetrack", "change"]) list.removeEventListener(name, sync);
+    };
+  }, [trackKey, sources]);
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video || !supportsRemote(video)) return;
+    setRemote({ available: false, connected: false });
+    return watchRemote(video, setRemote);
+  }, [sources]);
+  useEffect(() => {
+    const onChange = () => setFullscreen(fullscreenElement() === wrapperRef.current);
+    document.addEventListener("fullscreenchange", onChange);
+    document.addEventListener("webkitfullscreenchange", onChange);
+    return () => {
+      document.removeEventListener("fullscreenchange", onChange);
+      document.removeEventListener("webkitfullscreenchange", onChange);
+    };
+  }, []);
+  const toggle = useCallback(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    if (video.paused) void video.play().catch(() => setPlaying(false));
+    else video.pause();
+  }, []);
+  const seekTo = useCallback((fraction) => {
+    const video = videoRef.current;
+    if (!video || !Number.isFinite(video.duration) || video.duration <= 0) return;
+    video.currentTime = fraction * video.duration;
+    setTime(video.currentTime);
+  }, []);
+  const seekBy = useCallback((seconds) => {
+    const video = videoRef.current;
+    if (!video) return;
+    video.currentTime = Math.min(Math.max(video.currentTime + seconds, 0), video.duration || 0);
+    setTime(video.currentTime);
+  }, []);
+  const setVolumeTo = useCallback((fraction) => {
+    const video = videoRef.current;
+    if (!video) return;
+    video.volume = Math.min(Math.max(fraction, 0), 1);
+    video.muted = video.volume === 0;
+  }, []);
+  const toggleMute = useCallback(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    video.muted = !video.muted;
+    if (!video.muted && video.volume === 0) video.volume = 0.5;
+  }, []);
+  const preferred = useRef(null);
+  const chooseCaption = useCallback((index) => {
+    const list = videoRef.current?.textTracks;
+    if (!list) return;
+    if (index !== -1) preferred.current = index;
+    showCaption(list, index);
+    setCaption(index);
+  }, []);
+  const toggleCaptions = useCallback(() => {
+    const list = videoRef.current?.textTracks;
+    const available = captionTracks(list);
+    if (available.length === 0) return;
+    const active = activeCaption(list);
+    if (active !== -1) return chooseCaption(-1);
+    const back = preferred.current;
+    chooseCaption(back !== null && available.some((track) => track.index === back) ? back : available[0].index);
+  }, [chooseCaption]);
+  const setRate = useCallback((rate) => {
+    const video = videoRef.current;
+    if (!video) return;
+    video.playbackRate = rate;
+    setSpeed(rate);
+  }, []);
+  const setLoop = useCallback((on) => {
+    const video = videoRef.current;
+    if (!video) return;
+    video.loop = on;
+    setLooping(on);
+  }, []);
+  const goFullscreen = useCallback(() => {
+    const wrapper = wrapperRef.current;
+    if (wrapper) void toggleFullscreen(wrapper, videoRef.current);
+  }, []);
+  const goPip = useCallback(() => {
+    const video = videoRef.current;
+    if (video) void togglePip(video).catch(() => {
+    });
+  }, []);
+  const goCast = useCallback(() => {
+    const video = videoRef.current;
+    if (video) void promptRemote(video).catch(() => {
+    });
+  }, []);
+  const linkTo = useCallback((atTime) => {
+    const video = videoRef.current;
+    const raw = video?.currentSrc || (typeof src === "string" ? src : sources[0]?.src);
+    if (!raw) return null;
+    try {
+      const url = new URL(raw, typeof location === "undefined" ? void 0 : location.href);
+      if (atTime) url.hash = `t=${Math.floor(video?.currentTime ?? 0)}`;
+      return url.href;
+    } catch {
+      return raw;
+    }
+  }, [src, sources]);
+  const wake = useCallback(() => {
+    setIdle(false);
+    setArmed(true);
+  }, []);
+  const onKeyDown = useCallback((event) => {
+    if (!keyboard || event.defaultPrevented || isTypingTarget(event.target)) return;
+    const command = commandFor(event.key);
+    if (!command) return;
+    event.preventDefault();
+    wake();
+    if (command.type === "toggle") return toggle();
+    if (command.type === "seek") return seekBy(command.by);
+    if (command.type === "seekTo") return seekTo(command.fraction);
+    if (command.type === "volume") return setVolumeTo((videoRef.current?.volume ?? 0) + command.by);
+    if (command.type === "mute") return toggleMute();
+    if (command.type === "fullscreen") return goFullscreen();
+    if (command.type === "captions") return toggleCaptions();
+    if (command.type === "pip" && pip) return goPip();
+  }, [keyboard, wake, toggle, seekBy, seekTo, setVolumeTo, toggleMute, goFullscreen, toggleCaptions, goPip, pip]);
+  useEffect(() => {
+    if (!autoHide || !playing || menu || idle || overBar) return;
+    const timer = window.setTimeout(() => setIdle(true), autoHideDelay);
+    return () => window.clearTimeout(timer);
+  }, [autoHide, playing, menu, idle, overBar, autoHideDelay, time]);
+  useEffect(() => {
+    if (!playing) setIdle(false);
+  }, [playing]);
+  useEffect(() => {
+    if (!menu) return;
+    const onPointerDown = (event) => {
+      if (!wrapperRef.current?.querySelector("[data-enigma-video-menu]")?.contains(event.target)) setMenu(false);
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    return () => document.removeEventListener("pointerdown", onPointerDown, true);
+  }, [menu]);
+  useLayoutEffect(() => {
+    if (!menu) {
+      setPanelMax(null);
+      return;
+    }
+    const wrapper = wrapperRef.current;
+    const button = settingsRef.current;
+    if (!wrapper || !button) return;
+    const room = button.getBoundingClientRect().top - wrapper.getBoundingClientRect().top;
+    setPanelMax(Math.max(PANEL_MIN, room - PANEL_GAP));
+  }, [menu, fullscreen]);
+  const [opener, setOpener] = useState(null);
+  const onMenuReady = useCallback((open) => setOpener(() => open), []);
+  const text = {
+    play: labels.play ?? "Play",
+    pause: labels.pause ?? "Pause",
+    ...labels
+  };
+  const captionsLabel = labels.captions ?? "Captions";
+  const subtitlesLabel = labels.subtitles ?? "Subtitles";
+  const offLabel = labels.captionsOff ?? "Off";
+  const speedLabel = labels.speed ?? "Speed";
+  const normalLabel = labels.normal ?? "Normal";
+  const fullscreenLabel = fullscreen ? labels.exitFullscreen ?? "Exit fullscreen" : labels.enterFullscreen ?? "Fullscreen";
+  const menuRows = useMemo(() => {
+    if (!menuOptions) return [];
+    const link = menuOptions.copyUrl !== false && sources.length > 0;
+    const blocks = [
+      [
+        { id: "toggle", label: playing ? text.pause : text.play, icon: playing ? /* @__PURE__ */ jsx(Pause, {}) : /* @__PURE__ */ jsx(Play, {}), shortcut: "K" },
+        { id: "loop", label: labels.loop ?? "Loop", icon: /* @__PURE__ */ jsx(Loop, {}), checked: looping },
+        {
+          id: "speed",
+          label: speedLabel,
+          icon: /* @__PURE__ */ jsx(Speed, {}),
+          items: speeds.map((rate) => ({
+            id: `speed:${rate}`,
+            label: rate === 1 ? normalLabel : `${rate}x`,
+            group: "speed",
+            checked: speed === rate
+          }))
+        },
+        ...captionList.length > 0 ? [{
+          id: "captions",
+          label: subtitlesLabel,
+          icon: caption === -1 ? /* @__PURE__ */ jsx(CaptionsOff, {}) : /* @__PURE__ */ jsx(Captions, {}),
+          items: [
+            { id: "caption:off", label: offLabel, group: "caption", checked: caption === -1 },
+            ...captionList.map((track) => ({
+              id: `caption:${track.index}`,
+              label: track.label,
+              group: "caption",
+              checked: caption === track.index
+            }))
+          ]
+        }] : []
+      ],
+      link ? [
+        { id: "copy-url", label: labels.copyUrl ?? "Copy video URL", icon: /* @__PURE__ */ jsx(Link, {}) },
+        { id: "copy-url-time", label: labels.copyUrlAtTime ?? "Copy video URL at current time", icon: /* @__PURE__ */ jsx(Clock, {}) }
+      ] : [],
+      [
+        ...pip ? [{ id: "pip", label: labels.pip ?? "Picture in picture", icon: /* @__PURE__ */ jsx(Pip, {}), shortcut: "P" }] : [],
+        ...cast ? [{
+          id: "cast",
+          label: remote?.connected ? labels.stopCast ?? "Stop casting" : labels.cast ?? "Play on a TV",
+          icon: /* @__PURE__ */ jsx(Cast, {}),
+          checked: remote?.connected
+        }] : [],
+        { id: "fullscreen", label: fullscreenLabel, icon: fullscreen ? /* @__PURE__ */ jsx(Collapse, {}) : /* @__PURE__ */ jsx(Expand, {}), shortcut: "F" }
+      ],
+      [...menuOptions.items ?? []]
+    ];
+    return blocks.filter((block) => block.length > 0).flatMap((block, at) => at === 0 ? block : [{ type: "separator" }, ...block]);
+  }, [
+    menuOptions,
+    sources,
+    playing,
+    text.play,
+    text.pause,
+    looping,
+    labels.loop,
+    labels.copyUrl,
+    labels.copyUrlAtTime,
+    labels.pip,
+    labels.cast,
+    labels.stopCast,
+    speedLabel,
+    normalLabel,
+    speeds,
+    speed,
+    captionList,
+    caption,
+    subtitlesLabel,
+    offLabel,
+    pip,
+    cast,
+    remote?.connected,
+    fullscreen,
+    fullscreenLabel
+  ]);
+  const onMenuSelect = useCallback((item) => {
+    const id = item.id;
+    if (id === "toggle") toggle();
+    else if (id === "loop") setLoop(!looping);
+    else if (id.startsWith("speed:")) setRate(Number(id.slice("speed:".length)));
+    else if (id === "caption:off") chooseCaption(-1);
+    else if (id.startsWith("caption:")) chooseCaption(Number(id.slice("caption:".length)));
+    else if (id === "copy-url" || id === "copy-url-time") {
+      const url = linkTo(id === "copy-url-time");
+      if (url) void navigator.clipboard?.writeText(url).catch(() => {
+      });
+    } else if (id === "pip") goPip();
+    else if (id === "cast") goCast();
+    else if (id === "fullscreen") goFullscreen();
+    menuOptions?.onSelect?.(item);
+  }, [toggle, setLoop, looping, setRate, chooseCaption, linkTo, goPip, goCast, goFullscreen, menuOptions]);
+  const onContextMenu = useCallback((event) => {
+    if (!menuOptions || !opener) return;
+    event.preventDefault();
+    opener({ x: event.clientX, y: event.clientY });
+  }, [menuOptions, opener]);
+  const played = progress(time, duration);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...wrapperProps,
+      ref: wrapperRef,
+      "data-enigma-video": "",
+      "data-playing": playing ? "" : void 0,
+      "data-hidden": idle ? "" : void 0,
+      "data-fullscreen": fullscreen ? "" : void 0,
+      "data-casting": remote?.connected ? "" : void 0,
+      "data-menu": opener ? "" : void 0,
+      role: "region",
+      "aria-label": labels.player ?? "Video player",
+      tabIndex: -1,
+      onKeyDown,
+      onPointerMove: wake,
+      onPointerEnter: () => setArmed(true),
+      onPointerDown: () => setArmed(true),
+      onPointerLeave: () => {
+        if (playing && autoHide) setIdle(true);
+      },
+      onFocus: wake,
+      onContextMenu,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "video",
+          {
+            ...rest,
+            ref: videoRef,
+            poster,
+            src: typeof src === "string" ? src : void 0,
+            playsInline: rest.playsInline ?? true,
+            onClick: () => {
+              if (clickToPlay) toggle();
+            },
+            children: [
+              typeof src !== "string" && sources.map((source) => /* @__PURE__ */ jsx("source", { src: source.src, type: source.type }, source.src)),
+              tracks?.map((track) => /* @__PURE__ */ jsx(
+                "track",
+                {
+                  src: track.src,
+                  kind: track.kind ?? "subtitles",
+                  srcLang: track.srcLang,
+                  label: track.label,
+                  default: track.default
+                },
+                track.src
+              ))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { "data-enigma-video-overlay": "", children: [
+          waiting && /* @__PURE__ */ jsx("span", { "data-enigma-video-spinner": "", role: "progressbar", "aria-label": labels.player ?? "Video player" }),
+          show?.play && !playing && !waiting && /* @__PURE__ */ jsx("button", { type: "button", "data-enigma-video-big": "", "aria-label": text.play, title: text.play, onClick: toggle, children: /* @__PURE__ */ jsx(Play, {}) }),
+          children
+        ] }),
+        show && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-enigma-video-controls": "",
+            onPointerEnter: () => setOverBar(true),
+            onPointerLeave: () => setOverBar(false),
+            children: [
+              show.play && /* @__PURE__ */ jsx("button", { type: "button", "data-enigma-video-button": "", "aria-label": playing ? text.pause : text.play, title: playing ? text.pause : text.play, onClick: toggle, children: playing ? /* @__PURE__ */ jsx(Pause, {}) : /* @__PURE__ */ jsx(Play, {}) }),
+              show.currentTime && /* @__PURE__ */ jsx("span", { "data-enigma-video-time": "", children: formatTime(time, duration) }),
+              show.progress && /* @__PURE__ */ jsx(
+                Rail,
+                {
+                  value: played,
+                  secondary: buffered,
+                  label: labels.seek ?? "Seek",
+                  valueText: `${formatTime(time, duration)} of ${formatTime(duration, duration)}`,
+                  onChange: seekTo
+                }
+              ),
+              show.duration && /* @__PURE__ */ jsx("span", { "data-enigma-video-time": "", children: formatTime(duration, duration) }),
+              show.volume && /* @__PURE__ */ jsxs("div", { "data-enigma-video-volume": "", children: [
+                /* @__PURE__ */ jsx("button", { type: "button", "data-enigma-video-button": "", "aria-label": muted ? labels.unmute ?? "Unmute" : labels.mute ?? "Mute", title: muted ? labels.unmute ?? "Unmute" : labels.mute ?? "Mute", onClick: toggleMute, children: muted || volume === 0 ? /* @__PURE__ */ jsx(Muted, {}) : volume < 0.5 ? /* @__PURE__ */ jsx(VolumeLow, {}) : /* @__PURE__ */ jsx(Volume, {}) }),
+                /* @__PURE__ */ jsx(Rail, { value: muted ? 0 : volume, label: labels.volume ?? "Volume", onChange: setVolumeTo })
+              ] }),
+              show.captions && captionList.length > 0 && /* @__PURE__ */ jsx("button", { type: "button", "data-enigma-video-button": "", "aria-pressed": caption !== -1, "aria-label": captionsLabel, title: captionsLabel, onClick: toggleCaptions, children: caption === -1 ? /* @__PURE__ */ jsx(CaptionsOff, {}) : /* @__PURE__ */ jsx(Captions, {}) }),
+              show.settings && /* @__PURE__ */ jsxs("div", { "data-enigma-video-menu": "", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    ref: settingsRef,
+                    type: "button",
+                    "data-enigma-video-button": "",
+                    "aria-haspopup": "menu",
+                    "aria-expanded": menu,
+                    "aria-label": labels.settings ?? "Settings",
+                    title: labels.settings ?? "Settings",
+                    onClick: () => setMenu((current) => !current),
+                    children: /* @__PURE__ */ jsx(Settings, {})
+                  }
+                ),
+                menu && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    "data-enigma-video-panel": "",
+                    role: "menu",
+                    "aria-label": labels.settings ?? "Settings",
+                    style: panelMax === null ? void 0 : { maxHeight: `${panelMax}px` },
+                    onKeyDown: (event) => {
+                      if (event.key === "Escape") setMenu(false);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx("p", { "data-enigma-video-heading": "", children: speedLabel }),
+                      speeds.map((rate) => /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          role: "menuitemradio",
+                          "data-enigma-video-option": "speed",
+                          "aria-checked": speed === rate,
+                          onClick: () => {
+                            setRate(rate);
+                            setMenu(false);
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx("span", { children: rate === 1 ? normalLabel : `${rate}x` }),
+                            speed === rate && /* @__PURE__ */ jsx(Check, {})
+                          ]
+                        },
+                        rate
+                      )),
+                      captionList.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsx("p", { "data-enigma-video-heading": "", children: subtitlesLabel }),
+                        /* @__PURE__ */ jsxs(
+                          "button",
+                          {
+                            type: "button",
+                            role: "menuitemradio",
+                            "data-enigma-video-option": "captions",
+                            "aria-checked": caption === -1,
+                            onClick: () => {
+                              chooseCaption(-1);
+                              setMenu(false);
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx("span", { children: offLabel }),
+                              caption === -1 && /* @__PURE__ */ jsx(Check, {})
+                            ]
+                          }
+                        ),
+                        captionList.map((track) => /* @__PURE__ */ jsxs(
+                          "button",
+                          {
+                            type: "button",
+                            role: "menuitemradio",
+                            "data-enigma-video-option": "captions",
+                            "aria-checked": caption === track.index,
+                            lang: track.language || void 0,
+                            onClick: () => {
+                              chooseCaption(track.index);
+                              setMenu(false);
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx("span", { children: track.label }),
+                              caption === track.index && /* @__PURE__ */ jsx(Check, {})
+                            ]
+                          },
+                          track.index
+                        ))
+                      ] })
+                    ]
+                  }
+                )
+              ] }),
+              show.download && /* @__PURE__ */ jsx(
+                "a",
+                {
+                  "data-enigma-video-button": "",
+                  href: download ?? sources[0]?.src ?? "#",
+                  download: true,
+                  rel: "noopener",
+                  "aria-label": labels.download ?? "Download",
+                  title: labels.download ?? "Download",
+                  children: /* @__PURE__ */ jsx(Download, {})
+                }
+              ),
+              cast && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "data-enigma-video-button": "",
+                  "aria-pressed": remote?.connected ?? false,
+                  "aria-label": remote?.connected ? labels.stopCast ?? "Stop casting" : labels.cast ?? "Play on a TV",
+                  title: remote?.connected ? labels.stopCast ?? "Stop casting" : labels.cast ?? "Play on a TV",
+                  onClick: goCast,
+                  children: /* @__PURE__ */ jsx(Cast, {})
+                }
+              ),
+              pip && /* @__PURE__ */ jsx("button", { type: "button", "data-enigma-video-button": "", "aria-label": labels.pip ?? "Picture in picture", title: labels.pip ?? "Picture in picture", onClick: goPip, children: /* @__PURE__ */ jsx(Pip, {}) }),
+              show.fullscreen && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "data-enigma-video-button": "",
+                  "aria-label": fullscreenLabel,
+                  title: fullscreenLabel,
+                  onClick: goFullscreen,
+                  children: fullscreen ? /* @__PURE__ */ jsx(Collapse, {}) : /* @__PURE__ */ jsx(Expand, {})
+                }
+              )
+            ]
+          }
+        ),
+        menuOptions && armed && menuRows.length > 0 && /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(VideoMenu, { rows: menuRows, title: menuOptions.title, onSelect: onMenuSelect, onReady: onMenuReady }) })
+      ]
+    }
+  );
+}
+
+export { Video };