ugcinc-render 1.8.64 → 1.8.66

package/dist/index.d.mts

@@ -200,7 +200,7 @@ interface EditorConfig extends BaseEditorConfig {
  * Supports all segment types including video and audio
  */
 interface VideoEditorConfig extends BaseEditorConfig {
-    channels: Channel<VideoSegment | ImageSegment | TextSegment | AudioSegment>[];
+    channels: Channel<VideoSegment | ImageSegment | TextSegment | AudioSegment | SequenceSegment>[];
     /** Dynamic crop configuration (optional) */
     dynamicCrop?: DynamicCropConfig;
 }

package/dist/index.d.ts

@@ -200,7 +200,7 @@ interface EditorConfig extends BaseEditorConfig {
  * Supports all segment types including video and audio
  */
 interface VideoEditorConfig extends BaseEditorConfig {
-    channels: Channel<VideoSegment | ImageSegment | TextSegment | AudioSegment>[];
+    channels: Channel<VideoSegment | ImageSegment | TextSegment | AudioSegment | SequenceSegment>[];
     /** Dynamic crop configuration (optional) */
     dynamicCrop?: DynamicCropConfig;
 }

package/dist/index.js

@@ -1976,7 +1976,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;
@@ -2777,6 +2777,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 +2797,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 +2854,8 @@ function DebugOverlay({
         zIndex: 200
       },
       onMouseMove: handleMouseMove,
+      onMouseDown: handleMouseDown,
+      onMouseUp: handleMouseUp,
       onMouseLeave: handleMouseLeave,
       onWheel: handleWheel,
       children: [

package/dist/index.mjs

@@ -1084,7 +1084,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;
@@ -1885,6 +1885,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 +1905,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 +1962,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.64",
+  "version": "1.8.66",
   "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",