@pixerate/editor-react 0.53.0 → 0.55.0

package/dist/video-editor/index.js

@@ -420,10 +420,22 @@ function VideoTimeline({ controller, pxPerSecond, onPxPerSecondChange, editable
 import {
   findVideoClip,
   formatVideoSeconds as formatVideoSeconds2,
+  VIDEO_CLIP_ANIMATION_EFFECTS,
+  VIDEO_CLIP_ANIMATION_LABELS,
+  normalizeVideoGrade,
+  VIDEO_GRADE_CONTROLS,
+  VIDEO_GRADE_PRESET_NAMES,
+  videoGradePreset,
+  VIDEO_BLEND_MODE_LABELS,
+  VIDEO_BLEND_MODES,
   VIDEO_FADE_CURVE_LABELS,
   VIDEO_FADE_CURVES,
+  VIDEO_TRANSITION_LABELS,
   VIDEO_TRANSITION_TYPES,
+  VIDEO_WIPE_DIRECTIONS,
+  videoTransitionHasDirection,
   videoKeyframeRows,
+  videoTransitionAudioCurve,
   videoKeyframeToggleEdit,
   videoKeyframeValueEdit
 } from "@pixerate/editor/video-editor";
@@ -536,6 +548,62 @@ function ClipInspector({ controller, className = "" }) {
       ),
       row.keyed && /* @__PURE__ */ jsx4("span", { className: "shrink-0 text-[10px] tabular-nums text-muted-foreground", "data-keyframe-count": row.property, children: row.keys })
     ] }) }, row.property)),
+    at.track.kind === "video" && /* @__PURE__ */ jsx4(Row, { label: "Blend", name: "blend", children: /* @__PURE__ */ jsx4("select", { className: field, value: clip.blend ?? "normal", disabled, "aria-label": "Blend mode", onChange: (e) => set("blend", e.target.value === "normal" ? void 0 : e.target.value, "Change blend mode"), children: VIDEO_BLEND_MODES.map((m) => /* @__PURE__ */ jsx4("option", { value: m, children: VIDEO_BLEND_MODE_LABELS[m] }, m)) }) }),
+    at.track.kind === "video" && /* @__PURE__ */ jsxs3(Fragment3, { children: [
+      /* @__PURE__ */ jsx4(Row, { label: "Look", name: "gradePreset", children: /* @__PURE__ */ jsxs3(
+        "select",
+        {
+          className: field,
+          value: "",
+          disabled,
+          "aria-label": "Apply a look",
+          onChange: (e) => {
+            const grade = videoGradePreset(e.target.value);
+            if (grade) controller.apply({ op: "update_clip", clip: clip.id, set: { grade } }, `Apply ${e.target.value} look`);
+          },
+          children: [
+            /* @__PURE__ */ jsx4("option", { value: "", children: clip.grade ? "Graded" : "None" }),
+            VIDEO_GRADE_PRESET_NAMES.map((name) => /* @__PURE__ */ jsx4("option", { value: name, children: name.replace(/-/g, " ") }, name))
+          ]
+        }
+      ) }),
+      VIDEO_GRADE_CONTROLS.map((c) => /* @__PURE__ */ jsx4(Row, { label: c.label, name: `grade.${c.key}`, children: /* @__PURE__ */ jsx4(
+        Commit,
+        {
+          type: "number",
+          min: c.min,
+          max: c.max,
+          step: c.step,
+          value: clip.grade?.[c.key] === void 0 ? "" : String(clip.grade[c.key]),
+          placeholder: "0",
+          "aria-label": c.label,
+          disabled,
+          onCommit: (raw) => {
+            const n = raw.trim() ? Number(raw) : 0;
+            if (!Number.isFinite(n)) return;
+            const grade = normalizeVideoGrade({ ...clip.grade, [c.key]: n });
+            set("grade", grade, `Change ${c.label.toLowerCase()}`);
+          }
+        }
+      ) }, c.key))
+    ] }),
+    at.track.kind === "video" && ["animateIn", "animateOut"].map((key) => /* @__PURE__ */ jsx4(Row, { label: key === "animateIn" ? "Animate in" : "Animate out", name: key, children: /* @__PURE__ */ jsxs3(
+      "select",
+      {
+        className: field,
+        value: clip[key]?.effect ?? "",
+        disabled,
+        "aria-label": key === "animateIn" ? "Animate in" : "Animate out",
+        onChange: (e) => {
+          const effect = e.target.value;
+          set(key, effect ? { ...clip[key], effect } : void 0, key === "animateIn" ? "Change entrance" : "Change exit");
+        },
+        children: [
+          /* @__PURE__ */ jsx4("option", { value: "", children: "None" }),
+          VIDEO_CLIP_ANIMATION_EFFECTS.map((effect) => /* @__PURE__ */ jsx4("option", { value: effect, children: VIDEO_CLIP_ANIMATION_LABELS[effect] }, effect))
+        ]
+      }
+    ) }, key)),
     /* @__PURE__ */ jsx4(Row, { label: "Fade in (ms)", name: "fadeIn", children: number("fadeIn", "Fade in", { min: 0, step: 100 }) }),
     /* @__PURE__ */ jsx4(Row, { label: "Fade out (ms)", name: "fadeOut", children: number("fadeOut", "Fade out", { min: 0, step: 100 }) }),
     clip.type === "media" && /* @__PURE__ */ jsxs3(Fragment3, { children: [
@@ -581,7 +649,7 @@ function ClipInspector({ controller, className = "" }) {
         },
         children: [
           /* @__PURE__ */ jsx4("option", { value: "", children: "None" }),
-          VIDEO_TRANSITION_TYPES.map((t) => /* @__PURE__ */ jsx4("option", { value: t, children: t === "crossfade" ? "Crossfade" : t === "dip" ? "Dip to colour" : "Wipe" }, t))
+          VIDEO_TRANSITION_TYPES.map((t) => /* @__PURE__ */ jsx4("option", { value: t, children: VIDEO_TRANSITION_LABELS[t] }, t))
         ]
       }
     ) }),
