@layers-app/shared 0.4.7 → 0.4.8

package/dist/node_modules/@gfazioli/mantine-video/dist/esm/Video.js

@@ -0,0 +1,272 @@
+import { factory as ge, useProps as pe, useStyles as ye, Box as ke, createVarsResolver as be, getThemeColor as ve, getRadius as he } from "@mantine/core";
+import u, { useRef as V, useEffect as I, useCallback as k, useState as Te } from "react";
+import { VideoCaptionsButton as Ce } from "./components/VideoCaptionsButton.js";
+import { VideoControls as N } from "./components/VideoControls.js";
+import { VideoFullscreenButton as Ve } from "./components/VideoFullscreenButton.js";
+import { VideoMuteButton as x } from "./components/VideoMuteButton.js";
+import { VideoPiPButton as Pe } from "./components/VideoPiPButton.js";
+import { VideoPlayButton as Re } from "./components/VideoPlayButton.js";
+import { VideoSkipButton as Be } from "./components/VideoSkipButton.js";
+import { VideoTimeDisplay as De } from "./components/VideoTimeDisplay.js";
+import { VideoTimeline as we } from "./components/VideoTimeline.js";
+import { useVideo as Ee } from "./use-video.js";
+import { VideoProvider as Ae } from "./Video.context.js";
+import L from "./Video.module.css.js";
+const Me = {
+  color: "blue",
+  radius: "md",
+  size: "md",
+  variant: "overlay",
+  preload: "metadata",
+  playsInline: !0,
+  fit: "contain",
+  backgroundMuteButton: !0
+}, Fe = be(
+  (l, { color: f, radius: n, fit: d, asBackground: c }) => {
+    const a = ve(f, l);
+    return {
+      root: {
+        "--video-color": a,
+        "--video-radius": n === void 0 ? void 0 : he(n),
+        "--video-bg": "black",
+        "--video-controls-bg": "linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.35) 60%, transparent 100%)",
+        "--video-controls-height": "44px",
+        "--video-controls-text-color": "white",
+        "--video-timeline-color": a,
+        "--video-timeline-thumb-color": a,
+        "--video-object-fit": c ? "cover" : d ?? "contain"
+      }
+    };
+  }
+), t = ge((l) => {
+  const f = pe("Video", Me, l), {
+    ref: n,
+    src: d,
+    sources: c,
+    fallbackSrc: a,
+    poster: _,
+    controls: Se,
+    autoPlay: P,
+    muted: R,
+    loop: B,
+    playsInline: H,
+    preload: j,
+    playing: K,
+    onPlayChange: z,
+    currentTime: U,
+    onCurrentTimeChange: q,
+    volume: J,
+    onVolumeChange: O,
+    playbackRate: X,
+    onPlaybackRateChange: G,
+    color: Ie,
+    radius: Ne,
+    aspectRatio: g,
+    size: Q,
+    variant: b,
+    onEnded: W,
+    onError: Y,
+    onEnterPictureInPicture: Z,
+    onLeavePictureInPicture: $,
+    onFullscreenChange: ee,
+    fit: xe,
+    // Pulled out so they don't leak onto the root DOM element via `...others`.
+    // The effective values are derived from `_props.*` below (background mode
+    // flips their defaults), so the destructured copies are intentionally unused.
+    shortcuts: Le,
+    clickToToggle: _e,
+    doubleClickToFullscreen: He,
+    autoHideControls: je,
+    asBackground: i,
+    backgroundMuteButton: oe,
+    children: te,
+    classNames: re,
+    style: D,
+    styles: le,
+    unstyled: ne,
+    vars: ae,
+    className: ie,
+    mod: ce,
+    ...se
+  } = f, ue = l.controls ?? !i, v = l.shortcuts ?? !i, w = l.clickToToggle ?? !i, E = l.doubleClickToFullscreen ?? !i, s = l.autoHideControls ?? (i ? 0 : 3e3), p = ye({
+    name: "Video",
+    props: f,
+    classes: L,
+    className: ie,
+    style: D,
+    classNames: re,
+    styles: le,
+    unstyled: ne,
+    vars: ae,
+    varsResolver: Fe
+  }), o = Ee({
+    src: d,
+    autoPlay: P,
+    muted: R,
+    loop: B,
+    playing: K,
+    onPlayChange: z,
+    currentTime: U,
+    onCurrentTimeChange: q,
+    volume: J,
+    onVolumeChange: O,
+    playbackRate: X,
+    onPlaybackRateChange: G,
+    onEnded: W,
+    onError: Y,
+    onEnterPictureInPicture: Z,
+    onLeavePictureInPicture: $,
+    onFullscreenChange: ee
+  }), A = Array.isArray(c) && c.length > 0, h = V(!1);
+  I(() => {
+    h.current = !1;
+  }, [d, c, a]);
+  const de = k(() => {
+    if (!a || h.current)
+      return;
+    const e = o.videoRef.current;
+    e && (h.current = !0, e.removeAttribute("src"), e.querySelectorAll("source").forEach((r) => r.remove()), e.src = a, e.load());
+  }, [a, o.videoRef]), [M, T] = Te(!0), m = V(null), y = k(() => {
+    T(!0), m.current && clearTimeout(m.current), s && s > 0 && o.playing && (m.current = setTimeout(() => T(!1), s));
+  }, [s, o.playing]);
+  I(() => (y(), () => {
+    m.current && clearTimeout(m.current);
+  }), [y, o.playing]);
+  const C = V(0), me = k(
+    (e) => {
+      if (e.target !== e.currentTarget && e.target.tagName !== "VIDEO")
+        return;
+      const r = Date.now(), S = r - C.current < 300;
+      if (C.current = r, S && E) {
+        o.toggleFullscreen();
+        return;
+      }
+      w && !S && setTimeout(() => {
+        Date.now() - C.current >= 250 && o.toggle();
+      }, 260);
+    },
+    [w, E, o]
+  ), fe = k(
+    (e) => {
+      if (!v) return;
+      const r = e.target;
+      if (!(r.tagName === "INPUT" || r.tagName === "TEXTAREA"))
+        switch (e.key) {
+          case " ":
+          case "k":
+          case "K":
+            e.preventDefault(), o.toggle();
+            break;
+          case "ArrowLeft":
+          case "j":
+          case "J":
+            e.preventDefault(), o.seekBy(e.key === "ArrowLeft" ? -5 : -10);
+            break;
+          case "ArrowRight":
+          case "l":
+          case "L":
+            e.preventDefault(), o.seekBy(e.key === "ArrowRight" ? 5 : 10);
+            break;
+          case "ArrowUp":
+            e.preventDefault(), o.setVolume(Math.min(1, o.volume + 0.05));
+            break;
+          case "ArrowDown":
+            e.preventDefault(), o.setVolume(Math.max(0, o.volume - 0.05));
+            break;
+          case "m":
+          case "M":
+            e.preventDefault(), o.toggleMute();
+            break;
+          case "f":
+          case "F":
+            e.preventDefault(), o.toggleFullscreen();
+            break;
+          case "p":
+          case "P":
+            e.preventDefault(), o.togglePiP();
+            break;
+        }
+    },
+    [v, o]
+  ), F = b === "minimal" || b === "bordered";
+  return /* @__PURE__ */ u.createElement(
+    Ae,
+    {
+      value: {
+        ...o,
+        getStyles: p,
+        controlsVisible: M,
+        showControls: y
+      }
+    },
+    /* @__PURE__ */ u.createElement(
+      ke,
+      {
+        ...p("root", {
+          style: [
+            g && !F ? { aspectRatio: String(g) } : void 0,
+            D
+          ]
+        }),
+        ...se,
+        ref: (e) => {
+          o.containerRef.current = e, typeof n == "function" ? n(e) : n && typeof n == "object" && (n.current = e);
+        },
+        mod: [
+          {
+            variant: b,
+            size: Q,
+            playing: o.playing,
+            paused: o.paused && !o.ended,
+            ended: o.ended,
+            fullscreen: o.fullscreen,
+            "controls-visible": M,
+            "as-background": i
+          },
+          ce
+        ],
+        tabIndex: v ? 0 : void 0,
+        onMouseMove: y,
+        onMouseLeave: () => {
+          s && s > 0 && o.playing && T(!1);
+        },
+        onClick: me,
+        onKeyDown: fe
+      },
+      /* @__PURE__ */ u.createElement(
+        "video",
+        {
+          ...p("video", {
+            style: g && F ? { aspectRatio: String(g) } : void 0
+          }),
+          ref: o.videoRef,
+          src: A ? void 0 : d,
+          poster: _,
+          autoPlay: P,
+          muted: R,
+          loop: B,
+          playsInline: H,
+          preload: j,
+          onError: de
+        },
+        A ? c.map((e, r) => /* @__PURE__ */ u.createElement("source", { key: r, src: e.src, type: e.type, media: e.media })) : null
+      ),
+      i && oe && /* @__PURE__ */ u.createElement(x, { ...p("backgroundMuteButton") }),
+      te ?? (ue && /* @__PURE__ */ u.createElement(N, null))
+    )
+  );
+});
+t.classes = L;
+t.displayName = "Video";
+t.Controls = N;
+t.PlayButton = Re;
+t.Timeline = we;
+t.TimeDisplay = De;
+t.MuteButton = x;
+t.FullscreenButton = Ve;
+t.PiPButton = Pe;
+t.CaptionsButton = Ce;
+t.SkipButton = Be;
+export {
+  t as Video
+};

