remotion 4.0.534 → 4.0.536

package/dist/cjs/Folder.js

@@ -3,15 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Folder = exports.FolderContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
-const sequence_order_marker_js_1 = require("./sequence-order-marker.js");
+const committed_metadata_js_1 = require("./committed-metadata.js");
+const composition_registry_fallback_js_1 = require("./composition-registry-fallback.js");
 const truthy_js_1 = require("./truthy.js");
-const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const validate_folder_name_js_1 = require("./validation/validate-folder-name.js");
 exports.FolderContext = (0, react_1.createContext)({
     folderName: null,
     parentName: null,
 });
+const FolderContextProvider = (0, committed_metadata_js_1.withCommittedMetadata)(exports.FolderContext.Provider);
 /*
  * @description By wrapping a <Composition /> inside a <Folder />, you can visually categorize it in your sidebar, should you have many compositions.
  * @see [Documentation](https://remotion.dev/docs/folder)
@@ -20,8 +20,6 @@ const Folder = (props) => {
     var _a;
     const { name, children } = props;
     const parent = (0, react_1.useContext)(exports.FolderContext);
-    const { registerFolder, unregisterFolder } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionSetters);
-    const environment = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const stack = (_a = props
         ._remotionInternalStack) !== null && _a !== void 0 ? _a : null;
     (0, validate_folder_name_js_1.validateFolderName)(name);
@@ -33,20 +31,13 @@ const Folder = (props) => {
             parentName,
         };
     }, [name, parentName]);
-    (0, react_1.useEffect)(() => {
-        registerFolder(name, parentName, stack);
-        return () => {
-            unregisterFolder(name, parentName);
-        };
-    }, [
-        name,
-        parent.folderName,
-        parentName,
-        registerFolder,
-        unregisterFolder,
-        stack,
-    ]);
-    const folder = (jsx_runtime_1.jsx(exports.FolderContext.Provider, { value: value, children: children }));
-    return environment.isStudio ? (jsx_runtime_1.jsx(sequence_order_marker_js_1.FolderOrderMarker, { folderId: (0, sequence_order_marker_js_1.getFolderOrderId)({ name, parent: parentName }), children: folder })) : (folder);
+    const registration = (0, react_1.useMemo)(() => ({ name, parent: parentName, order: null, stack }), [name, parentName, stack]);
+    const metadata = (0, react_1.useMemo)(() => ({
+        type: 'folder',
+        id: (0, committed_metadata_js_1.getFolderOrderId)({ name, parent: parentName }),
+        value: registration,
+    }), [name, parentName, registration]);
+    (0, composition_registry_fallback_js_1.useCommittedCompositionEntry)(metadata);
+    return (jsx_runtime_1.jsx(FolderContextProvider, { value: value, _remotionCommitMetadata: metadata, children: children }));
 };
 exports.Folder = Folder;

package/dist/cjs/HtmlInCanvas.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { EffectsProp } from './effects/effect-types.js';
+import type { EffectsProp, EffectsOutputSize } from './effects/effect-types.js';
 import type { InteractiveBaseProps, InteractiveCropProps } from './Interactive.js';
 import type { AbsoluteFillLayout } from './Sequence.js';
 declare global {
@@ -63,8 +63,8 @@ declare global {
 }
 export type HtmlInCanvasOnPaintParams = {
     /**
-     * The `OffscreenCanvas` from {@link HTMLCanvasElement.transferControlToOffscreen}
-     * on the layout `<canvas>` (same logical canvas as the forwarded ref).
+     * The paint target. During rendering, its pixels are copied to the layout
+     * `<canvas>` after painting; during preview, it controls that canvas directly.
      */
     readonly canvas: OffscreenCanvas;
     readonly element: HTMLDivElement;
@@ -85,6 +85,7 @@ export type HtmlInCanvasProps = Omit<InteractiveBaseProps, 'children'> & Interac
     readonly width: number;
     readonly height: number;
     readonly effects?: EffectsProp;
+    readonly effectsOutputSize?: EffectsOutputSize;
     readonly children: React.ReactNode;
     readonly onPaint?: HtmlInCanvasOnPaint;
     readonly onInit?: HtmlInCanvasOnInit;
