@pixerate/editor-react 0.61.0 → 0.63.0

package/dist/index.js

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

package/dist/video-editor/index.cjs

@@ -297,6 +297,7 @@ 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);
@@ -506,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",
                     {
@@ -521,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,
@@ -672,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" })
     ] }),
@@ -820,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",