package/dist/node_modules/@gfazioli/mantine-video/dist/esm/Video.module.css.js

@@ -0,0 +1,4 @@
+var e = { root: "me_93a1ff14", video: "me_e0d35c89", backgroundMuteButton: "me_c06a98ab", controls: "me_cdf35be8", controlBar: "me_1e8b5628", playButton: "me_39f8f838", muteButton: "me_273e3f5d", fullscreenButton: "me_3d7259ff", pipButton: "me_1d5188b7", captionsButton: "me_c8163091", skipButton: "me_e5822e43", iconButton: "me_bdfae1bd", timeline: "me_73f6e973", timelineBuffered: "me_aaddbb72", timeDisplay: "me_a6bc92c3" };
+export {
+  e as default
+};

package/dist/node_modules/@gfazioli/mantine-video/dist/esm/components/VideoCaptionsButton.js

@@ -0,0 +1,55 @@
+import { Tooltip as g, ActionIcon as h } from "@mantine/core";
+import { IconBadgeCcFilled as b, IconBadgeCc as y } from "@tabler/icons-react";
+import s, { forwardRef as L, useState as d, useEffect as T } from "react";
+import { useVideoContext as w } from "../Video.context.js";
+const x = L(
+  ({ enableLabel: l = "Enable captions", disableLabel: f = "Disable captions", ...m }, u) => {
+    const o = w(), [r, v] = d(!1), [p, k] = d(!1);
+    if (T(() => {
+      const n = o.videoRef.current;
+      if (!n) return;
+      const t = () => {
+        const c = Array.from(n.textTracks).filter(
+          (a) => a.kind === "captions" || a.kind === "subtitles"
+        );
+        k(c.length > 0), v(c.some((a) => a.mode === "showing"));
+      };
+      t();
+      const e = n.textTracks;
+      if (typeof e.addEventListener == "function")
+        return e.addEventListener("change", t), e.addEventListener("addtrack", t), e.addEventListener("removetrack", t), () => {
+          e.removeEventListener?.("change", t), e.removeEventListener?.("addtrack", t), e.removeEventListener?.("removetrack", t);
+        };
+    }, [o.videoRef]), !p) return null;
+    const E = () => {
+      const n = o.videoRef.current;
+      if (!n) return;
+      const t = Array.from(n.textTracks).filter(
+        (e) => e.kind === "captions" || e.kind === "subtitles"
+      );
+      t.length !== 0 && (r ? t.forEach((e) => {
+        e.mode = "disabled";
+      }) : t[0].mode = "showing");
+    }, i = r ? f : l;
+    return /* @__PURE__ */ s.createElement(g, { label: i, withArrow: !0, openDelay: 400 }, /* @__PURE__ */ s.createElement(
+      h,
+      {
+        ref: u,
+        variant: "transparent",
+        color: "white",
+        size: "lg",
+        "aria-label": i,
+        "aria-pressed": r,
+        onClick: E,
+        "data-state": r ? "on" : "off",
+        ...o.getStyles("captionsButton"),
+        ...m
+      },
+      r ? /* @__PURE__ */ s.createElement(b, { size: 20 }) : /* @__PURE__ */ s.createElement(y, { size: 20 })
+    ));
+  }
+);
+x.displayName = "VideoCaptionsButton";
+export {
+  x as VideoCaptionsButton
+};

