remotion 4.0.462 → 4.0.464

package/dist/cjs/CompositionManager.d.ts

@@ -65,7 +65,7 @@ export type TSequence = {
     showInTimeline: boolean;
     nonce: NonceHistory;
     loopDisplay: LoopDisplay | undefined;
-    stack: string | null;
+    getStack: () => string | null;
     premountDisplay: number | null;
     postmountDisplay: number | null;
     controls: SequenceControls | null;

package/dist/cjs/HtmlInCanvas.d.ts

@@ -14,10 +14,10 @@ declare global {
         drawElementImage(element: Element | ElementImage, sx: number, sy: number, swidth: number, sheight: number, dx: number, dy: number, dwidth: number, dheight: number): DOMMatrix;
     }
     interface OffscreenCanvasRenderingContext2D {
-        drawElementImage(element: ElementImage, dx: number, dy: number): DOMMatrix;
-        drawElementImage(element: ElementImage, dx: number, dy: number, dwidth: number, dheight: number): DOMMatrix;
-        drawElementImage(element: ElementImage, sx: number, sy: number, swidth: number, sheight: number, dx: number, dy: number): DOMMatrix;
-        drawElementImage(element: ElementImage, sx: number, sy: number, swidth: number, sheight: number, dx: number, dy: number, dwidth: number, dheight: number): DOMMatrix;
+        drawElementImage(element: Element | ElementImage, dx: number, dy: number): DOMMatrix;
+        drawElementImage(element: Element | ElementImage, dx: number, dy: number, dwidth: number, dheight: number): DOMMatrix;
+        drawElementImage(element: Element | ElementImage, sx: number, sy: number, swidth: number, sheight: number, dx: number, dy: number): DOMMatrix;
+        drawElementImage(element: Element | ElementImage, sx: number, sy: number, swidth: number, sheight: number, dx: number, dy: number, dwidth: number, dheight: number): DOMMatrix;
     }
     interface WebGLRenderingContextBase {
         texElementImage2D(target: GLenum, level: GLint, internalformat: GLint, format: GLenum, type: GLenum, element: Element | ElementImage): void;
@@ -37,6 +37,10 @@ declare global {
     }
 }
 export type HtmlInCanvasOnPaintParams = {
+    /**
+     * The `OffscreenCanvas` from {@link HTMLCanvasElement.transferControlToOffscreen}
+     * on the layout `<canvas>` (same logical canvas as the forwarded ref).
+     */
     readonly canvas: OffscreenCanvas;
     readonly element: HTMLDivElement;
     readonly elementImage: ElementImage;

package/dist/cjs/HtmlInCanvas.js

@@ -10,7 +10,6 @@ const use_memoized_effects_js_1 = require("./effects/use-memoized-effects.js");
 const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
 const sequence_field_schema_js_1 = require("./sequence-field-schema.js");
 const Sequence_js_1 = require("./Sequence.js");
-const use_current_frame_js_1 = require("./use-current-frame.js");
 const use_delay_render_js_1 = require("./use-delay-render.js");
 const use_video_config_js_1 = require("./use-video-config.js");
 const wrap_in_schema_js_1 = require("./wrap-in-schema.js");
@@ -30,7 +29,8 @@ const isHtmlInCanvasSupported = () => {
     cachedSupport =
         typeof (ctx === null || ctx === void 0 ? void 0 : ctx.drawElementImage) === 'function' &&
             typeof canvas.requestPaint === 'function' &&
-            typeof canvas.captureElementImage === 'function';
+            typeof canvas.captureElementImage === 'function' &&
+            'transferControlToOffscreen' in HTMLCanvasElement.prototype;
     return cachedSupport;
 };
 exports.isHtmlInCanvasSupported = isHtmlInCanvasSupported;
@@ -58,7 +58,7 @@ const defaultOnPaint = ({ canvas, element, elementImage, }) => {
 };
 /* eslint-enable react/require-default-props */
 const HtmlInCanvasAncestorContext = (0, react_1.createContext)(false);
-const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, _experimentalEffects: effects = [], children, onPaint, onInit, _experimentalControls: controls, style, durationInFrames, ...sequenceProps }, ref) => {
+const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, children, onPaint, onInit, controls, style }, ref) => {
     var _a;
     const isInsideAncestorHtmlInCanvas = (0, react_1.useContext)(HtmlInCanvasAncestorContext);
     assertHtmlInCanvasDimensions(width, height);
@@ -66,11 +66,10 @@ const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, _experimenta
     if (!(0, exports.isHtmlInCanvasSupported)()) {
         cancelRender(new Error(exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE));
     }
-    const { durationInFrames: videoDuration } = (0, use_video_config_js_1.useVideoConfig)();
-    const resolvedDuration = durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : videoDuration;
-    const frame = (0, use_current_frame_js_1.useCurrentFrame)();
     const canvas2dRef = (0, react_1.useRef)(null);
+    const offscreenRef = (0, react_1.useRef)(null);
     const divRef = (0, react_1.useRef)(null);
+    const canvasSizeKey = `${width}x${height}`;
     const setLayoutCanvasRef = (0, react_1.useCallback)((node) => {
         canvas2dRef.current = node;
         if (typeof ref === 'function') {
@@ -81,18 +80,14 @@ const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, _experimenta
                 node;
         }
     }, [ref]);
-    const [offscreenCanvas] = (0, react_1.useState)(() => new OffscreenCanvas(1, 1));
     const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)();
     const memoizedEffects = (0, use_memoized_effects_js_1.useMemoizedEffects)({
         effects,
         overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null,
     });
