remotion 4.0.470 → 4.0.471

package/dist/cjs/AbsoluteFill.js

@@ -106,7 +106,7 @@ const AbsoluteFillRefForwarding = (props, ref) => {
             ...style,
         };
     }, [other.className, style]);
-    return (0, jsx_runtime_1.jsx)("div", { ref: ref, style: actualStyle, ...other });
+    return jsx_runtime_1.jsx("div", { ref: ref, style: actualStyle, ...other });
 };
 /*
  * @description A helper component which renders an absolutely positioned <div> element with full width, height, and flex display suited for content layering.

package/dist/cjs/CanUseRemotionHooks.js

@@ -5,6 +5,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 exports.CanUseRemotionHooks = (0, react_1.createContext)(false);
 const CanUseRemotionHooksProvider = ({ children }) => {
-    return ((0, jsx_runtime_1.jsx)(exports.CanUseRemotionHooks.Provider, { value: true, children: children }));
+    return (jsx_runtime_1.jsx(exports.CanUseRemotionHooks.Provider, { value: true, children: children }));
 };
 exports.CanUseRemotionHooksProvider = CanUseRemotionHooksProvider;

package/dist/cjs/Composition.d.ts

@@ -59,5 +59,5 @@ export type CompositionProps<Schema extends AnyZodObject, Props extends Record<s
     readonly id: string;
     readonly schema?: Schema;
 } & CompositionCalculateMetadataOrExplicit<Schema, Props> & CompProps<Props> & PropsIfHasProps<Schema, Props>;
-export declare const Composition: <Schema extends AnyZodObject, Props extends Record<string, unknown>>(props: CompositionProps<Schema, Props>) => import("react/jsx-runtime.js").JSX.Element | null;
+export declare const Composition: <Schema extends AnyZodObject, Props extends Record<string, unknown>>(props: CompositionProps<Schema, Props>) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/cjs/Composition.js

@@ -116,7 +116,7 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
                 resolved.type !== 'success-and-refreshing')) {
             return null;
         }
-        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(CompositionErrorBoundary_js_1.CompositionErrorBoundary, { onError: onError, onClear: onClear, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(loading_indicator_js_1.Loading, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...((_c = resolved.result.props) !== null && _c !== void 0 ? _c : {}) }) }) }) }), (0, portal_node_js_1.portalNode)());
+        return (0, react_dom_1.createPortal)(jsx_runtime_1.jsx(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: jsx_runtime_1.jsx(CompositionErrorBoundary_js_1.CompositionErrorBoundary, { onError: onError, onClear: onClear, children: jsx_runtime_1.jsx(react_1.Suspense, { fallback: jsx_runtime_1.jsx(loading_indicator_js_1.Loading, {}), children: jsx_runtime_1.jsx(Comp, { ...((_c = resolved.result.props) !== null && _c !== void 0 ? _c : {}) }) }) }) }), (0, portal_node_js_1.portalNode)());
     }
     if (environment.isRendering &&
         video &&
@@ -128,7 +128,7 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
                 resolved.type !== 'success-and-refreshing')) {
             return null;
         }
-        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(Fallback, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...((_d = resolved.result.props) !== null && _d !== void 0 ? _d : {}) }) }) }), (0, portal_node_js_1.portalNode)());
+        return (0, react_dom_1.createPortal)(jsx_runtime_1.jsx(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: jsx_runtime_1.jsx(react_1.Suspense, { fallback: jsx_runtime_1.jsx(Fallback, {}), children: jsx_runtime_1.jsx(Comp, { ...((_d = resolved.result.props) !== null && _d !== void 0 ? _d : {}) }) }) }), (0, portal_node_js_1.portalNode)());
     }
     return null;
 };
@@ -142,6 +142,6 @@ const Composition = (props) => {
         return null;
     }
     // @ts-expect-error
-    return (0, jsx_runtime_1.jsx)(InnerComposition, { ...props });
+    return jsx_runtime_1.jsx(InnerComposition, { ...props });
 };
 exports.Composition = Composition;

package/dist/cjs/CompositionErrorBoundary.js

@@ -18,11 +18,8 @@ const getHot = () => {
     }
 };
 class CompositionErrorBoundary extends react_1.default.Component {
-    constructor() {
-        super(...arguments);
-        this.state = { hasError: false };
-        this.hmrStatusHandler = null;
-    }
+    state = { hasError: false };
+    hmrStatusHandler = null;
     static getDerivedStateFromError() {
         return { hasError: true };
     }

package/dist/cjs/CompositionManagerProvider.d.ts

@@ -2,9 +2,9 @@ import { type AnyComposition } from './CompositionManager';
 import type { CanvasContent } from './CompositionManagerContext';
 import type { BaseMetadata } from './CompositionManagerContext.js';
 export declare const CompositionManagerProvider: ({ children, onlyRenderComposition, currentCompositionMetadata, initialCompositions, initialCanvasContent, }: {
-    readonly children: React.ReactNode;
+    readonly children: import("react").ReactNode;
     readonly onlyRenderComposition: string | null;
     readonly currentCompositionMetadata: BaseMetadata | null;
     readonly initialCompositions: AnyComposition[];
     readonly initialCanvasContent: CanvasContent | null;
-}) => import("react/jsx-runtime.js").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/CompositionManagerProvider.js

@@ -77,6 +77,6 @@ const CompositionManagerProvider = ({ children, onlyRenderComposition, currentCo
             canvasContent,
         };
     }, [compositions, folders, currentCompositionMetadata, canvasContent]);
-    return ((0, jsx_runtime_1.jsx)(CompositionManagerContext_1.CompositionManager.Provider, { value: compositionManagerContextValue, children: (0, jsx_runtime_1.jsx)(CompositionManagerContext_1.CompositionSetters.Provider, { value: compositionManagerSetters, children: children }) }));
+    return (jsx_runtime_1.jsx(CompositionManagerContext_1.CompositionManager.Provider, { value: compositionManagerContextValue, children: jsx_runtime_1.jsx(CompositionManagerContext_1.CompositionSetters.Provider, { value: compositionManagerSetters, children: children }) }));
 };
 exports.CompositionManagerProvider = CompositionManagerProvider;

package/dist/cjs/EditorProps.d.ts

@@ -13,9 +13,9 @@ export declare const EditorPropsContext: React.Context<EditorPropsContextType>;
 export declare const timeValueRef: React.RefObject<{
     goToFrame: () => void;
     seek: (newFrame: number) => void;
-    play: (e?: SyntheticEvent | PointerEvent) => void;
+    play: (e?: PointerEvent | SyntheticEvent<Element, Event> | undefined) => void;
     pause: () => void;
-    toggle: (e?: SyntheticEvent | PointerEvent) => void;
+    toggle: (e?: PointerEvent | SyntheticEvent<Element, Event> | undefined) => void;
 } | null>;
 export declare const EditorPropsProvider: React.FC<{
     readonly children: React.ReactNode;

package/dist/cjs/EditorProps.js

@@ -59,6 +59,6 @@ const EditorPropsProvider = ({ children }) => {
     const ctx = (0, react_1.useMemo)(() => {
         return { props, updateProps };
     }, [props, updateProps]);
-    return ((0, jsx_runtime_1.jsx)(exports.EditorPropsContext.Provider, { value: ctx, children: children }));
+    return (jsx_runtime_1.jsx(exports.EditorPropsContext.Provider, { value: ctx, children: children }));
 };
 exports.EditorPropsProvider = EditorPropsProvider;

package/dist/cjs/Folder.js

@@ -41,6 +41,6 @@ const Folder = ({ name, children }) => {
         unregisterFolder,
         nonce,
     ]);
-    return ((0, jsx_runtime_1.jsx)(exports.FolderContext.Provider, { value: value, children: children }));
+    return (jsx_runtime_1.jsx(exports.FolderContext.Provider, { value: value, children: children }));
 };
 exports.Folder = Folder;

package/dist/cjs/HtmlInCanvas.d.ts

@@ -51,7 +51,7 @@ export declare const HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = "HTML in Canvas is not
 export type HtmlInCanvasOnPaint = (params: HtmlInCanvasOnPaintParams) => void | Promise<void>;
 export type HtmlInCanvasOnInitCleanup = () => void;
 export type HtmlInCanvasOnInit = (params: HtmlInCanvasOnPaintParams) => HtmlInCanvasOnInitCleanup | Promise<HtmlInCanvasOnInitCleanup>;
-export type HtmlInCanvasProps = Omit<SequenceProps, 'children' | 'durationInFrames' | keyof LayoutAndStyle | '_remotionInternalEffects'> & Omit<AbsoluteFillLayout, 'layout' | 'styleWhilePostmounted' | 'postmountFor' | 'premountFor' | 'styleWhilePremounted'> & {
+export type HtmlInCanvasProps = Omit<SequenceProps, 'children' | 'durationInFrames' | keyof LayoutAndStyle | '_remotionInternalEffects' | '_remotionInternalRefForOutline'> & Omit<AbsoluteFillLayout, 'layout' | 'styleWhilePostmounted' | 'postmountFor' | 'premountFor' | 'styleWhilePremounted'> & {
     readonly durationInFrames?: number;
     readonly width: number;
     readonly height: number;
@@ -60,6 +60,14 @@ export type HtmlInCanvasProps = Omit<SequenceProps, 'children' | 'durationInFram
     readonly onPaint?: HtmlInCanvasOnPaint;
     readonly onInit?: HtmlInCanvasOnInit;
 };
-export declare const HtmlInCanvas: React.ForwardRefExoticComponent<HtmlInCanvasProps & React.RefAttributes<HTMLCanvasElement>> & {
-    readonly isSupported: typeof isHtmlInCanvasSupported;
+export declare const HtmlInCanvas: React.ForwardRefExoticComponent<Omit<SequenceProps, "_remotionInternalEffects" | "_remotionInternalRefForOutline" | "children" | "durationInFrames" | "layout"> & Omit<AbsoluteFillLayout, "layout" | "postmountFor" | "premountFor" | "styleWhilePostmounted" | "styleWhilePremounted"> & {
+    readonly durationInFrames?: number | undefined;
+    readonly width: number;
+    readonly height: number;
+    readonly effects?: EffectsProp | undefined;
+    readonly children: React.ReactNode;
+    readonly onPaint?: HtmlInCanvasOnPaint | undefined;
+    readonly onInit?: HtmlInCanvasOnInit | undefined;
+} & React.RefAttributes<HTMLCanvasElement>> & {
+    readonly isSupported: () => boolean;
 };

package/dist/cjs/HtmlInCanvas.js

@@ -228,16 +228,27 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
     if (isInsideAncestorHtmlInCanvas) {
         throw new Error('<HtmlInCanvas> effects cannot be nested together. Chrome will only display the outer effect. Consider merging the effects into one if you can.');
     }
-    return ((0, jsx_runtime_1.jsx)(HtmlInCanvasAncestorContext.Provider, { value: true, children: (0, jsx_runtime_1.jsx)("canvas", { ref: setLayoutCanvasRef, width: width, height: height, style: style, children: (0, jsx_runtime_1.jsx)("div", { ref: divRef, style: innerStyle, children: children }) }, canvasSizeKey) }));
+    return (jsx_runtime_1.jsx(HtmlInCanvasAncestorContext.Provider, { value: true, children: jsx_runtime_1.jsx("canvas", { ref: setLayoutCanvasRef, width: width, height: height, style: style, children: jsx_runtime_1.jsx("div", { ref: divRef, style: innerStyle, children: children }) }, canvasSizeKey) }));
 });
 HtmlInCanvasContent.displayName = 'HtmlInCanvasContent';
 const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = [], children, onPaint, onInit, _experimentalControls: controls, style, durationInFrames, name, ...sequenceProps }, ref) => {
     const { durationInFrames: videoDuration } = (0, use_video_config_js_1.useVideoConfig)();
     const resolvedDuration = durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : videoDuration;
     const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
-    return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { durationInFrames: resolvedDuration, name: name !== null && name !== void 0 ? name : '<HtmlInCanvas>', _remotionInternalDocumentationLink: name === undefined
+    const actualRef = (0, react_1.useRef)(null);
+    const setCanvasRef = (0, react_1.useCallback)((node) => {
+        actualRef.current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current =
+                node;
+        }
+    }, [ref]);
+    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { durationInFrames: resolvedDuration, name: name !== null && name !== void 0 ? name : '<HtmlInCanvas>', _remotionInternalDocumentationLink: name === undefined
             ? 'https://www.remotion.dev/docs/remotion/html-in-canvas'
-            : undefined, _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, layout: "none", ...sequenceProps, children: (0, jsx_runtime_1.jsx)(HtmlInCanvasContent, { ref: ref, width: width, height: height, effects: effects, onPaint: onPaint, onInit: onInit, controls: controls, style: style, children: children }) }));
+            : undefined, _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalRefForOutline: actualRef, layout: "none", ...sequenceProps, children: jsx_runtime_1.jsx(HtmlInCanvasContent, { ref: setCanvasRef, width: width, height: height, effects: effects, onPaint: onPaint, onInit: onInit, controls: controls, style: style, children: children }) }));
 });
 HtmlInCanvasInner.displayName = 'HtmlInCanvas';
 const htmlInCanvasSchema = {

package/dist/cjs/IFrame.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 export declare const IFrame: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLIFrameElement> & React.IframeHTMLAttributes<HTMLIFrameElement> & {
-    readonly delayRenderRetries?: number;
-    readonly delayRenderTimeoutInMilliseconds?: number;
+    readonly delayRenderRetries?: number | undefined;
+    readonly delayRenderTimeoutInMilliseconds?: number | undefined;
 }, "ref"> & React.RefAttributes<HTMLIFrameElement>>;

package/dist/cjs/IFrame.js

@@ -24,7 +24,7 @@ const IFrameRefForwarding = ({ onLoad, onError, delayRenderRetries, delayRenderT
             console.error('Error loading iframe:', e, 'Handle the event using the onError() prop to make this message disappear.');
         }
     }, [handle, onError, continueRender]);
-    return ((0, jsx_runtime_1.jsx)("iframe", { referrerPolicy: "strict-origin-when-cross-origin", ...props, ref: ref, onError: didGetError, onLoad: didLoad }));
+    return (jsx_runtime_1.jsx("iframe", { referrerPolicy: "strict-origin-when-cross-origin", ...props, ref: ref, onError: didGetError, onLoad: didLoad }));
 };
 /*
  * @description The <IFrame /> can be used like a regular <iframe> HTML tag.

package/dist/cjs/Img.d.ts

@@ -18,7 +18,6 @@ export type ImgProps = NativeImgProps & {
     readonly stack?: string;
 } & Pick<SequenceProps, 'durationInFrames' | 'from' | 'hidden'>;
 export declare const imgSchema: {
-    readonly hidden: import("./sequence-field-schema.js").SequenceFieldSchema;
     readonly 'style.translate': {
         readonly type: "translate";
         readonly step: 1;
@@ -47,20 +46,21 @@ export declare const imgSchema: {
         readonly default: 1;
         readonly description: "Opacity";
     };
+    readonly hidden: import("./sequence-field-schema.js").SequenceFieldSchema;
 };
 export declare const Img: React.ComponentType<NativeImgProps & {
-    readonly maxRetries?: number;
-    readonly pauseWhenLoading?: boolean;
-    readonly delayRenderRetries?: number;
-    readonly delayRenderTimeoutInMilliseconds?: number;
-    readonly onImageFrame?: (imageElement: HTMLImageElement) => void;
+    readonly maxRetries?: number | undefined;
+    readonly pauseWhenLoading?: boolean | undefined;
+    readonly delayRenderRetries?: number | undefined;
+    readonly delayRenderTimeoutInMilliseconds?: number | undefined;
+    readonly onImageFrame?: ((imageElement: HTMLImageElement) => void) | undefined;
     readonly src: string;
-    readonly effects?: EffectsProp;
-    readonly showInTimeline?: boolean;
-    readonly name?: string;
+    readonly effects?: EffectsProp | undefined;
+    readonly showInTimeline?: boolean | undefined;
+    readonly name?: string | undefined;
     /**
      * @deprecated For internal use only
      */
