remotion 4.0.372 → 4.0.374

package/dist/cjs/CompositionManager.d.ts

@@ -2,7 +2,6 @@ import type { ComponentType, LazyExoticComponent } from 'react';
 import React from 'react';
 import type { AnyZodObject } from 'zod';
 import type { CalculateMetadataFunction } from './Composition.js';
-import type { BaseMetadata } from './CompositionManagerContext.js';
 import type { DownloadBehavior } from './download-behavior.js';
 import type { InferProps, PropsIfHasProps } from './props-if-has-props.js';
 export type TComposition<Schema extends AnyZodObject, Props extends Record<string, unknown>> = {
@@ -99,11 +98,4 @@ export type TRenderAsset = AudioOrVideoAsset | ArtifactAsset | InlineAudioAsset;
 export declare const compositionsRef: React.RefObject<{
     getCompositions: () => AnyComposition[];
 } | null>;
-export declare const CompositionManagerProvider: React.FC<{
-    readonly children: React.ReactNode;
-    readonly numberOfAudioTags: number;
-    readonly onlyRenderComposition: string | null;
-    readonly currentCompositionMetadata: BaseMetadata | null;
-    readonly audioLatencyHint: AudioContextLatencyCategory;
-}>;
 export {};

package/dist/cjs/CompositionManager.js

@@ -1,141 +1,8 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CompositionManagerProvider = exports.compositionsRef = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
-const RenderAssetManager_js_1 = require("./RenderAssetManager.js");
-const ResolveCompositionConfig_js_1 = require("./ResolveCompositionConfig.js");
-const SequenceManager_js_1 = require("./SequenceManager.js");
-const shared_audio_tags_js_1 = require("./audio/shared-audio-tags.js");
+exports.compositionsRef = void 0;
+const react_1 = __importDefault(require("react"));
 exports.compositionsRef = react_1.default.createRef();
-const CompositionManagerProvider = ({ children, numberOfAudioTags, onlyRenderComposition, currentCompositionMetadata, audioLatencyHint, }) => {
-    var _a;
-    // Wontfix, expected to have
-    const [compositions, setCompositions] = (0, react_1.useState)([]);
-    const currentcompositionsRef = (0, react_1.useRef)(compositions);
-    const [folders, setFolders] = (0, react_1.useState)([]);
-    const [canvasContent, setCanvasContent] = (0, react_1.useState)(null);
-    const updateCompositions = (0, react_1.useCallback)((updateComps) => {
-        setCompositions((comps) => {
-            const updated = updateComps(comps);
-            currentcompositionsRef.current = updated;
-            return updated;
-        });
-    }, []);
-    const registerComposition = (0, react_1.useCallback)((comp) => {
-        updateCompositions((comps) => {
-            if (comps.find((c) => c.id === comp.id)) {
-                throw new Error(`Multiple composition with id ${comp.id} are registered.`);
-            }
-            const value = [...comps, comp]
-                .slice()
-                .sort((a, b) => a.nonce - b.nonce);
-            return value;
-        });
-    }, [updateCompositions]);
-    const unregisterComposition = (0, react_1.useCallback)((id) => {
-        setCompositions((comps) => {
-            return comps.filter((c) => c.id !== id);
-        });
-    }, []);
-    const registerFolder = (0, react_1.useCallback)((name, parent) => {
-        setFolders((prevFolders) => {
-            return [
-                ...prevFolders,
-                {
-                    name,
-                    parent,
-                },
-            ];
-        });
-    }, []);
-    const unregisterFolder = (0, react_1.useCallback)((name, parent) => {
-        setFolders((prevFolders) => {
-            return prevFolders.filter((p) => !(p.name === name && p.parent === parent));
-        });
-    }, []);
-    (0, react_1.useImperativeHandle)(exports.compositionsRef, () => {
-        return {
-            getCompositions: () => currentcompositionsRef.current,
-        };
-    }, []);
-    const composition = compositions.find((c) => (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition'
-        ? c.id === canvasContent.compositionId
-        : null);
-    const updateCompositionDefaultProps = (0, react_1.useCallback)((id, newDefaultProps) => {
-        setCompositions((comps) => {
-            const updated = comps.map((c) => {
-                if (c.id === id) {
-                    return {
-                        ...c,
-                        defaultProps: newDefaultProps,
-                    };
-                }
-                return c;
-            });
-            return updated;
-        });
-    }, []);
-    const contextValue = (0, react_1.useMemo)(() => {
-        return {
-            compositions,
-            folders,
-            currentCompositionMetadata,
-            canvasContent,
-        };
-    }, [compositions, folders, currentCompositionMetadata, canvasContent]);
-    const setters = (0, react_1.useMemo)(() => {
-        return {
-            registerComposition,
-            unregisterComposition,
-            registerFolder,
-            unregisterFolder,
-            setCanvasContent,
-            updateCompositionDefaultProps,
-            onlyRenderComposition,
-        };
-    }, [
-        registerComposition,
-        registerFolder,
-        unregisterComposition,
-        unregisterFolder,
-        updateCompositionDefaultProps,
-        onlyRenderComposition,
-    ]);
-    return ((0, jsx_runtime_1.jsx)(CompositionManagerContext_js_1.CompositionManager.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(CompositionManagerContext_js_1.CompositionSetters.Provider, { value: setters, children: (0, jsx_runtime_1.jsx)(SequenceManager_js_1.SequenceManagerProvider, { children: (0, jsx_runtime_1.jsx)(RenderAssetManager_js_1.RenderAssetManagerProvider, { children: (0, jsx_runtime_1.jsx)(ResolveCompositionConfig_js_1.ResolveCompositionConfig, { children: (0, jsx_runtime_1.jsx)(shared_audio_tags_js_1.SharedAudioContextProvider, { numberOfAudioTags: numberOfAudioTags, component: (_a = composition === null || composition === void 0 ? void 0 : composition.component) !== null && _a !== void 0 ? _a : null, audioLatencyHint: audioLatencyHint, children: children }) }) }) }) }) }));
-};
-exports.CompositionManagerProvider = CompositionManagerProvider;

package/dist/cjs/CompositionManagerProvider.d.ts

@@ -0,0 +1,10 @@
+import { type AnyComposition } from './CompositionManager';
+import type { CanvasContent } from './CompositionManagerContext';
+import type { BaseMetadata } from './CompositionManagerContext.js';
+export declare const CompositionManagerProvider: ({ children, onlyRenderComposition, currentCompositionMetadata, initialCompositions, initialCanvasContent, }: {
+    readonly children: React.ReactNode;
+    readonly onlyRenderComposition: string | null;
+    readonly currentCompositionMetadata: BaseMetadata | null;
+    readonly initialCompositions: AnyComposition[];
+    readonly initialCanvasContent: CanvasContent | null;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/CompositionManagerProvider.js

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CompositionManagerProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const CompositionManager_1 = require("./CompositionManager");
+const CompositionManagerContext_1 = require("./CompositionManagerContext");
+const CompositionManagerProvider = ({ children, onlyRenderComposition, currentCompositionMetadata, initialCompositions, initialCanvasContent, }) => {
+    const [folders, setFolders] = (0, react_1.useState)([]);
+    const [canvasContent, setCanvasContent] = (0, react_1.useState)(initialCanvasContent);
+    const [compositions, setCompositions] = (0, react_1.useState)(initialCompositions);
+    // CompositionManagerProvider state
+    const currentcompositionsRef = (0, react_1.useRef)(compositions);
+    const updateCompositions = (0, react_1.useCallback)((updateComps) => {
+        setCompositions((comps) => {
+            const updated = updateComps(comps);
+            currentcompositionsRef.current = updated;
+            return updated;
+        });
+    }, []);
+    const registerComposition = (0, react_1.useCallback)((comp) => {
+        updateCompositions((comps) => {
+            if (comps.find((c) => c.id === comp.id)) {
+                throw new Error(`Multiple composition with id ${comp.id} are registered.`);
+            }
+            const value = [...comps, comp]
+                .slice()
+                .sort((a, b) => a.nonce - b.nonce);
+            return value;
+        });
+    }, [updateCompositions]);
+    const unregisterComposition = (0, react_1.useCallback)((id) => {
+        setCompositions((comps) => {
+            return comps.filter((c) => c.id !== id);
+        });
+    }, []);
+    const registerFolder = (0, react_1.useCallback)((name, parent) => {
+        setFolders((prevFolders) => {
+            return [
+                ...prevFolders,
+                {
+                    name,
+                    parent,
+                },
+            ];
+        });
+    }, []);
+    const unregisterFolder = (0, react_1.useCallback)((name, parent) => {
+        setFolders((prevFolders) => {
+            return prevFolders.filter((p) => !(p.name === name && p.parent === parent));
+        });
+    }, []);
+    (0, react_1.useImperativeHandle)(CompositionManager_1.compositionsRef, () => {
+        return {
+            getCompositions: () => currentcompositionsRef.current,
+        };
+    }, []);
+    const updateCompositionDefaultProps = (0, react_1.useCallback)((id, newDefaultProps) => {
+        setCompositions((comps) => {
+            const updated = comps.map((c) => {
+                if (c.id === id) {
+                    return {
+                        ...c,
+                        defaultProps: newDefaultProps,
+                    };
+                }
+                return c;
+            });
+            return updated;
+        });
+    }, []);
+    const compositionManagerSetters = (0, react_1.useMemo)(() => {
+        return {
+            registerComposition,
+            unregisterComposition,
+            registerFolder,
+            unregisterFolder,
+            setCanvasContent,
+            updateCompositionDefaultProps,
+            onlyRenderComposition,
+        };
+    }, [
+        registerComposition,
+        registerFolder,
+        unregisterComposition,
+        unregisterFolder,
+        updateCompositionDefaultProps,
+        onlyRenderComposition,
+    ]);
+    const compositionManagerContextValue = (0, react_1.useMemo)(() => {
+        return {
+            compositions,
+            folders,
+            currentCompositionMetadata,
+            canvasContent,
+        };
+    }, [compositions, folders, currentCompositionMetadata, canvasContent]);
+    return ((0, jsx_runtime_1.jsx)(CompositionManagerContext_1.CompositionManager.Provider, { value: compositionManagerContextValue, children: (0, jsx_runtime_1.jsx)(CompositionManagerContext_1.CompositionSetters.Provider, { value: compositionManagerSetters, children: children }) }));
+};
+exports.CompositionManagerProvider = CompositionManagerProvider;

package/dist/cjs/RemotionRoot.d.ts

@@ -1,13 +1,11 @@
 import React from 'react';
-import type { BaseMetadata } from './CompositionManagerContext.js';
 import type { LogLevel } from './log.js';
 export declare const RemotionRoot: React.FC<{
     readonly children: React.ReactNode;
     readonly numberOfAudioTags: number;
     readonly logLevel: LogLevel;
-    readonly onlyRenderComposition: string | null;
-    readonly currentCompositionMetadata: BaseMetadata | null;
     readonly audioLatencyHint: AudioContextLatencyCategory;
     readonly videoEnabled: boolean | null;
     readonly audioEnabled: boolean | null;
+    readonly frameState: Record<string, number> | null;
 }>;

package/dist/cjs/RemotionRoot.js

@@ -3,75 +3,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RemotionRoot = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const CompositionManager_js_1 = require("./CompositionManager.js");
 const EditorProps_js_1 = require("./EditorProps.js");
+const RenderAssetManager_js_1 = require("./RenderAssetManager.js");
+const ResolveCompositionConfig_js_1 = require("./ResolveCompositionConfig.js");
+const SequenceManager_js_1 = require("./SequenceManager.js");
+const TimelineContext_js_1 = require("./TimelineContext.js");
+const shared_audio_tags_js_1 = require("./audio/shared-audio-tags.js");
 const buffering_js_1 = require("./buffering.js");
 const log_level_context_js_1 = require("./log-level-context.js");
 const nonce_js_1 = require("./nonce.js");
 const prefetch_state_js_1 = require("./prefetch-state.js");
-const random_js_1 = require("./random.js");
-const timeline_position_state_js_1 = require("./timeline-position-state.js");
-const use_delay_render_js_1 = require("./use-delay-render.js");
 const use_media_enabled_js_1 = require("./use-media-enabled.js");
 const duration_state_js_1 = require("./video/duration-state.js");
-const RemotionRoot = ({ children, numberOfAudioTags, logLevel, onlyRenderComposition, currentCompositionMetadata, audioLatencyHint, videoEnabled, audioEnabled, }) => {
-    const [remotionRootId] = (0, react_1.useState)(() => String((0, random_js_1.random)(null)));
-    const [frame, setFrame] = (0, react_1.useState)(() => (0, timeline_position_state_js_1.getInitialFrameState)());
-    const [playing, setPlaying] = (0, react_1.useState)(false);
-    const imperativePlaying = (0, react_1.useRef)(false);
+const RemotionRoot = ({ children, numberOfAudioTags, logLevel, audioLatencyHint, videoEnabled, audioEnabled, frameState, }) => {
     const [fastRefreshes, setFastRefreshes] = (0, react_1.useState)(0);
     const [manualRefreshes, setManualRefreshes] = (0, react_1.useState)(0);
-    const [playbackRate, setPlaybackRate] = (0, react_1.useState)(1);
-    const audioAndVideoTags = (0, react_1.useRef)([]);
-    const { delayRender, continueRender } = (0, use_delay_render_js_1.useDelayRender)();
-    if (typeof window !== 'undefined') {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        (0, react_1.useLayoutEffect)(() => {
-            window.remotion_setFrame = (f, composition, attempt) => {
-                window.remotion_attempt = attempt;
-                const id = delayRender(`Setting the current frame to ${f}`);
-                let asyncUpdate = true;
-                setFrame((s) => {
-                    var _a;
-                    const currentFrame = (_a = s[composition]) !== null && _a !== void 0 ? _a : window.remotion_initialFrame;
-                    // Avoid cloning the object
-                    if (currentFrame === f) {
-                        asyncUpdate = false;
-                        return s;
-                    }
-                    return {
-                        ...s,
-                        [composition]: f,
-                    };
-                });
-                // After setting the state, need to wait until it is applied in the next cycle
-                if (asyncUpdate) {
-                    requestAnimationFrame(() => continueRender(id));
-                }
-                else {
-                    continueRender(id);
-                }
-            };
-            window.remotion_isPlayer = false;
-        }, [continueRender, delayRender]);
-    }
-    const timelineContextValue = (0, react_1.useMemo)(() => {
-        return {
-            frame,
-            playing,
-            imperativePlaying,
-            rootId: remotionRootId,
-            playbackRate,
-            setPlaybackRate,
-            audioAndVideoTags,
-        };
-    }, [frame, playbackRate, playing, remotionRootId]);
-    const setTimelineContextValue = (0, react_1.useMemo)(() => {
-        return {
-            setFrame,
-            setPlaying,
-        };
-    }, []);
     const nonceContext = (0, react_1.useMemo)(() => {
         let counter = 0;
         return {
@@ -101,6 +47,6 @@ const RemotionRoot = ({ children, numberOfAudioTags, logLevel, onlyRenderComposi
     const logging = (0, react_1.useMemo)(() => {
         return { logLevel, mountTime: Date.now() };
     }, [logLevel]);
-    return ((0, jsx_runtime_1.jsx)(log_level_context_js_1.LogLevelContext.Provider, { value: logging, children: (0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: nonceContext, children: (0, jsx_runtime_1.jsx)(nonce_js_1.SetNonceContext.Provider, { value: setNonceContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.TimelineContext.Provider, { value: timelineContextValue, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(use_media_enabled_js_1.MediaEnabledProvider, { videoEnabled: videoEnabled, audioEnabled: audioEnabled, children: (0, jsx_runtime_1.jsx)(EditorProps_js_1.EditorPropsProvider, { children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(CompositionManager_js_1.CompositionManagerProvider, { numberOfAudioTags: numberOfAudioTags, onlyRenderComposition: onlyRenderComposition, currentCompositionMetadata: currentCompositionMetadata, audioLatencyHint: audioLatencyHint, children: (0, jsx_runtime_1.jsx)(duration_state_js_1.DurationsContextProvider, { children: (0, jsx_runtime_1.jsx)(buffering_js_1.BufferingProvider, { children: children }) }) }) }) }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(log_level_context_js_1.LogLevelContext.Provider, { value: logging, children: (0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: nonceContext, children: (0, jsx_runtime_1.jsx)(nonce_js_1.SetNonceContext.Provider, { value: setNonceContext, children: (0, jsx_runtime_1.jsx)(TimelineContext_js_1.TimelineContextProvider, { frameState: frameState, children: (0, jsx_runtime_1.jsx)(use_media_enabled_js_1.MediaEnabledProvider, { videoEnabled: videoEnabled, audioEnabled: audioEnabled, children: (0, jsx_runtime_1.jsx)(EditorProps_js_1.EditorPropsProvider, { children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(SequenceManager_js_1.SequenceManagerProvider, { children: (0, jsx_runtime_1.jsx)(RenderAssetManager_js_1.RenderAssetManagerProvider, { children: (0, jsx_runtime_1.jsx)(ResolveCompositionConfig_js_1.ResolveCompositionConfig, { children: (0, jsx_runtime_1.jsx)(shared_audio_tags_js_1.SharedAudioContextProvider, { numberOfAudioTags: numberOfAudioTags, audioLatencyHint: audioLatencyHint, children: (0, jsx_runtime_1.jsx)(duration_state_js_1.DurationsContextProvider, { children: (0, jsx_runtime_1.jsx)(buffering_js_1.BufferingProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }));
 };
 exports.RemotionRoot = RemotionRoot;

package/dist/cjs/Sequence.js

@@ -7,6 +7,7 @@ const react_1 = require("react");
 const AbsoluteFill_js_1 = require("./AbsoluteFill.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
 const SequenceManager_js_1 = require("./SequenceManager.js");
+const TimelineContext_js_1 = require("./TimelineContext.js");
 const nonce_js_1 = require("./nonce.js");
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
 const use_video_config_js_1 = require("./use-video-config.js");
@@ -18,7 +19,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
     const { layout = 'absolute-fill' } = other;
     const [id] = (0, react_1.useState)(() => String(Math.random()));
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
-    const { rootId } = (0, react_1.useContext)(timeline_position_state_js_1.TimelineContext);
+    const { rootId } = (0, react_1.useContext)(TimelineContext_js_1.TimelineContext);
     const cumulatedFrom = parentSequence
         ? parentSequence.cumulatedFrom + parentSequence.relativeFrom
         : 0;

package/dist/cjs/TimelineContext.d.ts

@@ -0,0 +1,22 @@
+import type { MutableRefObject } from 'react';
+import React from 'react';
+import { type PlayableMediaTag } from './timeline-position-state';
+export type TimelineContextValue = {
+    frame: Record<string, number>;
+    playing: boolean;
+    rootId: string;
+    playbackRate: number;
+    imperativePlaying: MutableRefObject<boolean>;
+    setPlaybackRate: (u: React.SetStateAction<number>) => void;
+    audioAndVideoTags: MutableRefObject<PlayableMediaTag[]>;
+};
+export type SetTimelineContextValue = {
+    setFrame: (u: React.SetStateAction<Record<string, number>>) => void;
+    setPlaying: (u: React.SetStateAction<boolean>) => void;
+};
+export declare const SetTimelineContext: React.Context<SetTimelineContextValue>;
+export declare const TimelineContext: React.Context<TimelineContextValue>;
+export declare const TimelineContextProvider: React.FC<{
+    readonly children: React.ReactNode;
+    readonly frameState: Record<string, number> | null;
+}>;

package/dist/cjs/TimelineContext.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineContextProvider = exports.TimelineContext = exports.SetTimelineContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const random_1 = require("./random");
+const timeline_position_state_1 = require("./timeline-position-state");
+const use_delay_render_1 = require("./use-delay-render");
+exports.SetTimelineContext = (0, react_1.createContext)({
+    setFrame: () => {
+        throw new Error('default');
+    },
+    setPlaying: () => {
+        throw new Error('default');
+    },
+});
+exports.TimelineContext = (0, react_1.createContext)({
+    frame: {},
+    playing: false,
+    playbackRate: 1,
+    rootId: '',
+    imperativePlaying: {
+        current: false,
+    },
+    setPlaybackRate: () => {
+        throw new Error('default');
+    },
+    audioAndVideoTags: { current: [] },
+});
+const TimelineContextProvider = ({ children, frameState }) => {
+    const [playing, setPlaying] = (0, react_1.useState)(false);
+    const imperativePlaying = (0, react_1.useRef)(false);
+    const [playbackRate, setPlaybackRate] = (0, react_1.useState)(1);
+    const audioAndVideoTags = (0, react_1.useRef)([]);
+    const [remotionRootId] = (0, react_1.useState)(() => String((0, random_1.random)(null)));
+    const [_frame, setFrame] = (0, react_1.useState)(() => (0, timeline_position_state_1.getInitialFrameState)());
+    const frame = frameState !== null && frameState !== void 0 ? frameState : _frame;
+    const { delayRender, continueRender } = (0, use_delay_render_1.useDelayRender)();
+    if (typeof window !== 'undefined') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        (0, react_1.useLayoutEffect)(() => {
+            window.remotion_setFrame = (f, composition, attempt) => {
+                window.remotion_attempt = attempt;
+                const id = delayRender(`Setting the current frame to ${f}`);
+                let asyncUpdate = true;
+                setFrame((s) => {
+                    var _a;
+                    const currentFrame = (_a = s[composition]) !== null && _a !== void 0 ? _a : window.remotion_initialFrame;
+                    // Avoid cloning the object
+                    if (currentFrame === f) {
+                        asyncUpdate = false;
+                        return s;
+                    }
+                    return {
+                        ...s,
+                        [composition]: f,
+                    };
+                });
+                // After setting the state, need to wait until it is applied in the next cycle
+                if (asyncUpdate) {
+                    requestAnimationFrame(() => continueRender(id));
+                }
+                else {
+                    continueRender(id);
+                }
+            };
+            window.remotion_isPlayer = false;
+        }, [continueRender, delayRender]);
+    }
+    const timelineContextValue = (0, react_1.useMemo)(() => {
+        return {
+            frame,
+            playing,
+            imperativePlaying,
+            rootId: remotionRootId,
+            playbackRate,
+            setPlaybackRate,
+            audioAndVideoTags,
+        };
+    }, [frame, playbackRate, playing, remotionRootId]);
+    const setTimelineContextValue = (0, react_1.useMemo)(() => {
+        return {
+            setFrame,
+            setPlaying,
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(exports.TimelineContext.Provider, { value: timelineContextValue, children: (0, jsx_runtime_1.jsx)(exports.SetTimelineContext.Provider, { value: setTimelineContextValue, children: children }) }));
+};
+exports.TimelineContextProvider = TimelineContextProvider;

package/dist/cjs/audio/shared-audio-tags.d.ts

@@ -1,4 +1,4 @@
-import type { AudioHTMLAttributes, ComponentType, LazyExoticComponent } from 'react';
+import type { AudioHTMLAttributes } from 'react';
 import React from 'react';
 import type { SharedElementSourceNode } from './shared-element-source-node.js';
 /**
@@ -41,7 +41,6 @@ export declare const SharedAudioContext: React.Context<SharedContext | null>;
 export declare const SharedAudioContextProvider: React.FC<{
     readonly numberOfAudioTags: number;
     readonly children: React.ReactNode;
-    readonly component: LazyExoticComponent<ComponentType<Record<string, unknown>>> | ComponentType<Record<string, unknown>> | null;
     readonly audioLatencyHint: AudioContextLatencyCategory;
 }>;
 export declare const useSharedAudio: ({ aud, audioId, premounting, }: {

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

@@ -36,6 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSharedAudio = exports.SharedAudioContextProvider = exports.SharedAudioContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
+const CompositionManagerContext_js_1 = require("../CompositionManagerContext.js");
 const log_level_context_js_1 = require("../log-level-context.js");
 const play_and_handle_not_allowed_error_js_1 = require("../play-and-handle-not-allowed-error.js");
 const use_remotion_environment_js_1 = require("../use-remotion-environment.js");
@@ -74,12 +75,19 @@ const didPropChange = (key, newProp, prevProp) => {
     return true;
 };
 exports.SharedAudioContext = (0, react_1.createContext)(null);
-const SharedAudioContextProvider = ({ children, numberOfAudioTags, component, audioLatencyHint }) => {
+const SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHint }) => {
     const audios = (0, react_1.useRef)([]);
     const [initialNumberOfAudioTags] = (0, react_1.useState)(numberOfAudioTags);
     if (numberOfAudioTags !== initialNumberOfAudioTags) {
         throw new Error('The number of shared audio tags has changed dynamically. Once you have set this property, you cannot change it afterwards.');
     }
+    const compositionManager = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionManager);
+    const component = compositionManager.compositions.find((c) => {
+        var _a;
+        return ((_a = compositionManager.canvasContent) === null || _a === void 0 ? void 0 : _a.type) === 'composition'
+            ? c.id === compositionManager.canvasContent.compositionId
+            : null;
+    });
     const logLevel = (0, log_level_context_js_1.useLogLevel)();
     const audioContext = (0, use_audio_context_js_1.useSingletonAudioContext)(logLevel, audioLatencyHint);
     const refs = (0, react_1.useMemo)(() => {

package/dist/cjs/cancel-render.d.ts

@@ -1 +1,8 @@
+import type { DelayRenderScope } from './delay-render.js';
+/**
+ * Internal function that accepts scope as parameter.
+ * This allows useDelayRender to control its own scope source.
+ * @private
+ */
+export declare function cancelRenderInternal(scope: DelayRenderScope | undefined, err: unknown): never;
 export declare function cancelRender(err: unknown): never;

package/dist/cjs/cancel-render.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.cancelRenderInternal = cancelRenderInternal;
 exports.cancelRender = cancelRender;
 const isErrorLike = (err) => {
     if (err instanceof Error) {
@@ -29,11 +30,12 @@ const isErrorLike = (err) => {
     }
     return true;
 };
-/*
- * @description When you invoke this function, Remotion will stop rendering all the frames without any retries.
- * @see [Documentation](https://remotion.dev/docs/cancel-render)
+/**
+ * Internal function that accepts scope as parameter.
+ * This allows useDelayRender to control its own scope source.
+ * @private
  */
-function cancelRender(err) {
+function cancelRenderInternal(scope, err) {
     let error;
     if (isErrorLike(err)) {
         error = err;
@@ -47,6 +49,15 @@ function cancelRender(err) {
     else {
         error = Error('Rendering was cancelled');
     }
-    window.remotion_cancelledError = error.stack;
+    if (scope) {
+        scope.remotion_cancelledError = error.stack;
+    }
     throw error;
 }
+/*
+ * @description When you invoke this function, Remotion will stop rendering all the frames without any retries.
+ * @see [Documentation](https://remotion.dev/docs/cancel-render)
+ */
+function cancelRender(err) {
+    return cancelRenderInternal(typeof window !== 'undefined' ? window : undefined, err);
+}

package/dist/cjs/delay-render.d.ts

@@ -1,4 +1,18 @@
+import type { LogLevel } from './log.js';
 import type { RemotionEnvironment } from './remotion-environment-context.js';
+export type DelayRenderScope = {
+    remotion_renderReady: boolean;
+    remotion_delayRenderTimeouts: {
+        [key: string]: {
+            label: string | null;
+            timeout: number | Timer;
+            startTime: number;
+        };
+    };
+    remotion_puppeteerTimeout: number;
+    remotion_attempt: number;
+    remotion_cancelledError?: string;
+};
 export declare const DELAY_RENDER_CALLSTACK_TOKEN = "The delayRender was called:";
 export declare const DELAY_RENDER_RETRIES_LEFT = "Retries left: ";
 export declare const DELAY_RENDER_RETRY_TOKEN = "- Rendering the frame will be retried.";
@@ -12,11 +26,21 @@ export type DelayRenderOptions = {
  * This allows useDelayRender to control its own environment source.
  * @private
  */
-export declare const delayRenderInternal: (environment: RemotionEnvironment, label?: string, options?: DelayRenderOptions) => number;
+export declare const delayRenderInternal: ({ scope, environment, label, options, }: {
+    scope: DelayRenderScope | undefined;
+    environment: RemotionEnvironment;
+    label: string | null;
+    options: DelayRenderOptions;
+}) => number;
 export declare const delayRender: (label?: string, options?: DelayRenderOptions) => number;
 /**
  * Internal function that accepts environment as parameter.
  * @private
  */
-export declare const continueRenderInternal: (handle: number, environment: RemotionEnvironment) => void;
+export declare const continueRenderInternal: ({ scope, handle, environment, logLevel, }: {
+    scope: DelayRenderScope | undefined;
+    handle: number;
+    environment: RemotionEnvironment;
+    logLevel: LogLevel;
+}) => void;
 export declare const continueRender: (handle: number) => void;