@nice2dev/ui-video 1.0.22 → 1.0.23

package/dist/index.mjs

@@ -1,8 +1,8 @@
 import { jsx as e, jsxs as r, Fragment as ie } from "react/jsx-runtime";
 import { useContext as ye, createContext as $, memo as Se, useState as v, useEffect as ne, useRef as F, useCallback as me } from "react";
-const He = (l, m) => m, Ie = $(He);
-function Te() {
-  return { t: ye(Ie) };
+const He = (l, m) => m, Te = $(He);
+function Ie() {
+  return { t: ye(Te) };
 }
 $({
   dir: "ltr",
@@ -64,8 +64,8 @@ function ae(l) {
   return l < 1 ? `${(l * 1e3).toFixed(0)}μs` : l < 1e3 ? `${l.toFixed(2)}ms` : `${(l / 1e3).toFixed(2)}s`;
 }
 function $e() {
-  const l = Array.from(pe.values()), m = _e(), f = l.reduce((T, p) => T + p.renderCount, 0), C = l.length > 0 ? l.reduce((T, p) => T + p.avgRenderTime, 0) / l.length : 0, I = Array.from(ve.values());
-  return { stats: l, slowRenders: m, totalRenders: f, avgRenderTime: C, marks: I };
+  const l = Array.from(pe.values()), m = _e(), f = l.reduce((I, p) => I + p.renderCount, 0), C = l.length > 0 ? l.reduce((I, p) => I + p.avgRenderTime, 0) / l.length : 0, T = Array.from(ve.values());
+  return { stats: l, slowRenders: m, totalRenders: f, avgRenderTime: C, marks: T };
 }
 function Ae() {
   const l = $e();
@@ -97,11 +97,11 @@ function Ae() {
 }
 const Ee = Se(
   ({ position: l = "bottom-right", defaultCollapsed: m = !0 }) => {
-    const [f, C] = v(m), [I, T] = v([]), [p, i] = v({ used: 0, total: 0 });
+    const [f, C] = v(m), [T, I] = v([]), [p, i] = v({ used: 0, total: 0 });
     if (ne(() => {
       const b = () => {
         const y = Array.from(pe.values());
-        T(y.sort((S, z) => z.totalRenderTime - S.totalRenderTime).slice(0, 10));
+        I(y.sort((S, z) => z.totalRenderTime - S.totalRenderTime).slice(0, 10));
         const k = window.performance;
         k.memory && i({
           used: k.memory.usedJSHeapSize / 1024 / 1024,
@@ -171,7 +171,7 @@ const Ee = Se(
                 children: /* @__PURE__ */ e("strong", { children: "Top Components" })
               }
             ),
-            I.map((b) => /* @__PURE__ */ r("div", { style: { marginBottom: 4, display: "flex", gap: 8 }, children: [
+            T.map((b) => /* @__PURE__ */ r("div", { style: { marginBottom: 4, display: "flex", gap: 8 }, children: [
               /* @__PURE__ */ e("span", { style: { flex: 1, overflow: "hidden", textOverflow: "ellipsis" }, children: b.componentName }),
               /* @__PURE__ */ e(
                 "span",
@@ -274,11 +274,11 @@ const Le = ({
   autoStart: m,
   label: f,
   size: C = "md",
-  className: I,
-  style: T,
+  className: T,
+  style: I,
   "data-testid": p
 }) => {
-  const { enabled: i, run: D } = Pe(), { t: b } = Te();
+  const { enabled: i, run: D } = Pe(), { t: b } = Ie();
   if (!i || !l || l.length === 0)
     return null;
   const E = f ?? b("tutorial.startAria", "Start tutorial");
@@ -286,8 +286,8 @@ const Le = ({
     "button",
     {
       type: "button",
-      className: `nice-tutorial-button nice-tutorial-button--${C}` + (I ? ` ${I}` : ""),
-      style: T,
+      className: `nice-tutorial-button nice-tutorial-button--${C}` + (T ? ` ${T}` : ""),
+      style: I,
       "data-testid": p,
       "aria-label": E,
       title: E,
@@ -367,7 +367,7 @@ const ge = {
   lg: "0 10px 15px -3px rgba(0,0,0,0.4)",
   xl: "0 20px 25px -5px rgba(0,0,0,0.4)"
 };
-function d(l, m, f, C, I) {
+function d(l, m, f, C, T) {
   return {
     name: l,
     darkMode: "light",
@@ -383,14 +383,14 @@ function d(l, m, f, C, I) {
       canvas: f.canvas ?? f.primary
     },
     text: { ...C, inverse: C.inverse ?? "#ffffff" },
-    borders: ke(I),
+    borders: ke(T),
     shadows: Ve,
     spacing: ge,
     typography: we,
     transitions: Ne
   };
 }
-function x(l, m, f, C, I) {
+function x(l, m, f, C, T) {
   return {
     name: l,
     darkMode: "dark",
@@ -406,7 +406,7 @@ function x(l, m, f, C, I) {
       canvas: f.canvas ?? f.primary
     },
     text: { ...C, inverse: C.inverse ?? "#0f172a" },
-    borders: ke(I),
+    borders: ke(T),
     shadows: Oe,
     spacing: ge,
     typography: we,
@@ -1821,12 +1821,12 @@ const Be = {
   onProjectChange: m,
   onExport: f,
   onAssetUpload: C,
-  className: I = "",
-  tutorial: T
+  className: T = "",
+  tutorial: I
 }) => {
   const [p, i] = v(l || Be), [D, b] = v(
     "timeline"
-  ), [E, y] = v(null), [k, S] = v(null), [z, R] = v(0), [q, W] = v(!1), [M, J] = v(1), [K, P] = v(!0), [U, O] = v(null), oe = F(null), se = F(null), A = F(null);
+  ), [E, y] = v(null), [k, S] = v(null), [z, R] = v(0), [Z, W] = v(!1), [M, J] = v(1), [K, P] = v(!0), [U, O] = v(null), oe = F(null), se = F(null), A = F(null);
   ne(() => {
     l && i(l);
   }, [l]), ne(() => () => {
@@ -1957,7 +1957,7 @@ const Be = {
         return {};
     }
   }, de = () => {
-    q ? (A.current && clearInterval(A.current), W(!1)) : (A.current = setInterval(() => {
+    Z ? (A.current && clearInterval(A.current), W(!1)) : (A.current = setInterval(() => {
       R((n) => {
         const o = Math.max(
           ...p.tracks.flatMap((a) => a.items.map((t) => t.startTime + t.duration)),
@@ -1983,7 +1983,7 @@ const Be = {
   }, te = (n) => {
     const o = Math.floor(n / 60), a = Math.floor(n % 60), t = Math.floor(n % 1 * p.frameRate);
     return `${o.toString().padStart(2, "0")}:${a.toString().padStart(2, "0")}:${t.toString().padStart(2, "0")}`;
-  }, Z = () => {
+  }, q = () => {
     for (const n of p.tracks) {
       const o = n.items.find((a) => a.id === k);
       if (o)
@@ -1991,8 +1991,8 @@ const Be = {
     }
     return null;
   };
-  return /* @__PURE__ */ r("div", { className: `nice-video-editor ${I}`, style: { position: "relative" }, children: [
-    /* @__PURE__ */ e("span", { style: { position: "absolute", top: 6, right: 6, zIndex: 30 }, children: /* @__PURE__ */ e(Le, { steps: Ue(T, Ge) }) }),
+  return /* @__PURE__ */ r("div", { className: `nice-video-editor ${T}`, style: { position: "relative" }, children: [
+    /* @__PURE__ */ e("span", { style: { position: "absolute", top: 6, right: 6, zIndex: 30 }, children: /* @__PURE__ */ e(Le, { steps: Ue(I, Ge) }) }),
     /* @__PURE__ */ r("header", { className: "video-editor__header", children: [
       /* @__PURE__ */ r("div", { className: "header__project-info", children: [
         /* @__PURE__ */ e(
@@ -2095,13 +2095,13 @@ const Be = {
           /* @__PURE__ */ r("div", { className: "playback-controls", children: [
             /* @__PURE__ */ e("button", { onClick: () => Q(0), children: "⏮️" }),
             /* @__PURE__ */ e("button", { onClick: () => Q(z - 1 / p.frameRate), children: "⏪" }),
-            /* @__PURE__ */ e("button", { onClick: de, className: "play-button", children: q ? "⏸️" : "▶️" }),
+            /* @__PURE__ */ e("button", { onClick: de, className: "play-button", children: Z ? "⏸️" : "▶️" }),
             /* @__PURE__ */ e("button", { onClick: () => Q(z + 1 / p.frameRate), children: "⏩" }),
             /* @__PURE__ */ e("span", { className: "time-display", children: te(z) })
           ] })
         ] }),
         k && D !== "export" && /* @__PURE__ */ e("div", { className: "item-inspector", children: (() => {
-          const n = Z();
+          const n = q();
           if (!n)
             return null;
           const { track: o, item: a } = n;
@@ -2299,7 +2299,7 @@ const Be = {
             className: "effect-preset",
             disabled: !k,
             onClick: () => {
-              const o = Z();
+              const o = q();
               o && Y(o.track.id, o.item.id, n.type);
             },
             children: [
@@ -2321,7 +2321,7 @@ const Be = {
               {
                 disabled: !k,
                 onClick: () => {
-                  const o = Z();
+                  const o = q();
                   o && L(
                     o.track.id,
                     o.item.id,
@@ -2337,7 +2337,7 @@ const Be = {
               {
                 disabled: !k,
                 onClick: () => {
-                  const o = Z();
+                  const o = q();
                   o && L(o.track.id, o.item.id, n.type, "end");
                 },
                 children: "Out"
@@ -2465,15 +2465,15 @@ const Be = {
   onRecordingStart: m,
   onRecordingStop: f,
   onRecordingPause: C,
-  onRecordingResume: I,
-  onError: T,
+  onRecordingResume: T,
+  onError: I,
   className: p = ""
 }) => {
   var u, h;
   const [i, D] = v({
     ...je,
     ...l
-  }), [b, E] = v(null), [y, k] = v("idle"), [S, z] = v([]), [R, q] = v(null), [W, M] = v(null), [J, K] = v(!1), [P, U] = v(!1), [O, oe] = v(
+  }), [b, E] = v(null), [y, k] = v("idle"), [S, z] = v([]), [R, Z] = v(null), [W, M] = v(null), [J, K] = v(!1), [P, U] = v(!1), [O, oe] = v(
     "pen"
   ), [se, A] = v("var(--nice-danger, #ff0000)"), w = F(null), g = F([]), B = F(null), X = F(null), G = F(null), re = F(0);
   ne(() => () => {
@@ -2508,9 +2508,9 @@ const Be = {
         } catch (H) {
           console.warn("Could not access microphone:", H);
         }
-      q(N), B.current && (B.current.srcObject = N, B.current.play()), k("idle");
+      Z(N), B.current && (B.current.srcObject = N, B.current.play()), k("idle");
     } catch (s) {
-      k("error"), T == null || T(s instanceof Error ? s : new Error("Failed to start preview"));
+      k("error"), I == null || I(s instanceof Error ? s : new Error("Failed to start preview"));
     }
   }, L = async () => {
     R || await Y();
@@ -2550,14 +2550,14 @@ const Be = {
         );
       }, 100);
     } catch (s) {
-      k("error"), T == null || T(s instanceof Error ? s : new Error("Failed to start recording"));
+      k("error"), I == null || I(s instanceof Error ? s : new Error("Failed to start recording"));
     }
   }, ce = async () => (await Y(), R), de = () => {
     w.current && y === "recording" && (w.current.pause(), k("paused"), C == null || C());
   }, Q = () => {
-    w.current && y === "paused" && (w.current.resume(), k("recording"), I == null || I());
+    w.current && y === "paused" && (w.current.resume(), k("recording"), T == null || T());
   }, ee = () => {
-    G.current && clearInterval(G.current), w.current && (y === "recording" || y === "paused") && (w.current.stop(), k("stopped")), R && (R.getTracks().forEach((s) => s.stop()), q(null));
+    G.current && clearInterval(G.current), w.current && (y === "recording" || y === "paused") && (w.current.stop(), k("stopped")), R && (R.getTracks().forEach((s) => s.stop()), Z(null));
   }, te = me(
     (s) => {
       if (y !== "recording")
@@ -2571,7 +2571,7 @@ const Be = {
       z((H) => [...H, N]);
     },
     [y, b == null ? void 0 : b.duration, S.length]
-  ), Z = (s) => {
+  ), q = (s) => {
     z((N) => N.filter((H) => H.id !== s));
   }, n = (s) => {
     switch (s) {
@@ -2768,7 +2768,7 @@ const Be = {
                 className: "marker-label"
               }
             ),
-            /* @__PURE__ */ e("button", { className: "marker-remove", onClick: () => Z(s.id), children: "×" })
+            /* @__PURE__ */ e("button", { className: "marker-remove", onClick: () => q(s.id), children: "×" })
           ]
         },
         s.id
@@ -2962,7 +2962,7 @@ const Be = {
       ] })
     ] })
   ] });
-}, qe = {
+}, Ze = {
   id: crypto.randomUUID(),
   name: "My Stream",
   protocol: "rtmp",
@@ -3019,11 +3019,11 @@ const Be = {
   onConfigChange: m,
   onStreamStart: f,
   onStreamStop: C,
-  onStatsUpdate: I,
-  onError: T,
+  onStatsUpdate: T,
+  onError: I,
   className: p = ""
 }) => {
-  const [i, D] = v(l || qe), [b, E] = v(
+  const [i, D] = v(l || Ze), [b, E] = v(
     "sources"
   ), [y, k] = v(!1), [S, z] = v({
     duration: 0,
@@ -3034,7 +3034,7 @@ const Be = {
     droppedFrames: 0,
     cpuUsage: 0,
     memoryUsage: 0
-  }), [R, q] = v(null), [W, M] = v(!1), [J, K] = v(!1), [P, U] = v([i.layout]), [O, oe] = v(0), se = F(null), A = F(null), w = F(0);
+  }), [R, Z] = v(null), [W, M] = v(!1), [J, K] = v(!1), [P, U] = v([i.layout]), [O, oe] = v(0), se = F(null), A = F(null), w = F(0);
   ne(() => {
     l && D(l);
   }, [l]), ne(() => () => {
@@ -3164,17 +3164,17 @@ const Be = {
           cpuUsage: 15 + Math.random() * 30,
           memoryUsage: 40 + Math.random() * 20
         };
-        z(a), I == null || I(a);
+        z(a), T == null || T(a);
       }, 1e3);
     } catch (a) {
-      T == null || T(a instanceof Error ? a : new Error("Failed to start stream")), g({
+      I == null || I(a instanceof Error ? a : new Error("Failed to start stream")), g({
         destinations: i.destinations.map((t) => ({
           ...t,
           status: "error"
         }))
       });
     }
-  }, Z = () => {
+  }, q = () => {
     A.current && clearInterval(A.current), g({
       destinations: i.destinations.map((a) => ({ ...a, status: "idle" }))
     }), k(!1), C == null || C();
@@ -3230,7 +3230,7 @@ const Be = {
           " fps"
         ] })
       ] }) }),
-      /* @__PURE__ */ e("div", { className: "header__actions", children: y ? /* @__PURE__ */ e("button", { className: "action-button action-button--stop", onClick: Z, children: "End Stream" }) : /* @__PURE__ */ e(
+      /* @__PURE__ */ e("div", { className: "header__actions", children: y ? /* @__PURE__ */ e("button", { className: "action-button action-button--stop", onClick: q, children: "End Stream" }) : /* @__PURE__ */ e(
         "button",
         {
           className: "action-button action-button--go-live",
@@ -3278,7 +3278,7 @@ const Be = {
                     opacity: a.opacity,
                     zIndex: a.zIndex
                   },
-                  onClick: () => q(a.id),
+                  onClick: () => Z(a.id),
                   children: /* @__PURE__ */ r("div", { className: "layer-content", children: [
                     /* @__PURE__ */ e("span", { className: "layer-icon", children: ((c = le.find((u) => u.type === t.type)) == null ? void 0 : c.icon) || "📦" }),
                     /* @__PURE__ */ e("span", { className: "layer-name", children: t.name })
@@ -3321,7 +3321,7 @@ const Be = {
                 "div",
                 {
                   className: `source-item ${R === (t == null ? void 0 : t.id) ? "source-item--selected" : ""}`,
-                  onClick: () => t && q(t.id),
+                  onClick: () => t && Z(t.id),
                   children: [
                     /* @__PURE__ */ e("span", { className: "source-icon", children: (c = le.find((u) => u.type === a.type)) == null ? void 0 : c.icon }),
                     /* @__PURE__ */ e("span", { className: "source-name", children: a.name }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nice2dev/ui-video",
-  "version": "1.0.22",
+  "version": "1.0.23",
   "description": "Nice2Dev Video Components - Video editor, screen recorder, and live streaming",
   "type": "module",
   "sideEffects": [
@@ -31,12 +31,12 @@
   },
   "dependencies": {},
   "peerDependencies": {
-    "@nice2dev/ui-core": "^1.0.22",
+    "@nice2dev/ui-core": "^1.0.23",
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0"
   },
   "devDependencies": {
-    "@nice2dev/ui-core": "^1.0.22",
+    "@nice2dev/ui-core": "^1.0.23",
     "@testing-library/react": "^14.1.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",