remotion 4.0.466 → 4.0.467

package/dist/cjs/Img.js

@@ -25,7 +25,7 @@ function truncateSrcForLabel(src) {
     }
     return src;
 }
-const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRenderRetries, delayRenderTimeoutInMilliseconds, onImageFrame, crossOrigin, ref, ...props }) => {
+const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRenderRetries, delayRenderTimeoutInMilliseconds, onImageFrame, crossOrigin, decoding, ref, ...props }) => {
     const imageRef = (0, react_1.useRef)(null);
     const errors = (0, react_1.useRef)({});
     const { delayPlayback } = (0, use_buffer_state_js_1.useBufferState)();
@@ -172,14 +172,14 @@ const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRende
             delayRender,
         ]);
     }
-    const { isClientSideRendering } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
+    const { isClientSideRendering, isRendering } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const crossOriginValue = (0, get_cross_origin_value_js_1.getCrossOriginValue)({
         crossOrigin,
         requestsVideoFrame: false,
         isClientSideRendering,
     });
     // src gets set once we've loaded and decoded the image.
-    return ((0, jsx_runtime_1.jsx)("img", { ...props, ref: imageRef, crossOrigin: crossOriginValue, onError: didGetError, decoding: "sync" }));
+    return ((0, jsx_runtime_1.jsx)("img", { ...props, ref: imageRef, crossOrigin: crossOriginValue, onError: didGetError, decoding: isRendering ? 'sync' : decoding }));
 };
 const ImgInner = ({ hidden, name, stack, showInTimeline, src, from, durationInFrames, _experimentalControls: controls, ...props }) => {
     if (!src) {

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

@@ -36,56 +36,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Canvas = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
+const calculate_image_fit_js_1 = require("../calculate-image-fit.js");
 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 calcArgs = (fit, frameSize, canvasSize) => {
-    switch (fit) {
-        case 'fill': {
-            return [
-                0,
-                0,
-                frameSize.width,
-                frameSize.height,
-                0,
-                0,
-                canvasSize.width,
-                canvasSize.height,
-            ];
-        }
-        case 'contain': {
-            const ratio = Math.min(canvasSize.width / frameSize.width, canvasSize.height / frameSize.height);
-            const centerX = (canvasSize.width - frameSize.width * ratio) / 2;
-            const centerY = (canvasSize.height - frameSize.height * ratio) / 2;
-            return [
-                0,
-                0,
-                frameSize.width,
-                frameSize.height,
-                centerX,
-                centerY,
-                frameSize.width * ratio,
-                frameSize.height * ratio,
-            ];
-        }
-        case 'cover': {
-            const ratio = Math.max(canvasSize.width / frameSize.width, canvasSize.height / frameSize.height);
-            const centerX = (canvasSize.width - frameSize.width * ratio) / 2;
-            const centerY = (canvasSize.height - frameSize.height * ratio) / 2;
-            return [
-                0,
-                0,
-                frameSize.width,
-                frameSize.height,
-                centerX,
-                centerY,
-                frameSize.width * ratio,
-                frameSize.height * ratio,
-            ];
-        }
-        default:
-            throw new Error('Unknown fit: ' + fit);
-    }
-};
 const CanvasRefForwardingFunction = ({ width, height, fit, className, style, effects }, ref) => {
     const canvasRef = (0, react_1.useRef)(null);
     const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)();
@@ -95,7 +48,7 @@ const CanvasRefForwardingFunction = ({ width, height, fit, className, style, eff
         }
         return document.createElement('canvas');
     }, []);
-    const draw = (0, react_1.useCallback)(async (imageData) => {
+    const draw = (0, react_1.useCallback)((imageData) => {
         const canvas = canvasRef.current;
         const canvasWidth = width !== null && width !== void 0 ? width : imageData.displayWidth;
         const canvasHeight = height !== null && height !== void 0 ? height : imageData.displayHeight;
@@ -111,7 +64,7 @@ const CanvasRefForwardingFunction = ({ width, height, fit, className, style, eff
         if (!sourceCtx) {
             throw new Error('Could not get 2d context for source canvas');
         }
-        sourceCtx.drawImage(imageData, ...calcArgs(fit, {
+        sourceCtx.drawImage(imageData, ...(0, calculate_image_fit_js_1.calculateImageFit)(fit, {
             height: imageData.displayHeight,
             width: imageData.displayWidth,
         }, {

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

@@ -1,3 +1,4 @@
+import type { ImageFit } from '../calculate-image-fit.js';
 import type { EffectsProp } from '../effects/effect-types.js';
 import type { SequenceProps } from '../Sequence.js';
 export type RemotionAnimatedImageLoopBehavior = 'loop' | 'pause-after-finish' | 'clear-after-finish';
@@ -17,4 +18,4 @@ export type AnimatedImageProps = Omit<SequenceProps, 'children' | 'durationInFra
     readonly durationInFrames?: number;
     readonly effects?: EffectsProp;
 };
-export type AnimatedImageFillMode = 'contain' | 'cover' | 'fill';
+export type AnimatedImageFillMode = ImageFit;

package/dist/cjs/audio/shared-audio-tags.d.ts

@@ -1,6 +1,7 @@
 import { type AudioHTMLAttributes } from 'react';
 import React from 'react';
 import type { SharedElementSourceNode } from './shared-element-source-node.js';
+import type { RemotionAudioContextState } from './use-audio-context.js';
 /**
  * This functionality of Remotion will keep a certain amount
  * of <audio> tags pre-mounted and by default filled with an empty audio track.
@@ -33,7 +34,6 @@ export type ScheduleAudioNodeResult = {
 export type ScheduleAudioNodeOptions = {
     readonly node: AudioBufferSourceNode;
     readonly mediaTimestamp: number;
-    readonly currentTime: number;
     readonly scheduledTime: number;
     readonly originalUnloopedMediaTimestamp: number;
     readonly duration: number;
@@ -49,6 +49,7 @@ export type AudioSyncAnchorEmitter = {
 };
 type SharedAudioContextValue = {
     audioContext: AudioContext | null;
+    getAudioContextState: () => RemotionAudioContextState | null;
     gainNode: GainNode | null;
     audioSyncAnchor: {
         value: number;
@@ -56,7 +57,7 @@ type SharedAudioContextValue = {
     audioSyncAnchorEmitter: AudioSyncAnchorEmitter;
     scheduleAudioNode: (options: ScheduleAudioNodeOptions) => ScheduleAudioNodeResult;
     resume: () => Promise<void>;
-    suspend: () => void;
+    suspend: () => Promise<void>;
     getIsResumingAudioContext: () => Promise<void> | null;
     unscheduleAudioNode: (node: AudioBufferSourceNode) => void;
 };

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

@@ -77,6 +77,17 @@ const didPropChange = (key, newProp, prevProp) => {
 };
 exports.SharedAudioContext = (0, react_1.createContext)(null);
 exports.SharedAudioTagsContext = (0, react_1.createContext)(null);
+const shouldSaveForLater = (state) => {
+    if (state === 'suspended' ||
+        state === 'running-to-suspended' ||
+        state === 'interrupted') {
+        return true;
+    }
+    if (state === 'running' || state === 'suspended-to-running') {
+        return false;
+    }
+    throw new Error(`Unexpected audio context state: ${state}`);
+};
 const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled }) => {
     const logLevel = (0, log_level_context_js_1.useLogLevel)();
     const ctxAndGain = (0, use_audio_context_js_1.useSingletonAudioContext)({
@@ -110,11 +121,18 @@ const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled }
         nodesToResume.current.delete(node);
     }, []);
     const scheduleAudioNode = (0, react_1.useMemo)(() => {
-        return ({ node, mediaTimestamp, currentTime, scheduledTime, duration, offset, originalUnloopedMediaTimestamp, }) => {
+        return ({ node, mediaTimestamp, scheduledTime, duration, offset, originalUnloopedMediaTimestamp, }) => {
             if (!ctxAndGain) {
                 throw new Error('Audio context not found');
             }
-            const saveForLater = ctxAndGain.audioContext.state === 'suspended' && !isResuming.current;
+            const currentState = ctxAndGain.getState();
+            if (currentState === 'closed') {
+                return {
+                    type: 'not-started',
+                    reason: 'audio context is closed',
+                };
+            }
+            const saveForLater = shouldSaveForLater(currentState);
             if (duration > 0) {
                 if (saveForLater) {
                     nodesToResume.current.set(node, {
@@ -145,7 +163,7 @@ const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled }
                     : 'color: blue; font-weight: bold', duration < 0
                 ? 'missed ' + Math.abs(offset).toFixed(2) + 's'
                 : Math.abs(timeDiff).toFixed(2) +
-                    (timeDiff < 0 ? ' delay' : ' ahead'), '', 'current=' + currentTime.toFixed(4), 'actualcurrent=' + ctxAndGain.audioContext.currentTime.toFixed(4), 'offset=' + offset.toFixed(4), 'latency=' + latency.toFixed(4), 'state=' + ctxAndGain.audioContext.state, originalUnloopedMediaTimestamp !== mediaTime
+                    (timeDiff < 0 ? ' delay' : ' ahead'), '', 'current=' + ctxAndGain.audioContext.currentTime.toFixed(4), 'offset=' + offset.toFixed(4), 'latency=' + latency.toFixed(4), 'state=' + ctxAndGain.audioContext.state, originalUnloopedMediaTimestamp !== mediaTime
                 ? 'original_ts=' + originalUnloopedMediaTimestamp.toFixed(4)
                 : '', 'action=' + (saveForLater ? 'schedule' : 'start'), '');
             prev.scheduledEndTime = scheduledEndTime;
@@ -176,7 +194,7 @@ const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled }
             node.start(r.scheduledTime, r.offset, r.duration);
         });
         nodesToResume.current.clear();
-        const resumePromise = ctxAndGain.audioContext.resume();
+        const resumePromise = ctxAndGain.resume();
         isResuming.current = new Promise((resolve) => {
             (0, wait_until_actually_resumed_js_1.waitUntilActuallyResumed)(ctxAndGain.audioContext, logLevel).then(resolve);
             resumePromise.catch((err) => {
@@ -196,18 +214,19 @@ const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled }
     }, []);
     const suspend = (0, react_1.useCallback)(() => {
         if (!ctxAndGain) {
-            return;
+            return Promise.resolve();
         }
         if (!audioContextIsPlayingEventually.current) {
-            return;
+            return Promise.resolve();
         }
         audioContextIsPlayingEventually.current = false;
-        ctxAndGain.audioContext.suspend();
+        return ctxAndGain.suspend();
     }, [ctxAndGain]);
     const audioContextValue = (0, react_1.useMemo)(() => {
         var _a, _b;
         return {
             audioContext: (_a = ctxAndGain === null || ctxAndGain === void 0 ? void 0 : ctxAndGain.audioContext) !== null && _a !== void 0 ? _a : null,
+            getAudioContextState: () => { var _a; return (_a = ctxAndGain === null || ctxAndGain === void 0 ? void 0 : ctxAndGain.getState()) !== null && _a !== void 0 ? _a : null; },
             gainNode: (_b = ctxAndGain === null || ctxAndGain === void 0 ? void 0 : ctxAndGain.gainNode) !== null && _b !== void 0 ? _b : null,
             audioSyncAnchor,
             audioSyncAnchorEmitter,

package/dist/cjs/audio/use-audio-context.d.ts

@@ -1,4 +1,5 @@
 import type { LogLevel } from '../log';
+export type RemotionAudioContextState = AudioContextState | 'running-to-suspended' | 'suspended-to-running';
 export declare const useSingletonAudioContext: ({ logLevel, latencyHint, audioEnabled, }: {
     logLevel: LogLevel;
     latencyHint: AudioContextLatencyCategory;
@@ -6,4 +7,7 @@ export declare const useSingletonAudioContext: ({ logLevel, latencyHint, audioEn
 }) => {
     audioContext: AudioContext;
     gainNode: GainNode;
+    getState: () => RemotionAudioContextState;
+    resume: () => Promise<void>;
+    suspend: () => Promise<void>;
 } | null;

package/dist/cjs/audio/use-audio-context.js

@@ -39,9 +39,45 @@ const useSingletonAudioContext = ({ logLevel, latencyHint, audioEnabled, }) => {
         gainNode.connect(audioContext.destination);
         log_1.Log.trace({ logLevel, tag: 'audio' }, 'Creating new audio context');
         audioContext.suspend();
+        // Tracks the state we are transitioning towards while resume()/suspend()
+        // have been called but the native state has not updated yet.
+        let transitionTarget = null;
+        const getState = () => {
+            const nativeState = audioContext.state;
+            if (transitionTarget === 'running' && nativeState !== 'running') {
+                return 'suspended-to-running';
+            }
+            if (transitionTarget === 'suspended' && nativeState !== 'suspended') {
+                return 'running-to-suspended';
+            }
+            return nativeState;
+        };
+        const resume = () => {
+            transitionTarget = 'running';
+            const promise = audioContext.resume();
+            promise.finally(() => {
+                if (transitionTarget === 'running') {
+                    transitionTarget = null;
+                }
+            });
+            return promise;
+        };
+        const suspend = () => {
+            transitionTarget = 'suspended';
+            const promise = audioContext.suspend();
+            promise.finally(() => {
+                if (transitionTarget === 'suspended') {
+                    transitionTarget = null;
+                }
+            });
+            return promise;
+        };
         return {
             audioContext,
             gainNode,
+            getState,
+            resume,
+            suspend,
         };
     }, [logLevel, latencyHint, env.isRendering, audioEnabled]);
     return context;

package/dist/cjs/calculate-image-fit.d.ts

@@ -0,0 +1,8 @@
+export type ImageFit = 'contain' | 'cover' | 'fill';
+export declare const calculateImageFit: (fit: ImageFit, imageSize: {
+    width: number;
+    height: number;
+}, canvasSize: {
+    width: number;
+    height: number;
+}) => [number, number, number, number, number, number, number, number];

package/dist/cjs/calculate-image-fit.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateImageFit = void 0;
+const calculateImageFit = (fit, imageSize, canvasSize) => {
+    switch (fit) {
+        case 'fill': {
+            return [
+                0,
+                0,
+                imageSize.width,
+                imageSize.height,
+                0,
+                0,
+                canvasSize.width,
+                canvasSize.height,
+            ];
+        }
+        case 'contain': {
+            const ratio = Math.min(canvasSize.width / imageSize.width, canvasSize.height / imageSize.height);
+            const centerX = (canvasSize.width - imageSize.width * ratio) / 2;
+            const centerY = (canvasSize.height - imageSize.height * ratio) / 2;
+            return [
+                0,
+                0,
+                imageSize.width,
+                imageSize.height,
+                centerX,
+                centerY,
+                imageSize.width * ratio,
+                imageSize.height * ratio,
+            ];
+        }
+        case 'cover': {
+            const ratio = Math.max(canvasSize.width / imageSize.width, canvasSize.height / imageSize.height);
+            const centerX = (canvasSize.width - imageSize.width * ratio) / 2;
+            const centerY = (canvasSize.height - imageSize.height * ratio) / 2;
+            return [
+                0,
+                0,
+                imageSize.width,
+                imageSize.height,
+                centerX,
+                centerY,
+                imageSize.width * ratio,
+                imageSize.height * ratio,
+            ];
+        }
+        default:
+            throw new Error('Unknown fit: ' + fit);
+    }
+};
+exports.calculateImageFit = calculateImageFit;

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

@@ -0,0 +1,18 @@
+import type { EffectsProp } from '../effects/effect-types.js';
+export declare const CanvasImage: import("react").ComponentType<Pick<import("../Sequence.js").SequenceProps, "hidden" | "name" | "durationInFrames" | "from" | "showInTimeline"> & {
+    readonly stack?: string;
+} & {
+    readonly src: string;
+    readonly width?: number;
+    readonly height?: number;
+    readonly fit?: import("../calculate-image-fit.js").ImageFit;
+    readonly effects?: EffectsProp;
+    readonly className?: string;
+    readonly style?: React.CSSProperties;
+    readonly id?: string;
+    readonly onError?: (error: Error) => void;
+    readonly pauseWhenLoading?: boolean;
+    readonly maxRetries?: number;
+    readonly delayRenderRetries?: number;
+    readonly delayRenderTimeoutInMilliseconds?: number;
+} & import("react").RefAttributes<HTMLCanvasElement>>;

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

@@ -0,0 +1,247 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CanvasImage = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const calculate_image_fit_js_1 = require("../calculate-image-fit.js");
+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 Img_js_1 = require("../Img.js");
+const prefetch_js_1 = require("../prefetch.js");
+const sequence_field_schema_js_1 = require("../sequence-field-schema.js");
+const Sequence_js_1 = require("../Sequence.js");
+const SequenceContext_js_1 = require("../SequenceContext.js");
+const use_buffer_state_js_1 = require("../use-buffer-state.js");
+const use_delay_render_js_1 = require("../use-delay-render.js");
+const wrap_in_schema_js_1 = require("../wrap-in-schema.js");
+const canvasImageSchema = {
+    fit: {
+        type: 'enum',
+        default: 'fill',
+        description: 'Fit',
+        variants: {
+            fill: {},
+            contain: {},
+            cover: {},
+        },
+    },
+    ...sequence_field_schema_js_1.sequenceVisualStyleSchema,
+    hidden: sequence_field_schema_js_1.hiddenField,
+};
+const makeAbortError = () => {
+    if (typeof DOMException !== 'undefined') {
+        return new DOMException('Image loading was aborted', 'AbortError');
+    }
+    const error = new Error('Image loading was aborted');
+    error.name = 'AbortError';
+    return error;
+};
+const loadImage = ({ src, signal, }) => {
+    return new Promise((resolve, reject) => {
+        const image = new Image();
+        let settled = false;
+        function cleanup() {
+            image.onload = null;
+            image.onerror = null;
+        }
+        function settle(callback) {
+            if (settled) {
+                return;
+            }
+            settled = true;
+            cleanup();
+            callback();
+        }
+        function onAbort() {
+            settle(() => reject(makeAbortError()));
+        }
+        image.onload = () => {
+            var _a;
+            Promise.resolve((_a = image.decode) === null || _a === void 0 ? void 0 : _a.call(image))
+                .catch(() => undefined)
+                .then(() => {
+                const imageWidth = image.naturalWidth || image.width;
+                const imageHeight = image.naturalHeight || image.height;
+                if (imageWidth <= 0 || imageHeight <= 0) {
+                    settle(() => reject(new Error(`Could not determine dimensions for <CanvasImage> with src="${(0, Img_js_1.truncateSrcForLabel)(src)}"`)));
+                    return;
+                }
+                settle(() => resolve({ element: image, width: imageWidth, height: imageHeight }));
+            });
+        };
+        image.onerror = () => {
+            settle(() => reject(new Error(`Could not load <CanvasImage> with src="${(0, Img_js_1.truncateSrcForLabel)(src)}"`)));
+        };
+        signal.addEventListener('abort', onAbort, { once: true });
+        if (signal.aborted) {
+            onAbort();
+            return;
+        }
+        image.crossOrigin = 'anonymous';
+        image.src = src;
+    });
+};
+function exponentialBackoff(errorCount) {
+    return 1000 * 2 ** (errorCount - 1);
+}
+const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit = 'fill', effects, controls, onError, className, style, id, pauseWhenLoading, maxRetries = 2, delayRenderRetries, delayRenderTimeoutInMilliseconds, }, ref) => {
+    var _a;
+    const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
+    const { delayPlayback } = (0, use_buffer_state_js_1.useBufferState)();
+    const [outputCanvas, setOutputCanvas] = (0, react_1.useState)(null);
+    const actualSrc = (0, prefetch_js_1.usePreload)(src);
+    const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)();
+    const memoizedEffects = (0, use_memoized_effects_js_1.useMemoizedEffects)({
+        effects,
+        overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null,
+    });
+    const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
+    const sourceCanvas = (0, react_1.useMemo)(() => {
+        if (typeof document === 'undefined') {
+            return null;
+        }
+        return document.createElement('canvas');
+    }, []);
+    const canvasRef = (0, react_1.useCallback)((canvas) => {
+        setOutputCanvas(canvas);
+        if (typeof ref === 'function') {
+            ref(canvas);
+        }
+        else if (ref) {
+            ref.current = canvas;
+        }
+    }, [ref]);
+    (0, react_1.useEffect)(() => {
+        if (!outputCanvas || !sourceCanvas) {
+            return;
+        }
+        const isPremounting = Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting);
+        const isPostmounting = Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmounting);
+        const handle = delayRender(`Rendering <CanvasImage> with src="${(0, Img_js_1.truncateSrcForLabel)(actualSrc)}"`, {
+            retries: delayRenderRetries !== null && delayRenderRetries !== void 0 ? delayRenderRetries : undefined,
+            timeoutInMilliseconds: delayRenderTimeoutInMilliseconds !== null && delayRenderTimeoutInMilliseconds !== void 0 ? delayRenderTimeoutInMilliseconds : undefined,
+        });
+        const unblock = pauseWhenLoading && !isPremounting && !isPostmounting
+            ? delayPlayback().unblock
+            : () => undefined;
+        const controller = new AbortController();
+        let cancelled = false;
+        let continued = false;
+        let errorCount = 0;
+        let timeoutId = null;
+        const continueRenderOnce = () => {
+            if (continued) {
+                return;
+            }
+            continued = true;
+            unblock();
+            continueRender(handle);
+        };
+        const attemptLoad = () => {
+            loadImage({ src: actualSrc, signal: controller.signal })
+                .then((image) => {
+                if (cancelled) {
+                    return;
+                }
+                const canvasWidth = width !== null && width !== void 0 ? width : image.width;
+                const canvasHeight = height !== null && height !== void 0 ? height : image.height;
+                const sourceContext = sourceCanvas.getContext('2d', {
+                    colorSpace: 'srgb',
+                });
+                if (!sourceContext) {
+                    throw new Error('Could not get 2D context for <CanvasImage> source canvas');
+                }
+                sourceCanvas.width = canvasWidth;
+                sourceCanvas.height = canvasHeight;
+                outputCanvas.width = canvasWidth;
+                outputCanvas.height = canvasHeight;
+                sourceContext.clearRect(0, 0, canvasWidth, canvasHeight);
+                sourceContext.drawImage(image.element, ...(0, calculate_image_fit_js_1.calculateImageFit)(fit, { width: image.width, height: image.height }, { width: canvasWidth, height: canvasHeight }));
+                return (0, run_effect_chain_js_1.runEffectChain)({
+                    state: chainState.get(canvasWidth, canvasHeight),
+                    source: sourceCanvas,
+                    effects: memoizedEffects,
+                    output: outputCanvas,
+                    width: canvasWidth,
+                    height: canvasHeight,
+                });
+            })
+                .then((completed) => {
+                if (completed && !cancelled) {
+                    continueRenderOnce();
+                }
+            })
+                .catch((err) => {
+                if (err.name === 'AbortError') {
+                    continueRenderOnce();
+                    return;
+                }
+                errorCount++;
+                if (errorCount <= maxRetries) {
+                    const backoff = exponentialBackoff(errorCount);
+                    // eslint-disable-next-line no-console
+                    console.warn(`Could not load <CanvasImage> with src="${(0, Img_js_1.truncateSrcForLabel)(actualSrc)}", retrying in ${backoff}ms`);
+                    timeoutId = setTimeout(() => {
+                        if (!cancelled) {
+                            attemptLoad();
+                        }
+                    }, backoff);
+                }
+                else if (onError) {
+                    onError(err);
+                    continueRenderOnce();
+                }
+                else {
+                    cancelRender(err);
+                }
+            });
+        };
+        attemptLoad();
+        return () => {
+            cancelled = true;
+            if (timeoutId !== null) {
+                clearTimeout(timeoutId);
+            }
+            controller.abort();
+            continueRenderOnce();
+        };
+    }, [
+        actualSrc,
+        cancelRender,
+        chainState,
+        continueRender,
+        delayPlayback,
+        delayRender,
+        delayRenderRetries,
+        delayRenderTimeoutInMilliseconds,
+        fit,
+        height,
+        maxRetries,
+        memoizedEffects,
+        onError,
+        outputCanvas,
+        pauseWhenLoading,
+        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmounting,
+        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting,
+        sourceCanvas,
+        width,
+    ]);
+    return ((0, jsx_runtime_1.jsx)("canvas", { 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, }, ref) => {
+    if (!src) {
+        throw new Error('No "src" prop was passed to <CanvasImage>.');
+    }
+    const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
+    return ((0, 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>', _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalIsMedia: { type: 'image', src }, _remotionInternalStack: stack, children: (0, jsx_runtime_1.jsx)(CanvasImageContent, { ref: ref, 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 }) }));
+});
+/*
+ * @description Renders a static image to a `<canvas>` and applies Remotion effects.
+ * @see [Documentation](https://www.remotion.dev/docs/canvasimage)
+ */
+exports.CanvasImage = (0, wrap_in_schema_js_1.wrapInSchema)(CanvasImageInner, canvasImageSchema);
+exports.CanvasImage.displayName = 'CanvasImage';
+(0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(exports.CanvasImage);

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

@@ -0,0 +1,2 @@
+export { CanvasImage } from './CanvasImage.js';
+export type { CanvasImageProps } from './props.js';

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CanvasImage = void 0;
+var CanvasImage_js_1 = require("./CanvasImage.js");
+Object.defineProperty(exports, "CanvasImage", { enumerable: true, get: function () { return CanvasImage_js_1.CanvasImage; } });

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

@@ -0,0 +1,26 @@
+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'> & {
+    /**
+     * @deprecated For internal use only.
+     */
+    readonly stack?: string;
+};
+export type CanvasImageProps = CanvasImageSequenceProps & {
+    readonly src: string;
+    readonly width?: number;
+    readonly height?: number;
+    readonly fit?: ImageFit;
+    readonly effects?: EffectsProp;
+    readonly className?: string;
+    readonly style?: React.CSSProperties;
+    readonly id?: string;
+    readonly onError?: (error: Error) => void;
+    readonly pauseWhenLoading?: boolean;
+    readonly maxRetries?: number;
+    readonly delayRenderRetries?: number;
+    readonly delayRenderTimeoutInMilliseconds?: number;
+};
+export {};

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });