@pixerate/editor-react 0.54.0 → 0.56.0

package/dist/video-editor/index.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/video-editor/index.ts
@@ -22,6 +32,7 @@ var video_editor_exports = {};
 __export(video_editor_exports, {
   ClipInspector: () => ClipInspector,
   MediaBin: () => MediaBin,
+  TranscriptPanel: () => TranscriptPanel,
   VideoEditor: () => VideoEditor,
   VideoPreview: () => VideoPreview,
   VideoTimeline: () => VideoTimeline,
@@ -440,6 +451,7 @@ function VideoTimeline({ controller, pxPerSecond, onPxPerSecondChange, editable
 // src/video-editor/ClipInspector.tsx
 var import_video_editor5 = require("@pixerate/editor/video-editor");
 var import_jsx_runtime4 = require("react/jsx-runtime");
+var btn2 = "rounded border border-border px-1.5 py-0.5 text-[11px] disabled:opacity-40";
 var field = "w-full rounded border border-border bg-transparent px-1 py-0.5 text-xs disabled:opacity-50";
 var DEFAULT_TRANSITION = 500;
 function Commit({
@@ -607,7 +619,24 @@ function ClipInspector({ controller, className = "" }) {
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Row, { label: "Fade in (ms)", name: "fadeIn", children: number("fadeIn", "Fade in", { min: 0, step: 100 }) }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Row, { label: "Fade out (ms)", name: "fadeOut", children: number("fadeOut", "Fade out", { min: 0, step: 100 }) }),
     clip.type === "media" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Row, { label: "Speed", name: "speed", children: number("speed", "Speed", { min: 0.1, step: 0.25 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Row, { label: "Speed", name: "speed", children: clip.timeRemap ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "flex items-center gap-1", "data-ramped": "", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-muted-foreground", children: "ramped" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: btn2, disabled, onClick: () => controller.apply({ op: "set_time_remap", clip: clip.id, keys: null, ripple: true }, "Remove speed ramp"), children: "Remove ramp" })
+      ] }) : number("speed", "Speed", { min: 0.1, step: 0.25 }) }),
+      project.assets.find((a) => a.id === clip.asset)?.kind !== "image" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Row, { label: "Retime", name: "retime", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "flex flex-wrap gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            type: "button",
+            className: btn2,
+            disabled: disabled || time < clip.start || time > clip.start + clip.duration,
+            title: "Hold the frame at the playhead for a second, pushing later clips along",
+            onClick: () => controller.apply((0, import_video_editor5.videoFreezeFrameEdit)(clip, time - clip.start, 1e3), "Freeze frame"),
+            children: "Freeze 1 s here"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: btn2, disabled, title: "Normal speed, then a glide into 0.3\xD7 slow motion", onClick: () => controller.apply((0, import_video_editor5.videoSpeedRampEdit)(clip, (0, import_video_editor5.videoSlowMotionRamp)(clip.duration)), "Speed ramp"), children: "Slow-mo ramp" })
+      ] }) }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Row, { label: "Muted", name: "muted", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { type: "checkbox", className: "justify-self-start", checked: !!clip.muted, disabled, "aria-label": "Muted", onChange: (e) => set("muted", e.target.checked || void 0, e.target.checked ? "Mute clip" : "Unmute clip") }) }),
       ["fadeInCurve", "fadeOutCurve"].map(
         (key) => (key === "fadeInCurve" ? clip.fadeIn : clip.fadeOut) ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Row, { label: key === "fadeInCurve" ? "Fade in sound" : "Fade out sound", name: key, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -702,7 +731,7 @@ function ClipInspector({ controller, className = "" }) {
 var import_react4 = 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-2 py-0.5 text-xs disabled:opacity-40";
+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_editor6.probeVideoMedia, className = "" }) {
   const { project, readOnly } = useVideoEditorState(controller);
   const canEdit = editable && !readOnly;
@@ -781,7 +810,7 @@ function MediaBin({ controller, editable = true, fileToUrl, probe = import_video
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "rounded bg-muted px-1 text-[10px] uppercase text-muted-foreground", "data-asset-kind": "", children: asset.kind }),
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "min-w-0 flex-1 truncate", title: asset.src, children: asset.name ?? asset.id }),
           asset.duration !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "tabular-nums text-muted-foreground", children: (0, import_video_editor6.formatVideoSeconds)(asset.duration) }),
-          editable && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: btn2, disabled: !canEdit, onClick: () => addToTimeline(asset), "data-add-to-timeline": "", children: "Add to timeline" })
+          editable && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", className: btn3, disabled: !canEdit, onClick: () => addToTimeline(asset), "data-add-to-timeline": "", children: "Add to timeline" })
         ] }, asset.id)) }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "text-xs text-muted-foreground", children: [
           "No media yet.",
           editable ? " Choose or drop files, or add a URL." : ""
@@ -832,7 +861,7 @@ function MediaBin({ controller, editable = true, fileToUrl, probe = import_video
                   /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "audio", children: "Audio" }),
                   /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "image", children: "Image" })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "submit", className: btn2, disabled: !canEdit || !url.trim(), "data-add-url": "", children: "Add" })
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "submit", className: btn3, disabled: !canEdit || !url.trim(), "data-add-url": "", children: "Add" })
               ]
             }
           )
