remotion 4.0.443 → 4.0.445

package/dist/esm/index.mjs

@@ -33,7 +33,7 @@ var Clipper = () => {
 };
 
 // src/Composition.tsx
-import { Suspense, useContext as useContext9, useEffect as useEffect2 } from "react";
+import { Suspense, useCallback as useCallback4, useContext as useContext9, useEffect as useEffect2 } from "react";
 import { createPortal } from "react-dom";
 
 // src/CanUseRemotionHooks.tsx
@@ -47,15 +47,46 @@ var CanUseRemotionHooksProvider = ({ children }) => {
   });
 };
 
-// src/CompositionManagerContext.tsx
+// src/composition-render-error-context.ts
 import { createContext as createContext3 } from "react";
-var CompositionManager = createContext3({
+var CompositionRenderErrorContext = createContext3({
+  setError: () => {},
+  clearError: () => {}
+});
+
+// src/CompositionErrorBoundary.tsx
+import React2 from "react";
+
+class CompositionErrorBoundary extends React2.Component {
+  state = { hasError: false };
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  componentDidCatch(error) {
+    this.props.onError(error);
+  }
+  componentDidUpdate(_prevProps) {
+    if (!this.state.hasError) {
+      this.props.onClear();
+    }
+  }
+  render() {
+    if (this.state.hasError) {
+      return null;
+    }
+    return this.props.children;
+  }
+}
+
+// src/CompositionManagerContext.tsx
+import { createContext as createContext4 } from "react";
+var CompositionManager = createContext4({
   compositions: [],
   folders: [],
   currentCompositionMetadata: null,
   canvasContent: null
 });
-var CompositionSetters = createContext3({
+var CompositionSetters = createContext4({
   registerComposition: () => {
     return;
   },
@@ -75,11 +106,11 @@ var CompositionSetters = createContext3({
 });
 
 // src/Folder.tsx
-import { createContext as createContext5, useContext as useContext2, useEffect, useMemo as useMemo2 } from "react";
+import { createContext as createContext6, useContext as useContext2, useEffect, useMemo as useMemo2 } from "react";
 
 // src/nonce.ts
-import { createContext as createContext4, useCallback, useContext, useMemo, useRef } from "react";
-var NonceContext = createContext4({
+import { createContext as createContext5, useCallback, useContext, useMemo, useRef } from "react";
+var NonceContext = createContext5({
   getNonce: () => 0
 });
 var fastRefreshNonce = 0;
@@ -137,7 +168,7 @@ var invalidFolderNameErrorMessage = `Folder name must match ${String(getRegex())
 
 // src/Folder.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
-var FolderContext = createContext5({
+var FolderContext = createContext6({
   folderName: null,
   parentName: null
 });
@@ -258,9 +289,9 @@ var serializeThenDeserializeInStudio = (props) => {
 };
 
 // src/is-player.tsx
-import { createContext as createContext6, useContext as useContext3 } from "react";
+import { createContext as createContext7, useContext as useContext3 } from "react";
 import { jsx as jsx3 } from "react/jsx-runtime";
-var IsPlayerContext = createContext6(false);
+var IsPlayerContext = createContext7(false);
 var IsPlayerContextProvider = ({
   children
 }) => {
@@ -458,7 +489,7 @@ var portalNode = () => {
 };
 
 // src/ResolveCompositionConfig.tsx
-import { createContext as createContext8, createRef, useContext as useContext5, useMemo as useMemo5 } from "react";
+import { createContext as createContext9, createRef, useContext as useContext5, useMemo as useMemo5 } from "react";
 
 // src/input-props-override.ts
 var getKey = () => {
@@ -517,17 +548,17 @@ var getInputProps = () => {
 };
 
 // src/EditorProps.tsx
-import React3, { createContext as createContext7, useCallback as useCallback2, useMemo as useMemo4 } from "react";
+import React4, { createContext as createContext8, useCallback as useCallback2, useMemo as useMemo4 } from "react";
 import { jsx as jsx6 } from "react/jsx-runtime";
-var EditorPropsContext = createContext7({
+var EditorPropsContext = createContext8({
   props: {},
   updateProps: () => {
     throw new Error("Not implemented");
   }
 });
-var timeValueRef = React3.createRef();
+var timeValueRef = React4.createRef();
 var EditorPropsProvider = ({ children }) => {
-  const [props, setProps] = React3.useState({});
+  const [props, setProps] = React4.useState({});
   const updateProps = useCallback2(({
     defaultProps,
     id,
@@ -553,8 +584,8 @@ var EditorPropsProvider = ({ children }) => {
 import { useContext as useContext4, useState } from "react";
 
 // src/remotion-environment-context.ts
-import React4 from "react";
-var RemotionEnvironmentContext = React4.createContext(null);
+import React5 from "react";
+var RemotionEnvironmentContext = React5.createContext(null);
 
 // src/use-remotion-environment.ts
 var useRemotionEnvironment = () => {
@@ -622,7 +653,7 @@ function validateFps(fps, location, isGif) {
 }
 
 // src/ResolveCompositionConfig.tsx
-var ResolveCompositionContext = createContext8(null);
+var ResolveCompositionContext = createContext9(null);
 var resolveCompositionsRef = createRef();
 var needsResolution = (composition) => {
   return Boolean(composition.calculateMetadata);
@@ -699,7 +730,7 @@ var useResolvedVideoConfig = (preferredCompositionId) => {
 };
 
 // src/use-delay-render.tsx
-import { createContext as createContext10, useCallback as useCallback3, useContext as useContext7 } from "react";
+import { createContext as createContext11, useCallback as useCallback3, useContext as useContext7 } from "react";
 
 // src/cancel-render.ts
 var getErrorStackWithMessage = (error) => {
@@ -917,21 +948,21 @@ var continueRender = (handle) => {
 };
 
 // src/log-level-context.tsx
-import { createContext as createContext9 } from "react";
-import * as React5 from "react";
-var LogLevelContext = createContext9({
+import { createContext as createContext10 } from "react";
+import * as React6 from "react";
+var LogLevelContext = createContext10({
   logLevel: "info",
   mountTime: 0
 });
 var useLogLevel = () => {
-  const { logLevel } = React5.useContext(LogLevelContext);
+  const { logLevel } = React6.useContext(LogLevelContext);
   if (logLevel === null) {
     throw new Error("useLogLevel must be used within a LogLevelProvider");
   }
   return logLevel;
 };
 var useMountTime = () => {
-  const { mountTime } = React5.useContext(LogLevelContext);
+  const { mountTime } = React6.useContext(LogLevelContext);
   if (mountTime === null) {
     throw new Error("useMountTime must be used within a LogLevelProvider");
   }
@@ -939,7 +970,7 @@ var useMountTime = () => {
 };
 
 // src/use-delay-render.tsx
-var DelayRenderContextType = createContext10(null);
+var DelayRenderContextType = createContext11(null);
 var useDelayRender = () => {
   const environment = useRemotionEnvironment();
   const scope = useContext7(DelayRenderContextType) ?? (typeof window !== "undefined" ? window : undefined);
@@ -973,7 +1004,7 @@ var useDelayRender = () => {
 };
 
 // src/use-lazy-component.ts
-import React6, { useMemo as useMemo6, useRef as useRef2 } from "react";
+import React7, { useMemo as useMemo6, useRef as useRef2 } from "react";
 var useLazyComponent = ({
   compProps,
   componentName,
@@ -993,7 +1024,7 @@ var useLazyComponent = ({
       }
       const Wrapper = (props) => {
         const Comp = componentRef.current;
-        return React6.createElement(Comp, props);
+        return React7.createElement(Comp, props);
       };
       return Wrapper;
     }
@@ -1001,7 +1032,7 @@ var useLazyComponent = ({
       if (typeof compProps.lazyComponent === "undefined") {
         throw new Error(`A value of \`undefined\` was passed to the \`lazyComponent\` prop. Check the value you are passing to the <${componentName}/> component.`);
       }
-      return React6.lazy(compProps.lazyComponent);
+      return React7.lazy(compProps.lazyComponent);
     }
     throw new Error("You must pass either 'component' or 'lazyComponent'");
   }, [compProps.lazyComponent]);
@@ -1147,16 +1178,27 @@ var InnerComposition = ({
     unregisterComposition
   ]);
   const resolved = useResolvedVideoConfig(id);
+  const { setError, clearError } = useContext9(CompositionRenderErrorContext);
+  const onError = useCallback4((error2) => {
+    setError(error2);
+  }, [setError]);
+  const onClear = useCallback4(() => {
+    clearError();
+  }, [clearError]);
   if (environment.isStudio && video && video.component === lazy && video.id === id) {
     const Comp = lazy;
     if (resolved === null || resolved.type !== "success" && resolved.type !== "success-and-refreshing") {
       return null;
     }
     return createPortal(/* @__PURE__ */ jsx7(CanUseRemotionHooksProvider, {
-      children: /* @__PURE__ */ jsx7(Suspense, {
-        fallback: /* @__PURE__ */ jsx7(Loading, {}),
-        children: /* @__PURE__ */ jsx7(Comp, {
-          ...resolved.result.props ?? {}
+      children: /* @__PURE__ */ jsx7(CompositionErrorBoundary, {
+        onError,
+        onClear,
+        children: /* @__PURE__ */ jsx7(Suspense, {
+          fallback: /* @__PURE__ */ jsx7(Loading, {}),
+          children: /* @__PURE__ */ jsx7(Comp, {
+            ...resolved.result.props ?? {}
+          })
         })
       })
     }), portalNode());
@@ -1195,7 +1237,7 @@ var addSequenceStackTraces = (component) => {
 };
 
 // src/version.ts
-var VERSION = "4.0.443";
+var VERSION = "4.0.445";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -1244,8 +1286,8 @@ import {
 import { useContext as useContext14, useMemo as useMemo11 } from "react";
 
 // src/SequenceContext.tsx
-import { createContext as createContext11 } from "react";
-var SequenceContext = createContext11(null);
+import { createContext as createContext12 } from "react";
+var SequenceContext = createContext12(null);
 
 // src/timeline-position-state.ts
 var exports_timeline_position_state = {};
@@ -1263,7 +1305,7 @@ import { useContext as useContext10, useMemo as useMemo9 } from "react";
 
 // src/TimelineContext.tsx
 import {
-  createContext as createContext12,
+  createContext as createContext13,
   useLayoutEffect,
   useMemo as useMemo8,
   useRef as useRef3,
@@ -1306,7 +1348,7 @@ var random = (seed, dummy) => {
 
 // src/TimelineContext.tsx
 import { jsx as jsx8 } from "react/jsx-runtime";
-var SetTimelineContext = createContext12({
+var SetTimelineContext = createContext13({
   setFrame: () => {
     throw new Error("default");
   },
@@ -1314,8 +1356,8 @@ var SetTimelineContext = createContext12({
     throw new Error("default");
   }
 });
-var TimelineContext = createContext12(null);
-var AbsoluteTimeContext = createContext12(null);
+var TimelineContext = createContext13(null);
+var AbsoluteTimeContext = createContext13(null);
 var TimelineContextProvider = ({ children, frameState }) => {
   const [playing, setPlaying] = useState2(false);
   const imperativePlaying = useRef3(false);
@@ -1593,16 +1635,16 @@ var Freeze = ({
 };
 
 // src/PremountContext.tsx
-import { createContext as createContext13 } from "react";
-var PremountContext = createContext13({
+import { createContext as createContext14 } from "react";
+var PremountContext = createContext14({
   premountFramesRemaining: 0,
   playing: false
 });
 
 // src/SequenceManager.tsx
-import React10, { useCallback as useCallback4, useMemo as useMemo12, useRef as useRef4, useState as useState3 } from "react";
+import React11, { useCallback as useCallback5, useMemo as useMemo12, useRef as useRef4, useState as useState3 } from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
-var SequenceManager = React10.createContext({
+var SequenceManager = React11.createContext({
   registerSequence: () => {
     throw new Error("SequenceManagerContext not initialized");
   },
@@ -1611,13 +1653,13 @@ var SequenceManager = React10.createContext({
   },
   sequences: []
 });
-var SequenceVisibilityToggleContext = React10.createContext({
+var SequenceVisibilityToggleContext = React11.createContext({
   hidden: {},
   setHidden: () => {
     throw new Error("SequenceVisibilityToggle not initialized");
   }
 });
-var VisualModeOverridesContext = React10.createContext({
+var VisualModeOverridesContext = React11.createContext({
   dragOverrides: {},
   setDragOverrides: () => {
     throw new Error("VisualModeOverridesContext not initialized");
@@ -1638,7 +1680,7 @@ var SequenceManagerProvider = ({ children, visualModeEnabled }) => {
   const controlOverridesRef = useRef4(dragOverrides);
   controlOverridesRef.current = dragOverrides;
   const [codeValues, setCodeValuesMapState] = useState3({});
-  const setDragOverrides = useCallback4((sequenceId, key, value) => {
+  const setDragOverrides = useCallback5((sequenceId, key, value) => {
     setControlOverrides((prev) => ({
       ...prev,
       [sequenceId]: {
@@ -1647,7 +1689,7 @@ var SequenceManagerProvider = ({ children, visualModeEnabled }) => {
       }
     }));
   }, []);
-  const clearDragOverrides = useCallback4((sequenceId) => {
+  const clearDragOverrides = useCallback5((sequenceId) => {
     setControlOverrides((prev) => {
       if (!prev[sequenceId]) {
         return prev;
@@ -1657,7 +1699,7 @@ var SequenceManagerProvider = ({ children, visualModeEnabled }) => {
       return next;
     });
   }, []);
-  const setCodeValues = useCallback4((sequenceId, values) => {
+  const setCodeValues = useCallback5((sequenceId, values) => {
     setCodeValuesMapState((prev) => {
       if (prev[sequenceId] === values) {
         return prev;
@@ -1673,12 +1715,12 @@ var SequenceManagerProvider = ({ children, visualModeEnabled }) => {
       return { ...prev, [sequenceId]: values };
     });
   }, []);
-  const registerSequence = useCallback4((seq) => {
+  const registerSequence = useCallback5((seq) => {
     setSequences((seqs) => {
       return [...seqs, seq];
     });
   }, []);
-  const unregisterSequence = useCallback4((seq) => {
+  const unregisterSequence = useCallback5((seq) => {
     setSequences((seqs) => seqs.filter((s) => s.id !== seq));
   }, []);
   const sequenceContext = useMemo12(() => {
@@ -1978,7 +2020,7 @@ import {
 } from "react";
 
 // src/animated-image/canvas.tsx
-import React12, { useCallback as useCallback5, useImperativeHandle, useRef as useRef5 } from "react";
+import React13, { useCallback as useCallback6, useImperativeHandle, useRef as useRef5 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
 var calcArgs = (fit, frameSize, canvasSize) => {
   switch (fit) {
@@ -2030,7 +2072,7 @@ var calcArgs = (fit, frameSize, canvasSize) => {
 };
 var CanvasRefForwardingFunction = ({ width, height, fit, className, style }, ref) => {
   const canvasRef = useRef5(null);
-  const draw = useCallback5((imageData) => {
+  const draw = useCallback6((imageData) => {
     const canvas = canvasRef.current;
     const canvasWidth = width ?? imageData.displayWidth;
     const canvasHeight = height ?? imageData.displayHeight;
@@ -2075,7 +2117,7 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style }, ref
     style
   });
 };
-var Canvas = React12.forwardRef(CanvasRefForwardingFunction);
+var Canvas = React13.forwardRef(CanvasRefForwardingFunction);
 
 // src/animated-image/decode-image.ts
 var CACHE_SIZE = 5;
@@ -2341,8 +2383,8 @@ import { useContext as useContext16, useLayoutEffect as useLayoutEffect4, useSta
 
 // src/RenderAssetManager.tsx
 import {
-  createContext as createContext14,
-  useCallback as useCallback6,
+  createContext as createContext15,
+  useCallback as useCallback7,
   useImperativeHandle as useImperativeHandle3,
   useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo14,
@@ -2383,7 +2425,7 @@ var validateRenderAsset = (artifact) => {
 
 // src/RenderAssetManager.tsx
 import { jsx as jsx14 } from "react/jsx-runtime";
-var RenderAssetManager = createContext14({
+var RenderAssetManager = createContext15({
   registerRenderAsset: () => {
     return;
   },
@@ -2395,7 +2437,7 @@ var RenderAssetManager = createContext14({
 var RenderAssetManagerProvider = ({ children, collectAssets }) => {
   const [renderAssets, setRenderAssets] = useState6([]);
   const renderAssetsRef = useRef7([]);
-  const registerRenderAsset = useCallback6((renderAsset) => {
+  const registerRenderAsset = useCallback7((renderAsset) => {
     validateRenderAsset(renderAsset);
     renderAssetsRef.current = [...renderAssetsRef.current, renderAsset];
     setRenderAssets(renderAssetsRef.current);
@@ -2412,7 +2454,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
       };
     }, []);
   }
-  const unregisterRenderAsset = useCallback6((id) => {
+  const unregisterRenderAsset = useCallback7((id) => {
     renderAssetsRef.current = renderAssetsRef.current.filter((a) => a.id !== id);
     setRenderAssets(renderAssetsRef.current);
   }, []);
@@ -2499,7 +2541,7 @@ var Artifact = ({ filename, content, downloadBehavior }) => {
 };
 Artifact.Thumbnail = ArtifactThumbnail;
 // src/audio/Audio.tsx
-import { forwardRef as forwardRef6, useCallback as useCallback11, useContext as useContext28 } from "react";
+import { forwardRef as forwardRef6, useCallback as useCallback12, useContext as useContext28 } from "react";
 
 // src/absolute-src.ts
 var getAbsoluteSrc = (relativeSrc) => {
@@ -2531,11 +2573,11 @@ var calculateMediaDuration = ({
 };
 
 // src/loop/index.tsx
-import React13, { createContext as createContext15, useMemo as useMemo15 } from "react";
+import React14, { createContext as createContext16, useMemo as useMemo15 } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
-var LoopContext = createContext15(null);
+var LoopContext = createContext16(null);
 var useLoop = () => {
-  return React13.useContext(LoopContext);
+  return React14.useContext(LoopContext);
 };
 var Loop = ({ durationInFrames, times = Infinity, children, name, ...props }) => {
   const currentFrame = useCurrentFrame();
@@ -2603,9 +2645,9 @@ var playbackLogging = ({
 };
 
 // src/prefetch-state.tsx
-import { createContext as createContext16, useEffect as useEffect5, useState as useState8 } from "react";
+import { createContext as createContext17, useEffect as useEffect5, useState as useState8 } from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
-var PreloadContext = createContext16({});
+var PreloadContext = createContext17({});
 var preloads = {};
 var updaters = [];
 var setPreloads = (updater) => {
@@ -2918,7 +2960,7 @@ var resolveTrimProps = ({
 };
 
 // src/video/duration-state.tsx
-import { createContext as createContext17, useMemo as useMemo16, useReducer } from "react";
+import { createContext as createContext18, useMemo as useMemo16, useReducer } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
 var durationReducer = (state, action) => {
   switch (action.type) {
@@ -2936,7 +2978,7 @@ var durationReducer = (state, action) => {
       return state;
   }
 };
-var DurationsContext = createContext17({
+var DurationsContext = createContext18({
   durations: {},
   setDurations: () => {
     throw new Error("context missing");
@@ -2957,7 +2999,7 @@ var DurationsContextProvider = ({ children }) => {
 };
 
 // src/audio/AudioForPreview.tsx
-import React19, {
+import React20, {
   forwardRef as forwardRef4,
   useContext as useContext26,
   useEffect as useEffect12,
@@ -2989,10 +3031,10 @@ var getCrossOriginValue = ({
 import { useContext as useContext19, useLayoutEffect as useLayoutEffect5, useRef as useRef10 } from "react";
 
 // src/audio/shared-audio-tags.tsx
-import React16, {
-  createContext as createContext18,
+import React17, {
+  createContext as createContext19,
   createRef as createRef2,
-  useCallback as useCallback7,
+  useCallback as useCallback8,
   useContext as useContext18,
   useMemo as useMemo18,
   useRef as useRef8,
@@ -3159,7 +3201,7 @@ var didPropChange = (key, newProp, prevProp) => {
   }
   return true;
 };
-var SharedAudioContext = createContext18(null);
+var SharedAudioContext = createContext19(null);
 var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHint, audioEnabled }) => {
   const audios = useRef8([]);
   const [initialNumberOfAudioTags] = useState9(numberOfAudioTags);
@@ -3242,7 +3284,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
       };
     });
   }, [audioContext, numberOfAudioTags]);
-  const effectToUse = React16.useInsertionEffect ?? React16.useLayoutEffect;
+  const effectToUse = React17.useInsertionEffect ?? React17.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -3253,7 +3295,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
     };
   }, [refs]);
   const takenAudios = useRef8(new Array(numberOfAudioTags).fill(false));
-  const rerenderAudios = useCallback7(() => {
+  const rerenderAudios = useCallback8(() => {
     refs.forEach(({ ref, id }) => {
       const data = audios.current?.find((a) => a.id === id);
       const { current } = ref;
@@ -3274,7 +3316,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
       });
     });
   }, [refs]);
-  const registerAudio = useCallback7((options) => {
+  const registerAudio = useCallback8((options) => {
     const { aud, audioId, premounting, postmounting } = options;
     const found = audios.current?.find((a) => a.audioId === audioId);
     if (found) {
@@ -3303,7 +3345,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
     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) {
@@ -3314,7 +3356,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
     audios.current = audios.current?.filter((a) => a.id !== id);
     rerenderAudios();
   }, [refs, rerenderAudios]);
-  const updateAudio = useCallback7(({
+  const updateAudio = useCallback8(({
     aud,
     audioId,
     id,
@@ -3350,7 +3392,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
   }, [rerenderAudios]);
   const mountTime = useMountTime();
   const env = useRemotionEnvironment();
-  const playAllAudios = useCallback7(() => {
+  const playAllAudios = useCallback8(() => {
     refs.forEach((ref) => {
       const audio = audios.current.find((a) => a.el === ref.ref);
       if (audio?.premounting) {
@@ -3414,7 +3456,7 @@ var useSharedAudio = ({
     if (ctx && ctx.numberOfAudioTags > 0) {
       return ctx.registerAudio({ aud, audioId, premounting, postmounting });
     }
-    const el = React16.createRef();
+    const el = React17.createRef();
     const mediaElementSourceNode = ctx?.audioContext ? makeSharedElementSourceNode({
       audioContext: ctx.audioContext,
       ref: el
@@ -3433,7 +3475,7 @@ var useSharedAudio = ({
       }
     };
   });
-  const effectToUse = React16.useInsertionEffect ?? React16.useLayoutEffect;
+  const effectToUse = React17.useInsertionEffect ?? React17.useLayoutEffect;
   if (typeof document !== "undefined") {
     effectToUse(() => {
       if (ctx && ctx.numberOfAudioTags > 0) {
@@ -3673,6 +3715,26 @@ var getAssetDisplayName = (filename) => {
   return splitted[splitted.length - 1];
 };
 
+// src/get-timeline-duration.ts
+var getTimelineDuration = ({
+  compositionDurationInFrames,
+  playbackRate,
+  trimBefore,
+  trimAfter,
+  parentSequenceDurationInFrames
+}) => {
+  const mediaDuration = calculateMediaDuration({
+    mediaDurationInFrames: compositionDurationInFrames * playbackRate + (trimBefore ?? 0),
+    playbackRate,
+    trimBefore,
+    trimAfter
+  });
+  if (parentSequenceDurationInFrames !== null) {
+    return Math.floor(Math.min(parentSequenceDurationInFrames * playbackRate, mediaDuration));
+  }
+  return mediaDuration;
+};
+
 // src/volume-prop.ts
 var evaluateVolume = ({
   frame,
@@ -3724,13 +3786,13 @@ var useBasicMediaInTimeline = ({
   const parentSequence = useContext21(SequenceContext);
   const videoConfig = useVideoConfig();
   const [initialVolume] = useState10(() => volume);
-  const mediaDuration = calculateMediaDuration({
-    mediaDurationInFrames: videoConfig.durationInFrames + (trimBefore ?? 0),
+  const duration = getTimelineDuration({
+    compositionDurationInFrames: videoConfig.durationInFrames,
     playbackRate,
     trimBefore,
-    trimAfter
+    trimAfter,
+    parentSequenceDurationInFrames: parentSequence?.durationInFrames ?? null
   });
-  const duration = parentSequence ? Math.min(parentSequence.durationInFrames, mediaDuration) : mediaDuration;
   const volumes = useMemo19(() => {
     if (typeof volume === "number") {
       return volume;
@@ -3929,7 +3991,7 @@ var useMediaInTimeline = ({
 
 // src/use-media-playback.ts
 import {
-  useCallback as useCallback10,
+  useCallback as useCallback11,
   useContext as useContext24,
   useEffect as useEffect10,
   useLayoutEffect as useLayoutEffect7,
@@ -3937,14 +3999,14 @@ import {
 } from "react";
 
 // src/buffer-until-first-frame.ts
-import { useCallback as useCallback9, useMemo as useMemo22, useRef as useRef12 } from "react";
+import { useCallback as useCallback10, useMemo as useMemo22, useRef as useRef12 } from "react";
 
 // src/use-buffer-state.ts
 import { useContext as useContext23, useMemo as useMemo21 } from "react";
 
 // src/buffering.tsx
-import React17, {
-  useCallback as useCallback8,
+import React18, {
+  useCallback as useCallback9,
   useContext as useContext22,
   useEffect as useEffect7,
   useLayoutEffect as useLayoutEffect6,
@@ -3960,7 +4022,7 @@ var useBufferManager = (logLevel, mountTime) => {
   const env = useRemotionEnvironment();
   const rendering = env.isRendering;
   const buffering = useRef11(false);
-  const addBlock = useCallback8((block) => {
+  const addBlock = useCallback9((block) => {
     if (rendering) {
       return {
         unblock: () => {
@@ -3981,7 +4043,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     };
   }, [rendering]);
-  const listenForBuffering = useCallback8((callback) => {
+  const listenForBuffering = useCallback9((callback) => {
     setOnBufferingCallbacks((c) => [...c, callback]);
     return {
       remove: () => {
@@ -3989,7 +4051,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     };
   }, []);
-  const listenForResume = useCallback8((callback) => {
+  const listenForResume = useCallback9((callback) => {
     setOnResumeCallbacks((c) => [...c, callback]);
     return {
       remove: () => {
@@ -4031,7 +4093,7 @@ var useBufferManager = (logLevel, mountTime) => {
     return { addBlock, listenForBuffering, listenForResume, buffering };
   }, [addBlock, buffering, listenForBuffering, listenForResume]);
 };
-var BufferingContextReact = React17.createContext(null);
+var BufferingContextReact = React18.createContext(null);
 var BufferingProvider = ({ children }) => {
   const { logLevel, mountTime } = useContext22(LogLevelContext);
   const bufferManager = useBufferManager(logLevel ?? "info", mountTime);
@@ -4095,7 +4157,7 @@ var useBufferUntilFirstFrame = ({
 }) => {
   const bufferingRef = useRef12(false);
   const { delayPlayback } = useBufferState();
-  const bufferUntilFirstFrame = useCallback9((requestedTime) => {
+  const bufferUntilFirstFrame = useCallback10((requestedTime) => {
     if (mediaType !== "video") {
       return;
     }
@@ -4175,9 +4237,9 @@ var useBufferUntilFirstFrame = ({
 };
 
 // src/media-tag-current-time-timestamp.ts
-import React18 from "react";
+import React19 from "react";
 var useCurrentTimeOfMediaTagWithUpdateTimeStamp = (mediaRef) => {
-  const lastUpdate = React18.useRef({
+  const lastUpdate = React19.useRef({
     time: mediaRef.current?.currentTime ?? 0,
     lastUpdate: performance.now()
   });
@@ -4602,7 +4664,7 @@ var useMediaPlayback = ({
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
   const isVariableFpsVideoMap = useRef14({});
-  const onVariableFpsVideoDetected = useCallback10(() => {
+  const onVariableFpsVideoDetected = useCallback11(() => {
     if (!src) {
       return;
     }
@@ -4871,12 +4933,12 @@ var useMediaTag = ({
 };
 
 // src/volume-position-state.ts
-import { createContext as createContext19, useContext as useContext25, useMemo as useMemo23 } from "react";
-var MediaVolumeContext = createContext19({
+import { createContext as createContext20, useContext as useContext25, useMemo as useMemo23 } from "react";
+var MediaVolumeContext = createContext20({
   mediaMuted: false,
   mediaVolume: 1
 });
-var SetMediaVolumeContext = createContext19({
+var SetMediaVolumeContext = createContext20({
   setMediaMuted: () => {
     throw new Error("default");
   },
@@ -5044,7 +5106,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     volume: userPreferredVolume,
     shouldUseWebAudioApi: useWebAudioApi ?? false
   });
-  const effectToUse = React19.useInsertionEffect ?? React19.useLayoutEffect;
+  const effectToUse = React20.useInsertionEffect ?? React20.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -5257,7 +5319,7 @@ var AudioRefForwardingFunction = (props, ref) => {
     throw new TypeError(`The \`<Html5Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
   }
   const preloadedSrc = usePreload(props.src);
-  const onError = useCallback11((e) => {
+  const onError = useCallback12((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) {
@@ -5271,7 +5333,7 @@ var AudioRefForwardingFunction = (props, ref) => {
       console.warn(errMessage);
     }
   }, [loop, onRemotionError, preloadedSrc]);
-  const onDuration = useCallback11((src, durationInSeconds) => {
+  const onDuration = useCallback12((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props.src)];
@@ -5558,7 +5620,7 @@ var getStaticFiles = () => {
   return window.remotion_staticFiles;
 };
 // src/IFrame.tsx
-import { forwardRef as forwardRef7, useCallback as useCallback12, useState as useState14 } from "react";
+import { forwardRef as forwardRef7, useCallback as useCallback13, useState as useState14 } from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
 var IFrameRefForwarding = ({
   onLoad,
@@ -5572,11 +5634,11 @@ var IFrameRefForwarding = ({
     retries: delayRenderRetries ?? undefined,
     timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
   }));
-  const didLoad = useCallback12((e) => {
+  const didLoad = useCallback13((e) => {
     continueRender2(handle);
     onLoad?.(e);
   }, [handle, onLoad, continueRender2]);
-  const didGetError = useCallback12((e) => {
+  const didGetError = useCallback13((e) => {
     continueRender2(handle);
     if (onError) {
       onError(e);
@@ -5595,7 +5657,7 @@ var IFrameRefForwarding = ({
 var IFrame = forwardRef7(IFrameRefForwarding);
 // src/Img.tsx
 import {
-  useCallback as useCallback13,
+  useCallback as useCallback14,
   useContext as useContext30,
   useImperativeHandle as useImperativeHandle6,
   useLayoutEffect as useLayoutEffect9,
@@ -5604,7 +5666,7 @@ import {
 } from "react";
 
 // src/wrap-in-schema.ts
-import React23, { forwardRef as forwardRef8, useMemo as useMemo27 } from "react";
+import React24, { forwardRef as forwardRef8, useMemo as useMemo27 } from "react";
 
 // src/use-schema.ts
 import { useContext as useContext29, useMemo as useMemo26, useState as useState15 } from "react";
@@ -5742,7 +5804,7 @@ var wrapInSchema = (Component, schema) => {
   const Wrapped = forwardRef8((props2, ref) => {
     const env = useRemotionEnvironment();
     if (!env.isStudio || env.isReadOnlyStudio || env.isRendering || !process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) {
-      return React23.createElement(Component, {
+      return React24.createElement(Component, {
         ...props2,
         controls: null,
         ref
@@ -5757,7 +5819,7 @@ var wrapInSchema = (Component, schema) => {
     }, schemaKeys.map((key) => getNestedValue(props2, key)));
     const { controls, values } = useSchema(schema, schemaInput);
     const mergedProps = mergeValues(props2, values, schemaKeys);
-    return React23.createElement(Component, {
+    return React24.createElement(Component, {
       ...mergedProps,
       controls,
       ref
@@ -5845,7 +5907,7 @@ var ImgInner = ({
     controls: controls ?? null
   });
   const actualSrc = usePreload(src);
-  const retryIn = useCallback13((timeout) => {
+  const retryIn = useCallback14((timeout) => {
     if (!imageRef.current) {
       return;
     }
@@ -5863,7 +5925,7 @@ var ImgInner = ({
     }, timeout);
   }, []);
   const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
-  const didGetError = useCallback13((e) => {
+  const didGetError = useCallback14((e) => {
     if (!errors.current) {
       return;
     }
@@ -5971,12 +6033,12 @@ addSequenceStackTraces(Img);
 import { createRef as createRef3 } from "react";
 
 // src/CompositionManager.tsx
-import React25 from "react";
-var compositionsRef = React25.createRef();
+import React26 from "react";
+var compositionsRef = React26.createRef();
 
 // src/CompositionManagerProvider.tsx
 import {
-  useCallback as useCallback14,
+  useCallback as useCallback15,
   useImperativeHandle as useImperativeHandle7,
   useMemo as useMemo28,
   useRef as useRef18,
@@ -5994,14 +6056,14 @@ var CompositionManagerProvider = ({
   const [canvasContent, setCanvasContent] = useState17(initialCanvasContent);
   const [compositions, setCompositions] = useState17(initialCompositions);
   const currentcompositionsRef = useRef18(compositions);
-  const updateCompositions = useCallback14((updateComps) => {
+  const updateCompositions = useCallback15((updateComps) => {
     setCompositions((comps) => {
       const updated = updateComps(comps);
       currentcompositionsRef.current = updated;
       return updated;
     });
   }, []);
-  const registerComposition = useCallback14((comp) => {
+  const registerComposition = useCallback15((comp) => {
     updateCompositions((comps) => {
       if (comps.find((c2) => c2.id === comp.id)) {
         throw new Error(`Multiple composition with id ${comp.id} are registered.`);
@@ -6009,12 +6071,12 @@ var CompositionManagerProvider = ({
       return [...comps, comp];
     });
   }, [updateCompositions]);
-  const unregisterComposition = useCallback14((id) => {
+  const unregisterComposition = useCallback15((id) => {
     setCompositions((comps) => {
       return comps.filter((c2) => c2.id !== id);
     });
   }, []);
-  const registerFolder = useCallback14((name, parent, nonce) => {
+  const registerFolder = useCallback15((name, parent, nonce) => {
     setFolders((prevFolders) => {
       return [
         ...prevFolders,
@@ -6026,7 +6088,7 @@ var CompositionManagerProvider = ({
       ];
     });
   }, []);
-  const unregisterFolder = useCallback14((name, parent) => {
+  const unregisterFolder = useCallback15((name, parent) => {
     setFolders((prevFolders) => {
       return prevFolders.filter((p) => !(p.name === name && p.parent === parent));
     });
@@ -6136,8 +6198,8 @@ var getPreviewDomElement = () => {
 };
 
 // src/max-video-cache-size.ts
-import React26 from "react";
-var MaxMediaCacheSizeContext = React26.createContext(null);
+import React27 from "react";
+var MaxMediaCacheSizeContext = React27.createContext(null);
 
 // src/register-root.ts
 var Root = null;
@@ -6174,9 +6236,9 @@ var waitForRoot = (fn) => {
 import { useMemo as useMemo30 } from "react";
 
 // src/use-media-enabled.tsx
-import { createContext as createContext20, useContext as useContext31, useMemo as useMemo29 } from "react";
+import { createContext as createContext21, useContext as useContext31, useMemo as useMemo29 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
-var MediaEnabledContext = createContext20(null);
+var MediaEnabledContext = createContext21(null);
 var useVideoEnabled = () => {
   const context = useContext31(MediaEnabledContext);
   if (!context) {
@@ -6434,8 +6496,8 @@ var resolveVideoConfigOrCatch = (params) => {
 };
 
 // src/sequence-stack-traces.ts
-import React28 from "react";
-var SequenceStackTracesUpdateContext = React28.createContext(() => {});
+import React29 from "react";
+var SequenceStackTracesUpdateContext = React29.createContext(() => {});
 
 // src/setup-env-variables.ts
 var getEnvVariables = () => {
@@ -6465,9 +6527,9 @@ var setupEnvVariables = () => {
 };
 
 // src/use-current-scale.ts
-import React29, { createContext as createContext21 } from "react";
-var CurrentScaleContext = React29.createContext(null);
-var PreviewSizeContext = createContext21({
+import React30, { createContext as createContext22 } from "react";
+var CurrentScaleContext = React30.createContext(null);
+var PreviewSizeContext = createContext22({
   setSize: () => {
     return;
   },
@@ -6491,8 +6553,8 @@ var calculateScale = ({
   return Number(previewSize);
 };
 var useCurrentScale = (options) => {
-  const hasContext = React29.useContext(CurrentScaleContext);
-  const zoomContext = React29.useContext(PreviewSizeContext);
+  const hasContext = React30.useContext(CurrentScaleContext);
+  const zoomContext = React30.useContext(PreviewSizeContext);
   const config = useUnsafeVideoConfig();
   const env = useRemotionEnvironment();
   if (hasContext === null || config === null || zoomContext === null) {
@@ -6533,11 +6595,11 @@ var useSequenceControlOverride = (key) => {
 };
 
 // src/video/OffthreadVideo.tsx
-import { useCallback as useCallback16 } from "react";
+import { useCallback as useCallback17 } from "react";
 
 // src/video/OffthreadVideoForRendering.tsx
 import {
-  useCallback as useCallback15,
+  useCallback as useCallback16,
   useContext as useContext33,
   useEffect as useEffect14,
   useLayoutEffect as useLayoutEffect10,
@@ -6729,7 +6791,7 @@ var OffthreadVideoForRendering = ({
     continueRender2,
     delayRender2
   ]);
-  const onErr = useCallback15(() => {
+  const onErr = useCallback16(() => {
     if (onError) {
       onError?.(new Error("Failed to load image with src " + imageSrc));
     } else {
@@ -6739,7 +6801,7 @@ var OffthreadVideoForRendering = ({
   const className = useMemo31(() => {
     return [OBJECTFIT_CONTAIN_CLASS_NAME, props2.className].filter(truthy).join(" ");
   }, [props2.className]);
-  const onImageFrame = useCallback15((img) => {
+  const onImageFrame = useCallback16((img) => {
     if (onVideoFrame) {
       onVideoFrame(img);
     }
@@ -6760,7 +6822,7 @@ var OffthreadVideoForRendering = ({
 };
 
 // src/video/VideoForPreview.tsx
-import React31, {
+import React32, {
   forwardRef as forwardRef9,
   useContext as useContext34,
   useEffect as useEffect16,
@@ -6799,6 +6861,16 @@ var useEmitVideoFrame = ({
   }, [onVideoFrame, ref]);
 };
 
+// src/video/MediaPlaybackError.ts
+class MediaPlaybackError extends Error {
+  src;
+  constructor({ message, src }) {
+    super(message);
+    this.name = "MediaPlaybackError";
+    this.src = src;
+  }
+}
+
 // src/video/VideoForPreview.tsx
 import { jsx as jsx29 } from "react/jsx-runtime";
 var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
@@ -6816,7 +6888,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       ref: videoRef
     });
   }, [context.audioContext]);
-  const effectToUse = React31.useInsertionEffect ?? React31.useLayoutEffect;
+  const effectToUse = React32.useInsertionEffect ?? React32.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -6943,18 +7015,30 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       if (current.error) {
         console.error("Error occurred in video", current?.error);
         if (onError) {
-          const err = new Error(`Code ${current.error.code}: ${current.error.message}`);
+          const err = new MediaPlaybackError({
+            message: `Code ${current.error.code}: ${current.error.message}`,
+            src
+          });
           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.`);
+        throw new MediaPlaybackError({
+          message: `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.`,
+          src
+        });
       } else {
         if (onError) {
-          const err = new Error(`The browser threw an error while playing the video ${src}`);
+          const err = new MediaPlaybackError({
+            message: `The browser threw an error while playing the video ${src}`,
+            src
+          });
           onError(err);
           return;
         }
-        throw new Error("The browser threw an error while playing the video");
+        throw new MediaPlaybackError({
+          message: "The browser threw an error while playing the video",
+          src
+        });
       }
     };
     current.addEventListener("error", errorHandler, { once: true });
@@ -7036,7 +7120,7 @@ var InnerOffthreadVideo = (props2) => {
   if (environment.isClientSideRendering) {
     throw new Error("<OffthreadVideo> is not supported in @remotion/web-renderer. Use <Video> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations");
   }
-  const onDuration = useCallback16(() => {
+  const onDuration = useCallback17(() => {
     return;
   }, []);
   if (typeof props2.src !== "string") {
@@ -7215,21 +7299,21 @@ var watchStaticFile = (fileName, callback) => {
 };
 
 // src/wrap-remotion-context.tsx
-import React33, { useMemo as useMemo33 } from "react";
+import React34, { useMemo as useMemo33 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
 function useRemotionContexts() {
-  const compositionManagerCtx = React33.useContext(CompositionManager);
-  const timelineContext = React33.useContext(TimelineContext);
-  const setTimelineContext = React33.useContext(SetTimelineContext);
-  const sequenceContext = React33.useContext(SequenceContext);
-  const nonceContext = React33.useContext(NonceContext);
-  const canUseRemotionHooksContext = React33.useContext(CanUseRemotionHooks);
-  const preloadContext = React33.useContext(PreloadContext);
-  const resolveCompositionContext = React33.useContext(ResolveCompositionContext);
-  const renderAssetManagerContext = React33.useContext(RenderAssetManager);
-  const sequenceManagerContext = React33.useContext(SequenceManager);
-  const bufferManagerContext = React33.useContext(BufferingContextReact);
-  const logLevelContext = React33.useContext(LogLevelContext);
+  const compositionManagerCtx = React34.useContext(CompositionManager);
+  const timelineContext = React34.useContext(TimelineContext);
+  const setTimelineContext = React34.useContext(SetTimelineContext);
+  const sequenceContext = React34.useContext(SequenceContext);
+  const nonceContext = React34.useContext(NonceContext);
+  const canUseRemotionHooksContext = React34.useContext(CanUseRemotionHooks);
+  const preloadContext = React34.useContext(PreloadContext);
+  const resolveCompositionContext = React34.useContext(ResolveCompositionContext);
+  const renderAssetManagerContext = React34.useContext(RenderAssetManager);
+  const sequenceManagerContext = React34.useContext(SequenceManager);
+  const bufferManagerContext = React34.useContext(BufferingContextReact);
+  const logLevelContext = React34.useContext(LogLevelContext);
   return useMemo33(() => ({
     compositionManagerCtx,
     timelineContext,
@@ -7404,7 +7488,8 @@ var Internals = {
   TimelineContext,
   AbsoluteTimeContext,
   RenderAssetManagerProvider,
-  getEffectiveVisualModeValue
+  getEffectiveVisualModeValue,
+  CompositionRenderErrorContext
 };
 // src/interpolate-colors.ts
 var NUMBER = "[-+]?\\d*\\.?\\d+";
@@ -7929,11 +8014,11 @@ var validateFrame = ({
 import { Children, forwardRef as forwardRef10, useMemo as useMemo34 } from "react";
 
 // src/series/flatten-children.tsx
-import React34 from "react";
+import React35 from "react";
 var flattenChildren = (children) => {
-  const childrenArray = React34.Children.toArray(children);
+  const childrenArray = React35.Children.toArray(children);
   return childrenArray.reduce((flatChildren, child) => {
-    if (child.type === React34.Fragment) {
+    if (child.type === React35.Fragment) {
       return flatChildren.concat(flattenChildren(child.props.children));
     }
     flatChildren.push(child);
@@ -7942,9 +8027,9 @@ var flattenChildren = (children) => {
 };
 
 // src/series/is-inside-series.tsx
-import React35, { createContext as createContext22 } from "react";
+import React36, { createContext as createContext23 } from "react";
 import { jsx as jsx32 } from "react/jsx-runtime";
-var IsInsideSeriesContext = createContext22(false);
+var IsInsideSeriesContext = createContext23(false);
 var IsInsideSeriesContainer = ({ children }) => {
   return /* @__PURE__ */ jsx32(IsInsideSeriesContext.Provider, {
     value: true,
@@ -7958,7 +8043,7 @@ var IsNotInsideSeriesProvider = ({ children }) => {
   });
 };
 var useRequireToBeInsideSeries = () => {
-  const isInsideSeries = React35.useContext(IsInsideSeriesContext);
+  const isInsideSeries = React36.useContext(IsInsideSeriesContext);
   if (!isInsideSeries) {
     throw new Error("This component must be inside a <Series /> component.");
   }
@@ -8371,17 +8456,17 @@ var staticFile = (path) => {
   return preparsed;
 };
 // src/Still.tsx
-import React37 from "react";
+import React38 from "react";
 var Still = (props2) => {
   const newProps = {
     ...props2,
     durationInFrames: 1,
     fps: 1
   };
-  return React37.createElement(Composition, newProps);
+  return React38.createElement(Composition, newProps);
 };
 // src/video/Video.tsx
-import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as useContext36 } from "react";
+import { forwardRef as forwardRef12, useCallback as useCallback18, useContext as useContext36 } from "react";
 
 // src/video/VideoForRendering.tsx
 import {
@@ -8661,9 +8746,15 @@ var VideoForRenderingForwardFunction = ({
         if (onError) {
           return;
         }
-        throw new Error(`The browser threw an error while playing the video ${props2.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.`);
+        throw new MediaPlaybackError({
+          message: `The browser threw an error while playing the video ${props2.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.`,
+          src: props2.src
+        });
       } else {
-        throw new Error("The browser threw an error");
+        throw new MediaPlaybackError({
+          message: "The browser threw an error",
+          src: props2.src
+        });
       }
     };
     current.addEventListener("error", errorHandler, { once: true });
@@ -8762,10 +8853,10 @@ var VideoForwardingFunction = (props2, ref) => {
     throw new TypeError(`The \`<Html5Video>\` tag requires a string for \`src\`, but got ${JSON.stringify(props2.src)} instead.`);
   }
   const preloadedSrc = usePreload(props2.src);
-  const onDuration = useCallback17((src, durationInSeconds) => {
+  const onDuration = useCallback18((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
-  const onVideoFrame = useCallback17(() => {}, []);
+  const onVideoFrame = useCallback18(() => {}, []);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props2.src)];
   validateMediaTrimProps({ startFrom, endAt, trimBefore, trimAfter });
   const { trimBeforeValue, trimAfterValue } = resolveTrimProps({
@@ -8899,6 +8990,7 @@ export {
   Series,
   Sequence,
   OffthreadVideo,
+  MediaPlaybackError,
   Loop,
   Internals,
   Img,