ugcinc-render 1.5.21 → 1.5.23

package/dist/index.d.mts

@@ -916,6 +916,8 @@ interface ImageElementProps {
     segment: ImageSegment;
     /** The source URL of the image */
     src: string;
+    /** Start frame of this segment in the composition (needed for fade-in) */
+    startFrame?: number;
     /** Optional scale for high-DPI rendering */
     scale?: number;
 }
@@ -925,8 +927,9 @@ interface ImageElementProps {
  * - Opacity
  * - Rotation
  * - Border radius (uniform or per-corner)
+ * - Fade-in effect
  */
-declare function ImageElement({ segment, src, scale }: ImageElementProps): react_jsx_runtime.JSX.Element;
+declare function ImageElement({ segment, src, startFrame, scale }: ImageElementProps): react_jsx_runtime.JSX.Element;
 
 interface VideoElementProps {
     segment: VideoSegment;
@@ -1169,12 +1172,16 @@ declare function hexToRgba(hex: string, opacity?: number): string;
  */
 
 /**
- * Calculate the actual width of a text element when autoWidth is enabled
- * Returns { actualWidth, actualX } where actualX is adjusted based on boxAlign
+ * Calculate the actual dimensions of a text element when autoWidth is enabled
+ * Returns { actualWidth, actualX, actualHeight } where:
+ * - actualX is adjusted based on boxAlign
+ * - actualHeight is calculated based on the number of wrapped lines
  */
 declare function calculateAutoWidthDimensions(elem: ImageEditorElement, textContent: string, ctx?: CanvasRenderingContext2D | null): {
     actualWidth: number;
     actualX: number;
+    actualHeight: number;
+    lineCount: number;
 } | null;
 interface PositionResolutionError {
     elementId: string;

package/dist/index.d.ts

@@ -916,6 +916,8 @@ interface ImageElementProps {
     segment: ImageSegment;
     /** The source URL of the image */
     src: string;
+    /** Start frame of this segment in the composition (needed for fade-in) */
+    startFrame?: number;
     /** Optional scale for high-DPI rendering */
     scale?: number;
 }
@@ -925,8 +927,9 @@ interface ImageElementProps {
  * - Opacity
  * - Rotation
  * - Border radius (uniform or per-corner)
+ * - Fade-in effect
  */
-declare function ImageElement({ segment, src, scale }: ImageElementProps): react_jsx_runtime.JSX.Element;
+declare function ImageElement({ segment, src, startFrame, scale }: ImageElementProps): react_jsx_runtime.JSX.Element;
 
 interface VideoElementProps {
     segment: VideoSegment;
@@ -1169,12 +1172,16 @@ declare function hexToRgba(hex: string, opacity?: number): string;
  */
 
 /**
- * Calculate the actual width of a text element when autoWidth is enabled
- * Returns { actualWidth, actualX } where actualX is adjusted based on boxAlign
+ * Calculate the actual dimensions of a text element when autoWidth is enabled
+ * Returns { actualWidth, actualX, actualHeight } where:
+ * - actualX is adjusted based on boxAlign
+ * - actualHeight is calculated based on the number of wrapped lines
  */
 declare function calculateAutoWidthDimensions(elem: ImageEditorElement, textContent: string, ctx?: CanvasRenderingContext2D | null): {
     actualWidth: number;
     actualX: number;
+    actualHeight: number;
+    lineCount: number;
 } | null;
 interface PositionResolutionError {
     elementId: string;

package/dist/index.js

@@ -717,15 +717,26 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 function fitModeToCss(fit) {
   return fit;
 }
-function ImageElement({ segment, src, scale = 1 }) {
+function ImageElement({ segment, src, startFrame = 0, scale = 1 }) {
+  const frame = (0, import_remotion.useCurrentFrame)();
+  const { fps } = (0, import_remotion.useVideoConfig)();
   const fit = segment.fit ?? IMAGE_DEFAULTS.fit;
   const opacity = (segment.opacity ?? VISUAL_DEFAULTS.opacity) / 100;
   const rotation = segment.rotation ?? 0;
   const borderRadius = segment.borderRadius;
+  const fadeIn = segment.fadeIn ?? 0;
   const x = segment.xOffset * scale;
   const y = segment.yOffset * scale;
   const width = segment.width * scale;
   const height = segment.height * scale;
+  const fadeOpacity = (0, import_react2.useMemo)(() => {
+    if (fadeIn <= 0) return 1;
+    const framesFromStart = frame - startFrame;
+    const fadeInFrames = fadeIn / 1e3 * fps;
+    if (framesFromStart >= fadeInFrames) return 1;
+    if (framesFromStart <= 0) return 0;
+    return framesFromStart / fadeInFrames;
+  }, [frame, startFrame, fadeIn, fps]);
   const borderRadiusStyle = (0, import_react2.useMemo)(() => {
     if (!borderRadius) return void 0;
     if (typeof borderRadius === "number") {
@@ -744,14 +755,14 @@ function ImageElement({ segment, src, scale = 1 }) {
     transform: rotation !== 0 ? `rotate(${rotation}deg)` : void 0,
     transformOrigin: "center center",
     overflow: "hidden",
-    borderRadius: borderRadiusStyle
-  }), [x, y, width, height, rotation, borderRadiusStyle]);
+    borderRadius: borderRadiusStyle,
+    opacity: opacity * fadeOpacity
+  }), [x, y, width, height, rotation, borderRadiusStyle, opacity, fadeOpacity]);
   const imageStyle = (0, import_react2.useMemo)(() => ({
     width: "100%",
     height: "100%",
-    objectFit: fitModeToCss(fit),
-    opacity
-  }), [fit, opacity]);
+    objectFit: fitModeToCss(fit)
+  }), [fit]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     import_remotion.Img,
     {
@@ -768,7 +779,7 @@ var FONT_FAMILIES2 = {
   arial: "Arial, sans-serif"
 };
 function calculateAutoWidthDimensions(elem, textContent, ctx) {
-  if (elem.type !== "text" || !elem.autoWidth) {
+  if (elem.type !== "text") {
     return null;
   }
   let measureCtx = ctx;
@@ -785,9 +796,13 @@ function calculateAutoWidthDimensions(elem, textContent, ctx) {
   const fontType = elem.font ?? "tiktok";
   const paddingLeft = elem.paddingLeft ?? 0;
   const paddingRight = elem.paddingRight ?? 0;
+  const paddingTop = elem.paddingTop ?? 0;
+  const paddingBottom = elem.paddingBottom ?? 0;
   const letterSpacing = elem.letterSpacing ?? 0;
+  const lineHeight = elem.lineHeight ?? 1.2;
   const maxWidth = elem.width;
   const boxAlign = elem.boxAlign ?? "left";
+  const autoWidth = elem.autoWidth ?? false;
   const fontFamily = FONT_FAMILIES2[fontType] ?? FONT_FAMILIES2.tiktok;
   measureCtx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
   const availableWidth = maxWidth - paddingLeft - paddingRight;
@@ -808,6 +823,7 @@ function calculateAutoWidthDimensions(elem, textContent, ctx) {
     }
   }
   if (currentLine) lines.push(currentLine);
+  if (lines.length === 0) lines.push("");
   let widestLineWidth = 0;
   for (const line of lines) {
     const chars = [...line];
@@ -818,21 +834,27 @@ function calculateAutoWidthDimensions(elem, textContent, ctx) {
     if (chars.length > 0) lineWidth -= letterSpacing;
     widestLineWidth = Math.max(widestLineWidth, lineWidth);
   }
-  const actualWidth = Math.min(widestLineWidth + paddingLeft + paddingRight, maxWidth);
+  const actualWidth = autoWidth ? Math.min(widestLineWidth + paddingLeft + paddingRight, maxWidth) : maxWidth;
+  const textHeight = lines.length * fontSize * lineHeight;
+  const actualHeight = textHeight + paddingTop + paddingBottom;
   let actualX;
-  switch (boxAlign) {
-    case "right":
-      actualX = elem.x + maxWidth - actualWidth;
-      break;
-    case "center":
-      actualX = elem.x + (maxWidth - actualWidth) / 2;
-      break;
-    case "left":
-    default:
-      actualX = elem.x;
-      break;
+  if (autoWidth) {
+    switch (boxAlign) {
+      case "right":
+        actualX = elem.x + maxWidth - actualWidth;
+        break;
+      case "center":
+        actualX = elem.x + (maxWidth - actualWidth) / 2;
+        break;
+      case "left":
+      default:
+        actualX = elem.x;
+        break;
+    }
+  } else {
+    actualX = elem.x;
   }
-  return { actualWidth, actualX };
+  return { actualWidth, actualX, actualHeight, lineCount: lines.length };
 }
 function detectCircularDependency(elements, startId, axis, visited = /* @__PURE__ */ new Set(), path = []) {
   if (visited.has(startId)) {
@@ -985,18 +1007,24 @@ function resolveElementPositions(elements, textValues) {
   for (const elem of elements) {
     resolvedX.set(elem.id, { x: elem.x, width: elem.width });
     resolvedY.set(elem.id, { y: elem.y, height: elem.height });
-    if (elem.type === "text" && elem.autoWidth) {
+    if (elem.type === "text") {
       const textContent = getTextContent(elem);
-      const autoWidthResult = calculateAutoWidthDimensions(elem, textContent, measureCtx);
-      if (autoWidthResult) {
-        referenceX.set(elem.id, { x: autoWidthResult.actualX, width: autoWidthResult.actualWidth });
+      const autoResult = calculateAutoWidthDimensions(elem, textContent, measureCtx);
+      if (autoResult) {
+        if (elem.autoWidth) {
+          referenceX.set(elem.id, { x: autoResult.actualX, width: autoResult.actualWidth });
+        } else {
+          referenceX.set(elem.id, { x: elem.x, width: elem.width });
+        }
+        referenceY.set(elem.id, { y: elem.y, height: autoResult.actualHeight });
       } else {
         referenceX.set(elem.id, { x: elem.x, width: elem.width });
+        referenceY.set(elem.id, { y: elem.y, height: elem.height });
       }
     } else {
       referenceX.set(elem.id, { x: elem.x, width: elem.width });
+      referenceY.set(elem.id, { y: elem.y, height: elem.height });
     }
-    referenceY.set(elem.id, { y: elem.y, height: elem.height });
   }
   for (const elem of sortedX) {
     if (elem.relativePositionX) {
@@ -1013,11 +1041,16 @@ function resolveElementPositions(elements, textValues) {
           elem.relativePositionX.offset
         );
         resolvedX.set(elem.id, { x: newX, width: elem.width });
-        if (elem.type === "text" && elem.autoWidth) {
+        if (elem.type === "text") {
           const textContent = getTextContent(elem);
-          const autoWidthResult = calculateAutoWidthDimensions({ ...elem, x: newX }, textContent, measureCtx);
-          if (autoWidthResult) {
-            referenceX.set(elem.id, { x: autoWidthResult.actualX, width: autoWidthResult.actualWidth });
+          const autoResult = calculateAutoWidthDimensions({ ...elem, x: newX }, textContent, measureCtx);
+          if (autoResult) {
+            if (elem.autoWidth) {
+              referenceX.set(elem.id, { x: autoResult.actualX, width: autoResult.actualWidth });
+            } else {
+              referenceX.set(elem.id, { x: newX, width: elem.width });
+            }
+            referenceY.set(elem.id, { y: referenceY.get(elem.id)?.y ?? elem.y, height: autoResult.actualHeight });
           } else {
             referenceX.set(elem.id, { x: newX, width: elem.width });
           }
@@ -1042,7 +1075,17 @@ function resolveElementPositions(elements, textValues) {
           elem.relativePositionY.offset
         );
         resolvedY.set(elem.id, { y: newY, height: elem.height });
-        referenceY.set(elem.id, { y: newY, height: elem.height });
+        if (elem.type === "text") {
+          const textContent = getTextContent(elem);
+          const autoResult = calculateAutoWidthDimensions({ ...elem, y: newY }, textContent, measureCtx);
+          if (autoResult) {
+            referenceY.set(elem.id, { y: newY, height: autoResult.actualHeight });
+          } else {
+            referenceY.set(elem.id, { y: newY, height: elem.height });
+          }
+        } else {
+          referenceY.set(elem.id, { y: newY, height: elem.height });
+        }
       }
     }
   }
@@ -1734,6 +1777,7 @@ function VideoEditorComposition({
           {
             segment,
             src,
+            startFrame,
             scale: 1
           },
           segment.id

package/dist/index.mjs

@@ -626,20 +626,31 @@ function TextElement({ segment, scale = 1 }) {
 
 // src/components/ImageElement.tsx
 import { useMemo as useMemo2 } from "react";
-import { Img } from "remotion";
+import { Img, useCurrentFrame, useVideoConfig } from "remotion";
 import { jsx as jsx2 } from "react/jsx-runtime";
 function fitModeToCss(fit) {
   return fit;
 }
-function ImageElement({ segment, src, scale = 1 }) {
+function ImageElement({ segment, src, startFrame = 0, scale = 1 }) {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
   const fit = segment.fit ?? IMAGE_DEFAULTS.fit;
   const opacity = (segment.opacity ?? VISUAL_DEFAULTS.opacity) / 100;
   const rotation = segment.rotation ?? 0;
   const borderRadius = segment.borderRadius;
+  const fadeIn = segment.fadeIn ?? 0;
   const x = segment.xOffset * scale;
   const y = segment.yOffset * scale;
   const width = segment.width * scale;
   const height = segment.height * scale;
+  const fadeOpacity = useMemo2(() => {
+    if (fadeIn <= 0) return 1;
+    const framesFromStart = frame - startFrame;
+    const fadeInFrames = fadeIn / 1e3 * fps;
+    if (framesFromStart >= fadeInFrames) return 1;
+    if (framesFromStart <= 0) return 0;
+    return framesFromStart / fadeInFrames;
+  }, [frame, startFrame, fadeIn, fps]);
   const borderRadiusStyle = useMemo2(() => {
     if (!borderRadius) return void 0;
     if (typeof borderRadius === "number") {
@@ -658,14 +669,14 @@ function ImageElement({ segment, src, scale = 1 }) {
     transform: rotation !== 0 ? `rotate(${rotation}deg)` : void 0,
     transformOrigin: "center center",
     overflow: "hidden",
-    borderRadius: borderRadiusStyle
-  }), [x, y, width, height, rotation, borderRadiusStyle]);
+    borderRadius: borderRadiusStyle,
+    opacity: opacity * fadeOpacity
+  }), [x, y, width, height, rotation, borderRadiusStyle, opacity, fadeOpacity]);
   const imageStyle = useMemo2(() => ({
     width: "100%",
     height: "100%",
-    objectFit: fitModeToCss(fit),
-    opacity
-  }), [fit, opacity]);
+    objectFit: fitModeToCss(fit)
+  }), [fit]);
   return /* @__PURE__ */ jsx2("div", { style: containerStyle, children: /* @__PURE__ */ jsx2(
     Img,
     {
@@ -682,7 +693,7 @@ var FONT_FAMILIES2 = {
   arial: "Arial, sans-serif"
 };
 function calculateAutoWidthDimensions(elem, textContent, ctx) {
-  if (elem.type !== "text" || !elem.autoWidth) {
+  if (elem.type !== "text") {
     return null;
   }
   let measureCtx = ctx;
@@ -699,9 +710,13 @@ function calculateAutoWidthDimensions(elem, textContent, ctx) {
   const fontType = elem.font ?? "tiktok";
   const paddingLeft = elem.paddingLeft ?? 0;
   const paddingRight = elem.paddingRight ?? 0;
+  const paddingTop = elem.paddingTop ?? 0;
+  const paddingBottom = elem.paddingBottom ?? 0;
   const letterSpacing = elem.letterSpacing ?? 0;
+  const lineHeight = elem.lineHeight ?? 1.2;
   const maxWidth = elem.width;
   const boxAlign = elem.boxAlign ?? "left";
+  const autoWidth = elem.autoWidth ?? false;
   const fontFamily = FONT_FAMILIES2[fontType] ?? FONT_FAMILIES2.tiktok;
   measureCtx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
   const availableWidth = maxWidth - paddingLeft - paddingRight;
@@ -722,6 +737,7 @@ function calculateAutoWidthDimensions(elem, textContent, ctx) {
     }
   }
   if (currentLine) lines.push(currentLine);
+  if (lines.length === 0) lines.push("");
   let widestLineWidth = 0;
   for (const line of lines) {
     const chars = [...line];
@@ -732,21 +748,27 @@ function calculateAutoWidthDimensions(elem, textContent, ctx) {
     if (chars.length > 0) lineWidth -= letterSpacing;
     widestLineWidth = Math.max(widestLineWidth, lineWidth);
   }
-  const actualWidth = Math.min(widestLineWidth + paddingLeft + paddingRight, maxWidth);
+  const actualWidth = autoWidth ? Math.min(widestLineWidth + paddingLeft + paddingRight, maxWidth) : maxWidth;
+  const textHeight = lines.length * fontSize * lineHeight;
+  const actualHeight = textHeight + paddingTop + paddingBottom;
   let actualX;
-  switch (boxAlign) {
-    case "right":
-      actualX = elem.x + maxWidth - actualWidth;
-      break;
-    case "center":
-      actualX = elem.x + (maxWidth - actualWidth) / 2;
-      break;
-    case "left":
-    default:
-      actualX = elem.x;
-      break;
+  if (autoWidth) {
+    switch (boxAlign) {
+      case "right":
+        actualX = elem.x + maxWidth - actualWidth;
+        break;
+      case "center":
+        actualX = elem.x + (maxWidth - actualWidth) / 2;
+        break;
+      case "left":
+      default:
+        actualX = elem.x;
+        break;
+    }
+  } else {
+    actualX = elem.x;
   }
-  return { actualWidth, actualX };
+  return { actualWidth, actualX, actualHeight, lineCount: lines.length };
 }
 function detectCircularDependency(elements, startId, axis, visited = /* @__PURE__ */ new Set(), path = []) {
   if (visited.has(startId)) {
@@ -899,18 +921,24 @@ function resolveElementPositions(elements, textValues) {
   for (const elem of elements) {
     resolvedX.set(elem.id, { x: elem.x, width: elem.width });
     resolvedY.set(elem.id, { y: elem.y, height: elem.height });
-    if (elem.type === "text" && elem.autoWidth) {
+    if (elem.type === "text") {
       const textContent = getTextContent(elem);
-      const autoWidthResult = calculateAutoWidthDimensions(elem, textContent, measureCtx);
-      if (autoWidthResult) {
-        referenceX.set(elem.id, { x: autoWidthResult.actualX, width: autoWidthResult.actualWidth });
+      const autoResult = calculateAutoWidthDimensions(elem, textContent, measureCtx);
+      if (autoResult) {
+        if (elem.autoWidth) {
+          referenceX.set(elem.id, { x: autoResult.actualX, width: autoResult.actualWidth });
+        } else {
+          referenceX.set(elem.id, { x: elem.x, width: elem.width });
+        }
+        referenceY.set(elem.id, { y: elem.y, height: autoResult.actualHeight });
       } else {
         referenceX.set(elem.id, { x: elem.x, width: elem.width });
+        referenceY.set(elem.id, { y: elem.y, height: elem.height });
       }
     } else {
       referenceX.set(elem.id, { x: elem.x, width: elem.width });
+      referenceY.set(elem.id, { y: elem.y, height: elem.height });
     }
-    referenceY.set(elem.id, { y: elem.y, height: elem.height });
   }
   for (const elem of sortedX) {
     if (elem.relativePositionX) {
@@ -927,11 +955,16 @@ function resolveElementPositions(elements, textValues) {
           elem.relativePositionX.offset
         );
         resolvedX.set(elem.id, { x: newX, width: elem.width });
-        if (elem.type === "text" && elem.autoWidth) {
+        if (elem.type === "text") {
           const textContent = getTextContent(elem);
-          const autoWidthResult = calculateAutoWidthDimensions({ ...elem, x: newX }, textContent, measureCtx);
-          if (autoWidthResult) {
-            referenceX.set(elem.id, { x: autoWidthResult.actualX, width: autoWidthResult.actualWidth });
+          const autoResult = calculateAutoWidthDimensions({ ...elem, x: newX }, textContent, measureCtx);
+          if (autoResult) {
+            if (elem.autoWidth) {
+              referenceX.set(elem.id, { x: autoResult.actualX, width: autoResult.actualWidth });
+            } else {
+              referenceX.set(elem.id, { x: newX, width: elem.width });
+            }
+            referenceY.set(elem.id, { y: referenceY.get(elem.id)?.y ?? elem.y, height: autoResult.actualHeight });
           } else {
             referenceX.set(elem.id, { x: newX, width: elem.width });
           }
@@ -956,7 +989,17 @@ function resolveElementPositions(elements, textValues) {
           elem.relativePositionY.offset
         );
         resolvedY.set(elem.id, { y: newY, height: elem.height });
-        referenceY.set(elem.id, { y: newY, height: elem.height });
+        if (elem.type === "text") {
+          const textContent = getTextContent(elem);
+          const autoResult = calculateAutoWidthDimensions({ ...elem, y: newY }, textContent, measureCtx);
+          if (autoResult) {
+            referenceY.set(elem.id, { y: newY, height: autoResult.actualHeight });
+          } else {
+            referenceY.set(elem.id, { y: newY, height: elem.height });
+          }
+        } else {
+          referenceY.set(elem.id, { y: newY, height: elem.height });
+        }
       }
     }
   }
@@ -1442,11 +1485,11 @@ function BackgroundImage({
 
 // src/compositions/VideoEditorComposition.tsx
 import { useMemo as useMemo5 } from "react";
-import { AbsoluteFill as AbsoluteFill2, useCurrentFrame as useCurrentFrame2, useVideoConfig as useVideoConfig2, Sequence, Audio } from "remotion";
+import { AbsoluteFill as AbsoluteFill2, useCurrentFrame as useCurrentFrame3, useVideoConfig as useVideoConfig3, Sequence, Audio } from "remotion";
 
 // src/components/VideoElement.tsx
 import { useMemo as useMemo4 } from "react";
-import { Video, useCurrentFrame, useVideoConfig } from "remotion";
+import { Video, useCurrentFrame as useCurrentFrame2, useVideoConfig as useVideoConfig2 } from "remotion";
 import { jsx as jsx4 } from "react/jsx-runtime";
 function fitModeToCss2(fit) {
   return fit;
@@ -1458,8 +1501,8 @@ function VideoElement({
   durationInFrames,
   scale = 1
 }) {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
+  const frame = useCurrentFrame2();
+  const { fps } = useVideoConfig2();
   const fit = segment.fit ?? VIDEO_DEFAULTS.fit;
   const speed = segment.speed ?? VIDEO_DEFAULTS.speed;
   const volume = (segment.volume ?? VIDEO_DEFAULTS.volume) / 100;
@@ -1579,8 +1622,8 @@ function VideoEditorComposition({
   sources = {},
   textContent = {}
 }) {
-  const frame = useCurrentFrame2();
-  const { fps, durationInFrames } = useVideoConfig2();
+  const frame = useCurrentFrame3();
+  const { fps, durationInFrames } = useVideoConfig3();
   const segmentTimings = useMemo5(
     () => calculateSegmentTimings(config, fps),
     [config, fps]
@@ -1648,6 +1691,7 @@ function VideoEditorComposition({
           {
             segment,
             src,
+            startFrame,
             scale: 1
           },
           segment.id

package/package.json

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