@@ -599,6 +667,33 @@ function ClipInspector({ controller, className = "" }) {
           if (raw.trim() && Number.isFinite(n) && n > 0) controller.apply({ op: "set_transition", clip: clip.id, transition: { ...transition, duration: n } }, "Change transition length");
         }
       }
+    ) }),
+    transition && videoTransitionHasDirection(transition.type) && /* @__PURE__ */ jsx4(Row, { label: "Direction", name: "transitionDirection", children: /* @__PURE__ */ jsx4(
+      "select",
+      {
+        className: field,
+        value: transition.direction ?? "right",
+        disabled,
+        "aria-label": "Transition direction",
+        onChange: (e) => controller.apply({ op: "set_transition", clip: clip.id, transition: { ...transition, direction: e.target.value } }, "Change transition direction"),
+        children: VIDEO_WIPE_DIRECTIONS.map((d) => /* @__PURE__ */ jsx4("option", { value: d, children: d }, d))
+      }
+    ) }),
+    transition && /* @__PURE__ */ jsx4(Row, { label: "Transition sound", name: "transitionAudioCurve", children: /* @__PURE__ */ jsx4(
+      "select",
+      {
+        className: field,
+        value: videoTransitionAudioCurve(transition),
+        disabled,
+        "aria-label": "Transition sound curve",
+        onChange: (e) => {
+          const { audioCurve: _, ...rest } = transition;
+          const curve = e.target.value;
+          const next = curve === videoTransitionAudioCurve(rest) ? rest : { ...rest, audioCurve: curve };
+          controller.apply({ op: "set_transition", clip: clip.id, transition: next }, "Change transition sound");
+        },
+        children: VIDEO_FADE_CURVES.map((c) => /* @__PURE__ */ jsx4("option", { value: c, children: VIDEO_FADE_CURVE_LABELS[c] }, c))
+      }
     ) })
   ] });
 }
@@ -754,10 +849,122 @@ function MediaBin({ controller, editable = true, fileToUrl, probe = probeVideoMe
   );
 }
 
