@pixerate/editor-react 0.60.0 → 0.62.0

package/dist/video-editor/index.cjs

@@ -205,6 +205,18 @@ function VideoTransport({ controller, editable = true, className = "" }) {
       " / ",
       (0, import_video_editor4.formatVideoTimecode)(duration, project.fps)
     ] }),
+    (0, import_video_editor4.videoProjectHasProxies)(project) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "select",
+      {
+        className: "rounded border border-border bg-transparent px-1 py-0.5 text-xs",
+        value: String(state.previewScale),
+        onChange: (e) => controller.setPreviewScale((0, import_video_editor4.parseVideoPreviewScale)(e.target.value)),
+        "aria-label": "Preview size",
+        title: "Play proxies in the preview (the export always uses the originals)",
+        "data-preview-scale": "",
+        children: import_video_editor4.VIDEO_PREVIEW_SCALE_OPTIONS.map((o) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: o.value, children: o.label }, o.value))
+      }
+    ),
     editable && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "mx-1 h-4 w-px bg-border" }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: btn, onClick: () => controller.splitAtPlayhead(), disabled: !canEdit, title: "Split at the playhead (S)", "data-split": "", children: "Split" }),
@@ -253,6 +265,27 @@ function ClipWaveform({ controller, clip, asset, width, height }) {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { className: "pointer-events-none absolute inset-0", width, height, "aria-hidden": "true", "data-waveform": clip.id, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d, fill: "currentColor", fillOpacity: 0.45 }) });
 }
 var isField = (el) => el instanceof HTMLElement && /^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName);