package/dist/node_modules/@gfazioli/mantine-video/dist/esm/components/VideoControls.js

@@ -0,0 +1,30 @@
+import { Box as o } from "@mantine/core";
+import e, { forwardRef as i } from "react";
+import { useVideoContext as a } from "../Video.context.js";
+import { VideoCaptionsButton as c } from "./VideoCaptionsButton.js";
+import { VideoFullscreenButton as u } from "./VideoFullscreenButton.js";
+import { VideoMuteButton as p } from "./VideoMuteButton.js";
+import { VideoPiPButton as s } from "./VideoPiPButton.js";
+import { VideoPlayButton as d } from "./VideoPlayButton.js";
+import { VideoTimeDisplay as f } from "./VideoTimeDisplay.js";
+import { VideoTimeline as V } from "./VideoTimeline.js";
+const E = i(
+  ({ children: r, ...l }, n) => {
+    const t = a();
+    return /* @__PURE__ */ e.createElement(
+      o,
+      {
+        ref: n,
+        ...t.getStyles("controls"),
+        mod: { visible: t.controlsVisible },
+        onClick: (m) => m.stopPropagation(),
+        ...l
+      },
+      /* @__PURE__ */ e.createElement(o, { ...t.getStyles("controlBar") }, r ?? /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(d, null), /* @__PURE__ */ e.createElement(V, null), /* @__PURE__ */ e.createElement(f, null), /* @__PURE__ */ e.createElement(p, null), /* @__PURE__ */ e.createElement(c, null), /* @__PURE__ */ e.createElement(s, null), /* @__PURE__ */ e.createElement(u, null)))
+    );
+  }
+);
+E.displayName = "VideoControls";
+export {
+  E as VideoControls
+};