@@ -844,29 +873,134 @@ function MediaBin({ controller, editable = true, fileToUrl, probe = import_video
   );
 }
 
-// src/video-editor/VideoEditor.tsx
-var import_react5 = require("react");
+// src/video-editor/TranscriptPanel.tsx
+var import_react5 = __toESM(require("react"), 1);
+var import_video_editor7 = require("@pixerate/editor/video-editor");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-function VideoEditor({ controller: given, options, editable = true, pxPerSecond, onPxPerSecondChange, resolution, showIssues = true, className = "" }) {
+var btn4 = "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] = (0, import_react5.useState)(null);
+  const [focus, setFocus] = (0, import_react5.useState)(null);
+  const [message, setMessage] = (0, import_react5.useState)(null);
+  const words = (0, import_react5.useMemo)(() => {
+    try {
+      return (0, import_video_editor7.videoTimelineTranscript)(project, { track });
+    } catch {
+      return [];
+    }
+  }, [project, track]);
+  const current = (0, import_video_editor7.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((0, import_video_editor7.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((0, import_video_editor7.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__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `flex flex-col gap-2 text-xs ${className}`, "data-transcript-panel": "", children: [
+    words.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "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([(0, import_video_editor7.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__ */ (0, import_jsx_runtime6.jsxs)(import_react5.default.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "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__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: btn4, disabled: !selected, onClick: () => selected && cut([(0, import_video_editor7.videoWordsRange)(words, selected[0], selected[1])], "Cut words", "Select words to cut."), children: "Delete selected words" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: btn4, onClick: () => cut((0, import_video_editor7.findVideoFillers)(words), "Remove fillers", "No filler words found."), children: "Remove fillers" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: btn4, onClick: () => cut((0, import_video_editor7.findVideoTranscriptPauses)(words, { fps: project.fps }), "Tighten pauses", "No long pauses found."), children: "Tighten pauses" })
+      ] })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsxs)("details", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("summary", { className: "cursor-pointer text-muted-foreground", children: "Transcripts" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ul", { className: "mt-1 space-y-1", children: sound.map((a) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("li", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "min-w-0 flex-1 truncate", children: [
+          a.name ?? a.id,
+          " ",
+          a.transcript ? `\xB7 ${a.transcript.length} words` : ""
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-red-500", role: "alert", "data-transcript-error": "", children: message })
+  ] });
+}
+
+// src/video-editor/VideoEditor.tsx
+var import_react6 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function VideoEditor({ controller: given, options, editable = true, pxPerSecond, onPxPerSecondChange, resolution, showIssues = true, showTranscript = true, className = "" }) {
   const { controller, state } = useVideoEditor(given ?? options ?? {});
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (editable) return;
     const was = controller.getState().readOnly;
     controller.setReadOnly(true);
     return () => controller.setReadOnly(was);
   }, [controller, editable]);
   const { issues } = state;
-  const issueList = showIssues && issues.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ul", { className: "space-y-0.5 text-xs", "aria-label": "Video issues", "data-video-issues": "", children: issues.map((issue, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `flex flex-col gap-3 ${className}`, "data-video-editor": "", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `grid gap-3 ${editable ? "lg:grid-cols-[16rem_minmax(0,1fr)_18rem]" : ""}`, children: [
-      editable && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MediaBin, { controller, className: "min-w-0" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex min-w-0 flex-col gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(VideoPreview, { controller, resolution, className: "rounded-md border border-border" }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(VideoTransport, { controller, editable })
+  const issueList = showIssues && issues.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { className: "space-y-0.5 text-xs", "aria-label": "Video issues", "data-video-issues": "", children: issues.map((issue, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `flex flex-col gap-3 ${className}`, "data-video-editor": "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `grid gap-3 ${editable ? "lg:grid-cols-[16rem_minmax(0,1fr)_18rem]" : ""}`, children: [
+      editable && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MediaBin, { controller, className: "min-w-0" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex min-w-0 flex-col gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VideoPreview, { controller, resolution, className: "rounded-md border border-border" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VideoTransport, { controller, editable })
       ] }),
-      editable && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ClipInspector, { controller, className: "min-w-0" })
+      editable && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ClipInspector, { controller, className: "min-w-0" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(VideoTimeline, { controller, editable, pxPerSecond, onPxPerSecondChange }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VideoTimeline, { controller, editable, pxPerSecond, onPxPerSecondChange }),
+    showTranscript && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TranscriptPanel, { controller, editable }),
     issueList
   ] });
 }
@@ -874,6 +1008,7 @@ function VideoEditor({ controller: given, options, editable = true, pxPerSecond,
 0 && (module.exports = {
   ClipInspector,
   MediaBin,
+  TranscriptPanel,
   VideoEditor,
   VideoPreview,
   VideoTimeline,