remotion 4.0.519 → 4.0.520

package/dist/cjs/SequenceManager.js

@@ -36,10 +36,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SequenceManagerProvider = exports.VisualModeSettersContext = exports.VisualModeDragOverridesContext = exports.VisualModePropStatusesRefContext = exports.VisualModePropStatusesContext = exports.makeSequencePropsSubscriptionKey = exports.SequenceRegistrationContext = exports.SequenceManagerRefContext = exports.SequenceManager = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
+const sequence_order_marker_js_1 = require("./sequence-order-marker.js");
+const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? react_1.default.useEffect : react_1.default.useLayoutEffect;
 exports.SequenceManager = react_1.default.createContext({
     registerSequence: () => {
         throw new Error('SequenceManagerContext not initialized');
     },
+    updateSequence: null,
     unregisterSequence: () => {
         throw new Error('SequenceManagerContext not initialized');
     },
@@ -89,6 +93,10 @@ exports.VisualModeSettersContext = react_1.default.createContext({
 });
 const effectDragOverridesKey = (nodePath, effectIndex) => `${(0, exports.makeSequencePropsSubscriptionKey)(nodePath)}.effects.${effectIndex}`;
 const SequenceManagerProvider = ({ children }) => {
+    const { isStudio } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
+    const [sequenceManagerId] = (0, react_1.useState)(() => String(Math.random()));
+    const committedOrderRef = (0, react_1.useRef)(null);
+    const committedOrderIdsRef = (0, react_1.useRef)(null);
     const [sequences, setSequences] = (0, react_1.useState)([]);
     const sequencesRef = (0, react_1.useRef)(sequences);
     sequencesRef.current = sequences;
@@ -168,9 +176,81 @@ const SequenceManagerProvider = ({ children }) => {
             return next;
         });
     }, []);
+    useIsomorphicLayoutEffect(() => {
+        if (!isStudio) {
+            return;
+        }
+        let unmounted = false;
+        const onCommitOrder = (event) => {
+            const { detail } = event;
+            const managerOrder = detail.sequenceManagers.find((item) => item.managerId === sequenceManagerId);
+            if (!managerOrder) {
+                return;
+            }
+            const previousOrder = committedOrderIdsRef.current;
+            if (previousOrder !== null &&
+                previousOrder.length === managerOrder.sequenceIds.length &&
+                previousOrder.every((sequenceId, index) => sequenceId === managerOrder.sequenceIds[index])) {
+                return;
+            }
+            const order = new Map(managerOrder.sequenceIds.map((sequenceId, index) => [
+                sequenceId,
+                index,
+            ]));
+            committedOrderIdsRef.current = managerOrder.sequenceIds;
+            committedOrderRef.current = order;
+            queueMicrotask(() => {
+                if (unmounted) {
+                    return;
+                }
+                setSequences((currentSequences) => {
+                    let changed = false;
+                    const nextSequences = currentSequences.map((sequence) => {
+                        var _a;
+                        const timelineOrder = (_a = order.get(sequence.id)) !== null && _a !== void 0 ? _a : null;
+                        if (sequence.timelineOrder === timelineOrder) {
+                            return sequence;
+                        }
+                        changed = true;
+                        return { ...sequence, timelineOrder };
+                    });
+                    return changed ? nextSequences : currentSequences;
+                });
+            });
+        };
+        window.addEventListener(sequence_order_marker_js_1.COMMIT_ORDER_EVENT, onCommitOrder);
+        return () => {
+            unmounted = true;
+            window.removeEventListener(sequence_order_marker_js_1.COMMIT_ORDER_EVENT, onCommitOrder);
+        };
+    }, [isStudio, sequenceManagerId]);
     const registerSequence = (0, react_1.useCallback)((seq) => {
         setSequences((seqs) => {
-            return [...seqs, seq];
+            var _a;
+            var _b;
+            return [
+                ...seqs,
+                {
+                    ...seq,
+                    timelineOrder: (_b = (_a = committedOrderRef.current) === null || _a === void 0 ? void 0 : _a.get(seq.id)) !== null && _b !== void 0 ? _b : null,
+                },
+            ];
+        });
+    }, []);
+    const updateSequence = (0, react_1.useCallback)((seq) => {
+        setSequences((seqs) => {
+            var _a;
+            var _b;
+            const index = seqs.findIndex((item) => item.id === seq.id);
+            if (index === -1) {
+                return seqs;
+            }
+            const next = [...seqs];
+            next[index] = {
+                ...seq,
+                timelineOrder: (_b = (_a = committedOrderRef.current) === null || _a === void 0 ? void 0 : _a.get(seq.id)) !== null && _b !== void 0 ? _b : null,
+            };
+            return next;
         });
     }, []);
     const unregisterSequence = (0, react_1.useCallback)((seq) => {
@@ -180,9 +260,10 @@ const SequenceManagerProvider = ({ children }) => {
         return {
             registerSequence,
             sequences,
+            updateSequence,
             unregisterSequence,
         };
-    }, [registerSequence, sequences, unregisterSequence]);
+    }, [registerSequence, sequences, unregisterSequence, updateSequence]);
     const getDragOverrides = (0, react_1.useCallback)((nodePath) => {
         var _a;
         return (_a = dragOverrides[(0, exports.makeSequencePropsSubscriptionKey)(nodePath)]) !== null && _a !== void 0 ? _a : {};
@@ -219,6 +300,7 @@ const SequenceManagerProvider = ({ children }) => {
         setPropStatuses,
         remapPropStatuses,
     ]);
-    return (jsx_runtime_1.jsx(exports.SequenceManagerRefContext.Provider, { value: sequencesRef, children: jsx_runtime_1.jsx(exports.SequenceManager.Provider, { value: sequenceContext, children: jsx_runtime_1.jsx(exports.VisualModePropStatusesRefContext.Provider, { value: propStatusesRef, children: jsx_runtime_1.jsx(exports.VisualModePropStatusesContext.Provider, { value: propStatusesContext, children: jsx_runtime_1.jsx(exports.VisualModeDragOverridesContext.Provider, { value: dragOverridesContext, children: jsx_runtime_1.jsx(exports.VisualModeSettersContext.Provider, { value: settersContext, children: children }) }) }) }) }) }));
+    const providers = (jsx_runtime_1.jsx(exports.SequenceManagerRefContext.Provider, { value: sequencesRef, children: jsx_runtime_1.jsx(exports.SequenceManager.Provider, { value: sequenceContext, children: jsx_runtime_1.jsx(exports.VisualModePropStatusesRefContext.Provider, { value: propStatusesRef, children: jsx_runtime_1.jsx(exports.VisualModePropStatusesContext.Provider, { value: propStatusesContext, children: jsx_runtime_1.jsx(exports.VisualModeDragOverridesContext.Provider, { value: dragOverridesContext, children: jsx_runtime_1.jsx(exports.VisualModeSettersContext.Provider, { value: settersContext, children: children }) }) }) }) }) }));
+    return isStudio ? (jsx_runtime_1.jsx(sequence_order_marker_js_1.SequenceManagerOrderMarker, { managerId: sequenceManagerId, children: providers })) : (providers);
 };
 exports.SequenceManagerProvider = SequenceManagerProvider;