-    const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
     // Refs so the paint handler always reads fresh values.
     const effectsRef = (0, react_1.useRef)(memoizedEffects);
     effectsRef.current = memoizedEffects;
-    const frameRef = (0, react_1.useRef)(frame);
-    frameRef.current = frame;
     const onPaintRef = (0, react_1.useRef)(onPaint);
     onPaintRef.current = onPaint;
     const onInitRef = (0, react_1.useRef)(onInit);
@@ -106,19 +101,23 @@ const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, _experimenta
         if (!element) {
             throw new Error('Canvas or scene element not found');
         }
-        offscreenCanvas.width = width;
-        offscreenCanvas.height = height;
+        const offscreen = offscreenRef.current;
+        if (!offscreen) {
+            throw new Error('HtmlInCanvas: offscreen canvas not ready (transferControlToOffscreen failed or canvas is remounting)');
+        }
+        offscreen.width = width;
+        offscreen.height = height;
         try {
-            const layoutCanvas = canvas2dRef.current;
-            if (!layoutCanvas) {
+            const placeholderCanvas = canvas2dRef.current;
+            if (!placeholderCanvas) {
                 throw new Error('Canvas not found');
             }
             // `GPUQueue.copyElementImageToTexture` / related paths validate the
-            // layout canvas has a rendering context. `runEffectChain` only runs
-            // after `onPaint`, so acquire `2d` here before any capture or handler.
-            const layout2d = layoutCanvas.getContext('2d');
-            if (!layout2d) {
-                throw new Error('Failed to acquire 2D context for <HtmlInCanvas> layout canvas');
+            // linked offscreen surface has a rendering context. Acquire `2d` here
+            // before any capture or handler (must not call getContext on placeholder).
+            const offscreen2d = offscreen.getContext('2d');
+            if (!offscreen2d) {
+                throw new Error('Failed to acquire 2D context for <HtmlInCanvas> offscreen canvas');
             }
             const handle = (0, delay_render_js_1.delayRender)('onPaint');
             if (!initializedRef.current) {
@@ -129,11 +128,11 @@ const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, _experimenta
                 // can invalidate the capture's paint context, leaving subsequent
                 // uploads (e.g. `copyElementImageToTexture`) failing with
                 // "No context found for ElementImage" on the very first paint.
-                const initImage = layoutCanvas.captureElementImage(element);
+                const initImage = placeholderCanvas.captureElementImage(element);
                 const currentOnInit = onInitRef.current;
                 if (currentOnInit) {
                     const cleanup = await currentOnInit({
-                        canvas: offscreenCanvas,
+                        canvas: offscreen,
                         element,
                         elementImage: initImage,
                     });
@@ -149,18 +148,17 @@ const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, _experimenta
                 }
             }
             const handler = (_a = onPaintRef.current) !== null && _a !== void 0 ? _a : defaultOnPaint;
-            const elImage = layoutCanvas.captureElementImage(element);
+            const elImage = placeholderCanvas.captureElementImage(element);
             await handler({
-                canvas: offscreenCanvas,
+                canvas: offscreen,
                 element,
                 elementImage: elImage,
             });
             await (0, run_effect_chain_js_1.runEffectChain)({
                 state: chainState.get(width, height),
-                source: offscreenCanvas,
+                source: offscreen,
                 effects: effectsRef.current,
-                output: canvas2dRef.current,
-                frame: frameRef.current,
+                output: offscreen,
                 width,
                 height,
             });
@@ -169,32 +167,32 @@ const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, _experimenta
         catch (error) {
             cancelRender(error);
         }
-    }, [
-        chainState,
-        continueRender,
-        cancelRender,
-        width,
-        height,
-        offscreenCanvas,
-    ]);
-    // Set up layoutSubtree and persistent paint listener. Runs as a
-    // layout effect so the listener is attached before the resize effect
-    // below dispatches its first synthetic paint.
+    }, [chainState, continueRender, cancelRender, width, height]);
+    // Transfer control once per layout canvas instance, then listen for paint on
+    // the placeholder (capture) while drawing on the linked offscreen surface.
     (0, react_1.useLayoutEffect)(() => {
-        const canvas = canvas2dRef.current;
-        if (!canvas) {
+        const placeholder = canvas2dRef.current;
+        if (!placeholder) {
             throw new Error('Canvas not found');
         }
-        canvas.layoutSubtree = true;
-        canvas.addEventListener('paint', onPaintCb);
+        placeholder.layoutSubtree = true;
+        const offscreen = placeholder.transferControlToOffscreen();
+        offscreenRef.current = offscreen;
+        offscreen.width = width;
+        offscreen.height = height;
+        initializedRef.current = false;
+        unmountedRef.current = false;
+        placeholder.addEventListener('paint', onPaintCb);
         return () => {
             var _a;
-            canvas.removeEventListener('paint', onPaintCb);
+            placeholder.removeEventListener('paint', onPaintCb);
+            offscreenRef.current = null;
+            initializedRef.current = false;
             unmountedRef.current = true;
             (_a = onInitCleanupRef.current) === null || _a === void 0 ? void 0 : _a.call(onInitCleanupRef);
             onInitCleanupRef.current = null;
         };
-    }, [onPaintCb, cancelRender]);
+    }, [onPaintCb, cancelRender, width, height]);
     const onPaintChangedRef = (0, react_1.useRef)(false);
     (0, react_1.useLayoutEffect)(() => {
         var _a;
@@ -220,7 +218,7 @@ const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, _experimenta
         return () => {
             continueRender(handle);
         };
-    }, [width, height, continueRender]);
+    }, [width, height, continueRender, canvasSizeKey]);
     const innerStyle = (0, react_1.useMemo)(() => {
         return {
             width,
@@ -230,10 +228,21 @@ const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, _experimenta
     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)(Sequence_js_1.Sequence, { durationInFrames: resolvedDuration, name: "<HtmlInCanvas>", _experimentalControls: controls, _experimentalEffects: memoizedEffectDefinitions, layout: "none", ...sequenceProps, children: (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 }) }) }) }));