@@ -205,7 +206,7 @@ export declare const htmlInCanvasSchema: {
     };
     readonly premountFor: {
         readonly type: "number";
-        readonly default: 0;
+        readonly default: undefined;
         readonly description: "Premount For";
         readonly min: 0;
         readonly step: 1;
@@ -313,6 +314,7 @@ export declare const HtmlInCanvas: React.ForwardRefExoticComponent<Omit<Interact
     readonly width: number;
     readonly height: number;
     readonly effects?: EffectsProp | undefined;
+    readonly effectsOutputSize?: EffectsOutputSize | undefined;
     readonly children: React.ReactNode;
     readonly onPaint?: HtmlInCanvasOnPaint | undefined;
     readonly onInit?: HtmlInCanvasOnInit | undefined;

package/dist/cjs/HtmlInCanvas.js

@@ -12,6 +12,7 @@ const interactivity_schema_js_1 = require("./interactivity-schema.js");
 const resolve_sequence_duration_js_1 = require("./resolve-sequence-duration.js");
 const Sequence_js_1 = require("./Sequence.js");
 const use_crop_style_js_1 = require("./use-crop-style.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_premounting_js_1 = require("./use-premounting.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
@@ -144,13 +145,12 @@ const defaultOnPaint = ({ canvas, elementImage, }) => {
     ctx.reset();
     ctx.drawElementImage(elementImage, 0, 0);
 };
-/* eslint-enable react/require-default-props */
-const HtmlInCanvasAncestorContext = (0, react_1.createContext)(false);
-const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, children, canvasSiblings, onPaint, onInit, pixelDensity, controls, style, }, ref) => {
+const HtmlInCanvasAncestorContext = (0, react_1.createContext)(null);
+const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, effectsOutputSize, children, canvasSiblings, onPaint, onInit, pixelDensity, controls, style, renderFrame, }, ref) => {
     var _a, _b;
-    const isInsideAncestorHtmlInCanvas = (0, react_1.useContext)(HtmlInCanvasAncestorContext);
+    const ancestorPaintState = (0, react_1.useContext)(HtmlInCanvasAncestorContext);
     assertHtmlInCanvasDimensions(width, height);
-    if (isInsideAncestorHtmlInCanvas && !(0, exports.isHtmlInCanvasNestingSupported)()) {
+    if (ancestorPaintState && !(0, exports.isHtmlInCanvasNestingSupported)()) {
         throw new Error(`Nested <HtmlInCanvas> components require Chrome ${MINIMUM_CHROME_VERSION_FOR_NESTED_HTML_IN_CANVAS} or newer with HTML-in-canvas enabled.`);
     }
     const resolvedPixelDensity = resolveHtmlInCanvasPixelDensity(pixelDensity);
@@ -160,23 +160,68 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
     const { isClientSideRendering, isRendering } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const canRetryMissingPaintRecord = !isRendering || isClientSideRendering;
     const usesDirectLayoutCanvas = onPaint === undefined && onInit === undefined;
+    const paintTargetMode = usesDirectLayoutCanvas
+        ? 'direct'
+        : isRendering
+            ? 'copied'
+            : 'transferred';
     if (!(0, exports.isHtmlInCanvasSupported)()) {
         cancelRender(new Error((0, exports.getHtmlInCanvasUnsupportedMessage)()));
     }
     const canvas2dRef = (0, react_1.useRef)(null);
+    const outputCanvasRef = (0, react_1.useRef)(null);
     const paintTargetRef = (0, react_1.useRef)(null);
     const divRef = (0, react_1.useRef)(null);
-    const canvasSizeKey = `${width}x${height}@${resolvedPixelDensity}-${usesDirectLayoutCanvas ? 'direct' : 'offscreen'}`;
-    const setLayoutCanvasRef = (0, react_1.useCallback)((node) => {
-        canvas2dRef.current = node;
+    const canvasSizeKey = `${width}x${height}@${resolvedPixelDensity}-${paintTargetMode}`;
+    const paintState = (0, react_1.useMemo)(() => {
+        const state = {
+            pendingChildren: 0,
+            generation: 0,
+            release: null,
+            blockPaint: () => {
+                state.pendingChildren++;
+                state.generation++;
+                if (state.release === null) {
+                    const handle = delayRender('waiting for nested HtmlInCanvas paint');
+                    const releaseAncestor = ancestorPaintState === null || ancestorPaintState === void 0 ? void 0 : ancestorPaintState.blockPaint();
+                    state.release = () => {
+                        continueRender(handle);
+                        releaseAncestor === null || releaseAncestor === void 0 ? void 0 : releaseAncestor();
+                    };
+                }
+                let released = false;
+                return () => {
+                    var _a, _b;
+                    if (released) {
+                        return;
+                    }
+                    released = true;
+                    state.pendingChildren--;
+                    if (state.pendingChildren === 0) {
+                        // A child can finish asynchronously after our paint record was
+                        // taken. Keep capture blocked until we paint its finished pixels.
+                        (_b = (_a = canvas2dRef.current) === null || _a === void 0 ? void 0 : _a.requestPaint) === null || _b === void 0 ? void 0 : _b.call(_a);
+                    }
+                };
+            },
+        };
+        return state;
+    }, [continueRender, delayRender, ancestorPaintState]);
+    const setVisibleCanvasRef = (0, react_1.useCallback)((node) => {
+        if (paintTargetMode === 'copied') {
+            outputCanvasRef.current = node;
+        }
+        else {
+            canvas2dRef.current = node;
+        }
         if (typeof ref === 'function') {
             ref(node);
         }
         else if (ref) {
             ref.current = node;
         }
-    }, [ref]);
-    const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)();
+    }, [ref, paintTargetMode]);
+    const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)(effectsOutputSize);
     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,
