remotion 4.0.454 → 4.0.456

package/dist/cjs/CompositionManager.d.ts

@@ -3,6 +3,7 @@ import React from 'react';
 import type { AnyZodObject } from './any-zod-type.js';
 import type { CalculateMetadataFunction } from './Composition.js';
 import type { DownloadBehavior } from './download-behavior.js';
+import type { EffectDefinitionAndStack } from './effects/effect-types.js';
 import type { NonceHistory } from './nonce.js';
 import type { InferProps, PropsIfHasProps } from './props-if-has-props.js';
 import type { SequenceSchema } from './sequence-field-schema.js';
@@ -68,6 +69,7 @@ export type TSequence = {
     premountDisplay: number | null;
     postmountDisplay: number | null;
     controls: SequenceControls | null;
+    effects: EffectDefinitionAndStack<unknown>[];
 } & EnhancedTSequenceData;
 export type AudioOrVideoAsset = {
     type: 'audio' | 'video';

package/dist/cjs/HtmlInCanvas.d.ts

@@ -1,32 +1,59 @@
 import React from 'react';
-import type { EffectsProp } from './canvas-effects/effect-types.js';
+import type { EffectsProp } from './effects/effect-types.js';
 import type { AbsoluteFillLayout, LayoutAndStyle, SequenceProps } from './Sequence.js';
-export type HtmlInCanvasComposeParams = {
-    readonly source: CanvasImageSource;
-    readonly target: HTMLCanvasElement;
-    readonly frame: number;
-    readonly width: number;
-    readonly height: number;
-    readonly pixelRatio: number;
+declare global {
+    interface ElementImage {
+        readonly width: number;
+        readonly height: number;
+        close(): void;
+    }
+    interface CanvasRenderingContext2D {
+        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 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;
+    }
+    interface WebGLRenderingContextBase {
+        texElementImage2D(target: GLenum, level: GLint, internalformat: GLint, format: GLenum, type: GLenum, element: Element | ElementImage): void;
+        texElementImage2D(target: GLenum, level: GLint, internalformat: GLint, width: GLsizei, height: GLsizei, format: GLenum, type: GLenum, element: Element | ElementImage): void;
+        texElementImage2D(target: GLenum, level: GLint, internalformat: GLint, sx: GLfloat, sy: GLfloat, swidth: GLfloat, sheight: GLfloat, format: GLenum, type: GLenum, element: Element | ElementImage): void;
+        texElementImage2D(target: GLenum, level: GLint, internalformat: GLint, sx: GLfloat, sy: GLfloat, swidth: GLfloat, sheight: GLfloat, width: GLsizei, height: GLsizei, format: GLenum, type: GLenum, element: Element | ElementImage): void;
+    }
+    interface HTMLCanvasElementEventMap {
+        paint: Event;
+    }
+    interface HTMLCanvasElement {
+        layoutSubtree?: boolean;
+        onpaint: ((this: HTMLCanvasElement, ev: Event) => unknown) | null;
+        requestPaint?(): void;
+        captureElementImage(element: Element): ElementImage;
+        getElementTransform(element: Element | ElementImage, drawTransform: DOMMatrix): DOMMatrix;
+    }
+}
+export type HtmlInCanvasOnPaintParams = {
+    readonly canvas: OffscreenCanvas;
+    readonly element: HTMLDivElement;
+    readonly elementImage: ElementImage;
 };
 export declare const isHtmlInCanvasSupported: () => boolean;
-export type HtmlInCanvasProps = Omit<SequenceProps, 'children' | 'durationInFrames' | keyof LayoutAndStyle> & Omit<AbsoluteFillLayout, 'layout'> & {
+export type HtmlInCanvasOnPaint = (params: HtmlInCanvasOnPaintParams) => void | Promise<void>;
+export type HtmlInCanvasOnInitCleanup = () => void;
+export type HtmlInCanvasOnInit = (params: HtmlInCanvasOnPaintParams) => HtmlInCanvasOnInitCleanup | Promise<HtmlInCanvasOnInitCleanup>;
+export type HtmlInCanvasProps = Omit<SequenceProps, 'children' | 'durationInFrames' | keyof LayoutAndStyle> & Omit<AbsoluteFillLayout, 'layout' | 'styleWhilePostmounted' | 'postmountFor' | 'premountFor' | 'styleWhilePremounted'> & {
     readonly durationInFrames?: number;
     readonly width: number;
     readonly height: number;
-    readonly effects?: EffectsProp;
+    readonly _experimentalEffects?: EffectsProp;
     readonly children: React.ReactNode;
-    readonly pixelRatio?: number;
-    readonly onCompose?: (params: HtmlInCanvasComposeParams) => void | Promise<void>;
+    readonly onPaint?: HtmlInCanvasOnPaint;
+    readonly onInit?: HtmlInCanvasOnInit;
 };
-export declare const HtmlInCanvas: React.ComponentType<Omit<SequenceProps, "children" | "durationInFrames" | "layout"> & Omit<AbsoluteFillLayout, "layout"> & {
-    readonly durationInFrames?: number | undefined;
-    readonly width: number;
-    readonly height: number;
-    readonly effects?: EffectsProp | undefined;
-    readonly children: React.ReactNode;
-    readonly pixelRatio?: number | undefined;
-    readonly onCompose?: ((params: HtmlInCanvasComposeParams) => void | Promise<void>) | undefined;
-}> & {
-    readonly isHtmlInCanvasSupported: () => boolean;
+export declare const HtmlInCanvas: React.ForwardRefExoticComponent<HtmlInCanvasProps & React.RefAttributes<HTMLCanvasElement>> & {
+    readonly isHtmlInCanvasSupported: typeof isHtmlInCanvasSupported;
 };

package/dist/cjs/HtmlInCanvas.js

@@ -3,24 +3,56 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HtmlInCanvas = exports.isHtmlInCanvasSupported = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const run_effect_chain_js_1 = require("./canvas-effects/run-effect-chain.js");
-const use_effect_chain_state_js_1 = require("./canvas-effects/use-effect-chain-state.js");
+const delay_render_js_1 = require("./delay-render.js");
+const run_effect_chain_js_1 = require("./effects/run-effect-chain.js");
+const use_effect_chain_state_js_1 = require("./effects/use-effect-chain-state.js");
 const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.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");
+// Memoize the support check across the session — neither the platform
+// capability nor the chrome://flags toggle can change between calls.
+// SSR results are not cached so the check runs again once `document` exists.
+let cachedSupport = null;
 const isHtmlInCanvasSupported = () => {
+    if (cachedSupport !== null) {
+        return cachedSupport;
+    }
     if (typeof document === 'undefined') {
         return false;
     }
     const canvas = document.createElement('canvas');
     const ctx = canvas.getContext('2d');
-    return (typeof (ctx === null || ctx === void 0 ? void 0 : ctx.drawElementImage) === 'function' &&
-        typeof canvas.requestPaint === 'function');
+    cachedSupport =
+        typeof (ctx === null || ctx === void 0 ? void 0 : ctx.drawElementImage) === 'function' &&
+            typeof canvas.requestPaint === 'function' &&
+            typeof canvas.captureElementImage === 'function';
+    return cachedSupport;
 };
 exports.isHtmlInCanvasSupported = isHtmlInCanvasSupported;
+function assertHtmlInCanvasDimensions(width, height) {
+    if (typeof width !== 'number' || typeof height !== 'number') {
+        throw new Error(`HtmlInCanvas: \`width\` and \`height\` must be numbers. Received width=${String(width)}, height=${String(height)}.`);
+    }
+    if (!Number.isInteger(width) || width <= 0) {
+        throw new Error(`HtmlInCanvas: \`width\` must be a positive integer. Received: ${String(width)}.`);
+    }
+    if (!Number.isInteger(height) || height <= 0) {
+        throw new Error(`HtmlInCanvas: \`height\` must be a positive integer. Received: ${String(height)}.`);
+    }
+}
+const defaultOnPaint = ({ canvas, element, elementImage, }) => {
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+        throw new Error('Failed to acquire 2D context for <HtmlInCanvas> canvas');
+    }
+    ctx.reset();
+    const transform = ctx.drawElementImage(elementImage, 0, 0);
+    element.style.transform = transform.toString();
+};
+/* eslint-enable react/require-default-props */
 const htmlInCanvasSchema = {
     'style.translate': {
         type: 'translate',
@@ -51,119 +83,172 @@ const htmlInCanvasSchema = {
         description: 'Opacity',
     },
 };
-const HtmlInCanvasInner = ({ width, height, effects = [], children, style, pixelRatio = 1, onCompose, controls, durationInFrames, ...sequenceProps }) => {
+const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, _experimentalEffects: experimentalEffects = [], children, onPaint, onInit, _experimentalControls: controls, style, durationInFrames, ...sequenceProps }, ref) => {
+    assertHtmlInCanvasDimensions(width, height);
+    const { continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
+    if (!(0, exports.isHtmlInCanvasSupported)()) {
+        cancelRender(new Error('HTML in Canvas is not supported. Open this page in Chrome Canary with chrome://flags/#canvas-draw-element enabled.'));
+    }
     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 { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
-    const canvasRef = (0, react_1.useRef)(null);
-    const sceneRef = (0, react_1.useRef)(null);
-    const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)(width, height);
+    const canvas2dRef = (0, react_1.useRef)(null);
+    const divRef = (0, react_1.useRef)(null);
+    const setLayoutCanvasRef = (0, react_1.useCallback)((node) => {
+        canvas2dRef.current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current =
+                node;
+        }
+    }, [ref]);
+    const [offscreenCanvas] = (0, react_1.useState)(() => new OffscreenCanvas(1, 1));
+    const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)();
     // Refs so the paint handler always reads fresh values.
-    const effectsRef = (0, react_1.useRef)(effects);
-    effectsRef.current = effects;
+    const effectsRef = (0, react_1.useRef)(experimentalEffects);
+    effectsRef.current = experimentalEffects;
     const frameRef = (0, react_1.useRef)(frame);
     frameRef.current = frame;
-    const pixelRatioRef = (0, react_1.useRef)(pixelRatio);
-    pixelRatioRef.current = pixelRatio;
-    const widthRef = (0, react_1.useRef)(width);
-    widthRef.current = width;
-    const heightRef = (0, react_1.useRef)(height);
-    heightRef.current = height;
-    // Track the current delayRender handle so the paint handler can settle it.
-    const pendingHandleRef = (0, react_1.useRef)(null);
-    const onPaint = (0, react_1.useCallback)(() => {
-        const canvas = canvasRef.current;
-        const sceneEl = sceneRef.current;
-        const handle = pendingHandleRef.current;
-        if (!canvas || !sceneEl || !chainState || handle === null) {
-            return;
+    const onPaintRef = (0, react_1.useRef)(onPaint);
+    onPaintRef.current = onPaint;
+    const onInitRef = (0, react_1.useRef)(onInit);
+    onInitRef.current = onInit;
+    const initializedRef = (0, react_1.useRef)(false);
+    const onInitCleanupRef = (0, react_1.useRef)(null);
+    const unmountedRef = (0, react_1.useRef)(false);
+    const onPaintCb = (0, react_1.useCallback)(async () => {
+        var _a;
+        const element = divRef.current;
+        if (!element) {
+            throw new Error('Canvas or scene element not found');
         }
+        offscreenCanvas.width = width;
+        offscreenCanvas.height = height;
         try {
-            const ctx = canvas.getContext('2d');
-            if (!ctx) {
-                throw new Error('Failed to acquire 2D context for <HtmlInCanvas> canvas');
+            const layoutCanvas = canvas2dRef.current;
+            if (!layoutCanvas) {
+                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');
             }
-            const w = widthRef.current;
-            const h = heightRef.current;
-            // Layout-subtree children are not shown on-screen until rasterized here;
-            // effects then read from and write back to this same surface (via pool).
-            ctx.reset();
-            ctx.drawElementImage(sceneEl, 0, 0, w, h);
-            const capturedHandle = handle;
-            pendingHandleRef.current = null;
-            (0, run_effect_chain_js_1.runEffectChain)({
-                state: chainState,
-                source: canvas,
+            const handle = (0, delay_render_js_1.delayRender)('onPaint');
+            if (!initializedRef.current) {
+                initializedRef.current = true;
+                // `onInit` may be async (e.g. WebGPU `requestAdapter`/`requestDevice`).
+                // Capture an `ElementImage` here only for `onInit` consumers — do NOT
+                // reuse it for the paint handler below, because awaiting `onInit`
+                // 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 currentOnInit = onInitRef.current;
+                if (currentOnInit) {
+                    const cleanup = await currentOnInit({
+                        canvas: offscreenCanvas,
+                        element,
+                        elementImage: initImage,
+                    });
+                    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) {
+                        cleanup();
+                    }
+                    else {
+                        onInitCleanupRef.current = cleanup;
+                    }
+                }
+            }
+            const handler = (_a = onPaintRef.current) !== null && _a !== void 0 ? _a : defaultOnPaint;
+            const elImage = layoutCanvas.captureElementImage(element);
+            await handler({
+                canvas: offscreenCanvas,
+                element,
+                elementImage: elImage,
+            });
+            await (0, run_effect_chain_js_1.runEffectChain)({
+                state: chainState.get(width, height),
+                source: offscreenCanvas,
                 effects: effectsRef.current,
-                output: canvas,
+                output: canvas2dRef.current,
                 frame: frameRef.current,
-                width: w,
-                height: h,
-                pixelRatio: pixelRatioRef.current,
-            })
-                .then((completed) => {
-                if (completed) {
-                    continueRender(capturedHandle);
-                }
-            })
-                .catch((err) => {
-                cancelRender(err);
+                width,
+                height,
             });
+            continueRender(handle);
         }
         catch (error) {
             cancelRender(error);
         }
-    }, [chainState, continueRender, cancelRender]);
-    // Set up layoutSubtree and persistent paint listener.
-    (0, react_1.useEffect)(() => {
-        if (!(0, exports.isHtmlInCanvasSupported)()) {
-            cancelRender(new Error('HTML in Canvas is not supported. Open this page in Chrome Canary with chrome://flags/#canvas-draw-element enabled.'));
-            return;
-        }
-        const canvas = canvasRef.current;
+    }, [
+        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.
+    (0, react_1.useLayoutEffect)(() => {
+        const canvas = canvas2dRef.current;
         if (!canvas) {
-            return;
+            throw new Error('Canvas not found');
         }
         canvas.layoutSubtree = true;
-        canvas.addEventListener('paint', onPaint);
+        canvas.addEventListener('paint', onPaintCb);
         return () => {
-            canvas.removeEventListener('paint', onPaint);
+            var _a;
+            canvas.removeEventListener('paint', onPaintCb);
+            unmountedRef.current = true;
+            (_a = onInitCleanupRef.current) === null || _a === void 0 ? void 0 : _a.call(onInitCleanupRef);
+            onInitCleanupRef.current = null;
         };
-    }, [onPaint, cancelRender]);
-    // On each frame change: block the renderer and request a paint.
-    (0, react_1.useEffect)(() => {
-        const handle = delayRender(`HtmlInCanvas (frame ${frame})`);
-        // Continue a stale handle from a previous frame that never got a paint.
-        if (pendingHandleRef.current !== null) {
-            continueRender(pendingHandleRef.current);
+    }, [onPaintCb, cancelRender]);
+    const onPaintChangedRef = (0, react_1.useRef)(false);
+    (0, react_1.useLayoutEffect)(() => {
+        var _a;
+        if (!onPaintChangedRef.current) {
+            onPaintChangedRef.current = true;
+            return;
         }
-        pendingHandleRef.current = handle;
-        const canvas = canvasRef.current;
-        canvas === null || canvas === void 0 ? void 0 : canvas.requestPaint();
+        const canvas = canvas2dRef.current;
+        if (!canvas) {
+            return;
+        }
+        (_a = canvas.requestPaint) === null || _a === void 0 ? void 0 : _a.call(canvas);
+    }, [onPaint]);
+    (0, react_1.useLayoutEffect)(() => {
+        const canvas = canvas2dRef.current;
+        if (!canvas) {
+            return;
+        }
+        const handle = (0, delay_render_js_1.delayRender)('waiting for first paint after canvas resize');
+        canvas.addEventListener('paint', () => {
+            continueRender(handle);
+        }, { once: true });
         return () => {
-            if (pendingHandleRef.current === handle) {
-                continueRender(handle);
-                pendingHandleRef.current = null;
-            }
+            continueRender(handle);
         };
-    }, [frame, delayRender, continueRender]);
-    const outerStyle = (0, react_1.useMemo)(() => {
-        return {
-            position: 'absolute',
-            inset: 0,
-            width: width + 'px',
-            height: height + 'px',
-        };
-    }, [width, height]);
+    }, [width, height, continueRender]);
     const innerStyle = (0, react_1.useMemo)(() => {
         return {
             width,
             height,
+            ...style,
         };
-    }, [width, height]);
-    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { durationInFrames: resolvedDuration, name: "<HtmlInCanvas>", controls: controls, ...sequenceProps, style: style, children: jsx_runtime_1.jsx("canvas", { ref: canvasRef, width: width, height: height, style: outerStyle, children: jsx_runtime_1.jsx("div", { ref: sceneRef, style: innerStyle, children: children }) }) }));
-};
+    }, [width, height, style]);
+    return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { durationInFrames: resolvedDuration, name: "<HtmlInCanvas>", _experimentalControls: controls, layout: "none", ...sequenceProps, children: (0, jsx_runtime_1.jsx)("canvas", { ref: setLayoutCanvasRef, width: width, height: height, children: (0, jsx_runtime_1.jsx)("div", { ref: divRef, style: innerStyle, children: children }) }) }));
+});
+HtmlInCanvasInner.displayName = 'HtmlInCanvas';
 const HtmlInCanvasWrapped = (0, wrap_in_schema_js_1.wrapInSchema)(HtmlInCanvasInner, htmlInCanvasSchema);
 exports.HtmlInCanvas = Object.assign(HtmlInCanvasWrapped, {
     isHtmlInCanvasSupported: exports.isHtmlInCanvasSupported,

package/dist/cjs/Img.js

@@ -54,7 +54,7 @@ const imgSchema = {
         description: 'Opacity',
     },
 };
-const ImgInner = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRenderRetries, delayRenderTimeoutInMilliseconds, onImageFrame, crossOrigin, showInTimeline, name, stack, ref, controls, ...props }) => {
+const ImgInner = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRenderRetries, delayRenderTimeoutInMilliseconds, onImageFrame, crossOrigin, showInTimeline, name, stack, ref, _experimentalControls: controls, ...props }) => {
     var _a, _b;
     const imageRef = (0, react_1.useRef)(null);
     const errors = (0, react_1.useRef)({});

package/dist/cjs/Sequence.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
 import type { LoopDisplay, SequenceControls } from './CompositionManager.js';
+import type { EffectsProp } from './effects/effect-types.js';
+import type { BasicMediaInTimelineReturnType } from './use-media-in-timeline.js';
 export type AbsoluteFillLayout = {
     layout?: 'absolute-fill';
     premountFor?: number;
@@ -19,7 +21,8 @@ export type SequencePropsWithoutDuration = {
     readonly from?: number;
     readonly name?: string;
     readonly showInTimeline?: boolean;
-    readonly controls?: SequenceControls;
+    readonly _experimentalControls?: SequenceControls;
+    readonly _experimentalEffects?: EffectsProp;
     /**
      * @deprecated For internal use only.
      */
@@ -44,6 +47,13 @@ export type SequencePropsWithoutDuration = {
      * @deprecated For internal use only.
      */
     readonly _remotionInternalIsPostmounting?: boolean;
+    /**
+     * @deprecated For internal use only.
+     */
+    readonly _remotionInternalIsMedia?: {
+        type: 'video' | 'audio';
+        data: BasicMediaInTimelineReturnType;
+    };
 } & LayoutAndStyle;
 export type SequenceProps = {
     readonly durationInFrames?: number;

package/dist/cjs/Sequence.js

@@ -5,6 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-use-before-define */
 const react_1 = require("react");
 const AbsoluteFill_js_1 = require("./AbsoluteFill.js");
+const effect_internals_js_1 = require("./effects/effect-internals.js");
+const use_memoized_effects_js_1 = require("./effects/use-memoized-effects.js");
 const freeze_js_1 = require("./freeze.js");
 const nonce_js_1 = require("./nonce.js");
 const PremountContext_js_1 = require("./PremountContext.js");
@@ -15,7 +17,7 @@ const use_current_frame_1 = require("./use-current-frame");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const use_video_config_js_1 = require("./use-video-config.js");
 const v5_flag_js_1 = require("./v5-flag.js");
-const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, controls, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, ...other }, ref) => {
+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 { layout = 'absolute-fill' } = other;
     const [id] = (0, react_1.useState)(() => String(Math.random()));
@@ -95,17 +97,45 @@ 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;
+    const memoizedEffects = (0, use_memoized_effects_js_1.useMemoizedEffects)((0, effect_internals_js_1.flattenEffects)(_experimentalEffects !== null && _experimentalEffects !== void 0 ? _experimentalEffects : []));
     (0, react_1.useEffect)(() => {
-        var _a;
+        var _a, _b;
         if (!env.isStudio) {
             return;
         }
+        if (isMedia) {
+            registerSequence({
+                type: isMedia.type,
+                controls: controls !== null && controls !== void 0 ? controls : null,
+                effects: memoizedEffects,
+                displayName: timelineClipName,
+                doesVolumeChange: isMedia.data.doesVolumeChange,
+                duration: actualDurationInFrames,
+                from,
+                id,
+                loopDisplay,
+                nonce: nonce.get(),
+                parent: (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _a !== void 0 ? _a : null,
+                playbackRate: isMedia.data.playbackRate,
+                postmountDisplay: postmountDisplay !== null && postmountDisplay !== void 0 ? postmountDisplay : null,
+                premountDisplay: premountDisplay !== null && premountDisplay !== void 0 ? premountDisplay : null,
+                rootId,
+                showInTimeline,
+                src: isMedia.data.src,
+                stack: stack !== null && stack !== void 0 ? stack : inheritedStack,
+                startMediaFrom: isMedia.data.startMediaFrom,
+                volume: isMedia.data.volumes,
+            });
+            return () => {
+                unregisterSequence(id);
+            };
+        }
         registerSequence({
             from,
             duration: actualDurationInFrames,
             id,
             displayName: timelineClipName,
-            parent: (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _a !== void 0 ? _a : null,
+            parent: (_b = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _b !== void 0 ? _b : null,
             type: 'sequence',
             rootId,
             showInTimeline,
@@ -115,6 +145,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
             premountDisplay: premountDisplay !== null && premountDisplay !== void 0 ? premountDisplay : null,
             postmountDisplay: postmountDisplay !== null && postmountDisplay !== void 0 ? postmountDisplay : null,
             controls: controls !== null && controls !== void 0 ? controls : null,
+            effects: memoizedEffects,
         });
         return () => {
             unregisterSequence(id);
@@ -139,6 +170,8 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
         env.isStudio,
         inheritedStack,
         controls,
+        memoizedEffects,
+        isMedia,
     ]);
     // Ceil to support floats
     // https://github.com/remotion-dev/remotion/issues/2958

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

@@ -5,52 +5,52 @@ import type { RemotionMainAudioProps } from './props.js';
  * @see [Documentation](https://remotion.dev/docs/html5-audio)
  */
 export declare const Html5Audio: React.ForwardRefExoticComponent<Omit<import("./props.js").NativeAudioProps & {
-    name?: string;
-    volume?: import("../volume-prop.js").VolumeProp;
-    playbackRate?: number;
-    acceptableTimeShiftInSeconds?: number;
-    allowAmplificationDuringRender?: boolean;
-    _remotionInternalNeedsDurationCalculation?: boolean;
-    _remotionInternalNativeLoopPassed?: boolean;
-    toneFrequency?: number;
-    useWebAudioApi?: boolean;
-    pauseWhenBuffering?: boolean;
-    showInTimeline?: boolean;
-    delayRenderTimeoutInMilliseconds?: number;
-    delayRenderRetries?: number;
-    loopVolumeCurveBehavior?: import("./use-audio-frame.js").LoopVolumeCurveBehavior;
-    onError?: (err: Error) => void;
-    audioStreamIndex?: number;
+    name?: string | undefined;
+    volume?: import("../volume-prop.js").VolumeProp | undefined;
+    playbackRate?: number | undefined;
+    acceptableTimeShiftInSeconds?: number | undefined;
+    allowAmplificationDuringRender?: boolean | undefined;
+    _remotionInternalNeedsDurationCalculation?: boolean | undefined;
+    _remotionInternalNativeLoopPassed?: boolean | undefined;
+    toneFrequency?: number | undefined;
+    useWebAudioApi?: boolean | undefined;
+    pauseWhenBuffering?: boolean | undefined;
+    showInTimeline?: boolean | undefined;
+    delayRenderTimeoutInMilliseconds?: number | undefined;
+    delayRenderRetries?: number | undefined;
+    loopVolumeCurveBehavior?: import("./use-audio-frame.js").LoopVolumeCurveBehavior | undefined;
+    onError?: ((err: Error) => void) | undefined;
+    audioStreamIndex?: number | undefined;
 } & RemotionMainAudioProps & {
     /**
      * @deprecated For internal use only
      */
-    readonly stack?: string;
+    readonly stack?: string | undefined;
 }, "ref"> & React.RefAttributes<HTMLAudioElement>>;
 /**
  * @deprecated This component has been renamed to `Html5Audio`.
  * @see [Documentation](https://remotion.dev/docs/mediabunny/new-video)
  */
 export declare const Audio: React.ForwardRefExoticComponent<Omit<import("./props.js").NativeAudioProps & {
-    name?: string;
-    volume?: import("../volume-prop.js").VolumeProp;
-    playbackRate?: number;
-    acceptableTimeShiftInSeconds?: number;
-    allowAmplificationDuringRender?: boolean;
-    _remotionInternalNeedsDurationCalculation?: boolean;
-    _remotionInternalNativeLoopPassed?: boolean;
-    toneFrequency?: number;
-    useWebAudioApi?: boolean;
-    pauseWhenBuffering?: boolean;
-    showInTimeline?: boolean;
-    delayRenderTimeoutInMilliseconds?: number;
-    delayRenderRetries?: number;
-    loopVolumeCurveBehavior?: import("./use-audio-frame.js").LoopVolumeCurveBehavior;
-    onError?: (err: Error) => void;
-    audioStreamIndex?: number;
+    name?: string | undefined;
+    volume?: import("../volume-prop.js").VolumeProp | undefined;
+    playbackRate?: number | undefined;
+    acceptableTimeShiftInSeconds?: number | undefined;
+    allowAmplificationDuringRender?: boolean | undefined;
+    _remotionInternalNeedsDurationCalculation?: boolean | undefined;
+    _remotionInternalNativeLoopPassed?: boolean | undefined;
+    toneFrequency?: number | undefined;
+    useWebAudioApi?: boolean | undefined;
+    pauseWhenBuffering?: boolean | undefined;
+    showInTimeline?: boolean | undefined;
+    delayRenderTimeoutInMilliseconds?: number | undefined;
+    delayRenderRetries?: number | undefined;
+    loopVolumeCurveBehavior?: import("./use-audio-frame.js").LoopVolumeCurveBehavior | undefined;
+    onError?: ((err: Error) => void) | undefined;
+    audioStreamIndex?: number | undefined;
 } & RemotionMainAudioProps & {
     /**
      * @deprecated For internal use only
      */
-    readonly stack?: string;
+    readonly stack?: string | undefined;
 }, "ref"> & React.RefAttributes<HTMLAudioElement>>;