+    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) }));
+});
+HtmlInCanvasContent.displayName = 'HtmlInCanvasContent';
+const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, _experimentalEffects: 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>', _experimentalControls: controls, _experimentalEffects: 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 }) }));
 });
 HtmlInCanvasInner.displayName = 'HtmlInCanvas';
-const HtmlInCanvasWrapped = (0, wrap_in_schema_js_1.wrapInSchema)(HtmlInCanvasInner, sequence_field_schema_js_1.sequenceStyleSchema);
+const htmlInCanvasSchema = {
+    ...sequence_field_schema_js_1.sequenceVisualStyleSchema,
+    hidden: sequence_field_schema_js_1.hiddenField,
+};
+const HtmlInCanvasWrapped = (0, wrap_in_schema_js_1.wrapInSchema)(HtmlInCanvasInner, htmlInCanvasSchema);
 exports.HtmlInCanvas = Object.assign(HtmlInCanvasWrapped, {
     isSupported: exports.isHtmlInCanvasSupported,
 });

package/dist/cjs/Img.js

@@ -25,16 +25,11 @@ function truncateSrcForLabel(src) {
     }
     return src;
 }
-const ImgInner = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRenderRetries, delayRenderTimeoutInMilliseconds, onImageFrame, crossOrigin, showInTimeline, name, stack, ref, _experimentalControls: controls, ...props }) => {
-    var _a, _b;
+const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRenderRetries, delayRenderTimeoutInMilliseconds, onImageFrame, crossOrigin, ref, ...props }) => {
     const imageRef = (0, react_1.useRef)(null);
     const errors = (0, react_1.useRef)({});
     const { delayPlayback } = (0, use_buffer_state_js_1.useBufferState)();
     const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
-    const [timelineId] = (0, react_1.useState)(() => String(Math.random()));
-    if (!src) {
-        throw new Error('No "src" prop was passed to <Img>.');
-    }
     const _propsValid = true;
     if (!_propsValid) {
         throw new Error('typecheck error');
@@ -42,17 +37,6 @@ const ImgInner = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRenderR
     (0, react_1.useImperativeHandle)(ref, () => {
         return imageRef.current;
     }, []);
-    (0, use_media_in_timeline_js_1.useImageInTimeline)({
-        src,
-        displayName: name !== null && name !== void 0 ? name : null,
-        id: timelineId,
-        stack: stack !== null && stack !== void 0 ? stack : null,
-        showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true,
-        premountDisplay: (_a = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premountDisplay) !== null && _a !== void 0 ? _a : null,
-        postmountDisplay: (_b = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmountDisplay) !== null && _b !== void 0 ? _b : null,
-        loopDisplay: undefined,
-        controls: controls !== null && controls !== void 0 ? controls : null,
-    });
     const actualSrc = (0, prefetch_js_1.usePreload)(src);
     const retryIn = (0, react_1.useCallback)((timeout) => {
         if (!imageRef.current) {
@@ -197,9 +181,39 @@ const ImgInner = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRenderR
     // src gets set once we've loaded and decoded the image.
     return ((0, jsx_runtime_1.jsx)("img", { ...props, ref: imageRef, crossOrigin: crossOriginValue, onError: didGetError, decoding: "sync" }));
 };
+const ImgInner = ({ hidden, name, stack, showInTimeline, src, _experimentalControls: controls, ...props }) => {
+    var _a, _b;
+    const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
+    const [timelineId] = (0, react_1.useState)(() => String(Math.random()));
+    if (!src) {
+        throw new Error('No "src" prop was passed to <Img>.');
+    }
+    const stackRef = (0, react_1.useRef)(null);
+    stackRef.current = stack !== null && stack !== void 0 ? stack : null;
+    const getStack = (0, react_1.useCallback)(() => stackRef.current, []);
+    (0, use_media_in_timeline_js_1.useImageInTimeline)({
+        src,
+        displayName: name !== null && name !== void 0 ? name : null,
+        id: timelineId,
+        getStack,
+        showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true,
+        premountDisplay: (_a = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premountDisplay) !== null && _a !== void 0 ? _a : null,
+        postmountDisplay: (_b = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmountDisplay) !== null && _b !== void 0 ? _b : null,
+        loopDisplay: undefined,
+        controls: controls !== null && controls !== void 0 ? controls : null,
+    });
+    if (hidden) {
+        return null;
+    }
+    return (0, jsx_runtime_1.jsx)(ImgContent, { src: src, ...props });
+};
+const imgSchema = {
+    ...sequence_field_schema_js_1.sequenceVisualStyleSchema,
+    hidden: sequence_field_schema_js_1.hiddenField,
+};
 /*
  * @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, sequence_field_schema_js_1.sequenceStyleSchema);
+exports.Img = (0, wrap_in_schema_js_1.wrapInSchema)(ImgInner, imgSchema);
 (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(exports.Img);

package/dist/cjs/Sequence.d.ts

@@ -21,6 +21,7 @@ export type SequencePropsWithoutDuration = {
     readonly from?: number;
     readonly name?: string;
     readonly showInTimeline?: boolean;
+    readonly hidden?: boolean;
     readonly _experimentalControls?: SequenceControls;
     readonly _experimentalEffects?: readonly EffectDefinition<unknown>[];
     /**

package/dist/cjs/Sequence.js

@@ -4,6 +4,7 @@ exports.Sequence = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-use-before-define */
 const react_1 = require("react");
+const react_2 = require("react");
 const AbsoluteFill_js_1 = require("./AbsoluteFill.js");
 const freeze_js_1 = require("./freeze.js");
 const nonce_js_1 = require("./nonce.js");
@@ -17,8 +18,8 @@ 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 RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, _experimentalControls: controls, _experimentalEffects, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, _remotionInternalIsMedia: isMedia, ...other }, ref) => {
-    var _a, _b;
+const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, hidden = false, _experimentalControls: controls, _experimentalEffects, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, _remotionInternalIsMedia: isMedia, ...other }, ref) => {
+    var _a;
     const { layout = 'absolute-fill' } = other;
     const [id] = (0, react_1.useState)(() => String(Math.random()));
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
@@ -55,7 +56,6 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
         : durationInFrames;
     const actualDurationInFrames = Math.max(0, Math.min(videoConfig.durationInFrames - from, parentSequenceDuration));
     const { registerSequence, unregisterSequence } = (0, react_1.useContext)(SequenceManager_js_1.SequenceManager);
-    const { hidden } = (0, react_1.useContext)(SequenceManager_js_1.SequenceVisibilityToggleContext);
     const premounting = (0, react_1.useMemo)(() => {
         // || is intentional, ?? would not trigger on `false`
         return ((parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.premounting) ||
@@ -99,6 +99,10 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
     }, [name]);
     const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     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.
+    const stackRef = (0, react_2.useRef)(null);
+    stackRef.current = stack !== null && stack !== void 0 ? stack : inheritedStack;
     (0, react_1.useEffect)(() => {
         var _a, _b;
         if (!env.isStudio) {
@@ -123,7 +127,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
                 rootId,
                 showInTimeline,
                 src: isMedia.data.src,
-                stack: stack !== null && stack !== void 0 ? stack : inheritedStack,
+                getStack: () => stackRef.current,
                 startMediaFrom: isMedia.data.startMediaFrom,
                 volume: isMedia.data.volumes,
             });
@@ -142,7 +146,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
             showInTimeline,
             nonce: nonce.get(),
             loopDisplay,
-            stack: stack !== null && stack !== void 0 ? stack : inheritedStack,
+            getStack: () => stackRef.current,
             premountDisplay: premountDisplay !== null && premountDisplay !== void 0 ? premountDisplay : null,
             postmountDisplay: postmountDisplay !== null && postmountDisplay !== void 0 ? postmountDisplay : null,
             controls: controls !== null && controls !== void 0 ? controls : null,
@@ -165,11 +169,9 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
         showInTimeline,
         nonce,
         loopDisplay,
-        stack,
         premountDisplay,
         postmountDisplay,
         env.isStudio,
-        inheritedStack,
         controls,
         _experimentalEffects,
         isMedia,
@@ -194,8 +196,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
     if (ref !== null && layout === 'none') {
         throw new TypeError('It is not supported to pass both a `ref` and `layout="none"` to <Sequence />.');
     }
-    const isSequenceHidden = (_b = hidden[id]) !== null && _b !== void 0 ? _b : false;
-    if (isSequenceHidden) {
+    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 })) }));

