ugcinc-render 1.5.26 → 1.5.28

package/dist/index.d.mts

@@ -80,6 +80,74 @@ type Hyphenation = 'none' | 'auto';
  * Text overflow behavior
  */
 type TextOverflow = 'clip' | 'ellipsis';
+/**
+ * Shared text styling properties used by both render and UI text segments.
+ * This ensures feature parity between image editor and video editor text elements.
+ */
+interface TextStyleProperties {
+    /** Horizontal alignment (default: 'left') */
+    alignment?: TextAlignment;
+    /** Vertical alignment within bounds (default: 'top') */
+    verticalAlign?: VerticalAlignment;
+    /** Text direction (default: 'ltr') */
+    direction?: TextDirection;
+    /** Inner padding in pixels - uniform for all sides (default: 0) */
+    padding?: number;
+    /** Top padding in pixels */
+    paddingTop?: number;
+    /** Right padding in pixels */
+    paddingRight?: number;
+    /** Bottom padding in pixels */
+    paddingBottom?: number;
+    /** Left padding in pixels */
+    paddingLeft?: number;
+    /** Extra top padding added when text has 2+ lines */
+    multiLineExtraPaddingTop?: number;
+    /** Extra right padding added when text has 2+ lines */
+    multiLineExtraPaddingRight?: number;
+    /** Extra bottom padding added when text has 2+ lines */
+    multiLineExtraPaddingBottom?: number;
+    /** Extra left padding added when text has 2+ lines */
+    multiLineExtraPaddingLeft?: number;
+    /** Font family (default: 'arial') */
+    fontType?: FontType;
+    /** Font size in pixels (default: 40) */
+    fontSize?: number;
+    /** Font weight (default: 'normal') */
+    fontWeight?: FontWeight;
+    /** Line height multiplier (default: 1.2) */
+    lineHeight?: number;
+    /** Letter spacing in pixels (default: 0) */
+    letterSpacing?: number;
+    /** How text wraps to new lines (default: 'word') */
+    textWrap?: TextWrap;
+    /** How words break across lines (default: 'normal') */
+    wordBreak?: WordBreak;
+    /** Automatic hyphenation (default: 'none') */
+    hyphenation?: Hyphenation;
+    /** Maximum lines (0 = unlimited) (default: 0) */
+    maxLines?: number;
+    /** How overflow is handled (default: 'clip') */
+    textOverflow?: TextOverflow;
+    /** Ellipsis string for overflow (default: '...') */
+    ellipsis?: string;
+    /** Text color (default: '#000000') */
+    color?: string;
+    /** Background color in hex format #RRGGBB (default: transparent) */
+    backgroundColor?: string;
+    /** Background opacity 0-100 (default: 100) */
+    backgroundOpacity?: number;
+    /** Border radius for background box - individual corners (default: 0) */
+    backgroundBorderRadius?: BorderRadiusConfig;
+    /** Text outline color (default: none) */
+    strokeColor?: string;
+    /** Outline width in pixels (default: 0) */
+    strokeWidth?: number;
+    /** When true, box shrinks to fit content (width becomes max width) */
+    autoWidth?: boolean;
+    /** Which side the box anchors to when autoWidth is true (default: 'left') */
+    boxAlign?: 'left' | 'center' | 'right';
+}
 
 /**
  * Position and anchor types for relative element positioning
@@ -437,32 +505,16 @@ interface VideoEditorImageSegment extends VideoEditorVisualSegment {
 }
 /**
  * Text segment (UI)
+ *
+ * Extends TextStyleProperties which contains all shared text styling options.
+ * This ensures feature parity between image editor and video editor text elements.
  */
