remotion 4.0.496 → 4.0.497

package/dist/cjs/HtmlInCanvas.d.ts

@@ -100,6 +100,41 @@ export declare const htmlInCanvasSchema: {
         readonly description: "Opacity";
         readonly hiddenFromList: false;
     };
+    readonly 'style.borderWidth': {
+        readonly type: "number";
+        readonly default: undefined;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Border width";
+        readonly hiddenFromList: false;
+    };
+    readonly 'style.borderStyle': {
+        readonly type: "enum";
+        readonly default: "none";
+        readonly description: "Border style";
+        readonly variants: {
+            readonly none: {};
+            readonly hidden: {};
+            readonly solid: {};
+            readonly dashed: {};
+            readonly dotted: {};
+            readonly double: {};
+            readonly groove: {};
+            readonly ridge: {};
+            readonly inset: {};
+            readonly outset: {};
+        };
+    };
+    readonly 'style.borderColor': {
+        readonly type: "color";
+        readonly default: undefined;
+        readonly description: "Border color";
+    };
+    readonly 'style.backgroundColor': {
+        readonly type: "color";
+        readonly default: "transparent";
+        readonly description: "Color";
+    };
     readonly durationInFrames: {
         readonly type: "number";
         readonly default: undefined;

package/dist/cjs/HtmlInCanvas.js

@@ -382,6 +382,8 @@ exports.htmlInCanvasSchema = {
         hiddenFromList: false,
     },
     ...interactivity_schema_js_1.transformSchema,
+    ...interactivity_schema_js_1.backgroundSchema,
+    ...interactivity_schema_js_1.borderSchema,
 };
 const HtmlInCanvasWrapped = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
     Component: HtmlInCanvasInner,

package/dist/cjs/Img.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { EffectsProp } from './effects/effect-types.js';
-import type { InteractiveBaseProps } from './Interactive.js';
+import type { InteractiveBaseProps, InteractivePremountProps } from './Interactive.js';
 type NativeImgProps = Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'src'>;
 export type ImgProps = NativeImgProps & {
     readonly maxRetries?: number;
@@ -16,7 +16,7 @@ export type ImgProps = NativeImgProps & {
      * @deprecated For internal use only
      */
     readonly stack?: string;
-} & InteractiveBaseProps;
+} & InteractiveBaseProps & InteractivePremountProps;
 export declare const imgSchema: {
     readonly 'style.transformOrigin': {
         readonly type: "transform-origin";
@@ -53,6 +53,58 @@ export declare const imgSchema: {
         readonly description: "Opacity";
         readonly hiddenFromList: false;
     };
+    readonly 'style.borderWidth': {
+        readonly type: "number";
+        readonly default: undefined;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Border width";
+        readonly hiddenFromList: false;
+    };
+    readonly 'style.borderStyle': {
+        readonly type: "enum";
+        readonly default: "none";
+        readonly description: "Border style";
+        readonly variants: {
+            readonly none: {};
+            readonly hidden: {};
+            readonly solid: {};
+            readonly dashed: {};
+            readonly dotted: {};
+            readonly double: {};
+            readonly groove: {};
+            readonly ridge: {};
+            readonly inset: {};
+            readonly outset: {};
+        };
+    };
+    readonly 'style.borderColor': {
+        readonly type: "color";
+        readonly default: undefined;
+        readonly description: "Border color";
+    };
+    readonly 'style.backgroundColor': {
+        readonly type: "color";
+        readonly default: "transparent";
+        readonly description: "Color";
+    };
+    readonly premountFor: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Premount For";
+        readonly min: 0;
+        readonly step: 1;
+        readonly hiddenFromList: false;
+        readonly keyframable: false;
+    };
+    readonly postmountFor: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+        readonly keyframable: false;
+    };
     readonly durationInFrames: {
         readonly type: "number";
         readonly default: undefined;
@@ -103,5 +155,5 @@ export declare const Img: React.ComponentType<NativeImgProps & {
      * @deprecated For internal use only
      */
     readonly stack?: string | undefined;
-} & InteractiveBaseProps>;
+} & InteractiveBaseProps & InteractivePremountProps>;
 export {};

package/dist/cjs/Img.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const index_js_1 = require("./canvas-image/index.js");
 const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