package/dist/cjs/TimelineContext.d.ts

@@ -3,26 +3,32 @@ import React from 'react';
 import { type PlayableMediaTag } from './timeline-position-state';
 export type TimelineContextValue = {
     frame: Record<string, number>;
-    playing: boolean;
-    imperativePlaying: RefObject<boolean>;
-    audioAndVideoTags: RefObject<PlayableMediaTag[]>;
-};
-export type TimelineImperativeContextValue = {
-    frameRef: RefObject<Record<string, number>>;
-    imperativePlaying: RefObject<boolean>;
+    isPlaying: () => boolean;
     audioAndVideoTags: RefObject<PlayableMediaTag[]>;
 };
 export type PlaybackRateContextValue = {
     playbackRate: number;
     setPlaybackRate: (u: React.SetStateAction<number>) => void;
 };
+export type PlayingState = Readonly<{
+    playing: boolean;
+}>;
+export type BufferingState = Readonly<{
+    buffering: boolean;
+}>;
 export type SetTimelineContextValue = {
     setFrame: (u: React.SetStateAction<Record<string, number>>) => void;
     setPlaying: (u: React.SetStateAction<boolean>) => void;
+    setBuffering: (buffering: boolean) => void;
+    subscribePlaying: (listener: (state: PlayingState) => void) => () => void;
+    subscribeBuffering: (listener: (state: BufferingState) => void) => () => void;
+    isPlaying: () => boolean;
+    isBuffering: () => boolean;
+    frameRef: RefObject<Record<string, number>>;
+    audioAndVideoTags: RefObject<PlayableMediaTag[]>;
 };
 export declare const SetTimelineContext: React.Context<SetTimelineContextValue>;
 export declare const TimelineContext: React.Context<TimelineContextValue | null>;