package/dist/cjs/SequenceManager.d.ts

@@ -8,11 +8,6 @@ export type SequenceManagerContext = {
 };
 export type SequenceNodePath = Array<string | number>;
 export declare const SequenceManager: React.Context<SequenceManagerContext>;
-export type SequenceVisibilityToggleState = {
-    hidden: Record<string, boolean>;
-    setHidden: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
-};
-export declare const SequenceVisibilityToggleContext: React.Context<SequenceVisibilityToggleState>;
 export type VisualModeCodeValues = {
     codeValues: CodeValues;
 };

package/dist/cjs/SequenceManager.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SequenceManagerProvider = exports.VisualModeSettersContext = exports.VisualModeDragOverridesContext = exports.VisualModeCodeValuesContext = exports.makeSequencePropsSubscriptionKey = exports.SequenceVisibilityToggleContext = exports.SequenceManager = void 0;
+exports.SequenceManagerProvider = exports.VisualModeSettersContext = exports.VisualModeDragOverridesContext = exports.VisualModeCodeValuesContext = exports.makeSequencePropsSubscriptionKey = exports.SequenceManager = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 exports.SequenceManager = react_1.default.createContext({
@@ -45,12 +45,6 @@ exports.SequenceManager = react_1.default.createContext({
     },
     sequences: [],
 });
-exports.SequenceVisibilityToggleContext = react_1.default.createContext({
-    hidden: {},
-    setHidden: () => {
-        throw new Error('SequenceVisibilityToggle not initialized');
-    },
-});
 const makeSequencePropsSubscriptionKey = (key) => {
     return `${key.nodePath.join('.')}.${key.sequenceKeys.join('.')}.${key.effectKeys.map((keys) => keys.join('.')).join('.')}`;
 };
@@ -86,7 +80,6 @@ exports.VisualModeSettersContext = react_1.default.createContext({
 const effectDragOverridesKey = (nodePath, effectIndex) => `${(0, exports.makeSequencePropsSubscriptionKey)(nodePath)}.effects.${effectIndex}`;
 const SequenceManagerProvider = ({ children }) => {
     const [sequences, setSequences] = (0, react_1.useState)([]);
-    const [hidden, setHidden] = (0, react_1.useState)({});
     const [dragOverrides, setControlOverrides] = (0, react_1.useState)({});
     const controlOverridesRef = (0, react_1.useRef)(dragOverrides);
     controlOverridesRef.current = dragOverrides;
@@ -161,12 +154,6 @@ const SequenceManagerProvider = ({ children }) => {
             unregisterSequence,
         };
     }, [registerSequence, sequences, unregisterSequence]);
-    const hiddenContext = (0, react_1.useMemo)(() => {
-        return {
-            hidden,
-            setHidden,
-        };
-    }, [hidden]);
     const getDragOverrides = (0, react_1.useCallback)((nodePath) => {
         var _a;
         return (_a = dragOverrides[(0, exports.makeSequencePropsSubscriptionKey)(nodePath)]) !== null && _a !== void 0 ? _a : {};
@@ -201,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.SequenceVisibilityToggleContext.Provider, { value: hiddenContext, 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 ((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 }) }) }) }));
 };
 exports.SequenceManagerProvider = SequenceManagerProvider;

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