-interface VideoEditorTextSegment extends VideoEditorVisualSegment {
+interface VideoEditorTextSegment extends VideoEditorVisualSegment, TextStyleProperties {
     type: 'text';
     /** UI-only: reference to text input - resolved to text before rendering */
     textInputRef?: string;
     /** Actual text content (set after textInputRef is resolved) */
     text?: string;
-    alignment?: 'left' | 'center' | 'right' | 'justify';
-    verticalAlign?: 'top' | 'middle' | 'bottom';
-    direction?: 'ltr' | 'rtl';
-    padding?: number;
-    fontType?: 'tiktok' | 'apple' | 'arial';
-    fontSize?: number;
-    fontWeight?: 'normal' | 'bold';
-    lineHeight?: number;
-    letterSpacing?: number;
-    textWrap?: 'word' | 'char' | 'none';
-    wordBreak?: 'normal' | 'break-all' | 'break-word';
-    hyphenation?: 'none' | 'auto';
-    maxLines?: number;
-    textOverflow?: 'clip' | 'ellipsis';
-    ellipsis?: string;
-    color?: string;
-    backgroundColor?: string;
-    strokeColor?: string;
-    strokeWidth?: number;
 }
 /**
  * Union of all video editor segment types
@@ -600,74 +652,15 @@ interface ImageSegment extends PictureSegment {
 }
 /**
  * Text segment - rich text overlays with full typography control
+ *
+ * Extends TextStyleProperties which contains all shared text styling options.
+ * This ensures feature parity between image editor and video editor text elements.
  */
-interface TextSegment extends VisualSegment {
+interface TextSegment extends VisualSegment, TextStyleProperties {
     type: 'text';
     source: '';
     /** The text content (supports emojis) */
     text: string;
-    /** Horizontal alignment (default: 'left') */
-    alignment?: TextAlignment;
-    /** Vertical alignment within bounds (default: 'top') */
-    verticalAlign?: VerticalAlignment;
-    /** Text direction (default: 'ltr') */
-    direction?: TextDirection;
-    /** Inner padding in pixels - uniform for all sides (default: 0). Overridden by individual padding values if set. */
-    padding?: number;
-    /** Top padding in pixels (overrides uniform padding) */
-    paddingTop?: number;
-    /** Right padding in pixels (overrides uniform padding) */
-    paddingRight?: number;
-    /** Bottom padding in pixels (overrides uniform padding) */
-    paddingBottom?: number;
-    /** Left padding in pixels (overrides uniform padding) */
-    paddingLeft?: number;
-    /** Extra top padding added when text has 2+ lines */
-    multiLineExtraPaddingTop?: number;
-    /** Extra right padding added when text has 2+ lines */
-    multiLineExtraPaddingRight?: number;
-    /** Extra bottom padding added when text has 2+ lines */
-    multiLineExtraPaddingBottom?: number;
-    /** Extra left padding added when text has 2+ lines */
-    multiLineExtraPaddingLeft?: number;
-    /** Font family (default: 'arial') */
-    fontType?: FontType;
-    /** Font size in pixels (default: 40) */
-    fontSize?: number;
-    /** Font weight (default: 'normal') */
-    fontWeight?: FontWeight;
-    /** Line height multiplier (default: 1.2) */
-    lineHeight?: number;
-    /** Letter spacing in pixels (default: 0) */
-    letterSpacing?: number;
-    /** How text wraps to new lines (default: 'word') */
-    textWrap?: TextWrap;
-    /** How words break across lines (default: 'normal') */
-    wordBreak?: WordBreak;
-    /** Automatic hyphenation (default: 'none') */
-    hyphenation?: Hyphenation;
-    /** Maximum lines (0 = unlimited) (default: 0) */
-    maxLines?: number;
-    /** How overflow is handled (default: 'clip') */
-    textOverflow?: TextOverflow;
-    /** Ellipsis string for overflow (default: '...') */
-    ellipsis?: string;
-    /** Text color (default: '#000000') */
-    color?: string;
-    /** Background color in hex format #RRGGBB (default: transparent) */
-    backgroundColor?: string;
-    /** Background opacity 0-100 (default: 100) */
-    backgroundOpacity?: number;
-    /** Border radius for background box - individual corners (default: 0) */
-    backgroundBorderRadius?: BorderRadiusConfig;
-    /** Text outline color (default: none) */
-    strokeColor?: string;
-    /** Outline width in pixels (default: 0) */
-    strokeWidth?: number;
-    /** When true, box shrinks to fit content (width becomes max width) */
-    autoWidth?: boolean;
-    /** Which side the box anchors to when autoWidth is true (default: 'left') */
-    boxAlign?: 'left' | 'center' | 'right';
 }
 /**
  * Audio segment - background audio or music
@@ -1372,4 +1365,4 @@ declare function useResolvedPositions(elements: ImageEditorElement[], textValues
 
 declare const RenderRoot: React.FC;
 
-export { APPLE_EMOJI_FONT, type AudioSegment, type BaseEditorConfig, type BaseSegment, type BorderRadiusConfig, type Channel, type CropAxisConfig, type CropBoundary, type CropBounds, DIMENSION_PRESETS, type DimensionPreset, type DimensionPresetKey, type DynamicCropConfig, type EditorConfig, type EditorSegment, FONT_FAMILIES, FONT_URLS, type FitDimensions, type FitMode, type FontType, type FontWeight, type HorizontalAnchor, type HorizontalSelfAnchor, type Hyphenation, IMAGE_DEFAULTS, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, type ImageEditorElement, type ImageEditorNodeConfig, ImageElement, type ImageElementProps, type ImageSegment, type PictureSegment, type PositionResolutionError, type PositionResolutionResult, type RelativePositionConfigX, type RelativePositionConfigY, RenderRoot, type Segment, type SegmentTimelinePosition, type SegmentType, type StaticSegment, TEXT_DEFAULTS, type TextAlignment, type TextDirection, TextElement, type TextElementProps, type TextOverflow, type TextSegment, type TextWrap, type TimeMode, type TimeValue, VIDEO_DEFAULTS, VISUAL_DEFAULTS, type VerticalAlignment, type VerticalAnchor, type VerticalSelfAnchor, type VideoEditorAudioSegment, type VideoEditorBaseSegment, type VideoEditorChannel, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, type VideoEditorImageSegment, type VideoEditorNodeConfig, type VideoEditorSegment, type VideoEditorTextSegment, type VideoEditorVideoSegment, type VideoEditorVisualSegment, VideoElement, type VideoElementProps, type VideoSegment, type VisualSegment, type VisualSegmentUnion, type WordBreak, applyImageDefaults, applyTextDefaults, applyVideoDefaults, areFontsLoaded, buildFontString, calculateAutoWidthDimensions, calculateCropBounds, calculateEstimatedDuration, calculateFitDimensions, calculateLineWidth, calculateTimelineContentEnd, canSetAsReference, debugFontStatus, defaultOffset, formatTime, generateOverlayId, generateSegmentId, getBaseSegments, getBorderRadii, getDependentElements, getFontFamily, getOverlays, getReferenceElementX, getReferenceElementY, getSegmentTimelinePosition, hexToRgba, isDynamicCropEnabled, isSegmentVisibleAtTime, parseHexColor, parseTime, preloadFonts, resolveElementPositions, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, wrapText };
+export { APPLE_EMOJI_FONT, type AudioSegment, type BaseEditorConfig, type BaseSegment, type BorderRadiusConfig, type Channel, type CropAxisConfig, type CropBoundary, type CropBounds, DIMENSION_PRESETS, type DimensionPreset, type DimensionPresetKey, type DynamicCropConfig, type EditorConfig, type EditorSegment, FONT_FAMILIES, FONT_URLS, type FitDimensions, type FitMode, type FontType, type FontWeight, type HorizontalAnchor, type HorizontalSelfAnchor, type Hyphenation, IMAGE_DEFAULTS, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, type ImageEditorElement, type ImageEditorNodeConfig, ImageElement, type ImageElementProps, type ImageSegment, type PictureSegment, type PositionResolutionError, type PositionResolutionResult, type RelativePositionConfigX, type RelativePositionConfigY, RenderRoot, type Segment, type SegmentTimelinePosition, type SegmentType, type StaticSegment, TEXT_DEFAULTS, type TextAlignment, type TextDirection, TextElement, type TextElementProps, type TextOverflow, type TextSegment, type TextStyleProperties, type TextWrap, type TimeMode, type TimeValue, VIDEO_DEFAULTS, VISUAL_DEFAULTS, type VerticalAlignment, type VerticalAnchor, type VerticalSelfAnchor, type VideoEditorAudioSegment, type VideoEditorBaseSegment, type VideoEditorChannel, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, type VideoEditorImageSegment, type VideoEditorNodeConfig, type VideoEditorSegment, type VideoEditorTextSegment, type VideoEditorVideoSegment, type VideoEditorVisualSegment, VideoElement, type VideoElementProps, type VideoSegment, type VisualSegment, type VisualSegmentUnion, type WordBreak, applyImageDefaults, applyTextDefaults, applyVideoDefaults, areFontsLoaded, buildFontString, calculateAutoWidthDimensions, calculateCropBounds, calculateEstimatedDuration, calculateFitDimensions, calculateLineWidth, calculateTimelineContentEnd, canSetAsReference, debugFontStatus, defaultOffset, formatTime, generateOverlayId, generateSegmentId, getBaseSegments, getBorderRadii, getDependentElements, getFontFamily, getOverlays, getReferenceElementX, getReferenceElementY, getSegmentTimelinePosition, hexToRgba, isDynamicCropEnabled, isSegmentVisibleAtTime, parseHexColor, parseTime, preloadFonts, resolveElementPositions, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, wrapText };

package/dist/index.d.ts

@@ -80,6 +80,74 @@ type Hyphenation = 'none' | 'auto';
  * Text overflow behavior
  */
 type TextOverflow = 'clip' | 'ellipsis';
+/**
+ * Shared text styling properties used by both render and UI text segments.
+ * This ensures feature parity between image editor and video editor text elements.
+ */
+interface TextStyleProperties {
+    /** Horizontal alignment (default: 'left') */
+    alignment?: TextAlignment;
+    /** Vertical alignment within bounds (default: 'top') */
+    verticalAlign?: VerticalAlignment;
+    /** Text direction (default: 'ltr') */
+    direction?: TextDirection;
+    /** Inner padding in pixels - uniform for all sides (default: 0) */
+    padding?: number;
+    /** Top padding in pixels */
+    paddingTop?: number;
+    /** Right padding in pixels */
+    paddingRight?: number;
+    /** Bottom padding in pixels */
+    paddingBottom?: number;
+    /** Left padding in pixels */
+    paddingLeft?: number;
+    /** Extra top padding added when text has 2+ lines */
+    multiLineExtraPaddingTop?: number;
+    /** Extra right padding added when text has 2+ lines */
+    multiLineExtraPaddingRight?: number;
+    /** Extra bottom padding added when text has 2+ lines */
+    multiLineExtraPaddingBottom?: number;
+    /** Extra left padding added when text has 2+ lines */
+    multiLineExtraPaddingLeft?: number;
+    /** Font family (default: 'arial') */
+    fontType?: FontType;
+    /** Font size in pixels (default: 40) */
+    fontSize?: number;
+    /** Font weight (default: 'normal') */
+    fontWeight?: FontWeight;
+    /** Line height multiplier (default: 1.2) */
+    lineHeight?: number;
+    /** Letter spacing in pixels (default: 0) */
+    letterSpacing?: number;
+    /** How text wraps to new lines (default: 'word') */
+    textWrap?: TextWrap;
+    /** How words break across lines (default: 'normal') */
+    wordBreak?: WordBreak;
+    /** Automatic hyphenation (default: 'none') */
+    hyphenation?: Hyphenation;
+    /** Maximum lines (0 = unlimited) (default: 0) */
+    maxLines?: number;
+    /** How overflow is handled (default: 'clip') */
+    textOverflow?: TextOverflow;
+    /** Ellipsis string for overflow (default: '...') */
+    ellipsis?: string;
+    /** Text color (default: '#000000') */
+    color?: string;
+    /** Background color in hex format #RRGGBB (default: transparent) */
+    backgroundColor?: string;
+    /** Background opacity 0-100 (default: 100) */
+    backgroundOpacity?: number;
+    /** Border radius for background box - individual corners (default: 0) */
+    backgroundBorderRadius?: BorderRadiusConfig;
+    /** Text outline color (default: none) */
+    strokeColor?: string;
+    /** Outline width in pixels (default: 0) */
+    strokeWidth?: number;
+    /** When true, box shrinks to fit content (width becomes max width) */
+    autoWidth?: boolean;
+    /** Which side the box anchors to when autoWidth is true (default: 'left') */
+    boxAlign?: 'left' | 'center' | 'right';
+}
 
 /**
  * Position and anchor types for relative element positioning
@@ -437,32 +505,16 @@ interface VideoEditorImageSegment extends VideoEditorVisualSegment {
 }
 /**
  * Text segment (UI)
+ *
+ * Extends TextStyleProperties which contains all shared text styling options.
+ * This ensures feature parity between image editor and video editor text elements.
  */
-interface VideoEditorTextSegment extends VideoEditorVisualSegment {
+interface VideoEditorTextSegment extends VideoEditorVisualSegment, TextStyleProperties {
     type: 'text';
     /** UI-only: reference to text input - resolved to text before rendering */
     textInputRef?: string;
     /** Actual text content (set after textInputRef is resolved) */
     text?: string;
-    alignment?: 'left' | 'center' | 'right' | 'justify';
-    verticalAlign?: 'top' | 'middle' | 'bottom';
-    direction?: 'ltr' | 'rtl';
-    padding?: number;
-    fontType?: 'tiktok' | 'apple' | 'arial';
-    fontSize?: number;
-    fontWeight?: 'normal' | 'bold';
-    lineHeight?: number;
-    letterSpacing?: number;
-    textWrap?: 'word' | 'char' | 'none';
-    wordBreak?: 'normal' | 'break-all' | 'break-word';
-    hyphenation?: 'none' | 'auto';
-    maxLines?: number;
-    textOverflow?: 'clip' | 'ellipsis';
-    ellipsis?: string;
-    color?: string;
-    backgroundColor?: string;
-    strokeColor?: string;
-    strokeWidth?: number;
 }
 /**
  * Union of all video editor segment types
@@ -600,74 +652,15 @@ interface ImageSegment extends PictureSegment {
 }
 /**
  * Text segment - rich text overlays with full typography control
+ *
+ * Extends TextStyleProperties which contains all shared text styling options.
+ * This ensures feature parity between image editor and video editor text elements.
  */
-interface TextSegment extends VisualSegment {
+interface TextSegment extends VisualSegment, TextStyleProperties {
     type: 'text';
     source: '';
     /** The text content (supports emojis) */
     text: string;
-    /** Horizontal alignment (default: 'left') */
-    alignment?: TextAlignment;
-    /** Vertical alignment within bounds (default: 'top') */
-    verticalAlign?: VerticalAlignment;
-    /** Text direction (default: 'ltr') */
-    direction?: TextDirection;
-    /** Inner padding in pixels - uniform for all sides (default: 0). Overridden by individual padding values if set. */
-    padding?: number;
-    /** Top padding in pixels (overrides uniform padding) */
-    paddingTop?: number;
-    /** Right padding in pixels (overrides uniform padding) */
-    paddingRight?: number;
-    /** Bottom padding in pixels (overrides uniform padding) */
-    paddingBottom?: number;
-    /** Left padding in pixels (overrides uniform padding) */
-    paddingLeft?: number;
-    /** Extra top padding added when text has 2+ lines */
-    multiLineExtraPaddingTop?: number;
-    /** Extra right padding added when text has 2+ lines */
-    multiLineExtraPaddingRight?: number;
-    /** Extra bottom padding added when text has 2+ lines */
-    multiLineExtraPaddingBottom?: number;
-    /** Extra left padding added when text has 2+ lines */
-    multiLineExtraPaddingLeft?: number;
-    /** Font family (default: 'arial') */
-    fontType?: FontType;
-    /** Font size in pixels (default: 40) */
-    fontSize?: number;
-    /** Font weight (default: 'normal') */
-    fontWeight?: FontWeight;
-    /** Line height multiplier (default: 1.2) */
-    lineHeight?: number;
-    /** Letter spacing in pixels (default: 0) */
-    letterSpacing?: number;
-    /** How text wraps to new lines (default: 'word') */
-    textWrap?: TextWrap;
-    /** How words break across lines (default: 'normal') */
-    wordBreak?: WordBreak;
-    /** Automatic hyphenation (default: 'none') */
-    hyphenation?: Hyphenation;
-    /** Maximum lines (0 = unlimited) (default: 0) */
-    maxLines?: number;
-    /** How overflow is handled (default: 'clip') */
-    textOverflow?: TextOverflow;
-    /** Ellipsis string for overflow (default: '...') */
-    ellipsis?: string;
-    /** Text color (default: '#000000') */
-    color?: string;
-    /** Background color in hex format #RRGGBB (default: transparent) */
-    backgroundColor?: string;
-    /** Background opacity 0-100 (default: 100) */
-    backgroundOpacity?: number;
-    /** Border radius for background box - individual corners (default: 0) */
-    backgroundBorderRadius?: BorderRadiusConfig;
-    /** Text outline color (default: none) */
-    strokeColor?: string;
-    /** Outline width in pixels (default: 0) */
-    strokeWidth?: number;
-    /** When true, box shrinks to fit content (width becomes max width) */
-    autoWidth?: boolean;
-    /** Which side the box anchors to when autoWidth is true (default: 'left') */
-    boxAlign?: 'left' | 'center' | 'right';
 }
 /**
  * Audio segment - background audio or music
@@ -1372,4 +1365,4 @@ declare function useResolvedPositions(elements: ImageEditorElement[], textValues
 
 declare const RenderRoot: React.FC;
 
-export { APPLE_EMOJI_FONT, type AudioSegment, type BaseEditorConfig, type BaseSegment, type BorderRadiusConfig, type Channel, type CropAxisConfig, type CropBoundary, type CropBounds, DIMENSION_PRESETS, type DimensionPreset, type DimensionPresetKey, type DynamicCropConfig, type EditorConfig, type EditorSegment, FONT_FAMILIES, FONT_URLS, type FitDimensions, type FitMode, type FontType, type FontWeight, type HorizontalAnchor, type HorizontalSelfAnchor, type Hyphenation, IMAGE_DEFAULTS, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, type ImageEditorElement, type ImageEditorNodeConfig, ImageElement, type ImageElementProps, type ImageSegment, type PictureSegment, type PositionResolutionError, type PositionResolutionResult, type RelativePositionConfigX, type RelativePositionConfigY, RenderRoot, type Segment, type SegmentTimelinePosition, type SegmentType, type StaticSegment, TEXT_DEFAULTS, type TextAlignment, type TextDirection, TextElement, type TextElementProps, type TextOverflow, type TextSegment, type TextWrap, type TimeMode, type TimeValue, VIDEO_DEFAULTS, VISUAL_DEFAULTS, type VerticalAlignment, type VerticalAnchor, type VerticalSelfAnchor, type VideoEditorAudioSegment, type VideoEditorBaseSegment, type VideoEditorChannel, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, type VideoEditorImageSegment, type VideoEditorNodeConfig, type VideoEditorSegment, type VideoEditorTextSegment, type VideoEditorVideoSegment, type VideoEditorVisualSegment, VideoElement, type VideoElementProps, type VideoSegment, type VisualSegment, type VisualSegmentUnion, type WordBreak, applyImageDefaults, applyTextDefaults, applyVideoDefaults, areFontsLoaded, buildFontString, calculateAutoWidthDimensions, calculateCropBounds, calculateEstimatedDuration, calculateFitDimensions, calculateLineWidth, calculateTimelineContentEnd, canSetAsReference, debugFontStatus, defaultOffset, formatTime, generateOverlayId, generateSegmentId, getBaseSegments, getBorderRadii, getDependentElements, getFontFamily, getOverlays, getReferenceElementX, getReferenceElementY, getSegmentTimelinePosition, hexToRgba, isDynamicCropEnabled, isSegmentVisibleAtTime, parseHexColor, parseTime, preloadFonts, resolveElementPositions, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, wrapText };
+export { APPLE_EMOJI_FONT, type AudioSegment, type BaseEditorConfig, type BaseSegment, type BorderRadiusConfig, type Channel, type CropAxisConfig, type CropBoundary, type CropBounds, DIMENSION_PRESETS, type DimensionPreset, type DimensionPresetKey, type DynamicCropConfig, type EditorConfig, type EditorSegment, FONT_FAMILIES, FONT_URLS, type FitDimensions, type FitMode, type FontType, type FontWeight, type HorizontalAnchor, type HorizontalSelfAnchor, type Hyphenation, IMAGE_DEFAULTS, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, type ImageEditorElement, type ImageEditorNodeConfig, ImageElement, type ImageElementProps, type ImageSegment, type PictureSegment, type PositionResolutionError, type PositionResolutionResult, type RelativePositionConfigX, type RelativePositionConfigY, RenderRoot, type Segment, type SegmentTimelinePosition, type SegmentType, type StaticSegment, TEXT_DEFAULTS, type TextAlignment, type TextDirection, TextElement, type TextElementProps, type TextOverflow, type TextSegment, type TextStyleProperties, type TextWrap, type TimeMode, type TimeValue, VIDEO_DEFAULTS, VISUAL_DEFAULTS, type VerticalAlignment, type VerticalAnchor, type VerticalSelfAnchor, type VideoEditorAudioSegment, type VideoEditorBaseSegment, type VideoEditorChannel, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, type VideoEditorImageSegment, type VideoEditorNodeConfig, type VideoEditorSegment, type VideoEditorTextSegment, type VideoEditorVideoSegment, type VideoEditorVisualSegment, VideoElement, type VideoElementProps, type VideoSegment, type VisualSegment, type VisualSegmentUnion, type WordBreak, applyImageDefaults, applyTextDefaults, applyVideoDefaults, areFontsLoaded, buildFontString, calculateAutoWidthDimensions, calculateCropBounds, calculateEstimatedDuration, calculateFitDimensions, calculateLineWidth, calculateTimelineContentEnd, canSetAsReference, debugFontStatus, defaultOffset, formatTime, generateOverlayId, generateSegmentId, getBaseSegments, getBorderRadii, getDependentElements, getFontFamily, getOverlays, getReferenceElementX, getReferenceElementY, getSegmentTimelinePosition, hexToRgba, isDynamicCropEnabled, isSegmentVisibleAtTime, parseHexColor, parseTime, preloadFonts, resolveElementPositions, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, wrapText };

package/dist/index.js

@@ -1634,7 +1634,8 @@ function VideoElement({
   const y = segment.yOffset * scale;
   const width = segment.width * scale;
   const height = segment.height * scale;
-  const startFrom = (segment.startTrim ?? 0) / 1e3;
+  const startFromMs = segment.startTrim ?? 0;
+  const startFromFrames = Math.round(startFromMs / 1e3 * fps);
   const fadeOpacity = (0, import_react4.useMemo)(() => {
     if (fadeIn <= 0) return 1;
     const framesFromStart = frame - startFrame;
@@ -1670,11 +1671,11 @@ function VideoElement({
     objectFit: fitModeToCss2(fit)
   }), [fit]);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_remotion3.Video,
+    import_remotion3.OffthreadVideo,
     {
       src,
       style: videoStyle,
-      startFrom,
+      startFrom: startFromFrames,
       playbackRate: speed,
       volume
     }

package/dist/index.mjs

@@ -1523,7 +1523,7 @@ import { AbsoluteFill as AbsoluteFill2, useCurrentFrame as useCurrentFrame3, use
 
 // src/components/VideoElement.tsx
 import { useMemo as useMemo4 } from "react";
-import { Video, useCurrentFrame as useCurrentFrame2, useVideoConfig as useVideoConfig2 } from "remotion";
+import { OffthreadVideo, useCurrentFrame as useCurrentFrame2, useVideoConfig as useVideoConfig2 } from "remotion";
 import { jsx as jsx4 } from "react/jsx-runtime";
 function fitModeToCss2(fit) {
   return fit;
@@ -1548,7 +1548,8 @@ function VideoElement({
   const y = segment.yOffset * scale;
   const width = segment.width * scale;
   const height = segment.height * scale;
-  const startFrom = (segment.startTrim ?? 0) / 1e3;
+  const startFromMs = segment.startTrim ?? 0;
+  const startFromFrames = Math.round(startFromMs / 1e3 * fps);
   const fadeOpacity = useMemo4(() => {
     if (fadeIn <= 0) return 1;
     const framesFromStart = frame - startFrame;
@@ -1584,11 +1585,11 @@ function VideoElement({
     objectFit: fitModeToCss2(fit)
   }), [fit]);
   return /* @__PURE__ */ jsx4("div", { style: containerStyle, children: /* @__PURE__ */ jsx4(
-    Video,
+    OffthreadVideo,
     {
       src,
       style: videoStyle,
-      startFrom,
+      startFrom: startFromFrames,
       playbackRate: speed,
       volume
     }

package/package.json

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