-export declare const TimelineImperativeContext: React.Context<TimelineImperativeContextValue | null>;
 export declare const PlaybackRateContext: React.Context<PlaybackRateContextValue | null>;
 export declare const AbsoluteTimeContext: React.Context<TimelineContextValue | null>;
 export declare const TimelineContextProvider: React.FC<{

package/dist/cjs/TimelineContext.js

@@ -1,31 +1,39 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineContextProvider = exports.AbsoluteTimeContext = exports.PlaybackRateContext = exports.TimelineImperativeContext = exports.TimelineContext = exports.SetTimelineContext = void 0;
+exports.TimelineContextProvider = exports.AbsoluteTimeContext = exports.PlaybackRateContext = exports.TimelineContext = exports.SetTimelineContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const runtime_value_store_js_1 = require("./runtime-value-store.js");
 const timeline_position_state_1 = require("./timeline-position-state");
 const use_delay_render_1 = require("./use-delay-render");
+const missingSetTimelineContext = () => {
+    throw new Error('SetTimelineContext is missing. This is likely caused by a Remotion version mismatch.');
+};
 exports.SetTimelineContext = (0, react_1.createContext)({
-    setFrame: () => {
-        throw new Error('default');
-    },
-    setPlaying: () => {
-        throw new Error('default');
-    },
+    setFrame: missingSetTimelineContext,
+    setPlaying: missingSetTimelineContext,
+    setBuffering: missingSetTimelineContext,
+    subscribePlaying: () => () => undefined,
+    subscribeBuffering: () => () => undefined,
+    isPlaying: () => false,
+    isBuffering: missingSetTimelineContext,
+    frameRef: { current: {} },
+    audioAndVideoTags: { current: [] },
 });
 exports.TimelineContext = (0, react_1.createContext)(null);
-exports.TimelineImperativeContext = (0, react_1.createContext)(null);
 exports.PlaybackRateContext = (0, react_1.createContext)(null);
 exports.AbsoluteTimeContext = (0, react_1.createContext)(null);
 const TimelineContextProvider = ({ children, frameState }) => {
-    const [playing, setPlaying] = (0, react_1.useState)(false);
-    const imperativePlaying = (0, react_1.useRef)(false);
+    const playingStore = (0, react_1.useMemo)(() => (0, runtime_value_store_js_1.createRuntimeValueStore)({ playing: false }), []);
+    const bufferingStore = (0, react_1.useMemo)(() => (0, runtime_value_store_js_1.createRuntimeValueStore)({ buffering: false }), []);
     const [playbackRate, setPlaybackRate] = (0, react_1.useState)(1);
     const audioAndVideoTags = (0, react_1.useRef)([]);
     const [_frame, setFrame] = (0, react_1.useState)(() => (0, timeline_position_state_1.getInitialFrameState)());
     const frame = frameState !== null && frameState !== void 0 ? frameState : _frame;
     const frameRef = (0, react_1.useRef)(frame);
     frameRef.current = frame;
+    const readIsPlaying = (0, react_1.useCallback)(() => playingStore.store.getSnapshot().playing, [playingStore]);
+    const readIsBuffering = (0, react_1.useCallback)(() => bufferingStore.store.getSnapshot().buffering, [bufferingStore]);
     const { delayRender, continueRender } = (0, use_delay_render_1.useDelayRender)();
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -61,18 +69,10 @@ const TimelineContextProvider = ({ children, frameState }) => {
     const timelineContextValue = (0, react_1.useMemo)(() => {
         return {
             frame,
-            playing,
-            imperativePlaying,
-            audioAndVideoTags,
-        };
-    }, [frame, playing]);
-    const timelineImperativeContextValue = (0, react_1.useMemo)(() => {
-        return {
-            frameRef,
-            imperativePlaying,
+            isPlaying: readIsPlaying,
             audioAndVideoTags,
         };
-    }, []);
+    }, [frame, readIsPlaying]);
     const playbackRateContextValue = (0, react_1.useMemo)(() => {
         return {
             playbackRate,
@@ -82,9 +82,26 @@ const TimelineContextProvider = ({ children, frameState }) => {
     const setTimelineContextValue = (0, react_1.useMemo)(() => {
         return {
             setFrame,
-            setPlaying,
+            setPlaying: (updater) => {
+                const current = playingStore.store.getSnapshot().playing;
+                const next = typeof updater === 'function' ? updater(current) : updater;
+                if (current !== next) {
+                    playingStore.setSnapshot({ playing: next });
+                }
+            },
+            setBuffering: (buffering) => {
+                if (readIsBuffering() !== buffering) {
+                    bufferingStore.setSnapshot({ buffering });
+                }
+            },
+            subscribePlaying: playingStore.store.subscribe,
+            subscribeBuffering: bufferingStore.store.subscribe,
+            isPlaying: readIsPlaying,
+            isBuffering: readIsBuffering,
+            frameRef,
+            audioAndVideoTags,
         };
-    }, []);
-    return (jsx_runtime_1.jsx(exports.AbsoluteTimeContext.Provider, { value: timelineContextValue, children: jsx_runtime_1.jsx(exports.PlaybackRateContext.Provider, { value: playbackRateContextValue, children: jsx_runtime_1.jsx(exports.TimelineImperativeContext.Provider, { value: timelineImperativeContextValue, children: jsx_runtime_1.jsx(exports.TimelineContext.Provider, { value: timelineContextValue, children: jsx_runtime_1.jsx(exports.SetTimelineContext.Provider, { value: setTimelineContextValue, children: children }) }) }) }) }));
+    }, [bufferingStore, playingStore, readIsBuffering, readIsPlaying]);
+    return (jsx_runtime_1.jsx(exports.AbsoluteTimeContext.Provider, { value: timelineContextValue, children: jsx_runtime_1.jsx(exports.PlaybackRateContext.Provider, { value: playbackRateContextValue, children: jsx_runtime_1.jsx(exports.TimelineContext.Provider, { value: timelineContextValue, children: jsx_runtime_1.jsx(exports.SetTimelineContext.Provider, { value: setTimelineContextValue, children: children }) }) }) }));
 };
 exports.TimelineContextProvider = TimelineContextProvider;

package/dist/cjs/audio/AudioForPreview.js

@@ -41,11 +41,13 @@ const get_cross_origin_value_js_1 = require("../get-cross-origin-value.js");
 const log_level_context_js_1 = require("../log-level-context.js");
 const prefetch_js_1 = require("../prefetch.js");
 const random_js_1 = require("../random.js");
+const sequence_order_marker_js_1 = require("../sequence-order-marker.js");
 const SequenceContext_js_1 = require("../SequenceContext.js");
 const use_amplification_js_1 = require("../use-amplification.js");
 const use_media_in_timeline_js_1 = require("../use-media-in-timeline.js");
 const use_media_playback_js_1 = require("../use-media-playback.js");
 const use_media_tag_js_1 = require("../use-media-tag.js");
+const use_remotion_environment_js_1 = require("../use-remotion-environment.js");
 const volume_position_state_js_1 = require("../volume-position-state.js");
 const volume_prop_js_1 = require("../volume-prop.js");
 const volume_safeguard_js_1 = require("../volume-safeguard.js");
@@ -73,6 +75,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
     }
     const preloadedSrc = (0, prefetch_js_1.usePreload)(src);
     const sequenceContext = (0, react_2.useContext)(SequenceContext_js_1.SequenceContext);
+    const { isStudio } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const [timelineId] = (0, react_2.useState)(() => String(Math.random()));
     const userPreferredVolume = (0, volume_prop_js_1.evaluateVolume)({
         frame: volumePropFrame,
@@ -212,8 +215,9 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         };
     }, [audioRef, src]);
     if (initialShouldPreMountAudioElements) {
-        return null;
+        return isStudio ? (jsx_runtime_1.jsx(sequence_order_marker_js_1.SequenceOrderMarker, { sequenceId: timelineId, children: null })) : null;
     }