@@ -1,2 +1,11 @@
+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: import("react").ForwardRefExoticComponent<RemotionAnimatedImageProps & import("react").RefAttributes<HTMLCanvasElement>>;
+export declare const AnimatedImage: React.ComponentType<Omit<import("../Sequence.js").SequenceProps, "children" | "layout" | "durationInFrames" | "_experimentalEffects"> & RemotionAnimatedImageProps & {
+    readonly durationInFrames?: number;
+    readonly _experimentalEffects?: EffectsProp;
+} & {
+    readonly _experimentalControls?: SequenceControls | undefined;
+    readonly ref?: React.Ref<HTMLCanvasElement>;
+}>;

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

@@ -4,21 +4,31 @@ exports.AnimatedImage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const cancel_render_js_1 = require("../cancel-render.js");
+const use_memoized_effects_js_1 = require("../effects/use-memoized-effects.js");
+const enable_sequence_stack_traces_js_1 = require("../enable-sequence-stack-traces.js");
+const sequence_field_schema_js_1 = require("../sequence-field-schema.js");
+const Sequence_js_1 = require("../Sequence.js");
 const use_current_frame_js_1 = require("../use-current-frame.js");
 const use_delay_render_js_1 = require("../use-delay-render.js");
 const use_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 resolve_image_source_1 = require("./resolve-image-source");
