@pixerate/editor-react 0.59.0 → 0.61.0

package/dist/index.js

@@ -31,7 +31,7 @@ import {
   SelectionOptionsBar,
   useImageEditor,
   useImageHistogram
-} from "./chunk-SYTV33TW.js";
+} from "./chunk-OSOGA2OJ.js";
 import {
   CommandPalette,
   useCommandPalette,

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;
@@ -268,6 +301,7 @@ function VideoTimeline({ controller, pxPerSecond, onPxPerSecondChange, editable
   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 +463,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",
                     {
@@ -933,6 +968,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: [