remotion 4.0.519 → 4.0.521

package/dist/cjs/SequenceManager.d.ts

@@ -3,6 +3,7 @@ import type { TSequence } from './CompositionManager.js';
 import type { CanUpdateSequencePropStatus, DragOverrideValue, GetDragOverrides, GetEffectDragOverrides, PropStatuses } from './use-schema.js';
 export type SequenceManagerContext = {
     registerSequence: (seq: TSequence) => void;
+    updateSequence: ((seq: TSequence) => void) | null;
     unregisterSequence: (id: string) => void;
     sequences: TSequence[];
 };

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/animated-image/AnimatedImage.d.ts

@@ -201,6 +201,7 @@ export declare const animatedImageSchema: {
     readonly showInTimeline: import("../interactivity-schema.js").HiddenFieldSchema;
     readonly src: {
         readonly type: "asset";
+        readonly assetType: "image";
         readonly default: undefined;
         readonly description: "Source";
         readonly keyframable: false;

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

@@ -23,6 +23,7 @@ const resolve_image_source_1 = require("./resolve-image-source");
 exports.animatedImageSchema = {
     src: {
         type: 'asset',
+        assetType: 'image',
         default: undefined,
         description: 'Source',
         keyframable: false,

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/audio/shared-audio-tags.d.ts

@@ -58,6 +58,7 @@ type SharedAudioContextValue = {
     audioSyncAnchorEmitter: AudioSyncAnchorEmitter;
     scheduleAudioNode: (options: ScheduleAudioNodeOptions) => ScheduleAudioNodeResult;
     resume: () => Promise<void>;
+    resumeAsAutoPlay: () => Promise<void>;
     suspend: () => Promise<void>;
     getIsResumingAudioContext: () => Promise<AudioContextResumeResult> | null;
     unscheduleAudioNode: (node: AudioBufferSourceNode) => void;

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

@@ -111,6 +111,7 @@ const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled,
     }
     const isResuming = (0, react_1.useRef)(null);
     const nextResumeAttemptId = (0, react_1.useRef)(0);
+    const nextResumeIsAutoPlayAttempt = (0, react_1.useRef)(false);
     const audioSyncAnchor = (0, react_1.useMemo)(() => ({ value: 0 }), []);
     const audioSyncAnchorListeners = (0, react_1.useRef)([]);
     const audioSyncAnchorEmitter = (0, react_1.useMemo)(() => {
@@ -201,6 +202,8 @@ const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled,
         };
     }, [ctxAndGain, _experimentalKeepAudioContextAlive, logLevel]);
     const resume = (0, react_1.useCallback)(() => {
+        const isAutoPlayAttempt = nextResumeIsAutoPlayAttempt.current;
+        nextResumeIsAutoPlayAttempt.current = false;
         if (!ctxAndGain) {
             return Promise.resolve();
         }
@@ -226,7 +229,7 @@ const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled,
         const abortController = new AbortController();
         const resumeAttemptId = nextResumeAttemptId.current++;
         const waitPromise = new Promise((resolve) => {
-            (0, wait_until_actually_resumed_js_1.waitUntilActuallyResumed)(ctxAndGain.audioContext, logLevel, abortController.signal).then(resolve);
+            (0, wait_until_actually_resumed_js_1.waitUntilActuallyResumed)(ctxAndGain.audioContext, logLevel, abortController.signal, isAutoPlayAttempt).then(resolve);
             resumePromise.catch((err) => {
                 log_js_1.Log.warn({ logLevel, tag: 'audio' }, 'AudioContext resume rejected, muting playback and continuing without audio', err);
                 abortController.abort();
@@ -248,6 +251,10 @@ const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled,
             // since callers (e.g. use-playback.ts) do not await this.
         });
     }, [ctxAndGain, _experimentalKeepAudioContextAlive, logLevel]);
+    const resumeAsAutoPlay = (0, react_1.useCallback)(() => {
+        nextResumeIsAutoPlayAttempt.current = true;
+        return resume();
+    }, [resume]);
     const getIsResumingAudioContext = (0, react_1.useCallback)(() => {
         var _a;
         var _b;
@@ -326,6 +333,7 @@ const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled,
             audioSyncAnchorEmitter,
             scheduleAudioNode,
             resume,
+            resumeAsAutoPlay,
             suspend,
             getIsResumingAudioContext,
             unscheduleAudioNode,
@@ -337,6 +345,7 @@ const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled,
         audioSyncAnchorEmitter,
         scheduleAudioNode,
         resume,
+        resumeAsAutoPlay,
         suspend,
         getIsResumingAudioContext,
         unscheduleAudioNode,

package/dist/cjs/audio/wait-until-actually-resumed.d.ts

@@ -1,2 +1,2 @@
 export type AudioContextResumeResult = 'resumed' | 'cancelled' | 'failed';
-export declare const waitUntilActuallyResumed: (audioContext: AudioContext, logLevel: "error" | "info" | "trace" | "verbose" | "warn", signal: AbortSignal) => Promise<AudioContextResumeResult>;
+export declare const waitUntilActuallyResumed: (audioContext: AudioContext, logLevel: "error" | "info" | "trace" | "verbose" | "warn", signal: AbortSignal, isAutoPlayAttempt: boolean) => Promise<AudioContextResumeResult>;

package/dist/cjs/audio/wait-until-actually-resumed.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.waitUntilActuallyResumed = void 0;
 const log_js_1 = require("../log.js");
 const RESUME_WAIT_TIMEOUT = 1000;
-const waitUntilActuallyResumed = (audioContext, logLevel, signal) => {
+const waitUntilActuallyResumed = (audioContext, logLevel, signal, isAutoPlayAttempt) => {
     return new Promise((resolve) => {
         const startCurrentTime = audioContext.currentTime;
         const start = audioContext.getOutputTimestamp();
@@ -55,19 +55,21 @@ const waitUntilActuallyResumed = (audioContext, logLevel, signal) => {
             return;
         }
         signal.addEventListener('abort', onAbort, { once: true });
-        timeout = setTimeout(() => {
-            // The success check is scheduled with requestAnimationFrame, which can
-            // be starved while the main thread is busy. Re-check once before
-            // declaring failure so a resume that actually completed is not
-            // reported as failed - the Player would otherwise mute itself even
-            // though playback was started by a user gesture and audio is running.
-            if (hasAudiblyStarted(startOutputPerformanceTime)) {
-                finish('resumed');
-                return;
-            }
-            log_js_1.Log.warn({ logLevel, tag: 'audio' }, 'WARNING: You enabled autoPlay on an unmuted <Player /> and the browser did not allow the video to be started. Remotion muted the <Player /> so it can play. To properly handle this, either set the `muted` prop or remove the `autoPlay` prop');
-            finish('failed');
-        }, RESUME_WAIT_TIMEOUT);
+        if (isAutoPlayAttempt) {
+            timeout = setTimeout(() => {
+                // The success check is scheduled with requestAnimationFrame, which can
+                // be starved while the main thread is busy. Re-check once before
+                // declaring failure so a resume that actually completed is not
+                // reported as failed - the Player would otherwise mute itself even
+                // though playback was started by a user gesture and audio is running.
+                if (hasAudiblyStarted(startOutputPerformanceTime)) {
+                    finish('resumed');
+                    return;
+                }
+                log_js_1.Log.warn({ logLevel, tag: 'audio' }, 'WARNING: You enabled autoPlay on an unmuted <Player /> and the browser did not allow the video to be started. Remotion muted the <Player /> so it can play. To properly handle this, either set the `muted` prop or remove the `autoPlay` prop');
+                finish('failed');
+            }, RESUME_WAIT_TIMEOUT);
+        }
         animationFrame = requestAnimationFrame(check);
     });
 };

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/canvas-image/CanvasImage.d.ts

@@ -201,6 +201,7 @@ export declare const canvasImageSchema: {
     readonly showInTimeline: import("../interactivity-schema.js").HiddenFieldSchema;
     readonly src: {
         readonly type: "asset";
+        readonly assetType: "image";
         readonly default: undefined;
         readonly description: "Source";
         readonly keyframable: false;