-exports.AnimatedImage = (0, react_1.forwardRef)(({ src, width, height, onError, loopBehavior = 'loop', playbackRate = 1, fit = 'fill', ...props }, canvasRef) => {
-    const mountState = (0, react_1.useRef)({ isMounted: true });
-    (0, react_1.useEffect)(() => {
-        const { current } = mountState;
-        current.isMounted = true;
-        return () => {
-            current.isMounted = false;
-        };
-    }, []);
+const animatedImageSchema = {
+    playbackRate: {
+        type: 'number',
+        min: 0,
+        max: 10,
+        step: 0.1,
+        default: 1,
+        description: 'Playback Rate',
+    },
+    ...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) => {
+    var _a;
     const resolvedSrc = (0, resolve_image_source_1.resolveAnimatedImageSource)(src);
     const [imageDecoder, setImageDecoder] = (0, react_1.useState)(null);
     const { delayRender, continueRender } = (0, use_delay_render_js_1.useDelayRender)();
@@ -29,6 +39,10 @@ exports.AnimatedImage = (0, react_1.forwardRef)(({ src, width, height, onError,
     const currentTimeRef = (0, react_1.useRef)(currentTime);
     currentTimeRef.current = currentTime;
     const ref = (0, react_1.useRef)(null);
+    const memoizedEffects = (0, use_memoized_effects_js_1.useMemoizedEffects)({
+        effects,
+        overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null,
+    });
     (0, react_1.useImperativeHandle)(canvasRef, () => {
         var _a;
         const c = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getCanvas();
@@ -78,21 +92,28 @@ exports.AnimatedImage = (0, react_1.forwardRef)(({ src, width, height, onError,
             return;
         }
         const delay = delayRender(`Rendering frame at ${currentTime} of <AnimatedImage src="${src}"/>`);
+        let cancelled = false;
         imageDecoder
             .getFrame(currentTime, loopBehavior)
-            .then((videoFrame) => {
+            .then(async (videoFrame) => {
             var _a, _b;
-            if (mountState.current.isMounted) {
-                if (videoFrame === null) {
-                    (_a = ref.current) === null || _a === void 0 ? void 0 : _a.clear();
-                }
-                else {
-                    (_b = ref.current) === null || _b === void 0 ? void 0 : _b.draw(videoFrame.frame);
-                }
+            if (cancelled) {
+                return;
+            }
+            if (videoFrame === null) {
+                (_a = ref.current) === null || _a === void 0 ? void 0 : _a.clear();
+                continueRender(delay);
+                return;
+            }
+            const completed = await ((_b = ref.current) === null || _b === void 0 ? void 0 : _b.draw(videoFrame.frame));
+            if (completed && !cancelled) {
+                continueRender(delay);
             }
-            continueRender(delay);
         })
             .catch((err) => {
+            if (cancelled) {
+                return;
+            }
             if (onError) {
                 onError(err);
                 continueRender(delay);
@@ -101,6 +122,10 @@ exports.AnimatedImage = (0, react_1.forwardRef)(({ src, width, height, onError,
                 (0, cancel_render_js_1.cancelRender)(err);
             }
         });
+        return () => {
+            cancelled = true;
+            continueRender(delay);
+        };
     }, [
         currentTime,
         imageDecoder,
@@ -109,6 +134,32 @@ exports.AnimatedImage = (0, react_1.forwardRef)(({ src, width, height, onError,
         src,
         continueRender,
         delayRender,
+        memoizedEffects,
+        fit,
+        width,
+        height,
     ]);
-    return ((0, jsx_runtime_1.jsx)(canvas_1.Canvas, { ref: ref, width: width, height: height, fit: fit, ...props }));
+    return ((0, 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, _experimentalEffects: 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 memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
+    const animatedImageProps = {
+        src,
+        width,
+        height,
+        onError,
+        fit,
+        playbackRate,
+        loopBehavior,
+        id,
+        className,
+        style,
+    };
+    return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", durationInFrames: resolvedDuration, name: "<AnimatedImage>", _experimentalControls: controls, _experimentalEffects: memoizedEffectDefinitions, ...sequenceProps, children: (0, jsx_runtime_1.jsx)(AnimatedImageContent, { ...animatedImageProps, ref: ref, effects: effects, controls: controls }) }));
+};
+exports.AnimatedImage = (0, wrap_in_schema_js_1.wrapInSchema)(AnimatedImageInner, animatedImageSchema);
+exports.AnimatedImage.displayName = 'AnimatedImage';
+(0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(exports.AnimatedImage);

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { EffectDefinitionAndStack } from '../effects/effect-types.js';
 import type { AnimatedImageFillMode } from './props';
 type Props = {
     readonly width?: number;
@@ -6,9 +7,10 @@ type Props = {
     readonly fit: AnimatedImageFillMode;
     readonly className?: string;
     readonly style?: React.CSSProperties;
+    readonly effects: EffectDefinitionAndStack<unknown>[];
 };
 export type AnimatedImageCanvasRef = {
-    readonly draw: (imageData: VideoFrame) => void;
+    readonly draw: (imageData: VideoFrame) => Promise<boolean>;
     readonly getCanvas: () => HTMLCanvasElement | null;
     clear: () => void;
 };