-    return (jsx_runtime_1.jsx("audio", { ref: audioRef, preload: "metadata", crossOrigin: crossOriginValue, ...propsToPass }));
+    const audio = (jsx_runtime_1.jsx("audio", { ref: audioRef, preload: "metadata", crossOrigin: crossOriginValue, ...propsToPass }));
+    return isStudio ? (jsx_runtime_1.jsx(sequence_order_marker_js_1.SequenceOrderMarker, { sequenceId: timelineId, children: audio })) : (audio);
 };
 exports.AudioForPreview = (0, react_2.forwardRef)(AudioForDevelopmentForwardRefFunction);

package/dist/cjs/buffering.d.ts

@@ -1,27 +1,11 @@
 import React from 'react';
-type Block = {
-    id: string;
-};
-type OnBufferingCallback = () => void;
-type OnResumeCallback = () => void;
-type ListenForBuffering = (callback: OnBufferingCallback) => {
-    remove: () => void;
-};
-type ListenForResume = (callback: OnResumeCallback) => {
-    remove: () => void;
-};
-type AddBlock = (block: Block) => {
-    unblock: () => void;
-};
 type BufferManager = {
-    addBlock: AddBlock;
-    listenForBuffering: ListenForBuffering;
-    listenForResume: ListenForResume;
-    buffering: React.RefObject<boolean>;
+    addBlock: () => {
+        unblock: () => void;
+    };
 };
 export declare const BufferingContextReact: React.Context<BufferManager | null>;
 export declare const BufferingProvider: React.FC<{
     readonly children: React.ReactNode;
 }>;
