remotion 4.0.390 → 4.0.391

package/dist/cjs/TimelineContext.d.ts

@@ -1,8 +1,9 @@
-import type { MutableRefObject } from 'react';
+import type { MutableRefObject, RefObject } from 'react';
 import React from 'react';
 import { type PlayableMediaTag } from './timeline-position-state';
 export type TimelineContextValue = {
     frame: Record<string, number>;
+    frameRef: RefObject<number>;
     playing: boolean;
     rootId: string;
     playbackRate: number;

package/dist/cjs/TimelineContext.js

@@ -16,6 +16,7 @@ exports.SetTimelineContext = (0, react_1.createContext)({
 });
 exports.TimelineContext = (0, react_1.createContext)({
     frame: {},
+    frameRef: { current: 0 },
     playing: false,
     playbackRate: 1,
     rootId: '',
@@ -35,6 +36,7 @@ const TimelineContextProvider = ({ children, frameState }) => {
     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 frameRef = (0, react_1.useRef)(0);
     const { delayRender, continueRender } = (0, use_delay_render_1.useDelayRender)();
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -76,6 +78,7 @@ const TimelineContextProvider = ({ children, frameState }) => {
             playbackRate,
             setPlaybackRate,
             audioAndVideoTags,
+            frameRef,
         };
     }, [frame, playbackRate, playing, remotionRootId]);
     const setTimelineContextValue = (0, react_1.useMemo)(() => {

package/dist/cjs/audio/AudioForPreview.js

@@ -89,6 +89,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         aud: propsToPass,
         audioId: id,
         premounting: Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting),
+        postmounting: Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmounting),
     });
     (0, use_media_in_timeline_js_1.useMediaInTimeline)({
         volume,

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

@@ -19,12 +19,15 @@ type AudioElem = {
     audioId: string;
     mediaElementSourceNode: SharedElementSourceNode | null;
     premounting: boolean;
+    postmounting: boolean;
+    audioMounted: boolean;
 };
 type SharedContext = {
     registerAudio: (options: {
         aud: AudioHTMLAttributes<HTMLAudioElement>;
         audioId: string;
         premounting: boolean;
+        postmounting: boolean;
     }) => AudioElem;
     unregisterAudio: (id: number) => void;
     updateAudio: (options: {
@@ -32,6 +35,7 @@ type SharedContext = {
         aud: AudioHTMLAttributes<HTMLAudioElement>;
         audioId: string;
         premounting: boolean;
+        postmounting: boolean;
     }) => void;
     playAllAudios: () => void;
     numberOfAudioTags: number;
@@ -43,9 +47,10 @@ export declare const SharedAudioContextProvider: React.FC<{
     readonly children: React.ReactNode;
     readonly audioLatencyHint: AudioContextLatencyCategory;
 }>;
-export declare const useSharedAudio: ({ aud, audioId, premounting, }: {
+export declare const useSharedAudio: ({ aud, audioId, premounting, postmounting, }: {
     aud: AudioHTMLAttributes<HTMLAudioElement>;
     audioId: string;
     premounting: boolean;
+    postmounting: boolean;
 }) => AudioElem;
 export {};

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

@@ -126,7 +126,7 @@ const SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyH
     }, [refs]);
     const registerAudio = (0, react_1.useCallback)((options) => {
         var _a, _b;
-        const { aud, audioId, premounting } = options;
+        const { aud, audioId, premounting, postmounting } = options;
         const found = (_a = audios.current) === null || _a === void 0 ? void 0 : _a.find((a) => a.audioId === audioId);
         if (found) {
             return found;
@@ -146,6 +146,8 @@ const SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyH
             audioId,
             mediaElementSourceNode,
             premounting,
+            audioMounted: Boolean(ref.current),
+            postmounting,
         };
         (_b = audios.current) === null || _b === void 0 ? void 0 : _b.push(newElem);
         rerenderAudios();
@@ -163,12 +165,18 @@ const SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyH
         audios.current = (_a = audios.current) === null || _a === void 0 ? void 0 : _a.filter((a) => a.id !== id);
         rerenderAudios();
     }, [refs, rerenderAudios]);
-    const updateAudio = (0, react_1.useCallback)(({ aud, audioId, id, premounting, }) => {
+    const updateAudio = (0, react_1.useCallback)(({ aud, audioId, id, premounting, postmounting, }) => {
         var _a;
         let changed = false;
         audios.current = (_a = audios.current) === null || _a === void 0 ? void 0 : _a.map((prevA) => {
+            const audioMounted = Boolean(prevA.el.current);
+            if (prevA.audioMounted !== audioMounted) {
+                changed = true;
+            }
             if (prevA.id === id) {
-                const isTheSame = compareProps(aud, prevA.props) && prevA.premounting === premounting;
+                const isTheSame = compareProps(aud, prevA.props) &&
+                    prevA.premounting === premounting &&
+                    prevA.postmounting === postmounting;
                 if (isTheSame) {
                     return prevA;
                 }
@@ -177,7 +185,9 @@ const SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyH
                     ...prevA,
                     props: aud,
                     premounting,
+                    postmounting,
                     audioId,
+                    audioMounted,
                 };
             }
             return prevA;
@@ -232,7 +242,7 @@ const SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyH
             }), children] }));
 };
 exports.SharedAudioContextProvider = SharedAudioContextProvider;
-const useSharedAudio = ({ aud, audioId, premounting, }) => {
+const useSharedAudio = ({ aud, audioId, premounting, postmounting, }) => {
     var _a;
     const ctx = (0, react_1.useContext)(exports.SharedAudioContext);
     /**
@@ -240,7 +250,7 @@ const useSharedAudio = ({ aud, audioId, premounting, }) => {
      */
     const [elem] = (0, react_1.useState)(() => {
         if (ctx && ctx.numberOfAudioTags > 0) {
-            return ctx.registerAudio({ aud, audioId, premounting });
+            return ctx.registerAudio({ aud, audioId, premounting, postmounting });
         }
         const el = react_1.default.createRef();
         const mediaElementSourceNode = (ctx === null || ctx === void 0 ? void 0 : ctx.audioContext)
@@ -256,6 +266,8 @@ const useSharedAudio = ({ aud, audioId, premounting, }) => {
             audioId,
             mediaElementSourceNode,
             premounting,
+            audioMounted: Boolean(el.current),
+            postmounting,
         };
     });
     /**
@@ -269,9 +281,9 @@ const useSharedAudio = ({ aud, audioId, premounting, }) => {
     if (typeof document !== 'undefined') {
         effectToUse(() => {
             if (ctx && ctx.numberOfAudioTags > 0) {
-                ctx.updateAudio({ id: elem.id, aud, audioId, premounting });
+                ctx.updateAudio({ id: elem.id, aud, audioId, premounting, postmounting });
             }
-        }, [aud, ctx, elem.id, audioId, premounting]);
+        }, [aud, ctx, elem.id, audioId, premounting, postmounting]);
         effectToUse(() => {
             return () => {
                 if (ctx && ctx.numberOfAudioTags > 0) {

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

@@ -11,6 +11,7 @@ export type DelayRenderScope = {
     };
     remotion_puppeteerTimeout: number;
     remotion_attempt: number;
+    remotion_delayRenderHandles: number[];
     remotion_cancelledError?: string;
 };
 export declare const DELAY_RENDER_CALLSTACK_TOKEN = "The delayRender was called:";
@@ -27,7 +28,7 @@ export type DelayRenderOptions = {
  * @private
  */
 export declare const delayRenderInternal: ({ scope, environment, label, options, }: {
-    scope: DelayRenderScope | undefined;
+    scope: DelayRenderScope;
     environment: RemotionEnvironment;
     label: string | null;
     options: DelayRenderOptions;
@@ -38,7 +39,7 @@ export declare const delayRender: (label?: string, options?: DelayRenderOptions)
  * @private
  */
 export declare const continueRenderInternal: ({ scope, handle, environment, logLevel, }: {
-    scope: DelayRenderScope | undefined;
+    scope: DelayRenderScope;
     handle: number;
     environment: RemotionEnvironment;
     logLevel: LogLevel;

package/dist/cjs/delay-render.js

@@ -5,12 +5,12 @@ const cancel_render_js_1 = require("./cancel-render.js");
 const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
 const log_js_1 = require("./log.js");
 const truthy_js_1 = require("./truthy.js");
-let handles = [];
 if (typeof window !== 'undefined') {
     window.remotion_renderReady = false;
     if (!window.remotion_delayRenderTimeouts) {
         window.remotion_delayRenderTimeouts = {};
     }
+    window.remotion_delayRenderHandles = [];
 }
 exports.DELAY_RENDER_CALLSTACK_TOKEN = 'The delayRender was called:';
 exports.DELAY_RENDER_RETRIES_LEFT = 'Retries left: ';
@@ -29,37 +29,31 @@ const delayRenderInternal = ({ scope, environment, label, options, }) => {
             JSON.stringify(label));
     }
     const handle = Math.random();
-    handles.push(handle);
+    scope.remotion_delayRenderHandles.push(handle);
     const called = (_b = (_a = Error().stack) === null || _a === void 0 ? void 0 : _a.replace(/^Error/g, '')) !== null && _b !== void 0 ? _b : '';
     if (environment.isRendering) {
-        const timeoutToUse = ((_c = options === null || options === void 0 ? void 0 : options.timeoutInMilliseconds) !== null && _c !== void 0 ? _c : (typeof scope === 'undefined'
-            ? defaultTimeout
-            : ((_d = scope.remotion_puppeteerTimeout) !== null && _d !== void 0 ? _d : defaultTimeout))) - 2000;
-        if (typeof scope !== 'undefined') {
-            const retriesLeft = ((_e = options === null || options === void 0 ? void 0 : options.retries) !== null && _e !== void 0 ? _e : 0) - (scope.remotion_attempt - 1);
-            scope.remotion_delayRenderTimeouts[handle] = {
-                label: label !== null && label !== void 0 ? label : null,
-                startTime: Date.now(),
-                timeout: setTimeout(() => {
-                    const message = [
-                        `A delayRender()`,
-                        label ? `"${label}"` : null,
-                        `was called but not cleared after ${timeoutToUse}ms. See https://remotion.dev/docs/timeout for help.`,
-                        retriesLeft > 0 ? exports.DELAY_RENDER_RETRIES_LEFT + retriesLeft : null,
-                        retriesLeft > 0 ? exports.DELAY_RENDER_RETRY_TOKEN : null,
-                        exports.DELAY_RENDER_CALLSTACK_TOKEN,
-                        called,
-                    ]
-                        .filter(truthy_js_1.truthy)
-                        .join(' ');
-                    (0, cancel_render_js_1.cancelRenderInternal)(scope, Error(message));
-                }, timeoutToUse),
-            };
-        }
-    }
-    if (typeof scope !== 'undefined') {
-        scope.remotion_renderReady = false;
+        const timeoutToUse = ((_d = (_c = options === null || options === void 0 ? void 0 : options.timeoutInMilliseconds) !== null && _c !== void 0 ? _c : scope.remotion_puppeteerTimeout) !== null && _d !== void 0 ? _d : defaultTimeout) - 2000;
+        const retriesLeft = ((_e = options === null || options === void 0 ? void 0 : options.retries) !== null && _e !== void 0 ? _e : 0) - (scope.remotion_attempt - 1);
+        scope.remotion_delayRenderTimeouts[handle] = {
+            label: label !== null && label !== void 0 ? label : null,
+            startTime: Date.now(),
+            timeout: setTimeout(() => {
+                const message = [
+                    `A delayRender()`,
+                    label ? `"${label}"` : null,
+                    `was called but not cleared after ${timeoutToUse}ms. See https://remotion.dev/docs/timeout for help.`,
+                    retriesLeft > 0 ? exports.DELAY_RENDER_RETRIES_LEFT + retriesLeft : null,
+                    retriesLeft > 0 ? exports.DELAY_RENDER_RETRY_TOKEN : null,
+                    exports.DELAY_RENDER_CALLSTACK_TOKEN,
+                    called,
+                ]
+                    .filter(truthy_js_1.truthy)
+                    .join(' ');
+                (0, cancel_render_js_1.cancelRenderInternal)(scope, Error(message));
+            }, timeoutToUse),
+        };
     }
+    scope.remotion_renderReady = false;
     return handle;
 };
 exports.delayRenderInternal = delayRenderInternal;
@@ -68,8 +62,11 @@ exports.delayRenderInternal = delayRenderInternal;
  * @see [Documentation](https://remotion.dev/docs/delay-render)
  */
 const delayRender = (label, options) => {
+    if (typeof window === 'undefined') {
+        return Math.random();
+    }
     return (0, exports.delayRenderInternal)({
-        scope: typeof window !== 'undefined' ? window : undefined,
+        scope: window,
         environment: (0, get_remotion_environment_js_1.getRemotionEnvironment)(),
         label: label !== null && label !== void 0 ? label : null,
         options: options !== null && options !== void 0 ? options : {},
@@ -88,7 +85,7 @@ const continueRenderInternal = ({ scope, handle, environment, logLevel, }) => {
         throw new TypeError('The parameter passed into continueRender() must be the return value of delayRender() which is a number. Got: ' +
             JSON.stringify(handle));
     }
-    handles = handles.filter((h) => {
+    scope.remotion_delayRenderHandles = scope.remotion_delayRenderHandles.filter((h) => {
         if (h === handle) {
             if (environment.isRendering && scope !== undefined) {
                 if (!scope.remotion_delayRenderTimeouts[handle]) {
@@ -110,7 +107,7 @@ const continueRenderInternal = ({ scope, handle, environment, logLevel, }) => {
         }
         return true;
     });
-    if (handles.length === 0 && typeof scope !== 'undefined') {
+    if (scope.remotion_delayRenderHandles.length === 0) {
         scope.remotion_renderReady = true;
     }
 };
@@ -121,13 +118,14 @@ exports.continueRenderInternal = continueRenderInternal;
  */
 const continueRender = (handle) => {
     var _a;
+    if (typeof window === 'undefined') {
+        return;
+    }
     (0, exports.continueRenderInternal)({
-        scope: typeof window !== 'undefined' ? window : undefined,
+        scope: window,
         handle,
         environment: (0, get_remotion_environment_js_1.getRemotionEnvironment)(),
-        logLevel: typeof window !== 'undefined'
-            ? ((_a = window.remotion_logLevel) !== null && _a !== void 0 ? _a : 'info')
-            : 'info',
+        logLevel: (_a = window.remotion_logLevel) !== null && _a !== void 0 ? _a : 'info',
     });
 };
 exports.continueRender = continueRender;

package/dist/cjs/index.d.ts

@@ -22,6 +22,7 @@ declare global {
                 startTime: number;
             };
         };
+        remotion_delayRenderHandles: number[];
         remotion_cancelledError: string | undefined;
         remotion_getCompositionNames: () => string[];
         remotion_seenCompositionIds: string[];

package/dist/cjs/internals.d.ts

@@ -129,6 +129,7 @@ export declare const Internals: {
             aud: import("react").AudioHTMLAttributes<HTMLAudioElement>;
             audioId: string;
             premounting: boolean;
+            postmounting: boolean;
         }) => {
             id: number;
             props: import("react").AudioHTMLAttributes<HTMLAudioElement>;
@@ -136,6 +137,8 @@ export declare const Internals: {
             audioId: string;
             mediaElementSourceNode: import("./audio/shared-element-source-node.js").SharedElementSourceNode | null;
             premounting: boolean;
+            postmounting: boolean;
+            audioMounted: boolean;
         };
         unregisterAudio: (id: number) => void;
         updateAudio: (options: {
@@ -143,6 +146,7 @@ export declare const Internals: {
             aud: import("react").AudioHTMLAttributes<HTMLAudioElement>;
             audioId: string;
             premounting: boolean;
+            postmounting: boolean;
         }) => void;
         playAllAudios: () => void;
         numberOfAudioTags: number;

package/dist/cjs/timeline-position-state.d.ts

@@ -1,4 +1,4 @@
-import type { MutableRefObject } from 'react';
+import type { MutableRefObject, RefObject } from 'react';
 export type PlayableMediaTag = {
     play: (reason: string) => void;
     id: string;
@@ -8,6 +8,7 @@ export declare const persistCurrentFrame: (time: CurrentTimePerComposition) => v
 export declare const getInitialFrameState: () => CurrentTimePerComposition;
 export declare const getFrameForComposition: (composition: string) => number;
 export declare const useTimelinePosition: () => number;
+export declare const useTimelineFrameRef: () => RefObject<number>;
 export declare const useTimelineSetFrame: () => ((u: React.SetStateAction<Record<string, number>>) => void);
 type PlayingReturnType = readonly [
     boolean,

package/dist/cjs/timeline-position-state.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePlayingState = exports.useTimelineSetFrame = exports.useTimelinePosition = exports.getFrameForComposition = exports.getInitialFrameState = exports.persistCurrentFrame = void 0;
+exports.usePlayingState = exports.useTimelineSetFrame = exports.useTimelineFrameRef = exports.useTimelinePosition = exports.getFrameForComposition = exports.getInitialFrameState = exports.persistCurrentFrame = void 0;
 const react_1 = require("react");
 const TimelineContext_js_1 = require("./TimelineContext.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
@@ -46,6 +46,11 @@ const useTimelinePosition = () => {
     return Math.min(videoConfig.durationInFrames - 1, unclamped);
 };
 exports.useTimelinePosition = useTimelinePosition;
+const useTimelineFrameRef = () => {
+    const { frameRef } = (0, react_1.useContext)(TimelineContext_js_1.TimelineContext);
+    return frameRef;
+};
+exports.useTimelineFrameRef = useTimelineFrameRef;
 const useTimelineSetFrame = () => {
     const { setFrame } = (0, react_1.useContext)(TimelineContext_js_1.SetTimelineContext);
     return setFrame;

package/dist/cjs/use-delay-render.js

@@ -8,20 +8,27 @@ const log_level_context_js_1 = require("./log-level-context.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 exports.DelayRenderContextType = (0, react_1.createContext)(null);
 const useDelayRender = () => {
+    var _a;
     const environment = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
-    const scope = (0, react_1.useContext)(exports.DelayRenderContextType);
+    const scope = (_a = (0, react_1.useContext)(exports.DelayRenderContextType)) !== null && _a !== void 0 ? _a : (typeof window !== 'undefined' ? window : undefined);
     const logLevel = (0, log_level_context_js_1.useLogLevel)();
     const delayRender = (0, react_1.useCallback)((label, options) => {
+        if (!scope) {
+            return Math.random();
+        }
         return (0, delay_render_js_1.delayRenderInternal)({
-            scope: scope !== null && scope !== void 0 ? scope : (typeof window !== 'undefined' ? window : undefined),
+            scope,
             environment,
             label: label !== null && label !== void 0 ? label : null,
             options: options !== null && options !== void 0 ? options : {},
         });
     }, [environment, scope]);
     const continueRender = (0, react_1.useCallback)((handle) => {
+        if (!scope) {
+            return;
+        }
         (0, delay_render_js_1.continueRenderInternal)({
-            scope: scope !== null && scope !== void 0 ? scope : (typeof window !== 'undefined' ? window : undefined),
+            scope,
             handle,
             environment,
             logLevel,

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-export declare const VERSION = "4.0.390";
+export declare const VERSION = "4.0.391";

package/dist/cjs/version.js

@@ -7,4 +7,4 @@ exports.VERSION = void 0;
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-exports.VERSION = '4.0.390';
+exports.VERSION = '4.0.391';

package/dist/esm/index.mjs

@@ -110,7 +110,7 @@ function truthy(value) {
 }
 
 // src/version.ts
-var VERSION = "4.0.390";
+var VERSION = "4.0.391";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -354,6 +354,7 @@ var exports_timeline_position_state = {};
 __export(exports_timeline_position_state, {
   useTimelineSetFrame: () => useTimelineSetFrame,
   useTimelinePosition: () => useTimelinePosition,
+  useTimelineFrameRef: () => useTimelineFrameRef,
   usePlayingState: () => usePlayingState,
   persistCurrentFrame: () => persistCurrentFrame,
   getInitialFrameState: () => getInitialFrameState,
@@ -1243,6 +1244,10 @@ var useTimelinePosition = () => {
   const unclamped = state.frame[videoConfig.id] ?? (env.isPlayer ? 0 : getFrameForComposition(videoConfig.id));
   return Math.min(videoConfig.durationInFrames - 1, unclamped);
 };
+var useTimelineFrameRef = () => {
+  const { frameRef } = useContext6(TimelineContext);
+  return frameRef;
+};
 var useTimelineSetFrame = () => {
   const { setFrame } = useContext6(SetTimelineContext);
   return setFrame;
@@ -1356,12 +1361,12 @@ var Log = {
 };
 
 // src/delay-render.ts
-var handles = [];
 if (typeof window !== "undefined") {
   window.remotion_renderReady = false;
   if (!window.remotion_delayRenderTimeouts) {
     window.remotion_delayRenderTimeouts = {};
   }
+  window.remotion_delayRenderHandles = [];
 }
 var DELAY_RENDER_CALLSTACK_TOKEN = "The delayRender was called:";
 var DELAY_RENDER_RETRIES_LEFT = "Retries left: ";
@@ -1378,38 +1383,37 @@ var delayRenderInternal = ({
     throw new Error("The label parameter of delayRender() must be a string or undefined, got: " + JSON.stringify(label));
   }
   const handle = Math.random();
-  handles.push(handle);
+  scope.remotion_delayRenderHandles.push(handle);
   const called = Error().stack?.replace(/^Error/g, "") ?? "";
   if (environment.isRendering) {
-    const timeoutToUse = (options?.timeoutInMilliseconds ?? (typeof scope === "undefined" ? defaultTimeout : scope.remotion_puppeteerTimeout ?? defaultTimeout)) - 2000;
-    if (typeof scope !== "undefined") {
-      const retriesLeft = (options?.retries ?? 0) - (scope.remotion_attempt - 1);
-      scope.remotion_delayRenderTimeouts[handle] = {
-        label: label ?? null,
-        startTime: Date.now(),
-        timeout: setTimeout(() => {
-          const message = [
-            `A delayRender()`,
-            label ? `"${label}"` : null,
-            `was called but not cleared after ${timeoutToUse}ms. See https://remotion.dev/docs/timeout for help.`,
-            retriesLeft > 0 ? DELAY_RENDER_RETRIES_LEFT + retriesLeft : null,
-            retriesLeft > 0 ? DELAY_RENDER_RETRY_TOKEN : null,
-            DELAY_RENDER_CALLSTACK_TOKEN,
-            called
-          ].filter(truthy).join(" ");
-          cancelRenderInternal(scope, Error(message));
-        }, timeoutToUse)
-      };
-    }
-  }
-  if (typeof scope !== "undefined") {
-    scope.remotion_renderReady = false;
+    const timeoutToUse = (options?.timeoutInMilliseconds ?? scope.remotion_puppeteerTimeout ?? defaultTimeout) - 2000;
+    const retriesLeft = (options?.retries ?? 0) - (scope.remotion_attempt - 1);
+    scope.remotion_delayRenderTimeouts[handle] = {
+      label: label ?? null,
+      startTime: Date.now(),
+      timeout: setTimeout(() => {
+        const message = [
+          `A delayRender()`,
+          label ? `"${label}"` : null,
+          `was called but not cleared after ${timeoutToUse}ms. See https://remotion.dev/docs/timeout for help.`,
+          retriesLeft > 0 ? DELAY_RENDER_RETRIES_LEFT + retriesLeft : null,
+          retriesLeft > 0 ? DELAY_RENDER_RETRY_TOKEN : null,
+          DELAY_RENDER_CALLSTACK_TOKEN,
+          called
+        ].filter(truthy).join(" ");
+        cancelRenderInternal(scope, Error(message));
+      }, timeoutToUse)
+    };
   }
+  scope.remotion_renderReady = false;
   return handle;
 };
 var delayRender = (label, options) => {
+  if (typeof window === "undefined") {
+    return Math.random();
+  }
   return delayRenderInternal({
-    scope: typeof window !== "undefined" ? window : undefined,
+    scope: window,
     environment: getRemotionEnvironment(),
     label: label ?? null,
     options: options ?? {}
@@ -1427,7 +1431,7 @@ var continueRenderInternal = ({
   if (typeof handle !== "number") {
     throw new TypeError("The parameter passed into continueRender() must be the return value of delayRender() which is a number. Got: " + JSON.stringify(handle));
   }
-  handles = handles.filter((h) => {
+  scope.remotion_delayRenderHandles = scope.remotion_delayRenderHandles.filter((h) => {
     if (h === handle) {
       if (environment.isRendering && scope !== undefined) {
         if (!scope.remotion_delayRenderTimeouts[handle]) {
@@ -1447,16 +1451,19 @@ var continueRenderInternal = ({
     }
     return true;
   });
-  if (handles.length === 0 && typeof scope !== "undefined") {
+  if (scope.remotion_delayRenderHandles.length === 0) {
     scope.remotion_renderReady = true;
   }
 };
 var continueRender = (handle) => {
+  if (typeof window === "undefined") {
+    return;
+  }
   continueRenderInternal({
-    scope: typeof window !== "undefined" ? window : undefined,
+    scope: window,
     handle,
     environment: getRemotionEnvironment(),
-    logLevel: typeof window !== "undefined" ? window.remotion_logLevel ?? "info" : "info"
+    logLevel: window.remotion_logLevel ?? "info"
   });
 };
 
@@ -1486,19 +1493,25 @@ var useMountTime = () => {
 var DelayRenderContextType = createContext9(null);
 var useDelayRender = () => {
   const environment = useRemotionEnvironment();
-  const scope = useContext8(DelayRenderContextType);
+  const scope = useContext8(DelayRenderContextType) ?? (typeof window !== "undefined" ? window : undefined);
   const logLevel = useLogLevel();
   const delayRender2 = useCallback4((label, options) => {
+    if (!scope) {
+      return Math.random();
+    }
     return delayRenderInternal({
-      scope: scope ?? (typeof window !== "undefined" ? window : undefined),
+      scope,
       environment,
       label: label ?? null,
       options: options ?? {}
     });
   }, [environment, scope]);
   const continueRender2 = useCallback4((handle) => {
+    if (!scope) {
+      return;
+    }
     continueRenderInternal({
-      scope: scope ?? (typeof window !== "undefined" ? window : undefined),
+      scope,
       handle,
       environment,
       logLevel
@@ -1522,6 +1535,7 @@ var SetTimelineContext = createContext10({
 });
 var TimelineContext = createContext10({
   frame: {},
+  frameRef: { current: 0 },
   playing: false,
   playbackRate: 1,
   rootId: "",
@@ -1541,6 +1555,7 @@ var TimelineContextProvider = ({ children, frameState }) => {
   const [remotionRootId] = useState5(() => String(random(null)));
   const [_frame, setFrame] = useState5(() => getInitialFrameState());
   const frame = frameState ?? _frame;
+  const frameRef = useRef2(0);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   if (typeof window !== "undefined") {
     useLayoutEffect(() => {
@@ -1576,7 +1591,8 @@ var TimelineContextProvider = ({ children, frameState }) => {
       rootId: remotionRootId,
       playbackRate,
       setPlaybackRate,
-      audioAndVideoTags
+      audioAndVideoTags,
+      frameRef
     };
   }, [frame, playbackRate, playing, remotionRootId]);
   const setTimelineContextValue = useMemo7(() => {
@@ -3196,7 +3212,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
     });
   }, [refs]);
   const registerAudio = useCallback7((options) => {
-    const { aud, audioId, premounting } = options;
+    const { aud, audioId, premounting, postmounting } = options;
     const found = audios.current?.find((a) => a.audioId === audioId);
     if (found) {
       return found;
@@ -3215,7 +3231,9 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
       el: ref,
       audioId,
       mediaElementSourceNode,
-      premounting
+      premounting,
+      audioMounted: Boolean(ref.current),
+      postmounting
     };
     audios.current?.push(newElem);
     rerenderAudios();
@@ -3236,12 +3254,17 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
     aud,
     audioId,
     id,
-    premounting
+    premounting,
+    postmounting
   }) => {
     let changed = false;
     audios.current = audios.current?.map((prevA) => {
+      const audioMounted = Boolean(prevA.el.current);
+      if (prevA.audioMounted !== audioMounted) {
+        changed = true;
+      }
       if (prevA.id === id) {
-        const isTheSame = compareProps(aud, prevA.props) && prevA.premounting === premounting;
+        const isTheSame = compareProps(aud, prevA.props) && prevA.premounting === premounting && prevA.postmounting === postmounting;
         if (isTheSame) {
           return prevA;
         }
@@ -3250,7 +3273,9 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
           ...prevA,
           props: aud,
           premounting,
-          audioId
+          postmounting,
+          audioId,
+          audioMounted
         };
       }
       return prevA;
@@ -3313,12 +3338,13 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
 var useSharedAudio = ({
   aud,
   audioId,
-  premounting
+  premounting,
+  postmounting
 }) => {
   const ctx = useContext16(SharedAudioContext);
   const [elem] = useState11(() => {
     if (ctx && ctx.numberOfAudioTags > 0) {
-      return ctx.registerAudio({ aud, audioId, premounting });
+      return ctx.registerAudio({ aud, audioId, premounting, postmounting });
     }
     const el = React15.createRef();
     const mediaElementSourceNode = ctx?.audioContext ? makeSharedElementSourceNode({
@@ -3331,16 +3357,18 @@ var useSharedAudio = ({
       props: aud,
       audioId,
       mediaElementSourceNode,
-      premounting
+      premounting,
+      audioMounted: Boolean(el.current),
+      postmounting
     };
   });
   const effectToUse = React15.useInsertionEffect ?? React15.useLayoutEffect;
   if (typeof document !== "undefined") {
     effectToUse(() => {
       if (ctx && ctx.numberOfAudioTags > 0) {
-        ctx.updateAudio({ id: elem.id, aud, audioId, premounting });
+        ctx.updateAudio({ id: elem.id, aud, audioId, premounting, postmounting });
       }
-    }, [aud, ctx, elem.id, audioId, premounting]);
+    }, [aud, ctx, elem.id, audioId, premounting, postmounting]);
     effectToUse(() => {
       return () => {
         if (ctx && ctx.numberOfAudioTags > 0) {
@@ -4812,7 +4840,8 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   const { el: audioRef, mediaElementSourceNode } = useSharedAudio({
     aud: propsToPass,
     audioId: id,
-    premounting: Boolean(sequenceContext?.premounting)
+    premounting: Boolean(sequenceContext?.premounting),
+    postmounting: Boolean(sequenceContext?.postmounting)
   });
   useMediaInTimeline({
     volume,

package/dist/esm/no-react.mjs

@@ -142,6 +142,7 @@ if (typeof window !== "undefined") {
   if (!window.remotion_delayRenderTimeouts) {
     window.remotion_delayRenderTimeouts = {};
   }
+  window.remotion_delayRenderHandles = [];
 }
 var DELAY_RENDER_CALLSTACK_TOKEN = "The delayRender was called:";
 var DELAY_RENDER_RETRIES_LEFT = "Retries left: ";

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.390";
+var VERSION = "4.0.391";
 export {
   VERSION
 };

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/core"
 	},
 	"name": "remotion",
-	"version": "4.0.390",
+	"version": "4.0.391",
 	"description": "Make videos programmatically",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -34,7 +34,7 @@
 		"react-dom": "19.2.3",
 		"webpack": "5.96.1",
 		"zod": "3.22.3",
-		"@remotion/eslint-config-internal": "4.0.390",
+		"@remotion/eslint-config-internal": "4.0.391",
 		"eslint": "9.19.0"
 	},
 	"keywords": [