remotion 4.0.404 → 4.0.406

package/dist/cjs/audio/AudioForPreview.js

@@ -1,8 +1,41 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AudioForPreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const SequenceContext_js_1 = require("../SequenceContext.js");
 const SequenceManager_js_1 = require("../SequenceManager.js");
 const get_cross_origin_value_js_1 = require("../get-cross-origin-value.js");
@@ -19,7 +52,7 @@ const volume_safeguard_js_1 = require("../volume-safeguard.js");
 const shared_audio_tags_js_1 = require("./shared-audio-tags.js");
 const use_audio_frame_js_1 = require("./use-audio-frame.js");
 const AudioForDevelopmentForwardRefFunction = (props, ref) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const [initialShouldPreMountAudioElements] = (0, react_1.useState)(props.shouldPreMountAudioTags);
     if (props.shouldPreMountAudioTags !== initialShouldPreMountAudioElements) {
         throw new Error('Cannot change the behavior for pre-mounting audio tags dynamically.');
@@ -82,7 +115,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         props.muted,
         props.loop,
     ]);
-    const { el: audioRef, mediaElementSourceNode } = (0, shared_audio_tags_js_1.useSharedAudio)({
+    const { el: audioRef, mediaElementSourceNode, cleanupOnMediaTagUnmount, } = (0, shared_audio_tags_js_1.useSharedAudio)({
         aud: propsToPass,
         audioId: id,
         premounting: Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting),
@@ -131,6 +164,25 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         volume: userPreferredVolume,
         shouldUseWebAudioApi: useWebAudioApi !== null && useWebAudioApi !== void 0 ? useWebAudioApi : false,
     });
+    /**
+     * Effects in React 18 fire twice, and we are looking for a way to only fire it once.
+     * - useInsertionEffect only fires once. If it's available we are in React 18.
+     * - useLayoutEffect only fires once in React 17.
+     *
+     * Need to import it from React to fix React 17 ESM support.
+     */
+    const effectToUse = (_d = react_1.default.useInsertionEffect) !== null && _d !== void 0 ? _d : react_1.default.useLayoutEffect;
+    // Disconnecting the SharedElementSourceNodes if the Audio tag unmounts to prevent leak.
+    // https://github.com/remotion-dev/remotion/issues/6285
+    // But useInsertionEffect will fire before other effects, meaning the
+    // nodes might still be used. Using rAF to ensure it's after other effects.
+    effectToUse(() => {
+        return () => {
+            requestAnimationFrame(() => {
+                cleanupOnMediaTagUnmount();
+            });
+        };
+    }, [cleanupOnMediaTagUnmount]);
     (0, react_1.useImperativeHandle)(ref, () => {
         return audioRef.current;
     }, [audioRef]);

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

@@ -21,6 +21,7 @@ type AudioElem = {
     premounting: boolean;
     postmounting: boolean;
     audioMounted: boolean;
+    cleanupOnMediaTagUnmount: () => void;
 };
 type SharedContext = {
     registerAudio: (options: {

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

@@ -75,6 +75,7 @@ const didPropChange = (key, newProp, prevProp) => {
 };
 exports.SharedAudioContext = (0, react_1.createContext)(null);
 const SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHint, audioEnabled }) => {
+    var _a;
     const audios = (0, react_1.useRef)([]);
     const [initialNumberOfAudioTags] = (0, react_1.useState)(numberOfAudioTags);
     if (numberOfAudioTags !== initialNumberOfAudioTags) {
@@ -101,6 +102,27 @@ const SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyH
             };
         });
     }, [audioContext, numberOfAudioTags]);
