remotion 4.0.490 → 4.0.492

package/dist/cjs/Composition.js

@@ -55,6 +55,7 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
     }
     const { folderName, parentName } = (0, react_1.useContext)(Folder_js_1.FolderContext);
     const stack = (_b = compProps.stack) !== null && _b !== void 0 ? _b : null;
+    const componentFromProps = 'component' in compProps ? compProps.component : null;
     (0, react_1.useEffect)(() => {
         var _a;
         // Ensure it's a URL safe id
@@ -74,6 +75,7 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
             defaultProps: (0, input_props_serialization_js_1.serializeThenDeserializeInStudio)((defaultProps !== null && defaultProps !== void 0 ? defaultProps : {})),
             nonce: nonce.get(),
             parentFolderName: parentName,
+            componentFromProps,
             schema: schema !== null && schema !== void 0 ? schema : null,
             calculateMetadata: (_a = compProps.calculateMetadata) !== null && _a !== void 0 ? _a : null,
             stack,
@@ -92,6 +94,7 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
         width,
         nonce,
         parentName,
+        componentFromProps,
         schema,
         compProps.calculateMetadata,
         stack,

package/dist/cjs/CompositionManager.d.ts

@@ -16,6 +16,7 @@ export type TComposition<Schema extends AnyZodObject, Props extends Record<strin
     folderName: string | null;
     parentFolderName: string | null;
     component: LazyExoticComponent<ComponentType<Props>> | ComponentType<Props>;
+    componentFromProps?: unknown;
     nonce: NonceHistory;
     schema: Schema | null;
     calculateMetadata: CalculateMetadataFunction<InferProps<Schema, Props>> | null;
@@ -33,6 +34,7 @@ type EnhancedTSequenceData = {
     volume: string | number;
     doesVolumeChange: boolean;
     startMediaFrom: number;
+    mediaFrameAtSequenceZero: number | null;
     playbackRate: number;
     frozenMediaFrame: number | null;
 } | {
@@ -41,6 +43,7 @@ type EnhancedTSequenceData = {
     volume: string | number;
     doesVolumeChange: boolean;
     startMediaFrom: number;
+    mediaFrameAtSequenceZero: number | null;
     playbackRate: number;
     frozenMediaFrame: number | null;
 } | {
@@ -81,6 +84,7 @@ export type TSequence = {
     effects: readonly EffectDefinition<unknown>[];
     isInsideSeries: boolean;
     frozenFrame: number | null;
+    singleChildComponent?: unknown;
 } & EnhancedTSequenceData;
 export type AudioOrVideoAsset = {
     type: 'audio' | 'video';

package/dist/cjs/HtmlInCanvas.js

@@ -63,12 +63,12 @@ const isMissingPaintRecordError = (error) => {
     return error instanceof DOMException && error.name === 'InvalidStateError';
 };
 const missingPaintRecordMessage = 'HtmlInCanvas: Expected the element to be inside the viewport during rendering, but Chrome had no cached paint record for it.';
-const resizeOffscreenCanvas = ({ offscreen, width, height, }) => {
-    if (offscreen.width !== width) {
-        offscreen.width = width;
+const resizePaintTarget = ({ target, width, height, }) => {
+    if (target.width !== width) {
+        target.width = width;
     }
-    if (offscreen.height !== height) {
-        offscreen.height = height;
+    if (target.height !== height) {
+        target.height = height;
     }
 };
 const defaultOnPaint = ({ canvas, element, elementImage, }) => {
@@ -80,24 +80,25 @@ const defaultOnPaint = ({ canvas, element, elementImage, }) => {
     const transform = ctx.drawElementImage(elementImage, 0, 0);
     element.style.transform = transform.toString();
 };
-/* eslint-enable react/require-default-props */
-const HtmlInCanvasAncestorContext = (0, react_1.createContext)(false);
+const HtmlInCanvasAncestorContext = (0, react_1.createContext)(null);
 const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, children, onPaint, onInit, pixelDensity, controls, style, }, ref) => {
     var _a;
-    const isInsideAncestorHtmlInCanvas = (0, react_1.useContext)(HtmlInCanvasAncestorContext);
+    const ancestor = (0, react_1.useContext)(HtmlInCanvasAncestorContext);
     assertHtmlInCanvasDimensions(width, height);
     const resolvedPixelDensity = resolveHtmlInCanvasPixelDensity(pixelDensity);
     const canvasWidth = Math.ceil(width * resolvedPixelDensity);
     const canvasHeight = Math.ceil(height * resolvedPixelDensity);
     const { continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
-    const { isRendering } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
+    const { isClientSideRendering, isRendering } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
+    const canRetryMissingPaintRecord = !isRendering || isClientSideRendering;
+    const usesDirectLayoutCanvas = onPaint === undefined && onInit === undefined;
     if (!(0, exports.isHtmlInCanvasSupported)()) {
         cancelRender(new Error(exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE));
     }
     const canvas2dRef = (0, react_1.useRef)(null);
-    const offscreenRef = (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}`;
+    const canvasSizeKey = `${width}x${height}@${resolvedPixelDensity}-${usesDirectLayoutCanvas ? 'direct' : 'offscreen'}`;
     const setLayoutCanvasRef = (0, react_1.useCallback)((node) => {
         canvas2dRef.current = node;
         if (typeof ref === 'function') {
@@ -122,18 +123,20 @@ 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 ancestorRef = (0, react_1.useRef)(ancestor);
+    ancestorRef.current = ancestor;
     const onPaintCb = (0, react_1.useCallback)(async () => {
         var _a;
         const element = divRef.current;
         if (!element) {
             throw new Error('Canvas or scene element not found');
         }
-        const offscreen = offscreenRef.current;
-        if (!offscreen) {
-            throw new Error('HtmlInCanvas: offscreen canvas not ready (transferControlToOffscreen failed or canvas is remounting)');
+        const paintTarget = paintTargetRef.current;
+        if (!paintTarget) {
+            throw new Error('HtmlInCanvas: paint target is not ready because the canvas is remounting');
         }
-        resizeOffscreenCanvas({
-            offscreen,
+        resizePaintTarget({
+            target: paintTarget,
             width: canvasWidth,
             height: canvasHeight,
         });
@@ -144,34 +147,38 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
             }
             const handle = (0, delay_render_js_1.delayRender)('onPaint');
             if (!initializedRef.current) {
-                // `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.
-                let initImage = null;
-                try {
-                    initImage = placeholderCanvas.captureElementImage(element);
+                const currentOnInit = onInitRef.current;
+                if (!currentOnInit) {
+                    initializedRef.current = true;
                 }
-                catch (error) {
-                    if (isMissingPaintRecordError(error) && !isRendering) {
-                        // Element may be outside viewport (no cached paint record).
-                        // Skip init — will retry on the next paint cycle.
-                    }
-                    else if (isMissingPaintRecordError(error)) {
-                        throw new Error(missingPaintRecordMessage);
+                else {
+                    // `onInit` may be async (e.g. WebGPU
+                    // `requestAdapter`/`requestDevice`). Do not reuse this capture for
+                    // `onPaint`: awaiting initialization can invalidate its paint context.
+                    let initImage;
+                    try {
+                        initImage = placeholderCanvas.captureElementImage(element);
                     }
-                    else {
+                    catch (error) {
+                        if (isMissingPaintRecordError(error) &&
+                            canRetryMissingPaintRecord) {
+                            // The web renderer explicitly drives additional paint cycles, so a
+                            // transient missing record can be retried without failing the render.
+                            continueRender(handle);
+                            return;
+                        }
+                        if (isMissingPaintRecordError(error)) {
+                            throw new Error(missingPaintRecordMessage);
+                        }
                         throw error;
                     }
-                }
-                if (initImage) {
                     initializedRef.current = true;
-                    const currentOnInit = onInitRef.current;
-                    if (currentOnInit) {
+                    try {
+                        if (paintTarget instanceof HTMLCanvasElement) {
+                            throw new Error('HtmlInCanvas: onInit requires an OffscreenCanvas paint target');
+                        }
                         const cleanup = await currentOnInit({
-                            canvas: offscreen,
+                            canvas: paintTarget,
                             element,
                             elementImage: initImage,
                             pixelDensity: resolvedPixelDensity,
@@ -186,9 +193,11 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
                             onInitCleanupRef.current = cleanup;
                         }
                     }
+                    finally {
+                        initImage.close();
+                    }
                 }
             }
-            const handler = (_a = onPaintRef.current) !== null && _a !== void 0 ? _a : defaultOnPaint;
             let elImage;
             try {
                 elImage = placeholderCanvas.captureElementImage(element);
@@ -197,7 +206,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
                 // `captureElementImage` throws `InvalidStateError` when the
                 // element is outside the viewport (no cached paint record).
                 // Skip this paint cycle — the canvas retains its last state.
-                if (isMissingPaintRecordError(error) && !isRendering) {
+                if (isMissingPaintRecordError(error) && canRetryMissingPaintRecord) {
                     continueRender(handle);
                     return;
                 }
@@ -206,20 +215,46 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
                 }
                 throw error;
             }
-            await handler({
-                canvas: offscreen,
-                element,
-                elementImage: elImage,
-                pixelDensity: resolvedPixelDensity,
-            });
-            await (0, run_effect_chain_js_1.runEffectChain)({
-                state: chainState.get(canvasWidth, canvasHeight),
-                source: offscreen,
-                effects: effectsRef.current,
-                output: offscreen,
-                width: canvasWidth,
-                height: canvasHeight,
-            });
+            try {
+                const currentOnPaint = onPaintRef.current;
+                if (currentOnPaint) {
+                    if (paintTarget instanceof HTMLCanvasElement) {
+                        throw new Error('HtmlInCanvas: onPaint requires an OffscreenCanvas paint target');
+                    }
+                    const paintResult = currentOnPaint({
+                        canvas: paintTarget,
+                        element,
+                        elementImage: elImage,
+                        pixelDensity: resolvedPixelDensity,
+                    });
+                    if (paintResult) {
+                        await paintResult;
+                    }
+                }
+                else {
+                    defaultOnPaint({
+                        canvas: paintTarget,
+                        element,
+                        elementImage: elImage,
+                        pixelDensity: resolvedPixelDensity,
+                    });
+                }
+                await (0, run_effect_chain_js_1.runEffectChain)({
+                    state: chainState.get(canvasWidth, canvasHeight),
+                    source: paintTarget,
+                    effects: effectsRef.current,
+                    output: paintTarget,
+                    width: canvasWidth,
+                    height: canvasHeight,
+                });
+            }
+            finally {
+                elImage.close();
+            }
+            // Effects may complete after Chromium has dispatched the parent's
+            // paint event. Repaint the direct parent so deeply nested canvases
+            // propagate their final pixels through every ancestor.
+            (_a = ancestorRef.current) === null || _a === void 0 ? void 0 : _a.requestParentPaint();
             continueRender(handle);
         }
         catch (error) {
@@ -232,20 +267,23 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
         continueRender,
         cancelRender,
         resolvedPixelDensity,
-        isRendering,
+        canRetryMissingPaintRecord,
     ]);
-    // Transfer control once per layout canvas instance, then listen for paint on
-    // the placeholder (capture) while drawing on the linked offscreen surface.
+    // Default paint handlers draw synchronously on the layout canvas itself so
+    // Chromium can include their final pixels during its deepest-first nested
+    // paint traversal. Custom handlers retain the transferred OffscreenCanvas API.
     (0, react_1.useLayoutEffect)(() => {
         const placeholder = canvas2dRef.current;
         if (!placeholder) {
             throw new Error('Canvas not found');
         }
         placeholder.layoutSubtree = true;
-        const offscreen = placeholder.transferControlToOffscreen();
-        offscreenRef.current = offscreen;
-        resizeOffscreenCanvas({
-            offscreen,
+        const paintTarget = usesDirectLayoutCanvas
+            ? placeholder
+            : placeholder.transferControlToOffscreen();
+        paintTargetRef.current = paintTarget;
+        resizePaintTarget({
+            target: paintTarget,
             width: canvasWidth,
             height: canvasHeight,
         });
@@ -255,13 +293,19 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
         return () => {
             var _a;
             placeholder.removeEventListener('paint', onPaintCb);
-            offscreenRef.current = null;
+            paintTargetRef.current = null;
             initializedRef.current = false;
             unmountedRef.current = true;
             (_a = onInitCleanupRef.current) === null || _a === void 0 ? void 0 : _a.call(onInitCleanupRef);
             onInitCleanupRef.current = null;
         };
-    }, [onPaintCb, cancelRender, canvasWidth, canvasHeight]);
+    }, [
+        onPaintCb,
+        cancelRender,
+        canvasWidth,
+        canvasHeight,
+        usesDirectLayoutCanvas,
+    ]);
     const onPaintChangedRef = (0, react_1.useRef)(false);
     (0, react_1.useLayoutEffect)(() => {
         var _a;
@@ -301,10 +345,15 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
             ...(style !== null && style !== void 0 ? style : {}),
         };
     }, [height, style, width]);
-    if (isInsideAncestorHtmlInCanvas) {
-        throw new Error('<HtmlInCanvas> effects cannot be nested together. Chrome will only display the outer effect. Consider merging the effects into one if you can.');
-    }
-    return (jsx_runtime_1.jsx(HtmlInCanvasAncestorContext.Provider, { value: true, children: jsx_runtime_1.jsx("canvas", { ref: setLayoutCanvasRef, width: canvasWidth, height: canvasHeight, style: canvasStyle, children: jsx_runtime_1.jsx("div", { ref: divRef, style: innerStyle, children: children }) }, canvasSizeKey) }));
+    const ancestorValue = (0, react_1.useMemo)(() => {
+        return {
+            requestParentPaint: () => {
+                var _a, _b;
+                (_b = (_a = canvas2dRef.current) === null || _a === void 0 ? void 0 : _a.requestPaint) === null || _b === void 0 ? void 0 : _b.call(_a);
+            },
+        };
+    }, []);
+    return (jsx_runtime_1.jsx(HtmlInCanvasAncestorContext.Provider, { value: ancestorValue, children: jsx_runtime_1.jsx("canvas", { ref: setLayoutCanvasRef, width: canvasWidth, height: canvasHeight, style: canvasStyle, children: jsx_runtime_1.jsx("div", { ref: divRef, style: innerStyle, children: children }) }, canvasSizeKey) }));
 });
 HtmlInCanvasContent.displayName = 'HtmlInCanvasContent';
 const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = [], children, onPaint, onInit, pixelDensity, controls, style, durationInFrames, name, ...sequenceProps }, ref) => {

package/dist/cjs/Img.d.ts

@@ -82,6 +82,12 @@ export declare const imgSchema: {
     readonly hidden: import("./interactivity-schema.js").BooleanFieldSchema;
     readonly name: import("./interactivity-schema.js").HiddenFieldSchema;
     readonly showInTimeline: import("./interactivity-schema.js").HiddenFieldSchema;
+    readonly src: {
+        readonly type: "asset";
+        readonly default: undefined;
+        readonly description: "Source";
+        readonly keyframable: false;
+    };
 };
 export declare const Img: React.ComponentType<NativeImgProps & {
     readonly maxRetries?: number | undefined;

package/dist/cjs/Img.js

@@ -198,6 +198,12 @@ const NativeImgInner = ({ hidden, name, stack, showInTimeline, src, from, trimBe
 };
 const CanvasImageWithPrivateProps = index_js_1.CanvasImage;
 exports.imgSchema = {
+    src: {
+        type: 'asset',
+        default: undefined,
+        description: 'Source',
+        keyframable: false,
+    },
     ...interactivity_schema_js_1.baseSchema,
     ...interactivity_schema_js_1.transformSchema,
 };

package/dist/cjs/Sequence.d.ts

@@ -46,6 +46,10 @@ export type SequencePropsWithoutDuration = {
      * @deprecated For internal use only.
      */
     readonly _remotionInternalDocumentationLink?: string;
+    /**
+     * @deprecated For internal use only.
+     */
+    readonly _remotionInternalSingleChildComponent?: unknown;
     /**
      * @deprecated For internal use only.
      */

package/dist/cjs/Sequence.js

@@ -19,7 +19,7 @@ const use_video_config_js_1 = require("./use-video-config.js");
 const v5_flag_js_1 = require("./v5-flag.js");
 const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js");
 const EMPTY_EFFECTS = [];
-const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, hidden = false, controls, _remotionInternalEffects, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalDocumentationLink: documentationLink, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, _remotionInternalIsMedia: isMedia, outlineRef: passedRefForOutline, ...other }, ref) => {
+const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, hidden = false, controls, _remotionInternalEffects, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalDocumentationLink: documentationLink, _remotionInternalSingleChildComponent: singleChildComponent, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, _remotionInternalIsMedia: isMedia, outlineRef: passedRefForOutline, ...other }, ref) => {
     var _a, _b, _c;
     const { layout = 'absolute-fill' } = other;
     const [id] = (0, react_1.useState)(() => String(Math.random()));
@@ -210,6 +210,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
                     refForOutline: refForOutline !== null && refForOutline !== void 0 ? refForOutline : null,
                     isInsideSeries,
                     frozenFrame: registeredFrozenFrame,
+                    singleChildComponent: singleChildComponent !== null && singleChildComponent !== void 0 ? singleChildComponent : null,
                 });
             }
             else {
@@ -235,11 +236,13 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
                     src: isMedia.data.src,
                     getStack: () => stackRef.current,
                     startMediaFrom: startMediaFrom !== null && startMediaFrom !== void 0 ? startMediaFrom : isMedia.data.startMediaFrom,
+                    mediaFrameAtSequenceZero,
                     volume: isMedia.data.volumes,
                     refForOutline: refForOutline !== null && refForOutline !== void 0 ? refForOutline : null,
                     isInsideSeries,
                     frozenFrame: registeredFrozenFrame,
                     frozenMediaFrame,
+                    singleChildComponent: singleChildComponent !== null && singleChildComponent !== void 0 ? singleChildComponent : null,
                 });
             }
             return () => {
@@ -267,6 +270,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
             refForOutline: refForOutline !== null && refForOutline !== void 0 ? refForOutline : null,
             isInsideSeries,
             frozenFrame: registeredFrozenFrame,
+            singleChildComponent: singleChildComponent !== null && singleChildComponent !== void 0 ? singleChildComponent : null,
         });
         return () => {
             unregisterSequence(id);
@@ -298,7 +302,9 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
         isInsideSeries,
         registeredFrozenFrame,
         startMediaFrom,
+        mediaFrameAtSequenceZero,
         frozenMediaFrame,
+        singleChildComponent,
     ]);
     // Ceil to support floats
     // https://github.com/remotion-dev/remotion/issues/2958

package/dist/cjs/SequenceManager.d.ts

@@ -64,6 +64,13 @@ export type SequencePropsSubscriptionKey = {
     nodePath: SequenceNodePath;
     sequenceKeys: string[];
     effectKeys: string[][];
+    videoConfigValues: VideoConfigValues | null;
+};
+export type VideoConfigValues = {
+    durationInFrames: number;
+    fps: number;
+    height: number;
+    width: number;
 };
 export declare const SequenceManagerProvider: React.FC<{
     readonly children: React.ReactNode;

package/dist/cjs/SequenceManager.js

@@ -49,7 +49,7 @@ exports.SequenceManagerRefContext = react_1.default.createContext({
     current: [],
 });
 const makeSequencePropsSubscriptionKey = (key) => {
-    return `${key.nodePath.join('.')}.${key.sequenceKeys.join('.')}.${key.effectKeys.map((keys) => keys.join('.')).join('.')}`;
+    return `${key.absolutePath}\0${key.nodePath.join('.')}\0${key.sequenceKeys.join('.')}\0${key.effectKeys.map((keys) => keys.join('.')).join('.')}`;
 };
 exports.makeSequencePropsSubscriptionKey = makeSequencePropsSubscriptionKey;
 exports.VisualModePropStatusesContext = react_1.default.createContext({

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

@@ -17,6 +17,12 @@ const decode_image_js_1 = require("./decode-image.js");
 const request_init_1 = require("./request-init");
 const resolve_image_source_1 = require("./resolve-image-source");
 const animatedImageSchema = {
+    src: {
+        type: 'asset',
+        default: undefined,
+        description: 'Source',
+        keyframable: false,
+    },
     ...interactivity_schema_js_1.baseSchema,
     playbackRate: {
         type: 'number',

package/dist/cjs/audio/shared-audio-tags.js

@@ -321,7 +321,9 @@ const SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
                 return;
             }
             if (data === undefined) {
-                current.src = EMPTY_AUDIO;
+                if (current.src !== EMPTY_AUDIO) {
+                    current.src = EMPTY_AUDIO;
+                }
                 return;
             }
             if (!data) {
@@ -393,7 +395,9 @@ const SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
                     prevA.premounting === premounting &&
                     prevA.postmounting === postmounting;
                 if (isTheSame) {
-                    return prevA;
+                    return prevA.audioMounted === audioMounted
+                        ? prevA
+                        : { ...prevA, audioMounted };
                 }
                 changed = true;
                 return {
@@ -405,7 +409,9 @@ const SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
                     audioMounted,
                 };
             }
-            return prevA;
+            return prevA.audioMounted === audioMounted
+                ? prevA
+                : { ...prevA, audioMounted };
         });
         if (changed) {
             rerenderAudios();
@@ -444,13 +450,16 @@ const SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
         unregisterAudio,
         updateAudio,
     ]);
-    return (jsx_runtime_1.jsxs(exports.SharedAudioTagsContext.Provider, { value: audioTagsValue, children: [refs.map(({ id, ref }) => {
-                return (
-                // Without preload="metadata", iOS will seek the time internally
-                // but not actually with sound. Adding `preload="metadata"` helps here.
-                // https://discord.com/channels/809501355504959528/817306414069710848/1130519583367888906
-                jsx_runtime_1.jsx("audio", { ref: ref, preload: "metadata", src: EMPTY_AUDIO }, id));
-            }), children] }));
+    const sharedAudioTagElements = (0, react_1.useMemo)(() => {
+        return refs.map(({ id, ref }) => {
+            return (
+            // Without preload="metadata", iOS will seek the time internally
+            // but not actually with sound. Adding `preload="metadata"` helps here.
+            // https://discord.com/channels/809501355504959528/817306414069710848/1130519583367888906
+            jsx_runtime_1.jsx("audio", { ref: ref, preload: "metadata", src: EMPTY_AUDIO }, id));
+        });
+    }, [refs]);
+    return (jsx_runtime_1.jsxs(exports.SharedAudioTagsContext.Provider, { value: audioTagsValue, children: [sharedAudioTagElements, children] }));
 };
 exports.SharedAudioTagsContextProvider = SharedAudioTagsContextProvider;
 const useSharedAudio = ({ aud, audioId, premounting, postmounting, }) => {

package/dist/cjs/enable-sequence-stack-traces.d.ts

@@ -1,2 +1,6 @@
+import React from 'react';
 export declare const getComponentsToAddStacksTo: () => unknown[];
 export declare const addSequenceStackTraces: (component: unknown) => void;
+export declare const setSequenceComponent: (component: unknown) => void;
+export declare const getSequenceComponent: () => unknown;
+export declare const getSingleChildComponent: (children: React.ReactNode) => unknown;

package/dist/cjs/enable-sequence-stack-traces.js

@@ -1,10 +1,36 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.addSequenceStackTraces = exports.getComponentsToAddStacksTo = void 0;
+exports.getSingleChildComponent = exports.getSequenceComponent = exports.setSequenceComponent = exports.addSequenceStackTraces = exports.getComponentsToAddStacksTo = void 0;
+const react_1 = __importDefault(require("react"));
 const componentsToAddStacksTo = [];
+let sequenceComponent = null;
 const getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 exports.getComponentsToAddStacksTo = getComponentsToAddStacksTo;
 const addSequenceStackTraces = (component) => {
     componentsToAddStacksTo.push(component);
 };
 exports.addSequenceStackTraces = addSequenceStackTraces;
+const setSequenceComponent = (component) => {
+    sequenceComponent = component;
+};
+exports.setSequenceComponent = setSequenceComponent;
+const getSequenceComponent = () => sequenceComponent;
+exports.getSequenceComponent = getSequenceComponent;
+const getSingleChildComponent = (children) => {
+    const mountedChildren = react_1.default.Children.toArray(children);
+    if (mountedChildren.length !== 1) {
+        return null;
+    }
+    const child = mountedChildren[0];
+    if (!react_1.default.isValidElement(child)) {
+        return null;
+    }
+    if (typeof child.type !== 'function' && typeof child.type !== 'object') {
+        return null;
+    }
+    return child.type;
+};
+exports.getSingleChildComponent = getSingleChildComponent;

package/dist/cjs/index.d.ts

@@ -5,7 +5,7 @@ import type { AnyCompMetadata, AnyComposition, AudioOrVideoAsset, JsxComponentId
 import type { DelayRenderScope } from './delay-render.js';
 import { type TFolder } from './Folder.js';
 import type { StaticFile } from './get-static-files.js';
-import type { ArrayFieldSchema, ArrayItemFieldSchema, InteractivitySchemaField, InteractivitySchema } from './interactivity-schema.js';
+import type { AssetFieldSchema, ArrayFieldSchema, ArrayItemFieldSchema, InteractivitySchemaField, InteractivitySchema } from './interactivity-schema.js';
 import type { LogLevel } from './log.js';
 import type { ProResProfile } from './prores-profile.js';
 import type { PixelFormat, VideoImageFormat } from './render-types.js';
@@ -43,6 +43,7 @@ declare global {
         remotion_logLevel: LogLevel | undefined;
         remotion_projectName: string;
         remotion_cwd: string;
+        remotion_fileSystemPlatform: string | null;
         remotion_studioServerCommand: string;
         remotion_setFrame: (frame: number, composition: string, attempt: number) => void;
         remotion_attempt: number;
@@ -182,4 +183,4 @@ export type _InternalTypes = {
     TRenderAsset: TRenderAsset;
     ProResProfile: ProResProfile;
 };
-export type { AnyComposition, ArrayFieldSchema, ArrayItemFieldSchema, DelayRenderScope, JsxComponentIdentity, LoopDisplay, SequenceControls, InteractivitySchemaField, InteractivitySchema, UseBufferState, };
+export type { AnyComposition, AssetFieldSchema, ArrayFieldSchema, ArrayItemFieldSchema, DelayRenderScope, JsxComponentIdentity, LoopDisplay, SequenceControls, InteractivitySchemaField, InteractivitySchema, UseBufferState, };

package/dist/cjs/index.js

@@ -154,5 +154,6 @@ exports.Config = new Proxy(proxyObj, {
 });
 Sequence_js_1.Sequence.displayName = 'Sequence';
 (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(Sequence_js_1.Sequence);
+(0, enable_sequence_stack_traces_js_1.setSequenceComponent)(Sequence_js_1.Sequence);
 (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(Composition_js_1.Composition);
 (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(Folder_js_1.Folder);

package/dist/cjs/interactivity-schema.d.ts

@@ -97,6 +97,12 @@ export type FontFamilyFieldSchema = {
     description?: string;
     keyframable?: false;
 };
+export type AssetFieldSchema = {
+    type: 'asset';
+    default: string | undefined;
+    description?: string;
+    keyframable?: false;
+};
 export type EnumFieldSchema = {
     type: 'enum';
     default: string;
@@ -126,7 +132,7 @@ export type ArrayFieldSchema = {
     description?: string;
     keyframable?: false;
 };
-export type VisibleFieldSchema = NumberFieldSchema | BooleanFieldSchema | RotationCssFieldSchema | RotationDegreesFieldSchema | TranslateFieldSchema | TransformOriginFieldSchema | ScaleFieldSchema | UvCoordinateFieldSchema | ColorFieldSchema | TextContentFieldSchema | FontFamilyFieldSchema | ArrayFieldSchema | EnumFieldSchema;
+export type VisibleFieldSchema = NumberFieldSchema | BooleanFieldSchema | RotationCssFieldSchema | RotationDegreesFieldSchema | TranslateFieldSchema | TransformOriginFieldSchema | ScaleFieldSchema | UvCoordinateFieldSchema | ColorFieldSchema | TextContentFieldSchema | FontFamilyFieldSchema | AssetFieldSchema | ArrayFieldSchema | EnumFieldSchema;
 export type InteractivitySchemaField = VisibleFieldSchema | HiddenFieldSchema;
 export type InteractivitySchema = {
     [key: string]: InteractivitySchemaField;