remotion - npm Package Compare versions

Comparing version 4.0.476 to 4.0.477

dist/cjs/interpolate-translate.d.ts

+import { type InterpolateOptions } from './interpolate.js';
+export type InterpolateTranslateOptions = InterpolateOptions;
+export declare const interpolateTranslate: (input: number, inputRange: readonly number[], outputRange: readonly string[], options?: Partial<{
+    easing: import("./interpolate.js").EasingFunction | readonly import("./interpolate.js").EasingFunction[];
+    extrapolateLeft: import("./interpolate.js").ExtrapolateType;
+    extrapolateRight: import("./interpolate.js").ExtrapolateType;
+    posterize: number;
+}> | undefined) => string;

dist/cjs/interpolate-translate.js

+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.interpolateTranslate = void 0;
+const interpolate_js_1 = require("./interpolate.js");
+const pixelValueRegex = /^([+-]?(?:\d+\.?\d*|\.\d+))px$/;
+const parseTranslate = (value) => {
+    if (typeof value !== 'string') {
+        throw new TypeError(`outputRange must contain only strings, but got ${typeof value}`);
+    }
+    const parts = value.trim().split(/\s+/);
+    if (parts.length < 1 || parts.length > 3 || parts[0] === '') {
+        throw new TypeError(`translate values must contain 1 to 3 pixel values, but got "${value}"`);
+    }
+    return parts.map((part) => {
+        const match = pixelValueRegex.exec(part);
+        if (match === null) {
+            throw new TypeError(`interpolateTranslate() only supports px values, but got "${part}" in "${value}"`);
+        }
+        return Number(match[1]);
+    });
+};
+/*
+ * @description Allows you to map a range of values to CSS translate values using pixel units.
+ * @see [Documentation](https://remotion.dev/docs/interpolate-translate)
+ */
+const interpolateTranslate = (input, inputRange, outputRange, options) => {
+    var _a;
+    if (typeof input === 'undefined') {
+        throw new TypeError('input can not be undefined');
+    }
+    if (typeof inputRange === 'undefined') {
+        throw new TypeError('inputRange can not be undefined');
+    }
+    if (typeof outputRange === 'undefined') {
+        throw new TypeError('outputRange can not be undefined');
+    }
+    if (inputRange.length !== outputRange.length) {
+        throw new TypeError('inputRange (' +
+            inputRange.length +
+            ' values provided) and outputRange (' +
+            outputRange.length +
+            ' values provided) must have the same length');
+    }
+    const parsedOutputRange = outputRange.map((translateValue) => parseTranslate(translateValue));
+    const firstValueLength = (_a = parsedOutputRange[0]) === null || _a === void 0 ? void 0 : _a.length;
+    if (firstValueLength === undefined) {
+        throw new TypeError('outputRange must have at least 1 element');
+    }
+    for (const parsedTranslate of parsedOutputRange) {
+        if (parsedTranslate.length !== firstValueLength) {
+            throw new TypeError(`All translate values must have the same number of pixel values, but got ${firstValueLength} and ${parsedTranslate.length}`);
+        }
+    }
+    return new Array(firstValueLength)
+        .fill(true)
+        .map((_, index) => {
+        const outputValues = [];
+        for (const translateValue of parsedOutputRange) {
+            const value = translateValue[index];
+            if (value === undefined) {
+                throw new TypeError(`All translate values must have the same number of pixel values, but got ${firstValueLength} and ${translateValue.length}`);
+            }
+            outputValues.push(value);
+        }
+        const interpolatedValue = (0, interpolate_js_1.interpolate)(input, inputRange, outputValues, options);
+        return `${interpolatedValue}px`;
+    })
+        .join(' ');
+};
+exports.interpolateTranslate = interpolateTranslate;

dist/cjs/animated-image/AnimatedImage.js

@@ -22,2 +22,3 @@ "use strict";
     from: sequence_field_schema_js_1.fromField,
