remotion 4.0.176 → 4.0.177

package/dist/cjs/buffer-until-first-frame.d.ts

@@ -1,7 +1,8 @@
-export declare const useBufferUntilFirstFrame: ({ mediaRef, mediaType, }: {
+export declare const useBufferUntilFirstFrame: ({ mediaRef, mediaType, onVariableFpsVideoDetected, }: {
     mediaRef: React.RefObject<HTMLVideoElement | HTMLAudioElement>;
     mediaType: 'video' | 'audio';
+    onVariableFpsVideoDetected: () => void;
 }) => {
     isBuffering: () => boolean;
-    bufferUntilFirstFrame: () => void;
+    bufferUntilFirstFrame: (requestedTime: number) => void;
 };

package/dist/cjs/buffer-until-first-frame.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useBufferUntilFirstFrame = void 0;
 const react_1 = require("react");
 const use_buffer_state_1 = require("./use-buffer-state");
-const useBufferUntilFirstFrame = ({ mediaRef, mediaType, }) => {
+const useBufferUntilFirstFrame = ({ mediaRef, mediaType, onVariableFpsVideoDetected, }) => {
     const bufferingRef = (0, react_1.useRef)(false);
     const { delayPlayback } = (0, use_buffer_state_1.useBufferState)();
-    const bufferUntilFirstFrame = (0, react_1.useCallback)(() => {
+    const bufferUntilFirstFrame = (0, react_1.useCallback)((requestedTime) => {
         if (mediaType !== 'video') {
             return;
         }
@@ -34,7 +34,11 @@ const useBufferUntilFirstFrame = ({ mediaRef, mediaType, }) => {
         const onEndedOrPause = () => {
             unblock();
         };
-        current.requestVideoFrameCallback(() => {
+        current.requestVideoFrameCallback((_, info) => {
+            const differenceFromRequested = Math.abs(info.mediaTime - requestedTime);
+            if (differenceFromRequested > 0.5) {
+                onVariableFpsVideoDetected();
+            }
             // Safari often seeks and then stalls.
             // This makes sure that the video actually starts playing.
             current.requestVideoFrameCallback(() => {
@@ -43,7 +47,7 @@ const useBufferUntilFirstFrame = ({ mediaRef, mediaType, }) => {
         });
         current.addEventListener('ended', onEndedOrPause, { once: true });
         current.addEventListener('pause', onEndedOrPause, { once: true });
-    }, [delayPlayback, mediaRef, mediaType]);
+    }, [delayPlayback, mediaRef, mediaType, onVariableFpsVideoDetected]);
     return (0, react_1.useMemo)(() => {
         return {
             isBuffering: () => bufferingRef.current,

package/dist/cjs/use-media-playback.js

@@ -31,6 +31,7 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
     const buffering = (0, react_1.useContext)(buffering_js_1.BufferingContextReact);
     const { fps } = (0, use_video_config_js_1.useVideoConfig)();
     const mediaStartsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
+    const lastSeekDueToShift = (0, react_1.useRef)(null);
     if (!buffering) {
         throw new Error('useMediaPlayback must be used inside a <BufferingContext>');
     }
@@ -46,9 +47,21 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         shouldBuffer: pauseWhenBuffering,
         isPremounting,
     });
+    const isVariableFpsVideoMap = (0, react_1.useRef)({});
+    const onVariableFpsVideoDetected = (0, react_1.useCallback)(() => {
+        if (!src) {
+            return;
+        }
+        if (debugSeeking) {
+            // eslint-disable-next-line no-console
+            console.log(`Detected ${src} as a variable FPS video. Disabling buffering while seeking.`);
+        }
+        isVariableFpsVideoMap.current[src] = true;
+    }, [debugSeeking, src]);
     const { bufferUntilFirstFrame, isBuffering } = (0, buffer_until_first_frame_js_1.useBufferUntilFirstFrame)({
         mediaRef,
         mediaType,
+        onVariableFpsVideoDetected,
     });
     const playbackRate = localPlaybackRate * globalPlaybackRate;
     // For short audio, a lower acceptable time shift is used
@@ -94,31 +107,42 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         const shouldBeTime = !Number.isNaN(duration) && Number.isFinite(duration)
             ? Math.min(duration, desiredUnclampedTime)
             : desiredUnclampedTime;
-        const isTime = mediaRef.current.currentTime;
+        const mediaTagTime = mediaRef.current.currentTime;
         const rvcTime = (_a = currentTime.current) !== null && _a !== void 0 ? _a : null;
-        const timeShiftMediaTag = Math.abs(shouldBeTime - isTime);
+        const isVariableFpsVideo = isVariableFpsVideoMap.current[src];
+        const timeShiftMediaTag = Math.abs(shouldBeTime - mediaTagTime);
         const timeShiftRvcTag = rvcTime ? Math.abs(shouldBeTime - rvcTime) : null;
-        const timeShift = timeShiftRvcTag ? timeShiftRvcTag : timeShiftMediaTag;
+        const timeShift = timeShiftRvcTag && !isVariableFpsVideo
+            ? timeShiftRvcTag
+            : timeShiftMediaTag;
         if (debugSeeking) {
             // eslint-disable-next-line no-console
             console.log({
-                isTime,
+                mediaTagTime,
                 rvcTime,
                 shouldBeTime,
                 state: mediaRef.current.readyState,
                 playing: !mediaRef.current.paused,
+                isVariableFpsVideo,
             });
         }
-        if (timeShift > acceptableTimeShiftButLessThanDuration) {
+        if (timeShift > acceptableTimeShiftButLessThanDuration &&
+            lastSeekDueToShift.current !== shouldBeTime) {
             // If scrubbing around, adjust timing
             // or if time shift is bigger than 0.45sec
             if (debugSeeking) {
                 // eslint-disable-next-line no-console
-                console.log('Seeking', { shouldBeTime, isTime, rvcTime, timeShift });
+                console.log('Seeking', {
+                    shouldBeTime,
+                    isTime: mediaTagTime,
+                    rvcTime,
+                    timeShift,
+                });
             }
             seek(mediaRef, shouldBeTime);
-            if (playing) {
-                bufferUntilFirstFrame();
+            lastSeekDueToShift.current = shouldBeTime;
+            if (playing && !isVariableFpsVideo) {
+                bufferUntilFirstFrame(shouldBeTime);
                 if (mediaRef.current.paused) {
                     (0, play_and_handle_not_allowed_error_js_1.playAndHandleNotAllowedError)(mediaRef, mediaType);
                 }
@@ -150,7 +174,9 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
                 seek(mediaRef, shouldBeTime);
             }
             (0, play_and_handle_not_allowed_error_js_1.playAndHandleNotAllowedError)(mediaRef, mediaType);
-            bufferUntilFirstFrame();
+            if (!isVariableFpsVideo) {
+                bufferUntilFirstFrame(shouldBeTime);
+            }
         }
     }, [
         absoluteFrame,

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

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.176';
+exports.VERSION = '4.0.177';

package/dist/esm/index.mjs

@@ -138,7 +138,7 @@ function truthy(value) {
 }
 
 // src/version.ts
-var VERSION = "4.0.176";
+var VERSION = "4.0.177";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -1611,7 +1611,7 @@ var Artifact = ({ filename, content }) => {
   return null;
 };
 // src/audio/Audio.tsx
-import {forwardRef as forwardRef5, useCallback as useCallback8, useContext as useContext23} from "react";
+import {forwardRef as forwardRef5, useCallback as useCallback9, useContext as useContext23} from "react";
 
 // src/absolute-src.ts
 var getAbsoluteSrc = (relativeSrc) => {
@@ -2005,7 +2005,7 @@ useContext as useContext21,
 useEffect as useEffect16,
 useImperativeHandle as useImperativeHandle3,
 useMemo as useMemo20,
-useRef as useRef7,
+useRef as useRef8,
 useState as useState14
 } from "react";
 
@@ -2262,7 +2262,7 @@ var useMediaInTimeline = ({
 };
 
 // src/use-media-playback.ts
-import {useContext as useContext18, useEffect as useEffect12} from "react";
+import {useCallback as useCallback7, useContext as useContext18, useEffect as useEffect12, useRef as useRef6} from "react";
 
 // src/buffer-until-first-frame.ts
 import {useCallback as useCallback6, useMemo as useMemo17, useRef as useRef3} from "react";
@@ -2353,11 +2353,12 @@ var useBufferState = () => {
 // src/buffer-until-first-frame.ts
 var useBufferUntilFirstFrame = ({
   mediaRef,
-  mediaType
+  mediaType,
+  onVariableFpsVideoDetected
 }) => {
   const bufferingRef = useRef3(false);
   const { delayPlayback } = useBufferState();
-  const bufferUntilFirstFrame = useCallback6(() => {
+  const bufferUntilFirstFrame = useCallback6((requestedTime) => {
     if (mediaType !== "video") {
       return;
     }
@@ -2383,14 +2384,18 @@ var useBufferUntilFirstFrame = ({
     const onEndedOrPause = () => {
       unblock();
     };
-    current.requestVideoFrameCallback(() => {
+    current.requestVideoFrameCallback((_, info) => {
+      const differenceFromRequested = Math.abs(info.mediaTime - requestedTime);
+      if (differenceFromRequested > 0.5) {
+        onVariableFpsVideoDetected();
+      }
       current.requestVideoFrameCallback(() => {
         unblock();
       });
     });
     current.addEventListener("ended", onEndedOrPause, { once: true });
     current.addEventListener("pause", onEndedOrPause, { once: true });
-  }, [delayPlayback, mediaRef, mediaType]);
+  }, [delayPlayback, mediaRef, mediaType, onVariableFpsVideoDetected]);
   return useMemo17(() => {
     return {
       isBuffering: () => bufferingRef.current,
@@ -2783,6 +2788,7 @@ var useMediaPlayback = ({
   const buffering3 = useContext18(BufferingContextReact);
   const { fps } = useVideoConfig();
   const mediaStartsAt = useMediaStartsAt();
+  const lastSeekDueToShift = useRef6(null);
   if (!buffering3) {
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
@@ -2798,9 +2804,20 @@ var useMediaPlayback = ({
     shouldBuffer: pauseWhenBuffering,
     isPremounting
   });
+  const isVariableFpsVideoMap = useRef6({});
+  const onVariableFpsVideoDetected = useCallback7(() => {
+    if (!src) {
+      return;
+    }
+    if (debugSeeking) {
+      console.log(`Detected ${src} as a variable FPS video. Disabling buffering while seeking.`);
+    }
+    isVariableFpsVideoMap.current[src] = true;
+  }, [debugSeeking, src]);
   const { bufferUntilFirstFrame, isBuffering } = useBufferUntilFirstFrame({
     mediaRef,
-    mediaType
+    mediaType,
+    onVariableFpsVideoDetected
   });
   const playbackRate = localPlaybackRate * globalPlaybackRate;
   const acceptableTimeShiftButLessThanDuration = (() => {
@@ -2840,27 +2857,35 @@ var useMediaPlayback = ({
     }
     const { duration } = mediaRef.current;
     const shouldBeTime = !Number.isNaN(duration) && Number.isFinite(duration) ? Math.min(duration, desiredUnclampedTime) : desiredUnclampedTime;
-    const isTime = mediaRef.current.currentTime;
+    const mediaTagTime = mediaRef.current.currentTime;
     const rvcTime = currentTime.current ?? null;
-    const timeShiftMediaTag = Math.abs(shouldBeTime - isTime);
+    const isVariableFpsVideo = isVariableFpsVideoMap.current[src];
+    const timeShiftMediaTag = Math.abs(shouldBeTime - mediaTagTime);
     const timeShiftRvcTag = rvcTime ? Math.abs(shouldBeTime - rvcTime) : null;
-    const timeShift = timeShiftRvcTag ? timeShiftRvcTag : timeShiftMediaTag;
+    const timeShift = timeShiftRvcTag && !isVariableFpsVideo ? timeShiftRvcTag : timeShiftMediaTag;
     if (debugSeeking) {
       console.log({
-        isTime,
+        mediaTagTime,
         rvcTime,
         shouldBeTime,
         state: mediaRef.current.readyState,
-        playing: !mediaRef.current.paused
+        playing: !mediaRef.current.paused,
+        isVariableFpsVideo
       });
     }
-    if (timeShift > acceptableTimeShiftButLessThanDuration) {
+    if (timeShift > acceptableTimeShiftButLessThanDuration && lastSeekDueToShift.current !== shouldBeTime) {
       if (debugSeeking) {
-        console.log("Seeking", { shouldBeTime, isTime, rvcTime, timeShift });
+        console.log("Seeking", {
+          shouldBeTime,
+          isTime: mediaTagTime,
+          rvcTime,
+          timeShift
+        });
       }
       seek(mediaRef, shouldBeTime);
-      if (playing) {
-        bufferUntilFirstFrame();
+      lastSeekDueToShift.current = shouldBeTime;
+      if (playing && !isVariableFpsVideo) {
+        bufferUntilFirstFrame(shouldBeTime);
         if (mediaRef.current.paused) {
           playAndHandleNotAllowedError(mediaRef, mediaType);
         }
@@ -2885,7 +2910,9 @@ var useMediaPlayback = ({
         seek(mediaRef, shouldBeTime);
       }
       playAndHandleNotAllowedError(mediaRef, mediaType);
-      bufferUntilFirstFrame();
+      if (!isVariableFpsVideo) {
+        bufferUntilFirstFrame(shouldBeTime);
+      }
     }
   }, [
     absoluteFrame,
@@ -2996,11 +3023,11 @@ var useMediaMutedState = () => {
 import React12, {
 createContext as createContext15,
 createRef as createRef2,
-useCallback as useCallback7,
+useCallback as useCallback8,
 useContext as useContext20,
 useEffect as useEffect15,
 useMemo as useMemo19,
-useRef as useRef6,
+useRef as useRef7,
 useState as useState13
 } from "react";
 import {
@@ -3035,7 +3062,7 @@ var didPropChange = (key, newProp, prevProp) => {
 };
 var SharedAudioContext = createContext15(null);
 var SharedAudioContextProvider = ({ children, numberOfAudioTags, component }) => {
-  const audios = useRef6([]);
+  const audios = useRef7([]);
   const [initialNumberOfAudioTags] = useState13(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.");
@@ -3045,8 +3072,8 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, component }) =>
       return { id: Math.random(), ref: createRef2() };
     });
   }, [numberOfAudioTags]);
-  const takenAudios = useRef6(new Array(numberOfAudioTags).fill(false));
-  const rerenderAudios = useCallback7(() => {
+  const takenAudios = useRef7(new Array(numberOfAudioTags).fill(false));
+  const rerenderAudios = useCallback8(() => {
     refs.forEach(({ ref, id }) => {
       const data = audios.current?.find((a) => a.id === id);
       const { current } = ref;
@@ -3067,7 +3094,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, component }) =>
       });
     });
   }, [refs]);
-  const registerAudio = useCallback7((aud, audioId) => {
+  const registerAudio = useCallback8((aud, audioId) => {
     const found = audios.current?.find((a) => a.audioId === audioId);
     if (found) {
       return found;
@@ -3090,7 +3117,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, component }) =>
     rerenderAudios();
     return newElem;
   }, [numberOfAudioTags, refs, rerenderAudios]);
-  const unregisterAudio = useCallback7((id) => {
+  const unregisterAudio = useCallback8((id) => {
     const cloned = [...takenAudios.current];
     const index = refs.findIndex((r) => r.id === id);
     if (index === -1) {
@@ -3101,7 +3128,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, component }) =>
     audios.current = audios.current?.filter((a) => a.id !== id);
     rerenderAudios();
   }, [refs, rerenderAudios]);
-  const updateAudio = useCallback7(({
+  const updateAudio = useCallback8(({
     aud,
     audioId,
     id
@@ -3126,7 +3153,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, component }) =>
       rerenderAudios();
     }
   }, [rerenderAudios]);
-  const playAllAudios = useCallback7(() => {
+  const playAllAudios = useCallback8(() => {
     refs.forEach((ref) => {
       playAndHandleNotAllowedError(ref.ref, "audio");
     });
@@ -3146,7 +3173,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, component }) =>
     unregisterAudio,
     updateAudio
   ]);
-  const resetAudio = useCallback7(() => {
+  const resetAudio = useCallback8(() => {
     takenAudios.current = new Array(numberOfAudioTags).fill(false);
     audios.current = [];
     rerenderAudios();
@@ -3307,7 +3334,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   useImperativeHandle3(ref, () => {
     return audioRef.current;
   }, [audioRef]);
-  const currentOnDurationCallback = useRef7();
+  const currentOnDurationCallback = useRef8();
   currentOnDurationCallback.current = onDuration;
   useEffect16(() => {
     const { current } = audioRef;
@@ -3345,7 +3372,7 @@ useEffect as useEffect17,
 useImperativeHandle as useImperativeHandle4,
 useLayoutEffect as useLayoutEffect3,
 useMemo as useMemo21,
-useRef as useRef8
+useRef as useRef9
 } from "react";
 
 // src/delay-render.ts
@@ -3420,7 +3447,7 @@ import {
 jsx as jsx17
 } from "react/jsx-runtime";
 var AudioForRenderingRefForwardingFunction = (props, ref) => {
-  const audioRef = useRef8(null);
+  const audioRef = useRef9(null);
   const {
     volume: volumeProp,
     playbackRate,
@@ -3571,7 +3598,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 = useCallback8((e) => {
+  const onError = useCallback9((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 (loop3) {
@@ -3580,7 +3607,7 @@ var AudioRefForwardingFunction = (props, ref) => {
       console.warn(errMessage);
     }
   }, [loop3, preloadedSrc]);
-  const onDuration = useCallback8((src, durationInSeconds) => {
+  const onDuration = useCallback9((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props.src)];
@@ -3959,10 +3986,10 @@ var Composition = ({
 };
 // src/CompositionManager.tsx
 import React18, {
-useCallback as useCallback9,
+useCallback as useCallback10,
 useImperativeHandle as useImperativeHandle5,
 useMemo as useMemo25,
-useRef as useRef9,
+useRef as useRef10,
 useState as useState15
 } from "react";
 import {
@@ -3971,18 +3998,18 @@ jsx as jsx22
 var compositionsRef = React18.createRef();
 var CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
   const [compositions, setCompositions] = useState15([]);
-  const currentcompositionsRef = useRef9(compositions);
+  const currentcompositionsRef = useRef10(compositions);
   const [folders, setFolders] = useState15([]);
   const [canvasContent, setCanvasContent] = useState15(null);
   const [currentCompositionMetadata, setCurrentCompositionMetadata] = useState15(null);
-  const updateCompositions = useCallback9((updateComps) => {
+  const updateCompositions = useCallback10((updateComps) => {
     setCompositions((comps) => {
       const updated = updateComps(comps);
       currentcompositionsRef.current = updated;
       return updated;
     });
   }, []);
-  const registerComposition = useCallback9((comp) => {
+  const registerComposition = useCallback10((comp) => {
     updateCompositions((comps) => {
       if (comps.find((c) => c.id === comp.id)) {
         throw new Error(`Multiple composition with id ${comp.id} are registered.`);
@@ -3991,12 +4018,12 @@ var CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
       return value;
     });
   }, [updateCompositions]);
-  const unregisterComposition = useCallback9((id) => {
+  const unregisterComposition = useCallback10((id) => {
     setCompositions((comps) => {
       return comps.filter((c) => c.id !== id);
     });
   }, []);
-  const registerFolder = useCallback9((name, parent) => {
+  const registerFolder = useCallback10((name, parent) => {
     setFolders((prevFolders) => {
       return [
         ...prevFolders,
@@ -4007,7 +4034,7 @@ var CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
       ];
     });
   }, []);
-  const unregisterFolder = useCallback9((name, parent) => {
+  const unregisterFolder = useCallback10((name, parent) => {
     setFolders((prevFolders) => {
       return prevFolders.filter((p) => !(p.name === name && p.parent === parent));
     });
@@ -4018,7 +4045,7 @@ var CompositionManagerProvider = ({ children, numberOfAudioTags }) => {
     };
   }, []);
   const composition = compositions.find((c) => canvasContent?.type === "composition" ? c.id === canvasContent.compositionId : null);
-  const updateCompositionDefaultProps = useCallback9((id, newDefaultProps) => {
+  const updateCompositionDefaultProps = useCallback10((id, newDefaultProps) => {
     setCompositions((comps) => {
       const updated = comps.map((c) => {
         if (c.id === id) {
@@ -4286,7 +4313,7 @@ var getStaticFiles = () => {
   return window.remotion_staticFiles;
 };
 // src/IFrame.tsx
-import {forwardRef as forwardRef6, useCallback as useCallback10, useState as useState16} from "react";
+import {forwardRef as forwardRef6, useCallback as useCallback11, useState as useState16} from "react";
 import {
 jsx as jsx23
 } from "react/jsx-runtime";
@@ -4301,11 +4328,11 @@ var IFrameRefForwarding = ({
     retries: delayRenderRetries ?? undefined,
     timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
   }));
-  const didLoad = useCallback10((e) => {
+  const didLoad = useCallback11((e) => {
     continueRender(handle);
     onLoad?.(e);
   }, [handle, onLoad]);
-  const didGetError = useCallback10((e) => {
+  const didGetError = useCallback11((e) => {
     continueRender(handle);
     if (onError) {
       onError(e);
@@ -4324,11 +4351,11 @@ var IFrame = forwardRef6(IFrameRefForwarding);
 // src/Img.tsx
 import {
 forwardRef as forwardRef7,
-useCallback as useCallback11,
+useCallback as useCallback12,
 useContext as useContext26,
 useImperativeHandle as useImperativeHandle6,
 useLayoutEffect as useLayoutEffect4,
-useRef as useRef10
+useRef as useRef11
 } from "react";
 var exponentialBackoff = function(errorCount) {
   return 1000 * 2 ** (errorCount - 1);
@@ -4345,8 +4372,8 @@ var ImgRefForwarding = ({
   delayRenderTimeoutInMilliseconds,
   ...props2
 }, ref) => {
-  const imageRef = useRef10(null);
-  const errors = useRef10({});
+  const imageRef = useRef11(null);
+  const errors = useRef11({});
   const { delayPlayback } = useBufferState();
   const sequenceContext = useContext26(SequenceContext);
   if (!src) {
@@ -4356,7 +4383,7 @@ var ImgRefForwarding = ({
     return imageRef.current;
   }, []);
   const actualSrc = usePreload(src);
-  const retryIn = useCallback11((timeout) => {
+  const retryIn = useCallback12((timeout) => {
     if (!imageRef.current) {
       return;
     }
@@ -4373,7 +4400,7 @@ var ImgRefForwarding = ({
       imageRef.current.setAttribute("src", newSrc);
     }, timeout);
   }, []);
-  const didGetError = useCallback11((e) => {
+  const didGetError = useCallback12((e) => {
     if (!errors.current) {
       return;
     }
@@ -4547,7 +4574,7 @@ import {
 useEffect as useEffect20,
 useLayoutEffect as useLayoutEffect5,
 useMemo as useMemo26,
-useRef as useRef11,
+useRef as useRef12,
 useState as useState17
 } from "react";
 import {
@@ -4557,10 +4584,10 @@ var RemotionRoot = ({ children, numberOfAudioTags }) => {
   const [remotionRootId] = useState17(() => String(random(null)));
   const [frame, setFrame] = useState17(() => getInitialFrameState());
   const [playing, setPlaying] = useState17(false);
-  const imperativePlaying = useRef11(false);
+  const imperativePlaying = useRef12(false);
   const [fastRefreshes, setFastRefreshes] = useState17(0);
   const [playbackRate, setPlaybackRate] = useState17(1);
-  const audioAndVideoTags = useRef11([]);
+  const audioAndVideoTags = useRef12([]);
   if (typeof window !== "undefined") {
     useLayoutEffect5(() => {
       window.remotion_setFrame = (f, composition, attempt) => {
@@ -5658,10 +5685,10 @@ var Still = (props2) => {
   return React27.createElement(Composition, newProps);
 };
 // src/video/OffthreadVideo.tsx
-import {useCallback as useCallback13} from "react";
+import {useCallback as useCallback14} from "react";
 
 // src/video/OffthreadVideoForRendering.tsx
-import {useCallback as useCallback12, useContext as useContext27, useEffect as useEffect21, useMemo as useMemo29} from "react";
+import {useCallback as useCallback13, useContext as useContext27, useEffect as useEffect21, useMemo as useMemo29} from "react";
 import {
 jsx as jsx29
 } from "react/jsx-runtime";
@@ -5759,7 +5786,7 @@ var OffthreadVideoForRendering = ({
       toneMapped
     });
   }, [toneMapped, currentTime, src, transparent]);
-  const onErr = useCallback12((e) => {
+  const onErr = useCallback13((e) => {
     if (onError) {
       onError?.(e);
     } else {
@@ -5784,14 +5811,14 @@ useContext as useContext28,
 useEffect as useEffect22,
 useImperativeHandle as useImperativeHandle7,
 useMemo as useMemo30,
-useRef as useRef12,
+useRef as useRef13,
 useState as useState18
 } from "react";
 import {
 jsx as jsx30
 } from "react/jsx-runtime";
 var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
-  const videoRef = useRef12(null);
+  const videoRef = useRef13(null);
   const {
     volume,
     muted,
@@ -5887,7 +5914,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.removeEventListener("error", errorHandler);
     };
   }, [props2.onError, src]);
-  const currentOnDurationCallback = useRef12();
+  const currentOnDurationCallback = useRef13();
   currentOnDurationCallback.current = onDuration;
   useEffect22(() => {
     const { current } = videoRef;
@@ -5950,7 +5977,7 @@ var OffthreadVideo = (props2) => {
     ...otherProps
   } = props2;
   const environment = getRemotionEnvironment();
-  const onDuration = useCallback13(() => {
+  const onDuration = useCallback14(() => {
     return;
   }, []);
   if (typeof props2.src !== "string") {
@@ -5999,7 +6026,7 @@ var OffthreadVideo = (props2) => {
   });
 };
 // src/video/Video.tsx
-import {forwardRef as forwardRef11, useCallback as useCallback14, useContext as useContext30} from "react";
+import {forwardRef as forwardRef11, useCallback as useCallback15, useContext as useContext30} from "react";
 
 // src/video/VideoForRendering.tsx
 import {
@@ -6009,7 +6036,7 @@ useEffect as useEffect23,
 useImperativeHandle as useImperativeHandle8,
 useLayoutEffect as useLayoutEffect6,
 useMemo as useMemo31,
-useRef as useRef13
+useRef as useRef14
 } from "react";
 
 // src/video/seek-until-right.ts
@@ -6121,7 +6148,7 @@ var VideoForRenderingForwardFunction = ({
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
-  const videoRef = useRef13(null);
+  const videoRef = useRef14(null);
   const sequenceContext = useContext29(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
   const environment = getRemotionEnvironment();
@@ -6319,7 +6346,7 @@ 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 = useCallback14((src, durationInSeconds) => {
+  const onDuration = useCallback15((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props2.src)];

package/dist/esm/version.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remotion",
-  "version": "4.0.176",
+  "version": "4.0.177",
   "description": "Render videos in React",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",