+function useCachedRanges(controller, project, px) {
+  const [ranges, setRanges] = (0, import_react4.useState)([]);
+  (0, import_react4.useEffect)(() => {
+    const cache = controller.frameCache;
+    if (!cache) return setRanges([]);
+    let timer = null;
+    const read = () => {
+      timer = null;
+      setRanges(cache.cachedRanges(project, { step: 2e3 / px }));
+    };
+    read();
+    const off = cache.subscribe(() => {
+      timer ??= setTimeout(read, 250);
+    });
+    return () => {
+      off();
+      if (timer) clearTimeout(timer);
+    };
+  }, [controller, project, px]);
+  return ranges;
+}
 function VideoTimeline({ controller, pxPerSecond, onPxPerSecondChange, editable = true, waveforms = "audio", className = "" }) {
   const state = useVideoEditorState(controller);
   const { project, duration, time, selection, readOnly, error } = state;
@@ -264,10 +297,12 @@ function VideoTimeline({ controller, pxPerSecond, onPxPerSecondChange, editable
   const rows = (0, import_react4.useRef)(/* @__PURE__ */ new Map());
   const ruler = (0, import_react4.useRef)(null);
   const assets = (0, import_video_editor5.videoAssetMap)(project);
+  const sequences = (0, import_video_editor5.videoSequenceMap)(project);
   const msToPx = (ms) => ms * px / 1e3;
   const span = Math.max(duration + 5e3, 1e4);
   const width = msToPx(span);
   const ticks = (0, import_video_editor5.videoRulerTicks)(span, px, project.fps);
+  const cached = useCachedRanges(controller, project, px);
   const seekAt = (clientX) => {
     const box = ruler.current.getBoundingClientRect();
     controller.seek(Math.max(0, (clientX - box.left) * 1e3 / px));
@@ -429,6 +464,7 @@ function VideoTimeline({ controller, pxPerSecond, onPxPerSecondChange, editable
                 },
                 children: [
                   ticks.map((t) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `absolute bottom-0 w-px ${t.major ? "h-2.5 bg-muted-foreground/70" : "h-1 bg-muted-foreground/40"}`, style: { left: t.x }, "data-tick": t.time, children: t.label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "absolute -top-3.5 left-1 whitespace-nowrap tabular-nums", children: t.label }) }, t.time)),
+                  cached.map((r) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "pointer-events-none absolute bottom-0 h-[3px] bg-emerald-500/70", style: { left: msToPx(r.start), width: Math.max(1, msToPx(r.end - r.start)) }, title: "Frames cached: plays and scrubs without waiting", "data-cached-range": "" }, r.start)),
                   (project.markers ?? []).map((m) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                     "div",
                     {
@@ -471,7 +507,7 @@ function VideoTimeline({ controller, pxPerSecond, onPxPerSecondChange, editable
                 children: clips.map(({ clip, home, start, duration: length, dragging }) => {
                   const asset = clip.type === "media" ? assets.get(clip.asset) : void 0;
                   const selected = selection.includes(clip.id);
-                  const label = (0, import_video_editor5.videoClipLabel)(clip, asset);
+                  const label = (0, import_video_editor5.videoClipLabel)(clip, asset, clip.type === "sequence" ? sequences.get(clip.sequence) : void 0);
                   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                     "div",
                     {
@@ -486,6 +522,7 @@ function VideoTimeline({ controller, pxPerSecond, onPxPerSecondChange, editable
                       },
                       title: `${label} \xB7 ${(0, import_video_editor5.formatVideoSeconds)(start)}\u2013${(0, import_video_editor5.formatVideoSeconds)(start + length)}`,
                       "data-clip": clip.id,
+                      "data-compound": clip.type === "sequence" ? clip.sequence : void 0,
                       "data-selected": selected ? "" : void 0,
                       "data-dragging": dragging ? "" : void 0,
                       "aria-selected": selected,
@@ -637,7 +674,7 @@ function ClipInspector({ controller, className = "" }) {
   const transition = clip.transition;
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `flex flex-col gap-1.5 ${className}`, "data-clip-inspector": "", "data-clip-id": clip.id, children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2 text-xs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-medium", children: clip.type === "media" ? "Media clip" : clip.type === "text" ? "Title" : "Colour clip" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "font-medium", children: clip.type === "media" ? "Media clip" : clip.type === "text" ? "Title" : clip.type === "sequence" ? "Compound clip" : "Colour clip" }),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("code", { className: "text-muted-foreground", children: clip.id }),
       at.track.locked && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-amber-500", children: "locked track" })
     ] }),
@@ -785,6 +822,14 @@ function ClipInspector({ controller, className = "" }) {
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Row, { label: "Font size", name: "fontSize", children: number("fontSize", "Font size", { min: 1, step: 2 }) }),
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Row, { label: "Background", name: "background", children: text("background", "Background") })
     ] }),
+    clip.type === "sequence" && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Row, { label: "Sequence", name: "sequence", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "truncate", title: "A compound clip plays its sequence as one picture and sound; its clips cannot be edited here yet", children: [
+        project.sequences?.find((q) => q.id === clip.sequence)?.name ?? clip.sequence,
+        " \xB7 from ",
+        (0, import_video_editor6.formatVideoSeconds)(clip.in ?? 0)
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Row, { label: "Muted", name: "muted", children: /* @__PURE__ */ (0, import_jsx_runtime5.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") }) })
+    ] }),
     clip.type === "color" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Row, { label: "Colour", name: "color", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Commit, { value: clip.color, "aria-label": "Colour", disabled, onCommit: (raw) => raw.trim() && set("color", raw.trim(), "Change colour") }) }),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Row, { label: "Transition in", name: "transition", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "select",
@@ -933,6 +978,7 @@ function MediaBin({ controller, editable = true, fileToUrl, probe = import_video
         project.assets.length ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ul", { className: "flex flex-col gap-1", "aria-label": "Media assets", children: project.assets.map((asset) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("li", { className: "flex items-center gap-2 text-xs", "data-asset": asset.id, children: [
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "rounded bg-muted px-1 text-[10px] uppercase text-muted-foreground", "data-asset-kind": "", children: asset.kind }),
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "min-w-0 flex-1 truncate", title: asset.src, children: asset.name ?? asset.id }),
+          asset.proxies?.length ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "rounded bg-muted px-1 text-[10px] text-muted-foreground", title: `Proxies: ${asset.proxies.map((p) => `${p.scale * 100}%`).join(", ")} (the preview can play these; exports use the original)`, "data-asset-proxies": "", children: "proxy" }) : null,
           asset.duration !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "tabular-nums text-muted-foreground", children: (0, import_video_editor7.formatVideoSeconds)(asset.duration) }),
           editable && /* @__PURE__ */ (0, import_jsx_runtime6.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_runtime6.jsxs)("p", { className: "text-xs text-muted-foreground", children: [