+    /**
+     * Effects in React 18 fire twice, and we are looking for a way to only fire it once.
+     * - useInsertionEffect only fires once. If it's available we are in React 18.
+     * - useLayoutEffect only fires once in React 17.
+     *
+     * Need to import it from React to fix React 17 ESM support.
+     */
+    const effectToUse = (_a = react_1.default.useInsertionEffect) !== null && _a !== void 0 ? _a : react_1.default.useLayoutEffect;
+    // Disconnecting the SharedElementSourceNodes if the Player unmounts to prevent leak.
+    // https://github.com/remotion-dev/remotion/issues/6285
+    // But useInsertionEffect will fire before other effects, meaning the
+    // nodes might still be used. Using rAF to ensure it's after other effects.
+    effectToUse(() => {
+        return () => {
+            requestAnimationFrame(() => {
+                refs.forEach(({ mediaElementSourceNode }) => {
+                    mediaElementSourceNode === null || mediaElementSourceNode === void 0 ? void 0 : mediaElementSourceNode.cleanup();
+                });
+            });
+        };
+    }, [refs]);
     const takenAudios = (0, react_1.useRef)(new Array(numberOfAudioTags).fill(false));
     const rerenderAudios = (0, react_1.useCallback)(() => {
         refs.forEach(({ ref, id }) => {
@@ -152,6 +174,9 @@ const SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyH
             premounting,
             audioMounted: Boolean(ref.current),
             postmounting,
+            cleanupOnMediaTagUnmount: () => {
+                // Don't disconnect here, only when the Player unmounts.
+            },
         };
         (_b = audios.current) === null || _b === void 0 ? void 0 : _b.push(newElem);
         rerenderAudios();
@@ -256,6 +281,7 @@ const useSharedAudio = ({ aud, audioId, premounting, postmounting, }) => {
         if (ctx && ctx.numberOfAudioTags > 0) {
             return ctx.registerAudio({ aud, audioId, premounting, postmounting });
         }
+        // numberOfSharedAudioTags is 0
         const el = react_1.default.createRef();
         const mediaElementSourceNode = (ctx === null || ctx === void 0 ? void 0 : ctx.audioContext)
             ? (0, shared_element_source_node_js_1.makeSharedElementSourceNode)({
@@ -272,6 +298,9 @@ const useSharedAudio = ({ aud, audioId, premounting, postmounting, }) => {
             premounting,
             audioMounted: Boolean(el.current),
             postmounting,
+            cleanupOnMediaTagUnmount: () => {
+                mediaElementSourceNode === null || mediaElementSourceNode === void 0 ? void 0 : mediaElementSourceNode.cleanup();
+            },
         };
     });
     /**

package/dist/cjs/audio/shared-element-source-node.d.ts

@@ -4,5 +4,6 @@ export declare const makeSharedElementSourceNode: ({ audioContext, ref, }: {
 }) => {
     attemptToConnect: () => void;
     get: () => MediaElementAudioSourceNode;
+    cleanup: () => void;
 };
 export type SharedElementSourceNode = ReturnType<typeof makeSharedElementSourceNode>;

package/dist/cjs/audio/shared-element-source-node.js

@@ -3,8 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeSharedElementSourceNode = void 0;
 const makeSharedElementSourceNode = ({ audioContext, ref, }) => {
     let connected = null;
+    let disposed = false;
+    // We must allow this to cleanup and create a new one due to strict mode.
     return {
         attemptToConnect: () => {
+            if (disposed) {
+                throw new Error('SharedElementSourceNode has been disposed');
+            }
             if (!connected && ref.current) {
                 const mediaElementSourceNode = audioContext.createMediaElementSource(ref.current);
                 connected = mediaElementSourceNode;
@@ -16,6 +21,13 @@ const makeSharedElementSourceNode = ({ audioContext, ref, }) => {
             }
             return connected;
         },
+        cleanup: () => {
+            if (connected) {
+                connected.disconnect();
+                connected = null;
+            }
+            disposed = true;
+        },
     };
 };
 exports.makeSharedElementSourceNode = makeSharedElementSourceNode;

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

@@ -1,4 +1,5 @@
 import type { DelayRenderScope } from './delay-render.js';
+export declare const getErrorStackWithMessage: (error: Error) => string;
 /**
  * Internal function that accepts scope as parameter.
  * This allows useDelayRender to control its own scope source.

package/dist/cjs/cancel-render.js

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getErrorStackWithMessage = void 0;
 exports.cancelRenderInternal = cancelRenderInternal;
 exports.cancelRender = cancelRender;
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/stack
+const getErrorStackWithMessage = (error) => {
+    var _a;
+    const stack = (_a = error.stack) !== null && _a !== void 0 ? _a : '';
+    return stack.startsWith('Error:') ? stack : `${error.message}\n${stack}`;
+};
+exports.getErrorStackWithMessage = getErrorStackWithMessage;
 const isErrorLike = (err) => {
     if (err instanceof Error) {
         return true;
@@ -50,7 +58,7 @@ function cancelRenderInternal(scope, err) {
         error = Error('Rendering was cancelled');
     }
     if (scope) {
-        scope.remotion_cancelledError = error.stack;
+        scope.remotion_cancelledError = (0, exports.getErrorStackWithMessage)(error);
     }
     throw error;
 }

package/dist/cjs/delay-render.js

@@ -49,7 +49,13 @@ const delayRenderInternal = ({ scope, environment, label, options, }) => {
                 ]
                     .filter(truthy_js_1.truthy)
                     .join(' ');
-                (0, cancel_render_js_1.cancelRenderInternal)(scope, Error(message));
+                // in client-side rendering, don't throw (would be uncaught from setTimeout)
+                if (environment.isClientSideRendering) {
+                    scope.remotion_cancelledError = (0, cancel_render_js_1.getErrorStackWithMessage)(Error(message));
+                }
+                else {
+                    (0, cancel_render_js_1.cancelRenderInternal)(scope, Error(message));
+                }
             }, timeoutToUse),
         };
     }

package/dist/cjs/internals.d.ts

@@ -139,6 +139,7 @@ export declare const Internals: {
             premounting: boolean;
             postmounting: boolean;
             audioMounted: boolean;
+            cleanupOnMediaTagUnmount: () => void;
         };
         unregisterAudio: (id: number) => void;
         updateAudio: (options: {

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.404";
+export declare const VERSION = "4.0.406";

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.404';
+exports.VERSION = '4.0.406';

package/dist/cjs/video/VideoForPreview.js

@@ -1,8 +1,41 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VideoForPreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const SequenceContext_js_1 = require("../SequenceContext.js");
 const SequenceManager_js_1 = require("../SequenceManager.js");
 const shared_audio_tags_js_1 = require("../audio/shared-audio-tags.js");
@@ -24,7 +57,7 @@ const volume_safeguard_js_1 = require("../volume-safeguard.js");
 const emit_video_frame_js_1 = require("./emit-video-frame.js");
 const video_fragment_js_1 = require("./video-fragment.js");
 const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     const context = (0, react_1.useContext)(shared_audio_tags_js_1.SharedAudioContext);
     if (!context) {
         throw new Error('SharedAudioContext not found');
@@ -39,6 +72,25 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
             ref: videoRef,
         });
     }, [context.audioContext]);
+    /**
+     * Effects in React 18 fire twice, and we are looking for a way to only fire it once.
+     * - useInsertionEffect only fires once. If it's available we are in React 18.
+     * - useLayoutEffect only fires once in React 17.
+     *
+     * Need to import it from React to fix React 17 ESM support.
+     */
+    const effectToUse = (_a = react_1.default.useInsertionEffect) !== null && _a !== void 0 ? _a : react_1.default.useLayoutEffect;
+    // Disconnecting the SharedElementSourceNodes if the tag unmounts to prevent leak.
+    // https://github.com/remotion-dev/remotion/issues/6285
+    // But useInsertionEffect will fire before other effects, meaning the
+    // nodes might still be used. Using rAF to ensure it's after other effects.
+    effectToUse(() => {
+        return () => {
+            requestAnimationFrame(() => {
+                sharedSource === null || sharedSource === void 0 ? void 0 : sharedSource.cleanup();
+            });
+        };
+    }, [sharedSource]);
     const { volume, muted, playbackRate, onlyWarnForMediaSeekingError, src, onDuration, 
     // @ts-expect-error
     acceptableTimeShift, acceptableTimeShiftInSeconds, toneFrequency, name, _remotionInternalNativeLoopPassed, _remotionInternalStack, style, pauseWhenBuffering, showInTimeline, loopVolumeCurveBehavior, onError, onAutoPlayError, onVideoFrame, crossOrigin, delayRenderRetries, delayRenderTimeoutInMilliseconds, allowAmplificationDuringRender, useWebAudioApi, audioStreamIndex, ...nativeProps } = props;
@@ -53,7 +105,7 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
     const logLevel = (0, log_level_context_js_1.useLogLevel)();
     const mountTime = (0, log_level_context_js_1.useMountTime)();
     const [timelineId] = (0, react_1.useState)(() => String(Math.random()));
-    const isSequenceHidden = (_a = hidden[timelineId]) !== null && _a !== void 0 ? _a : false;
+    const isSequenceHidden = (_b = hidden[timelineId]) !== null && _b !== void 0 ? _b : false;
     if (typeof acceptableTimeShift !== 'undefined') {
         throw new Error('acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.');
     }
@@ -70,13 +122,13 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         mediaVolume,
         mediaType: 'video',
         src,
-        playbackRate: (_b = props.playbackRate) !== null && _b !== void 0 ? _b : 1,
+        playbackRate: (_c = props.playbackRate) !== null && _c !== void 0 ? _c : 1,
         displayName: name !== null && name !== void 0 ? name : null,
         id: timelineId,
         stack: _remotionInternalStack,
         showInTimeline,
-        premountDisplay: (_c = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.premountDisplay) !== null && _c !== void 0 ? _c : null,
-        postmountDisplay: (_d = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.postmountDisplay) !== null && _d !== void 0 ? _d : null,
+        premountDisplay: (_d = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.premountDisplay) !== null && _d !== void 0 ? _d : null,
+        postmountDisplay: (_e = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.postmountDisplay) !== null && _e !== void 0 ? _e : null,
         loopDisplay: undefined,
     });
     // putting playback before useVolume
@@ -85,7 +137,7 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         mediaRef: videoRef,
         src,
         mediaType: 'video',
-        playbackRate: (_e = props.playbackRate) !== null && _e !== void 0 ? _e : 1,
+        playbackRate: (_f = props.playbackRate) !== null && _f !== void 0 ? _f : 1,
         onlyWarnForMediaSeekingError,
         acceptableTimeshift: acceptableTimeShiftInSeconds !== null && acceptableTimeShiftInSeconds !== void 0 ? acceptableTimeShiftInSeconds : null,
         isPremounting: Boolean(parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.premounting),

package/dist/esm/index.mjs

@@ -110,7 +110,7 @@ function truthy(value) {
 }
 
 // src/version.ts
-var VERSION = "4.0.404";
+var VERSION = "4.0.406";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -1257,6 +1257,11 @@ var usePlayingState = () => {
 import { createContext as createContext9, useCallback as useCallback4, useContext as useContext8 } from "react";
 
 // src/cancel-render.ts
+var getErrorStackWithMessage = (error) => {
+  const stack = error.stack ?? "";
+  return stack.startsWith("Error:") ? stack : `${error.message}
+${stack}`;
+};
 var isErrorLike = (err) => {
   if (err instanceof Error) {
     return true;
@@ -1294,7 +1299,7 @@ function cancelRenderInternal(scope, err) {
     error = Error("Rendering was cancelled");
   }
   if (scope) {
-    scope.remotion_cancelledError = error.stack;
+    scope.remotion_cancelledError = getErrorStackWithMessage(error);
   }
   throw error;
 }
@@ -1396,7 +1401,11 @@ var delayRenderInternal = ({
           DELAY_RENDER_CALLSTACK_TOKEN,
           called
         ].filter(truthy).join(" ");
-        cancelRenderInternal(scope, Error(message));
+        if (environment.isClientSideRendering) {
+          scope.remotion_cancelledError = getErrorStackWithMessage(Error(message));
+        } else {
+          cancelRenderInternal(scope, Error(message));
+        }
       }, timeoutToUse)
     };
   }
@@ -2979,7 +2988,7 @@ var DurationsContextProvider = ({ children }) => {
 };
 
 // src/audio/AudioForPreview.tsx
-import {
+import React18, {
   forwardRef as forwardRef4,
   useContext as useContext25,
   useEffect as useEffect12,
@@ -3089,8 +3098,12 @@ var makeSharedElementSourceNode = ({
   ref
 }) => {
   let connected = null;
+  let disposed = false;
   return {
     attemptToConnect: () => {
+      if (disposed) {
+        throw new Error("SharedElementSourceNode has been disposed");
+      }
       if (!connected && ref.current) {
         const mediaElementSourceNode = audioContext.createMediaElementSource(ref.current);
         connected = mediaElementSourceNode;
@@ -3101,6 +3114,13 @@ var makeSharedElementSourceNode = ({
         throw new Error("Audio element not connected");
       }
       return connected;
+    },
+    cleanup: () => {
+      if (connected) {
+        connected.disconnect();
+        connected = null;
+      }
+      disposed = true;
     }
   };
 };
@@ -3196,6 +3216,16 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
       };
     });
   }, [audioContext, numberOfAudioTags]);