@@ -192,7 +237,13 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
     const initializedRef = (0, react_1.useRef)(false);
     const onInitCleanupRef = (0, react_1.useRef)(null);
     const unmountedRef = (0, react_1.useRef)(false);
+    const paintingTargets = (0, react_1.useRef)(new WeakMap());
     const onPaintCb = (0, react_1.useCallback)(async () => {
+        var _a, _b;
+        if (isRendering && paintState.pendingChildren > 0) {
+            return;
+        }
+        const childrenGeneration = paintState.generation;
         const element = divRef.current;
         if (!element) {
             throw new Error('Canvas or scene element not found');
@@ -201,16 +252,32 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
         if (!paintTarget) {
             throw new Error('HtmlInCanvas: paint target is not ready because the canvas is remounting');
         }
+        const inProgress = paintingTargets.current.get(paintTarget);
+        if (isRendering && inProgress) {
+            // In particular, do not run onPaint while an earlier event is still
+            // awaiting onInit (e.g. a WebGPU device).
+            inProgress.repaint = true;
+            return;
+        }
+        const painting = { repaint: false };
+        if (isRendering) {
+            paintingTargets.current.set(paintTarget, painting);
+        }
         resizePaintTarget({
             target: paintTarget,
             width: canvasWidth,
             height: canvasHeight,
         });
+        const releaseAncestor = isRendering
+            ? ancestorPaintState === null || ancestorPaintState === void 0 ? void 0 : ancestorPaintState.blockPaint()
+            : null;
+        let canReleasePaint = false;
         try {
             const placeholderCanvas = canvas2dRef.current;
             if (!placeholderCanvas) {
                 throw new Error('Canvas not found');
             }
+            const outputCanvas = outputCanvasRef.current;
             const handle = delayRender('onPaint');
             if (!initializedRef.current) {
                 const currentOnInit = onInitRef.current;
@@ -230,6 +297,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
                             canRetryMissingPaintRecord) {
                             // The web renderer explicitly drives additional paint cycles, so a
                             // transient missing record can be retried without failing the render.
+                            canReleasePaint = true;
                             continueRender(handle);
                             return;
                         }
@@ -252,12 +320,13 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
                         if (typeof cleanup !== 'function') {
                             throw new Error('HtmlInCanvas: when `onInit` is provided, it must return a cleanup function, or a Promise that resolves to one.');
                         }
-                        if (unmountedRef.current) {
+                        if (unmountedRef.current ||
+                            paintTargetRef.current !== paintTarget) {
                             cleanup();
+                            continueRender(handle);
+                            return;
                         }
-                        else {
-                            onInitCleanupRef.current = cleanup;
-                        }
+                        onInitCleanupRef.current = cleanup;
                     }
                     finally {
                         initImage.close();
@@ -273,6 +342,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
                 // element is outside the viewport (no cached paint record).
                 // Skip this paint cycle — the canvas retains its last state.
                 if (isMissingPaintRecordError(error) && canRetryMissingPaintRecord) {
+                    canReleasePaint = true;
                     continueRender(handle);
                     return;
                 }
@@ -321,11 +391,39 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
             finally {
                 elImage.close();
             }
+            if (paintTargetMode === 'copied' &&
+                paintTargetRef.current === paintTarget &&
+                outputCanvas) {
+                const ctx = outputCanvas.getContext('2d');
+                if (!ctx) {
+                    throw new Error('HtmlInCanvas: could not get layout canvas context');
+                }
+                // A transferred OffscreenCanvas submits its pixels asynchronously.
+                // Copy before releasing the render handle so capture sees this paint.
+                // drawImage preserves the source for handlers that paint incrementally.
+                ctx.reset();
+                ctx.drawImage(paintTarget, 0, 0);
+            }
+            canReleasePaint = true;
             continueRender(handle);
         }
         catch (error) {
             cancelRender(error);
         }
+        finally {
+            if (canReleasePaint &&
+                paintState.pendingChildren === 0 &&
+                paintState.generation === childrenGeneration) {
+                const { release } = paintState;
+                paintState.release = null;
+                release === null || release === void 0 ? void 0 : release();
+            }
+            releaseAncestor === null || releaseAncestor === void 0 ? void 0 : releaseAncestor();
+            paintingTargets.current.delete(paintTarget);
+            if (painting.repaint && paintTargetRef.current === paintTarget) {
+                (_b = (_a = canvas2dRef.current) === null || _a === void 0 ? void 0 : _a.requestPaint) === null || _b === void 0 ? void 0 : _b.call(_a);
+            }
+        }
     }, [
         canvasHeight,
         canvasWidth,
@@ -335,9 +433,22 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
         delayRender,
         resolvedPixelDensity,
         canRetryMissingPaintRecord,
+        paintTargetMode,
+        isRendering,
+        paintState,
+        ancestorPaintState,
     ]);
+    (0, react_1.useLayoutEffect)(() => {
+        return () => {
+            var _a;
+            (_a = paintState.release) === null || _a === void 0 ? void 0 : _a.call(paintState);
+            paintState.release = null;
+        };
+    }, [paintState]);
     // Default paint handlers draw synchronously on the layout canvas itself.
-    // Custom handlers retain the transferred OffscreenCanvas API.
+    // ElementImage can only be drawn into its associated canvas, so custom
+    // handlers retain a transferred target. Rendering copies it to a separate
+    // visible canvas without waiting for the transferred canvas to present.
     (0, react_1.useLayoutEffect)(() => {
         var _a;
         const placeholder = canvas2dRef.current;
@@ -347,7 +458,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
         placeholder.setAttribute('content', 'drawable');
         placeholder.layoutSubtree = true;
         (_a = divRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute('drawable', '');
-        const paintTarget = usesDirectLayoutCanvas
+        const paintTarget = paintTargetMode === 'direct'
             ? placeholder
             : getTransferredOffscreenCanvas(placeholder);
         paintTargetRef.current = paintTarget;
@@ -368,13 +479,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
             (_a = onInitCleanupRef.current) === null || _a === void 0 ? void 0 : _a.call(onInitCleanupRef);
             onInitCleanupRef.current = null;
         };
-    }, [
-        onPaintCb,
-        cancelRender,
-        canvasWidth,
-        canvasHeight,
-        usesDirectLayoutCanvas,
-    ]);
+    }, [onPaintCb, cancelRender, canvasWidth, canvasHeight, paintTargetMode]);
     const onPaintChangedRef = (0, react_1.useRef)(false);
     (0, react_1.useLayoutEffect)(() => {
         var _a;
@@ -389,18 +494,37 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
         (_a = canvas.requestPaint) === null || _a === void 0 ? void 0 : _a.call(canvas);
     }, [onPaint, memoizedEffects]);
     (0, react_1.useLayoutEffect)(() => {
+        var _a;
         const canvas = canvas2dRef.current;
         if (!canvas) {
             return;
         }
-        const handle = delayRender('waiting for first paint after canvas resize');
-        canvas.addEventListener('paint', () => {
+        // Block capture before the paint event begins, including updates that
+        // keep the same canvas. onPaintCb holds its own handle through async work.
+        const handle = delayRender('waiting for HtmlInCanvas paint');
+        const releaseAncestor = isRendering
+            ? ancestorPaintState === null || ancestorPaintState === void 0 ? void 0 : ancestorPaintState.blockPaint()
+            : null;
+        const onPainted = () => {
             continueRender(handle);
-        }, { once: true });
+            releaseAncestor === null || releaseAncestor === void 0 ? void 0 : releaseAncestor();
+        };
+        canvas.addEventListener('paint', onPainted, { once: true });
+        (_a = canvas.requestPaint) === null || _a === void 0 ? void 0 : _a.call(canvas);
         return () => {
-            continueRender(handle);
+            canvas.removeEventListener('paint', onPainted);
+            onPainted();
         };
-    }, [width, height, continueRender, delayRender, canvasSizeKey]);
+    }, [
+        width,
+        height,
+        continueRender,
+        delayRender,
+        canvasSizeKey,
+        renderFrame,
+        isRendering,
+        ancestorPaintState,
+    ]);
     const innerStyle = (0, react_1.useMemo)(() => {
         return {
             width,
@@ -414,12 +538,35 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
             ...(style !== null && style !== void 0 ? style : {}),
         };
     }, [height, style, width]);
