remotion 4.0.470 → 4.0.472

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,16 +181,18 @@ 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 = {
+    durationInFrames: sequence_field_schema_js_1.durationInFramesField,
+    from: sequence_field_schema_js_1.fromField,
     ...sequence_field_schema_js_1.sequenceVisualStyleSchema,
     hidden: sequence_field_schema_js_1.hiddenField,
 };
@@ -226,8 +237,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,11 +254,15 @@ 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.
  * @see [Documentation](https://remotion.dev/docs/img)
  */
-exports.Img = (0, wrap_in_schema_js_1.wrapInSchema)(ImgInner, exports.imgSchema);
+exports.Img = (0, wrap_in_schema_js_1.wrapInSchema)({
+    Component: ImgInner,
+    schema: exports.imgSchema,
+    supportsEffects: true,
+});
 (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(exports.Img);

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

@@ -11,12 +11,14 @@ const PremountContext_js_1 = require("./PremountContext.js");
 const sequence_field_schema_js_1 = require("./sequence-field-schema.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
 const SequenceManager_js_1 = require("./SequenceManager.js");
+const is_inside_series_js_1 = require("./series/is-inside-series.js");
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
 const use_current_frame_1 = require("./use-current-frame");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const use_video_config_js_1 = require("./use-video-config.js");
 const v5_flag_js_1 = require("./v5-flag.js");
 const wrap_in_schema_js_1 = require("./wrap-in-schema.js");
+const EMPTY_EFFECTS = [];
 const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, hidden = false, _experimentalControls: controls, _remotionInternalEffects, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalDocumentationLink: documentationLink, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, _remotionInternalIsMedia: isMedia, _remotionInternalRefForOutline: refForOutline, ...other }, ref) => {
     var _a;
     const { layout = 'absolute-fill' } = other;
@@ -122,6 +124,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
     }, [name]);
     const resolvedDocumentationLink = documentationLink !== null && documentationLink !== void 0 ? documentationLink : (name === undefined ? 'https://www.remotion.dev/docs/sequence' : null);
     const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
+    const isInsideSeries = (0, react_1.useContext)(is_inside_series_js_1.IsInsideSeriesContext);
     const inheritedStack = (_a = other === null || other === void 0 ? void 0 : other.stack) !== null && _a !== void 0 ? _a : null;
     // Our assumption: Stack doesnt' change. After we symbolicate we assign it a nodePath
     // and if it changes, it would lead to-remounting of the sequence.
@@ -137,7 +140,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
                 registerSequence({
                     type: 'image',
                     controls: controls !== null && controls !== void 0 ? controls : null,
-                    effects: _remotionInternalEffects !== null && _remotionInternalEffects !== void 0 ? _remotionInternalEffects : [],
+                    effects: _remotionInternalEffects !== null && _remotionInternalEffects !== void 0 ? _remotionInternalEffects : EMPTY_EFFECTS,
                     displayName: timelineClipName,
                     documentationLink: resolvedDocumentationLink,
                     duration: actualDurationInFrames,
@@ -153,13 +156,14 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
                     src: isMedia.src,
                     getStack: () => stackRef.current,
                     refForOutline: refForOutline !== null && refForOutline !== void 0 ? refForOutline : null,
+                    isInsideSeries,
                 });
             }
             else {
                 registerSequence({
                     type: isMedia.type,
                     controls: controls !== null && controls !== void 0 ? controls : null,
-                    effects: _remotionInternalEffects !== null && _remotionInternalEffects !== void 0 ? _remotionInternalEffects : [],
+                    effects: _remotionInternalEffects !== null && _remotionInternalEffects !== void 0 ? _remotionInternalEffects : EMPTY_EFFECTS,
                     displayName: timelineClipName,
                     documentationLink: resolvedDocumentationLink,
                     doesVolumeChange: isMedia.data.doesVolumeChange,
@@ -179,6 +183,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
                     startMediaFrom: isMedia.data.startMediaFrom,
                     volume: isMedia.data.volumes,
                     refForOutline: refForOutline !== null && refForOutline !== void 0 ? refForOutline : null,
+                    isInsideSeries,
                 });
             }
             return () => {
@@ -201,8 +206,9 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
             premountDisplay: premountDisplay !== null && premountDisplay !== void 0 ? premountDisplay : null,
             postmountDisplay: postmountDisplay !== null && postmountDisplay !== void 0 ? postmountDisplay : null,
             controls: controls !== null && controls !== void 0 ? controls : null,
-            effects: _remotionInternalEffects !== null && _remotionInternalEffects !== void 0 ? _remotionInternalEffects : [],
+            effects: _remotionInternalEffects !== null && _remotionInternalEffects !== void 0 ? _remotionInternalEffects : EMPTY_EFFECTS,
             refForOutline: refForOutline !== null && refForOutline !== void 0 ? refForOutline : null,
+            isInsideSeries,
         });
         return () => {
             unregisterSequence(id);
@@ -229,6 +235,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
         isMedia,
         resolvedDocumentationLink,
         refForOutline,
+        isInsideSeries,
     ]);
     // Ceil to support floats
     // https://github.com/remotion-dev/remotion/issues/2958