+// src/video-editor/TranscriptPanel.tsx
+import React4, { useMemo as useMemo3, useState as useState3 } from "react";
+import {
+  findVideoFillers,
+  findVideoTranscriptPauses,
+  videoRemoveRangesEdits,
+  videoTimelineTranscript,
+  videoTranscriptEdit,
+  videoWordAt,
+  videoWordsRange
+} from "@pixerate/editor/video-editor";
+import { Fragment as Fragment5, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var btn3 = "rounded border border-border px-1.5 py-0.5 text-[11px] disabled:opacity-40";
+function TranscriptPanel({ controller, track, editable = true, className = "" }) {
+  const state = useVideoEditorState(controller);
+  const { project, time, readOnly } = state;
+  const canEdit = editable && !readOnly;
+  const [anchor, setAnchor] = useState3(null);
+  const [focus, setFocus] = useState3(null);
+  const [message, setMessage] = useState3(null);
+  const words = useMemo3(() => {
+    try {
+      return videoTimelineTranscript(project, { track });
+    } catch {
+      return [];
+    }
+  }, [project, track]);
+  const current = videoWordAt(words, time);
+  const selected = anchor !== null && focus !== null && anchor < words.length && focus < words.length ? [Math.min(anchor, focus), Math.max(anchor, focus)] : null;
+  const sound = project.assets.filter((a) => a.kind !== "image");
+  const cut = (ranges, label, none) => {
+    if (!ranges.length) return setMessage(none);
+    const r = controller.apply(videoRemoveRangesEdits(ranges), label);
+    setMessage(r.ok ? null : r.error);
+    setAnchor(null);
+    setFocus(null);
+  };
+  const load = async (assetId, file) => {
+    if (!file) return;
+    try {
+      const r = controller.apply(videoTranscriptEdit(assetId, await file.text()), "Attach transcript");
+      setMessage(r.ok ? null : r.error);
+    } catch (e) {
+      setMessage(e instanceof Error ? e.message : String(e));
+    }
+  };
+  return /* @__PURE__ */ jsxs5("div", { className: `flex flex-col gap-2 text-xs ${className}`, "data-transcript-panel": "", children: [
+    words.length > 0 ? /* @__PURE__ */ jsxs5(Fragment5, { children: [
+      /* @__PURE__ */ jsx6(
+        "div",
+        {
+          className: "max-h-48 overflow-y-auto leading-6",
+          role: "listbox",
+          "aria-label": "Transcript",
+          "aria-multiselectable": "true",
+          tabIndex: 0,
+          onKeyDown: (e) => {
+            if (canEdit && selected && (e.key === "Delete" || e.key === "Backspace")) {
+              e.preventDefault();
+              cut([videoWordsRange(words, selected[0], selected[1])], "Cut words", "Select words to cut.");
+            }
+          },
+          children: words.map((w, i) => {
+            const inSelection = selected !== null && i >= selected[0] && i <= selected[1];
+            return /* @__PURE__ */ jsxs5(React4.Fragment, { children: [
+              /* @__PURE__ */ jsx6(
+                "span",
+                {
+                  role: "option",
+                  "aria-selected": inSelection,
+                  tabIndex: -1,
+                  className: `cursor-pointer rounded px-0.5 ${inSelection ? "bg-rose-500/30" : i === current ? "bg-amber-400/40" : "hover:bg-muted"}`,
+                  "data-word": i,
+                  "data-current": i === current ? "" : void 0,
+                  "data-selected": inSelection ? "" : void 0,
+                  onClick: (e) => {
+                    if (e.shiftKey && anchor !== null) setFocus(i);
+                    else {
+                      setAnchor(i);
+                      setFocus(i);
+                      controller.seek(w.start);
+                    }
+                  },
+                  children: w.word
+                }
+              ),
+              " "
+            ] }, `${w.clip}:${w.index}`);
+          })
+        }
+      ),
+      canEdit && /* @__PURE__ */ jsxs5("div", { className: "flex flex-wrap gap-1", children: [
+        /* @__PURE__ */ jsx6("button", { type: "button", className: btn3, disabled: !selected, onClick: () => selected && cut([videoWordsRange(words, selected[0], selected[1])], "Cut words", "Select words to cut."), children: "Delete selected words" }),
+        /* @__PURE__ */ jsx6("button", { type: "button", className: btn3, onClick: () => cut(findVideoFillers(words), "Remove fillers", "No filler words found."), children: "Remove fillers" }),
+        /* @__PURE__ */ jsx6("button", { type: "button", className: btn3, onClick: () => cut(findVideoTranscriptPauses(words, { fps: project.fps }), "Tighten pauses", "No long pauses found."), children: "Tighten pauses" })
+      ] })
+    ] }) : /* @__PURE__ */ jsx6("p", { className: "text-muted-foreground", "data-transcript-empty": "", children: "No transcribed media on the timeline. Load a transcript (Whisper JSON, .srt or .vtt) for a video or audio asset to edit by text." }),
+    canEdit && sound.length > 0 && /* @__PURE__ */ jsxs5("details", { children: [
+      /* @__PURE__ */ jsx6("summary", { className: "cursor-pointer text-muted-foreground", children: "Transcripts" }),
+      /* @__PURE__ */ jsx6("ul", { className: "mt-1 space-y-1", children: sound.map((a) => /* @__PURE__ */ jsxs5("li", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs5("span", { className: "min-w-0 flex-1 truncate", children: [
+          a.name ?? a.id,
+          " ",
+          a.transcript ? `\xB7 ${a.transcript.length} words` : ""
+        ] }),
+        /* @__PURE__ */ jsx6("input", { type: "file", accept: ".json,.srt,.vtt,application/json,text/vtt", "aria-label": `Load a transcript for ${a.name ?? a.id}`, className: "w-40 text-[10px]", onChange: (e) => void load(a.id, e.target.files?.[0]) })
+      ] }, a.id)) })
+    ] }),
+    message && /* @__PURE__ */ jsx6("p", { className: "text-red-500", role: "alert", "data-transcript-error": "", children: message })
+  ] });
+}
+
 // src/video-editor/VideoEditor.tsx
 import { useEffect as useEffect4 } from "react";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-function VideoEditor({ controller: given, options, editable = true, pxPerSecond, onPxPerSecondChange, resolution, showIssues = true, className = "" }) {
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function VideoEditor({ controller: given, options, editable = true, pxPerSecond, onPxPerSecondChange, resolution, showIssues = true, showTranscript = true, className = "" }) {
   const { controller, state } = useVideoEditor(given ?? options ?? {});
   useEffect4(() => {
     if (editable) return;
@@ -766,23 +973,25 @@ function VideoEditor({ controller: given, options, editable = true, pxPerSecond,
     return () => controller.setReadOnly(was);
   }, [controller, editable]);
   const { issues } = state;
-  const issueList = showIssues && issues.length > 0 && /* @__PURE__ */ jsx6("ul", { className: "space-y-0.5 text-xs", "aria-label": "Video issues", "data-video-issues": "", children: issues.map((issue, i) => /* @__PURE__ */ jsx6("li", { className: issue.severity === "error" ? "text-red-500" : issue.severity === "warning" ? "text-amber-500" : "text-muted-foreground", "data-issue": issue.code, children: issue.message }, i)) });
-  return /* @__PURE__ */ jsxs5("div", { className: `flex flex-col gap-3 ${className}`, "data-video-editor": "", children: [
-    /* @__PURE__ */ jsxs5("div", { className: `grid gap-3 ${editable ? "lg:grid-cols-[16rem_minmax(0,1fr)_18rem]" : ""}`, children: [
-      editable && /* @__PURE__ */ jsx6(MediaBin, { controller, className: "min-w-0" }),
-      /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 flex-col gap-2", children: [
-        /* @__PURE__ */ jsx6(VideoPreview, { controller, resolution, className: "rounded-md border border-border" }),
-        /* @__PURE__ */ jsx6(VideoTransport, { controller, editable })
+  const issueList = showIssues && issues.length > 0 && /* @__PURE__ */ jsx7("ul", { className: "space-y-0.5 text-xs", "aria-label": "Video issues", "data-video-issues": "", children: issues.map((issue, i) => /* @__PURE__ */ jsx7("li", { className: issue.severity === "error" ? "text-red-500" : issue.severity === "warning" ? "text-amber-500" : "text-muted-foreground", "data-issue": issue.code, children: issue.message }, i)) });
+  return /* @__PURE__ */ jsxs6("div", { className: `flex flex-col gap-3 ${className}`, "data-video-editor": "", children: [
+    /* @__PURE__ */ jsxs6("div", { className: `grid gap-3 ${editable ? "lg:grid-cols-[16rem_minmax(0,1fr)_18rem]" : ""}`, children: [
+      editable && /* @__PURE__ */ jsx7(MediaBin, { controller, className: "min-w-0" }),
+      /* @__PURE__ */ jsxs6("div", { className: "flex min-w-0 flex-col gap-2", children: [
+        /* @__PURE__ */ jsx7(VideoPreview, { controller, resolution, className: "rounded-md border border-border" }),
+        /* @__PURE__ */ jsx7(VideoTransport, { controller, editable })
       ] }),
-      editable && /* @__PURE__ */ jsx6(ClipInspector, { controller, className: "min-w-0" })
+      editable && /* @__PURE__ */ jsx7(ClipInspector, { controller, className: "min-w-0" })
     ] }),
-    /* @__PURE__ */ jsx6(VideoTimeline, { controller, editable, pxPerSecond, onPxPerSecondChange }),
+    /* @__PURE__ */ jsx7(VideoTimeline, { controller, editable, pxPerSecond, onPxPerSecondChange }),
+    showTranscript && /* @__PURE__ */ jsx7(TranscriptPanel, { controller, editable }),
     issueList
   ] });
 }
 export {
   ClipInspector,
   MediaBin,
+  TranscriptPanel,
   VideoEditor,
   VideoPreview,
   VideoTimeline,