remotion 4.0.499 → 4.0.501

package/dist/cjs/Sequence.js

@@ -4,10 +4,12 @@ exports.SequenceWithoutFrom = exports.Sequence = exports.SequenceWithoutSchema =
 const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-use-before-define */
 const react_1 = require("react");
-const AbsoluteFill_js_1 = require("./AbsoluteFill.js");
+const AbsoluteFillElement_js_1 = require("./AbsoluteFillElement.js");
+const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
 const freeze_js_1 = require("./freeze.js");
 const interactivity_schema_js_1 = require("./interactivity-schema.js");
 const nonce_js_1 = require("./nonce.js");
+const sequence_crop_js_1 = require("./sequence-crop.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
 const SequenceManager_js_1 = require("./SequenceManager.js");
 const is_inside_series_js_1 = require("./series/is-inside-series.js");
@@ -18,12 +20,11 @@ const use_video_config_js_1 = require("./use-video-config.js");
 const v5_flag_js_1 = require("./v5-flag.js");
 const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js");
 const EMPTY_EFFECTS = [];
-const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, hidden = false, controls, _remotionInternalEffects, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalDocumentationLink: documentationLink, _remotionInternalSingleChildComponent: singleChildComponent, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, _remotionInternalIsMedia: isMedia, outlineRef: passedRefForOutline, ...other }, ref) => {
-    var _a, _b, _c;
+const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, hidden = false, controls, _remotionInternalEffects, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalDocumentationLink: documentationLink, _remotionInternalSingleChildComponent: singleChildComponent, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, _remotionInternalIsMedia: isMedia, outlineRef: passedRefForOutline, cropLeft, cropRight, cropTop, cropBottom, ...other }, ref) => {
+    var _a, _b, _c, _d;
     const { layout = 'absolute-fill' } = other;
     const [id] = (0, react_1.useState)(() => String(Math.random()));
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
-    const { rootId } = (0, timeline_position_state_js_1.useTimelineContext)();
     const cumulatedFrom = parentSequence
         ? parentSequence.cumulatedFrom + parentSequence.relativeFrom
         : 0;
@@ -31,6 +32,13 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
     if (layout !== 'absolute-fill' && layout !== 'none') {
         throw new TypeError(`The layout prop of <Sequence /> expects either "absolute-fill" or "none", but you passed: ${layout}`);
     }
+    const cropProps = { cropLeft, cropRight, cropTop, cropBottom };
+    const hasCropProp = Object.values(cropProps).some((value) => value !== undefined);
+    if (layout === 'none' && hasCropProp) {
+        throw new TypeError('The cropLeft, cropRight, cropTop and cropBottom props of <Sequence /> are only supported with layout="absolute-fill".');
+    }
+    (0, sequence_crop_js_1.validateSequenceCrop)(cropProps);
+    const { left: resolvedCropLeft, right: resolvedCropRight, top: resolvedCropTop, bottom: resolvedCropBottom, } = (0, sequence_crop_js_1.resolveSequenceCrop)(cropProps);
     // @ts-expect-error
     if (layout === 'none' && typeof other.style !== 'undefined') {
         throw new TypeError('If layout="none", you may not pass a style. Passed: ' +
@@ -155,14 +163,15 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
     const resolvedDocumentationLink = documentationLink !== null && documentationLink !== void 0 ? documentationLink : 'https://www.remotion.dev/docs/sequence';
     const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const isInsideSeries = (0, react_1.useContext)(is_inside_series_js_1.IsInsideSeriesContext);
-    const inheritedStack = (_b = other === null || other === void 0 ? void 0 : other.stack) !== null && _b !== void 0 ? _b : null;
     // Our assumption: Stack doesnt' change. After we symbolicate we assign it a nodePath
     // and if it changes, it would lead to-remounting of the sequence.
     const stackRef = (0, react_1.useRef)(null);
-    stackRef.current = stack !== null && stack !== void 0 ? stack : inheritedStack;
+    stackRef.current = controls
+        ? ((_c = (_b = (0, enable_sequence_stack_traces_js_1.getStackForControls)(controls)) !== null && _b !== void 0 ? _b : stack) !== null && _c !== void 0 ? _c : null)
+        : (stack !== null && stack !== void 0 ? stack : null);
     const registeredFrozenFrame = typeof freeze === 'number' ? freeze : null;
     const registeredTrimBefore = trimBefore === 0 ? null : trimBefore;
-    const parentCumulatedNegativeFrom = (_c = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.cumulatedNegativeFrom) !== null && _c !== void 0 ? _c : 0;
+    const parentCumulatedNegativeFrom = (_d = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.cumulatedNegativeFrom) !== null && _d !== void 0 ? _d : 0;
     const startMediaFrom = isMedia && isMedia.type !== 'image'
         ? isMedia.data.startMediaFrom +
             parentCumulatedNegativeFrom -
@@ -202,7 +211,6 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
                     parent: (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _a !== void 0 ? _a : null,
                     postmountDisplay: postmountDisplay !== null && postmountDisplay !== void 0 ? postmountDisplay : null,
                     premountDisplay: premountDisplay !== null && premountDisplay !== void 0 ? premountDisplay : null,
-                    rootId,
                     showInTimeline,
                     src: isMedia.src,
                     getStack: () => stackRef.current,
@@ -230,7 +238,6 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
                     playbackRate: isMedia.data.playbackRate,
                     postmountDisplay: postmountDisplay !== null && postmountDisplay !== void 0 ? postmountDisplay : null,
                     premountDisplay: premountDisplay !== null && premountDisplay !== void 0 ? premountDisplay : null,
-                    rootId,
                     showInTimeline,
                     src: isMedia.data.src,
                     getStack: () => stackRef.current,
@@ -257,7 +264,6 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
             documentationLink: resolvedDocumentationLink,
             parent: (_c = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _c !== void 0 ? _c : null,
             type: 'sequence',
-            rootId,
             showInTimeline,
             nonce: nonce.get(),
             loopDisplay,
@@ -283,7 +289,6 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
         unregisterSequence,
         parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id,
         actualDurationInFrames,
-        rootId,
         from,
         trimBefore,
         registeredTrimBefore,
@@ -315,6 +320,13 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
             : children;
     const frozenContent = content === null || typeof freeze === 'undefined' || freeze === null ? (content) : (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freeze, children: content }));
     const styleIfThere = other.layout === 'none' ? undefined : other.style;
+    const cropClipPath = (0, sequence_crop_js_1.getSequenceCropClipPath)({
+        left: resolvedCropLeft,
+        right: resolvedCropRight,
+        top: resolvedCropTop,
+        bottom: resolvedCropBottom,
+        style: styleIfThere,
+    });
     const sequenceRef = (0, react_1.useCallback)((node) => {
         wrapperRefForOutline.current = node;
         if (typeof ref === 'function') {
@@ -330,15 +342,20 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
             ...(width ? { width } : {}),
             ...(height ? { height } : {}),
             ...(styleIfThere !== null && styleIfThere !== void 0 ? styleIfThere : {}),
+            ...(cropClipPath
+                ? {
+                    clipPath: cropClipPath,
+                }
+                : {}),
         };
-    }, [height, styleIfThere, width]);
+    }, [cropClipPath, height, styleIfThere, width]);
     if (ref !== null && layout === 'none') {
         throw new TypeError('It is not supported to pass both a `ref` and `layout="none"` to <Sequence />.');
     }
     if (hidden) {
         return null;
     }
-    return (jsx_runtime_1.jsx(SequenceContext_js_1.SequenceContext.Provider, { value: contextValue, children: frozenContent === null ? null : other.layout === 'none' ? (frozenContent) : (jsx_runtime_1.jsx(AbsoluteFill_js_1.AbsoluteFill, { ref: sequenceRef, style: defaultStyle, className: other.className, children: frozenContent })) }));
+    return (jsx_runtime_1.jsx(SequenceContext_js_1.SequenceContext.Provider, { value: contextValue, children: frozenContent === null ? null : other.layout === 'none' ? (frozenContent) : (jsx_runtime_1.jsx(AbsoluteFillElement_js_1.AbsoluteFillElement, { ref: sequenceRef, style: defaultStyle, className: other.className, children: frozenContent })) }));
 };
 const RegularSequence = (0, react_1.forwardRef)(RegularSequenceRefForwardingFunction);
 const PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {

package/dist/cjs/TimelineContext.d.ts

@@ -4,7 +4,6 @@ import { type PlayableMediaTag } from './timeline-position-state';
 export type TimelineContextValue = {
     frame: Record<string, number>;
     playing: boolean;
-    rootId: string;
     imperativePlaying: RefObject<boolean>;
     audioAndVideoTags: RefObject<PlayableMediaTag[]>;
 };

package/dist/cjs/TimelineContext.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineContextProvider = exports.AbsoluteTimeContext = exports.PlaybackRateContext = exports.TimelineContext = exports.SetTimelineContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const random_1 = require("./random");
 const timeline_position_state_1 = require("./timeline-position-state");
 const use_delay_render_1 = require("./use-delay-render");
 exports.SetTimelineContext = (0, react_1.createContext)({
@@ -22,7 +21,6 @@ const TimelineContextProvider = ({ children, frameState }) => {
     const imperativePlaying = (0, react_1.useRef)(false);
     const [playbackRate, setPlaybackRate] = (0, react_1.useState)(1);
     const audioAndVideoTags = (0, react_1.useRef)([]);
-    const [remotionRootId] = (0, react_1.useState)(() => String((0, random_1.random)(null)));
     const [_frame, setFrame] = (0, react_1.useState)(() => (0, timeline_position_state_1.getInitialFrameState)());
     const frame = frameState !== null && frameState !== void 0 ? frameState : _frame;
     const { delayRender, continueRender } = (0, use_delay_render_1.useDelayRender)();
@@ -62,10 +60,9 @@ const TimelineContextProvider = ({ children, frameState }) => {
             frame,
             playing,
             imperativePlaying,
-            rootId: remotionRootId,
             audioAndVideoTags,
         };
-    }, [frame, playing, remotionRootId]);
+    }, [frame, playing]);
     const playbackRateContextValue = (0, react_1.useMemo)(() => {
         return {
             playbackRate,

package/dist/cjs/animated-image/AnimatedImage.d.ts

@@ -67,6 +67,47 @@ export declare const animatedImageSchema: {
         readonly default: undefined;
         readonly description: "Border color";
     };
+    readonly 'style.borderRadius': {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Border radius";
+        readonly hiddenFromList: false;
+        readonly keyframable: true;
+    };
+    readonly 'style.borderTopLeftRadius': {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Top left radius";
+        readonly hiddenFromList: false;
+    };
+    readonly 'style.borderTopRightRadius': {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Top right radius";
+        readonly hiddenFromList: false;
+    };
+    readonly 'style.borderBottomRightRadius': {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Bottom right radius";
+        readonly hiddenFromList: false;
+    };
+    readonly 'style.borderBottomLeftRadius': {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Bottom left radius";
+        readonly hiddenFromList: false;
+    };
     readonly 'style.backgroundColor': {
         readonly type: "color";
         readonly default: "transparent";
@@ -89,6 +130,46 @@ export declare const animatedImageSchema: {
         readonly hiddenFromList: true;
         readonly keyframable: false;
     };
+    readonly cropLeft: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Crop left";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly hiddenFromList: false;
+        readonly keyframable: true;
+    };
+    readonly cropRight: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Crop right";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly hiddenFromList: false;
+        readonly keyframable: true;
+    };
+    readonly cropTop: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Crop top";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly hiddenFromList: false;
+        readonly keyframable: true;
+    };
+    readonly cropBottom: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Crop bottom";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly hiddenFromList: false;
+        readonly keyframable: true;
+    };
     readonly durationInFrames: {
         readonly type: "number";
         readonly default: undefined;
@@ -135,7 +216,7 @@ export declare const animatedImageSchema: {
         readonly keyframable: false;
     };
 };