+  const effectToUse = React15.useInsertionEffect ?? React15.useLayoutEffect;
+  effectToUse(() => {
+    return () => {
+      requestAnimationFrame(() => {
+        refs.forEach(({ mediaElementSourceNode }) => {
+          mediaElementSourceNode?.cleanup();
+        });
+      });
+    };
+  }, [refs]);
   const takenAudios = useRef6(new Array(numberOfAudioTags).fill(false));
   const rerenderAudios = useCallback7(() => {
     refs.forEach(({ ref, id }) => {
@@ -3240,7 +3270,8 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
       mediaElementSourceNode,
       premounting,
       audioMounted: Boolean(ref.current),
-      postmounting
+      postmounting,
+      cleanupOnMediaTagUnmount: () => {}
     };
     audios.current?.push(newElem);
     rerenderAudios();
@@ -3366,7 +3397,10 @@ var useSharedAudio = ({
       mediaElementSourceNode,
       premounting,
       audioMounted: Boolean(el.current),
-      postmounting
+      postmounting,
+      cleanupOnMediaTagUnmount: () => {
+        mediaElementSourceNode?.cleanup();
+      }
     };
   });
   const effectToUse = React15.useInsertionEffect ?? React15.useLayoutEffect;
@@ -4856,7 +4890,11 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     props.muted,
     props.loop
   ]);