-    return (jsx_runtime_1.jsx(HtmlInCanvasAncestorContext.Provider, { value: true, children: jsx_runtime_1.jsxs("canvas", { ref: setLayoutCanvasRef, width: canvasWidth, height: canvasHeight, style: canvasStyle, children: [
-                jsx_runtime_1.jsx("div", { ref: divRef, style: innerStyle, children: children }), canvasSiblings] }, canvasSizeKey) }));
+    return (jsx_runtime_1.jsxs(HtmlInCanvasAncestorContext.Provider, { value: paintState, children: [
+            jsx_runtime_1.jsxs("canvas", { ref: paintTargetMode === 'copied' ? canvas2dRef : setVisibleCanvasRef, width: canvasWidth, height: canvasHeight, style: paintTargetMode === 'copied'
+                    ? {
+                        ...canvasStyle,
+                        position: 'absolute',
+                        // Hide the source canvas while keeping its drawable children
+                        // visible to captureElementImage. opacity: 0 drops paint records.
+                        visibility: 'hidden',
+                        pointerEvents: 'none',
+                    }
+                    : canvasStyle, children: [
+                    jsx_runtime_1.jsx("div", { ref: divRef, style: paintTargetMode === 'copied'
+                            ? { ...innerStyle, visibility: 'visible' }
+                            : innerStyle, children: children }), canvasSiblings] }, canvasSizeKey), paintTargetMode === 'copied' ? (jsx_runtime_1.jsx("canvas", { ref: setVisibleCanvasRef, width: canvasWidth, height: canvasHeight, style: canvasStyle }, `output-${canvasSizeKey}`)) : null] }));
 });
 HtmlInCanvasContent.displayName = 'HtmlInCanvasContent';
