remotion 4.0.534 → 4.0.535

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

@@ -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;

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, 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,22 +160,67 @@ 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]);
+    }, [ref, paintTargetMode]);
     const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)();
     const memoizedEffects = (0, use_memoized_effects_js_1.useMemoizedEffects)({
         effects,
@@ -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';
+// 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 = [], 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, 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.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 = {

package/dist/cjs/Interactive.d.ts

@@ -25,12 +25,21 @@ type PropsBranchAcceptsStyle<Props> = Props extends unknown ? 'style' extends ke
 type EveryPropsBranchAcceptsStyle<Props> = [Props] extends [never] ? false : false extends PropsBranchAcceptsStyle<Props> ? false : true;
 type ComponentAcceptingStyle<Component extends React.ElementType, ReservedKey extends PropertyKey> = ComponentWithoutReservedProps<Component, ReservedKey> & (EveryPropsBranchAcceptsStyle<React.ComponentPropsWithoutRef<Component>> extends true ? unknown : never);
 type WithSchema = {
+    <S extends InteractivitySchema, Component extends React.ElementType>(options: Omit<WithInteractivitySchemaOptions<S, React.ComponentPropsWithoutRef<Component>>, 'Component' | 'supportsEffects'> & {
+        readonly Component: ComponentWithoutReservedProps<Component, WithSchemaReservedKey | 'style' | 'width' | 'height'>;
+        readonly wrapInSequence: true;
+        readonly layout: 'absolute-fill';
+    }): React.FC<React.ComponentPropsWithoutRef<Component> & InteractiveBaseProps & InteractivePremountProps & InteractiveCropProps & InteractiveTransformProps & Pick<SequenceProps, 'width' | 'height'> & {
+        readonly ref?: React.Ref<HTMLDivElement>;
+    }>;
     <S extends InteractivitySchema, Component extends React.ElementType>(options: Omit<WithInteractivitySchemaOptions<S, React.ComponentPropsWithoutRef<Component>>, 'Component' | 'supportsEffects'> & {
         readonly Component: ComponentAcceptingStyle<Component, WithSchemaReservedKey>;
         readonly wrapInSequence: true;
+        readonly layout?: 'none';
     }): React.FC<React.ComponentPropsWithRef<Component> & InteractiveBaseProps & InteractivePremountProps & InteractiveCropProps>;
     <S extends InteractivitySchema, Props extends object>(options: WithInteractivitySchemaOptions<S, Props> & {
         readonly wrapInSequence?: false;
+        readonly layout?: never;
     }): React.ComponentType<Props>;
 };
 /**
@@ -85,6 +94,9 @@ export declare const Interactive: {
             readonly keyframable: false;
         };
     };
+    childrenSchema: {
+        children: import("./interactivity-schema.js").InteractivitySchemaField;
+    };
     transformSchema: {
         readonly 'style.transformOrigin': {
             readonly type: "transform-origin";

package/dist/cjs/Interactive.js

@@ -36,6 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Interactive = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
+const component_identity_js_1 = require("./component-identity.js");
 const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
 const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
 const freeze_js_1 = require("./freeze.js");
@@ -78,13 +79,13 @@ const interactiveBorderElementSchema = {
 const interactiveTextElementSchema = {
     ...interactiveBorderElementSchema,
     ...interactivity_schema_js_1.textSchema,
-    ...interactivity_schema_js_1.textContentSchema,
+    ...interactivity_schema_js_1.childrenSchema,
 };
 const interactiveSvgTextElementSchema = {
     ...interactiveElementSchema,
     ...interactivity_schema_js_1.svgPaintSchema,
     ...interactivity_schema_js_1.textSchema,
-    ...interactivity_schema_js_1.textContentSchema,
+    ...interactivity_schema_js_1.childrenSchema,
 };
 const interactiveSvgElementSchema = {
     ...interactiveElementSchema,
@@ -122,16 +123,17 @@ const withSchema = (untypedOptions) => {
         (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(LegacyWrapped);
         return LegacyWrapped;
     }
-    const { Component, componentName, schema, wrapInSequence: _, ...rest } = options;
+    const { Component, componentName, schema, wrapInSequence: _, layout = 'none', ...rest } = options;
     const ComponentWrappedInSequence = (0, react_1.forwardRef)((props, ref) => {
         const { canvasContent, compositions } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionManager);
         // The render callback runs after the exported wrapper has been initialized.
         // eslint-disable-next-line @typescript-eslint/no-use-before-define
-        const componentIdentity = (0, enable_sequence_stack_traces_js_1.resolveComponentIdentity)(Wrapped);
+        const componentIdentity = (0, component_identity_js_1.resolveComponentIdentity)(Wrapped);
         const isCurrentComposition = compositions.some((composition) => (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' &&
             composition.id === canvasContent.compositionId &&
             composition.componentFromProps === componentIdentity);
-        const { durationInFrames, from, trimBefore, playbackRate, loop, freeze, hidden, name, showInTimeline, controls, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, ...componentProps } = props;
+        const { width, height, ...propsWithoutDimensions } = props;
+        const { durationInFrames, from, trimBefore, playbackRate, loop, freeze, hidden, name, showInTimeline, controls, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, ...componentProps } = layout === 'absolute-fill' ? propsWithoutDimensions : props;
         const { cropLeft, cropRight, cropTop, cropBottom, style, ...componentPropsWithoutCropping } = componentProps;
         const { effectivePremountFor, effectivePostmountFor, freezeFrame, isPremountingOrPostmounting, premountingActive, postmountingActive, premountingStyle, } = (0, use_premounting_js_1.usePremounting)({
             from: from !== null && from !== void 0 ? from : 0,
@@ -155,10 +157,18 @@ const withSchema = (untypedOptions) => {
             style: premountingStyle,
             componentName,
         });
-        return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.SequenceWithoutSchema, { _remotionInternalSingleChildComponent: isCurrentComposition ? null : componentIdentity, layout: "none", durationInFrames: durationInFrames, from: from, trimBefore: trimBefore, playbackRate: playbackRate, loop: loop, freeze: freeze, hidden: hidden, name: name !== null && name !== void 0 ? name : componentName, showInTimeline: isCurrentComposition ? false : showInTimeline, controls: controls, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: react_1.default.createElement(Component, {
+        return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.SequenceWithoutSchema, { _remotionInternalSingleChildComponent: isCurrentComposition ? null : componentIdentity, layout: layout, ...(layout === 'absolute-fill'
+                    ? {
+                        width,
+                        height,
+                        style: { overflow: 'hidden', ...croppedStyle },
+                        ref: ref,
+                    }
+                    : {}), durationInFrames: durationInFrames, from: from, trimBefore: trimBefore, playbackRate: playbackRate, loop: loop, freeze: freeze, hidden: hidden, name: name !== null && name !== void 0 ? name : componentName, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/interactive-with-schema", showInTimeline: isCurrentComposition ? false : showInTimeline, controls: controls, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: react_1.default.createElement(Component, {
                     ...componentPropsWithoutCropping,
-                    style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined,
-                    ref,
+                    ...(layout === 'none'
+                        ? { style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, ref }
+                        : {}),
                 }) }) }));
     });
     const Wrapped = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
@@ -240,6 +250,7 @@ const makeInteractiveSvgStrokeElement = (tag, displayName) => {
 exports.Interactive = {
     baseSchema: interactivity_schema_js_1.baseSchema,
     captionsSchema: interactivity_schema_js_1.captionsSchema,
+    childrenSchema: interactivity_schema_js_1.childrenSchema,
     transformSchema: interactivity_schema_js_1.transformSchema,
     textSchema: interactivity_schema_js_1.textSchema,
     backgroundSchema: interactivity_schema_js_1.backgroundSchema,

package/dist/cjs/RemotionRoot.js

@@ -11,11 +11,12 @@ const prefetch_state_js_1 = require("./prefetch-state.js");
 const SequenceManager_js_1 = require("./SequenceManager.js");
 const TimelineContext_js_1 = require("./TimelineContext.js");
 const use_media_enabled_js_1 = require("./use-media-enabled.js");
+const use_video_js_1 = require("./use-video.js");
 const duration_state_js_1 = require("./video/duration-state.js");
 const RemotionRootContexts = ({ children, numberOfAudioTags, logLevel, audioLatencyHint, previewSampleRate, videoEnabled, audioEnabled, frameState, _experimentalKeepAudioContextAlive, }) => {
     const logging = (0, react_1.useMemo)(() => {
         return { logLevel, mountTime: Date.now() };
     }, [logLevel]);
-    return (jsx_runtime_1.jsx(log_level_context_js_1.LogLevelContext.Provider, { value: logging, 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, _experimentalKeepAudioContextAlive: _experimentalKeepAudioContextAlive, children: 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(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, _experimentalKeepAudioContextAlive: _experimentalKeepAudioContextAlive, children: jsx_runtime_1.jsx(shared_audio_tags_js_1.SharedAudioTagsContextProvider, { numberOfAudioTags: numberOfAudioTags, children: jsx_runtime_1.jsx(use_video_js_1.VideoProvider, { children: children }) }) }) }) }) }) }) }) }) }) }));
 };
 exports.RemotionRootContexts = RemotionRootContexts;