-  const { el: audioRef, mediaElementSourceNode } = useSharedAudio({
+  const {
+    el: audioRef,
+    mediaElementSourceNode,
+    cleanupOnMediaTagUnmount
+  } = useSharedAudio({
     aud: propsToPass,
     audioId: id,
     premounting: Boolean(sequenceContext?.premounting),
@@ -4903,6 +4941,14 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     volume: userPreferredVolume,
     shouldUseWebAudioApi: useWebAudioApi ?? false
   });
+  const effectToUse = React18.useInsertionEffect ?? React18.useLayoutEffect;
+  effectToUse(() => {
+    return () => {
+      requestAnimationFrame(() => {
+        cleanupOnMediaTagUnmount();
+      });
+    };
+  }, [cleanupOnMediaTagUnmount]);
   useImperativeHandle6(ref, () => {
     return audioRef.current;
   }, [audioRef]);
@@ -6571,7 +6617,7 @@ var OffthreadVideoForRendering = ({
 };
 
 // src/video/VideoForPreview.tsx
-import {
+import React30, {
   forwardRef as forwardRef9,
   useContext as useContext33,
   useEffect as useEffect19,
@@ -6627,6 +6673,14 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       ref: videoRef
     });
   }, [context.audioContext]);
+  const effectToUse = React30.useInsertionEffect ?? React30.useLayoutEffect;
+  effectToUse(() => {
+    return () => {
+      requestAnimationFrame(() => {
+        sharedSource?.cleanup();
+      });
+    };
+  }, [sharedSource]);
   const {
     volume,
     muted,

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.404";
+var VERSION = "4.0.406";
 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.404",
+	"version": "4.0.406",
 	"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.404",
+		"@remotion/eslint-config-internal": "4.0.406",
 		"eslint": "9.19.0"
 	},
 	"keywords": [