remotion 4.0.537 → 4.0.539

package/dist/cjs/Img.d.ts

@@ -17,52 +17,52 @@ export type ImgProps = NativeImgProps & {
 } & Omit<InteractiveBaseProps, 'playbackRate'> & InteractiveCropProps & InteractivePremountProps;
 export declare const imgSchema: {
     readonly 'style.transformOrigin': {
-        readonly type: "transform-origin";
+        readonly type: 'transform-origin';
         readonly step: 1;
-        readonly default: "50% 50%";
-        readonly description: "Transform origin";
+        readonly default: '50% 50%';
+        readonly description: 'Transform origin';
     };
     readonly 'style.translate': {
-        readonly type: "translate";
+        readonly type: 'translate';
         readonly step: 1;
-        readonly default: "0px 0px";
-        readonly description: "Offset";
+        readonly default: '0px 0px';
+        readonly description: 'Offset';
     };
     readonly 'style.scale': {
-        readonly type: "scale";
+        readonly type: 'scale';
         readonly max: 100;
         readonly step: 0.01;
         readonly default: 1;
-        readonly description: "Scale";
-        readonly defaultKeyframeOutput: "perceptual-scale";
+        readonly description: 'Scale';
+        readonly defaultKeyframeOutput: 'perceptual-scale';
     };
     readonly 'style.rotate': {
-        readonly type: "rotation-css";
+        readonly type: 'rotation-css';
         readonly step: 1;
-        readonly default: "0deg";
-        readonly description: "Rotation";
+        readonly default: '0deg';
+        readonly description: 'Rotation';
     };
     readonly 'style.opacity': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly min: 0;
         readonly max: 1;
         readonly step: 0.01;
         readonly default: 1;
-        readonly description: "Opacity";
+        readonly description: 'Opacity';
         readonly hiddenFromList: false;
     };
     readonly 'style.borderWidth': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: undefined;
         readonly min: 0;
         readonly step: 1;
-        readonly description: "Border width";
+        readonly description: 'Border width';
         readonly hiddenFromList: false;
     };
     readonly 'style.borderStyle': {
-        readonly type: "enum";
-        readonly default: "none";
-        readonly description: "Border style";
+        readonly type: 'enum';
+        readonly default: 'none';
+        readonly description: 'Border style';
         readonly variants: {
             readonly none: {};
             readonly hidden: {};
@@ -77,67 +77,67 @@ export declare const imgSchema: {
         };
     };
     readonly 'style.borderColor': {
-        readonly type: "color";
+        readonly type: 'color';
         readonly default: undefined;
-        readonly description: "Border color";
+        readonly description: 'Border color';
     };
     readonly 'style.borderRadius': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
-        readonly description: "Border radius";
+        readonly description: 'Border radius';
         readonly hiddenFromList: false;
         readonly keyframable: true;
     };
     readonly 'style.borderTopLeftRadius': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
-        readonly description: "Top left radius";
+        readonly description: 'Top left radius';
         readonly hiddenFromList: false;
     };
     readonly 'style.borderTopRightRadius': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
-        readonly description: "Top right radius";
+        readonly description: 'Top right radius';
         readonly hiddenFromList: false;
     };
     readonly 'style.borderBottomRightRadius': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
-        readonly description: "Bottom right radius";
+        readonly description: 'Bottom right radius';
         readonly hiddenFromList: false;
     };
     readonly 'style.borderBottomLeftRadius': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
-        readonly description: "Bottom left radius";
+        readonly description: 'Bottom left radius';
         readonly hiddenFromList: false;
     };
     readonly 'style.backgroundColor': {
-        readonly type: "color";
-        readonly default: "transparent";
-        readonly description: "Color";
+        readonly type: 'color';
+        readonly default: 'transparent';
+        readonly description: 'Color';
     };
     readonly premountFor: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: undefined;
-        readonly description: "Premount For";
+        readonly description: 'Premount For';
         readonly min: 0;
         readonly step: 1;
         readonly hiddenFromList: false;
         readonly keyframable: false;
     };
     readonly postmountFor: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
@@ -145,9 +145,9 @@ export declare const imgSchema: {
         readonly keyframable: false;
     };
     readonly cropLeft: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
-        readonly description: "Crop left";
+        readonly description: 'Crop left';
         readonly min: 0;
         readonly max: 1;
         readonly step: 0.01;