+    freeze: sequence_field_schema_js_1.freezeField,
     playbackRate: {
@@ -181,2 +182,3 @@ type: 'number',
     Component: AnimatedImageInner,
+    componentIdentity: 'dev.remotion.remotion.AnimatedImage',
     schema: animatedImageSchema,
@@ -183,0 +185,0 @@ supportsEffects: true,

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

@@ -52,2 +52,8 @@ import { type RefObject } from 'react';
     };
+    readonly freeze: {
+        readonly type: "number";
+        readonly default: null;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
     readonly fit: {
@@ -65,3 +71,3 @@ readonly type: "enum";
 };
-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;
@@ -68,0 +74,0 @@ } & CanvasImageCanvasProps & {

dist/cjs/canvas-image/CanvasImage.js

@@ -22,2 +22,3 @@ "use strict";
     from: sequence_field_schema_js_1.fromField,
+    freeze: sequence_field_schema_js_1.freezeField,
     fit: {
@@ -240,3 +241,3 @@ type: 'enum',
 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) {
@@ -250,3 +251,3 @@ throw new Error('No "src" prop was passed to <CanvasImage>.');
     }, []);
-    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 }) }));
 });
@@ -259,2 +260,3 @@ /*
     Component: CanvasImageInner,
+    componentIdentity: 'dev.remotion.remotion.CanvasImage',
     schema: exports.canvasImageSchema,
@@ -261,0 +263,0 @@ supportsEffects: true,

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

@@ -5,3 +5,3 @@ import type React from 'react';
 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'> & {
     /**
@@ -8,0 +8,0 @@ * @deprecated For internal use only.

dist/cjs/CompositionManager.d.ts

@@ -53,2 +53,3 @@ import type { ComponentType, LazyExoticComponent } from 'react';
 };
+export type JsxComponentIdentity = string;
 export type SequenceControls = {
@@ -59,2 +60,3 @@ schema: SequenceSchema;
     supportsEffects: boolean;
+    componentIdentity: JsxComponentIdentity | null;
 };
@@ -61,0 +63,0 @@ export type TSequence = {

dist/cjs/effects/Solid.d.ts

@@ -16,3 +16,3 @@ import React from 'react';
 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 {};

dist/cjs/effects/Solid.js

@@ -28,2 +28,3 @@ "use strict";
     from: sequence_field_schema_js_1.fromField,
+    freeze: sequence_field_schema_js_1.freezeField,
     color: {
@@ -144,3 +145,3 @@ type: 'color',
 };
-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;
@@ -153,6 +154,7 @@ props;
     }, []);
-    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,
@@ -159,0 +161,0 @@ supportsEffects: true,

dist/cjs/HtmlInCanvas.js

@@ -299,2 +299,3 @@ "use strict";
     from: sequence_field_schema_js_1.fromField,
+    freeze: sequence_field_schema_js_1.freezeField,
     ...sequence_field_schema_js_1.sequenceVisualStyleSchema,
@@ -305,2 +306,3 @@ hidden: sequence_field_schema_js_1.hiddenField,
     Component: HtmlInCanvasInner,
+    componentIdentity: 'dev.remotion.remotion.HtmlInCanvas',
     schema: htmlInCanvasSchema,
@@ -307,0 +309,0 @@ supportsEffects: true,

dist/cjs/Img.d.ts

@@ -19,3 +19,3 @@ import React from 'react';
     readonly stack?: string;
-} & Pick<SequenceProps, 'durationInFrames' | 'from' | 'hidden'>;
+} & Pick<SequenceProps, 'durationInFrames' | 'from' | 'freeze' | 'hidden'>;
 export declare const imgSchema: {
@@ -69,2 +69,8 @@ readonly 'style.transformOrigin': {
     };
+    readonly freeze: {
+        readonly type: "number";
+        readonly default: null;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
     readonly hidden: import("./sequence-field-schema.js").SequenceFieldSchema;
@@ -86,3 +92,3 @@ };
     readonly stack?: string | undefined;
-} & Pick<SequenceProps, "durationInFrames" | "from" | "hidden">>;
+} & Pick<SequenceProps, "durationInFrames" | "freeze" | "from" | "hidden">>;
 export {};

dist/cjs/Img.js

@@ -186,7 +186,7 @@ "use strict";
 };
-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 }) }));
 };
@@ -197,2 +197,3 @@ const CanvasImageWithPrivateProps = index_js_1.CanvasImage;
     from: sequence_field_schema_js_1.fromField,
+    freeze: sequence_field_schema_js_1.freezeField,
     ...sequence_field_schema_js_1.sequenceVisualStyleSchema,
@@ -240,7 +241,7 @@ hidden: sequence_field_schema_js_1.hiddenField,
 };
-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 }));
     }
@@ -260,3 +261,3 @@ if (!src) {
     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 }));
 };
@@ -269,2 +270,3 @@ /*
     Component: ImgInner,
+    componentIdentity: 'dev.remotion.remotion.Img',
     schema: exports.imgSchema,
@@ -271,0 +273,0 @@ supportsEffects: true,

dist/cjs/index.d.ts

 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';
@@ -185,2 +185,2 @@ import { type TFolder } from './Folder.js';
 };
-export type { AnyComposition, ArrayFieldSchema, ArrayItemFieldSchema, DelayRenderScope, LoopDisplay, SequenceControls, SequenceFieldSchema, SequenceSchema, UseBufferState, };
+export type { AnyComposition, ArrayFieldSchema, ArrayItemFieldSchema, DelayRenderScope, JsxComponentIdentity, LoopDisplay, SequenceControls, SequenceFieldSchema, SequenceSchema, UseBufferState, };

dist/cjs/Interactive.d.ts

@@ -7,3 +7,3 @@ import React from 'react';
 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'> & {
     /**
@@ -10,0 +10,0 @@ * @deprecated For internal use only

dist/cjs/Interactive.js

@@ -46,2 +46,3 @@ "use strict";
     from: sequence_field_schema_js_1.fromField,
+    freeze: sequence_field_schema_js_1.freezeField,
     ...sequence_field_schema_js_1.sequenceVisualStyleSchema,
@@ -60,3 +61,3 @@ hidden: sequence_field_schema_js_1.hiddenField,
     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);
@@ -67,3 +68,3 @@ const callbackRef = (0, react_1.useCallback)((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,
@@ -76,2 +77,3 @@ ref: callbackRef,
         Component: Inner,
+        componentIdentity: `dev.remotion.remotion.${displayName.slice(1, -1)}`,
         schema: interactiveElementSchema,
@@ -78,0 +80,0 @@ supportsEffects: false,

dist/cjs/internals.d.ts

@@ -5,3 +5,3 @@ import type { ScheduleAudioNodeResult } from './audio/shared-audio-tags.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';
@@ -81,6 +81,7 @@ import * as CSSUtils from './default-css.js';
     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;
@@ -98,2 +99,8 @@ supportsEffects: boolean;
         };
+        readonly freeze: {
+            readonly type: "number";
+            readonly default: null;
+            readonly step: 1;
+            readonly hiddenFromList: true;
+        };
         readonly durationInFrames: {
@@ -745,2 +752,8 @@ readonly type: "number";
     };
+    readonly freezeField: {
+        readonly type: "number";
+        readonly default: null;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
     readonly fromField: {
@@ -753,2 +766,2 @@ readonly type: "number";
 };
-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, };

dist/cjs/internals.js

@@ -265,3 +265,4 @@ "use strict";
     durationInFramesField: sequence_field_schema_js_1.durationInFramesField,
+    freezeField: sequence_field_schema_js_1.freezeField,
     fromField: sequence_field_schema_js_1.fromField,
 };

dist/cjs/no-react.d.ts

@@ -73,2 +73,8 @@ export type { ArtifactAsset, AudioOrVideoAsset, InlineAudioAsset, TRenderAsset, } from './CompositionManager';
         };
+        readonly freeze: {
+            readonly type: "number";
+            readonly default: null;
+            readonly step: 1;
+            readonly hiddenFromList: true;
+        };
         readonly durationInFrames: {
@@ -75,0 +81,0 @@ readonly type: "number";

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

@@ -10,3 +10,3 @@ export type HiddenFieldSchema = {
     step?: number;
-    default: number | undefined;
+    default: number | null | undefined;
     description?: string;
@@ -246,2 +246,8 @@ hiddenFromList: boolean;
 };
+export declare const freezeField: {
+    readonly type: "number";
+    readonly default: null;
+    readonly step: 1;
+    readonly hiddenFromList: true;
+};
 export declare const sequenceSchema: {
@@ -256,2 +262,8 @@ readonly hidden: BooleanFieldSchema;
     };
+    readonly freeze: {
+        readonly type: "number";
+        readonly default: null;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
     readonly durationInFrames: {
@@ -335,2 +347,8 @@ readonly type: "number";
     readonly showInTimeline: HiddenFieldSchema;
+    readonly freeze: {
+        readonly type: "number";
+        readonly default: null;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
     readonly durationInFrames: {
@@ -337,0 +355,0 @@ readonly type: "number";

dist/cjs/sequence-field-schema.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sequenceSchemaDefaultLayoutNone = exports.sequenceSchemaWithoutFrom = exports.sequenceSchema = exports.fromField = exports.durationInFramesField = exports.extendSchemaWithSequenceName = exports.sequenceNameField = exports.hiddenField = exports.sequenceStyleSchema = exports.sequencePremountSchema = exports.sequenceVisualStyleSchema = void 0;
+exports.sequenceSchemaDefaultLayoutNone = exports.sequenceSchemaWithoutFrom = exports.sequenceSchema = exports.freezeField = exports.fromField = exports.durationInFramesField = exports.extendSchemaWithSequenceName = exports.sequenceNameField = exports.hiddenField = exports.sequenceStyleSchema = exports.sequencePremountSchema = exports.sequenceVisualStyleSchema = void 0;
 exports.sequenceVisualStyleSchema = {
@@ -98,2 +98,8 @@ 'style.transformOrigin': {
 };
+exports.freezeField = {
+    type: 'number',
+    default: null,
+    step: 1,
+    hiddenFromList: true,
+};
 exports.sequenceSchema = (0, exports.extendSchemaWithSequenceName)({
@@ -103,2 +109,3 @@ hidden: exports.hiddenField,
     from: exports.fromField,
+    freeze: exports.freezeField,
     durationInFrames: exports.durationInFramesField,
@@ -118,2 +125,3 @@ layout: {
     showInTimeline: showInTimelineField,
+    freeze: exports.freezeField,
     durationInFrames: exports.durationInFramesField,
@@ -120,0 +128,0 @@ layout: exports.sequenceSchema.layout,

dist/cjs/Sequence.d.ts

@@ -22,2 +22,3 @@ import React from 'react';
     readonly from?: number;
+    readonly freeze?: number | null;
     readonly name?: string;
@@ -24,0 +25,0 @@ readonly showInTimeline?: boolean;

dist/cjs/Sequence.js

@@ -22,3 +22,3 @@ "use strict";
 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) => {
+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;
@@ -55,2 +55,13 @@ const { layout = 'absolute-fill' } = other;
     }
+    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)();
@@ -63,2 +74,6 @@ const videoConfig = (0, use_video_config_js_1.useVideoConfig)();
     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)(() => {
@@ -254,3 +269,13 @@ // || is intentional, ?? would not trigger on `false`
             : 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)(() => {
@@ -270,3 +295,3 @@ return {
     }
-    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 })) }));
 };
@@ -334,2 +359,3 @@ const RegularSequence = (0, react_1.forwardRef)(RegularSequenceRefForwardingFunction);
     Component: SequenceInner,
+    componentIdentity: 'dev.remotion.remotion.Sequence',
     schema: sequence_field_schema_js_1.sequenceSchema,
@@ -340,4 +366,5 @@ supportsEffects: false,
     Component: SequenceInner,
+    componentIdentity: null,
     schema: sequence_field_schema_js_1.sequenceSchemaWithoutFrom,
     supportsEffects: false,
 });

dist/cjs/series/index.d.ts

@@ -7,3 +7,3 @@ import React, { type PropsWithChildren } from 'react';
     readonly className?: string;
-} & Pick<SequenceProps, 'layout' | 'name' | 'hidden' | 'showInTimeline'> & LayoutAndStyle>;
+} & Pick<SequenceProps, 'layout' | 'name' | 'hidden' | 'showInTimeline' | 'freeze'> & LayoutAndStyle>;
 declare const SeriesSequence: React.ForwardRefExoticComponent<SeriesSequenceProps & React.RefAttributes<HTMLDivElement>>;
@@ -10,0 +10,0 @@ type SeriesProps = SequenceProps;

dist/cjs/series/index.js

@@ -70,2 +70,3 @@ "use strict";
     Component: SeriesInner,
+    componentIdentity: 'dev.remotion.remotion.Series',
     schema: sequence_field_schema_js_1.sequenceSchemaDefaultLayoutNone,
@@ -72,0 +73,0 @@ supportsEffects: false,

dist/cjs/version.d.ts

@@ -6,2 +6,2 @@ /**
  */
-export declare const VERSION = "4.0.476";
+export declare const VERSION = "4.0.477";

dist/cjs/version.js

@@ -10,2 +10,2 @@ "use strict";
  */
-exports.VERSION = '4.0.476';
+exports.VERSION = '4.0.477';

dist/cjs/wrap-in-schema.d.ts

@@ -13,8 +13,9 @@ import React from 'react';
 }) => Record<string, unknown>;
-export declare const wrapInSchema: <S extends SequenceSchema, Props extends object>({ Component, schema, supportsEffects, }: {
+export declare const wrapInSchema: <S extends SequenceSchema, Props extends object>({ Component, componentIdentity, schema, supportsEffects, }: {
     Component: React.ComponentType<Props & {
         readonly _experimentalControls: SequenceControls | undefined;
     }>;
+    componentIdentity: string | null;
     schema: S;
     supportsEffects: boolean;
 }) => React.ComponentType<Props>;

dist/cjs/wrap-in-schema.js

@@ -101,3 +101,3 @@ "use strict";
 const stackToOverrideMap = {};
-const wrapInSchema = ({ Component, schema, supportsEffects, }) => {
+const wrapInSchema = ({ Component, componentIdentity, schema, supportsEffects, }) => {
     // Schema is static for a component, so we move this outside
@@ -164,2 +164,3 @@ const schemaWithSequenceName = (0, sequence_field_schema_js_1.extendSchemaWithSequenceName)(schema);
                 supportsEffects,
+                componentIdentity,
             };
@@ -166,0 +167,0 @@ }, [currentRuntimeValueDotNotation, overrideId]);

dist/esm/no-react.mjs

@@ -1235,2 +1235,8 @@ // src/normalize-number.ts
 };
