@pixerate/editor-react 0.61.0 → 0.63.0

package/dist/video-editor/index.js

@@ -201,6 +201,7 @@ import {
   planVideoClipDrag,
   videoDragLabel,
   videoAssetMap,
+  videoSequenceMap,
   videoClipLabel,
   videoClipShowsWaveform,
   videoClipWaveformPath,
@@ -264,6 +265,7 @@ 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);
@@ -473,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",
                     {
@@ -488,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,
@@ -664,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" })
     ] }),
@@ -812,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",