package/dist/node_modules/@gfazioli/mantine-video/dist/esm/components/VideoFullscreenButton.js

@@ -0,0 +1,31 @@
+import { Tooltip as i, ActionIcon as a } from "@mantine/core";
+import { IconMinimize as s, IconMaximize as u } from "@tabler/icons-react";
+import t, { forwardRef as f } from "react";
+import { useVideoContext as m } from "../Video.context.js";
+const p = f(
+  ({ enterLabel: r = "Enter fullscreen", exitLabel: n = "Exit fullscreen", ...o }, c) => {
+    const e = m();
+    if (!e.canFullscreen) return null;
+    const l = e.fullscreen ? n : r;
+    return /* @__PURE__ */ t.createElement(i, { label: l, withArrow: !0, openDelay: 400 }, /* @__PURE__ */ t.createElement(
+      a,
+      {
+        ref: c,
+        variant: "transparent",
+        color: "white",
+        size: "lg",
+        "aria-label": l,
+        "aria-pressed": e.fullscreen,
+        onClick: e.toggleFullscreen,
+        "data-state": e.fullscreen ? "on" : "off",
+        ...e.getStyles("fullscreenButton"),
+        ...o
+      },
+      e.fullscreen ? /* @__PURE__ */ t.createElement(s, { size: 20 }) : /* @__PURE__ */ t.createElement(u, { size: 20 })
+    ));
+  }
+);
+p.displayName = "VideoFullscreenButton";
+export {
+  p as VideoFullscreenButton
+};

package/dist/node_modules/@gfazioli/mantine-video/dist/esm/components/VideoMuteButton.js

@@ -0,0 +1,29 @@
+import { Tooltip as i, ActionIcon as c } from "@mantine/core";
+import { IconVolume3 as s, IconVolume2 as d, IconVolume as p } from "@tabler/icons-react";
+import o, { forwardRef as f } from "react";
+import { useVideoContext as V } from "../Video.context.js";
+const I = f(
+  ({ muteLabel: r = "Mute", unmuteLabel: u = "Unmute", ...a }, m) => {
+    const e = V(), t = e.muted || e.volume === 0, n = t ? u : r, l = t ? s : e.volume < 0.5 ? d : p;
+    return /* @__PURE__ */ o.createElement(i, { label: n, withArrow: !0, openDelay: 400 }, /* @__PURE__ */ o.createElement(
+      c,
+      {
+        ref: m,
+        variant: "transparent",
+        color: "white",
+        size: "lg",
+        "aria-label": n,
+        "aria-pressed": t,
+        onClick: e.toggleMute,
+        "data-state": t ? "muted" : "unmuted",
+        ...e.getStyles("muteButton"),
+        ...a
+      },
+      /* @__PURE__ */ o.createElement(l, { size: 20 })
+    ));
+  }
+);
+I.displayName = "VideoMuteButton";
+export {
+  I as VideoMuteButton
+};

package/dist/node_modules/@gfazioli/mantine-video/dist/esm/components/VideoPiPButton.js