-const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = [], children, onPaint, onInit, pixelDensity, _remotionInternalCanvasSiblings, controls, style, cropLeft, cropRight, cropTop, cropBottom, durationInFrames, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, name, ...sequenceProps }, ref) => {
+// Subscribe to frame changes only while rendering. Preview keeps relying on
+// the browser's paints and does not need a capture barrier on every frame.
+const HtmlInCanvasContentForRendering = (0, react_1.forwardRef)((props, ref) => {
+    const frame = (0, use_current_frame_js_1.useCurrentFrame)();
+    return jsx_runtime_1.jsx(HtmlInCanvasContent, { ...props, ref: ref, renderFrame: frame });
+});
+HtmlInCanvasContentForRendering.displayName = 'HtmlInCanvasContentForRendering';
+const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = [], effectsOutputSize, children, onPaint, onInit, pixelDensity, _remotionInternalCanvasSiblings, controls, style, cropLeft, cropRight, cropTop, cropBottom, durationInFrames, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, name, ...sequenceProps }, ref) => {
     var _a;
+    const { isRendering } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
+    const Content = isRendering
+        ? HtmlInCanvasContentForRendering
+        : HtmlInCanvasContent;
     const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
     const actualRef = (0, react_1.useRef)(null);
     const setCanvasRef = (0, react_1.useCallback)((node) => {
@@ -453,7 +600,7 @@ const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = []
         style: premountingStyle,
         componentName: '<HtmlInCanvas />',
     });
-    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, _remotionInternalIsPremounting: premountingActive, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<HtmlInCanvas>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/remotion/html-in-canvas", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, ...sequenceProps, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(HtmlInCanvasContent, { ref: setCanvasRef, width: width, height: height, effects: effects, onPaint: onPaint, onInit: onInit, pixelDensity: pixelDensity, canvasSiblings: _remotionInternalCanvasSiblings !== null && _remotionInternalCanvasSiblings !== void 0 ? _remotionInternalCanvasSiblings : null, controls: controls, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, children: children }) }) }));
+    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, _remotionInternalIsPremounting: premountingActive, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<HtmlInCanvas>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/remotion/html-in-canvas", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, ...sequenceProps, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(Content, { ref: setCanvasRef, renderFrame: null, width: width, height: height, effects: effects, effectsOutputSize: effectsOutputSize !== null && effectsOutputSize !== void 0 ? effectsOutputSize : null, onPaint: onPaint, onInit: onInit, pixelDensity: pixelDensity, canvasSiblings: _remotionInternalCanvasSiblings !== null && _remotionInternalCanvasSiblings !== void 0 ? _remotionInternalCanvasSiblings : null, controls: controls, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, children: children }) }) }));
 });
 HtmlInCanvasInner.displayName = 'HtmlInCanvas';
 exports.htmlInCanvasSchema = {

package/dist/cjs/IFrame.js

@@ -6,16 +6,48 @@ const react_1 = require("react");
 const use_delay_render_js_1 = require("./use-delay-render.js");
 const IFrameRefForwarding = ({ onLoad, onError, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...props }, ref) => {
     const { delayRender, continueRender } = (0, use_delay_render_js_1.useDelayRender)();
-    const [handle] = (0, react_1.useState)(() => delayRender(`Loading <IFrame> with source ${props.src}`, {
-        retries: delayRenderRetries !== null && delayRenderRetries !== void 0 ? delayRenderRetries : undefined,
-        timeoutInMilliseconds: delayRenderTimeoutInMilliseconds !== null && delayRenderTimeoutInMilliseconds !== void 0 ? delayRenderTimeoutInMilliseconds : undefined,
-    }));
+    const handle = (0, react_1.useRef)(null);
+    const loadedSource = (0, react_1.useRef)(null);
+    const { src, srcDoc } = props;
+    (0, react_1.useLayoutEffect)(() => {
+        var _a, _b;
+        if (((_a = loadedSource.current) === null || _a === void 0 ? void 0 : _a.src) === src &&
+            ((_b = loadedSource.current) === null || _b === void 0 ? void 0 : _b.srcDoc) === srcDoc &&
+            loadedSource.current !== null) {
+            return;
+        }
+        const newHandle = delayRender(`Loading <IFrame> with source ${src}`, {
+            retries: delayRenderRetries !== null && delayRenderRetries !== void 0 ? delayRenderRetries : undefined,
+            timeoutInMilliseconds: delayRenderTimeoutInMilliseconds !== null && delayRenderTimeoutInMilliseconds !== void 0 ? delayRenderTimeoutInMilliseconds : undefined,
+        });
+        loadedSource.current = null;
+        handle.current = newHandle;
+        return () => {
+            continueRender(newHandle);
+            handle.current = null;
+        };
+    }, [
+        continueRender,
+        delayRender,
+        delayRenderRetries,
+        delayRenderTimeoutInMilliseconds,
+        src,
+        srcDoc,
+    ]);
     const didLoad = (0, react_1.useCallback)((e) => {
-        continueRender(handle);
+        loadedSource.current = { src, srcDoc };
+        if (handle.current !== null) {
+            continueRender(handle.current);
+            handle.current = null;
+        }
         onLoad === null || onLoad === void 0 ? void 0 : onLoad(e);
-    }, [handle, onLoad, continueRender]);
+    }, [onLoad, continueRender, src, srcDoc]);
     const didGetError = (0, react_1.useCallback)((e) => {
-        continueRender(handle);
+        loadedSource.current = { src, srcDoc };
+        if (handle.current !== null) {
+            continueRender(handle.current);
+            handle.current = null;
+        }
         if (onError) {
             onError(e);
         }
@@ -23,7 +55,7 @@ const IFrameRefForwarding = ({ onLoad, onError, delayRenderRetries, delayRenderT
             // eslint-disable-next-line no-console
             console.error('Error loading iframe:', e, 'Handle the event using the onError() prop to make this message disappear.');
         }
-    }, [handle, onError, continueRender]);
+    }, [onError, continueRender, src, srcDoc]);
     return (jsx_runtime_1.jsx("iframe", { referrerPolicy: "strict-origin-when-cross-origin", ...props, ref: ref, onError: didGetError, onLoad: didLoad }));
 };
 /*

package/dist/cjs/Img.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { EffectsProp } from './effects/effect-types.js';
+import type { EffectsProp, EffectsOutputSize } from './effects/effect-types.js';
 import type { InteractiveBaseProps, InteractiveCropProps, InteractivePremountProps } from './Interactive.js';
 type NativeImgProps = Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'src'>;
 export type ImgProps = NativeImgProps & {
@@ -11,6 +11,7 @@ export type ImgProps = NativeImgProps & {
     readonly onImageError?: (error: Error) => void;
     readonly src: string;
     readonly effects?: EffectsProp;
+    readonly effectsOutputSize?: EffectsOutputSize;
     readonly showInTimeline?: boolean;
     readonly name?: string;
 } & Omit<InteractiveBaseProps, 'playbackRate'> & InteractiveCropProps & InteractivePremountProps;
@@ -128,7 +129,7 @@ export declare const imgSchema: {
     };
     readonly premountFor: {
         readonly type: "number";
-        readonly default: 0;
+        readonly default: undefined;
         readonly description: "Premount For";
         readonly min: 0;
         readonly step: 1;
@@ -229,6 +230,7 @@ export declare const Img: React.ComponentType<NativeImgProps & {
     readonly onImageError?: ((error: Error) => void) | undefined;
     readonly src: string;
     readonly effects?: EffectsProp | undefined;
+    readonly effectsOutputSize?: EffectsOutputSize | undefined;
     readonly showInTimeline?: boolean | undefined;
     readonly name?: string | undefined;
 } & Omit<InteractiveBaseProps, "playbackRate"> & InteractiveCropProps & InteractivePremountProps>;

package/dist/cjs/Img.js

@@ -10,6 +10,7 @@ const get_cross_origin_value_js_1 = require("./get-cross-origin-value.js");
 const interactivity_schema_js_1 = require("./interactivity-schema.js");
 const prefetch_js_1 = require("./prefetch.js");
 const resolve_sequence_duration_js_1 = require("./resolve-sequence-duration.js");
+const sequence_activity_context_js_1 = require("./sequence-activity-context.js");
 const Sequence_js_1 = require("./Sequence.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
 const truncate_src_for_label_js_1 = require("./truncate-src-for-label.js");
@@ -228,7 +229,7 @@ const NativeImgInner = ({ hidden, name, showInTimeline, src, from, trimBefore, l
         style: premountingStyle,
         componentName: '<Img />',
     });
-    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, _remotionInternalIsPremounting: premountingActive, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, loop: loop, durationInFrames: durationInFrames, freeze: freeze, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _remotionInternalIsMedia: isMedia, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, name: name !== null && name !== void 0 ? name : '<Img>', controls: controls, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, hidden: hidden, children: jsx_runtime_1.jsx(ImgContent, { src: src, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, ...props }) }) }));
+    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, _remotionInternalIsPremounting: premountingActive, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, loop: loop, durationInFrames: durationInFrames, freeze: freeze, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _remotionInternalIsMedia: isMedia, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, name: name !== null && name !== void 0 ? name : '<Img>', controls: controls, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, hidden: hidden, children: jsx_runtime_1.jsx(sequence_activity_context_js_1.SequenceContent, { children: jsx_runtime_1.jsx(ImgContent, { src: src, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, ...props }) }) }) }));
 };
 const CanvasImageWithPrivateProps = index_js_1.CanvasImage;
 exports.imgSchema = {
@@ -285,7 +286,7 @@ const getFitFromObjectFit = (style) => {
     }
     return undefined;
 };
-const ImgInner = ({ effects = [], ref, hidden, name, showInTimeline, src, from, trimBefore, durationInFrames, freeze, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, controls, width, height, className, style, cropLeft, cropRight, cropTop, cropBottom, id, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, onImageError, ...props }) => {
+const ImgInner = ({ effects = [], effectsOutputSize, ref, hidden, name, showInTimeline, src, from, trimBefore, durationInFrames, freeze, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, controls, width, height, className, style, cropLeft, cropRight, cropTop, cropBottom, id, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, onImageError, ...props }) => {
     var _a;
     const shouldPauseWhenLoading = (0, v5_flag_js_1.resolveV5Default)(pauseWhenLoading);
     if (effects.length === 0) {
@@ -304,7 +305,7 @@ const ImgInner = ({ effects = [], ref, hidden, name, showInTimeline, src, from,
     const canvasHeight = typeof height === 'number' ? height : undefined;
     const canvasProps = props;
     const canvasFit = (_a = getFitFromObjectFit(style)) !== null && _a !== void 0 ? _a : 'fill';
-    return (jsx_runtime_1.jsx(CanvasImageWithPrivateProps, { src: src, width: canvasWidth, height: canvasHeight, fit: canvasFit, effects: effects, className: className, style: style, cropLeft: cropLeft, cropRight: cropRight, cropTop: cropTop, cropBottom: cropBottom, id: id, onError: onImageError, pauseWhenLoading: shouldPauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, from: from, trimBefore: trimBefore, durationInFrames: durationInFrames, freeze: freeze, premountFor: premountFor, postmountFor: postmountFor, styleWhilePremounted: styleWhilePremounted, styleWhilePostmounted: styleWhilePostmounted, hidden: hidden, name: name !== null && name !== void 0 ? name : '<Img>', showInTimeline: showInTimeline, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _remotionInternalCropComponentName: "<Img />", controls: controls, ...canvasProps }));
+    return (jsx_runtime_1.jsx(CanvasImageWithPrivateProps, { src: src, width: canvasWidth, height: canvasHeight, fit: canvasFit, effects: effects, effectsOutputSize: effectsOutputSize, className: className, style: style, cropLeft: cropLeft, cropRight: cropRight, cropTop: cropTop, cropBottom: cropBottom, id: id, onError: onImageError, pauseWhenLoading: shouldPauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, from: from, trimBefore: trimBefore, durationInFrames: durationInFrames, freeze: freeze, premountFor: premountFor, postmountFor: postmountFor, styleWhilePremounted: styleWhilePremounted, styleWhilePostmounted: styleWhilePostmounted, hidden: hidden, name: name !== null && name !== void 0 ? name : '<Img>', showInTimeline: showInTimeline, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _remotionInternalCropComponentName: "<Img />", controls: controls, ...canvasProps }));
 };
 /*
  * @description Works just like a regular HTML img tag. When you use the <Img> tag, Remotion will ensure that the image is loaded before rendering the frame.