@@ -155,9 +155,9 @@ export declare const imgSchema: {
         readonly keyframable: true;
     };
     readonly cropRight: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
-        readonly description: "Crop right";
+        readonly description: 'Crop right';
         readonly min: 0;
         readonly max: 1;
         readonly step: 0.01;
@@ -165,9 +165,9 @@ export declare const imgSchema: {
         readonly keyframable: true;
     };
     readonly cropTop: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
-        readonly description: "Crop top";
+        readonly description: 'Crop top';
         readonly min: 0;
         readonly max: 1;
         readonly step: 0.01;
@@ -175,9 +175,9 @@ export declare const imgSchema: {
         readonly keyframable: true;
     };
     readonly cropBottom: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
-        readonly description: "Crop bottom";
+        readonly description: 'Crop bottom';
         readonly min: 0;
         readonly max: 1;
         readonly step: 0.01;
@@ -185,27 +185,27 @@ export declare const imgSchema: {
         readonly keyframable: true;
     };
     readonly durationInFrames: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: undefined;
         readonly min: 1;
         readonly step: 1;
         readonly hiddenFromList: true;
     };
     readonly from: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly step: 1;
         readonly hiddenFromList: true;
     };
     readonly trimBefore: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
         readonly hiddenFromList: true;
     };
     readonly freeze: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: null;
         readonly step: 1;
         readonly hiddenFromList: true;
@@ -214,24 +214,24 @@ export declare const imgSchema: {
     readonly name: import("./interactivity-schema.js").HiddenFieldSchema;
     readonly showInTimeline: import("./interactivity-schema.js").HiddenFieldSchema;
     readonly src: {
-        readonly type: "asset";
-        readonly assetType: "image";
+        readonly type: 'asset';
+        readonly assetType: 'image';
         readonly default: undefined;
-        readonly description: "Source";
+        readonly description: 'Source';
         readonly keyframable: false;
     };
 };
 export declare const Img: React.ComponentType<NativeImgProps & {
-    readonly maxRetries?: number | undefined;
-    readonly pauseWhenLoading?: boolean | undefined;
-    readonly delayRenderRetries?: number | undefined;
-    readonly delayRenderTimeoutInMilliseconds?: number | undefined;
-    readonly onImageFrame?: ((imageElement: HTMLImageElement) => void) | undefined;
-    readonly onImageError?: ((error: Error) => void) | undefined;
+    readonly maxRetries?: number;
+    readonly pauseWhenLoading?: boolean;
+    readonly delayRenderRetries?: number;
+    readonly delayRenderTimeoutInMilliseconds?: number;
+    readonly onImageFrame?: (imageElement: HTMLImageElement) => void;
+    readonly onImageError?: (error: Error) => void;
     readonly src: string;
-    readonly effects?: EffectsProp | undefined;
-    readonly effectsOutputSize?: EffectsOutputSize | undefined;
-    readonly showInTimeline?: boolean | undefined;
-    readonly name?: string | undefined;
+    readonly effects?: EffectsProp;
+    readonly effectsOutputSize?: EffectsOutputSize;
+    readonly showInTimeline?: boolean;
+    readonly name?: string;
 } & Omit<InteractiveBaseProps, "playbackRate"> & InteractiveCropProps & InteractivePremountProps>;
 export {};

package/dist/cjs/Img.js

@@ -24,6 +24,137 @@ const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js")
 function exponentialBackoff(errorCount) {
     return 1000 * 2 ** (errorCount - 1);
 }