@@ -0,0 +1,29 @@
+import { Tooltip as n, ActionIcon as a } from "@mantine/core";
+import { IconPictureInPicture as c } from "@tabler/icons-react";
+import e, { forwardRef as p } from "react";
+import { useVideoContext as l } from "../Video.context.js";
+const u = p(
+  ({ label: o = "Picture-in-Picture", ...r }, i) => {
+    const t = l();
+    return t.canPiP ? /* @__PURE__ */ e.createElement(n, { label: o, withArrow: !0, openDelay: 400 }, /* @__PURE__ */ e.createElement(
+      a,
+      {
+        ref: i,
+        variant: "transparent",
+        color: "white",
+        size: "lg",
+        "aria-label": o,
+        "aria-pressed": t.pip,
+        onClick: t.togglePiP,
+        "data-state": t.pip ? "on" : "off",
+        ...t.getStyles("pipButton"),
+        ...r
+      },
+      /* @__PURE__ */ e.createElement(c, { size: 20 })
+    )) : null;
+  }
+);
+u.displayName = "VideoPiPButton";
+export {
+  u as VideoPiPButton
+};

package/dist/node_modules/@gfazioli/mantine-video/dist/esm/components/VideoPlayButton.js

@@ -0,0 +1,28 @@
+import { Tooltip as i, ActionIcon as c } from "@mantine/core";
+import { IconPlayerPauseFilled as p, IconPlayerPlayFilled as s } from "@tabler/icons-react";
+import t, { forwardRef as y } from "react";
+import { useVideoContext as m } from "../Video.context.js";
+const d = y(
+  ({ playLabel: l = "Play", pauseLabel: o = "Pause", ...r }, n) => {
+    const e = m(), a = e.playing ? o : l;
+    return /* @__PURE__ */ t.createElement(i, { label: a, withArrow: !0, openDelay: 400 }, /* @__PURE__ */ t.createElement(
+      c,
+      {
+        ref: n,
+        variant: "transparent",
+        color: "white",
+        size: "lg",
+        "aria-label": a,
+        onClick: e.toggle,
+        "data-state": e.playing ? "playing" : "paused",
+        ...e.getStyles("playButton"),
+        ...r
+      },
+      e.playing ? /* @__PURE__ */ t.createElement(p, { size: 20 }) : /* @__PURE__ */ t.createElement(s, { size: 20 })
+    ));
+  }
+);
+d.displayName = "VideoPlayButton";
+export {
+  d as VideoPlayButton
+};

package/dist/node_modules/@gfazioli/mantine-video/dist/esm/components/VideoSkipButton.js

@@ -0,0 +1,27 @@
+import { Tooltip as p, ActionIcon as d } from "@mantine/core";
+import { IconRewindForward10 as s, IconRewindBackward10 as w } from "@tabler/icons-react";
+import e, { forwardRef as f } from "react";
+import { useVideoContext as k } from "../Video.context.js";
+const u = f(
+  ({ seconds: t = 10, icon: n, label: i, ...c }, l) => {
+    const o = k(), r = t >= 0, a = i ?? `${r ? "Forward" : "Back"} ${Math.abs(t)}s`, m = n ?? (r ? /* @__PURE__ */ e.createElement(s, { size: 20 }) : /* @__PURE__ */ e.createElement(w, { size: 20 }));
+    return /* @__PURE__ */ e.createElement(p, { label: a, withArrow: !0, openDelay: 400 }, /* @__PURE__ */ e.createElement(
+      d,
+      {
+        ref: l,
+        variant: "transparent",
+        color: "white",
+        size: "lg",
+        "aria-label": a,
+        onClick: () => o.seekBy(t),
+        ...o.getStyles("skipButton"),
+        ...c
+      },
+      m
+    ));
+  }
+);
+u.displayName = "VideoSkipButton";
+export {
+  u as VideoSkipButton
+};

package/dist/node_modules/@gfazioli/mantine-video/dist/esm/components/VideoTimeDisplay.js

