ugcinc-render 1.8.65 → 1.8.67

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;
@@ -1976,7 +1986,7 @@ function VideoEditorComposition({
   );
   const activeVisualSegments = (0, import_react5.useMemo)(() => {
     return segmentTimings.filter(({ segment, startFrame, endFrame }) => {
-      if (segment.type !== "video" && segment.type !== "image" && segment.type !== "text") {
+      if (segment.type !== "video" && segment.type !== "image" && segment.type !== "text" && segment.type !== "sequence") {
         return false;
       }
       return frame >= startFrame && frame < endFrame;
@@ -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 }) => {
@@ -2777,6 +2869,8 @@ function DebugOverlay({
   const [mousePos, setMousePos] = (0, import_react7.useState)(null);
   const [viewportPos, setViewportPos] = (0, import_react7.useState)(null);
   const [screenPosPercent, setScreenPosPercent] = (0, import_react7.useState)(null);
+  const [isDragging, setIsDragging] = (0, import_react7.useState)(false);
+  const [lastDragPos, setLastDragPos] = (0, import_react7.useState)(null);
   const zoomScale = zoom / 100;
   const handleMouseMove = (0, import_react7.useCallback)(
     (e) => {
@@ -2795,13 +2889,32 @@ function DebugOverlay({
       const canvasX = Math.round((vpX + scrollX) / zoomScale);
       const canvasY = Math.round((vpY + scrollY) / zoomScale);
       setMousePos({ x: canvasX, y: canvasY });
+      if (isDragging && lastDragPos) {
+        const deltaX = (e.clientX - lastDragPos.x) * remotionScaleX;
+        const deltaY = (e.clientY - lastDragPos.y) * remotionScaleY;
+        const newScrollX = Math.max(0, scrollX - deltaX);
+        const newScrollY = Math.max(0, scrollY - deltaY);
+        onZoomChange(zoom, newScrollX, newScrollY);
+        setLastDragPos({ x: e.clientX, y: e.clientY });
+      }
     },
-    [width, height, zoomScale, scrollX, scrollY]
+    [width, height, zoomScale, scrollX, scrollY, isDragging, lastDragPos, zoom, onZoomChange]
   );
+  const handleMouseDown = (0, import_react7.useCallback)((e) => {
+    if (e.target.tagName === "BUTTON") return;
+    setIsDragging(true);
+    setLastDragPos({ x: e.clientX, y: e.clientY });
+  }, []);
+  const handleMouseUp = (0, import_react7.useCallback)(() => {
+    setIsDragging(false);
+    setLastDragPos(null);
+  }, []);
   const handleMouseLeave = (0, import_react7.useCallback)(() => {
     setMousePos(null);
     setViewportPos(null);
     setScreenPosPercent(null);
+    setIsDragging(false);
+    setLastDragPos(null);
   }, []);
   const handleWheel = (0, import_react7.useCallback)(
     (e) => {
@@ -2833,6 +2946,8 @@ function DebugOverlay({
         zIndex: 200
       },
       onMouseMove: handleMouseMove,
+      onMouseDown: handleMouseDown,
+      onMouseUp: handleMouseUp,
       onMouseLeave: handleMouseLeave,
       onWheel: handleWheel,
       children: [

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;
@@ -1084,7 +1094,7 @@ function VideoEditorComposition({
   );
   const activeVisualSegments = useMemo5(() => {
     return segmentTimings.filter(({ segment, startFrame, endFrame }) => {
-      if (segment.type !== "video" && segment.type !== "image" && segment.type !== "text") {
+      if (segment.type !== "video" && segment.type !== "image" && segment.type !== "text" && segment.type !== "sequence") {
         return false;
       }
       return frame >= startFrame && frame < endFrame;
@@ -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 }) => {
@@ -1885,6 +1977,8 @@ function DebugOverlay({
   const [mousePos, setMousePos] = useState2(null);
   const [viewportPos, setViewportPos] = useState2(null);
   const [screenPosPercent, setScreenPosPercent] = useState2(null);
+  const [isDragging, setIsDragging] = useState2(false);
+  const [lastDragPos, setLastDragPos] = useState2(null);
   const zoomScale = zoom / 100;
   const handleMouseMove = useCallback(
     (e) => {
@@ -1903,13 +1997,32 @@ function DebugOverlay({
       const canvasX = Math.round((vpX + scrollX) / zoomScale);
       const canvasY = Math.round((vpY + scrollY) / zoomScale);
       setMousePos({ x: canvasX, y: canvasY });
+      if (isDragging && lastDragPos) {
+        const deltaX = (e.clientX - lastDragPos.x) * remotionScaleX;
+        const deltaY = (e.clientY - lastDragPos.y) * remotionScaleY;
+        const newScrollX = Math.max(0, scrollX - deltaX);
+        const newScrollY = Math.max(0, scrollY - deltaY);
+        onZoomChange(zoom, newScrollX, newScrollY);
+        setLastDragPos({ x: e.clientX, y: e.clientY });
+      }
     },
-    [width, height, zoomScale, scrollX, scrollY]
+    [width, height, zoomScale, scrollX, scrollY, isDragging, lastDragPos, zoom, onZoomChange]
   );
+  const handleMouseDown = useCallback((e) => {
+    if (e.target.tagName === "BUTTON") return;
+    setIsDragging(true);
+    setLastDragPos({ x: e.clientX, y: e.clientY });
+  }, []);
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+    setLastDragPos(null);
+  }, []);
   const handleMouseLeave = useCallback(() => {
     setMousePos(null);
     setViewportPos(null);
     setScreenPosPercent(null);
+    setIsDragging(false);
+    setLastDragPos(null);
   }, []);
   const handleWheel = useCallback(
     (e) => {
@@ -1941,6 +2054,8 @@ function DebugOverlay({
         zIndex: 200
       },
       onMouseMove: handleMouseMove,
+      onMouseDown: handleMouseDown,
+      onMouseUp: handleMouseUp,
       onMouseLeave: handleMouseLeave,
       onWheel: handleWheel,
       children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugcinc-render",
-  "version": "1.8.65",
+  "version": "1.8.67",
   "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",