remotion 4.0.243 → 4.0.244

package/dist/cjs/audio/AudioForPreview.js

@@ -9,7 +9,6 @@ const prefetch_js_1 = require("../prefetch.js");
 const random_js_1 = require("../random.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_volume_js_1 = require("../use-media-tag-volume.js");
 const use_sync_volume_with_media_tag_js_1 = require("../use-sync-volume-with-media-tag.js");
 const volume_position_state_js_1 = require("../volume-position-state.js");
 const volume_prop_js_1 = require("../volume-prop.js");
@@ -66,10 +65,8 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         props.loop,
     ]);
     const audioRef = (0, shared_audio_tags_js_1.useSharedAudio)(propsToPass, id).el;
-    const actualVolume = (0, use_media_tag_volume_js_1.useMediaTagVolume)(audioRef);
     (0, use_sync_volume_with_media_tag_js_1.useSyncVolumeWithMediaTag)({
         volumePropFrame,
-        actualVolume,
         volume,
         mediaVolume,
         mediaRef: audioRef,

package/dist/cjs/use-sync-volume-with-media-tag.d.ts

@@ -2,9 +2,8 @@ import type { RefObject } from 'react';
 import type { VolumeProp } from './volume-prop.js';
 export type UseSyncVolumeWithMediaTagOptions = {
     volumePropFrame: number;
-    actualVolume: number;
     volume?: VolumeProp;
     mediaVolume: number;
     mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement | null>;
 };
-export declare const useSyncVolumeWithMediaTag: ({ volumePropFrame, actualVolume, volume, mediaVolume, mediaRef, }: UseSyncVolumeWithMediaTagOptions) => void;
+export declare const useSyncVolumeWithMediaTag: ({ volumePropFrame, volume, mediaVolume, mediaRef, }: UseSyncVolumeWithMediaTagOptions) => void;

package/dist/cjs/use-sync-volume-with-media-tag.js

@@ -4,18 +4,36 @@ exports.useSyncVolumeWithMediaTag = void 0;
 const react_1 = require("react");
 const is_approximately_the_same_js_1 = require("./is-approximately-the-same.js");
 const volume_prop_js_1 = require("./volume-prop.js");
-const useSyncVolumeWithMediaTag = ({ volumePropFrame, actualVolume, volume, mediaVolume, mediaRef, }) => {
-    (0, react_1.useEffect)(() => {
+const useSyncVolumeWithMediaTag = ({ volumePropFrame, volume, mediaVolume, mediaRef, }) => {
+    const adjustVolume = (0, react_1.useCallback)(() => {
+        if (!mediaRef.current) {
+            return;
+        }
         const userPreferredVolume = (0, volume_prop_js_1.evaluateVolume)({
             frame: volumePropFrame,
             volume,
             mediaVolume,
             allowAmplificationDuringRender: false,
         });
-        if (!(0, is_approximately_the_same_js_1.isApproximatelyTheSame)(userPreferredVolume, actualVolume) &&
-            mediaRef.current) {
+        if (!(0, is_approximately_the_same_js_1.isApproximatelyTheSame)(userPreferredVolume, mediaRef.current.volume)) {
             mediaRef.current.volume = userPreferredVolume;
         }
-    }, [actualVolume, volumePropFrame, mediaRef, volume, mediaVolume]);
+    }, [mediaRef, mediaVolume, volume, volumePropFrame]);
+    (0, react_1.useEffect)(() => {
+        adjustVolume();
+    }, [adjustVolume]);
+    (0, react_1.useEffect)(() => {
+        const media = mediaRef.current;
+        if (!media) {
+            return;
+        }
+        const handleVolumeChange = () => {
+            adjustVolume();
+        };
+        media.addEventListener('volumechange', handleVolumeChange);
+        return () => {
+            media.removeEventListener('volumechange', handleVolumeChange);
+        };
+    }, [adjustVolume, mediaRef]);
 };
 exports.useSyncVolumeWithMediaTag = useSyncVolumeWithMediaTag;

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

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.243';
+exports.VERSION = '4.0.244';

package/dist/cjs/video/VideoForPreview.js

@@ -9,7 +9,6 @@ const use_audio_frame_js_1 = require("../audio/use-audio-frame.js");
 const prefetch_js_1 = require("../prefetch.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_volume_js_1 = require("../use-media-tag-volume.js");
 const use_sync_volume_with_media_tag_js_1 = require("../use-sync-volume-with-media-tag.js");
 const use_video_config_js_1 = require("../use-video-config.js");
 const volume_position_state_js_1 = require("../volume-position-state.js");
@@ -30,7 +29,6 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
     if (typeof acceptableTimeShift !== 'undefined') {
         throw new Error('acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.');
     }
-    const actualVolume = (0, use_media_tag_volume_js_1.useMediaTagVolume)(videoRef);
     const [mediaVolume] = (0, volume_position_state_js_1.useMediaVolumeState)();
     const [mediaMuted] = (0, volume_position_state_js_1.useMediaMutedState)();
     (0, use_media_in_timeline_js_1.useMediaInTimeline)({
@@ -50,7 +48,6 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
     });
     (0, use_sync_volume_with_media_tag_js_1.useSyncVolumeWithMediaTag)({
         volumePropFrame,
-        actualVolume,
         volume,
         mediaVolume,
         mediaRef: videoRef,

package/dist/esm/index.mjs

@@ -104,7 +104,7 @@ function truthy(value) {
 }
 
 // src/version.ts
-var VERSION = "4.0.243";
+var VERSION = "4.0.244";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -1601,7 +1601,7 @@ var Artifact = ({ filename, content }) => {
   return null;
 };
 // src/audio/Audio.tsx
-import { forwardRef as forwardRef5, useCallback as useCallback9, useContext as useContext21 } from "react";
+import { forwardRef as forwardRef5, useCallback as useCallback10, useContext as useContext21 } from "react";
 
 // src/absolute-src.ts
 var getAbsoluteSrc = (relativeSrc) => {
@@ -1993,11 +1993,11 @@ var DurationsContextProvider = ({ children }) => {
 import {
   forwardRef as forwardRef3,
   useContext as useContext19,
-  useEffect as useEffect14,
+  useEffect as useEffect13,
   useImperativeHandle as useImperativeHandle3,
   useMemo as useMemo19,
   useRef as useRef8,
-  useState as useState13
+  useState as useState12
 } from "react";
 
 // src/random.ts
@@ -3032,35 +3032,8 @@ var useMediaPlayback = ({
   ]);
 };
 
-// src/use-media-tag-volume.ts
-import { useEffect as useEffect11, useState as useState11 } from "react";
-var useMediaTagVolume = (mediaRef) => {
-  const [actualVolume, setActualVolume] = useState11(1);
-  useEffect11(() => {
-    const ref = mediaRef.current;
-    if (!ref) {
-      return;
-    }
-    const onChange = () => {
-      setActualVolume(ref.volume);
-    };
-    ref.addEventListener("volumechange", onChange);
-    return () => ref.removeEventListener("volumechange", onChange);
-  }, [mediaRef]);
-  useEffect11(() => {
-    const ref = mediaRef.current;
-    if (!ref) {
-      return;
-    }
-    if (ref.volume !== actualVolume) {
-      setActualVolume(ref.volume);
-    }
-  }, [actualVolume, mediaRef]);
-  return actualVolume;
-};
-
 // src/use-sync-volume-with-media-tag.ts
-import { useEffect as useEffect12 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect11 } from "react";
 
 // src/is-approximately-the-same.ts
 var FLOATING_POINT_ERROR_THRESHOLD = 0.00001;
@@ -3071,22 +3044,40 @@ var isApproximatelyTheSame = (num1, num2) => {
 // src/use-sync-volume-with-media-tag.ts
 var useSyncVolumeWithMediaTag = ({
   volumePropFrame,
-  actualVolume,
   volume,
   mediaVolume,
   mediaRef
 }) => {
-  useEffect12(() => {
+  const adjustVolume = useCallback8(() => {
+    if (!mediaRef.current) {
+      return;
+    }
     const userPreferredVolume = evaluateVolume({
       frame: volumePropFrame,
       volume,
       mediaVolume,
       allowAmplificationDuringRender: false
     });
-    if (!isApproximatelyTheSame(userPreferredVolume, actualVolume) && mediaRef.current) {
+    if (!isApproximatelyTheSame(userPreferredVolume, mediaRef.current.volume)) {
       mediaRef.current.volume = userPreferredVolume;
     }
-  }, [actualVolume, volumePropFrame, mediaRef, volume, mediaVolume]);
+  }, [mediaRef, mediaVolume, volume, volumePropFrame]);
+  useEffect11(() => {
+    adjustVolume();
+  }, [adjustVolume]);
+  useEffect11(() => {
+    const media = mediaRef.current;
+    if (!media) {
+      return;
+    }
+    const handleVolumeChange = () => {
+      adjustVolume();
+    };
+    media.addEventListener("volumechange", handleVolumeChange);
+    return () => {
+      media.removeEventListener("volumechange", handleVolumeChange);
+    };
+  }, [adjustVolume, mediaRef]);
 };
 
 // src/volume-position-state.ts
@@ -3122,12 +3113,12 @@ var useMediaMutedState = () => {
 import React12, {
   createContext as createContext15,
   createRef as createRef2,
-  useCallback as useCallback8,
+  useCallback as useCallback9,
   useContext as useContext18,
-  useEffect as useEffect13,
+  useEffect as useEffect12,
   useMemo as useMemo18,
   useRef as useRef7,
-  useState as useState12
+  useState as useState11
 } from "react";
 import { jsx as jsx14, jsxs } from "react/jsx-runtime";
 var EMPTY_AUDIO = "data:audio/mp3;base64,/+MYxAAJcAV8AAgAABn//////+/gQ5BAMA+D4Pg+BAQBAEAwD4Pg+D4EBAEAQDAPg++hYBH///hUFQVBUFREDQNHmf///////+MYxBUGkAGIMAAAAP/29Xt6lUxBTUUzLjEwMFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV/+MYxDUAAANIAAAAAFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV";
@@ -3159,7 +3150,7 @@ var didPropChange = (key, newProp, prevProp) => {
 var SharedAudioContext = createContext15(null);
 var SharedAudioContextProvider = ({ children, numberOfAudioTags, component }) => {
   const audios = useRef7([]);
-  const [initialNumberOfAudioTags] = useState12(numberOfAudioTags);
+  const [initialNumberOfAudioTags] = useState11(numberOfAudioTags);
   if (numberOfAudioTags !== initialNumberOfAudioTags) {
     throw new Error("The number of shared audio tags has changed dynamically. Once you have set this property, you cannot change it afterwards.");
   }
@@ -3169,7 +3160,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, component }) =>
     });
   }, [numberOfAudioTags]);
   const takenAudios = useRef7(new Array(numberOfAudioTags).fill(false));
-  const rerenderAudios = useCallback8(() => {
+  const rerenderAudios = useCallback9(() => {
     refs.forEach(({ ref, id }) => {
       const data = audios.current?.find((a) => a.id === id);
       const { current } = ref;
@@ -3190,7 +3181,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, component }) =>
       });
     });
   }, [refs]);
-  const registerAudio = useCallback8((aud, audioId) => {
+  const registerAudio = useCallback9((aud, audioId) => {
     const found = audios.current?.find((a) => a.audioId === audioId);
     if (found) {
       return found;
@@ -3213,7 +3204,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, component }) =>
     rerenderAudios();
     return newElem;
   }, [numberOfAudioTags, refs, rerenderAudios]);
-  const unregisterAudio = useCallback8((id) => {
+  const unregisterAudio = useCallback9((id) => {
     const cloned = [...takenAudios.current];
     const index = refs.findIndex((r) => r.id === id);
     if (index === -1) {
@@ -3224,7 +3215,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, component }) =>
     audios.current = audios.current?.filter((a) => a.id !== id);
     rerenderAudios();
   }, [refs, rerenderAudios]);
-  const updateAudio = useCallback8(({
+  const updateAudio = useCallback9(({
     aud,
     audioId,
     id
@@ -3249,7 +3240,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, component }) =>
       rerenderAudios();
     }
   }, [rerenderAudios]);
-  const playAllAudios = useCallback8(() => {
+  const playAllAudios = useCallback9(() => {
     refs.forEach((ref) => {
       playAndHandleNotAllowedError(ref.ref, "audio", null);
     });
@@ -3269,12 +3260,12 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, component }) =>
     unregisterAudio,
     updateAudio
   ]);
-  const resetAudio = useCallback8(() => {
+  const resetAudio = useCallback9(() => {
     takenAudios.current = new Array(numberOfAudioTags).fill(false);
     audios.current = [];
     rerenderAudios();
   }, [numberOfAudioTags, rerenderAudios]);
-  useEffect13(() => {
+  useEffect12(() => {
     return () => {
       resetAudio();
     };
@@ -3295,7 +3286,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, component }) =>
 };
 var useSharedAudio = (aud, audioId) => {
   const ctx = useContext18(SharedAudioContext);
-  const [elem] = useState12(() => {
+  const [elem] = useState11(() => {
     if (ctx && ctx.numberOfAudioTags > 0) {
       return ctx.registerAudio(aud, audioId);
     }
@@ -3327,7 +3318,7 @@ var useSharedAudio = (aud, audioId) => {
 // src/audio/AudioForPreview.tsx
 import { jsx as jsx15 } from "react/jsx-runtime";
 var AudioForDevelopmentForwardRefFunction = (props, ref) => {
-  const [initialShouldPreMountAudioElements] = useState13(props.shouldPreMountAudioTags);
+  const [initialShouldPreMountAudioElements] = useState12(props.shouldPreMountAudioTags);
   if (props.shouldPreMountAudioTags !== initialShouldPreMountAudioElements) {
     throw new Error("Cannot change the behavior for pre-mounting audio tags dynamically.");
   }
@@ -3360,7 +3351,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   }
   const preloadedSrc = usePreload(src);
   const sequenceContext = useContext19(SequenceContext);
-  const [timelineId] = useState13(() => String(Math.random()));
+  const [timelineId] = useState12(() => String(Math.random()));
   const isSequenceHidden = hidden[timelineId] ?? false;
   const userPreferredVolume = evaluateVolume({
     frame: volumePropFrame,
@@ -3393,10 +3384,8 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     props.loop
   ]);
   const audioRef = useSharedAudio(propsToPass, id).el;
-  const actualVolume = useMediaTagVolume(audioRef);
   useSyncVolumeWithMediaTag({
     volumePropFrame,
-    actualVolume,
     volume,
     mediaVolume,
     mediaRef: audioRef
@@ -3433,7 +3422,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   }, [audioRef]);
   const currentOnDurationCallback = useRef8(onDuration);
   currentOnDurationCallback.current = onDuration;
-  useEffect14(() => {
+  useEffect13(() => {
     const { current } = audioRef;
     if (!current) {
       return;
@@ -3465,7 +3454,7 @@ var AudioForPreview = forwardRef3(AudioForDevelopmentForwardRefFunction);
 import {
   forwardRef as forwardRef4,
   useContext as useContext20,
-  useEffect as useEffect15,
+  useEffect as useEffect14,
   useImperativeHandle as useImperativeHandle4,
   useLayoutEffect as useLayoutEffect2,
   useMemo as useMemo20,
@@ -3580,7 +3569,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   useImperativeHandle4(ref, () => {
     return audioRef.current;
   }, []);
-  useEffect15(() => {
+  useEffect14(() => {
     if (!props.src) {
       throw new Error("No src passed");
     }
@@ -3691,7 +3680,7 @@ var AudioRefForwardingFunction = (props, ref) => {
     throw new TypeError(`The \`<Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
   }
   const preloadedSrc = usePreload(props.src);
-  const onError = useCallback9((e) => {
+  const onError = useCallback10((e) => {
     console.log(e.currentTarget.error);
     const errMessage = `Could not play audio with src ${preloadedSrc}: ${e.currentTarget.error}. See https://remotion.dev/docs/media-playback-error for help.`;
     if (loop) {
@@ -3700,7 +3689,7 @@ var AudioRefForwardingFunction = (props, ref) => {
       console.warn(errMessage);
     }
   }, [loop, preloadedSrc]);
-  const onDuration = useCallback9((src, durationInSeconds) => {
+  const onDuration = useCallback10((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props.src)];
@@ -3773,11 +3762,11 @@ var AudioRefForwardingFunction = (props, ref) => {
 var Audio = forwardRef5(AudioRefForwardingFunction);
 addSequenceStackTraces(Audio);
 // src/Composition.tsx
-import { Suspense, useContext as useContext23, useEffect as useEffect17 } from "react";
+import { Suspense, useContext as useContext23, useEffect as useEffect16 } from "react";
 import { createPortal } from "react-dom";
 
 // src/Folder.tsx
-import { createContext as createContext16, useContext as useContext22, useEffect as useEffect16, useMemo as useMemo21 } from "react";
+import { createContext as createContext16, useContext as useContext22, useEffect as useEffect15, useMemo as useMemo21 } from "react";
 
 // src/validation/validate-folder-name.ts
 var getRegex = () => /^([a-zA-Z0-9-\u4E00-\u9FFF])+$/g;
@@ -3813,7 +3802,7 @@ var Folder = ({ name, children }) => {
       parentName
     };
   }, [name, parentName]);
-  useEffect16(() => {
+  useEffect15(() => {
     registerFolder(name, parentName);
     return () => {
       unregisterFolder(name, parentName);
@@ -3957,7 +3946,7 @@ var validateDefaultAndInputProps = (defaultProps, name, compositionId) => {
 // src/Composition.tsx
 import { jsx as jsx20 } from "react/jsx-runtime";
 var Fallback = () => {
-  useEffect17(() => {
+  useEffect16(() => {
     const fallback = delayRender("Waiting for Root component to unsuspend");
     return () => continueRender(fallback);
   }, []);
@@ -3987,7 +3976,7 @@ var Composition = ({
     throw new Error("<Composition> mounted inside another composition. See https://remotion.dev/docs/wrong-composition-mount for help.");
   }
   const { folderName, parentName } = useContext23(FolderContext);
-  useEffect17(() => {
+  useEffect16(() => {
     if (!id) {
       throw new Error("No id for composition passed.");
     }
@@ -4059,28 +4048,28 @@ var Composition = ({
 };
 // src/CompositionManager.tsx
 import React18, {
-  useCallback as useCallback10,
+  useCallback as useCallback11,
   useImperativeHandle as useImperativeHandle5,
   useMemo as useMemo23,
   useRef as useRef10,
-  useState as useState14
+  useState as useState13
 } from "react";
 import { jsx as jsx21 } from "react/jsx-runtime";
 var compositionsRef = React18.createRef();
 var CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
-  const [compositions, setCompositions] = useState14([]);
+  const [compositions, setCompositions] = useState13([]);
   const currentcompositionsRef = useRef10(compositions);
-  const [folders, setFolders] = useState14([]);
-  const [canvasContent, setCanvasContent] = useState14(null);
-  const [currentCompositionMetadata, setCurrentCompositionMetadata] = useState14(null);
-  const updateCompositions = useCallback10((updateComps) => {
+  const [folders, setFolders] = useState13([]);
+  const [canvasContent, setCanvasContent] = useState13(null);
+  const [currentCompositionMetadata, setCurrentCompositionMetadata] = useState13(null);
+  const updateCompositions = useCallback11((updateComps) => {
     setCompositions((comps) => {
       const updated = updateComps(comps);
       currentcompositionsRef.current = updated;
       return updated;
     });
   }, []);
-  const registerComposition = useCallback10((comp) => {
+  const registerComposition = useCallback11((comp) => {
     updateCompositions((comps) => {
       if (comps.find((c) => c.id === comp.id)) {
         throw new Error(`Multiple composition with id ${comp.id} are registered.`);
@@ -4089,12 +4078,12 @@ var CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
       return value;
     });
   }, [updateCompositions]);
-  const unregisterComposition = useCallback10((id) => {
+  const unregisterComposition = useCallback11((id) => {
     setCompositions((comps) => {
       return comps.filter((c) => c.id !== id);
     });
   }, []);
-  const registerFolder = useCallback10((name, parent) => {
+  const registerFolder = useCallback11((name, parent) => {
     setFolders((prevFolders) => {
       return [
         ...prevFolders,
@@ -4105,7 +4094,7 @@ var CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
       ];
     });
   }, []);
-  const unregisterFolder = useCallback10((name, parent) => {
+  const unregisterFolder = useCallback11((name, parent) => {
     setFolders((prevFolders) => {
       return prevFolders.filter((p) => !(p.name === name && p.parent === parent));
     });
@@ -4116,7 +4105,7 @@ var CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
     };
   }, []);
   const composition = compositions.find((c) => canvasContent?.type === "composition" ? c.id === canvasContent.compositionId : null);
-  const updateCompositionDefaultProps = useCallback10((id, newDefaultProps) => {
+  const updateCompositionDefaultProps = useCallback11((id, newDefaultProps) => {
     setCompositions((comps) => {
       const updated = comps.map((c) => {
         if (c.id === id) {
@@ -4384,7 +4373,7 @@ var getStaticFiles = () => {
   return window.remotion_staticFiles;
 };
 // src/IFrame.tsx
-import { forwardRef as forwardRef6, useCallback as useCallback11, useState as useState15 } from "react";
+import { forwardRef as forwardRef6, useCallback as useCallback12, useState as useState14 } from "react";
 import { jsx as jsx22 } from "react/jsx-runtime";
 var IFrameRefForwarding = ({
   onLoad,
@@ -4393,15 +4382,15 @@ var IFrameRefForwarding = ({
   delayRenderTimeoutInMilliseconds,
   ...props2
 }, ref) => {
-  const [handle] = useState15(() => delayRender(`Loading <IFrame> with source ${props2.src}`, {
+  const [handle] = useState14(() => delayRender(`Loading <IFrame> with source ${props2.src}`, {
     retries: delayRenderRetries ?? undefined,
     timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
   }));
-  const didLoad = useCallback11((e) => {
+  const didLoad = useCallback12((e) => {
     continueRender(handle);
     onLoad?.(e);
   }, [handle, onLoad]);
-  const didGetError = useCallback11((e) => {
+  const didGetError = useCallback12((e) => {
     continueRender(handle);
     if (onError) {
       onError(e);
@@ -4420,7 +4409,7 @@ var IFrame = forwardRef6(IFrameRefForwarding);
 // src/Img.tsx
 import {
   forwardRef as forwardRef7,
-  useCallback as useCallback12,
+  useCallback as useCallback13,
   useContext as useContext24,
   useImperativeHandle as useImperativeHandle6,
   useLayoutEffect as useLayoutEffect3,
@@ -4451,7 +4440,7 @@ var ImgRefForwarding = ({
     return imageRef.current;
   }, []);
   const actualSrc = usePreload(src);
-  const retryIn = useCallback12((timeout) => {
+  const retryIn = useCallback13((timeout) => {
     if (!imageRef.current) {
       return;
     }
@@ -4468,7 +4457,7 @@ var ImgRefForwarding = ({
       imageRef.current.setAttribute("src", newSrc);
     }, timeout);
   }, []);
-  const didGetError = useCallback12((e) => {
+  const didGetError = useCallback13((e) => {
     if (!errors.current) {
       return;
     }
@@ -4651,20 +4640,20 @@ var waitForRoot = (fn) => {
 
 // src/RemotionRoot.tsx
 import {
-  useEffect as useEffect18,
+  useEffect as useEffect17,
   useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo24,
   useRef as useRef12,
-  useState as useState16
+  useState as useState15
 } from "react";
 import { jsx as jsx24 } from "react/jsx-runtime";
 var RemotionRoot = ({ children, numberOfAudioTags }) => {
-  const [remotionRootId] = useState16(() => String(random(null)));
-  const [frame, setFrame] = useState16(() => getInitialFrameState());
-  const [playing, setPlaying] = useState16(false);
+  const [remotionRootId] = useState15(() => String(random(null)));
+  const [frame, setFrame] = useState15(() => getInitialFrameState());
+  const [playing, setPlaying] = useState15(false);
   const imperativePlaying = useRef12(false);
-  const [fastRefreshes, setFastRefreshes] = useState16(0);
-  const [playbackRate, setPlaybackRate] = useState16(1);
+  const [fastRefreshes, setFastRefreshes] = useState15(0);
+  const [playbackRate, setPlaybackRate] = useState15(1);
   const audioAndVideoTags = useRef12([]);
   if (typeof window !== "undefined") {
     useLayoutEffect4(() => {
@@ -4716,7 +4705,7 @@ var RemotionRoot = ({ children, numberOfAudioTags }) => {
       fastRefreshes
     };
   }, [fastRefreshes]);
-  useEffect18(() => {
+  useEffect17(() => {
     if (typeof __webpack_module__ !== "undefined") {
       if (__webpack_module__.hot) {
         __webpack_module__.hot.addStatusHandler((status) => {
@@ -5748,16 +5737,16 @@ var Still = (props2) => {
   return React27.createElement(Composition, newProps);
 };
 // src/video/OffthreadVideo.tsx
-import { useCallback as useCallback14 } from "react";
+import { useCallback as useCallback15 } from "react";
 
 // src/video/OffthreadVideoForRendering.tsx
 import {
-  useCallback as useCallback13,
+  useCallback as useCallback14,
   useContext as useContext25,
-  useEffect as useEffect19,
+  useEffect as useEffect18,
   useLayoutEffect as useLayoutEffect5,
   useMemo as useMemo27,
-  useState as useState17
+  useState as useState16
 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 var OffthreadVideoForRendering = ({
@@ -5803,7 +5792,7 @@ var OffthreadVideoForRendering = ({
     mediaVolume: 1,
     allowAmplificationDuringRender: allowAmplificationDuringRender ?? false
   });
-  useEffect19(() => {
+  useEffect18(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -5858,7 +5847,7 @@ var OffthreadVideoForRendering = ({
       toneMapped
     });
   }, [toneMapped, currentTime, src, transparent]);
-  const [imageSrc, setImageSrc] = useState17(null);
+  const [imageSrc, setImageSrc] = useState16(null);
   useLayoutEffect5(() => {
     if (!window.remotion_videoEnabled) {
       return;
@@ -5928,7 +5917,7 @@ var OffthreadVideoForRendering = ({
     delayRenderTimeoutInMilliseconds,
     onError
   ]);
-  const onErr = useCallback13(() => {
+  const onErr = useCallback14(() => {
     if (onError) {
       onError?.(new Error("Failed to load image with src " + imageSrc));
     } else {
@@ -5938,7 +5927,7 @@ var OffthreadVideoForRendering = ({
   const className = useMemo27(() => {
     return [OFFTHREAD_VIDEO_CLASS_NAME, props2.className].filter(truthy).join(" ");
   }, [props2.className]);
-  const onImageFrame = useCallback13((img) => {
+  const onImageFrame = useCallback14((img) => {
     if (onVideoFrame) {
       onVideoFrame(img);
     }
@@ -5962,20 +5951,20 @@ var OffthreadVideoForRendering = ({
 import {
   forwardRef as forwardRef9,
   useContext as useContext26,
-  useEffect as useEffect21,
+  useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle7,
   useMemo as useMemo28,
   useRef as useRef13,
-  useState as useState18
+  useState as useState17
 } from "react";
 
 // src/video/emit-video-frame.ts
-import { useEffect as useEffect20 } from "react";
+import { useEffect as useEffect19 } from "react";
 var useEmitVideoFrame = ({
   ref,
   onVideoFrame
 }) => {
-  useEffect20(() => {
+  useEffect19(() => {
     const { current } = ref;
     if (!current) {
       return;
@@ -6030,12 +6019,11 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const { fps, durationInFrames } = useVideoConfig();
   const parentSequence = useContext26(SequenceContext);
   const { hidden } = useContext26(SequenceVisibilityToggleContext);
-  const [timelineId] = useState18(() => String(Math.random()));
+  const [timelineId] = useState17(() => String(Math.random()));
   const isSequenceHidden = hidden[timelineId] ?? false;
   if (typeof acceptableTimeShift !== "undefined") {
     throw new Error("acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.");
   }
-  const actualVolume = useMediaTagVolume(videoRef);
   const [mediaVolume] = useMediaVolumeState();
   const [mediaMuted] = useMediaMutedState();
   useMediaInTimeline({
@@ -6055,7 +6043,6 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   });
   useSyncVolumeWithMediaTag({
     volumePropFrame,
-    actualVolume,
     volume,
     mediaVolume,
     mediaRef: videoRef
@@ -6083,7 +6070,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   useImperativeHandle7(ref, () => {
     return videoRef.current;
   }, []);
-  useEffect21(() => {
+  useEffect20(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -6114,7 +6101,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const currentOnDurationCallback = useRef13(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
-  useEffect21(() => {
+  useEffect20(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -6131,7 +6118,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.removeEventListener("loadedmetadata", onLoadedMetadata);
     };
   }, [src]);
-  useEffect21(() => {
+  useEffect20(() => {
     const { current } = videoRef;
     if (!current) {
       return;
@@ -6176,7 +6163,7 @@ var OffthreadVideo = (props2) => {
     ...otherProps
   } = props2;
   const environment = getRemotionEnvironment();
-  const onDuration = useCallback14(() => {
+  const onDuration = useCallback15(() => {
     return;
   }, []);
   if (typeof props2.src !== "string") {
@@ -6233,13 +6220,13 @@ var OffthreadVideo = (props2) => {
   });
 };
 // src/video/Video.tsx
-import { forwardRef as forwardRef11, useCallback as useCallback15, useContext as useContext28 } from "react";
+import { forwardRef as forwardRef11, useCallback as useCallback16, useContext as useContext28 } from "react";
 
 // src/video/VideoForRendering.tsx
 import {
   forwardRef as forwardRef10,
   useContext as useContext27,
-  useEffect as useEffect22,
+  useEffect as useEffect21,
   useImperativeHandle as useImperativeHandle8,
   useLayoutEffect as useLayoutEffect6,
   useMemo as useMemo29,
@@ -6380,7 +6367,7 @@ var VideoForRenderingForwardFunction = ({
     mediaVolume: 1,
     allowAmplificationDuringRender: allowAmplificationDuringRender ?? false
   });
-  useEffect22(() => {
+  useEffect21(() => {
     if (!props2.src) {
       throw new Error("No src passed");
     }
@@ -6423,7 +6410,7 @@ var VideoForRenderingForwardFunction = ({
   useImperativeHandle8(ref, () => {
     return videoRef.current;
   }, []);
-  useEffect22(() => {
+  useEffect21(() => {
     if (!window.remotion_videoEnabled) {
       return;
     }
@@ -6557,10 +6544,10 @@ var VideoForwardingFunction = (props2, ref) => {
     throw new TypeError(`The \`<Video>\` tag requires a string for \`src\`, but got ${JSON.stringify(props2.src)} instead.`);
   }
   const preloadedSrc = usePreload(props2.src);
-  const onDuration = useCallback15((src, durationInSeconds) => {
+  const onDuration = useCallback16((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
-  const onVideoFrame = useCallback15(() => {
+  const onVideoFrame = useCallback16(() => {
   }, []);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props2.src)];
   if (loop && durationFetched !== undefined) {

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.243";
+var VERSION = "4.0.244";
 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.243",
+  "version": "4.0.244",
   "description": "Make videos programmatically",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -29,7 +29,7 @@
     "webpack": "5.96.1",
     "zod": "3.22.3",
     "eslint": "9.14.0",
-    "@remotion/eslint-config-internal": "4.0.243"
+    "@remotion/eslint-config-internal": "4.0.244"
   },
   "keywords": [
     "remotion",