@pixerate/editor-react 0.57.0 → 0.58.0

package/dist/video-editor/index.js

@@ -485,6 +485,7 @@ function VideoTimeline({ controller, pxPerSecond, onPxPerSecondChange, editable
 }
 
 // src/video-editor/ClipInspector.tsx
+import { useState as useState3 } from "react";
 import {
   findVideoClip,
   formatVideoSeconds as formatVideoSeconds2,
@@ -493,7 +494,8 @@ import {
   normalizeVideoGrade,
   VIDEO_GRADE_CONTROLS,
   VIDEO_GRADE_PRESET_NAMES,
-  videoGradePreset,
+  videoGradeLook,
+  videoLutEdits,
   VIDEO_BLEND_MODE_LABELS,
   VIDEO_BLEND_MODES,
   VIDEO_FADE_CURVE_LABELS,
@@ -538,6 +540,59 @@ function Commit({
     );
   return /* @__PURE__ */ jsx5("input", { className: field, ...rest, defaultValue: value, onKeyDown: (e) => e.key === "Enter" && e.currentTarget.blur(), onBlur: (e) => commit(e.currentTarget.value) }, value);
 }
+function LutControls({ controller, clip, disabled }) {
+  const [message, setMessage] = useState3(null);
+  const lut = clip.grade?.lut;
+  const apply = (setting, label) => {
+    const r = controller.apply(videoLutEdits(controller.getProject(), [clip.id], setting), label);
+    setMessage(r.ok ? null : r.error);
+  };
+  const choose = async (src) => {
+    if (!src) return lut && apply(null, "Remove LUT");
+    try {
+      const table = await controller.luts.load(src);
+      apply({ src, ...lut?.strength !== void 0 ? { strength: lut.strength } : {}, ...table.title ? { name: table.title } : {} }, "Apply LUT");
+    } catch (e) {
+      setMessage(e instanceof Error ? e.message : String(e));
+    }
+  };
+  const readFile = async (file) => {
+    if (!file) return;
+    try {
+      const table = controller.luts.set(file.name, await file.text());
+      apply({ src: file.name, ...lut?.strength !== void 0 ? { strength: lut.strength } : {}, ...table.title ? { name: table.title } : {} }, "Apply LUT");
+    } catch (e) {
+      setMessage(`${file.name}: ${e instanceof Error ? e.message : String(e)}`);
+    }
+  };
+  return /* @__PURE__ */ jsxs4(Fragment3, { children: [
+    /* @__PURE__ */ jsx5(Row, { label: "LUT", name: "grade.lut", children: /* @__PURE__ */ jsxs4("div", { className: "flex min-w-0 gap-1", children: [
+      /* @__PURE__ */ jsx5(Commit, { value: lut?.src ?? "", placeholder: "look.cube", "aria-label": "LUT file", disabled, onCommit: (raw) => void choose(raw.trim()) }),
+      /* @__PURE__ */ jsxs4("label", { className: `${btn2} cursor-pointer whitespace-nowrap`, title: "Load a .cube file", children: [
+        "Load",
+        /* @__PURE__ */ jsx5("input", { type: "file", accept: ".cube", className: "sr-only", disabled, "aria-label": "Load a .cube LUT", onChange: (e) => void readFile(e.currentTarget.files?.[0]) })
+      ] }),
+      lut && /* @__PURE__ */ jsx5("button", { type: "button", className: btn2, disabled, "aria-label": "Remove LUT", onClick: () => apply(null, "Remove LUT"), children: "\u2715" })
+    ] }) }),
+    lut && /* @__PURE__ */ jsx5(Row, { label: "LUT strength", name: "grade.lut.strength", children: /* @__PURE__ */ jsx5(
+      Commit,
+      {
+        type: "number",
+        min: 0,
+        max: 1,
+        step: 0.05,
+        value: String(lut.strength ?? 1),
+        "aria-label": "LUT strength",
+        disabled,
+        onCommit: (raw) => {
+          const n = Number(raw);
+          if (raw.trim() && Number.isFinite(n)) apply(n > 0 ? { ...lut, strength: Math.min(1, n) } : null, n > 0 ? "Change LUT strength" : "Remove LUT");
+        }
+      }
+    ) }),
+    message && /* @__PURE__ */ jsx5("p", { className: "text-xs text-red-500", role: "alert", "data-lut-error": "", children: message })
+  ] });
+}
 function Row({ label, name, children }) {
   return /* @__PURE__ */ jsxs4("label", { className: "grid grid-cols-[5.5rem_minmax(0,1fr)] items-center gap-2 text-xs", "data-field": name, children: [
     /* @__PURE__ */ jsx5("span", { className: "text-muted-foreground", children: label }),
@@ -630,7 +685,7 @@ function ClipInspector({ controller, className = "" }) {
           disabled,
           "aria-label": "Apply a look",
           onChange: (e) => {
-            const grade = videoGradePreset(e.target.value);
+            const grade = videoGradeLook(clip.grade, e.target.value);
             if (grade) controller.apply({ op: "update_clip", clip: clip.id, set: { grade } }, `Apply ${e.target.value} look`);
           },
           children: [
@@ -657,7 +712,8 @@ function ClipInspector({ controller, className = "" }) {
             set("grade", grade, `Change ${c.label.toLowerCase()}`);
           }
         }
-      ) }, c.key))
+      ) }, c.key)),
+      /* @__PURE__ */ jsx5(LutControls, { controller, clip, disabled })
     ] }),
     at.track.kind === "video" && ["animateIn", "animateOut"].map((key) => /* @__PURE__ */ jsx5(Row, { label: key === "animateIn" ? "Animate in" : "Animate out", name: key, children: /* @__PURE__ */ jsxs4(
       "select",
@@ -788,7 +844,7 @@ function ClipInspector({ controller, className = "" }) {
 }
 
 // src/video-editor/MediaBin.tsx
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 import {
   formatVideoSeconds as formatVideoSeconds3,
   probeVideoMedia,
@@ -800,11 +856,11 @@ var btn3 = "rounded border border-border px-2 py-0.5 text-xs disabled:opacity-40
 function MediaBin({ controller, editable = true, fileToUrl, probe = probeVideoMedia, className = "" }) {
   const { project, readOnly } = useVideoEditorState(controller);
   const canEdit = editable && !readOnly;
-  const [url, setUrl] = useState3("");
-  const [urlKind, setUrlKind] = useState3("");
-  const [busy, setBusy] = useState3(0);
-  const [problem, setProblem] = useState3(null);
-  const [over, setOver] = useState3(false);
+  const [url, setUrl] = useState4("");
+  const [urlKind, setUrlKind] = useState4("");
+  const [busy, setBusy] = useState4(0);
+  const [problem, setProblem] = useState4(null);
+  const [over, setOver] = useState4(false);
   const addSource = async (src, kind, name) => {
     setBusy((n) => n + 1);
     try {
@@ -939,7 +995,7 @@ function MediaBin({ controller, editable = true, fileToUrl, probe = probeVideoMe
 }
 
 // src/video-editor/TranscriptPanel.tsx
-import React5, { useMemo as useMemo3, useState as useState4 } from "react";
+import React6, { useMemo as useMemo3, useState as useState5 } from "react";
 import {
   findVideoFillers,
   findVideoTranscriptPauses,
@@ -955,9 +1011,9 @@ function TranscriptPanel({ controller, track, editable = true, className = "" })
   const state = useVideoEditorState(controller);
   const { project, time, readOnly } = state;
   const canEdit = editable && !readOnly;
-  const [anchor, setAnchor] = useState4(null);
-  const [focus, setFocus] = useState4(null);
-  const [message, setMessage] = useState4(null);
+  const [anchor, setAnchor] = useState5(null);
+  const [focus, setFocus] = useState5(null);
+  const [message, setMessage] = useState5(null);
   const words = useMemo3(() => {
     try {
       return videoTimelineTranscript(project, { track });
@@ -1002,7 +1058,7 @@ function TranscriptPanel({ controller, track, editable = true, className = "" })
           },
           children: words.map((w, i) => {
             const inSelection = selected !== null && i >= selected[0] && i <= selected[1];
-            return /* @__PURE__ */ jsxs6(React5.Fragment, { children: [
+            return /* @__PURE__ */ jsxs6(React6.Fragment, { children: [
               /* @__PURE__ */ jsx7(
                 "span",
                 {