-    readonly stack?: string;
-} & Pick<SequenceProps, "hidden" | "durationInFrames" | "from">>;
+    readonly stack?: string | undefined;
+} & Pick<SequenceProps, "durationInFrames" | "from" | "hidden">>;
 export {};

package/dist/cjs/Img.js

@@ -18,7 +18,7 @@ const wrap_in_schema_js_1 = require("./wrap-in-schema.js");
 function exponentialBackoff(errorCount) {
     return 1000 * 2 ** (errorCount - 1);
 }
-const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRenderRetries, delayRenderTimeoutInMilliseconds, onImageFrame, crossOrigin, decoding, ref, ...props }) => {
+const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRenderRetries, delayRenderTimeoutInMilliseconds, onImageFrame, crossOrigin, decoding, ref, refForOutline, ...props }) => {
     const imageRef = (0, react_1.useRef)(null);
     const errors = (0, react_1.useRef)({});
     const { delayPlayback } = (0, use_buffer_state_js_1.useBufferState)();
@@ -27,9 +27,16 @@ const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRende
     if (!_propsValid) {
         throw new Error('typecheck error');
     }
-    (0, react_1.useImperativeHandle)(ref, () => {
-        return imageRef.current;
-    }, []);
+    const imageCallbackRef = (0, react_1.useCallback)((img) => {
+        imageRef.current = img;
+        refForOutline.current = img;
+        if (typeof ref === 'function') {
+            ref(img);
+        }
+        else if (ref) {
+            ref.current = img;
+        }
+    }, [ref, refForOutline]);
     const actualSrc = (0, prefetch_js_1.usePreload)(src);
     const retryIn = (0, react_1.useCallback)((timeout) => {
         if (!imageRef.current) {
@@ -53,27 +60,28 @@ const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRende
     }, []);
     const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
     const didGetError = (0, react_1.useCallback)((e) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        var _a, _b, _c, _d, _e, _f, _g;
+        var _h, _j, _k, _l;
         if (!errors.current) {
             return;
         }
         errors.current[(_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src] =
-            ((_c = errors.current[(_b = imageRef.current) === null || _b === void 0 ? void 0 : _b.src]) !== null && _c !== void 0 ? _c : 0) + 1;
+            ((_h = errors.current[(_b = imageRef.current) === null || _b === void 0 ? void 0 : _b.src]) !== null && _h !== void 0 ? _h : 0) + 1;
         if (onError &&
-            ((_e = errors.current[(_d = imageRef.current) === null || _d === void 0 ? void 0 : _d.src]) !== null && _e !== void 0 ? _e : 0) > maxRetries) {
+            ((_j = errors.current[(_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.src]) !== null && _j !== void 0 ? _j : 0) > maxRetries) {
             onError(e);
             return;
         }
-        if (((_g = errors.current[(_f = imageRef.current) === null || _f === void 0 ? void 0 : _f.src]) !== null && _g !== void 0 ? _g : 0) <= maxRetries) {
-            const backoff = exponentialBackoff((_j = errors.current[(_h = imageRef.current) === null || _h === void 0 ? void 0 : _h.src]) !== null && _j !== void 0 ? _j : 0);
+        if (((_k = errors.current[(_d = imageRef.current) === null || _d === void 0 ? void 0 : _d.src]) !== null && _k !== void 0 ? _k : 0) <= maxRetries) {
+            const backoff = exponentialBackoff((_l = errors.current[(_e = imageRef.current) === null || _e === void 0 ? void 0 : _e.src]) !== null && _l !== void 0 ? _l : 0);
             // eslint-disable-next-line no-console
-            console.warn(`Could not load image with source ${(0, truncate_src_for_label_js_1.truncateSrcForLabel)((_k = imageRef.current) === null || _k === void 0 ? void 0 : _k.src)}, retrying again in ${backoff}ms`);
+            console.warn(`Could not load image with source ${(0, truncate_src_for_label_js_1.truncateSrcForLabel)((_f = imageRef.current) === null || _f === void 0 ? void 0 : _f.src)}, retrying again in ${backoff}ms`);
             retryIn(backoff);
             return;
         }
         try {
             cancelRender('Error loading image with src: ' +
-                (0, truncate_src_for_label_js_1.truncateSrcForLabel)((_l = imageRef.current) === null || _l === void 0 ? void 0 : _l.src));
+                (0, truncate_src_for_label_js_1.truncateSrcForLabel)((_g = imageRef.current) === null || _g === void 0 ? void 0 : _g.src));
         }
         catch (_m) {
             // cancelRender() intentionally throws after storing the error in scope.
@@ -105,16 +113,17 @@ const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRende
                 : () => undefined;
             let unmounted = false;
             const onComplete = () => {
-                var _a, _b, _c, _d;
+                var _a, _b, _c;
+                var _d;
                 // the decode() promise isn't cancelable -- it may still resolve after unmounting
                 if (unmounted) {
                     continueRender(newHandle);
                     return;
                 }
-                if (((_b = errors.current[(_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src]) !== null && _b !== void 0 ? _b : 0) > 0) {
-                    delete errors.current[(_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.src];
+                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)((_d = imageRef.current) === null || _d === void 0 ? void 0 : _d.src)} is now loaded`);
+                    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);
@@ -172,13 +181,13 @@ const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRende
         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: isRendering ? 'sync' : decoding }));
+    return (jsx_runtime_1.jsx("img", { ...props, ref: imageCallbackRef, crossOrigin: crossOriginValue, onError: didGetError, decoding: isRendering ? 'sync' : decoding }));
 };
-const NativeImgInner = ({ hidden, name, stack, showInTimeline, src, from, durationInFrames, _experimentalControls: controls, ...props }) => {
+const NativeImgInner = ({ hidden, name, stack, showInTimeline, src, from, durationInFrames, _experimentalControls: controls, _remotionInternalRefForOutline: refForOutline, ...props }) => {
     if (!src) {
         throw new Error('No "src" prop was passed to <Img>.');
     }
-    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, _remotionInternalStack: stack, _remotionInternalDocumentationLink: name === undefined ? 'https://www.remotion.dev/docs/img' : undefined, _remotionInternalIsMedia: { type: 'image', src }, name: name !== null && name !== void 0 ? name : '<Img>', _experimentalControls: controls, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, hidden: hidden, children: (0, jsx_runtime_1.jsx)(ImgContent, { src: src, ...props }) }));
+    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, _remotionInternalStack: stack, _remotionInternalDocumentationLink: name === undefined ? 'https://www.remotion.dev/docs/img' : undefined, _remotionInternalIsMedia: { type: 'image', src }, name: name !== null && name !== void 0 ? name : '<Img>', _experimentalControls: controls, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, hidden: hidden, _remotionInternalRefForOutline: refForOutline, children: jsx_runtime_1.jsx(ImgContent, { src: src, refForOutline: refForOutline, ...props }) }));
 };
 const CanvasImageWithPrivateProps = index_js_1.CanvasImage;
 exports.imgSchema = {
@@ -226,8 +235,9 @@ const getFitFromObjectFit = (style) => {
 };
 const ImgInner = ({ effects = [], ref, hidden, name, stack, showInTimeline, src, from, durationInFrames, _experimentalControls: controls, width, height, className, style, id, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...props }) => {
     var _a;
+    const refForOutline = (0, react_1.useRef)(null);
     if (effects.length === 0) {
-        return ((0, jsx_runtime_1.jsx)(NativeImgInner, { ...props, ref: ref, hidden: hidden, name: name, stack: stack, showInTimeline: showInTimeline, src: src, from: from, durationInFrames: durationInFrames, _experimentalControls: controls, width: width, height: height, className: className, style: style, id: id, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds }));
+        return (jsx_runtime_1.jsx(NativeImgInner, { ...props, ref: ref, hidden: hidden, name: name, stack: stack, showInTimeline: showInTimeline, src: src, from: from, durationInFrames: durationInFrames, _experimentalControls: controls, width: width, height: height, className: className, style: style, id: id, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, _remotionInternalRefForOutline: refForOutline }));
     }
     if (!src) {
         throw new Error('No "src" prop was passed to <Img>.');
@@ -242,7 +252,7 @@ const ImgInner = ({ effects = [], ref, hidden, name, stack, showInTimeline, src,
     const canvasHeight = typeof height === 'number' ? height : undefined;
     const canvasProps = props;
     const canvasFit = (_a = getFitFromObjectFit(style)) !== null && _a !== void 0 ? _a : 'fill';
-    return ((0, jsx_runtime_1.jsx)(CanvasImageWithPrivateProps, { src: src, width: canvasWidth, height: canvasHeight, fit: canvasFit, effects: effects, className: className, style: style, id: id, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, from: from, durationInFrames: durationInFrames, hidden: hidden, name: name !== null && name !== void 0 ? name : '<Img>', showInTimeline: showInTimeline, stack: stack, _remotionInternalDocumentationLink: name === undefined ? 'https://www.remotion.dev/docs/img' : undefined, _experimentalControls: controls, ...canvasProps }));
+    return (jsx_runtime_1.jsx(CanvasImageWithPrivateProps, { src: src, width: canvasWidth, height: canvasHeight, fit: canvasFit, effects: effects, className: className, style: style, id: id, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, from: from, durationInFrames: durationInFrames, hidden: hidden, name: name !== null && name !== void 0 ? name : '<Img>', showInTimeline: showInTimeline, stack: stack, _remotionInternalDocumentationLink: name === undefined ? 'https://www.remotion.dev/docs/img' : undefined, _experimentalControls: controls, _remotionInternalRefForOutline: refForOutline, ...canvasProps }));
 };
 /*
  * @description Works just like a regular HTML img tag. When you use the <Img> tag, Remotion will ensure that the image is loaded before rendering the frame.

package/dist/cjs/RemotionRoot.js

@@ -23,6 +23,6 @@ const RemotionRootContexts = ({ children, numberOfAudioTags, logLevel, audioLate
     const logging = (0, react_1.useMemo)(() => {
         return { logLevel, mountTime: Date.now() };
     }, [logLevel]);
-    return ((0, jsx_runtime_1.jsx)(log_level_context_js_1.LogLevelContext.Provider, { value: logging, children: (0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: nonceContext, children: (0, jsx_runtime_1.jsx)(TimelineContext_js_1.TimelineContextProvider, { frameState: frameState, children: (0, jsx_runtime_1.jsx)(use_media_enabled_js_1.MediaEnabledProvider, { videoEnabled: videoEnabled, audioEnabled: audioEnabled, children: (0, jsx_runtime_1.jsx)(EditorProps_js_1.EditorPropsProvider, { children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(SequenceManager_js_1.SequenceManagerProvider, { children: (0, jsx_runtime_1.jsx)(duration_state_js_1.DurationsContextProvider, { children: (0, jsx_runtime_1.jsx)(buffering_js_1.BufferingProvider, { children: (0, jsx_runtime_1.jsx)(shared_audio_tags_js_1.SharedAudioContextProvider, { audioLatencyHint: audioLatencyHint, audioEnabled: audioEnabled, previewSampleRate: previewSampleRate, children: (0, jsx_runtime_1.jsx)(shared_audio_tags_js_1.SharedAudioTagsContextProvider, { numberOfAudioTags: numberOfAudioTags, children: children }) }) }) }) }) }) }) }) }) }) }));
+    return (jsx_runtime_1.jsx(log_level_context_js_1.LogLevelContext.Provider, { value: logging, children: jsx_runtime_1.jsx(nonce_js_1.NonceContext.Provider, { value: nonceContext, children: jsx_runtime_1.jsx(TimelineContext_js_1.TimelineContextProvider, { frameState: frameState, children: jsx_runtime_1.jsx(use_media_enabled_js_1.MediaEnabledProvider, { videoEnabled: videoEnabled, audioEnabled: audioEnabled, children: jsx_runtime_1.jsx(EditorProps_js_1.EditorPropsProvider, { children: jsx_runtime_1.jsx(prefetch_state_js_1.PrefetchProvider, { children: jsx_runtime_1.jsx(SequenceManager_js_1.SequenceManagerProvider, { children: jsx_runtime_1.jsx(duration_state_js_1.DurationsContextProvider, { children: jsx_runtime_1.jsx(buffering_js_1.BufferingProvider, { children: jsx_runtime_1.jsx(shared_audio_tags_js_1.SharedAudioContextProvider, { audioLatencyHint: audioLatencyHint, audioEnabled: audioEnabled, previewSampleRate: previewSampleRate, children: jsx_runtime_1.jsx(shared_audio_tags_js_1.SharedAudioTagsContextProvider, { numberOfAudioTags: numberOfAudioTags, children: children }) }) }) }) }) }) }) }) }) }) }));
 };
 exports.RemotionRootContexts = RemotionRootContexts;

package/dist/cjs/RenderAssetManager.js

@@ -52,6 +52,6 @@ const RenderAssetManagerProvider = ({ children, collectAssets }) => {
             renderAssets,
         };
     }, [renderAssets, registerRenderAsset, unregisterRenderAsset]);
-    return ((0, jsx_runtime_1.jsx)(exports.RenderAssetManager.Provider, { value: contextValue, children: children }));
+    return (jsx_runtime_1.jsx(exports.RenderAssetManager.Provider, { value: contextValue, children: children }));
 };
 exports.RenderAssetManagerProvider = RenderAssetManagerProvider;

package/dist/cjs/Sequence.js

@@ -253,7 +253,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
     if (hidden) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(SequenceContext_js_1.SequenceContext.Provider, { value: contextValue, children: content === null ? null : other.layout === 'none' ? (content) : ((0, jsx_runtime_1.jsx)(AbsoluteFill_js_1.AbsoluteFill, { ref: ref, style: defaultStyle, className: other.className, children: content })) }));
+    return (jsx_runtime_1.jsx(SequenceContext_js_1.SequenceContext.Provider, { value: contextValue, children: content === null ? null : other.layout === 'none' ? (content) : (jsx_runtime_1.jsx(AbsoluteFill_js_1.AbsoluteFill, { ref: ref, style: defaultStyle, className: other.className, children: content })) }));
 };
 const RegularSequence = (0, react_1.forwardRef)(RegularSequenceRefForwardingFunction);
 const PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
@@ -291,7 +291,7 @@ const PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
         styleWhilePremounted,
         styleWhilePostmounted,
     ]);
-    return ((0, jsx_runtime_1.jsx)(freeze_js_1.Freeze, { frame: freezeFrame, active: isFreezingActive, children: (0, jsx_runtime_1.jsx)(SequenceInner, { ref: ref, from: from, durationInFrames: durationInFrames, style: style, _remotionInternalPremountDisplay: premountFor, _remotionInternalPostmountDisplay: postmountFor, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, ...otherProps }) }));
+    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isFreezingActive, children: jsx_runtime_1.jsx(SequenceInner, { ref: ref, from: from, durationInFrames: durationInFrames, style: style, _remotionInternalPremountDisplay: premountFor, _remotionInternalPostmountDisplay: postmountFor, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, ...otherProps }) }));
 };
 const PremountedPostmountedSequence = (0, react_1.forwardRef)(PremountedPostmountedSequenceRefForwardingFunction);
 const SequenceRefForwardingFunction = (props, ref) => {
@@ -303,10 +303,10 @@ const SequenceRefForwardingFunction = (props, ref) => {
             ? ((_a = props.premountFor) !== null && _a !== void 0 ? _a : fps)
             : props.premountFor;
         if (effectivePremountFor || props.postmountFor) {
-            return ((0, jsx_runtime_1.jsx)(PremountedPostmountedSequence, { ref: ref, ...props, premountFor: effectivePremountFor }));
+            return (jsx_runtime_1.jsx(PremountedPostmountedSequence, { ref: ref, ...props, premountFor: effectivePremountFor }));
         }
     }
-    return (0, jsx_runtime_1.jsx)(RegularSequence, { ...props, ref: ref });
+    return jsx_runtime_1.jsx(RegularSequence, { ...props, ref: ref });
 };
 const SequenceInner = (0, react_1.forwardRef)(SequenceRefForwardingFunction);
 /*

package/dist/cjs/SequenceManager.js

@@ -188,6 +188,6 @@ const SequenceManagerProvider = ({ children }) => {
         clearEffectDragOverrides,
         setCodeValues,
     ]);
-    return ((0, jsx_runtime_1.jsx)(exports.SequenceManager.Provider, { value: sequenceContext, children: (0, jsx_runtime_1.jsx)(exports.VisualModeCodeValuesContext.Provider, { value: codeValuesContext, children: (0, jsx_runtime_1.jsx)(exports.VisualModeDragOverridesContext.Provider, { value: dragOverridesContext, children: (0, jsx_runtime_1.jsx)(exports.VisualModeSettersContext.Provider, { value: settersContext, children: children }) }) }) }));
+    return (jsx_runtime_1.jsx(exports.SequenceManager.Provider, { value: sequenceContext, children: jsx_runtime_1.jsx(exports.VisualModeCodeValuesContext.Provider, { value: codeValuesContext, children: jsx_runtime_1.jsx(exports.VisualModeDragOverridesContext.Provider, { value: dragOverridesContext, children: jsx_runtime_1.jsx(exports.VisualModeSettersContext.Provider, { value: settersContext, children: children }) }) }) }));
 };
 exports.SequenceManagerProvider = SequenceManagerProvider;

package/dist/cjs/Still.js

@@ -17,6 +17,6 @@ const Still = (props) => {
         fps: 1,
     };
     // @ts-expect-error TypeScript does not understand it, but should still fail on type mismatch
-    return react_1.default.createElement((Composition_js_1.Composition), newProps);
+    return react_1.default.createElement(Composition_js_1.Composition, newProps);
 };
 exports.Still = Still;

package/dist/cjs/TimelineContext.js

@@ -78,6 +78,6 @@ const TimelineContextProvider = ({ children, frameState }) => {
             setPlaying,
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)(exports.AbsoluteTimeContext.Provider, { value: timelineContextValue, children: (0, jsx_runtime_1.jsx)(exports.PlaybackRateContext.Provider, { value: playbackRateContextValue, children: (0, jsx_runtime_1.jsx)(exports.TimelineContext.Provider, { value: timelineContextValue, children: (0, jsx_runtime_1.jsx)(exports.SetTimelineContext.Provider, { value: setTimelineContextValue, children: children }) }) }) }));
+    return (jsx_runtime_1.jsx(exports.AbsoluteTimeContext.Provider, { value: timelineContextValue, children: jsx_runtime_1.jsx(exports.PlaybackRateContext.Provider, { value: playbackRateContextValue, children: jsx_runtime_1.jsx(exports.TimelineContext.Provider, { value: timelineContextValue, children: jsx_runtime_1.jsx(exports.SetTimelineContext.Provider, { value: setTimelineContextValue, children: children }) }) }) }));
 };
 exports.TimelineContextProvider = TimelineContextProvider;

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

@@ -2,10 +2,10 @@ import type React from 'react';
 import type { SequenceControls } from '../CompositionManager.js';
 import type { EffectsProp } from '../effects/effect-types.js';
 import type { RemotionAnimatedImageProps } from './props';
-export declare const AnimatedImage: React.ComponentType<Omit<import("../Sequence.js").SequenceProps, "children" | "layout" | "durationInFrames" | "_remotionInternalEffects"> & RemotionAnimatedImageProps & {
-    readonly durationInFrames?: number;
-    readonly effects?: EffectsProp;
+export declare const AnimatedImage: React.ComponentType<Omit<import("../Sequence.js").SequenceProps, "_remotionInternalEffects" | "children" | "durationInFrames" | "layout"> & RemotionAnimatedImageProps & {
+    readonly durationInFrames?: number | undefined;
+    readonly effects?: EffectsProp | undefined;
 } & {
     readonly _experimentalControls?: SequenceControls | undefined;
-    readonly ref?: React.Ref<HTMLCanvasElement>;
+    readonly ref?: React.Ref<HTMLCanvasElement> | undefined;
 }>;

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

@@ -14,6 +14,7 @@ const use_video_config_js_1 = require("../use-video-config.js");
 const wrap_in_schema_js_1 = require("../wrap-in-schema.js");
 const canvas_1 = require("./canvas");
 const decode_image_js_1 = require("./decode-image.js");
+const request_init_1 = require("./request-init");
 const resolve_image_source_1 = require("./resolve-image-source");
 const animatedImageSchema = {
     playbackRate: {
@@ -27,7 +28,7 @@ const animatedImageSchema = {
     ...sequence_field_schema_js_1.sequenceVisualStyleSchema,
     hidden: sequence_field_schema_js_1.hiddenField,
 };
-const AnimatedImageContent = (0, react_1.forwardRef)(({ src, width, height, onError, loopBehavior = 'loop', playbackRate = 1, fit = 'fill', effects, controls, ...props }, canvasRef) => {
+const AnimatedImageContent = (0, react_1.forwardRef)(({ src, width, height, onError, loopBehavior = 'loop', playbackRate = 1, fit = 'fill', requestInit, effects, controls, ...props }, canvasRef) => {
     var _a;
     const resolvedSrc = (0, resolve_image_source_1.resolveAnimatedImageSource)(src);
     const [imageDecoder, setImageDecoder] = (0, react_1.useState)(null);
@@ -38,6 +39,9 @@ const AnimatedImageContent = (0, react_1.forwardRef)(({ src, width, height, onEr
     const currentTime = frame / playbackRate / fps;
     const currentTimeRef = (0, react_1.useRef)(currentTime);
     currentTimeRef.current = currentTime;
+    const requestInitKey = (0, request_init_1.serializeRequestInit)(requestInit);
+    const requestInitRef = (0, react_1.useRef)(requestInit);
+    requestInitRef.current = requestInit;
     const ref = (0, react_1.useRef)(null);
     const memoizedEffects = (0, use_memoized_effects_js_1.useMemoizedEffects)({
         effects,
@@ -57,6 +61,7 @@ const AnimatedImageContent = (0, react_1.forwardRef)(({ src, width, height, onEr
         (0, decode_image_js_1.decodeImage)({
             resolvedSrc,
             signal: controller.signal,
+            requestInit: requestInitRef.current,
             currentTime: currentTimeRef.current,
             initialLoopBehavior,
         })
@@ -84,6 +89,7 @@ const AnimatedImageContent = (0, react_1.forwardRef)(({ src, width, height, onEr
         resolvedSrc,
         decodeHandle,
         onError,
+        requestInitKey,
         initialLoopBehavior,
         continueRender,
     ]);
@@ -139,13 +145,17 @@ const AnimatedImageContent = (0, react_1.forwardRef)(({ src, width, height, onEr
         width,
         height,
     ]);
-    return ((0, jsx_runtime_1.jsx)(canvas_1.Canvas, { ref: ref, width: width, height: height, fit: fit, effects: memoizedEffects, ...props }));
+    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, effects = [], _experimentalControls: controls, ref, ...sequenceProps }) => {
+const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, loopBehavior, id, className, style, durationInFrames, requestInit, effects = [], _experimentalControls: controls, ref, ...sequenceProps }) => {
     const { durationInFrames: videoDuration } = (0, use_video_config_js_1.useVideoConfig)();
     const resolvedDuration = durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : videoDuration;
+    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 animatedImageProps = {
         src,
         width,
@@ -157,8 +167,9 @@ const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, lo
         id,
         className,
         style,
+        requestInit,
     };
-    return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", durationInFrames: resolvedDuration, name: "<AnimatedImage>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage", _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, ...sequenceProps, children: (0, jsx_runtime_1.jsx)(AnimatedImageContent, { ...animatedImageProps, ref: ref, effects: effects, controls: controls }) }));
+    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", durationInFrames: resolvedDuration, name: "<AnimatedImage>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage", _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, ...sequenceProps, _remotionInternalRefForOutline: actualRef, children: jsx_runtime_1.jsx(AnimatedImageContent, { ...animatedImageProps, ref: actualRef, effects: effects, controls: controls }) }));
 };
 exports.AnimatedImage = (0, wrap_in_schema_js_1.wrapInSchema)(AnimatedImageInner, animatedImageSchema);
 exports.AnimatedImage.displayName = 'AnimatedImage';

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

@@ -101,6 +101,6 @@ const CanvasRefForwardingFunction = ({ width, height, fit, className, style, eff
             },
         };
     }, [draw]);
-    return (0, jsx_runtime_1.jsx)("canvas", { ref: canvasRef, className: className, style: style });
+    return jsx_runtime_1.jsx("canvas", { ref: canvasRef, className: className, style: style });
 };
 exports.Canvas = react_1.default.forwardRef(CanvasRefForwardingFunction);

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

@@ -8,9 +8,10 @@ export type RemotionImageDecoder = {
     getFrame: (i: number, loopBehavior: RemotionAnimatedImageLoopBehavior) => Promise<AnimatedImageCacheItem | null>;
     frameCount: number;
 };
-export declare const decodeImage: ({ resolvedSrc, signal, currentTime, initialLoopBehavior, }: {
+export declare const decodeImage: ({ resolvedSrc, signal, requestInit, currentTime, initialLoopBehavior, }: {
     resolvedSrc: string;
     signal: AbortSignal;
+    requestInit?: RequestInit | undefined;
     currentTime: number;
     initialLoopBehavior: RemotionAnimatedImageLoopBehavior;
 }) => Promise<RemotionImageDecoder>;

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

@@ -9,11 +9,11 @@ const getActualTime = ({ loopBehavior, durationFound, timeInSec, }) => {
             : timeInSec
         : Math.min(timeInSec, durationFound || Infinity);
 };
-const decodeImage = async ({ resolvedSrc, signal, currentTime, initialLoopBehavior, }) => {
+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, { signal });
+    const res = await fetch(resolvedSrc, { ...requestInit, signal });
     const { body } = res;
     if (!body) {
         throw new Error('Got no body');

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

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

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

@@ -13,6 +13,7 @@ export type RemotionAnimatedImageProps = {
     loopBehavior?: RemotionAnimatedImageLoopBehavior;
     id?: string;
     className?: string;
+    requestInit?: RequestInit;
 };
 export type AnimatedImageProps = Omit<SequenceProps, 'children' | 'durationInFrames' | 'layout' | '_remotionInternalEffects'> & RemotionAnimatedImageProps & {
     readonly durationInFrames?: number;

package/dist/cjs/animated-image/request-init.d.ts

@@ -0,0 +1 @@
+export declare const serializeRequestInit: (requestInit: RequestInit | undefined) => string | null;