remotion 4.0.495 → 4.0.497

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;
+}>;

package/dist/cjs/animated-image/create-image-decoder.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createImageDecoder = void 0;
+const createImageDecoder = async ({ resolvedSrc, signal, requestInit, contentType, }) => {
+    var _a;
+    if (typeof ImageDecoder === 'undefined') {
+        throw new Error('Your browser does not support the WebCodecs ImageDecoder API.');
+    }
+    const response = await fetch(resolvedSrc, { ...requestInit, signal });
+    const { body } = response;
+    if (!body) {
+        throw new Error('Got no body');
+    }
+    const decoder = new ImageDecoder({
+        data: body,
+        type: (_a = contentType !== null && contentType !== void 0 ? contentType : response.headers.get('Content-Type')) !== null && _a !== void 0 ? _a : 'image/gif',
+    });
+    await Promise.all([decoder.completed, decoder.tracks.ready]);
+    const { selectedTrack } = decoder.tracks;
+    if (!selectedTrack) {
+        decoder.close();
+        throw new Error('No selected track');
+    }
+    return { decoder, selectedTrack };
+};
+exports.createImageDecoder = createImageDecoder;

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

@@ -5,6 +5,7 @@ export type AnimatedImageCacheItem = {
     frame: VideoFrame | null;
 };
 export type RemotionImageDecoder = {
+    close: () => void;
     getFrame: (i: number, loopBehavior: RemotionAnimatedImageLoopBehavior) => Promise<AnimatedImageCacheItem | null>;
     frameCount: number;
 };

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.decodeImage = void 0;
+const create_image_decoder_1 = require("./create-image-decoder");
 const CACHE_SIZE = 5;
 const getActualTime = ({ loopBehavior, durationFound, timeInSec, }) => {
     return loopBehavior === 'loop'
@@ -10,23 +11,12 @@ const getActualTime = ({ loopBehavior, durationFound, timeInSec, }) => {
         : Math.min(timeInSec, durationFound || Infinity);
 };
 const decodeImage = async ({ resolvedSrc, signal, requestInit, currentTime, initialLoopBehavior, }) => {
-    if (typeof ImageDecoder === 'undefined') {
-        throw new Error('Your browser does not support the WebCodecs ImageDecoder API.');
-    }
-    const res = await fetch(resolvedSrc, { ...requestInit, signal });
-    const { body } = res;
-    if (!body) {
-        throw new Error('Got no body');
-    }
-    const decoder = new ImageDecoder({
-        data: body,
-        type: res.headers.get('Content-Type') || 'image/gif',
+    const { decoder, selectedTrack } = await (0, create_image_decoder_1.createImageDecoder)({
+        resolvedSrc,
+        signal,
+        requestInit,
+        contentType: null,
     });
-    await decoder.completed;
-    const { selectedTrack } = decoder.tracks;
-    if (!selectedTrack) {
-        throw new Error('No selected track');
-    }
     const cache = [];
     let durationFound = null;
     const getFrameByIndex = async (frameIndex) => {
@@ -138,6 +128,14 @@ const decodeImage = async ({ resolvedSrc, signal, requestInit, currentTime, init
         return closest;
     };
     return {
+        close: () => {
+            var _a;
+            for (const item of cache) {
+                (_a = item.frame) === null || _a === void 0 ? void 0 : _a.close();
+                item.frame = null;
+            }
+            decoder.close();
+        },
         getFrame,
         frameCount: selectedTrack.frameCount,
     };

package/dist/cjs/animated-image/get-duration-in-seconds.d.ts

@@ -0,0 +1,6 @@
+export declare const getAnimatedImageDurationInSeconds: ({ resolvedSrc, signal, requestInit, contentType, }: {
+    resolvedSrc: string;
+    signal: AbortSignal;
+    requestInit?: RequestInit | undefined;
+    contentType: string | null;
+}) => Promise<number>;

package/dist/cjs/animated-image/get-duration-in-seconds.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAnimatedImageDurationInSeconds = void 0;
+const create_image_decoder_1 = require("./create-image-decoder");
+const getAnimatedImageDurationInSeconds = async ({ resolvedSrc, signal, requestInit, contentType, }) => {
+    const { decoder, selectedTrack } = await (0, create_image_decoder_1.createImageDecoder)({
+        resolvedSrc,
+        signal,
+        requestInit,
+        contentType,
+    });
+    try {
+        const { image } = await decoder.decode({
+            frameIndex: selectedTrack.frameCount - 1,
+            completeFramesOnly: true,
+        });
+        try {
+            if (image.duration === null) {
+                throw new Error('Could not determine animated image duration');
+            }
+            return (image.timestamp + image.duration) / 1000000;
+        }
+        finally {
+            image.close();
+        }
+    }
+    finally {
+        decoder.close();
+    }
+};
+exports.getAnimatedImageDurationInSeconds = getAnimatedImageDurationInSeconds;

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

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

package/dist/cjs/audio/shared-audio-tags.js

@@ -273,21 +273,22 @@ const SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     const audioCtx = (0, react_1.useContext)(exports.SharedAudioContext);
     const audioContext = (_a = audioCtx === null || audioCtx === void 0 ? void 0 : audioCtx.audioContext) !== null && _a !== void 0 ? _a : null;
     const resume = audioCtx === null || audioCtx === void 0 ? void 0 : audioCtx.resume;
-    const refs = (0, react_1.useMemo)(() => {
+    const [refs] = (0, react_1.useState)(() => {
         return new Array(numberOfAudioTags).fill(true).map(() => {
             const ref = (0, react_1.createRef)();
             return {
                 id: Math.random(),
                 ref,
-                mediaElementSourceNode: audioContext
-                    ? (0, shared_element_source_node_js_1.makeSharedElementSourceNode)({
-                        audioContext,
-                        ref,
-                    })
-                    : null,
+                mediaElementSourceNode: (0, shared_element_source_node_js_1.makeSharedElementSourceNode)({
+                    audioContext,
+                    ref,
+                }),
             };
         });
-    }, [audioContext, numberOfAudioTags]);
+    });
+    for (const { mediaElementSourceNode } of refs) {
+        mediaElementSourceNode === null || mediaElementSourceNode === void 0 ? void 0 : mediaElementSourceNode.setAudioContext(audioContext);
+    }
     /**
      * Effects in React 18 fire twice, and we are looking for a way to only fire it once.
      * - useInsertionEffect only fires once. If it's available we are in React 18.
@@ -375,7 +376,7 @@ const SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
         const cloned = [...takenAudios.current];
         const index = refs.findIndex((r) => r.id === id);
         if (index === -1) {
-            throw new TypeError('Error occured in ');
+            throw new TypeError(`Unknown audio ref ${id}; refs: ${refs.map((r) => r.id).join(', ')}`);
         }
         cloned[index] = false;
         takenAudios.current = cloned;
@@ -464,23 +465,23 @@ const SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
 exports.SharedAudioTagsContextProvider = SharedAudioTagsContextProvider;
 const useSharedAudio = ({ aud, audioId, premounting, postmounting, }) => {
     var _a;
+    var _b, _c;
     const audioCtx = (0, react_1.useContext)(exports.SharedAudioContext);
     const tagsCtx = (0, react_1.useContext)(exports.SharedAudioTagsContext);
     /**
      * We work around this in React 18 so an audio tag will only register itself once
      */
     const [elem] = (0, react_1.useState)(() => {
+        var _a;
         if (tagsCtx && tagsCtx.numberOfAudioTags > 0) {
             return tagsCtx.registerAudio({ aud, audioId, premounting, postmounting });
         }
         // numberOfSharedAudioTags is 0
         const el = react_1.default.createRef();
-        const mediaElementSourceNode = (audioCtx === null || audioCtx === void 0 ? void 0 : audioCtx.audioContext)
-            ? (0, shared_element_source_node_js_1.makeSharedElementSourceNode)({
-                audioContext: audioCtx.audioContext,
-                ref: el,
-            })
-            : null;
+        const mediaElementSourceNode = (0, shared_element_source_node_js_1.makeSharedElementSourceNode)({
+            audioContext: (_a = audioCtx === null || audioCtx === void 0 ? void 0 : audioCtx.audioContext) !== null && _a !== void 0 ? _a : null,
+            ref: el,
+        });
         return {
             el,
             id: Math.random(),
@@ -495,6 +496,7 @@ const useSharedAudio = ({ aud, audioId, premounting, postmounting, }) => {
             },
         };
     });
+    (_a = elem.mediaElementSourceNode) === null || _a === void 0 ? void 0 : _a.setAudioContext((_b = audioCtx === null || audioCtx === void 0 ? void 0 : audioCtx.audioContext) !== null && _b !== void 0 ? _b : null);
     /**
      * Effects in React 18 fire twice, and we are looking for a way to only fire it once.
      * - useInsertionEffect only fires once. If it's available we are in React 18.
@@ -502,7 +504,7 @@ const useSharedAudio = ({ aud, audioId, premounting, postmounting, }) => {
      *
      * Need to import it from React to fix React 17 ESM support.
      */
-    const effectToUse = (_a = react_1.default.useInsertionEffect) !== null && _a !== void 0 ? _a : react_1.default.useLayoutEffect;
+    const effectToUse = (_c = react_1.default.useInsertionEffect) !== null && _c !== void 0 ? _c : react_1.default.useLayoutEffect;
     if (typeof document !== 'undefined') {
         effectToUse(() => {
             if (tagsCtx && tagsCtx.numberOfAudioTags > 0) {

package/dist/cjs/audio/shared-element-source-node.d.ts

@@ -1,7 +1,8 @@
 export declare const makeSharedElementSourceNode: ({ audioContext, ref, }: {
-    audioContext: AudioContext;
+    audioContext: AudioContext | null;
     ref: import("react").RefObject<HTMLAudioElement | null>;
 }) => {
+    setAudioContext: (newAudioContext: AudioContext | null) => void;
     attemptToConnect: () => void;
     get: () => MediaElementAudioSourceNode;
     cleanup: () => void;

package/dist/cjs/audio/shared-element-source-node.js

@@ -4,14 +4,18 @@ exports.makeSharedElementSourceNode = void 0;
 const makeSharedElementSourceNode = ({ audioContext, ref, }) => {
     let connected = null;
     let disposed = false;
+    let currentAudioContext = audioContext;
     // We must allow this to cleanup and create a new one due to strict mode.
     return {
+        setAudioContext: (newAudioContext) => {
+            currentAudioContext = newAudioContext;
+        },
         attemptToConnect: () => {
             if (disposed) {
                 throw new Error('SharedElementSourceNode has been disposed');
             }
-            if (!connected && ref.current) {
-                const mediaElementSourceNode = audioContext.createMediaElementSource(ref.current);
+            if (!connected && ref.current && currentAudioContext) {
+                const mediaElementSourceNode = currentAudioContext.createMediaElementSource(ref.current);
                 connected = mediaElementSourceNode;
             }
         },

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

@@ -37,6 +37,58 @@ export declare const canvasImageSchema: {
         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;
@@ -77,7 +129,7 @@ export declare const canvasImageSchema: {
         };
     };
 };
-export declare const CanvasImage: import("react").ComponentType<import("../Interactive.js").InteractiveBaseProps & {
+export declare const CanvasImage: import("react").ComponentType<import("../Interactive.js").InteractiveBaseProps & import("../Interactive.js").InteractivePremountProps & {
     readonly stack?: string | undefined;
 } & CanvasImageCanvasProps & {
     readonly src: string;

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

@@ -8,6 +8,7 @@ const run_effect_chain_js_1 = require("../effects/run-effect-chain.js");
 const use_effect_chain_state_js_1 = require("../effects/use-effect-chain-state.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 prefetch_js_1 = require("../prefetch.js");
 const Sequence_js_1 = require("../Sequence.js");
@@ -15,9 +16,11 @@ 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 with_interactivity_schema_js_1 = require("../with-interactivity-schema.js");
 exports.canvasImageSchema = {
     ...interactivity_schema_js_1.baseSchema,
+    ...interactivity_schema_js_1.premountSchema,
     fit: {
         type: 'enum',
         default: 'fill',
@@ -29,6 +32,8 @@ exports.canvasImageSchema = {
         },
     },
     ...interactivity_schema_js_1.transformSchema,
+    ...interactivity_schema_js_1.backgroundSchema,
+    ...interactivity_schema_js_1.borderSchema,
 };
 const makeAbortError = () => {
     if (typeof DOMException !== 'undefined') {
@@ -314,7 +319,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
     return (jsx_runtime_1.jsx("canvas", { ...canvasProps, ref: canvasRef, width: width, height: height, className: className, style: style, id: id }));
 });
 CanvasImageContent.displayName = 'CanvasImageContent';
-const CanvasImageInner = (0, react_1.forwardRef)(({ src, width, height, fit, effects = [], className, style, id, onError, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, durationInFrames, from, trimBefore, freeze, hidden, name, showInTimeline, stack, controls, _remotionInternalDocumentationLink, outlineRef, ...canvasProps }, ref) => {
+const CanvasImageInner = (0, react_1.forwardRef)(({ src, width, height, fit, effects = [], className, style, id, onError, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, durationInFrames, from, trimBefore, freeze, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, hidden, name, showInTimeline, stack, controls, _remotionInternalDocumentationLink, outlineRef, ...canvasProps }, ref) => {
     if (!src) {
         throw new Error('No "src" prop was passed to <CanvasImage>.');
     }
@@ -323,7 +328,17 @@ 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, trimBefore: trimBefore, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, name: name !== null && name !== void 0 ? name : '<CanvasImage>', _remotionInternalDocumentationLink: _remotionInternalDocumentationLink !== null && _remotionInternalDocumentationLink !== void 0 ? _remotionInternalDocumentationLink : 'https://www.remotion.dev/docs/canvasimage', controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalIsMedia: { type: 'image', src }, _remotionInternalStack: stack, outlineRef: outlineRef !== null && outlineRef !== void 0 ? outlineRef : actualRef, children: jsx_runtime_1.jsx(CanvasImageContent, { ref: actualRef, src: src, width: width, height: height, fit: fit, effects: effects, controls: controls, className: className, style: style, id: id, onError: onError, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, refForOutline: outlineRef !== null && outlineRef !== void 0 ? outlineRef : null, ...canvasProps }) }));
+    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, hidden: hidden, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, name: name !== null && name !== void 0 ? name : '<CanvasImage>', _remotionInternalDocumentationLink: _remotionInternalDocumentationLink !== null && _remotionInternalDocumentationLink !== void 0 ? _remotionInternalDocumentationLink : 'https://www.remotion.dev/docs/canvasimage', controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalIsMedia: { type: 'image', src }, _remotionInternalStack: stack, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, outlineRef: outlineRef !== null && outlineRef !== void 0 ? outlineRef : actualRef, children: jsx_runtime_1.jsx(CanvasImageContent, { ref: actualRef, src: src, width: width, height: height, fit: fit, effects: effects, controls: controls, className: className, style: premountingStyle !== null && premountingStyle !== void 0 ? premountingStyle : undefined, id: id, onError: onError, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, refForOutline: outlineRef !== null && outlineRef !== void 0 ? outlineRef : null, ...canvasProps }) }) }));
 });
 /*
  * @description Renders a static image to a `<canvas>` and applies Remotion effects.

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

@@ -1,8 +1,8 @@
 import type React from 'react';
 import type { ImageFit } from '../calculate-image-fit.js';
 import type { EffectsProp } from '../effects/effect-types.js';
-import type { InteractiveBaseProps } from '../Interactive.js';
-type CanvasImageSequenceProps = InteractiveBaseProps & {
+import type { InteractiveBaseProps, InteractivePremountProps } from '../Interactive.js';
+type CanvasImageSequenceProps = InteractiveBaseProps & InteractivePremountProps & {
     /**
      * @deprecated For internal use only.
      */

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

@@ -49,6 +49,41 @@ export declare const solidSchema: {
         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/effects/Solid.js

@@ -55,6 +55,8 @@ exports.solidSchema = {
         hiddenFromList: false,
     },
     ...interactivity_schema_js_1.transformSchema,
+    ...interactivity_schema_js_1.backgroundSchema,
+    ...interactivity_schema_js_1.borderSchema,
 };
 const SolidInner = ({ color, width, height, effects = [], className, style, pixelDensity, overrideId, reference, }) => {
     const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();