-export declare const useIsPlayerBuffering: (bufferManager: BufferManager) => boolean;
 export {};

package/dist/cjs/buffering.js

@@ -33,68 +33,35 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useIsPlayerBuffering = exports.BufferingProvider = exports.BufferingContextReact = void 0;
+exports.BufferingProvider = exports.BufferingContextReact = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const log_level_context_1 = require("./log-level-context");
 const playback_logging_1 = require("./playback-logging");
+const TimelineContext_js_1 = require("./TimelineContext.js");
 const use_remotion_environment_1 = require("./use-remotion-environment");
-const useBufferManager = (logLevel, mountTime) => {
-    const [blocks, setBlocks] = (0, react_1.useState)([]);
-    // Listener registries are refs, not state: `usePlayback` parks its loop
-    // during buffering and registers its resume listener from a rAF callback.
-    // With state, that registration only lands after the next React commit -
-    // if the last block unblocks before then, the resume dispatch reads the
-    // previous array, the listener is never called, and the playback loop
-    // stays parked forever (frame clock frozen while isPlaying() is true).
-    const onBufferingCallbacks = (0, react_1.useRef)([]);
-    const onResumeCallbacks = (0, react_1.useRef)([]);
+const useBufferManager = (logLevel, mountTime, setBuffering, isBuffering) => {
+    const [blockCount, setBlockCount] = (0, react_1.useState)(0);
     const env = (0, use_remotion_environment_1.useRemotionEnvironment)();
     const rendering = env.isRendering;
-    const buffering = (0, react_1.useRef)(false);
-    const addBlock = (0, react_1.useCallback)((block) => {
+    const addBlock = (0, react_1.useCallback)(() => {
         if (rendering) {
             return {
                 unblock: () => undefined,
             };
         }
         let unblocked = false;
-        setBlocks((b) => [...b, block]);
+        setBlockCount((count) => count + 1);
         return {
             unblock: () => {
                 if (unblocked) {
                     return;
                 }
                 unblocked = true;
-                setBlocks((b) => {
-                    const newArr = b.filter((bx) => bx !== block);
-                    if (newArr.length === b.length) {
-                        return b;
-                    }
-                    return newArr;
-                });
+                setBlockCount((count) => count - 1);
             },
         };
     }, [rendering]);
-    const listenForBuffering = (0, react_1.useCallback)((callback) => {
-        onBufferingCallbacks.current = [
-            ...onBufferingCallbacks.current,
-            callback,
-        ];
-        return {
-            remove: () => {
-                onBufferingCallbacks.current = onBufferingCallbacks.current.filter((cb) => cb !== callback);
-            },
-        };
-    }, []);
-    const listenForResume = (0, react_1.useCallback)((callback) => {
-        onResumeCallbacks.current = [...onResumeCallbacks.current, callback];
-        return {
-            remove: () => {
-                onResumeCallbacks.current = onResumeCallbacks.current.filter((cb) => cb !== callback);
-            },
-        };
-    }, []);
     (0, react_1.useEffect)(() => {
         if (rendering) {
             return;
@@ -102,9 +69,8 @@ const useBufferManager = (logLevel, mountTime) => {
         // Only fire on the `false -> true` transition: adding a block while
         // already buffering (e.g. a second media element starts loading) must
         // not re-dispatch `waiting` to listeners.
-        if (blocks.length > 0 && !buffering.current) {
-            buffering.current = true;
-            [...onBufferingCallbacks.current].forEach((c) => c());
+        if (blockCount > 0 && !isBuffering()) {
+            setBuffering(true);
             (0, playback_logging_1.playbackLogging)({
                 logLevel,
                 message: 'Player is entering buffer state',
@@ -112,11 +78,8 @@ const useBufferManager = (logLevel, mountTime) => {
                 tag: 'player',
             });
         }
-        // Intentionally only firing when blocks change, not the callbacks
-        // otherwise a buffering callback might remove itself after being called
-        // and trigger again
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [blocks]);
+    }, [blockCount]);
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
@@ -126,9 +89,8 @@ const useBufferManager = (logLevel, mountTime) => {
             // Only fire on the `true -> false` transition: the initial mount and
             // a block that was added and removed within the same commit must not
             // dispatch `resume` to listeners.
-            if (blocks.length === 0 && buffering.current) {
-                buffering.current = false;
-                [...onResumeCallbacks.current].forEach((c) => c());
+            if (blockCount === 0 && isBuffering()) {
+                setBuffering(false);
                 (0, playback_logging_1.playbackLogging)({
                     logLevel,
                     message: 'Player is exiting buffer state',
@@ -136,39 +98,16 @@ const useBufferManager = (logLevel, mountTime) => {
                     tag: 'player',
                 });
             }
-            // Intentionally only firing when blocks change, not the callbacks
-            // otherwise a resume callback might remove itself after being called
-            // and trigger again
             // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, [blocks]);
+        }, [blockCount]);
     }
-    return (0, react_1.useMemo)(() => {
-        return { addBlock, listenForBuffering, listenForResume, buffering };
-    }, [addBlock, buffering, listenForBuffering, listenForResume]);
+    return (0, react_1.useMemo)(() => ({ addBlock }), [addBlock]);
 };
 exports.BufferingContextReact = react_1.default.createContext(null);
 const BufferingProvider = ({ children }) => {
     const { logLevel, mountTime } = (0, react_1.useContext)(log_level_context_1.LogLevelContext);
-    const bufferManager = useBufferManager(logLevel !== null && logLevel !== void 0 ? logLevel : 'info', mountTime);
+    const { isBuffering, setBuffering } = (0, react_1.useContext)(TimelineContext_js_1.SetTimelineContext);
+    const bufferManager = useBufferManager(logLevel !== null && logLevel !== void 0 ? logLevel : 'info', mountTime, setBuffering, isBuffering);
     return (jsx_runtime_1.jsx(exports.BufferingContextReact.Provider, { value: bufferManager, children: children }));
 };
 exports.BufferingProvider = BufferingProvider;
-const useIsPlayerBuffering = (bufferManager) => {
-    const [isBuffering, setIsBuffering] = (0, react_1.useState)(bufferManager.buffering.current);
-    (0, react_1.useEffect)(() => {
-        const onBuffer = () => {
-            setIsBuffering(true);
-        };
-        const onResume = () => {
-            setIsBuffering(false);
-        };
-        const buffer = bufferManager.listenForBuffering(onBuffer);
-        const resume = bufferManager.listenForResume(onResume);
-        return () => {
-            buffer.remove();
-            resume.remove();
-        };
-    }, [bufferManager]);
-    return isBuffering;
-};
-exports.useIsPlayerBuffering = useIsPlayerBuffering;

package/dist/cjs/freeze.js

@@ -45,10 +45,7 @@ const Freeze = ({ frame: frameToFreeze, children, active = true, }) => {
         }
         return {
             ...timelineContext,
-            playing: false,
-            imperativePlaying: {
-                current: false,
-            },
+            isPlaying: () => false,
             frame: {
                 [videoConfig.id]: frameToFreeze + relativeFrom,
             },

package/dist/cjs/index.d.ts

@@ -136,7 +136,6 @@ export { interpolateColors, type InterpolateColorsOptions, } from './interpolate
 export { LogLevel } from './log.js';
 export { Loop } from './loop/index.js';
 export { assertValidInterpolateEasingOption, assertValidInterpolatePosterizeOption, EasingFunction, ExtrapolateType, interpolate, InterpolateOutputOption, InterpolateOptions, random, RandomSeed, } from './no-react';
-export type { NonceHistory } from './nonce.js';
 export { prefetch, PrefetchOnProgress } from './prefetch.js';
 export { registerRoot } from './register-root.js';
 export type { PixelFormat, VideoImageFormat } from './render-types.js';

package/dist/cjs/internals.d.ts

@@ -8,7 +8,6 @@ import * as CSSUtils from './default-css.js';
 import type { SerializedJSONWithCustomFields } from './input-props-serialization.js';
 import { type AssetFieldSchema, type ArrayFieldSchema, type ArrayItemFieldSchema, type InteractivitySchemaField, type InteractivitySchema, type VisibleFieldSchema } from './interactivity-schema.js';
 import type { LoggingContextValue } from './log-level-context.js';
-import type { NonceHistory } from './nonce.js';
 import type { RemotionEnvironment } from './remotion-environment-context.js';
 import type { OverrideIdToNodePaths, OverrideToNodePathGetters, OverrideToNodeSetters } from './sequence-node-path.js';
 import { OverrideIdsToNodePathsGettersContext, OverrideIdsToNodePathsSettersContext } from './sequence-node-path.js';
@@ -16,7 +15,7 @@ import type { ResolvedStackLocation } from './sequence-stack-traces.js';
 import type { CannotUpdateSequenceReason } from './SequenceManager.js';
 import { type CanUpdateEffectPropsResponse, type CanUpdateEffectPropsResponseFalse, type CanUpdateEffectPropsResponseTrue, type CanUpdateSequencePropsResponse, type CanUpdateSequencePropsResponseFalse, type CanUpdateSequencePropsResponseTrue, type SequenceNodePath, type SequencePropsSubscriptionKey, type SequencePropsStatusRemapping, type VideoConfigValues } from './SequenceManager.js';
 import * as TimelinePosition from './timeline-position-state.js';
-import { type PlaybackRateContextValue, type SetTimelineContextValue, type TimelineImperativeContextValue, type TimelineContextValue } from './TimelineContext.js';
+import { type PlaybackRateContextValue, type SetTimelineContextValue, type TimelineContextValue } from './TimelineContext.js';
 import { truthy } from './truthy.js';
 import type { CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusEasing, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, DragOverrideValue, GetDragOverrides, GetEffectDragOverrides, GetEffectPropStatuses, GetPropStatuses, VideoConfigNumericExpression } from './use-schema.js';
 import { type CanUpdateSequencePropStatus, type DragOverrides, type EffectDragOverrides, type PropStatuses } from './use-schema.js';
@@ -38,6 +37,7 @@ export declare const Internals: {
     readonly MEDIABUNNY_DURATION_VALUE_KEY: "mediabunny-duration";
     readonly makeRenderResourceManager: () => import("./render-resource-manager.js").RenderResourceManager;
     readonly RenderResourceManagerContext: import("react").Context<import("./render-resource-manager.js").RenderResourceManager | null>;
+    readonly createRuntimeValueStore: <TSnapshot extends Readonly<Record<string, unknown>>>(initialSnapshot: TSnapshot) => import("./runtime-value-store.js").RuntimeValueStoreController<TSnapshot>;
     readonly useUnsafeVideoConfig: () => import("./video-config.js").VideoConfig | null;
     readonly useFrameForVolumeProp: (behavior: import("./index.js").LoopVolumeCurveBehavior) => number;
     readonly useTimelinePosition: () => number;
@@ -98,6 +98,14 @@ export declare const Internals: {
     }>;
     readonly SequenceManagerRefContext: import("react").Context<import("./SequenceManager.js").SequenceManagerRef>;
     readonly SequenceRegistrationContext: import("react").Context<boolean>;
+    readonly CommitOrderInternals: {
+        compositionManagerMarker: symbol;
+        compositionMarker: symbol;
+        folderMarker: symbol;
+        sequenceManagerMarker: symbol;
+        sequenceMarker: symbol;
+        eventName: string;
+    };
     readonly SequenceStackTracesUpdateContext: import("react").Context<import("./sequence-stack-traces.js").UpdateResolvedStackTraceFn>;
     readonly baseSchema: {
         readonly durationInFrames: {
@@ -918,7 +926,6 @@ export declare const Internals: {
     }>;
     readonly EditorPropsContext: import("react").Context<import("./EditorProps.js").EditorPropsContextType>;
     readonly usePreload: (src: string) => string;
-    readonly NonceContext: import("react").Context<import("./nonce.js").TNonceContext>;
     readonly resolveVideoConfig: (params: {
         compositionId: string;
         compositionWidth: number | null;
@@ -1015,18 +1022,9 @@ export declare const Internals: {
         readonly children: import("react").ReactNode;
     }>;
     readonly BufferingContextReact: import("react").Context<{
-        addBlock: (block: {
-            id: string;
-        }) => {
+        addBlock: () => {
             unblock: () => void;
         };
-        listenForBuffering: (callback: () => void) => {
-            remove: () => void;
-        };
-        listenForResume: (callback: () => void) => {
-            remove: () => void;
-        };
-        buffering: import("react").RefObject<boolean>;
     } | null>;
     readonly getComponentsToAddStacksTo: () => unknown[];
     readonly getSequenceComponent: () => unknown;
@@ -1165,7 +1163,6 @@ export declare const Internals: {
         volumes: string | number;
         duration: number;
         doesVolumeChange: boolean;
-        nonce: import("./nonce.js").NonceHistoryContext;
         finalDisplayName: string;
         startMediaFrom: number;
         src: string;
@@ -1176,24 +1173,11 @@ export declare const Internals: {
     readonly setInputPropsOverride: (override: Record<string, unknown> | null) => void;
     readonly useVideoEnabled: () => boolean;
     readonly useAudioEnabled: () => boolean;
-    readonly useIsPlayerBuffering: (bufferManager: {
-        addBlock: (block: {
-            id: string;
-        }) => {
-            unblock: () => void;
-        };
-        listenForBuffering: (callback: () => void) => {
-            remove: () => void;
-        };
-        listenForResume: (callback: () => void) => {
-            remove: () => void;
-        };
-        buffering: import("react").RefObject<boolean>;
-    }) => boolean;
+    readonly useBuffering: () => boolean;
     readonly TimelinePosition: typeof TimelinePosition;
     readonly DelayRenderContextType: import("react").Context<import("./delay-render.js").DelayRenderScope | null>;
     readonly TimelineContext: import("react").Context<TimelineContextValue | null>;
-    readonly TimelineImperativeContext: import("react").Context<TimelineImperativeContextValue | null>;
+    readonly usePlaying: () => boolean;
     readonly PlaybackRateContext: import("react").Context<PlaybackRateContextValue | null>;
     readonly AbsoluteTimeContext: import("react").Context<TimelineContextValue | null>;
     readonly RenderAssetManagerProvider: import("react").FC<{
@@ -1300,4 +1284,4 @@ export declare const Internals: {
         readonly componentName: string;
     }) => import("react").CSSProperties | null;
 };
-export type { ArrayFieldSchema, AssetFieldSchema, ArrayItemFieldSchema, CannotUpdateSequenceReason, CanUpdateEffectPropsResponse, CanUpdateEffectPropsResponseFalse, CanUpdateEffectPropsResponseTrue, CanUpdateSequencePropsResponse, CanUpdateSequencePropsResponseFalse, CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, CanUpdateSequencePropStatusEasing, CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, VideoConfigNumericExpression, CompositionManagerContext, CompProps, DragOverrides, DragOverrideValue, EffectDragOverrides, GetDragOverrides, GetEffectDragOverrides, GetEffectPropStatuses, GetPropStatuses, JsxComponentIdentity, LoggingContextValue, MediaVolumeContextValue, NonceHistory, OverrideIdsToNodePathsGettersContext, OverrideIdsToNodePathsSettersContext, OverrideIdToNodePaths, OverrideToNodePathGetters, OverrideToNodeSetters, PlaybackRateContextValue, PropStatuses, RemotionAudioContextState, RemotionEnvironment, ResolvedStackLocation, ScheduleAudioNodeOptions, ScheduleAudioNodeResult, InteractivitySchemaField, SequenceNodePath, SequencePropsSubscriptionKey, SequencePropsStatusRemapping, VideoConfigValues, InteractivitySchema, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TimelineImperativeContextValue, TRenderAsset, TSequence, VisibleFieldSchema, WatchRemotionStaticFilesPayload, };
+export type { ArrayFieldSchema, AssetFieldSchema, ArrayItemFieldSchema, CannotUpdateSequenceReason, CanUpdateEffectPropsResponse, CanUpdateEffectPropsResponseFalse, CanUpdateEffectPropsResponseTrue, CanUpdateSequencePropsResponse, CanUpdateSequencePropsResponseFalse, CanUpdateSequencePropsResponseTrue, CanUpdateSequencePropStatus, CanUpdateSequencePropStatusEasing, CanUpdateSequencePropStatusFalse, CanUpdateSequencePropStatusKeyframed, CanUpdateSequencePropStatusStatic, VideoConfigNumericExpression, CompositionManagerContext, CompProps, DragOverrides, DragOverrideValue, EffectDragOverrides, GetDragOverrides, GetEffectDragOverrides, GetEffectPropStatuses, GetPropStatuses, JsxComponentIdentity, LoggingContextValue, MediaVolumeContextValue, OverrideIdsToNodePathsGettersContext, OverrideIdsToNodePathsSettersContext, OverrideIdToNodePaths, OverrideToNodePathGetters, OverrideToNodeSetters, PlaybackRateContextValue, PropStatuses, RemotionAudioContextState, RemotionEnvironment, ResolvedStackLocation, ScheduleAudioNodeOptions, ScheduleAudioNodeResult, InteractivitySchemaField, SequenceNodePath, SequencePropsSubscriptionKey, SequencePropsStatusRemapping, VideoConfigValues, InteractivitySchema, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TRenderAsset, TSequence, VisibleFieldSchema, WatchRemotionStaticFilesPayload, };