@pixerate/editor-react 0.60.0 → 0.61.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" }),
@@ -220,6 +232,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;
@@ -235,6 +268,7 @@ function VideoTimeline({ controller, pxPerSecond, onPxPerSecondChange, editable
   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 +430,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",
                     {
@@ -930,6 +965,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: [