@nivaro/react 0.3.40 → 0.3.42

package/dist/shared/components/chat/ScreenClip.js

@@ -1,110 +1,114 @@
 import { jsxs as b, jsx as s } from "react/jsx-runtime";
-import { Clapperboard as v, Square as y } from "lucide-react";
-import { useState as k, useRef as m, useEffect as M } from "react";
-import { cn as N } from "../../lib/utils.js";
-import { useScreenCapture as S } from "../help-videos/recorder/useScreenCapture.js";
-const g = 6e4, w = "chat-clip", F = "chat-clip-poster";
-function _(r, n) {
+import { Clapperboard as w, Square as k } from "lucide-react";
+import { useState as M, useRef as m, useEffect as v } from "react";
+import { registerReloadHold as N } from "../../lib/reload-holds.js";
+import { cn as S } from "../../lib/utils.js";
+import { useScreenCapture as $ } from "../help-videos/recorder/useScreenCapture.js";
+const g = 6e4, x = "chat-clip", _ = "chat-clip-poster";
+function j(r, n) {
   var l, c;
-  const t = Array.isArray(r) ? r.map(String) : [];
-  if (!t.includes(w) || n && !n.startsWith("video/")) return null;
-  const e = ((l = t.find((i) => i.startsWith("poster:"))) == null ? void 0 : l.slice(7)) ?? null, o = Number((c = t.find((i) => i.startsWith("duration:"))) == null ? void 0 : c.slice(9));
+  const e = Array.isArray(r) ? r.map(String) : [];
+  if (!e.includes(x) || n && !n.startsWith("video/")) return null;
+  const t = ((l = e.find((i) => i.startsWith("poster:"))) == null ? void 0 : l.slice(7)) ?? null, o = Number((c = e.find((i) => i.startsWith("duration:"))) == null ? void 0 : c.slice(9));
   return {
-    poster: e && /^[0-9a-f-]{36}$/i.test(e) ? e : null,
+    poster: t && /^[0-9a-f-]{36}$/i.test(t) ? t : null,
     durationMs: o > 0 ? o : null
   };
 }
-function A(r, n) {
-  const t = [w, `duration:${Math.max(0, Math.round(n))}`];
-  return r && t.push(`poster:${r}`), t;
+function B(r, n) {
+  const e = [x, `duration:${Math.max(0, Math.round(n))}`];
+  return r && e.push(`poster:${r}`), e;
 }
-function $(r = /* @__PURE__ */ new Date()) {
-  const n = (t) => String(t).padStart(2, "0");
+function C(r = /* @__PURE__ */ new Date()) {
+  const n = (e) => String(e).padStart(2, "0");
   return `Screen clip ${r.getFullYear()}-${n(r.getMonth() + 1)}-${n(r.getDate())} ${n(r.getHours())}.${n(r.getMinutes())}.${n(r.getSeconds())}.webm`;
 }
-function C(r) {
+function R(r) {
   if (!r) return "";
   const n = Math.max(1, Math.round(r / 1e3));
   return n < 60 ? `${n} s` : `${Math.floor(n / 60)}:${String(n % 60).padStart(2, "0")}`;
 }
-function R() {
+function L() {
   var r;
   return typeof navigator < "u" && !!((r = navigator.mediaDevices) != null && r.getDisplayMedia) && typeof MediaRecorder < "u";
 }
-async function L(r, n = 640) {
+async function T(r, n = 640) {
   if (typeof document > "u") return null;
-  const t = URL.createObjectURL(r);
+  const e = URL.createObjectURL(r);
   try {
-    const e = document.createElement("video");
-    e.muted = !0, e.playsInline = !0, e.preload = "auto", e.src = t, await new Promise((d, h) => {
+    const t = document.createElement("video");
+    t.muted = !0, t.playsInline = !0, t.preload = "auto", t.src = e, await new Promise((d, h) => {
       const f = setTimeout(() => h(new Error("timeout")), 4e3);
-      e.onloadeddata = () => {
+      t.onloadeddata = () => {
         clearTimeout(f), d();
-      }, e.onerror = () => {
+      }, t.onerror = () => {
         clearTimeout(f), h(new Error("decode"));
       };
-    }), e.currentTime === 0 && Number.isFinite(e.duration) && (e.currentTime = Math.min(0.2, e.duration / 2), await new Promise((d) => {
-      e.onseeked = () => d(), setTimeout(d, 800);
+    }), t.currentTime === 0 && Number.isFinite(t.duration) && (t.currentTime = Math.min(0.2, t.duration / 2), await new Promise((d) => {
+      t.onseeked = () => d(), setTimeout(d, 800);
     }));
-    const o = e.videoWidth || 640, l = e.videoHeight || 360, c = Math.min(1, n / o), i = document.createElement("canvas");
+    const o = t.videoWidth || 640, l = t.videoHeight || 360, c = Math.min(1, n / o), i = document.createElement("canvas");
     i.width = Math.round(o * c), i.height = Math.round(l * c);
     const a = i.getContext("2d");
-    return a ? (a.drawImage(e, 0, 0, i.width, i.height), await new Promise((d) => i.toBlob(d, "image/png"))) : null;
+    return a ? (a.drawImage(t, 0, 0, i.width, i.height), await new Promise((d) => i.toBlob(d, "image/png"))) : null;
   } catch {
     return null;
   } finally {
-    URL.revokeObjectURL(t);
+    URL.revokeObjectURL(e);
   }
 }
-function j({
+function D({
   onClip: r,
   disabled: n
 }) {
-  const [t, e] = k("idle"), o = m([]), l = m("video/webm"), c = m(!1), i = m(() => {
-  }), a = S({
+  const [e, t] = M("idle"), o = m([]), l = m("video/webm"), c = m(!1), i = m(() => {
+  }), a = $({
     onLimit: () => i.current(),
     onSharingEnded: () => i.current()
   }), d = async () => {
     if (c.current || !a.isLive()) return;
-    c.current = !0, e("finishing");
+    c.current = !0, t("finishing");
     const u = Math.min(g, a.meta().duration_ms);
     await a.halt();
     const p = new Blob(o.current, { type: l.current });
     o.current = [];
-    const x = p.size ? await L(p) : null;
-    p.size && r({ file: new File([p], $(), { type: l.current }), poster: x, durationMs: u }), e("idle"), c.current = !1;
+    const y = p.size ? await T(p) : null;
+    p.size && r({ file: new File([p], C(), { type: l.current }), poster: y, durationMs: u }), t("idle"), c.current = !1;
   };
-  i.current = () => void d();
+  i.current = () => void d(), v(() => {
+    if (e !== "idle")
+      return N("A screen clip");
+  }, [e]);
   const h = a.elapsed;
-  M(() => {
-    t === "recording" && h >= g && i.current();
-  }, [h, t]);
+  v(() => {
+    e === "recording" && h >= g && i.current();
+  }, [h, e]);
   const f = async () => {
-    if (t === "idle") {
-      e("asking"), a.reset(), o.current = [];
+    if (e === "idle") {
+      t("asking"), a.reset(), o.current = [];
       try {
         l.current = await a.acquire({ source: "screen", useMic: !0, micId: "default" });
       } catch {
-        a.release(), e("idle");
+        a.release(), t("idle");
         return;
       }
       a.arm(l.current, (u) => {
         u.size && o.current.push(u);
-      }), a.begin(!1), e("recording");
+      }), a.begin(!1), t("recording");
     }
   };
-  if (!R()) return null;
-  if (t === "recording" || t === "finishing") {
+  if (!L()) return null;
+  if (e === "recording" || e === "finishing") {
     const u = Math.max(0, g - a.elapsed), p = Math.min(100, a.elapsed / g * 100);
     return /* @__PURE__ */ b(
       "button",
       {
         type: "button",
         onClick: () => void d(),
-        disabled: t === "finishing",
+        disabled: e === "finishing",
         className: "relative flex h-7 shrink-0 items-center gap-1.5 overflow-hidden rounded-md border border-red-300 bg-red-50 px-2 text-[11px] font-medium text-red-700 transition-colors hover:bg-red-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-nvr-cyan disabled:opacity-60 dark:border-red-500/40 dark:bg-red-500/10 dark:text-red-200 dark:hover:bg-red-500/20",
-        "aria-label": t === "finishing" ? "Finishing the clip" : "Stop recording the clip",
-        "data-chat-clip": t,
+        "aria-label": e === "finishing" ? "Finishing the clip" : "Stop recording the clip",
+        "data-chat-clip": e,
         children: [
           /* @__PURE__ */ s(
             "span",
@@ -118,8 +122,8 @@ function j({
             /* @__PURE__ */ s("span", { className: "absolute inline-flex h-full w-full rounded-full bg-red-500 opacity-60 motion-safe:animate-ping" }),
             /* @__PURE__ */ s("span", { className: "relative inline-flex h-2 w-2 rounded-full bg-red-500" })
           ] }),
-          /* @__PURE__ */ s("span", { className: "relative tabular-nums", children: t === "finishing" ? "Saving…" : `${Math.ceil(u / 1e3)} s left` }),
-          /* @__PURE__ */ s(y, { className: "relative h-3 w-3 fill-current", strokeWidth: 2 })
+          /* @__PURE__ */ s("span", { className: "relative tabular-nums", children: e === "finishing" ? "Saving…" : `${Math.ceil(u / 1e3)} s left` }),
+          /* @__PURE__ */ s(k, { className: "relative h-3 w-3 fill-current", strokeWidth: 2 })
         ]
       }
     );
@@ -129,23 +133,23 @@ function j({
     {
       type: "button",
       onClick: () => void f(),
-      disabled: n || t === "asking",
-      className: N(
+      disabled: n || e === "asking",
+      className: S(
         "flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-slate-500 transition-colors hover:bg-slate-200/70 hover:text-slate-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-nvr-cyan disabled:opacity-40 dark:text-slate-400 dark:hover:bg-white/10 dark:hover:text-slate-100",
-        t === "asking" && "text-nvr-cyan"
+        e === "asking" && "text-nvr-cyan"
       ),
       "aria-label": "Record a screen clip (up to 60 seconds)",
       "data-tip": "Record a screen clip — up to 60 s, with your microphone",
       "data-chat-clip": "idle",
-      children: /* @__PURE__ */ s(v, { className: "h-4 w-4", strokeWidth: 2 })
+      children: /* @__PURE__ */ s(w, { className: "h-4 w-4", strokeWidth: 2 })
     }
   );
 }
-function B({
+function U({
   url: r,
   poster: n,
-  name: t,
-  durationMs: e,
+  name: e,
+  durationMs: t,
   action: o
 }) {
   return /* @__PURE__ */ b("span", { className: "relative inline-block max-w-[320px]", "data-chat-clip-player": !0, children: [
@@ -158,27 +162,27 @@ function B({
         playsInline: !0,
         preload: n ? "none" : "metadata",
         className: "block max-h-[220px] w-full rounded-lg border border-slate-200 bg-[#0f172a] dark:border-border",
-        "aria-label": t
+        "aria-label": e
       }
     ),
     /* @__PURE__ */ b("span", { className: "pointer-events-none absolute left-2 top-2 inline-flex items-center gap-1 rounded bg-black/55 px-1.5 py-0.5 text-[10.5px] font-medium text-white", children: [
-      /* @__PURE__ */ s(v, { className: "h-3 w-3", strokeWidth: 2 }),
+      /* @__PURE__ */ s(w, { className: "h-3 w-3", strokeWidth: 2 }),
       "Clip",
-      e ? ` · ${C(e)}` : ""
+      t ? ` · ${R(t)}` : ""
     ] }),
     o && /* @__PURE__ */ s("span", { className: "absolute right-1 top-1", children: o })
   ] });
 }
 export {
   g as CLIP_MAX_MS,
-  F as CLIP_POSTER_TAG,
-  w as CLIP_TAG,
-  B as ClipPlayer,
-  j as ScreenClipButton,
-  R as canRecordClip,
-  $ as clipFileName,
-  _ as clipInfo,
-  A as clipTags,
-  C as formatClipLength,
-  L as posterFromBlob
+  _ as CLIP_POSTER_TAG,
+  x as CLIP_TAG,
+  U as ClipPlayer,
+  D as ScreenClipButton,
+  L as canRecordClip,
+  C as clipFileName,
+  j as clipInfo,
+  B as clipTags,
+  R as formatClipLength,
+  T as posterFromBlob
 };