+const freeze_js_1 = require("./freeze.js");
 const get_cross_origin_value_js_1 = require("./get-cross-origin-value.js");
 const interactivity_schema_js_1 = require("./interactivity-schema.js");
 const prefetch_js_1 = require("./prefetch.js");
@@ -13,6 +14,7 @@ const SequenceContext_js_1 = require("./SequenceContext.js");
 const truncate_src_for_label_js_1 = require("./truncate-src-for-label.js");
 const use_buffer_state_js_1 = require("./use-buffer-state.js");
 const use_delay_render_js_1 = require("./use-delay-render.js");
+const use_premounting_js_1 = require("./use-premounting.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js");
 function exponentialBackoff(errorCount) {
@@ -192,11 +194,21 @@ const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRende
     // blocks frame rendering.
     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, trimBefore, durationInFrames, freeze, controls, outlineRef: refForOutline, ...props }) => {
+const NativeImgInner = ({ hidden, name, stack, showInTimeline, src, from, trimBefore, durationInFrames, freeze, premountFor, postmountFor, style, styleWhilePremounted, styleWhilePostmounted, controls, outlineRef: 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, trimBefore: trimBefore, 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>', controls: controls, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, hidden: hidden, outlineRef: refForOutline, children: jsx_runtime_1.jsx(ImgContent, { src: src, refForOutline: refForOutline, ...props }) }));
+    const { effectivePostmountFor, effectivePremountFor, freezeFrame, isPremountingOrPostmounting, postmountingActive, premountingActive, premountingStyle, } = (0, use_premounting_js_1.usePremounting)({
+        from: from !== null && from !== void 0 ? from : 0,
+        durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity,
+        premountFor: premountFor !== null && premountFor !== void 0 ? premountFor : null,
+        postmountFor: postmountFor !== null && postmountFor !== void 0 ? postmountFor : null,
+        style: style !== null && style !== void 0 ? style : null,
+        styleWhilePremounted: styleWhilePremounted !== null && styleWhilePremounted !== void 0 ? styleWhilePremounted : null,
+        styleWhilePostmounted: styleWhilePostmounted !== null && styleWhilePostmounted !== void 0 ? styleWhilePostmounted : null,
+        hideWhilePremounted: 'display-none',
+    });
+    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, freeze: freeze, _remotionInternalStack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _remotionInternalIsMedia: { type: 'image', src }, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, name: name !== null && name !== void 0 ? name : '<Img>', controls: controls, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, hidden: hidden, outlineRef: refForOutline, children: jsx_runtime_1.jsx(ImgContent, { src: src, refForOutline: refForOutline, style: premountingStyle !== null && premountingStyle !== void 0 ? premountingStyle : undefined, ...props }) }) }));
 };
 const CanvasImageWithPrivateProps = index_js_1.CanvasImage;
 exports.imgSchema = {
@@ -207,7 +219,10 @@ exports.imgSchema = {
         keyframable: false,
     },
     ...interactivity_schema_js_1.baseSchema,
+    ...interactivity_schema_js_1.premountSchema,
     ...interactivity_schema_js_1.transformSchema,
+    ...interactivity_schema_js_1.backgroundSchema,
+    ...interactivity_schema_js_1.borderSchema,
 };
 const imgCanvasFallbackIncompatibleProps = new Set([
     'alt',
@@ -248,11 +263,11 @@ const getFitFromObjectFit = (style) => {
     }
     return undefined;
 };
-const ImgInner = ({ effects = [], ref, hidden, name, stack, showInTimeline, src, from, trimBefore, durationInFrames, freeze, controls, width, height, className, style, id, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...props }) => {
+const ImgInner = ({ effects = [], ref, hidden, name, stack, showInTimeline, src, from, trimBefore, durationInFrames, freeze, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, 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, trimBefore: trimBefore, durationInFrames: durationInFrames, freeze: freeze, controls: controls, width: width, height: height, className: className, style: style, id: id, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, outlineRef: refForOutline }));
+        return (jsx_runtime_1.jsx(NativeImgInner, { ...props, ref: ref, hidden: hidden, name: name, stack: stack, showInTimeline: showInTimeline, src: src, from: from, trimBefore: trimBefore, durationInFrames: durationInFrames, freeze: freeze, premountFor: premountFor, postmountFor: postmountFor, styleWhilePremounted: styleWhilePremounted, styleWhilePostmounted: styleWhilePostmounted, controls: controls, width: width, height: height, className: className, style: style, id: id, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, outlineRef: refForOutline }));
     }
     if (!src) {
         throw new Error('No "src" prop was passed to <Img>.');
@@ -267,7 +282,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, trimBefore: trimBefore, 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", controls: controls, outlineRef: 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, trimBefore: trimBefore, durationInFrames: durationInFrames, freeze: freeze, premountFor: premountFor, postmountFor: postmountFor, styleWhilePremounted: styleWhilePremounted, styleWhilePostmounted: styleWhilePostmounted, hidden: hidden, name: name !== null && name !== void 0 ? name : '<Img>', showInTimeline: showInTimeline, stack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", controls: controls, outlineRef: 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.

package/dist/cjs/Interactive.d.ts

@@ -167,6 +167,45 @@ export declare const Interactive: {
             readonly hiddenFromList: false;
         };
     };