@@ -0,0 +1,44 @@
+import { Text as s } from "@mantine/core";
+import c, { forwardRef as f } from "react";
+import { useVideoContext as u } from "../Video.context.js";
+const l = f(
+  ({ format: r = "current/duration", ...t }, e) => {
+    const o = u(), n = p(r, o.currentTime, o.duration);
+    return /* @__PURE__ */ c.createElement(
+      s,
+      {
+        ref: e,
+        size: "sm",
+        c: "white",
+        ff: "monospace",
+        ta: "center",
+        ...o.getStyles("timeDisplay"),
+        ...t
+      },
+      n
+    );
+  }
+);
+l.displayName = "VideoTimeDisplay";
+function a(r) {
+  if (!Number.isFinite(r) || r < 0) return "0:00";
+  const t = Math.floor(r), e = Math.floor(t / 3600), o = Math.floor(t % 3600 / 60), n = t % 60, i = e > 0 ? String(o).padStart(2, "0") : String(o), m = String(n).padStart(2, "0");
+  return e > 0 ? `${e}:${i}:${m}` : `${i}:${m}`;
+}
+function p(r, t, e) {
+  switch (r) {
+    case "current":
+      return a(t);
+    case "duration":
+      return a(e);
+    case "remaining":
+      return a(Math.max(e - t, 0));
+    case "current/-remaining":
+      return `${a(t)} / -${a(Math.max(e - t, 0))}`;
+    default:
+      return `${a(t)} / ${a(e)}`;
+  }
+}
+export {
+  l as VideoTimeDisplay
+};

package/dist/node_modules/@gfazioli/mantine-video/dist/esm/components/VideoTimeline.js

@@ -0,0 +1,70 @@
+import { Box as h, Slider as y } from "@mantine/core";
+import b, { forwardRef as v, useState as x, useRef as m, useEffect as R, useCallback as p } from "react";
+import { useVideoContext as E } from "../Video.context.js";
+const $ = v(
+  ({ sliderProps: o, liveScrub: t = !0, ...l }, u) => {
+    const e = E(), [c, i] = x(null), f = m(!1), d = m(!1), r = m(null), a = m(null), s = Number.isFinite(e.duration) && e.duration > 0 ? e.duration : 0, g = c ?? e.currentTime, S = s > 0 ? e.buffered / s * 100 : 0;
+    R(
+      () => () => {
+        r.current !== null && cancelAnimationFrame(r.current);
+      },
+      []
+    );
+    const C = p(
+      (n) => {
+        f.current || (f.current = !0, d.current = e.playing, t && e.playing && e.pause()), i(n), t && (a.current = n, r.current === null && (r.current = requestAnimationFrame(() => {
+          r.current = null, a.current !== null && (e.seek(a.current), a.current = null);
+        })));
+      },
+      [e, t]
+    ), k = p(
+      (n) => {
+        r.current !== null && (cancelAnimationFrame(r.current), r.current = null), a.current = null, e.seek(n), i(null), f.current = !1, d.current && (d.current = !1, e.play());
+      },
+      [e]
+    );
+    return /* @__PURE__ */ b.createElement(h, { ref: u, ...e.getStyles("timeline"), ...l }, /* @__PURE__ */ b.createElement(
+      h,
+      {
+        ...e.getStyles("timelineBuffered"),
+        style: { width: `${S}%` },
+        "aria-hidden": !0
+      }
+    ), /* @__PURE__ */ b.createElement(
+      y,
+      {
+        value: Math.min(g, s || g),
+        onChange: C,
+        onChangeEnd: k,
+        min: 0,
+        max: s || 1e-4,
+        step: 0.01,
+        label: (n) => w(n),
+        showLabelOnHover: !0,
+        color: "var(--video-timeline-color)",
+        thumbSize: 12,
+        size: "xs",
+        "aria-label": "Seek",
+        styles: {
+          root: { flex: 1, width: "100%" },
+          track: { backgroundColor: "rgba(255, 255, 255, 0.25)" },
+          bar: { backgroundColor: "var(--video-timeline-color)" },
+          thumb: {
+            backgroundColor: "var(--video-timeline-thumb-color)",
+            borderColor: "var(--video-timeline-thumb-color)"
+          }
+        },
+        ...o
+      }
+    ));
+  }
+);
+$.displayName = "VideoTimeline";
+function w(o) {
+  if (!Number.isFinite(o) || o < 0) return "0:00";
+  const t = Math.floor(o), l = Math.floor(t / 3600), u = Math.floor(t % 3600 / 60), e = t % 60, c = l > 0 ? String(u).padStart(2, "0") : String(u), i = String(e).padStart(2, "0");
+  return l > 0 ? `${l}:${c}:${i}` : `${c}:${i}`;
+}
+export {
+  $ as VideoTimeline
+};