@pixerate/editor-react 0.60.0 → 0.62.0

package/dist/video-editor/index.d.ts

@@ -77,6 +77,7 @@ interface VideoTransportProps {
 /**
  * Play / pause, a frame back and forward, the playhead and total length as timecode, and the
  * edits that work on the playhead and the selection: split, delete, ripple delete, undo and redo.
+ * When any asset has proxies, a preview-size control picks what the preview plays (a view setting).
  */
 declare function VideoTransport({ controller, editable, className }: VideoTransportProps): React__default.JSX.Element;
 
@@ -92,17 +93,6 @@ interface VideoTimelineProps {
     waveforms?: VideoWaveformMode;
     className?: string;
 }
-/**
- * The tracks of a `VideoEditorController` laid out in time: a ruler with markers (click or drag it
- * to scrub), a playhead, and one row per track with its toggles (mute, hide, lock) and its clips.
- * Click a clip to select it (Shift / Cmd to add or remove it), drag it to move it (onto another
- * track of the same kind too; hold Alt to insert, pushing later material along on every sync-locked
- * track, or Shift to overwrite what is underneath), drag an edge to trim it (Alt to ripple). Moves snap to clip edges,
- * markers, the playhead and frames. Every edit is one undo step; refused edits show why.
- *
- * Keyboard (when focused): Space plays, ←/→ step a frame, S splits at the playhead, Delete removes
- * the selection (Shift to ripple), Cmd/Ctrl+Z undoes, Shift+Cmd/Ctrl+Z redoes.
- */
 declare function VideoTimeline({ controller, pxPerSecond, onPxPerSecondChange, editable, waveforms, className }: VideoTimelineProps): React__default.JSX.Element;
 
 interface ClipInspectorProps {

package/dist/video-editor/index.js

@@ -145,7 +145,7 @@ function VideoScopes({ controller, scopes = VIDEO_SCOPE_KINDS, width = 256, heig
 }
 
 // src/video-editor/VideoTransport.tsx
-import { formatVideoTimecode } from "@pixerate/editor/video-editor";
+import { formatVideoTimecode, parseVideoPreviewScale, VIDEO_PREVIEW_SCALE_OPTIONS, videoProjectHasProxies } from "@pixerate/editor/video-editor";
 import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var btn = "rounded border border-border px-2 py-0.5 text-xs disabled:opacity-40";
 function VideoTransport({ controller, editable = true, className = "" }) {
@@ -161,6 +161,18 @@ function VideoTransport({ controller, editable = true, className = "" }) {
       " / ",
       formatVideoTimecode(duration, project.fps)
     ] }),
+    videoProjectHasProxies(project) && /* @__PURE__ */ jsx3(
+      "select",
+      {
+        className: "rounded border border-border bg-transparent px-1 py-0.5 text-xs",
+        value: String(state.previewScale),
+        onChange: (e) => controller.setPreviewScale(parseVideoPreviewScale(e.target.value)),
+        "aria-label": "Preview size",
+        title: "Play proxies in the preview (the export always uses the originals)",
+        "data-preview-scale": "",
+        children: VIDEO_PREVIEW_SCALE_OPTIONS.map((o) => /* @__PURE__ */ jsx3("option", { value: o.value, children: o.label }, o.value))
+      }
+    ),
     editable && /* @__PURE__ */ jsxs2(Fragment, { children: [
       /* @__PURE__ */ jsx3("span", { className: "mx-1 h-4 w-px bg-border" }),
       /* @__PURE__ */ jsx3("button", { type: "button", className: btn, onClick: () => controller.splitAtPlayhead(), disabled: !canEdit, title: "Split at the playhead (S)", "data-split": "", children: "Split" }),
@@ -189,6 +201,7 @@ import {
   planVideoClipDrag,
   videoDragLabel,
   videoAssetMap,
+  videoSequenceMap,
   videoClipLabel,
   videoClipShowsWaveform,
   videoClipWaveformPath,
@@ -220,6 +233,27 @@ function ClipWaveform({ controller, clip, asset, width, height }) {
   return /* @__PURE__ */ jsx4("svg", { className: "pointer-events-none absolute inset-0", width, height, "aria-hidden": "true", "data-waveform": clip.id, children: /* @__PURE__ */ jsx4("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] = useState2([]);
+  useEffect4(() => {
+    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;
@@ -231,10 +265,12 @@ function VideoTimeline({ controller, pxPerSecond, onPxPerSecondChange, editable
   const rows = useRef4(/* @__PURE__ */ new Map());
   const ruler = useRef4(null);
   const assets = videoAssetMap(project);
+  const sequences = videoSequenceMap(project);
   const msToPx = (ms) => ms * px / 1e3;
   const span = Math.max(duration + 5e3, 1e4);
   const width = msToPx(span);
   const ticks = 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));
@@ -396,6 +432,7 @@ function VideoTimeline({ controller, pxPerSecond, onPxPerSecondChange, editable
                 },
                 children: [
                   ticks.map((t) => /* @__PURE__ */ jsx4("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__ */ jsx4("span", { className: "absolute -top-3.5 left-1 whitespace-nowrap tabular-nums", children: t.label }) }, t.time)),
+                  cached.map((r) => /* @__PURE__ */ jsx4("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__ */ jsx4(
                     "div",
                     {
@@ -438,7 +475,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 = videoClipLabel(clip, asset);
+                  const label = videoClipLabel(clip, asset, clip.type === "sequence" ? sequences.get(clip.sequence) : void 0);
                   return /* @__PURE__ */ jsxs3(
                     "div",
                     {
@@ -453,6 +490,7 @@ function VideoTimeline({ controller, pxPerSecond, onPxPerSecondChange, editable
                       },
                       title: `${label} \xB7 ${formatVideoSeconds(start)}\u2013${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,
@@ -629,7 +667,7 @@ function ClipInspector({ controller, className = "" }) {
   const transition = clip.transition;
   return /* @__PURE__ */ jsxs4("div", { className: `flex flex-col gap-1.5 ${className}`, "data-clip-inspector": "", "data-clip-id": clip.id, children: [
     /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 text-xs", children: [
-      /* @__PURE__ */ jsx5("span", { className: "font-medium", children: clip.type === "media" ? "Media clip" : clip.type === "text" ? "Title" : "Colour clip" }),
+      /* @__PURE__ */ jsx5("span", { className: "font-medium", children: clip.type === "media" ? "Media clip" : clip.type === "text" ? "Title" : clip.type === "sequence" ? "Compound clip" : "Colour clip" }),
       /* @__PURE__ */ jsx5("code", { className: "text-muted-foreground", children: clip.id }),
       at.track.locked && /* @__PURE__ */ jsx5("span", { className: "text-amber-500", children: "locked track" })
     ] }),
@@ -777,6 +815,14 @@ function ClipInspector({ controller, className = "" }) {
       /* @__PURE__ */ jsx5(Row, { label: "Font size", name: "fontSize", children: number("fontSize", "Font size", { min: 1, step: 2 }) }),
       /* @__PURE__ */ jsx5(Row, { label: "Background", name: "background", children: text("background", "Background") })
     ] }),
+    clip.type === "sequence" && /* @__PURE__ */ jsxs4(Fragment3, { children: [
+      /* @__PURE__ */ jsx5(Row, { label: "Sequence", name: "sequence", children: /* @__PURE__ */ jsxs4("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 ",
+        formatVideoSeconds2(clip.in ?? 0)
+      ] }) }),
+      /* @__PURE__ */ jsx5(Row, { label: "Muted", name: "muted", children: /* @__PURE__ */ jsx5("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__ */ jsx5(Row, { label: "Colour", name: "color", children: /* @__PURE__ */ jsx5(Commit, { value: clip.color, "aria-label": "Colour", disabled, onCommit: (raw) => raw.trim() && set("color", raw.trim(), "Change colour") }) }),
     /* @__PURE__ */ jsx5(Row, { label: "Transition in", name: "transition", children: /* @__PURE__ */ jsxs4(
       "select",
@@ -930,6 +976,7 @@ function MediaBin({ controller, editable = true, fileToUrl, probe = probeVideoMe
         project.assets.length ? /* @__PURE__ */ jsx6("ul", { className: "flex flex-col gap-1", "aria-label": "Media assets", children: project.assets.map((asset) => /* @__PURE__ */ jsxs5("li", { className: "flex items-center gap-2 text-xs", "data-asset": asset.id, children: [
           /* @__PURE__ */ jsx6("span", { className: "rounded bg-muted px-1 text-[10px] uppercase text-muted-foreground", "data-asset-kind": "", children: asset.kind }),
           /* @__PURE__ */ jsx6("span", { className: "min-w-0 flex-1 truncate", title: asset.src, children: asset.name ?? asset.id }),
+          asset.proxies?.length ? /* @__PURE__ */ jsx6("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__ */ jsx6("span", { className: "tabular-nums text-muted-foreground", children: formatVideoSeconds3(asset.duration) }),
           editable && /* @__PURE__ */ jsx6("button", { type: "button", className: btn3, disabled: !canEdit, onClick: () => addToTimeline(asset), "data-add-to-timeline": "", children: "Add to timeline" })
         ] }, asset.id)) }) : /* @__PURE__ */ jsxs5("p", { className: "text-xs text-muted-foreground", children: [