+// Bind only the inputs each persistent callback needs. A render-scope closure
+// can otherwise keep replaced handlers alive, even when it never calls them.
+const setImageRef = (imageRef, ref, img) => {
+    imageRef.current = img;
+    if (typeof ref === 'function') {
+        ref(img);
+    }
+    else if (ref) {
+        ref.current = img;
+    }
+};
+const retryImage = (imageRef, timeout) => {
+    if (!imageRef.current) {
+        return;
+    }
+    const currentSrc = imageRef.current.src;
+    setTimeout(() => {
+        var _a;
+        if (!imageRef.current) {
+            // Component has been unmounted, do not retry
+            return;
+        }
+        const newSrc = (_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src;
+        if (newSrc !== currentSrc) {
+            // src has changed, do not retry
+            return;
+        }
+        imageRef.current.removeAttribute('src');
+        imageRef.current.setAttribute('src', newSrc);
+    }, timeout);
+};
+const handleImageError = ({ errors, imageRef, onError, onImageError, maxRetries, cancelRender, retryIn, }, e) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _j, _k, _l, _m;
+    if (!errors.current) {
+        return;
+    }
+    errors.current[(_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src] =
+        ((_j = errors.current[(_b = imageRef.current) === null || _b === void 0 ? void 0 : _b.src]) !== null && _j !== void 0 ? _j : 0) + 1;
+    if ((onError || onImageError) &&
+        ((_k = errors.current[(_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.src]) !== null && _k !== void 0 ? _k : 0) > maxRetries) {
+        onError === null || onError === void 0 ? void 0 : onError(e);
+        onImageError === null || onImageError === void 0 ? void 0 : onImageError(new Error('Error loading image with src: ' +
+            (0, truncate_src_for_label_js_1.truncateSrcForLabel)((_d = imageRef.current) === null || _d === void 0 ? void 0 : _d.src)));
+        return;
+    }
+    if (((_l = errors.current[(_e = imageRef.current) === null || _e === void 0 ? void 0 : _e.src]) !== null && _l !== void 0 ? _l : 0) <= maxRetries) {
+        const backoff = exponentialBackoff((_m = errors.current[(_f = imageRef.current) === null || _f === void 0 ? void 0 : _f.src]) !== null && _m !== void 0 ? _m : 0);
+        // eslint-disable-next-line no-console
+        console.warn(`Could not load image with source ${(0, truncate_src_for_label_js_1.truncateSrcForLabel)((_g = imageRef.current) === null || _g === void 0 ? void 0 : _g.src)}, retrying again in ${backoff}ms`);
+        retryIn(backoff);
+        return;
+    }
+    try {
+        cancelRender('Error loading image with src: ' +
+            (0, truncate_src_for_label_js_1.truncateSrcForLabel)((_h = imageRef.current) === null || _h === void 0 ? void 0 : _h.src));
+    }
+    catch (_o) {
+        // cancelRender() intentionally throws after storing the error in scope.
+        // In async image callbacks, we rely on the stored error for renderer propagation.
+    }
+};
+// Keep the loading cleanup outside the render scope too: it can outlive many
+// handler replacements while the source and onImageFrame stay unchanged.
+const loadImage = ({ imageRef, errors, actualSrc, delayRenderRetries, delayRenderTimeoutInMilliseconds, onImageFrame, delayRender, continueRender, setIsLoading, }) => {
+    var _a, _b;
+    if (((_b = (_a = window.process) === null || _a === void 0 ? void 0 : _a.env) === null || _b === void 0 ? void 0 : _b.NODE_ENV) === 'test') {
+        if (imageRef.current) {
+            imageRef.current.src = actualSrc;
+        }
+        return;
+    }
+    const { current } = imageRef;
+    if (!current) {
+        return;
+    }
+    setIsLoading(true);
+    const newHandle = delayRender('Loading <Img> with src=' + (0, truncate_src_for_label_js_1.truncateSrcForLabel)(actualSrc), {
+        retries: delayRenderRetries !== null && delayRenderRetries !== void 0 ? delayRenderRetries : undefined,
+        timeoutInMilliseconds: delayRenderTimeoutInMilliseconds !== null && delayRenderTimeoutInMilliseconds !== void 0 ? delayRenderTimeoutInMilliseconds : undefined,
+    });
+    let unmounted = false;
+    const onComplete = () => {
+        var _a, _b, _c;
+        var _d;
+        // the decode() promise isn't cancelable -- it may still resolve after unmounting
+        if (unmounted) {
+            continueRender(newHandle);
+            return;
+        }
+        if (((_d = errors.current[(_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src]) !== null && _d !== void 0 ? _d : 0) > 0) {
+            delete errors.current[(_b = imageRef.current) === null || _b === void 0 ? void 0 : _b.src];
+            // eslint-disable-next-line no-console
+            console.info(`Retry successful - ${(0, truncate_src_for_label_js_1.truncateSrcForLabel)((_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.src)} is now loaded`);
+        }
+        if (current) {
+            onImageFrame === null || onImageFrame === void 0 ? void 0 : onImageFrame(current);
+        }
+        setIsLoading(false);
+        continueRender(newHandle);
+    };
+    if (!imageRef.current) {
+        onComplete();
+        return;
+    }
+    current.src = actualSrc;
+    current
+        .decode()
+        .then(onComplete)
+        .catch((err) => {
+        // fall back to onload event if decode() fails
+        // eslint-disable-next-line no-console
+        console.warn(err);
+        // HTMLImageElement.complete is also true for broken images (e.g. 404),
+        // so only treat it as loaded if intrinsic dimensions are available.
+        if (current.complete &&
+            current.naturalWidth > 0 &&
+            current.naturalHeight > 0) {
+            onComplete();
+        }
+        else {
+            current.addEventListener('load', onComplete);
+        }
+    });
+    // If tag gets unmounted, clear pending handles because image is not going to load
+    return () => {
+        unmounted = true;
+        current.removeEventListener('load', onComplete);
+        continueRender(newHandle);
+    };
+};
 const ImgContent = ({ onError, onImageError, maxRetries = 2, src, pauseWhenLoading, delayRenderRetries, delayRenderTimeoutInMilliseconds, onImageFrame, crossOrigin, decoding, ref, ...props }) => {
     const imageRef = (0, react_1.useRef)(null);
     const errors = (0, react_1.useRef)({});
@@ -34,70 +165,21 @@ const ImgContent = ({ onError, onImageError, maxRetries = 2, src, pauseWhenLoadi
     if (!_propsValid) {
         throw new Error('typecheck error');
     }
-    const imageCallbackRef = (0, react_1.useCallback)((img) => {
-        imageRef.current = img;
-        if (typeof ref === 'function') {
-            ref(img);
-        }
-        else if (ref) {
-            ref.current = img;
-        }
-    }, [ref]);
+    const imageCallbackRef = (0, react_1.useMemo)(() => setImageRef.bind(null, imageRef, ref !== null && ref !== void 0 ? ref : null), [ref]);
     const actualSrc = (0, prefetch_js_1.usePreload)(src);
-    const retryIn = (0, react_1.useCallback)((timeout) => {
-        if (!imageRef.current) {
-            return;
-        }
-        const currentSrc = imageRef.current.src;
-        setTimeout(() => {
-            var _a;
-            if (!imageRef.current) {
-                // Component has been unmounted, do not retry
-                return;
-            }
-            const newSrc = (_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src;
-            if (newSrc !== currentSrc) {
-                // src has changed, do not retry
-                return;
-            }
-            imageRef.current.removeAttribute('src');
-            imageRef.current.setAttribute('src', newSrc);
-        }, timeout);
-    }, []);
+    const retryIn = (0, react_1.useMemo)(() => retryImage.bind(null, imageRef), []);
     const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
     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 didGetError = (0, react_1.useCallback)((e) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        var _j, _k, _l, _m;
-        if (!errors.current) {
-            return;
-        }
-        errors.current[(_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src] =
-            ((_j = errors.current[(_b = imageRef.current) === null || _b === void 0 ? void 0 : _b.src]) !== null && _j !== void 0 ? _j : 0) + 1;
-        if ((onError || onImageError) &&
-            ((_k = errors.current[(_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.src]) !== null && _k !== void 0 ? _k : 0) > maxRetries) {
-            onError === null || onError === void 0 ? void 0 : onError(e);
-            onImageError === null || onImageError === void 0 ? void 0 : onImageError(new Error('Error loading image with src: ' +
-                (0, truncate_src_for_label_js_1.truncateSrcForLabel)((_d = imageRef.current) === null || _d === void 0 ? void 0 : _d.src)));
-            return;
-        }
-        if (((_l = errors.current[(_e = imageRef.current) === null || _e === void 0 ? void 0 : _e.src]) !== null && _l !== void 0 ? _l : 0) <= maxRetries) {
-            const backoff = exponentialBackoff((_m = errors.current[(_f = imageRef.current) === null || _f === void 0 ? void 0 : _f.src]) !== null && _m !== void 0 ? _m : 0);
-            // eslint-disable-next-line no-console
-            console.warn(`Could not load image with source ${(0, truncate_src_for_label_js_1.truncateSrcForLabel)((_g = imageRef.current) === null || _g === void 0 ? void 0 : _g.src)}, retrying again in ${backoff}ms`);
-            retryIn(backoff);
-            return;
-        }
-        try {
-            cancelRender('Error loading image with src: ' +
-                (0, truncate_src_for_label_js_1.truncateSrcForLabel)((_h = imageRef.current) === null || _h === void 0 ? void 0 : _h.src));
-        }
-        catch (_o) {
-            // cancelRender() intentionally throws after storing the error in scope.
-            // In async image callbacks, we rely on the stored error for renderer propagation.
-        }
-    }, [cancelRender, maxRetries, onError, onImageError, retryIn]);
+    const didGetError = (0, react_1.useMemo)(() => handleImageError.bind(null, {
+        errors,
+        imageRef,
+        onError: onError !== null && onError !== void 0 ? onError : null,
+        onImageError: onImageError !== null && onImageError !== void 0 ? onImageError : null,
+        maxRetries,
+        cancelRender,
+        retryIn,
+    }), [cancelRender, maxRetries, onError, onImageError, retryIn]);
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
@@ -112,74 +194,20 @@ const ImgContent = ({ onError, onImageError, maxRetries = 2, src, pauseWhenLoadi
             isPremounting,
             pauseWhenLoading,
         ]);
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        (0, react_1.useLayoutEffect)(() => {
-            var _a, _b;
-            if (((_b = (_a = window.process) === null || _a === void 0 ? void 0 : _a.env) === null || _b === void 0 ? void 0 : _b.NODE_ENV) === 'test') {
-                if (imageRef.current) {
-                    imageRef.current.src = actualSrc;
-                }
-                return;
-            }
-            const { current } = imageRef;
-            if (!current) {
-                return;
-            }
-            setIsLoading(true);
-            const newHandle = delayRender('Loading <Img> with src=' + (0, truncate_src_for_label_js_1.truncateSrcForLabel)(actualSrc), {
-                retries: delayRenderRetries !== null && delayRenderRetries !== void 0 ? delayRenderRetries : undefined,
-                timeoutInMilliseconds: delayRenderTimeoutInMilliseconds !== null && delayRenderTimeoutInMilliseconds !== void 0 ? delayRenderTimeoutInMilliseconds : undefined,
-            });
-            let unmounted = false;
-            const onComplete = () => {
-                var _a, _b, _c;
-                var _d;
-                // the decode() promise isn't cancelable -- it may still resolve after unmounting
-                if (unmounted) {
-                    continueRender(newHandle);
-                    return;
-                }
-                if (((_d = errors.current[(_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src]) !== null && _d !== void 0 ? _d : 0) > 0) {
-                    delete errors.current[(_b = imageRef.current) === null || _b === void 0 ? void 0 : _b.src];
-                    // eslint-disable-next-line no-console
-                    console.info(`Retry successful - ${(0, truncate_src_for_label_js_1.truncateSrcForLabel)((_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.src)} is now loaded`);
-                }
-                if (current) {
-                    onImageFrame === null || onImageFrame === void 0 ? void 0 : onImageFrame(current);
-                }
-                setIsLoading(false);
-                continueRender(newHandle);
-            };
-            if (!imageRef.current) {
-                onComplete();
-                return;
-            }
-            current.src = actualSrc;
-            current
-                .decode()
-                .then(onComplete)
-                .catch((err) => {
-                // fall back to onload event if decode() fails
-                // eslint-disable-next-line no-console
-                console.warn(err);
-                // HTMLImageElement.complete is also true for broken images (e.g. 404),
-                // so only treat it as loaded if intrinsic dimensions are available.
-                if (current.complete &&
-                    current.naturalWidth > 0 &&
-                    current.naturalHeight > 0) {
-                    onComplete();
-                }
-                else {
-                    current.addEventListener('load', onComplete);
-                }
-            });
-            // If tag gets unmounted, clear pending handles because image is not going to load
-            return () => {
-                unmounted = true;
-                current.removeEventListener('load', onComplete);
-                continueRender(newHandle);
-            };
-        }, [
+        // Binding prevents production minification from inlining this scope
+        // back into the component and retaining unrelated handlers.
+        // eslint-disable-next-line react-hooks/rules-of-hooks, react-hooks/exhaustive-deps
+        (0, react_1.useLayoutEffect)(loadImage.bind(null, {
+            imageRef,
+            errors,
+            actualSrc,
+            delayRenderRetries: delayRenderRetries !== null && delayRenderRetries !== void 0 ? delayRenderRetries : null,
+            delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds !== null && delayRenderTimeoutInMilliseconds !== void 0 ? delayRenderTimeoutInMilliseconds : null,
+            onImageFrame: onImageFrame !== null && onImageFrame !== void 0 ? onImageFrame : null,
+            delayRender,
+            continueRender,
+            setIsLoading,
+        }), [
             actualSrc,
             delayRenderRetries,
             delayRenderTimeoutInMilliseconds,
@@ -197,7 +225,7 @@ const ImgContent = ({ onError, onImageError, maxRetries = 2, src, pauseWhenLoadi
     // `src` is assigned imperatively to this element in the layout effect above.
     // The element may paint while `decode()` is pending; `delayRender()` only
     // blocks frame rendering.
-    return (jsx_runtime_1.jsx("img", { ...props, ref: imageCallbackRef, crossOrigin: crossOriginValue, onError: didGetError, decoding: isRendering ? 'sync' : decoding }));
+    return ((0, jsx_runtime_1.jsx)("img", { ...props, ref: imageCallbackRef, crossOrigin: crossOriginValue, onError: didGetError, decoding: isRendering ? 'sync' : decoding }));
 };
 const NativeImgInner = ({ hidden, name, showInTimeline, src, from, trimBefore, loop, durationInFrames, freeze, premountFor, postmountFor, style, styleWhilePremounted, styleWhilePostmounted, cropLeft, cropRight, cropTop, cropBottom, controls, ...props }) => {
     if (!src) {
@@ -229,7 +257,7 @@ const NativeImgInner = ({ hidden, name, showInTimeline, src, from, trimBefore, l
         style: premountingStyle,
         componentName: '<Img />',
     });
-    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, _remotionInternalIsPremounting: premountingActive, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, loop: loop, durationInFrames: durationInFrames, freeze: freeze, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _remotionInternalIsMedia: isMedia, _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, children: jsx_runtime_1.jsx(sequence_activity_context_js_1.SequenceContent, { children: jsx_runtime_1.jsx(ImgContent, { src: src, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, ...props }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, _remotionInternalIsPremounting: premountingActive, children: (0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, loop: loop, durationInFrames: durationInFrames, freeze: freeze, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _remotionInternalIsMedia: isMedia, _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, children: (0, jsx_runtime_1.jsx)(sequence_activity_context_js_1.SequenceContent, { children: (0, jsx_runtime_1.jsx)(ImgContent, { src: src, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, ...props }) }) }) }));
 };
 const CanvasImageWithPrivateProps = index_js_1.CanvasImage;
 exports.imgSchema = {
@@ -290,7 +318,7 @@ const ImgInner = ({ effects = [], effectsOutputSize, ref, hidden, name, showInTi
     var _a;
     const shouldPauseWhenLoading = (0, v5_flag_js_1.resolveV5Default)(pauseWhenLoading);
     if (effects.length === 0) {
-        return (jsx_runtime_1.jsx(NativeImgInner, { ...props, ref: ref, hidden: hidden, name: name, 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, cropLeft: cropLeft, cropRight: cropRight, cropTop: cropTop, cropBottom: cropBottom, id: id, pauseWhenLoading: shouldPauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, onImageError: onImageError }));
+        return ((0, jsx_runtime_1.jsx)(NativeImgInner, { ...props, ref: ref, hidden: hidden, name: name, 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, cropLeft: cropLeft, cropRight: cropRight, cropTop: cropTop, cropBottom: cropBottom, id: id, pauseWhenLoading: shouldPauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, onImageError: onImageError }));
     }
     if (!src) {
         throw new Error('No "src" prop was passed to <Img>.');
@@ -305,7 +333,7 @@ const ImgInner = ({ effects = [], effectsOutputSize, ref, hidden, name, showInTi
     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, effectsOutputSize: effectsOutputSize, className: className, style: style, cropLeft: cropLeft, cropRight: cropRight, cropTop: cropTop, cropBottom: cropBottom, id: id, onError: onImageError, pauseWhenLoading: shouldPauseWhenLoading, 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, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _remotionInternalCropComponentName: "<Img />", controls: controls, ...canvasProps }));
+    return ((0, jsx_runtime_1.jsx)(CanvasImageWithPrivateProps, { src: src, width: canvasWidth, height: canvasHeight, fit: canvasFit, effects: effects, effectsOutputSize: effectsOutputSize, className: className, style: style, cropLeft: cropLeft, cropRight: cropRight, cropTop: cropTop, cropBottom: cropBottom, id: id, onError: onImageError, pauseWhenLoading: shouldPauseWhenLoading, 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, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _remotionInternalCropComponentName: "<Img />", controls: controls, ...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.