+var freezeField = {
+  type: "number",
+  default: null,
+  step: 1,
+  hiddenFromList: true
+};
 var sequenceSchema = extendSchemaWithSequenceName({
@@ -1240,2 +1246,3 @@ hidden: hiddenField,
   from: fromField,
+  freeze: freezeField,
   durationInFrames: durationInFramesField,
@@ -1255,2 +1262,3 @@ layout: {
   showInTimeline: showInTimelineField,
+  freeze: freezeField,
   durationInFrames: durationInFramesField,
@@ -1257,0 +1265,0 @@ layout: sequenceSchema.layout

dist/esm/version.mjs

 // src/version.ts
-var VERSION = "4.0.476";
+var VERSION = "4.0.477";
 export {
   VERSION
 };

package.json

@@ -6,3 +6,3 @@ {
 	"name": "remotion",
-	"version": "4.0.476",
+	"version": "4.0.477",
 	"description": "Make videos programmatically",
@@ -39,3 +39,3 @@ "main": "dist/cjs/index.js",
 		"zod": "4.3.6",
-		"@remotion/eslint-config-internal": "4.0.476",
+		"@remotion/eslint-config-internal": "4.0.477",
 		"eslint": "9.19.0",
@@ -42,0 +42,0 @@ "@typescript/native-preview": "7.0.0-dev.20260217.1"

New alerts

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Fixed alerts

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Improved metrics

Total package byte prevSize

1220006

0.85%

Number of package files

381

0.53%

Lines of code

31261

0.82%

No dependency changes