remotion 4.0.476 → 4.0.478

package/dist/cjs/CompositionManager.d.ts

@@ -34,6 +34,7 @@ type EnhancedTSequenceData = {
     doesVolumeChange: boolean;
     startMediaFrom: number;
     playbackRate: number;
+    frozenMediaFrame: number | null;
 } | {
     type: 'video';
     src: string;
@@ -41,6 +42,7 @@ type EnhancedTSequenceData = {
     doesVolumeChange: boolean;
     startMediaFrom: number;
     playbackRate: number;
+    frozenMediaFrame: number | null;
 } | {
     type: 'image';
     src: string;
@@ -50,11 +52,13 @@ export type LoopDisplay = {
     startOffset: number;
     durationInFrames: number;
 };
+export type JsxComponentIdentity = string;
 export type SequenceControls = {
     schema: SequenceSchema;
     currentRuntimeValueDotNotation: Record<string, unknown>;
     overrideId: string;
     supportsEffects: boolean;
+    componentIdentity: JsxComponentIdentity | null;
 };
 export type TSequence = {
     from: number;
@@ -74,6 +78,7 @@ export type TSequence = {
     refForOutline: React.RefObject<Element | null> | null;
     effects: readonly EffectDefinition<unknown>[];
     isInsideSeries: boolean;
+    frozenFrame: number | null;
 } & EnhancedTSequenceData;
 export type AudioOrVideoAsset = {
     type: 'audio' | 'video';

package/dist/cjs/HtmlInCanvas.js

@@ -296,11 +296,13 @@ HtmlInCanvasInner.displayName = 'HtmlInCanvas';
 const htmlInCanvasSchema = {
     durationInFrames: sequence_field_schema_js_1.durationInFramesField,
     from: sequence_field_schema_js_1.fromField,
+    freeze: sequence_field_schema_js_1.freezeField,
     ...sequence_field_schema_js_1.sequenceVisualStyleSchema,
     hidden: sequence_field_schema_js_1.hiddenField,
 };
 const HtmlInCanvasWrapped = (0, wrap_in_schema_js_1.wrapInSchema)({
     Component: HtmlInCanvasInner,
+    componentIdentity: 'dev.remotion.remotion.HtmlInCanvas',
     schema: htmlInCanvasSchema,
     supportsEffects: true,
 });

package/dist/cjs/Img.d.ts

@@ -16,7 +16,7 @@ export type ImgProps = NativeImgProps & {
      * @deprecated For internal use only
      */
     readonly stack?: string;
-} & Pick<SequenceProps, 'durationInFrames' | 'from' | 'hidden'>;
+} & Pick<SequenceProps, 'durationInFrames' | 'from' | 'freeze' | 'hidden'>;
 export declare const imgSchema: {
     readonly 'style.transformOrigin': {
         readonly type: "transform-origin";
@@ -65,6 +65,12 @@ export declare const imgSchema: {
         readonly step: 1;
         readonly hiddenFromList: true;
     };
+    readonly freeze: {
+        readonly type: "number";
+        readonly default: null;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
     readonly hidden: import("./sequence-field-schema.js").SequenceFieldSchema;
 };
 export declare const Img: React.ComponentType<NativeImgProps & {
@@ -81,5 +87,5 @@ export declare const Img: React.ComponentType<NativeImgProps & {
      * @deprecated For internal use only
      */
     readonly stack?: string | undefined;
-} & Pick<SequenceProps, "durationInFrames" | "from" | "hidden">>;
+} & Pick<SequenceProps, "durationInFrames" | "freeze" | "from" | "hidden">>;
 export {};

package/dist/cjs/Img.js

@@ -183,16 +183,17 @@ const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRende
     // src gets set once we've loaded and decoded the image.
     return (jsx_runtime_1.jsx("img", { ...props, ref: imageCallbackRef, crossOrigin: crossOriginValue, onError: didGetError, decoding: isRendering ? 'sync' : decoding }));
 };
-const NativeImgInner = ({ hidden, name, stack, showInTimeline, src, from, durationInFrames, _experimentalControls: controls, _remotionInternalRefForOutline: refForOutline, ...props }) => {
+const NativeImgInner = ({ hidden, name, stack, showInTimeline, src, from, durationInFrames, freeze, _experimentalControls: controls, _remotionInternalRefForOutline: refForOutline, ...props }) => {
     if (!src) {
         throw new Error('No "src" prop was passed to <Img>.');
     }
-    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, _remotionInternalStack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _remotionInternalIsMedia: { type: 'image', src }, name: name !== null && name !== void 0 ? name : '<Img>', _experimentalControls: controls, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, hidden: hidden, _remotionInternalRefForOutline: refForOutline, children: jsx_runtime_1.jsx(ImgContent, { src: src, refForOutline: refForOutline, ...props }) }));
+    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, freeze: freeze, _remotionInternalStack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _remotionInternalIsMedia: { type: 'image', src }, name: name !== null && name !== void 0 ? name : '<Img>', _experimentalControls: controls, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, hidden: hidden, _remotionInternalRefForOutline: refForOutline, children: jsx_runtime_1.jsx(ImgContent, { src: src, refForOutline: refForOutline, ...props }) }));
 };
 const CanvasImageWithPrivateProps = index_js_1.CanvasImage;
 exports.imgSchema = {
     durationInFrames: sequence_field_schema_js_1.durationInFramesField,
     from: sequence_field_schema_js_1.fromField,
+    freeze: sequence_field_schema_js_1.freezeField,
     ...sequence_field_schema_js_1.sequenceVisualStyleSchema,
     hidden: sequence_field_schema_js_1.hiddenField,
 };
