remotion 4.0.176 → 4.0.178

package/dist/esm/index.mjs

@@ -138,7 +138,7 @@ function truthy(value) {
 }
 
 // src/version.ts
-var VERSION = "4.0.176";
+var VERSION = "4.0.178";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -527,6 +527,41 @@ var staticFile = (path) => {
 // src/input-props-serialization.ts
 var DATE_TOKEN = "remotion-date:";
 var FILE_TOKEN = "remotion-file:";
+var serializeJSONWithDate = ({
+  data,
+  indent,
+  staticBase
+}) => {
+  let customDateUsed = false;
+  let customFileUsed = false;
+  let mapUsed = false;
+  let setUsed = false;
+  try {
+    const serializedString = JSON.stringify(data, function(key, value) {
+      const item = this[key];
+      if (item instanceof Date) {
+        customDateUsed = true;
+        return `${DATE_TOKEN}${item.toISOString()}`;
+      }
+      if (item instanceof Map) {
+        mapUsed = true;
+        return value;
+      }
+      if (item instanceof Set) {
+        setUsed = true;
+        return value;
+      }
+      if (typeof item === "string" && staticBase !== null && item.startsWith(staticBase)) {
+        customFileUsed = true;
+        return `${FILE_TOKEN}${item.replace(staticBase + "/", "")}`;
+      }
+      return value;
+    }, indent);
+    return { serializedString, customDateUsed, customFileUsed, mapUsed, setUsed };
+  } catch (err) {
+    throw new Error("Could not serialize the passed input props to JSON: " + err.message);
+  }
+};
 var deserializeJSONWithCustomFields = (data) => {
   return JSON.parse(data, (_, value) => {
     if (typeof value === "string" && value.startsWith(DATE_TOKEN)) {
@@ -538,6 +573,16 @@ var deserializeJSONWithCustomFields = (data) => {
     return value;
   });
 };
+var serializeThenDeserializeInStudio = (props) => {
+  if (getRemotionEnvironment().isStudio) {
+    return deserializeJSONWithCustomFields(serializeJSONWithDate({
+      data: props,
+      indent: 2,
+      staticBase: window.remotion_staticBase
+    }).serializedString);
+  }
+  return props;
+};
 
 // src/config/input-props.ts
 var didWarnSSRImport = false;
@@ -711,8 +756,8 @@ var resolveVideoConfig = ({
         fps,
         durationInFrames,
         id: compositionId,
-        defaultProps,
-        props: c.props ?? originalProps,
+        defaultProps: serializeThenDeserializeInStudio(defaultProps),
+        props: serializeThenDeserializeInStudio(c.props ?? originalProps),
         defaultCodec: defaultCodec ?? null
       };
     });
@@ -729,19 +774,33 @@ var resolveVideoConfig = ({
     return {
       ...data,
       id: compositionId,
-      defaultProps: defaultProps ?? {},
-      props: originalProps,
+      defaultProps: serializeThenDeserializeInStudio(defaultProps ?? {}),
+      props: serializeThenDeserializeInStudio(originalProps),
       defaultCodec: null
     };
   }
   return {
     ...data,
     id: compositionId,
-    defaultProps: defaultProps ?? {},
-    props: calculatedProm.props ?? originalProps,
+    defaultProps: serializeThenDeserializeInStudio(defaultProps ?? {}),
+    props: serializeThenDeserializeInStudio(calculatedProm.props ?? originalProps),
     defaultCodec: calculatedProm.defaultCodec ?? null
   };
 };
+var resolveVideoConfigOrCatch = (params) => {
+  try {
+    const promiseOrReturnValue = resolveVideoConfig(params);
+    return {
+      type: "success",
+      result: promiseOrReturnValue
+    };
+  } catch (err) {
+    return {
+      type: "error",
+      error: err
+    };
+  }
+};
 
 // src/ResolveCompositionConfig.tsx
 import {
@@ -788,7 +847,7 @@ var ResolveCompositionConfig = ({ children }) => {
       return controller;
     }
     const { signal } = controller;
-    const promOrNot = resolveVideoConfig({
+    const result = resolveVideoConfigOrCatch({
       compositionId,
       calculateMetadata,
       originalProps: combinedProps,
@@ -799,6 +858,17 @@ var ResolveCompositionConfig = ({ children }) => {
       compositionHeight,
       compositionWidth
     });
+    if (result.type === "error") {
+      setResolvedConfigs((r) => ({
+        ...r,
+        [compositionId]: {
+          type: "error",
+          error: result.error
+        }
+      }));
+      return controller;
+    }
+    const promOrNot = result.result;
     if (typeof promOrNot === "object" && "then" in promOrNot) {
       setResolvedConfigs((r) => {
         const prev = r[compositionId];
@@ -1611,7 +1681,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 +2075,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 +2332,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 +2423,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 +2454,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 +2858,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 +2874,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 +2927,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 +2980,9 @@ var useMediaPlayback = ({
         seek(mediaRef, shouldBeTime);
       }
       playAndHandleNotAllowedError(mediaRef, mediaType);
-      bufferUntilFirstFrame();
+      if (!isVariableFpsVideo) {
+        bufferUntilFirstFrame(shouldBeTime);
+      }
     }
   }, [
     absoluteFrame,
@@ -2996,11 +3093,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 +3132,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 +3142,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 +3164,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 +3187,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 +3198,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 +3223,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, component }) =>
       rerenderAudios();
     }
   }, [rerenderAudios]);
-  const playAllAudios = useCallback7(() => {
+  const playAllAudios = useCallback8(() => {
     refs.forEach((ref) => {
       playAndHandleNotAllowedError(ref.ref, "audio");
     });
@@ -3146,7 +3243,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 +3404,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 +3442,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 +3517,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 +3668,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 +3677,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)];
@@ -3798,7 +3895,7 @@ var portalNode = () => {
 import React16, {useMemo as useMemo23} from "react";
 var useLazyComponent = (compProps) => {
   const lazy = useMemo23(() => {
-    if ("lazyComponent" in compProps) {
+    if ("lazyComponent" in compProps && typeof compProps.lazyComponent !== "undefined") {
       return React16.lazy(compProps.lazyComponent);
     }
     if ("component" in compProps) {
@@ -3899,7 +3996,7 @@ var Composition = ({
       id,
       folderName,
       component: lazy,
-      defaultProps,
+      defaultProps: serializeThenDeserializeInStudio(defaultProps ?? {}),
       nonce: nonce5,
       parentFolderName: parentName,
       schema: schema ?? null,
@@ -3959,10 +4056,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 +4068,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 +4088,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 +4104,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 +4115,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 +4383,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 +4398,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 +4421,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 +4442,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 +4453,7 @@ var ImgRefForwarding = ({
     return imageRef.current;
   }, []);
   const actualSrc = usePreload(src);
-  const retryIn = useCallback11((timeout) => {
+  const retryIn = useCallback12((timeout) => {
     if (!imageRef.current) {
       return;
     }
@@ -4373,7 +4470,7 @@ var ImgRefForwarding = ({
       imageRef.current.setAttribute("src", newSrc);
     }, timeout);
   }, []);
-  const didGetError = useCallback11((e) => {
+  const didGetError = useCallback12((e) => {
     if (!errors.current) {
       return;
     }
@@ -4547,7 +4644,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 +4654,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 +5755,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,9 +5856,9 @@ var OffthreadVideoForRendering = ({
       toneMapped
     });
   }, [toneMapped, currentTime, src, transparent]);
-  const onErr = useCallback12((e) => {
+  const onErr = useCallback13(() => {
     if (onError) {
-      onError?.(e);
+      onError?.(new Error("Failed to load image with src " + actualSrc));
     } else {
       cancelRender("Failed to load image with src " + actualSrc);
     }
@@ -5784,14 +5881,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,
@@ -5810,6 +5907,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     pauseWhenBuffering,
     showInTimeline,
     loopVolumeCurveBehavior,
+    onError,
     ...nativeProps
   } = props2;
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
@@ -5872,22 +5970,29 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       return;
     }
     const errorHandler = () => {
-      if (current?.error) {
+      if (current.error) {
         console.error("Error occurred in video", current?.error);
-        if (props2.onError) {
+        if (onError) {
+          const err = new Error(`Code ${current.error.code}: ${current.error.message}`);
+          onError(err);
           return;
         }
         throw new Error(`The browser threw an error while playing the video ${src}: Code ${current.error.code} - ${current?.error?.message}. See https://remotion.dev/docs/media-playback-error for help. Pass an onError() prop to handle the error.`);
       } else {
-        throw new Error("The browser threw an error");
+        if (onError) {
+          const err = new Error(`The browser threw an error while playing the video ${src}`);
+          onError(err);
+          return;
+        }
+        throw new Error("The browser threw an error while playing the video");
       }
     };
     current.addEventListener("error", errorHandler, { once: true });
     return () => {
       current.removeEventListener("error", errorHandler);
     };
-  }, [props2.onError, src]);
-  const currentOnDurationCallback = useRef12();
+  }, [onError, src]);
+  const currentOnDurationCallback = useRef13();
   currentOnDurationCallback.current = onDuration;
   useEffect22(() => {
     const { current } = videoRef;
@@ -5950,7 +6055,7 @@ var OffthreadVideo = (props2) => {
     ...otherProps
   } = props2;
   const environment = getRemotionEnvironment();
-  const onDuration = useCallback13(() => {
+  const onDuration = useCallback14(() => {
     return;
   }, []);
   if (typeof props2.src !== "string") {
@@ -5999,7 +6104,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 +6114,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 +6226,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();
@@ -6287,8 +6392,7 @@ var VideoForRenderingForwardFunction = ({
   }
   return jsx32("video", {
     ref: videoRef,
-    ...props2,
-    onError
+    ...props2
   });
 };
 var VideoForRendering = forwardRef10(VideoForRenderingForwardFunction);
@@ -6319,7 +6423,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)];