-export declare const AnimatedImage: React.ComponentType<import("../Interactive.js").InteractiveBaseProps & import("../Interactive.js").InteractivePremountProps & {
+export declare const AnimatedImage: React.ComponentType<import("../Interactive.js").InteractiveBaseProps & import("../Interactive.js").InteractiveCropProps & import("../Interactive.js").InteractivePremountProps & {
     src: string;
     width?: number | undefined;
     height?: number | undefined;

package/dist/cjs/animated-image/AnimatedImage.js

@@ -9,6 +9,7 @@ const enable_sequence_stack_traces_js_1 = require("../enable-sequence-stack-trac
 const freeze_js_1 = require("../freeze.js");
 const interactivity_schema_js_1 = require("../interactivity-schema.js");
 const Sequence_js_1 = require("../Sequence.js");
+const use_crop_style_js_1 = require("../use-crop-style.js");
 const use_current_frame_js_1 = require("../use-current-frame.js");
 const use_delay_render_js_1 = require("../use-delay-render.js");
 const use_premounting_js_1 = require("../use-premounting.js");
@@ -27,6 +28,7 @@ exports.animatedImageSchema = {
         keyframable: false,
     },
     ...interactivity_schema_js_1.baseSchema,
+    ...interactivity_schema_js_1.cropSchema,
     ...interactivity_schema_js_1.premountSchema,
     playbackRate: {
         type: 'number',
@@ -41,6 +43,7 @@ exports.animatedImageSchema = {
     ...interactivity_schema_js_1.transformSchema,
     ...interactivity_schema_js_1.backgroundSchema,
     ...interactivity_schema_js_1.borderSchema,
+    ...interactivity_schema_js_1.borderRadiusSchema,
 };
 const getCanvasPropsFromSequenceProps = (props) => {
     const canvasProps = {};
@@ -196,7 +199,7 @@ const AnimatedImageContent = (0, react_1.forwardRef)(({ src, width, height, onEr
     return (jsx_runtime_1.jsx(canvas_1.Canvas, { ref: ref, width: width, height: height, fit: fit, effects: memoizedEffects, ...props }));
 });
 AnimatedImageContent.displayName = 'AnimatedImageContent';
-const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, loopBehavior, id, className, style, durationInFrames, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, requestInit, effects = [], controls, ref, ...sequenceProps }) => {
+const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, loopBehavior, id, className, style, durationInFrames, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, cropLeft, cropRight, cropTop, cropBottom, requestInit, effects = [], controls, ref, ...sequenceProps }) => {
     const actualRef = (0, react_1.useRef)(null);
     const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
     (0, react_1.useImperativeHandle)(ref, () => {
@@ -212,6 +215,14 @@ const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, lo
         styleWhilePostmounted: styleWhilePostmounted !== null && styleWhilePostmounted !== void 0 ? styleWhilePostmounted : null,
         hideWhilePremounted: 'display-none',
     });
+    const croppedStyle = (0, use_crop_style_js_1.useCropStyle)({
+        cropLeft,
+        cropRight,
+        cropTop,
+        cropBottom,
+        style: premountingStyle,
+        componentName: '<AnimatedImage />',
+    });
     const canvasProps = getCanvasPropsFromSequenceProps(sequenceProps);
     const animatedImageProps = {
         src,
@@ -223,7 +234,7 @@ const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, lo
         loopBehavior,
         id,
         className,
-        style: premountingStyle !== null && premountingStyle !== void 0 ? premountingStyle : undefined,
+        style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined,
         requestInit,
         ...canvasProps,
     };

package/dist/cjs/animated-image/props.d.ts

@@ -1,6 +1,6 @@
 import type { ImageFit } from '../calculate-image-fit.js';
 import type { EffectsProp } from '../effects/effect-types.js';
-import type { InteractiveBaseProps, InteractivePremountProps } from '../Interactive.js';
+import type { InteractiveBaseProps, InteractiveCropProps, InteractivePremountProps } from '../Interactive.js';
 export type RemotionAnimatedImageLoopBehavior = 'loop' | 'pause-after-finish' | 'clear-after-finish';
 export type AnimatedImageCanvasProps = React.AriaAttributes & Record<`data-${string}`, string | undefined>;
 export type RemotionAnimatedImageProps = {
@@ -16,7 +16,7 @@ export type RemotionAnimatedImageProps = {
     className?: string;
     requestInit?: RequestInit;
 } & AnimatedImageCanvasProps;
-export type AnimatedImageProps = InteractiveBaseProps & InteractivePremountProps & RemotionAnimatedImageProps & {
+export type AnimatedImageProps = InteractiveBaseProps & InteractiveCropProps & InteractivePremountProps & RemotionAnimatedImageProps & {
     readonly effects?: EffectsProp;
 };
 export type AnimatedImageFillMode = ImageFit;

package/dist/cjs/audio/AudioForPreview.d.ts

@@ -7,7 +7,6 @@ type AudioForPreviewProps = RemotionAudioProps & {
     readonly _remotionInternalNativeLoopPassed: boolean;
     readonly _remotionInternalStack: string | null;
     readonly showInTimeline: boolean;
-    readonly stack?: string | undefined;
     readonly onNativeError: React.ReactEventHandler<HTMLAudioElement>;
 };
 export declare const AudioForPreview: React.ForwardRefExoticComponent<Omit<AudioForPreviewProps, "ref"> & React.RefAttributes<HTMLAudioElement>>;

package/dist/cjs/audio/AudioForPreview.js

@@ -58,7 +58,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         throw new Error('Cannot change the behavior for pre-mounting audio tags dynamically.');
     }
     const logLevel = (0, log_level_context_js_1.useLogLevel)();
-    const { volume, muted, playbackRate, preservePitch, shouldPreMountAudioTags, src, onDuration, acceptableTimeShiftInSeconds, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, _remotionInternalStack, allowAmplificationDuringRender, name, pauseWhenBuffering, showInTimeline, loopVolumeCurveBehavior, stack, crossOrigin, delayRenderRetries, delayRenderTimeoutInMilliseconds, toneFrequency, useWebAudioApi, onError, onNativeError, audioStreamIndex, ...nativeProps } = props;
+    const { volume, muted, playbackRate, preservePitch, shouldPreMountAudioTags, src, onDuration, acceptableTimeShiftInSeconds, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, _remotionInternalStack, allowAmplificationDuringRender, name, pauseWhenBuffering, showInTimeline, loopVolumeCurveBehavior, crossOrigin, delayRenderRetries, delayRenderTimeoutInMilliseconds, toneFrequency, useWebAudioApi, onError, onNativeError, audioStreamIndex, ...nativeProps } = props;
     // Typecheck that we are not accidentially passing unrecognized props
     // to the DOM
     const _propsValid = true;

package/dist/cjs/audio/html5-audio.d.ts

@@ -26,7 +26,7 @@ export declare const Html5Audio: React.ForwardRefExoticComponent<Omit<import("./
     /**
      * @deprecated For internal use only
      */
-    readonly stack?: string | undefined;
+    readonly _remotionInternalStack?: string | undefined;
 }, "ref"> & React.RefAttributes<HTMLAudioElement>>;
 /**
  * @deprecated This component has been renamed to `Html5Audio`.
@@ -54,5 +54,5 @@ export declare const Audio: React.ForwardRefExoticComponent<Omit<import("./props
     /**
      * @deprecated For internal use only
      */
-    readonly stack?: string | undefined;
+    readonly _remotionInternalStack?: string | undefined;
 }, "ref"> & React.RefAttributes<HTMLAudioElement>>;

package/dist/cjs/audio/html5-audio.js

@@ -24,7 +24,7 @@ const AudioRefForwardingFunction = (props, ref) => {
     var _a, _b, _c;
     const audioTagsContext = (0, react_1.useContext)(shared_audio_tags_js_1.SharedAudioTagsContext);
     const propsWithFreeze = props;
-    const { startFrom, endAt, trimBefore, trimAfter, name, stack, pauseWhenBuffering, showInTimeline, onError: onRemotionError, freeze, ...otherProps } = propsWithFreeze;
+    const { startFrom, endAt, trimBefore, trimAfter, name, _remotionInternalStack, pauseWhenBuffering, showInTimeline, onError: onRemotionError, freeze, ...otherProps } = propsWithFreeze;
     const { loop, freeze: _freeze, ...propsOtherThanLoop } = propsWithFreeze;
     const { fps } = (0, use_video_config_js_1.useVideoConfig)();
     const environment = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
@@ -94,7 +94,7 @@ const AudioRefForwardingFunction = (props, ref) => {
     if (environment.isRendering) {
         return (jsx_runtime_1.jsx(AudioForRendering_js_1.AudioForRendering, { onDuration: onDuration, ...props, ref: ref, onNativeError: onError, _remotionInternalNeedsDurationCalculation: Boolean(loop) }));
     }
-    return (jsx_runtime_1.jsx(AudioForPreview_js_1.AudioForPreview, { _remotionInternalNativeLoopPassed: (_c = props._remotionInternalNativeLoopPassed) !== null && _c !== void 0 ? _c : false, _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, shouldPreMountAudioTags: audioTagsContext !== null && audioTagsContext.numberOfAudioTags > 0, ...props, ref: ref, onNativeError: onError, onDuration: onDuration, pauseWhenBuffering: shouldPauseWhenBuffering, _remotionInternalNeedsDurationCalculation: Boolean(loop), showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true }));
+    return (jsx_runtime_1.jsx(AudioForPreview_js_1.AudioForPreview, { _remotionInternalNativeLoopPassed: (_c = props._remotionInternalNativeLoopPassed) !== null && _c !== void 0 ? _c : false, _remotionInternalStack: _remotionInternalStack !== null && _remotionInternalStack !== void 0 ? _remotionInternalStack : null, shouldPreMountAudioTags: audioTagsContext !== null && audioTagsContext.numberOfAudioTags > 0, ...props, ref: ref, onNativeError: onError, onDuration: onDuration, pauseWhenBuffering: shouldPauseWhenBuffering, _remotionInternalNeedsDurationCalculation: Boolean(loop), showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true }));
 };
 /**
  * @description With this component, you can add audio to your video. All audio formats which are supported by Chromium are supported by the component.

package/dist/cjs/canvas-image/CanvasImage.d.ts

@@ -67,6 +67,47 @@ export declare const canvasImageSchema: {
         readonly default: undefined;
         readonly description: "Border color";
     };
+    readonly 'style.borderRadius': {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Border radius";
+        readonly hiddenFromList: false;
+        readonly keyframable: true;
+    };
+    readonly 'style.borderTopLeftRadius': {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Top left radius";
+        readonly hiddenFromList: false;
+    };
+    readonly 'style.borderTopRightRadius': {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Top right radius";
+        readonly hiddenFromList: false;
+    };
+    readonly 'style.borderBottomRightRadius': {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Bottom right radius";
+        readonly hiddenFromList: false;
+    };
+    readonly 'style.borderBottomLeftRadius': {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Bottom left radius";
+        readonly hiddenFromList: false;
+    };
     readonly 'style.backgroundColor': {
         readonly type: "color";
         readonly default: "transparent";
@@ -89,6 +130,46 @@ export declare const canvasImageSchema: {
         readonly hiddenFromList: true;
         readonly keyframable: false;
     };
+    readonly cropLeft: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Crop left";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly hiddenFromList: false;
+        readonly keyframable: true;
+    };
+    readonly cropRight: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Crop right";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly hiddenFromList: false;
+        readonly keyframable: true;
+    };
+    readonly cropTop: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Crop top";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly hiddenFromList: false;
+        readonly keyframable: true;
+    };
+    readonly cropBottom: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Crop bottom";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly hiddenFromList: false;
+        readonly keyframable: true;
+    };
     readonly durationInFrames: {
         readonly type: "number";
         readonly default: undefined;
@@ -129,9 +210,7 @@ export declare const canvasImageSchema: {
         };
     };
 };
-export declare const CanvasImage: import("react").ComponentType<import("../Interactive.js").InteractiveBaseProps & import("../Interactive.js").InteractivePremountProps & {
-    readonly stack?: string | undefined;
-} & CanvasImageCanvasProps & {
+export declare const CanvasImage: import("react").ComponentType<import("../Interactive.js").InteractiveBaseProps & import("../Interactive.js").InteractiveCropProps & import("../Interactive.js").InteractivePremountProps & CanvasImageCanvasProps & {
     readonly src: string;
     readonly width?: number | undefined;
     readonly height?: number | undefined;
@@ -146,5 +225,6 @@ export declare const CanvasImage: import("react").ComponentType<import("../Inter
     readonly delayRenderRetries?: number | undefined;
     readonly delayRenderTimeoutInMilliseconds?: number | undefined;
     readonly _remotionInternalDocumentationLink?: string | undefined;
+    readonly _remotionInternalCropComponentName?: string | undefined;
     readonly outlineRef?: RefObject<HTMLElement | null> | null | undefined;
 } & import("react").RefAttributes<HTMLCanvasElement>>;

package/dist/cjs/canvas-image/CanvasImage.js

@@ -15,11 +15,13 @@ const Sequence_js_1 = require("../Sequence.js");
 const SequenceContext_js_1 = require("../SequenceContext.js");
 const truncate_src_for_label_js_1 = require("../truncate-src-for-label.js");
 const use_buffer_state_js_1 = require("../use-buffer-state.js");
+const use_crop_style_js_1 = require("../use-crop-style.js");
 const use_delay_render_js_1 = require("../use-delay-render.js");
 const use_premounting_js_1 = require("../use-premounting.js");
 const with_interactivity_schema_js_1 = require("../with-interactivity-schema.js");
 exports.canvasImageSchema = {
     ...interactivity_schema_js_1.baseSchema,
+    ...interactivity_schema_js_1.cropSchema,
     ...interactivity_schema_js_1.premountSchema,
     fit: {
         type: 'enum',
@@ -34,6 +36,7 @@ exports.canvasImageSchema = {
     ...interactivity_schema_js_1.transformSchema,
     ...interactivity_schema_js_1.backgroundSchema,
     ...interactivity_schema_js_1.borderSchema,
+    ...interactivity_schema_js_1.borderRadiusSchema,
 };
 const makeAbortError = () => {
     if (typeof DOMException !== 'undefined') {
@@ -319,7 +322,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
     return (jsx_runtime_1.jsx("canvas", { ...canvasProps, ref: canvasRef, width: width, height: height, className: className, style: style, id: id }));
 });
 CanvasImageContent.displayName = 'CanvasImageContent';
-const CanvasImageInner = (0, react_1.forwardRef)(({ src, width, height, fit, effects = [], className, style, id, onError, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, durationInFrames, from, trimBefore, freeze, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, hidden, name, showInTimeline, stack, controls, _remotionInternalDocumentationLink, outlineRef, ...canvasProps }, ref) => {
+const CanvasImageInner = (0, react_1.forwardRef)(({ src, width, height, fit, effects = [], className, style, id, onError, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, durationInFrames, from, trimBefore, freeze, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, hidden, name, showInTimeline, cropLeft, cropRight, cropTop, cropBottom, controls, _remotionInternalDocumentationLink, _remotionInternalCropComponentName, outlineRef, ...canvasProps }, ref) => {
     if (!src) {
         throw new Error('No "src" prop was passed to <CanvasImage>.');
     }
@@ -338,7 +341,15 @@ const CanvasImageInner = (0, react_1.forwardRef)(({ src, width, height, fit, eff
         styleWhilePostmounted: styleWhilePostmounted !== null && styleWhilePostmounted !== void 0 ? styleWhilePostmounted : null,
         hideWhilePremounted: 'display-none',
     });
-    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, name: name !== null && name !== void 0 ? name : '<CanvasImage>', _remotionInternalDocumentationLink: _remotionInternalDocumentationLink !== null && _remotionInternalDocumentationLink !== void 0 ? _remotionInternalDocumentationLink : 'https://www.remotion.dev/docs/canvasimage', controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalIsMedia: { type: 'image', src }, _remotionInternalStack: stack, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, outlineRef: outlineRef !== null && outlineRef !== void 0 ? outlineRef : actualRef, children: jsx_runtime_1.jsx(CanvasImageContent, { ref: actualRef, src: src, width: width, height: height, fit: fit, effects: effects, controls: controls, className: className, style: premountingStyle !== null && premountingStyle !== void 0 ? premountingStyle : undefined, id: id, onError: onError, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, refForOutline: outlineRef !== null && outlineRef !== void 0 ? outlineRef : null, ...canvasProps }) }) }));
+    const croppedStyle = (0, use_crop_style_js_1.useCropStyle)({
+        cropLeft,
+        cropRight,
+        cropTop,
+        cropBottom,
+        style: premountingStyle,
+        componentName: _remotionInternalCropComponentName !== null && _remotionInternalCropComponentName !== void 0 ? _remotionInternalCropComponentName : '<CanvasImage />',
+    });
+    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, name: name !== null && name !== void 0 ? name : '<CanvasImage>', _remotionInternalDocumentationLink: _remotionInternalDocumentationLink !== null && _remotionInternalDocumentationLink !== void 0 ? _remotionInternalDocumentationLink : 'https://www.remotion.dev/docs/canvasimage', controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalIsMedia: { type: 'image', src }, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, outlineRef: outlineRef !== null && outlineRef !== void 0 ? outlineRef : actualRef, children: jsx_runtime_1.jsx(CanvasImageContent, { ref: actualRef, src: src, width: width, height: height, fit: fit, effects: effects, controls: controls, className: className, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, id: id, onError: onError, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, refForOutline: outlineRef !== null && outlineRef !== void 0 ? outlineRef : null, ...canvasProps }) }) }));
 });
 /*
  * @description Renders a static image to a `<canvas>` and applies Remotion effects.

package/dist/cjs/canvas-image/props.d.ts

@@ -1,13 +1,8 @@
 import type React from 'react';
 import type { ImageFit } from '../calculate-image-fit.js';
 import type { EffectsProp } from '../effects/effect-types.js';
-import type { InteractiveBaseProps, InteractivePremountProps } from '../Interactive.js';
-type CanvasImageSequenceProps = InteractiveBaseProps & InteractivePremountProps & {
-    /**
-     * @deprecated For internal use only.
-     */
-    readonly stack?: string;
-};
+import type { InteractiveBaseProps, InteractiveCropProps, InteractivePremountProps } from '../Interactive.js';
+type CanvasImageSequenceProps = InteractiveBaseProps & InteractiveCropProps & InteractivePremountProps;
 export type CanvasImageCanvasProps = Omit<React.CanvasHTMLAttributes<HTMLCanvasElement>, 'children' | 'height' | 'onError' | 'width'>;
 export type CanvasImageProps = CanvasImageSequenceProps & CanvasImageCanvasProps & {
     readonly src: string;
@@ -27,6 +22,10 @@ export type CanvasImageProps = CanvasImageSequenceProps & CanvasImageCanvasProps
      * @deprecated For internal use only.
      */
     readonly _remotionInternalDocumentationLink?: string;
+    /**
+     * @deprecated For internal use only.
+     */
+    readonly _remotionInternalCropComponentName?: string;
     /**
      * A React ref pointing to the element that Remotion Studio should use for
      * drawing the selection outline in the preview.