@@ -253,7 +260,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 +298,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,14 +310,18 @@ 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);
 /*
  * @description A component that time-shifts its children and wraps them in an absolutely positioned <div>.
  * @see [Documentation](https://www.remotion.dev/docs/sequence)
  */
-exports.Sequence = (0, wrap_in_schema_js_1.wrapInSchema)(SequenceInner, sequence_field_schema_js_1.sequenceSchema);
+exports.Sequence = (0, wrap_in_schema_js_1.wrapInSchema)({
+    Component: SequenceInner,
+    schema: sequence_field_schema_js_1.sequenceSchema,
+    supportsEffects: false,
+});

package/dist/cjs/SequenceManager.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { TSequence } from './CompositionManager.js';
-import type { CanUpdateSequencePropStatus, CodeValues, GetDragOverrides, GetEffectDragOverrides } from './use-schema.js';
+import type { CanUpdateSequencePropStatus, CodeValues, DragOverrideValue, GetDragOverrides, GetEffectDragOverrides } from './use-schema.js';
 export type SequenceManagerContext = {
     registerSequence: (seq: TSequence) => void;
     unregisterSequence: (id: string) => void;
@@ -16,15 +16,16 @@ export type VisualModeDragOverrides = {
     getEffectDragOverrides: GetEffectDragOverrides;
 };
 export type VisualModeSetters = {
-    setDragOverrides: (nodePath: SequencePropsSubscriptionKey, key: string, value: unknown) => void;
+    setDragOverrides: (nodePath: SequencePropsSubscriptionKey, key: string, value: DragOverrideValue) => void;
     clearDragOverrides: (nodePath: SequencePropsSubscriptionKey) => void;
-    setEffectDragOverrides: (nodePath: SequencePropsSubscriptionKey, effectIndex: number, key: string, value: unknown) => void;
+    setEffectDragOverrides: (nodePath: SequencePropsSubscriptionKey, effectIndex: number, key: string, value: DragOverrideValue) => void;
     clearEffectDragOverrides: (nodePath: SequencePropsSubscriptionKey, effectIndex: number) => void;
     setCodeValues: (nodePath: SequencePropsSubscriptionKey, values: (prev: CanUpdateSequencePropsResponse) => CanUpdateSequencePropsResponse) => void;
 };
 export type CanUpdateEffectPropsResponseTrue = {
     canUpdate: true;
     callee: string;
+    importPath: string | null;
     effectIndex: number;
     props: Record<string, CanUpdateSequencePropStatus>;
 };

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,8 +14,11 @@ 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 = {
+    durationInFrames: sequence_field_schema_js_1.durationInFramesField,
+    from: sequence_field_schema_js_1.fromField,
     playbackRate: {
         type: 'number',
         min: 0,
@@ -23,11 +26,13 @@ const animatedImageSchema = {
         step: 0.1,
         default: 1,
         description: 'Playback Rate',
+        hiddenFromList: false,
+        keyframable: false,
     },
     ...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 +43,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 +65,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 +93,7 @@ const AnimatedImageContent = (0, react_1.forwardRef)(({ src, width, height, onEr
         resolvedSrc,
         decodeHandle,
         onError,
+        requestInitKey,
         initialLoopBehavior,
         continueRender,
     ]);
@@ -139,13 +149,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,9 +171,14 @@ 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 = (0, wrap_in_schema_js_1.wrapInSchema)({
+    Component: AnimatedImageInner,
+    schema: animatedImageSchema,
+    supportsEffects: true,
+});
 exports.AnimatedImage.displayName = 'AnimatedImage';
 (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(exports.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;

package/dist/cjs/animated-image/request-init.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.serializeRequestInit = void 0;
+const serializeRequestInit = (requestInit) => {
+    if (!requestInit) {
+        return null;
+    }
+    const requestInitWithoutSignal = { ...requestInit };
+    delete requestInitWithoutSignal.signal;
+    const { headers, ...rest } = requestInitWithoutSignal;
+    return JSON.stringify({
+        ...rest,
+        headers: headers ? Array.from(new Headers(headers).entries()) : null,
+    });
+};
+exports.serializeRequestInit = serializeRequestInit;

package/dist/cjs/audio/AudioForPreview.js

@@ -213,6 +213,6 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
     if (initialShouldPreMountAudioElements) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)("audio", { ref: audioRef, preload: "metadata", crossOrigin: crossOriginValue, ...propsToPass }));
+    return (jsx_runtime_1.jsx("audio", { ref: audioRef, preload: "metadata", crossOrigin: crossOriginValue, ...propsToPass }));
 };
 exports.AudioForPreview = (0, react_2.forwardRef)(AudioForDevelopmentForwardRefFunction);

package/dist/cjs/audio/AudioForRendering.d.ts

@@ -1,9 +1,24 @@
 import type { ForwardRefExoticComponent, RefAttributes } from 'react';
 import React from 'react';
-import type { RemotionAudioProps } from './props.js';
-type AudioForRenderingProps = RemotionAudioProps & {
+export declare const AudioForRendering: ForwardRefExoticComponent<import("./props.js").NativeAudioProps & {
+    name?: string | undefined;
+    volume?: import("../volume-prop.js").VolumeProp | undefined;
+    playbackRate?: number | undefined;
+    preservePitch?: boolean | undefined;
+    acceptableTimeShiftInSeconds?: number | undefined;
+    allowAmplificationDuringRender?: boolean | undefined;
+    _remotionInternalNeedsDurationCalculation?: boolean | undefined;
+    _remotionInternalNativeLoopPassed?: boolean | undefined;
+    toneFrequency?: number | undefined;
+    useWebAudioApi?: boolean | undefined;
+    pauseWhenBuffering?: boolean | undefined;
+    showInTimeline?: boolean | undefined;
+    delayRenderTimeoutInMilliseconds?: number | undefined;
+    delayRenderRetries?: number | undefined;
+    loopVolumeCurveBehavior?: import("./use-audio-frame.js").LoopVolumeCurveBehavior | undefined;
+    onError?: ((err: Error) => void) | undefined;
+    audioStreamIndex?: number | undefined;
+} & {
     readonly onDuration: (src: string, durationInSeconds: number) => void;
     readonly onNativeError: React.ReactEventHandler<HTMLAudioElement>;
-};
-export declare const AudioForRendering: ForwardRefExoticComponent<AudioForRenderingProps & RefAttributes<HTMLAudioElement>>;
-export {};
+} & RefAttributes<HTMLAudioElement>>;

package/dist/cjs/audio/AudioForRendering.js

@@ -133,6 +133,6 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
     if (!needsToRenderAudioTag) {
         return null;
     }
-    return (0, jsx_runtime_1.jsx)("audio", { ref: audioRef, ...nativeProps, onError: onNativeError });
+    return jsx_runtime_1.jsx("audio", { ref: audioRef, ...nativeProps, onError: onNativeError });
 };
 exports.AudioForRendering = (0, react_1.forwardRef)(AudioForRenderingRefForwardingFunction);