ugcinc-render 1.8.207 → 1.8.209

package/dist/index.d.mts

@@ -84,6 +84,10 @@ interface VideoSegment extends PictureSegment {
     type: 'video';
     /** Audio volume percentage 0-100 (0 = muted, 100 = full) (default: 100) */
     volume?: number;
+    /** Loop video when it's shorter than the segment duration (default: false) */
+    loop?: boolean;
+    /** Natural duration of the source video in milliseconds (required for loop to work) */
+    sourceDurationMs?: number;
 }
 /**
  * Image segment - static images or animated GIFs

package/dist/index.d.ts

@@ -84,6 +84,10 @@ interface VideoSegment extends PictureSegment {
     type: 'video';
     /** Audio volume percentage 0-100 (0 = muted, 100 = full) (default: 100) */
     volume?: number;
+    /** Loop video when it's shorter than the segment duration (default: false) */
+    loop?: boolean;
+    /** Natural duration of the source video in milliseconds (required for loop to work) */
+    sourceDurationMs?: number;
 }
 /**
  * Image segment - static images or animated GIFs

package/dist/index.js

@@ -1918,6 +1918,8 @@ function VideoElement({
   const rotation = segment.rotation ?? 0;
   const borderRadius = segment.borderRadius;
   const fadeIn = segment.fadeIn ?? 0;
+  const loop = segment.loop ?? VIDEO_DEFAULTS.loop;
+  const loopSourceDurationMs = segment.sourceDurationMs ?? (segment.duration?.type === "absolute" ? segment.duration.value : void 0);
   const x = segment.xOffset * scale;
   const y = segment.yOffset * scale;
   const width = segment.width * scale;
@@ -1958,16 +1960,22 @@ function VideoElement({
     height: "100%",
     objectFit: fitModeToCss2(fit)
   }), [fit]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  const loopDurationInFrames = (0, import_react4.useMemo)(() => {
+    if (!loop || !loopSourceDurationMs) return void 0;
+    const effectiveDurationMs = loopSourceDurationMs / speed;
+    return Math.max(1, Math.round(effectiveDurationMs / 1e3 * fps));
+  }, [loop, loopSourceDurationMs, speed, fps]);
+  const videoElement = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     import_remotion3.OffthreadVideo,
     {
       src,
       style: videoStyle,
-      trimBefore: startFromFrames,
+      startFrom: startFromFrames,
       playbackRate: speed,
       volume
     }
-  ) });
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: containerStyle, children: loop && loopDurationInFrames ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_remotion3.Loop, { durationInFrames: loopDurationInFrames, children: videoElement }) : videoElement });
 }
 
 // src/compositions/VideoEditorComposition.tsx

package/dist/index.mjs

@@ -943,7 +943,7 @@ import { AbsoluteFill as AbsoluteFill2, useCurrentFrame as useCurrentFrame3, use
 
 // src/components/VideoElement.tsx
 import { useMemo as useMemo4 } from "react";
-import { OffthreadVideo, useCurrentFrame as useCurrentFrame2, useVideoConfig as useVideoConfig2 } from "remotion";
+import { OffthreadVideo, useCurrentFrame as useCurrentFrame2, useVideoConfig as useVideoConfig2, Loop } from "remotion";
 import { jsx as jsx4 } from "react/jsx-runtime";
 function fitModeToCss2(fit) {
   return fit;
@@ -964,6 +964,8 @@ function VideoElement({
   const rotation = segment.rotation ?? 0;
   const borderRadius = segment.borderRadius;
   const fadeIn = segment.fadeIn ?? 0;
+  const loop = segment.loop ?? VIDEO_DEFAULTS.loop;
+  const loopSourceDurationMs = segment.sourceDurationMs ?? (segment.duration?.type === "absolute" ? segment.duration.value : void 0);
   const x = segment.xOffset * scale;
   const y = segment.yOffset * scale;
   const width = segment.width * scale;
@@ -1004,16 +1006,22 @@ function VideoElement({
     height: "100%",
     objectFit: fitModeToCss2(fit)
   }), [fit]);
-  return /* @__PURE__ */ jsx4("div", { style: containerStyle, children: /* @__PURE__ */ jsx4(
+  const loopDurationInFrames = useMemo4(() => {
+    if (!loop || !loopSourceDurationMs) return void 0;
+    const effectiveDurationMs = loopSourceDurationMs / speed;
+    return Math.max(1, Math.round(effectiveDurationMs / 1e3 * fps));
+  }, [loop, loopSourceDurationMs, speed, fps]);
+  const videoElement = /* @__PURE__ */ jsx4(
     OffthreadVideo,
     {
       src,
       style: videoStyle,
-      trimBefore: startFromFrames,
+      startFrom: startFromFrames,
       playbackRate: speed,
       volume
     }
-  ) });
+  );
+  return /* @__PURE__ */ jsx4("div", { style: containerStyle, children: loop && loopDurationInFrames ? /* @__PURE__ */ jsx4(Loop, { durationInFrames: loopDurationInFrames, children: videoElement }) : videoElement });
 }
 
 // src/compositions/VideoEditorComposition.tsx

package/package.json

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