ugcinc-render 1.8.66 → 1.8.68

package/dist/index.js

@@ -1922,7 +1922,17 @@ function calculateSegmentTimings(config, fps) {
       const offsetFrames = Math.round(offsetMs / 1e3 * fps);
       const startFrame = currentFrame + offsetFrames;
       let durationMs;
-      if (segment.duration) {
+      if (segment.type === "sequence") {
+        const sequenceSegment = segment;
+        const items = sequenceSegment.items ?? [];
+        if (items.length > 0) {
+          durationMs = items.reduce((total, item) => {
+            return total + (item.duration ?? sequenceSegment.defaultDuration);
+          }, 0);
+        } else {
+          durationMs = sequenceSegment.defaultDuration;
+        }
+      } else if (segment.duration) {
         durationMs = segment.duration.type === "absolute" ? segment.duration.value : 5e3;
       } else {
         durationMs = 5e3;
@@ -2059,6 +2069,88 @@ function VideoEditorComposition({
           segment.id
         );
       }
+      if (segment.type === "sequence") {
+        const sequenceSegment = segment;
+        const items = sequenceSegment.items ?? [];
+        if (items.length === 0) {
+          return null;
+        }
+        const frameIntoSegment = frame - startFrame;
+        let accumulatedFrames = 0;
+        let currentItem = null;
+        let itemStartFrame = startFrame;
+        for (const item of items) {
+          const itemDurationMs = item.duration ?? sequenceSegment.defaultDuration;
+          const itemDurationFrames = Math.round(itemDurationMs / 1e3 * fps);
+          if (frameIntoSegment < accumulatedFrames + itemDurationFrames) {
+            currentItem = item;
+            itemStartFrame = startFrame + accumulatedFrames;
+            break;
+          }
+          accumulatedFrames += itemDurationFrames;
+        }
+        if (!currentItem) {
+          return null;
+        }
+        if (currentItem.type === "image") {
+          const syntheticImageSegment = {
+            id: `${segment.id}-item`,
+            type: "image",
+            source: currentItem.url,
+            order: segment.order,
+            offset: { type: "absolute", value: 0 },
+            xOffset: sequenceSegment.xOffset,
+            yOffset: sequenceSegment.yOffset,
+            width: sequenceSegment.width,
+            height: sequenceSegment.height,
+            fit: sequenceSegment.fit,
+            rotation: sequenceSegment.rotation,
+            opacity: sequenceSegment.opacity,
+            zIndex: sequenceSegment.zIndex,
+            fadeIn: sequenceSegment.fadeIn
+          };
+          return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            ImageElement,
+            {
+              segment: syntheticImageSegment,
+              src: currentItem.url,
+              startFrame: itemStartFrame,
+              scale: 1
+            },
+            `${segment.id}-${currentItem.url}`
+          );
+        } else {
+          const itemDurationMs = currentItem.duration ?? sequenceSegment.defaultDuration;
+          const itemDurationFrames = Math.round(itemDurationMs / 1e3 * fps);
+          const syntheticVideoSegment = {
+            id: `${segment.id}-item`,
+            type: "video",
+            source: currentItem.url,
+            order: segment.order,
+            offset: { type: "absolute", value: 0 },
+            xOffset: sequenceSegment.xOffset,
+            yOffset: sequenceSegment.yOffset,
+            width: sequenceSegment.width,
+            height: sequenceSegment.height,
+            fit: sequenceSegment.fit,
+            rotation: sequenceSegment.rotation,
+            opacity: sequenceSegment.opacity,
+            zIndex: sequenceSegment.zIndex,
+            fadeIn: sequenceSegment.fadeIn
+          };
+          return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            VideoElement,
+            {
+              segment: syntheticVideoSegment,
+              src: currentItem.url,
+              startFrame: itemStartFrame,
+              durationInFrames: itemDurationFrames,
+              scale: 1
+            },
+            `${segment.id}-${currentItem.url}`
+          );
+        }
+      }
       return null;
     }),
     audioTimings.map(({ segment, startFrame, durationInFrames: durationInFrames2 }) => {
@@ -2810,6 +2902,7 @@ function DebugOverlay({
   );
   const handleMouseDown = (0, import_react7.useCallback)((e) => {
     if (e.target.tagName === "BUTTON") return;
+    e.preventDefault();
     setIsDragging(true);
     setLastDragPos({ x: e.clientX, y: e.clientY });
   }, []);

package/dist/index.mjs

@@ -1030,7 +1030,17 @@ function calculateSegmentTimings(config, fps) {
       const offsetFrames = Math.round(offsetMs / 1e3 * fps);
       const startFrame = currentFrame + offsetFrames;
       let durationMs;
-      if (segment.duration) {
+      if (segment.type === "sequence") {
+        const sequenceSegment = segment;
+        const items = sequenceSegment.items ?? [];
+        if (items.length > 0) {
+          durationMs = items.reduce((total, item) => {
+            return total + (item.duration ?? sequenceSegment.defaultDuration);
+          }, 0);
+        } else {
+          durationMs = sequenceSegment.defaultDuration;
+        }
+      } else if (segment.duration) {
         durationMs = segment.duration.type === "absolute" ? segment.duration.value : 5e3;
       } else {
         durationMs = 5e3;
@@ -1167,6 +1177,88 @@ function VideoEditorComposition({
           segment.id
         );
       }
+      if (segment.type === "sequence") {
+        const sequenceSegment = segment;
+        const items = sequenceSegment.items ?? [];
+        if (items.length === 0) {
+          return null;
+        }
+        const frameIntoSegment = frame - startFrame;
+        let accumulatedFrames = 0;
+        let currentItem = null;
+        let itemStartFrame = startFrame;
+        for (const item of items) {
+          const itemDurationMs = item.duration ?? sequenceSegment.defaultDuration;
+          const itemDurationFrames = Math.round(itemDurationMs / 1e3 * fps);
+          if (frameIntoSegment < accumulatedFrames + itemDurationFrames) {
+            currentItem = item;
+            itemStartFrame = startFrame + accumulatedFrames;
+            break;
+          }
+          accumulatedFrames += itemDurationFrames;
+        }
+        if (!currentItem) {
+          return null;
+        }
+        if (currentItem.type === "image") {
+          const syntheticImageSegment = {
+            id: `${segment.id}-item`,
+            type: "image",
+            source: currentItem.url,
+            order: segment.order,
+            offset: { type: "absolute", value: 0 },
+            xOffset: sequenceSegment.xOffset,
+            yOffset: sequenceSegment.yOffset,
+            width: sequenceSegment.width,
+            height: sequenceSegment.height,
+            fit: sequenceSegment.fit,
+            rotation: sequenceSegment.rotation,
+            opacity: sequenceSegment.opacity,
+            zIndex: sequenceSegment.zIndex,
+            fadeIn: sequenceSegment.fadeIn
+          };
+          return /* @__PURE__ */ jsx5(
+            ImageElement,
+            {
+              segment: syntheticImageSegment,
+              src: currentItem.url,
+              startFrame: itemStartFrame,
+              scale: 1
+            },
+            `${segment.id}-${currentItem.url}`
+          );
+        } else {
+          const itemDurationMs = currentItem.duration ?? sequenceSegment.defaultDuration;
+          const itemDurationFrames = Math.round(itemDurationMs / 1e3 * fps);
+          const syntheticVideoSegment = {
+            id: `${segment.id}-item`,
+            type: "video",
+            source: currentItem.url,
+            order: segment.order,
+            offset: { type: "absolute", value: 0 },
+            xOffset: sequenceSegment.xOffset,
+            yOffset: sequenceSegment.yOffset,
+            width: sequenceSegment.width,
+            height: sequenceSegment.height,
+            fit: sequenceSegment.fit,
+            rotation: sequenceSegment.rotation,
+            opacity: sequenceSegment.opacity,
+            zIndex: sequenceSegment.zIndex,
+            fadeIn: sequenceSegment.fadeIn
+          };
+          return /* @__PURE__ */ jsx5(
+            VideoElement,
+            {
+              segment: syntheticVideoSegment,
+              src: currentItem.url,
+              startFrame: itemStartFrame,
+              durationInFrames: itemDurationFrames,
+              scale: 1
+            },
+            `${segment.id}-${currentItem.url}`
+          );
+        }
+      }
       return null;
     }),
     audioTimings.map(({ segment, startFrame, durationInFrames: durationInFrames2 }) => {
@@ -1918,6 +2010,7 @@ function DebugOverlay({
   );
   const handleMouseDown = useCallback((e) => {
     if (e.target.tagName === "BUTTON") return;
+    e.preventDefault();
     setIsDragging(true);
     setLastDragPos({ x: e.clientX, y: e.clientY });
   }, []);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugcinc-render",
-  "version": "1.8.66",
+  "version": "1.8.68",
   "description": "Unified rendering package for UGC Inc - shared types, components, and compositions for pixel-perfect client/server rendering",
   "main": "dist/index.js",
   "module": "dist/index.mjs",