@pixerate/editor-react 0.57.0 → 0.58.0

package/dist/video-editor/index.cjs

@@ -518,6 +518,7 @@ function VideoTimeline({ controller, pxPerSecond, onPxPerSecondChange, editable
 }
 
 // src/video-editor/ClipInspector.tsx
+var import_react5 = require("react");
 var import_video_editor6 = require("@pixerate/editor/video-editor");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var btn2 = "rounded border border-border px-1.5 py-0.5 text-[11px] disabled:opacity-40";
@@ -547,6 +548,59 @@ function Commit({
     );
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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] = (0, import_react5.useState)(null);
+  const lut = clip.grade?.lut;
+  const apply = (setting, label) => {
+    const r = controller.apply((0, import_video_editor6.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__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Row, { label: "LUT", name: "grade.lut", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex min-w-0 gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Commit, { value: lut?.src ?? "", placeholder: "look.cube", "aria-label": "LUT file", disabled, onCommit: (raw) => void choose(raw.trim()) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: `${btn2} cursor-pointer whitespace-nowrap`, title: "Load a .cube file", children: [
+        "Load",
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: btn2, disabled, "aria-label": "Remove LUT", onClick: () => apply(null, "Remove LUT"), children: "\u2715" })
+    ] }) }),
+    lut && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Row, { label: "LUT strength", name: "grade.lut.strength", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      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__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-xs text-red-500", role: "alert", "data-lut-error": "", children: message })
+  ] });
+}
 function Row({ label, name, children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: "grid grid-cols-[5.5rem_minmax(0,1fr)] items-center gap-2 text-xs", "data-field": name, children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-muted-foreground", children: label }),
@@ -639,7 +693,7 @@ function ClipInspector({ controller, className = "" }) {
           disabled,
           "aria-label": "Apply a look",
           onChange: (e) => {
-            const grade = (0, import_video_editor6.videoGradePreset)(e.target.value);
+            const grade = (0, import_video_editor6.videoGradeLook)(clip.grade, e.target.value);
             if (grade) controller.apply({ op: "update_clip", clip: clip.id, set: { grade } }, `Apply ${e.target.value} look`);
           },
           children: [
@@ -666,7 +720,8 @@ function ClipInspector({ controller, className = "" }) {
             set("grade", grade, `Change ${c.label.toLowerCase()}`);
           }
         }
-      ) }, c.key))
+      ) }, c.key)),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LutControls, { controller, clip, disabled })
     ] }),
     at.track.kind === "video" && ["animateIn", "animateOut"].map((key) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Row, { label: key === "animateIn" ? "Animate in" : "Animate out", name: key, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "select",
@@ -797,18 +852,18 @@ function ClipInspector({ controller, className = "" }) {
 }
 
 // src/video-editor/MediaBin.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_video_editor7 = require("@pixerate/editor/video-editor");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var btn3 = "rounded border border-border px-2 py-0.5 text-xs disabled:opacity-40";
 function MediaBin({ controller, editable = true, fileToUrl, probe = import_video_editor7.probeVideoMedia, className = "" }) {
   const { project, readOnly } = useVideoEditorState(controller);
   const canEdit = editable && !readOnly;
-  const [url, setUrl] = (0, import_react5.useState)("");
-  const [urlKind, setUrlKind] = (0, import_react5.useState)("");
-  const [busy, setBusy] = (0, import_react5.useState)(0);
-  const [problem, setProblem] = (0, import_react5.useState)(null);
-  const [over, setOver] = (0, import_react5.useState)(false);
+  const [url, setUrl] = (0, import_react6.useState)("");
+  const [urlKind, setUrlKind] = (0, import_react6.useState)("");
+  const [busy, setBusy] = (0, import_react6.useState)(0);
+  const [problem, setProblem] = (0, import_react6.useState)(null);
+  const [over, setOver] = (0, import_react6.useState)(false);
   const addSource = async (src, kind, name) => {
     setBusy((n) => n + 1);
     try {
@@ -943,7 +998,7 @@ function MediaBin({ controller, editable = true, fileToUrl, probe = import_video
 }
 
 // src/video-editor/TranscriptPanel.tsx
-var import_react6 = __toESM(require("react"), 1);
+var import_react7 = __toESM(require("react"), 1);
 var import_video_editor8 = require("@pixerate/editor/video-editor");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var btn4 = "rounded border border-border px-1.5 py-0.5 text-[11px] disabled:opacity-40";
@@ -951,10 +1006,10 @@ function TranscriptPanel({ controller, track, editable = true, className = "" })
   const state = useVideoEditorState(controller);
   const { project, time, readOnly } = state;
   const canEdit = editable && !readOnly;
-  const [anchor, setAnchor] = (0, import_react6.useState)(null);
-  const [focus, setFocus] = (0, import_react6.useState)(null);
-  const [message, setMessage] = (0, import_react6.useState)(null);
-  const words = (0, import_react6.useMemo)(() => {
+  const [anchor, setAnchor] = (0, import_react7.useState)(null);
+  const [focus, setFocus] = (0, import_react7.useState)(null);
+  const [message, setMessage] = (0, import_react7.useState)(null);
+  const words = (0, import_react7.useMemo)(() => {
     try {
       return (0, import_video_editor8.videoTimelineTranscript)(project, { track });
     } catch {
@@ -998,7 +1053,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__ */ (0, import_jsx_runtime7.jsxs)(import_react6.default.Fragment, { children: [
+            return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react7.default.Fragment, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "span",
                 {
@@ -1047,11 +1102,11 @@ function TranscriptPanel({ controller, track, editable = true, className = "" })
 }
 
 // src/video-editor/VideoEditor.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function VideoEditor({ controller: given, options, editable = true, pxPerSecond, onPxPerSecondChange, resolution, showIssues = true, showTranscript = true, showScopes = false, className = "" }) {
   const { controller, state } = useVideoEditor(given ?? options ?? {});
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (editable) return;
     const was = controller.getState().readOnly;
     controller.setReadOnly(true);