+    backgroundSchema: {
+        readonly 'style.backgroundColor': {
+            readonly type: "color";
+            readonly default: "transparent";
+            readonly description: "Color";
+        };
+    };
+    borderSchema: {
+        readonly 'style.borderWidth': {
+            readonly type: "number";
+            readonly default: undefined;
+            readonly min: 0;
+            readonly step: 1;
+            readonly description: "Border width";
+            readonly hiddenFromList: false;
+        };
+        readonly 'style.borderStyle': {
+            readonly type: "enum";
+            readonly default: "none";
+            readonly description: "Border style";
+            readonly variants: {
+                readonly none: {};
+                readonly hidden: {};
+                readonly solid: {};
+                readonly dashed: {};
+                readonly dotted: {};
+                readonly double: {};
+                readonly groove: {};
+                readonly ridge: {};
+                readonly inset: {};
+                readonly outset: {};
+            };
+        };
+        readonly 'style.borderColor': {
+            readonly type: "color";
+            readonly default: undefined;
+            readonly description: "Border color";
+        };
+    };
     premountSchema: {
         readonly premountFor: {
             readonly type: "number";
@@ -257,6 +296,41 @@ export declare const Interactive: {
                         readonly description: "Opacity";
                         readonly hiddenFromList: false;
                     };
+                    readonly 'style.borderWidth': {
+                        readonly type: "number";
+                        readonly default: undefined;
+                        readonly min: 0;
+                        readonly step: 1;
+                        readonly description: "Border width";
+                        readonly hiddenFromList: false;
+                    };
+                    readonly 'style.borderStyle': {
+                        readonly type: "enum";
+                        readonly default: "none";
+                        readonly description: "Border style";
+                        readonly variants: {
+                            readonly none: {};
+                            readonly hidden: {};
+                            readonly solid: {};
+                            readonly dashed: {};
+                            readonly dotted: {};
+                            readonly double: {};
+                            readonly groove: {};
+                            readonly ridge: {};
+                            readonly inset: {};
+                            readonly outset: {};
+                        };
+                    };
+                    readonly 'style.borderColor': {
+                        readonly type: "color";
+                        readonly default: undefined;
+                        readonly description: "Border color";
+                    };
+                    readonly 'style.backgroundColor': {
+                        readonly type: "color";
+                        readonly default: "transparent";
+                        readonly description: "Color";
+                    };
                     readonly premountFor: {
                         readonly type: "number";
                         readonly default: 0;
@@ -274,12 +348,6 @@ export declare const Interactive: {
                         readonly hiddenFromList: true;
                         readonly keyframable: false;
                     };
-                    readonly styleWhilePremounted: {
-                        readonly type: "hidden";
-                    };
-                    readonly styleWhilePostmounted: {
-                        readonly type: "hidden";
-                    };
                 };
                 readonly none: {};
             };

package/dist/cjs/Interactive.js

@@ -59,7 +59,20 @@ const interactiveElementSchema = {
     ...interactivity_schema_js_1.baseSchema,
     ...interactivity_schema_js_1.transformSchema,
 };
+const interactiveBackgroundElementSchema = {
+    ...interactiveElementSchema,
+    ...interactivity_schema_js_1.backgroundSchema,
+};
+const interactiveBorderElementSchema = {
+    ...interactiveBackgroundElementSchema,
+    ...interactivity_schema_js_1.borderSchema,
+};
 const interactiveTextElementSchema = {
+    ...interactiveBorderElementSchema,
+    ...interactivity_schema_js_1.textSchema,
+    ...interactivity_schema_js_1.textContentSchema,
+};
+const interactiveSvgTextElementSchema = {
     ...interactiveElementSchema,
     ...interactivity_schema_js_1.textSchema,
     ...interactivity_schema_js_1.textContentSchema,
@@ -117,6 +130,8 @@ exports.Interactive = {
     baseSchema: interactivity_schema_js_1.baseSchema,
     transformSchema: interactivity_schema_js_1.transformSchema,
     textSchema: interactivity_schema_js_1.textSchema,
+    backgroundSchema: interactivity_schema_js_1.backgroundSchema,
+    borderSchema: interactivity_schema_js_1.borderSchema,
     premountSchema: interactivity_schema_js_1.premountSchema,
     sequenceSchema: interactivity_schema_js_1.sequenceSchema,
     withSchema,
@@ -153,7 +168,7 @@ exports.Interactive = {
     Small: makeInteractiveTextElement('small', '<Interactive.Small>'),
     Span: makeInteractiveTextElement('span', '<Interactive.Span>'),
     Strong: makeInteractiveTextElement('strong', '<Interactive.Strong>'),
-    Svg: makeInteractiveNonTextElement('svg', '<Interactive.Svg>'),
-    Text: makeInteractiveTextElement('text', '<Interactive.Text>'),
+    Svg: makeInteractiveElement('svg', '<Interactive.Svg>', interactiveBorderElementSchema),
+    Text: makeInteractiveElement('text', '<Interactive.Text>', interactiveSvgTextElementSchema),
     Ul: makeInteractiveTextElement('ul', '<Interactive.Ul>'),
 };

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

@@ -1,7 +1,141 @@
 import type React from 'react';
 import type { SequenceControls } from '../CompositionManager.js';
 import type { EffectsProp } from '../effects/effect-types.js';
-export declare const AnimatedImage: React.ComponentType<import("../Interactive.js").InteractiveBaseProps & {
+export declare const animatedImageSchema: {
+    readonly 'style.transformOrigin': {
+        readonly type: "transform-origin";
+        readonly step: 1;
+        readonly default: "50% 50%";
+        readonly description: "Transform origin";
+    };
+    readonly 'style.translate': {
+        readonly type: "translate";
+        readonly step: 1;
+        readonly default: "0px 0px";
+        readonly description: "Offset";
+    };
+    readonly 'style.scale': {
+        readonly type: "scale";
+        readonly max: 100;
+        readonly step: 0.01;
+        readonly default: 1;
+        readonly description: "Scale";
+        readonly defaultKeyframeOutput: "perceptual-scale";
+    };
+    readonly 'style.rotate': {
+        readonly type: "rotation-css";
+        readonly step: 1;
+        readonly default: "0deg";
+        readonly description: "Rotation";
+    };
+    readonly 'style.opacity': {
+        readonly type: "number";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly default: 1;
+        readonly description: "Opacity";
+        readonly hiddenFromList: false;
+    };
+    readonly 'style.borderWidth': {
+        readonly type: "number";
+        readonly default: undefined;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Border width";
+        readonly hiddenFromList: false;
+    };
+    readonly 'style.borderStyle': {
+        readonly type: "enum";
+        readonly default: "none";
+        readonly description: "Border style";
+        readonly variants: {
+            readonly none: {};
+            readonly hidden: {};
+            readonly solid: {};
+            readonly dashed: {};
+            readonly dotted: {};
+            readonly double: {};
+            readonly groove: {};
+            readonly ridge: {};
+            readonly inset: {};
+            readonly outset: {};
+        };
+    };
+    readonly 'style.borderColor': {
+        readonly type: "color";
+        readonly default: undefined;
+        readonly description: "Border color";
+    };
+    readonly 'style.backgroundColor': {
+        readonly type: "color";
+        readonly default: "transparent";
+        readonly description: "Color";
+    };
+    readonly premountFor: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Premount For";
+        readonly min: 0;
+        readonly step: 1;
+        readonly hiddenFromList: false;
+        readonly keyframable: false;
+    };
+    readonly postmountFor: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+        readonly keyframable: false;
+    };
+    readonly durationInFrames: {
+        readonly type: "number";
+        readonly default: undefined;
+        readonly min: 1;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
+    readonly from: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
+    readonly trimBefore: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
+    readonly freeze: {
+        readonly type: "number";
+        readonly default: null;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
+    readonly hidden: import("../interactivity-schema.js").BooleanFieldSchema;
+    readonly name: import("../interactivity-schema.js").HiddenFieldSchema;
+    readonly showInTimeline: import("../interactivity-schema.js").HiddenFieldSchema;
+    readonly src: {
+        readonly type: "asset";
+        readonly default: undefined;
+        readonly description: "Source";
+        readonly keyframable: false;
+    };
+    readonly playbackRate: {
+        readonly type: "number";
+        readonly min: 0;
+        readonly max: 10;
+        readonly step: 0.1;
+        readonly default: 1;
+        readonly description: "Playback rate";
+        readonly hiddenFromList: false;
+        readonly keyframable: false;
+    };
+};
+export declare const AnimatedImage: React.ComponentType<import("../Interactive.js").InteractiveBaseProps & import("../Interactive.js").InteractivePremountProps & {
     src: string;
     width?: number | undefined;
     height?: number | undefined;

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

@@ -1,15 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AnimatedImage = void 0;
+exports.AnimatedImage = exports.animatedImageSchema = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const cancel_render_js_1 = require("../cancel-render.js");
 const use_memoized_effects_js_1 = require("../effects/use-memoized-effects.js");
 const enable_sequence_stack_traces_js_1 = require("../enable-sequence-stack-traces.js");
+const freeze_js_1 = require("../freeze.js");
 const interactivity_schema_js_1 = require("../interactivity-schema.js");
 const Sequence_js_1 = require("../Sequence.js");
 const use_current_frame_js_1 = require("../use-current-frame.js");
 const use_delay_render_js_1 = require("../use-delay-render.js");
+const use_premounting_js_1 = require("../use-premounting.js");
 const use_video_config_js_1 = require("../use-video-config.js");
 const with_interactivity_schema_js_1 = require("../with-interactivity-schema.js");
 const canvas_1 = require("./canvas");
@@ -17,7 +19,7 @@ const decode_image_js_1 = require("./decode-image.js");
 const get_current_time_js_1 = require("./get-current-time.js");
 const request_init_1 = require("./request-init");
 const resolve_image_source_1 = require("./resolve-image-source");
-const animatedImageSchema = {
+exports.animatedImageSchema = {
     src: {
         type: 'asset',
         default: undefined,
@@ -25,6 +27,7 @@ const animatedImageSchema = {
         keyframable: false,
     },
     ...interactivity_schema_js_1.baseSchema,
+    ...interactivity_schema_js_1.premountSchema,
     playbackRate: {
         type: 'number',
         min: 0,
@@ -36,6 +39,8 @@ const animatedImageSchema = {
         keyframable: false,
     },
     ...interactivity_schema_js_1.transformSchema,
+    ...interactivity_schema_js_1.backgroundSchema,
+    ...interactivity_schema_js_1.borderSchema,
 };
 const getCanvasPropsFromSequenceProps = (props) => {
     const canvasProps = {};
@@ -78,6 +83,15 @@ const AnimatedImageContent = (0, react_1.forwardRef)(({ src, width, height, onEr
     const [initialLoopBehavior] = (0, react_1.useState)(() => loopBehavior);
     (0, react_1.useEffect)(() => {
         const controller = new AbortController();
+        let cancelled = false;
+        let continued = false;
+        const continueRenderOnce = () => {
+            if (continued) {
+                return;
+            }
+            continued = true;
+            continueRender(decodeHandle);
+        };
         (0, decode_image_js_1.decodeImage)({
             resolvedSrc,
             signal: controller.signal,
@@ -86,24 +100,33 @@ const AnimatedImageContent = (0, react_1.forwardRef)(({ src, width, height, onEr
             initialLoopBehavior,
         })
             .then((d) => {
+            if (cancelled) {
+                d.close();
+                return;
+            }
             setImageDecoder(d);
-            continueRender(decodeHandle);
+            continueRenderOnce();
         })
             .catch((err) => {
+            if (cancelled) {
+                return;
+            }
             if (err.name === 'AbortError') {
-                continueRender(decodeHandle);
+                continueRenderOnce();
                 return;
             }
             if (onError) {
                 onError === null || onError === void 0 ? void 0 : onError(err);
-                continueRender(decodeHandle);
+                continueRenderOnce();
             }
             else {
                 (0, cancel_render_js_1.cancelRender)(err);
             }
         });
         return () => {
+            cancelled = true;
             controller.abort();
+            continueRenderOnce();
         };
     }, [
         resolvedSrc,
@@ -113,6 +136,11 @@ const AnimatedImageContent = (0, react_1.forwardRef)(({ src, width, height, onEr
         initialLoopBehavior,
         continueRender,
     ]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            imageDecoder === null || imageDecoder === void 0 ? void 0 : imageDecoder.close();
+        };
+    }, [imageDecoder]);
     (0, react_1.useLayoutEffect)(() => {
         if (!imageDecoder) {
             return;
@@ -168,12 +196,22 @@ const AnimatedImageContent = (0, react_1.forwardRef)(({ src, width, height, onEr
     return (jsx_runtime_1.jsx(canvas_1.Canvas, { ref: ref, width: width, height: height, fit: fit, effects: memoizedEffects, ...props }));
 });
 AnimatedImageContent.displayName = 'AnimatedImageContent';
-const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, loopBehavior, id, className, style, durationInFrames, requestInit, effects = [], controls, ref, ...sequenceProps }) => {
+const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, loopBehavior, id, className, style, durationInFrames, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, requestInit, effects = [], controls, ref, ...sequenceProps }) => {
     const actualRef = (0, react_1.useRef)(null);
     const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
     (0, react_1.useImperativeHandle)(ref, () => {
         return actualRef.current;
     }, []);
+    const { effectivePostmountFor, effectivePremountFor, freezeFrame, isPremountingOrPostmounting, postmountingActive, premountingActive, premountingStyle, } = (0, use_premounting_js_1.usePremounting)({
+        from: from !== null && from !== void 0 ? from : 0,
+        durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity,
+        premountFor: premountFor !== null && premountFor !== void 0 ? premountFor : null,
+        postmountFor: postmountFor !== null && postmountFor !== void 0 ? postmountFor : null,
+        style: style !== null && style !== void 0 ? style : null,
+        styleWhilePremounted: styleWhilePremounted !== null && styleWhilePremounted !== void 0 ? styleWhilePremounted : null,
+        styleWhilePostmounted: styleWhilePostmounted !== null && styleWhilePostmounted !== void 0 ? styleWhilePostmounted : null,
+        hideWhilePremounted: 'display-none',
+    });
     const canvasProps = getCanvasPropsFromSequenceProps(sequenceProps);
     const animatedImageProps = {
         src,
@@ -185,17 +223,17 @@ const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, lo
         loopBehavior,
         id,
         className,
-        style,
+        style: premountingStyle !== null && premountingStyle !== void 0 ? premountingStyle : undefined,
         requestInit,
         ...canvasProps,
     };
-    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", durationInFrames: durationInFrames, name: "<AnimatedImage>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, ...sequenceProps, outlineRef: actualRef, children: jsx_runtime_1.jsx(AnimatedImageContent, { ...animatedImageProps, ref: actualRef, effects: effects, controls: controls }) }));
+    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, name: "<AnimatedImage>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, ...sequenceProps, outlineRef: actualRef, children: jsx_runtime_1.jsx(AnimatedImageContent, { ...animatedImageProps, ref: actualRef, effects: effects, controls: controls }) }) }));
 };
 exports.AnimatedImage = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
     Component: AnimatedImageInner,
     componentName: '<AnimatedImage>',
     componentIdentity: 'dev.remotion.remotion.AnimatedImage',
-    schema: animatedImageSchema,
+    schema: exports.animatedImageSchema,
     supportsEffects: true,
 });
 exports.AnimatedImage.displayName = 'AnimatedImage';

package/dist/cjs/animated-image/create-image-decoder.d.ts

@@ -0,0 +1,9 @@
+export declare const createImageDecoder: ({ resolvedSrc, signal, requestInit, contentType, }: {
+    resolvedSrc: string;
+    signal: AbortSignal;
+    requestInit?: RequestInit | undefined;
+    contentType: string | null;
+}) => Promise<{
+    decoder: ImageDecoder;
+    selectedTrack: ImageTrack;
+}>;