@@ -235,11 +236,11 @@ const getFitFromObjectFit = (style) => {
     }
     return undefined;
 };
-const ImgInner = ({ effects = [], ref, hidden, name, stack, showInTimeline, src, from, durationInFrames, _experimentalControls: controls, width, height, className, style, id, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...props }) => {
+const ImgInner = ({ effects = [], ref, hidden, name, stack, showInTimeline, src, from, durationInFrames, freeze, _experimentalControls: controls, width, height, className, style, id, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...props }) => {
     var _a;
     const refForOutline = (0, react_1.useRef)(null);
     if (effects.length === 0) {
-        return (jsx_runtime_1.jsx(NativeImgInner, { ...props, ref: ref, hidden: hidden, name: name, stack: stack, showInTimeline: showInTimeline, src: src, from: from, durationInFrames: durationInFrames, _experimentalControls: controls, width: width, height: height, className: className, style: style, id: id, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, _remotionInternalRefForOutline: refForOutline }));
+        return (jsx_runtime_1.jsx(NativeImgInner, { ...props, ref: ref, hidden: hidden, name: name, stack: stack, showInTimeline: showInTimeline, src: src, from: from, durationInFrames: durationInFrames, freeze: freeze, _experimentalControls: controls, width: width, height: height, className: className, style: style, id: id, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, _remotionInternalRefForOutline: refForOutline }));
     }
     if (!src) {
         throw new Error('No "src" prop was passed to <Img>.');
@@ -254,7 +255,7 @@ const ImgInner = ({ effects = [], ref, hidden, name, stack, showInTimeline, src,
     const canvasHeight = typeof height === 'number' ? height : undefined;
     const canvasProps = props;
     const canvasFit = (_a = getFitFromObjectFit(style)) !== null && _a !== void 0 ? _a : 'fill';
-    return (jsx_runtime_1.jsx(CanvasImageWithPrivateProps, { src: src, width: canvasWidth, height: canvasHeight, fit: canvasFit, effects: effects, className: className, style: style, id: id, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, from: from, durationInFrames: durationInFrames, hidden: hidden, name: name !== null && name !== void 0 ? name : '<Img>', showInTimeline: showInTimeline, stack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _experimentalControls: controls, _remotionInternalRefForOutline: refForOutline, ...canvasProps }));
+    return (jsx_runtime_1.jsx(CanvasImageWithPrivateProps, { src: src, width: canvasWidth, height: canvasHeight, fit: canvasFit, effects: effects, className: className, style: style, id: id, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, from: from, durationInFrames: durationInFrames, freeze: freeze, hidden: hidden, name: name !== null && name !== void 0 ? name : '<Img>', showInTimeline: showInTimeline, stack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _experimentalControls: controls, _remotionInternalRefForOutline: refForOutline, ...canvasProps }));
 };
 /*
  * @description Works just like a regular HTML img tag. When you use the <Img> tag, Remotion will ensure that the image is loaded before rendering the frame.
@@ -262,6 +263,7 @@ const ImgInner = ({ effects = [], ref, hidden, name, stack, showInTimeline, src,
  */
 exports.Img = (0, wrap_in_schema_js_1.wrapInSchema)({
     Component: ImgInner,
+    componentIdentity: 'dev.remotion.remotion.Img',
     schema: exports.imgSchema,
     supportsEffects: true,
 });

package/dist/cjs/Interactive.d.ts

@@ -4,7 +4,7 @@ type InteractiveHtmlTag = 'a' | 'article' | 'aside' | 'button' | 'code' | 'div'
 type InteractiveSvgTag = 'circle' | 'ellipse' | 'g' | 'line' | 'path' | 'rect' | 'svg' | 'text';
 type InteractiveTag = InteractiveHtmlTag | InteractiveSvgTag;
 type ElementForTag<Tag extends InteractiveTag> = Tag extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[Tag] : Tag extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[Tag] : Element;
-type InteractiveSequenceProps = Pick<SequenceProps, 'durationInFrames' | 'from' | 'hidden' | 'name' | 'showInTimeline'> & {
+type InteractiveSequenceProps = Pick<SequenceProps, 'durationInFrames' | 'from' | 'freeze' | 'hidden' | 'name' | 'showInTimeline'> & {
     /**
      * @deprecated For internal use only
      */

package/dist/cjs/Interactive.js

@@ -43,6 +43,7 @@ const wrap_in_schema_js_1 = require("./wrap-in-schema.js");
 const interactiveElementSchema = {
     durationInFrames: sequence_field_schema_js_1.durationInFramesField,
     from: sequence_field_schema_js_1.fromField,
+    freeze: sequence_field_schema_js_1.freezeField,
     ...sequence_field_schema_js_1.sequenceVisualStyleSchema,
     hidden: sequence_field_schema_js_1.hiddenField,
 };
@@ -56,13 +57,13 @@ const setRef = (ref, value) => {
 };
 const makeInteractiveElement = (tag, displayName) => {
     const Inner = (0, react_1.forwardRef)((propsWithControls, ref) => {
-        const { durationInFrames, from, hidden, name, showInTimeline, stack, _experimentalControls, ...props } = propsWithControls;
+        const { durationInFrames, from, freeze, hidden, name, showInTimeline, stack, _experimentalControls, ...props } = propsWithControls;
         const refForOutline = (0, react_1.useRef)(null);
         const callbackRef = (0, react_1.useCallback)((element) => {
             refForOutline.current = element;
             setRef(ref, element);
         }, [ref]);
-        return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, hidden: hidden, name: name !== null && name !== void 0 ? name : displayName, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, _experimentalControls: _experimentalControls, _remotionInternalStack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/interactive", _remotionInternalRefForOutline: refForOutline, children: react_1.default.createElement(tag, {
+        return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, freeze: freeze, hidden: hidden, name: name !== null && name !== void 0 ? name : displayName, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, _experimentalControls: _experimentalControls, _remotionInternalStack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/interactive", _remotionInternalRefForOutline: refForOutline, children: react_1.default.createElement(tag, {
                 ...props,
                 ref: callbackRef,
             }) }));
@@ -70,6 +71,7 @@ const makeInteractiveElement = (tag, displayName) => {
     Inner.displayName = displayName;
     const Wrapped = (0, wrap_in_schema_js_1.wrapInSchema)({
         Component: Inner,
+        componentIdentity: `dev.remotion.remotion.${displayName.slice(1, -1)}`,
         schema: interactiveElementSchema,
         supportsEffects: false,
     });

package/dist/cjs/Sequence.d.ts

@@ -19,6 +19,7 @@ export type SequencePropsWithoutDuration = {
     readonly width?: number;
     readonly height?: number;
     readonly from?: number;
+    readonly freeze?: number | null;
     readonly name?: string;
     readonly showInTimeline?: boolean;
     readonly hidden?: boolean;

package/dist/cjs/Sequence.js

@@ -19,8 +19,8 @@ const use_video_config_js_1 = require("./use-video-config.js");
 const v5_flag_js_1 = require("./v5-flag.js");
 const wrap_in_schema_js_1 = require("./wrap-in-schema.js");
 const EMPTY_EFFECTS = [];
-const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, hidden = false, _experimentalControls: controls, _remotionInternalEffects, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalDocumentationLink: documentationLink, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, _remotionInternalIsMedia: isMedia, _remotionInternalRefForOutline: refForOutline, ...other }, ref) => {
-    var _a, _b;
+const RegularSequenceRefForwardingFunction = ({ from = 0, freeze, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, hidden = false, _experimentalControls: controls, _remotionInternalEffects, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalDocumentationLink: documentationLink, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, _remotionInternalIsMedia: isMedia, _remotionInternalRefForOutline: passedRefForOutline, ...other }, ref) => {
+    var _a, _b, _c;
     const { layout = 'absolute-fill' } = other;
     const [id] = (0, react_1.useState)(() => String(Math.random()));
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
@@ -51,6 +51,17 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
     if (!Number.isFinite(from)) {
         throw new TypeError(`The "from" prop of a sequence must be finite, but got ${from}.`);
     }
+    if (typeof freeze !== 'undefined' && freeze !== null) {
+        if (typeof freeze !== 'number') {
+            throw new TypeError(`The "freeze" prop of <Sequence /> must be a number, but is of type ${typeof freeze}.`);
+        }
+        if (Number.isNaN(freeze)) {
+            throw new TypeError(`The "freeze" prop of <Sequence /> must be a real number, but it is NaN.`);
+        }
+        if (!Number.isFinite(freeze)) {
+            throw new TypeError(`The "freeze" prop of <Sequence /> must be finite, but it is ${freeze}.`);
+        }
+    }
     const absoluteFrame = (0, timeline_position_state_js_1.useTimelinePosition)();
     const videoConfig = (0, use_video_config_js_1.useVideoConfig)();
     const parentSequenceDuration = parentSequence
@@ -58,6 +69,10 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
         : durationInFrames;
     const actualDurationInFrames = Math.max(0, Math.min(videoConfig.durationInFrames - from, parentSequenceDuration));
     const { registerSequence, unregisterSequence } = (0, react_1.useContext)(SequenceManager_js_1.SequenceManager);
+    const wrapperRefForOutline = (0, react_1.useRef)(null);
+    const refForOutline = other.layout === 'none'
+        ? (passedRefForOutline !== null && passedRefForOutline !== void 0 ? passedRefForOutline : null)
+        : (passedRefForOutline !== null && passedRefForOutline !== void 0 ? passedRefForOutline : wrapperRefForOutline);
     const premounting = (0, react_1.useMemo)(() => {
         // || is intentional, ?? would not trigger on `false`
         return ((parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.premounting) ||
@@ -133,6 +148,25 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
     // 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;
+    const registeredFrozenFrame = typeof freeze === 'number' ? freeze : null;
+    const parentCumulatedNegativeFrom = (_c = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.cumulatedNegativeFrom) !== null && _c !== void 0 ? _c : 0;
+    const startMediaFrom = isMedia && isMedia.type !== 'image'
+        ? isMedia.data.startMediaFrom +
+            parentCumulatedNegativeFrom -
+            cumulatedNegativeFrom
+        : null;
+    const mediaFrameAtSequenceZero = isMedia && isMedia.type !== 'image'
+        ? isMedia.data.startMediaFrom + parentCumulatedNegativeFrom
+        : null;
+    const frozenMediaFrame = isMedia && isMedia.type !== 'image' && mediaFrameAtSequenceZero !== null
+        ? registeredFrozenFrame === null
+            ? null
+            : mediaFrameAtSequenceZero +
+                (loopDisplay
+                    ? registeredFrozenFrame % loopDisplay.durationInFrames
+                    : registeredFrozenFrame) *
+                    isMedia.data.playbackRate
+        : null;
     (0, react_1.useEffect)(() => {
         var _a, _b, _c;
         if (!env.isStudio) {
@@ -160,6 +194,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
                     getStack: () => stackRef.current,
                     refForOutline: refForOutline !== null && refForOutline !== void 0 ? refForOutline : null,
                     isInsideSeries,
+                    frozenFrame: registeredFrozenFrame,
                 });
             }
             else {
@@ -183,10 +218,12 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
                     showInTimeline,
                     src: isMedia.data.src,
                     getStack: () => stackRef.current,
-                    startMediaFrom: isMedia.data.startMediaFrom,
+                    startMediaFrom: startMediaFrom !== null && startMediaFrom !== void 0 ? startMediaFrom : isMedia.data.startMediaFrom,
                     volume: isMedia.data.volumes,
                     refForOutline: refForOutline !== null && refForOutline !== void 0 ? refForOutline : null,
                     isInsideSeries,
+                    frozenFrame: registeredFrozenFrame,
+                    frozenMediaFrame,
                 });
             }
             return () => {
@@ -212,6 +249,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
             effects: _remotionInternalEffects !== null && _remotionInternalEffects !== void 0 ? _remotionInternalEffects : EMPTY_EFFECTS,
             refForOutline: refForOutline !== null && refForOutline !== void 0 ? refForOutline : null,
             isInsideSeries,
+            frozenFrame: registeredFrozenFrame,
         });
         return () => {
             unregisterSequence(id);
@@ -239,6 +277,9 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
         resolvedDocumentationLink,
         refForOutline,
         isInsideSeries,
+        registeredFrozenFrame,
+        startMediaFrom,
+        frozenMediaFrame,
     ]);
     // Ceil to support floats
     // https://github.com/remotion-dev/remotion/issues/2958
@@ -248,7 +289,17 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
         : absoluteFrame > endThreshold
             ? null
             : 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 sequenceRef = (0, react_1.useCallback)((node) => {
+        wrapperRefForOutline.current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
     const defaultStyle = (0, react_1.useMemo)(() => {
         return {
             flexDirection: undefined,
@@ -263,7 +314,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
     if (hidden) {
         return null;
     }
-    return (jsx_runtime_1.jsx(SequenceContext_js_1.SequenceContext.Provider, { value: contextValue, children: content === null ? null : other.layout === 'none' ? (content) : (jsx_runtime_1.jsx(AbsoluteFill_js_1.AbsoluteFill, { ref: ref, style: defaultStyle, className: other.className, children: content })) }));
+    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 })) }));
 };
 const RegularSequence = (0, react_1.forwardRef)(RegularSequenceRefForwardingFunction);
 const PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
@@ -326,11 +377,13 @@ exports.SequenceWithoutSchema = SequenceInner;
  */
 exports.Sequence = (0, wrap_in_schema_js_1.wrapInSchema)({
     Component: SequenceInner,
+    componentIdentity: 'dev.remotion.remotion.Sequence',
     schema: sequence_field_schema_js_1.sequenceSchema,
     supportsEffects: false,
 });
 exports.SequenceWithoutFrom = (0, wrap_in_schema_js_1.wrapInSchema)({
     Component: SequenceInner,
+    componentIdentity: null,
     schema: sequence_field_schema_js_1.sequenceSchemaWithoutFrom,
     supportsEffects: false,
 });

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

@@ -19,6 +19,7 @@ const resolve_image_source_1 = require("./resolve-image-source");
 const animatedImageSchema = {
     durationInFrames: sequence_field_schema_js_1.durationInFramesField,
     from: sequence_field_schema_js_1.fromField,
+    freeze: sequence_field_schema_js_1.freezeField,
     playbackRate: {
         type: 'number',
         min: 0,
@@ -177,6 +178,7 @@ const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, lo
 };
 exports.AnimatedImage = (0, wrap_in_schema_js_1.wrapInSchema)({
     Component: AnimatedImageInner,
+    componentIdentity: 'dev.remotion.remotion.AnimatedImage',
     schema: animatedImageSchema,
     supportsEffects: true,
 });

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

@@ -49,6 +49,12 @@ export declare const canvasImageSchema: {
         readonly step: 1;
         readonly hiddenFromList: true;
     };
+    readonly freeze: {
+        readonly type: "number";
+        readonly default: null;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
     readonly fit: {
         readonly type: "enum";
         readonly default: "fill";
@@ -61,7 +67,7 @@ export declare const canvasImageSchema: {
     };
     readonly hidden: import("../sequence-field-schema.js").SequenceFieldSchema;
 };
-export declare const CanvasImage: import("react").ComponentType<Pick<import("../Sequence.js").SequenceProps, "durationInFrames" | "from" | "hidden" | "name" | "showInTimeline"> & {
+export declare const CanvasImage: import("react").ComponentType<Pick<import("../Sequence.js").SequenceProps, "durationInFrames" | "freeze" | "from" | "hidden" | "name" | "showInTimeline"> & {
     readonly stack?: string | undefined;
 } & CanvasImageCanvasProps & {
     readonly src: string;

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

@@ -19,6 +19,7 @@ const wrap_in_schema_js_1 = require("../wrap-in-schema.js");
 exports.canvasImageSchema = {
     durationInFrames: sequence_field_schema_js_1.durationInFramesField,
     from: sequence_field_schema_js_1.fromField,
+    freeze: sequence_field_schema_js_1.freezeField,
     fit: {
         type: 'enum',
         default: 'fill',
@@ -236,7 +237,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, hidden, name, showInTimeline, stack, _experimentalControls: controls, _remotionInternalDocumentationLink, _remotionInternalRefForOutline, ...canvasProps }, ref) => {
+const CanvasImageInner = (0, react_1.forwardRef)(({ src, width, height, fit, effects = [], className, style, id, onError, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, durationInFrames, from, freeze, hidden, name, showInTimeline, stack, _experimentalControls: controls, _remotionInternalDocumentationLink, _remotionInternalRefForOutline, ...canvasProps }, ref) => {
     if (!src) {
         throw new Error('No "src" prop was passed to <CanvasImage>.');
     }
@@ -245,7 +246,7 @@ const CanvasImageInner = (0, react_1.forwardRef)(({ src, width, height, fit, eff
     (0, react_1.useImperativeHandle)(ref, () => {
         return actualRef.current;
     }, []);
-    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, 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', _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalIsMedia: { type: 'image', src }, _remotionInternalStack: stack, _remotionInternalRefForOutline: _remotionInternalRefForOutline !== null && _remotionInternalRefForOutline !== void 0 ? _remotionInternalRefForOutline : actualRef, children: jsx_runtime_1.jsx(CanvasImageContent, { ref: actualRef, src: src, width: width, height: height, fit: fit, effects: effects, controls: controls, className: className, style: style, id: id, onError: onError, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, refForOutline: _remotionInternalRefForOutline !== null && _remotionInternalRefForOutline !== void 0 ? _remotionInternalRefForOutline : null, ...canvasProps }) }));
+    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, 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', _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalIsMedia: { type: 'image', src }, _remotionInternalStack: stack, _remotionInternalRefForOutline: _remotionInternalRefForOutline !== null && _remotionInternalRefForOutline !== void 0 ? _remotionInternalRefForOutline : actualRef, children: jsx_runtime_1.jsx(CanvasImageContent, { ref: actualRef, src: src, width: width, height: height, fit: fit, effects: effects, controls: controls, className: className, style: style, id: id, onError: onError, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, refForOutline: _remotionInternalRefForOutline !== null && _remotionInternalRefForOutline !== void 0 ? _remotionInternalRefForOutline : null, ...canvasProps }) }));
 });
 /*
  * @description Renders a static image to a `<canvas>` and applies Remotion effects.
@@ -253,6 +254,7 @@ const CanvasImageInner = (0, react_1.forwardRef)(({ src, width, height, fit, eff
  */
 exports.CanvasImage = (0, wrap_in_schema_js_1.wrapInSchema)({
     Component: CanvasImageInner,
+    componentIdentity: 'dev.remotion.remotion.CanvasImage',
     schema: exports.canvasImageSchema,
     supportsEffects: true,
 });

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

@@ -2,7 +2,7 @@ import type React from 'react';
 import type { ImageFit } from '../calculate-image-fit.js';
 import type { EffectsProp } from '../effects/effect-types.js';
 import type { SequenceProps } from '../Sequence.js';
-type CanvasImageSequenceProps = Pick<SequenceProps, 'durationInFrames' | 'from' | 'hidden' | 'name' | 'showInTimeline'> & {
+type CanvasImageSequenceProps = Pick<SequenceProps, 'durationInFrames' | 'from' | 'freeze' | 'hidden' | 'name' | 'showInTimeline'> & {
     /**
      * @deprecated For internal use only.
      */

package/dist/cjs/effects/Solid.d.ts

@@ -13,5 +13,5 @@ type OptionalProps = {
     readonly pixelDensity: number | undefined;
 };
 export type SolidProps = MandatoryProps & Partial<OptionalProps>;
-export declare const Solid: React.ComponentType<MandatoryProps & Partial<OptionalProps> & Pick<SequenceProps, "durationInFrames" | "from" | "hidden" | "name" | "showInTimeline"> & React.RefAttributes<HTMLCanvasElement>>;
+export declare const Solid: React.ComponentType<MandatoryProps & Partial<OptionalProps> & Pick<SequenceProps, "durationInFrames" | "freeze" | "from" | "hidden" | "name" | "showInTimeline"> & React.RefAttributes<HTMLCanvasElement>>;
 export {};

package/dist/cjs/effects/Solid.js

@@ -25,6 +25,7 @@ const resolveSolidPixelDensity = (pixelDensity) => {
 const solidSchema = {
     durationInFrames: sequence_field_schema_js_1.durationInFramesField,
     from: sequence_field_schema_js_1.fromField,
+    freeze: sequence_field_schema_js_1.freezeField,
     color: {
         type: 'color',
         default: 'transparent',
@@ -140,7 +141,7 @@ const SolidInner = ({ color, width, height, effects = [], className, style, pixe
     }, [height, style, width]);
     return (jsx_runtime_1.jsx("canvas", { ref: canvasRef, width: canvasWidth, height: canvasHeight, className: className, style: canvasStyle }));
 };
-const SolidOuter = (0, react_1.forwardRef)(({ effects = [], _experimentalControls: controls, color, height, width, className, durationInFrames, style, name, from, hidden, showInTimeline, pixelDensity, ...props }, ref) => {
+const SolidOuter = (0, react_1.forwardRef)(({ effects = [], _experimentalControls: controls, color, height, width, className, durationInFrames, style, name, from, freeze, hidden, showInTimeline, pixelDensity, ...props }, ref) => {
     var _a;
     props;
     const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
@@ -148,10 +149,11 @@ const SolidOuter = (0, react_1.forwardRef)(({ effects = [], _experimentalControl
     (0, react_1.useImperativeHandle)(ref, () => {
         return actualRef.current;
     }, []);
-    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from, hidden: hidden, showInTimeline: showInTimeline, _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<Solid>', _remotionInternalRefForOutline: actualRef, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/solid", ...props, children: jsx_runtime_1.jsx(SolidInner, { reference: actualRef, overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null, color: color, height: height, width: width, className: className, style: style, effects: effects, pixelDensity: pixelDensity }) }));
+    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline, _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<Solid>', _remotionInternalRefForOutline: actualRef, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/solid", ...props, children: jsx_runtime_1.jsx(SolidInner, { reference: actualRef, overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null, color: color, height: height, width: width, className: className, style: style, effects: effects, pixelDensity: pixelDensity }) }));
 });
 exports.Solid = (0, wrap_in_schema_js_1.wrapInSchema)({
     Component: SolidOuter,
+    componentIdentity: 'dev.remotion.remotion.Solid',
     schema: solidSchema,
     supportsEffects: true,
 });

package/dist/cjs/index.d.ts

@@ -1,7 +1,7 @@
 import './_check-rsc.js';
 import './asset-types.js';
 import type { Codec } from './codec.js';
-import type { AnyCompMetadata, AnyComposition, AudioOrVideoAsset, LoopDisplay, SequenceControls, TRenderAsset } from './CompositionManager.js';
+import type { AnyCompMetadata, AnyComposition, AudioOrVideoAsset, JsxComponentIdentity, LoopDisplay, SequenceControls, TRenderAsset } from './CompositionManager.js';
 import type { DelayRenderScope } from './delay-render.js';
 import { type TFolder } from './Folder.js';
 import type { StaticFile } from './get-static-files.js';
@@ -182,4 +182,4 @@ export type _InternalTypes = {
     TRenderAsset: TRenderAsset;
     ProResProfile: ProResProfile;
 };
-export type { AnyComposition, ArrayFieldSchema, ArrayItemFieldSchema, DelayRenderScope, LoopDisplay, SequenceControls, SequenceFieldSchema, SequenceSchema, UseBufferState, };
+export type { AnyComposition, ArrayFieldSchema, ArrayItemFieldSchema, DelayRenderScope, JsxComponentIdentity, LoopDisplay, SequenceControls, SequenceFieldSchema, SequenceSchema, UseBufferState, };

package/dist/cjs/internals.d.ts

@@ -2,7 +2,7 @@ import type { ScheduleAudioNodeResult } from './audio/shared-audio-tags.js';
 import { type ScheduleAudioNodeOptions } from './audio/shared-audio-tags.js';
 import type { RemotionAudioContextState } from './audio/use-audio-context.js';
 import { type CompProps } from './Composition.js';
-import type { TCompMetadata, TComposition, TRenderAsset, TSequence } from './CompositionManager.js';
+import type { JsxComponentIdentity, TCompMetadata, TComposition, TRenderAsset, TSequence } from './CompositionManager.js';
 import type { CompositionManagerContext } from './CompositionManagerContext.js';
 import * as CSSUtils from './default-css.js';
 import type { SerializedJSONWithCustomFields } from './input-props-serialization.js';
@@ -77,10 +77,11 @@ export declare const Internals: {
     readonly SequenceManager: import("react").Context<import("./SequenceManager.js").SequenceManagerContext>;
     readonly SequenceManagerRefContext: import("react").Context<import("./SequenceManager.js").SequenceManagerRef>;
     readonly SequenceStackTracesUpdateContext: import("react").Context<import("./sequence-stack-traces.js").UpdateResolvedStackTraceFn>;
-    readonly wrapInSchema: <S extends SequenceSchema, Props extends object>({ Component, schema, supportsEffects, }: {
+    readonly wrapInSchema: <S extends SequenceSchema, Props extends object>({ Component, componentIdentity, schema, supportsEffects, }: {
         Component: import("react").ComponentType<Props & {
             readonly _experimentalControls: import("./CompositionManager.js").SequenceControls | undefined;
         }>;
+        componentIdentity: string | null;
         schema: S;
         supportsEffects: boolean;
     }) => import("react").ComponentType<Props>;
@@ -93,6 +94,12 @@ export declare const Internals: {
             readonly step: 1;
             readonly hiddenFromList: true;
         };
+        readonly freeze: {
+            readonly type: "number";
+            readonly default: null;
+            readonly step: 1;
+            readonly hiddenFromList: true;
+        };
         readonly durationInFrames: {
             readonly type: "number";
             readonly default: undefined;
@@ -739,6 +746,12 @@ export declare const Internals: {
         readonly step: 1;
         readonly hiddenFromList: true;
     };
+    readonly freezeField: {
+        readonly type: "number";
+        readonly default: null;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
     readonly fromField: {
         readonly type: "number";
         readonly default: 0;
@@ -746,4 +759,4 @@ export declare const Internals: {
         readonly hiddenFromList: true;
     };
 };
-export type { ArrayFieldSchema, ArrayItemFieldSchema, CannotUpdateSequenceReason, CanUpdateEffectPropsResponse, CanUpdateEffectPropsResponseFalse, CanUpdateEffectPropsResponseTrue, CanUpdateSequencePropsResponse, CanUpdateSequencePropsResponseFalse, CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, CompositionManagerContext, CompProps, DragOverrides, DragOverrideValue, EffectDragOverrides, GetDragOverrides, GetEffectDragOverrides, GetEffectPropStatuses, GetPropStatuses, LoggingContextValue, MediaVolumeContextValue, NonceHistory, OverrideIdsToNodePathsGettersContext, OverrideIdsToNodePathsSettersContext, OverrideIdToNodePaths, OverrideToNodePathGetters, OverrideToNodeSetters, PlaybackRateContextValue, PropStatuses, RemotionAudioContextState, RemotionEnvironment, ResolvedStackLocation, ScheduleAudioNodeOptions, ScheduleAudioNodeResult, SequenceFieldSchema, SequenceNodePath, SequencePropsSubscriptionKey, SequenceSchema, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TRenderAsset, TSequence, VisibleFieldSchema, WatchRemotionStaticFilesPayload, };
+export type { ArrayFieldSchema, ArrayItemFieldSchema, CannotUpdateSequenceReason, CanUpdateEffectPropsResponse, CanUpdateEffectPropsResponseFalse, CanUpdateEffectPropsResponseTrue, CanUpdateSequencePropsResponse, CanUpdateSequencePropsResponseFalse, CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, CompositionManagerContext, CompProps, DragOverrides, DragOverrideValue, EffectDragOverrides, GetDragOverrides, GetEffectDragOverrides, GetEffectPropStatuses, GetPropStatuses, JsxComponentIdentity, LoggingContextValue, MediaVolumeContextValue, NonceHistory, OverrideIdsToNodePathsGettersContext, OverrideIdsToNodePathsSettersContext, OverrideIdToNodePaths, OverrideToNodePathGetters, OverrideToNodeSetters, PlaybackRateContextValue, PropStatuses, RemotionAudioContextState, RemotionEnvironment, ResolvedStackLocation, ScheduleAudioNodeOptions, ScheduleAudioNodeResult, SequenceFieldSchema, SequenceNodePath, SequencePropsSubscriptionKey, SequenceSchema, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TRenderAsset, TSequence, VisibleFieldSchema, WatchRemotionStaticFilesPayload, };

package/dist/cjs/internals.js

@@ -262,5 +262,6 @@ exports.Internals = {
     getEffectPropStatusesCtx: use_memoized_effects_js_1.getEffectPropStatusesCtx,
     hiddenField: sequence_field_schema_js_1.hiddenField,
     durationInFramesField: sequence_field_schema_js_1.durationInFramesField,
+    freezeField: sequence_field_schema_js_1.freezeField,
     fromField: sequence_field_schema_js_1.fromField,
 };

package/dist/cjs/no-react.d.ts

@@ -70,6 +70,12 @@ export declare const NoReactInternals: {
             readonly step: 1;
             readonly hiddenFromList: true;
         };
+        readonly freeze: {
+            readonly type: "number";
+            readonly default: null;
+            readonly step: 1;
+            readonly hiddenFromList: true;
+        };
         readonly durationInFrames: {
             readonly type: "number";
             readonly default: undefined;

package/dist/cjs/sequence-field-schema.d.ts

@@ -7,7 +7,7 @@ export type NumberFieldSchema = {
     min?: number;
     max?: number;
     step?: number;
-    default: number | undefined;
+    default: number | null | undefined;
     description?: string;
     hiddenFromList: boolean;
     keyframable?: boolean;
@@ -242,6 +242,12 @@ export declare const fromField: {
     readonly step: 1;
     readonly hiddenFromList: true;
 };
+export declare const freezeField: {
+    readonly type: "number";
+    readonly default: null;
+    readonly step: 1;
+    readonly hiddenFromList: true;
+};
 export declare const sequenceSchema: {
     readonly hidden: BooleanFieldSchema;
     readonly showInTimeline: HiddenFieldSchema;
@@ -251,6 +257,12 @@ export declare const sequenceSchema: {
         readonly step: 1;
         readonly hiddenFromList: true;
     };
+    readonly freeze: {
+        readonly type: "number";
+        readonly default: null;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
     readonly durationInFrames: {
         readonly type: "number";
         readonly default: undefined;
@@ -329,6 +341,12 @@ export declare const sequenceSchema: {
 export declare const sequenceSchemaWithoutFrom: {
     readonly hidden: BooleanFieldSchema;
     readonly showInTimeline: HiddenFieldSchema;
+    readonly freeze: {
+        readonly type: "number";
+        readonly default: null;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
     readonly durationInFrames: {
         readonly type: "number";
         readonly default: undefined;