remotion 4.0.475 → 4.0.477

package/dist/cjs/CompositionManager.d.ts

@@ -50,11 +50,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;

package/dist/cjs/HtmlInCanvas.js

@@ -290,19 +290,19 @@ const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = []
                 node;
         }
     }, [ref]);
-    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { durationInFrames: resolvedDuration, name: name !== null && name !== void 0 ? name : '<HtmlInCanvas>', _remotionInternalDocumentationLink: name === undefined
-            ? 'https://www.remotion.dev/docs/remotion/html-in-canvas'
-            : undefined, _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalRefForOutline: actualRef, layout: "none", ...sequenceProps, children: jsx_runtime_1.jsx(HtmlInCanvasContent, { ref: setCanvasRef, width: width, height: height, effects: effects, onPaint: onPaint, onInit: onInit, pixelDensity: pixelDensity, controls: controls, style: style, children: children }) }));
+    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { durationInFrames: resolvedDuration, name: name !== null && name !== void 0 ? name : '<HtmlInCanvas>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/remotion/html-in-canvas", _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalRefForOutline: actualRef, layout: "none", ...sequenceProps, children: jsx_runtime_1.jsx(HtmlInCanvasContent, { ref: setCanvasRef, width: width, height: height, effects: effects, onPaint: onPaint, onInit: onInit, pixelDensity: pixelDensity, controls: controls, style: style, children: children }) }));
 });
 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: name === undefined ? 'https://www.remotion.dev/docs/img' : undefined, _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: name === undefined ? 'https://www.remotion.dev/docs/img' : undefined, _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, _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;
+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;
     const { layout = 'absolute-fill' } = other;
     const [id] = (0, react_1.useState)(() => String(Math.random()));
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
@@ -28,6 +28,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
     const cumulatedFrom = parentSequence
         ? parentSequence.cumulatedFrom + parentSequence.relativeFrom
         : 0;
+    const absoluteFrom = ((_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.absoluteFrom) !== null && _a !== void 0 ? _a : 0) + from;
     const nonce = (0, nonce_js_1.useNonce)();
     if (layout !== 'absolute-fill' && layout !== 'none') {
         throw new TypeError(`The layout prop of <Sequence /> expects either "absolute-fill" or "none", but you passed: ${layout}`);
@@ -50,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
@@ -57,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) ||
@@ -92,6 +108,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
     const contextValue = (0, react_1.useMemo)(() => {
         var _a, _b, _c;
         return {
+            absoluteFrom,
             cumulatedFrom,
             relativeFrom: from,
             cumulatedNegativeFrom,
@@ -107,6 +124,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
         };
     }, [
         cumulatedFrom,
+        absoluteFrom,
         from,
         actualDurationInFrames,
         parentSequence,
@@ -122,10 +140,10 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
     const timelineClipName = (0, react_1.useMemo)(() => {
         return name !== null && name !== void 0 ? name : '';
     }, [name]);
-    const resolvedDocumentationLink = documentationLink !== null && documentationLink !== void 0 ? documentationLink : (name === undefined ? 'https://www.remotion.dev/docs/sequence' : null);
+    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 = (_a = other === null || other === void 0 ? void 0 : other.stack) !== null && _a !== void 0 ? _a : null;
+    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);
@@ -245,7 +263,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,
@@ -260,7 +288,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) => {
@@ -323,11 +351,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/SequenceContext.d.ts

@@ -1,5 +1,6 @@
 export declare const SequenceContext: import("react").Context<SequenceContextType | null>;
 export type SequenceContextType = {
+    absoluteFrom: number;
     cumulatedFrom: number;
     cumulatedNegativeFrom: number;
     relativeFrom: number;

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/audio/AudioForPreview.js

@@ -134,7 +134,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         premountDisplay: (_a = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premountDisplay) !== null && _a !== void 0 ? _a : null,
         postmountDisplay: (_b = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmountDisplay) !== null && _b !== void 0 ? _b : null,
         loopDisplay: undefined,
-        documentationLink: name === undefined ? 'https://www.remotion.dev/docs/html5-audio' : null,
+        documentationLink: 'https://www.remotion.dev/docs/html5-audio',
         refForOutline: null,
     });
     // putting playback before useVolume

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/easing.d.ts

@@ -1,3 +1,5 @@
+import type { SpringConfig } from './spring/spring-utils.js';
+export type EasingSpringConfig = Partial<Pick<SpringConfig, 'damping' | 'mass' | 'stiffness' | 'overshootClamping'>>;
 /**
  * @description The Easing module implements common easing functions. You can use it with the interpolate() API.
  * @see [Documentation](https://www.remotion.dev/docs/easing)
@@ -15,6 +17,7 @@ export declare class Easing {
     static exp(t: number): number;
     static elastic(bounciness?: number): (t: number) => number;
     static back(s?: number): (t: number) => number;
+    static spring(config?: EasingSpringConfig): (t: number) => number;
     static bounce(t: number): number;
     static bezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number;
     static in(easing: (t: number) => number): (t: number) => number;

package/dist/cjs/easing.js

@@ -3,10 +3,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Easing = void 0;
 const bezier_js_1 = require("./bezier.js");
+const index_js_1 = require("./spring/index.js");
 // Some easing curves are only defined on [0, 1] (e.g. quarter circle, bounce segments).
 // `interpolate(..., { extrapolate: 'extend' })` can pass values outside that interval; clamp
 // there so we return endpoints instead of NaN or unintended extrapolation.
 const clampUnit = (t) => Math.min(1, Math.max(0, t));
+const springEasingDurationInFrames = 30;
 /**
  * @description The Easing module implements common easing functions. You can use it with the interpolate() API.
  * @see [Documentation](https://www.remotion.dev/docs/easing)
@@ -50,6 +52,22 @@ class Easing {
     static back(s = 1.70158) {
         return (t) => t * t * ((s + 1) * t - s);
     }
+    static spring(config = {}) {
+        return (t) => {
+            if (t <= 0) {
+                return 0;
+            }
+            if (t >= 1) {
+                return 1;
+            }
+            return (0, index_js_1.spring)({
+                fps: springEasingDurationInFrames,
+                frame: t * springEasingDurationInFrames,
+                config,
+                durationInFrames: springEasingDurationInFrames,
+            });
+        };
+    }
     static bounce(t) {
         const u = clampUnit(t);
         if (u < 1 / 2.75) {

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: name === undefined ? 'https://www.remotion.dev/docs/solid' : undefined, ...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,21 +77,29 @@ 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>;
     readonly sequenceSchema: {
         readonly hidden: import("./sequence-field-schema.js").BooleanFieldSchema;
+        readonly showInTimeline: import("./sequence-field-schema.js").HiddenFieldSchema;
         readonly from: {
             readonly type: "number";
             readonly default: 0;
             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;
@@ -164,6 +172,8 @@ export declare const Internals: {
                 readonly none: {};
             };
         };
+    } & {
+        name: SequenceFieldSchema;
     };
     readonly SequenceWithoutSchema: import("react").ForwardRefExoticComponent<import("./Sequence.js").SequenceProps & import("react").RefAttributes<HTMLDivElement>>;
     readonly sequenceStyleSchema: {
@@ -736,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;
@@ -743,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/interpolate-translate.d.ts

@@ -0,0 +1,8 @@
+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;