remotion 4.0.185 → 4.0.187

package/dist/cjs/audio/AudioForPreview.js

@@ -86,6 +86,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         stack: _remotionInternalStack,
         showInTimeline,
         premountDisplay: null,
+        onAutoPlayError: null,
     });
     (0, use_media_playback_js_1.useMediaPlayback)({
         mediaRef: audioRef,
@@ -97,6 +98,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         isPremounting: Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting),
         pauseWhenBuffering,
         debugSeeking: _remotionDebugSeeking,
+        onAutoPlayError: null,
     });
     (0, react_1.useImperativeHandle)(ref, () => {
         return audioRef.current;

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

@@ -31,9 +31,9 @@ type SharedContext = {
 };
 export declare const SharedAudioContext: React.Context<SharedContext | null>;
 export declare const SharedAudioContextProvider: React.FC<{
-    numberOfAudioTags: number;
-    children: React.ReactNode;
-    component: LazyExoticComponent<ComponentType<Record<string, unknown>>> | null;
+    readonly numberOfAudioTags: number;
+    readonly children: React.ReactNode;
+    readonly component: LazyExoticComponent<ComponentType<Record<string, unknown>>> | null;
 }>;
 export declare const useSharedAudio: (aud: RemotionAudioProps, audioId: string) => AudioElem;
 export {};

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

@@ -158,7 +158,7 @@ const SharedAudioContextProvider = ({ children, numberOfAudioTags, component })
     }, [rerenderAudios]);
     const playAllAudios = (0, react_1.useCallback)(() => {
         refs.forEach((ref) => {
-            (0, play_and_handle_not_allowed_error_js_1.playAndHandleNotAllowedError)(ref.ref, 'audio');
+            (0, play_and_handle_not_allowed_error_js_1.playAndHandleNotAllowedError)(ref.ref, 'audio', null);
         });
     }, [refs]);
     const value = (0, react_1.useMemo)(() => {

package/dist/cjs/internals.d.ts

@@ -56,9 +56,9 @@ export declare const Internals: {
         numberOfAudioTags: number;
     } | null>;
     readonly SharedAudioContextProvider: import("react").FC<{
-        numberOfAudioTags: number;
-        children: import("react").ReactNode;
-        component: import("react").LazyExoticComponent<import("react").ComponentType<Record<string, unknown>>> | null;
+        readonly numberOfAudioTags: number;
+        readonly children: import("react").ReactNode;
+        readonly component: import("react").LazyExoticComponent<import("react").ComponentType<Record<string, unknown>>> | null;
     }>;
     readonly invalidCompositionErrorMessage: string;
     readonly isCompositionIdValid: (id: string) => RegExpMatchArray | null;

package/dist/cjs/play-and-handle-not-allowed-error.d.ts

@@ -1,2 +1,2 @@
 import type { RefObject } from 'react';
-export declare const playAndHandleNotAllowedError: (mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement>, mediaType: 'audio' | 'video') => void;
+export declare const playAndHandleNotAllowedError: (mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement>, mediaType: 'audio' | 'video', onAutoPlayError: null | (() => void)) => void;

package/dist/cjs/play-and-handle-not-allowed-error.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.playAndHandleNotAllowedError = void 0;
-const playAndHandleNotAllowedError = (mediaRef, mediaType) => {
+const get_remotion_environment_1 = require("./get-remotion-environment");
+const playAndHandleNotAllowedError = (mediaRef, mediaType, onAutoPlayError) => {
     const { current } = mediaRef;
     if (!current) {
         return;
@@ -35,8 +36,16 @@ const playAndHandleNotAllowedError = (mediaRef, mediaType) => {
             // eslint-disable-next-line no-console
             console.log(`Could not play ${mediaType} due to following error: `, err);
             if (!current.muted) {
+                if (onAutoPlayError) {
+                    onAutoPlayError();
+                    return;
+                }
                 // eslint-disable-next-line no-console
                 console.log(`The video will be muted and we'll retry playing it.`);
+                if (mediaType === 'video' && (0, get_remotion_environment_1.getRemotionEnvironment)().isPlayer) {
+                    // eslint-disable-next-line no-console
+                    console.log('Use onAutoPlayError() to handle this error yourself.');
+                }
                 current.muted = true;
                 current.play();
             }

package/dist/cjs/use-media-in-timeline.d.ts

@@ -1,6 +1,6 @@
 import type { RefObject } from 'react';
 import type { VolumeProp } from './volume-prop.js';
-export declare const useMediaInTimeline: ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, displayName, id, stack, showInTimeline, premountDisplay, }: {
+export declare const useMediaInTimeline: ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, displayName, id, stack, showInTimeline, premountDisplay, onAutoPlayError, }: {
     volume: VolumeProp | undefined;
     mediaVolume: number;
     mediaRef: RefObject<HTMLAudioElement | HTMLVideoElement>;
@@ -12,4 +12,5 @@ export declare const useMediaInTimeline: ({ volume, mediaVolume, mediaRef, src,
     stack: string | null;
     showInTimeline: boolean;
     premountDisplay: number | null;
+    onAutoPlayError: null | (() => void);
 }) => void;

package/dist/cjs/use-media-in-timeline.js

@@ -21,7 +21,7 @@ const warnOnce = (message) => {
     console.warn(message);
     didWarn[message] = true;
 };
-const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, displayName, id, stack, showInTimeline, premountDisplay, }) => {
+const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, displayName, id, stack, showInTimeline, premountDisplay, onAutoPlayError, }) => {
     const videoConfig = (0, use_video_config_js_1.useVideoConfig)();
     const { rootId, audioAndVideoTags } = (0, react_1.useContext)(timeline_position_state_js_1.TimelineContext);
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
@@ -125,13 +125,13 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
                     // Don't play if for example in a <Freeze> state.
                     return;
                 }
-                return (0, play_and_handle_not_allowed_error_js_1.playAndHandleNotAllowedError)(mediaRef, mediaType);
+                return (0, play_and_handle_not_allowed_error_js_1.playAndHandleNotAllowedError)(mediaRef, mediaType, onAutoPlayError);
             },
         };
         audioAndVideoTags.current.push(tag);
         return () => {
             audioAndVideoTags.current = audioAndVideoTags.current.filter((a) => a.id !== id);
         };
-    }, [audioAndVideoTags, id, mediaRef, mediaType, playing]);
+    }, [audioAndVideoTags, id, mediaRef, mediaType, onAutoPlayError, playing]);
 };
 exports.useMediaInTimeline = useMediaInTimeline;

package/dist/cjs/use-media-playback.d.ts

@@ -1,6 +1,6 @@
 import type { RefObject } from 'react';
 export declare const DEFAULT_ACCEPTABLE_TIMESHIFT = 0.45;
-export declare const useMediaPlayback: ({ mediaRef, src, mediaType, playbackRate: localPlaybackRate, onlyWarnForMediaSeekingError, acceptableTimeshift, pauseWhenBuffering, isPremounting, debugSeeking, }: {
+export declare const useMediaPlayback: ({ mediaRef, src, mediaType, playbackRate: localPlaybackRate, onlyWarnForMediaSeekingError, acceptableTimeshift, pauseWhenBuffering, isPremounting, debugSeeking, onAutoPlayError, }: {
     mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement>;
     src: string | undefined;
     mediaType: 'audio' | 'video';
@@ -10,4 +10,5 @@ export declare const useMediaPlayback: ({ mediaRef, src, mediaType, playbackRate
     pauseWhenBuffering: boolean;
     isPremounting: boolean;
     debugSeeking: boolean;
+    onAutoPlayError: null | (() => void);
 }) => void;

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

@@ -23,7 +23,7 @@ const seek = (mediaRef, time) => {
     const timeToSet = (0, video_fragment_js_1.isIosSafari)() ? Number(time.toFixed(1)) : time;
     mediaRef.current.currentTime = timeToSet;
 };
-const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybackRate, onlyWarnForMediaSeekingError, acceptableTimeshift, pauseWhenBuffering, isPremounting, debugSeeking, }) => {
+const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybackRate, onlyWarnForMediaSeekingError, acceptableTimeshift, pauseWhenBuffering, isPremounting, debugSeeking, onAutoPlayError, }) => {
     const { playbackRate: globalPlaybackRate } = (0, react_1.useContext)(timeline_position_state_js_1.TimelineContext);
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
     const absoluteFrame = (0, timeline_position_state_js_1.useTimelinePosition)();
@@ -144,7 +144,7 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
             if (playing && !isVariableFpsVideo) {
                 bufferUntilFirstFrame(shouldBeTime);
                 if (mediaRef.current.paused) {
-                    (0, play_and_handle_not_allowed_error_js_1.playAndHandleNotAllowedError)(mediaRef, mediaType);
+                    (0, play_and_handle_not_allowed_error_js_1.playAndHandleNotAllowedError)(mediaRef, mediaType, onAutoPlayError);
                 }
             }
             if (!onlyWarnForMediaSeekingError) {
@@ -173,7 +173,7 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
             if (makesSenseToSeek) {
                 seek(mediaRef, shouldBeTime);
             }
-            (0, play_and_handle_not_allowed_error_js_1.playAndHandleNotAllowedError)(mediaRef, mediaType);
+            (0, play_and_handle_not_allowed_error_js_1.playAndHandleNotAllowedError)(mediaRef, mediaType, onAutoPlayError);
             if (!isVariableFpsVideo) {
                 bufferUntilFirstFrame(shouldBeTime);
             }
@@ -194,6 +194,7 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         playbackRate,
         playing,
         src,
+        onAutoPlayError,
     ]);
 };
 exports.useMediaPlayback = useMediaPlayback;

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

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.185';
+exports.VERSION = '4.0.187';

package/dist/cjs/video/OffthreadVideo.js

@@ -35,7 +35,7 @@ const OffthreadVideo = (props) => {
     if (environment.isRendering) {
         return (0, jsx_runtime_1.jsx)(OffthreadVideoForRendering_js_1.OffthreadVideoForRendering, { ...otherProps });
     }
-    const { transparent, toneMapped, _remotionDebugSeeking, ...withoutTransparent } = otherProps;
-    return ((0, jsx_runtime_1.jsx)(VideoForPreview_js_1.VideoForPreview, { _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, _remotionInternalNativeLoopPassed: false, _remotionDebugSeeking: _remotionDebugSeeking !== null && _remotionDebugSeeking !== void 0 ? _remotionDebugSeeking : false, onDuration: onDuration, onlyWarnForMediaSeekingError: true, pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, ...withoutTransparent }));
+    const { transparent, toneMapped, _remotionDebugSeeking, onAutoPlayError, ...withoutTransparent } = otherProps;
+    return ((0, jsx_runtime_1.jsx)(VideoForPreview_js_1.VideoForPreview, { _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, _remotionInternalNativeLoopPassed: false, _remotionDebugSeeking: _remotionDebugSeeking !== null && _remotionDebugSeeking !== void 0 ? _remotionDebugSeeking : false, onDuration: onDuration, onlyWarnForMediaSeekingError: true, pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, onAutoPlayError: onAutoPlayError !== null && onAutoPlayError !== void 0 ? onAutoPlayError : undefined, ...withoutTransparent }));
 };
 exports.OffthreadVideo = OffthreadVideo;

package/dist/cjs/video/OffthreadVideoForRendering.js

@@ -130,8 +130,10 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
                 const blob = await res.blob();
                 const url = URL.createObjectURL(blob);
                 cleanup.push(() => URL.revokeObjectURL(url));
-                setImageSrc(url);
-                (0, delay_render_js_1.continueRender)(newHandle);
+                setImageSrc({
+                    src: url,
+                    handle: newHandle,
+                });
             }
             catch (err) {
                 if (onError) {
@@ -174,6 +176,7 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
     if (!imageSrc) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Img_js_1.Img, { src: imageSrc, className: className, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, ...props, onError: onErr }));
+    (0, delay_render_js_1.continueRender)(imageSrc.handle);
+    return ((0, jsx_runtime_1.jsx)(Img_js_1.Img, { src: imageSrc.src, className: className, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, ...props, onError: onErr }));
 };
 exports.OffthreadVideoForRendering = OffthreadVideoForRendering;

package/dist/cjs/video/Video.d.ts

@@ -17,6 +17,7 @@ export declare const Video: React.ForwardRefExoticComponent<Omit<Omit<React.Deta
     loopVolumeCurveBehavior?: import("../audio/use-audio-frame.js").LoopVolumeCurveBehavior | undefined;
     delayRenderRetries?: number | undefined;
     onError?: ((err: Error) => void) | undefined;
+    onAutoPlayError?: (() => void) | undefined;
 } & RemotionMainVideoProps & {
     /**
      * @deprecated For internal use only

package/dist/cjs/video/Video.js

@@ -19,7 +19,7 @@ const VideoForRendering_js_1 = require("./VideoForRendering.js");
 const duration_state_js_1 = require("./duration-state.js");
 const VideoForwardingFunction = (props, ref) => {
     var _a, _b;
-    const { startFrom, endAt, name, pauseWhenBuffering, stack, _remotionInternalNativeLoopPassed, showInTimeline, ...otherProps } = props;
+    const { startFrom, endAt, name, pauseWhenBuffering, stack, _remotionInternalNativeLoopPassed, showInTimeline, onAutoPlayError, ...otherProps } = props;
     const { loop, _remotionDebugSeeking, ...propsOtherThanLoop } = props;
     const { fps } = (0, use_video_config_js_1.useVideoConfig)();
     const environment = (0, get_remotion_environment_js_1.getRemotionEnvironment)();
@@ -56,7 +56,7 @@ const VideoForwardingFunction = (props, ref) => {
     }
     return ((0, jsx_runtime_1.jsx)(VideoForPreview_js_1.VideoForPreview, { onlyWarnForMediaSeekingError: false, ...otherProps, ref: ref, 
         // Proposal: Make this default to true in v5
-        pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, onDuration: onDuration, _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, _remotionInternalNativeLoopPassed: _remotionInternalNativeLoopPassed !== null && _remotionInternalNativeLoopPassed !== void 0 ? _remotionInternalNativeLoopPassed : false, _remotionDebugSeeking: _remotionDebugSeeking !== null && _remotionDebugSeeking !== void 0 ? _remotionDebugSeeking : false, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true }));
+        pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, onDuration: onDuration, _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, _remotionInternalNativeLoopPassed: _remotionInternalNativeLoopPassed !== null && _remotionInternalNativeLoopPassed !== void 0 ? _remotionInternalNativeLoopPassed : false, _remotionDebugSeeking: _remotionDebugSeeking !== null && _remotionDebugSeeking !== void 0 ? _remotionDebugSeeking : false, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, onAutoPlayError: onAutoPlayError !== null && onAutoPlayError !== void 0 ? onAutoPlayError : undefined }));
 };
 /**
  * @description allows you to include a video file in your Remotion project. It wraps the native HTMLVideoElement.

package/dist/cjs/video/VideoForPreview.js

@@ -19,7 +19,7 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
     const videoRef = (0, react_1.useRef)(null);
     const { volume, muted, playbackRate, onlyWarnForMediaSeekingError, src, onDuration, 
     // @ts-expect-error
-    acceptableTimeShift, acceptableTimeShiftInSeconds, toneFrequency, name, _remotionInternalNativeLoopPassed, _remotionInternalStack, _remotionDebugSeeking, style, pauseWhenBuffering, showInTimeline, loopVolumeCurveBehavior, onError, ...nativeProps } = props;
+    acceptableTimeShift, acceptableTimeShiftInSeconds, toneFrequency, name, _remotionInternalNativeLoopPassed, _remotionInternalStack, _remotionDebugSeeking, style, pauseWhenBuffering, showInTimeline, loopVolumeCurveBehavior, onError, onAutoPlayError, ...nativeProps } = props;
     const volumePropFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)(loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat');
     const { fps, durationInFrames } = (0, use_video_config_js_1.useVideoConfig)();
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
@@ -44,6 +44,7 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         stack: _remotionInternalStack,
         showInTimeline,
         premountDisplay: null,
+        onAutoPlayError: onAutoPlayError !== null && onAutoPlayError !== void 0 ? onAutoPlayError : null,
     });
     (0, use_sync_volume_with_media_tag_js_1.useSyncVolumeWithMediaTag)({
         volumePropFrame,
@@ -62,6 +63,7 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         isPremounting: Boolean(parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.premounting),
         pauseWhenBuffering,
         debugSeeking: _remotionDebugSeeking,
+        onAutoPlayError: onAutoPlayError !== null && onAutoPlayError !== void 0 ? onAutoPlayError : null,
     });
     const actualFrom = parentSequence ? parentSequence.relativeFrom : 0;
     const duration = parentSequence

package/dist/cjs/video/VideoForRendering.d.ts

@@ -13,6 +13,7 @@ export declare const VideoForRendering: ForwardRefExoticComponent<Omit<React.Det
     loopVolumeCurveBehavior?: import("../audio/use-audio-frame.js").LoopVolumeCurveBehavior | undefined;
     delayRenderRetries?: number | undefined;
     onError?: ((err: Error) => void) | undefined;
+    onAutoPlayError?: (() => void) | undefined;
 } & {
     readonly onDuration: (src: string, durationInSeconds: number) => void;
 } & RefAttributes<HTMLVideoElement>>;

package/dist/cjs/video/props.d.ts

@@ -23,6 +23,7 @@ export type RemotionVideoProps = Omit<React.DetailedHTMLProps<React.VideoHTMLAtt
     loopVolumeCurveBehavior?: LoopVolumeCurveBehavior;
     delayRenderRetries?: number;
     onError?: (err: Error) => void;
+    onAutoPlayError?: () => void;
 };
 type DeprecatedOffthreadVideoProps = {
     /**
@@ -54,5 +55,6 @@ export type OffthreadVideoProps = {
      */
     stack?: string;
     showInTimeline?: boolean;
+    onAutoPlayError?: null | (() => void);
 } & RemotionMainVideoProps & DeprecatedOffthreadVideoProps;
 export {};

package/dist/esm/index.mjs

@@ -138,7 +138,7 @@ function truthy(value) {
 }
 
 // src/version.ts
-var VERSION = "4.0.185";
+var VERSION = "4.0.187";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -300,46 +300,14 @@ var useNonce = () => {
 // src/timeline-position-state.ts
 var exports_timeline_position_state = {};
 __export(exports_timeline_position_state, {
-  useTimelineSetFrame: () => {
-    {
-      return useTimelineSetFrame;
-    }
-  },
-  useTimelinePosition: () => {
-    {
-      return useTimelinePosition;
-    }
-  },
-  usePlayingState: () => {
-    {
-      return usePlayingState;
-    }
-  },
-  persistCurrentFrame: () => {
-    {
-      return persistCurrentFrame;
-    }
-  },
-  getInitialFrameState: () => {
-    {
-      return getInitialFrameState;
-    }
-  },
-  getFrameForComposition: () => {
-    {
-      return getFrameForComposition;
-    }
-  },
-  TimelineContext: () => {
-    {
-      return TimelineContext;
-    }
-  },
-  SetTimelineContext: () => {
-    {
-      return SetTimelineContext;
-    }
-  }
+  useTimelineSetFrame: () => useTimelineSetFrame,
+  useTimelinePosition: () => useTimelinePosition,
+  usePlayingState: () => usePlayingState,
+  persistCurrentFrame: () => persistCurrentFrame,
+  getInitialFrameState: () => getInitialFrameState,
+  getFrameForComposition: () => getFrameForComposition,
+  TimelineContext: () => TimelineContext,
+  SetTimelineContext: () => SetTimelineContext
 });
 import {createContext as createContext8, useContext as useContext7, useMemo as useMemo7} from "react";
 
@@ -2149,7 +2117,7 @@ var getAssetDisplayName = (filename) => {
 };
 
 // src/play-and-handle-not-allowed-error.ts
-var playAndHandleNotAllowedError = (mediaRef, mediaType) => {
+var playAndHandleNotAllowedError = (mediaRef, mediaType, onAutoPlayError) => {
   const { current } = mediaRef;
   if (!current) {
     return;
@@ -2177,7 +2145,14 @@ var playAndHandleNotAllowedError = (mediaRef, mediaType) => {
       }
       console.log(`Could not play ${mediaType} due to following error: `, err);
       if (!current.muted) {
+        if (onAutoPlayError) {
+          onAutoPlayError();
+          return;
+        }
         console.log(`The video will be muted and we'll retry playing it.`);
+        if (mediaType === "video" && getRemotionEnvironment().isPlayer) {
+          console.log("Use onAutoPlayError() to handle this error yourself.");
+        }
         current.muted = true;
         current.play();
       }
@@ -2232,7 +2207,8 @@ var useMediaInTimeline = ({
   id,
   stack,
   showInTimeline,
-  premountDisplay
+  premountDisplay,
+  onAutoPlayError
 }) => {
   const videoConfig = useVideoConfig();
   const { rootId, audioAndVideoTags } = useContext16(TimelineContext);
@@ -2327,14 +2303,14 @@ var useMediaInTimeline = ({
         if (!playing) {
           return;
         }
-        return playAndHandleNotAllowedError(mediaRef, mediaType);
+        return playAndHandleNotAllowedError(mediaRef, mediaType, onAutoPlayError);
       }
     };
     audioAndVideoTags.current.push(tag);
     return () => {
       audioAndVideoTags.current = audioAndVideoTags.current.filter((a) => a.id !== id);
     };
-  }, [audioAndVideoTags, id, mediaRef, mediaType, playing]);
+  }, [audioAndVideoTags, id, mediaRef, mediaType, onAutoPlayError, playing]);
 };
 
 // src/use-media-playback.ts
@@ -2855,7 +2831,8 @@ var useMediaPlayback = ({
   acceptableTimeshift,
   pauseWhenBuffering,
   isPremounting,
-  debugSeeking
+  debugSeeking,
+  onAutoPlayError
 }) => {
   const { playbackRate: globalPlaybackRate } = useContext18(TimelineContext);
   const frame = useCurrentFrame();
@@ -2963,7 +2940,7 @@ var useMediaPlayback = ({
       if (playing && !isVariableFpsVideo) {
         bufferUntilFirstFrame(shouldBeTime);
         if (mediaRef.current.paused) {
-          playAndHandleNotAllowedError(mediaRef, mediaType);
+          playAndHandleNotAllowedError(mediaRef, mediaType, onAutoPlayError);
         }
       }
       if (!onlyWarnForMediaSeekingError) {
@@ -2985,7 +2962,7 @@ var useMediaPlayback = ({
       if (makesSenseToSeek) {
         seek(mediaRef, shouldBeTime);
       }
-      playAndHandleNotAllowedError(mediaRef, mediaType);
+      playAndHandleNotAllowedError(mediaRef, mediaType, onAutoPlayError);
       if (!isVariableFpsVideo) {
         bufferUntilFirstFrame(shouldBeTime);
       }
@@ -3005,7 +2982,8 @@ var useMediaPlayback = ({
     onlyWarnForMediaSeekingError,
     playbackRate,
     playing,
-    src
+    src,
+    onAutoPlayError
   ]);
 };
 
@@ -3231,7 +3209,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, component }) =>
   }, [rerenderAudios]);
   const playAllAudios = useCallback8(() => {
     refs.forEach((ref) => {
-      playAndHandleNotAllowedError(ref.ref, "audio");
+      playAndHandleNotAllowedError(ref.ref, "audio", null);
     });
   }, [refs]);
   const value = useMemo19(() => {
@@ -3394,7 +3372,8 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     id: timelineId,
     stack: _remotionInternalStack,
     showInTimeline,
-    premountDisplay: null
+    premountDisplay: null,
+    onAutoPlayError: null
   });
   useMediaPlayback({
     mediaRef: audioRef,
@@ -3405,7 +3384,8 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     acceptableTimeshift: acceptableTimeShiftInSeconds ?? DEFAULT_ACCEPTABLE_TIMESHIFT,
     isPremounting: Boolean(sequenceContext?.premounting),
     pauseWhenBuffering,
-    debugSeeking: _remotionDebugSeeking
+    debugSeeking: _remotionDebugSeeking,
+    onAutoPlayError: null
   });
   useImperativeHandle3(ref, () => {
     return audioRef.current;
@@ -4322,18 +4302,18 @@ class Easing {
     return (t) => t * t * ((s + 1) * t - s);
   }
   static bounce(t) {
-    if (t < 0.36363636363636365) {
+    if (t < 1 / 2.75) {
       return 7.5625 * t * t;
     }
-    if (t < 0.7272727272727273) {
-      const t2_ = t - 0.5454545454545454;
+    if (t < 2 / 2.75) {
+      const t2_ = t - 1.5 / 2.75;
       return 7.5625 * t2_ * t2_ + 0.75;
     }
-    if (t < 0.9090909090909091) {
-      const t2_ = t - 0.8181818181818182;
+    if (t < 2.5 / 2.75) {
+      const t2_ = t - 2.25 / 2.75;
       return 7.5625 * t2_ * t2_ + 0.9375;
     }
-    const t2 = t - 0.9545454545454546;
+    const t2 = t - 2.625 / 2.75;
     return 7.5625 * t2 * t2 + 0.984375;
   }
   static bezier(x1, y1, x2, y2) {
@@ -4548,21 +4528,9 @@ var Img = forwardRef7(ImgRefForwarding);
 // src/default-css.ts
 var exports_default_css = {};
 __export(exports_default_css, {
-  makeDefaultPreviewCSS: () => {
-    {
-      return makeDefaultPreviewCSS;
-    }
-  },
-  injectCSS: () => {
-    {
-      return injectCSS;
-    }
-  },
-  OFFTHREAD_VIDEO_CLASS_NAME: () => {
-    {
-      return OFFTHREAD_VIDEO_CLASS_NAME;
-    }
-  }
+  makeDefaultPreviewCSS: () => makeDefaultPreviewCSS,
+  injectCSS: () => injectCSS,
+  OFFTHREAD_VIDEO_CLASS_NAME: () => OFFTHREAD_VIDEO_CLASS_NAME
 });
 var injected = {};
 var injectCSS = (css) => {
@@ -5050,23 +5018,23 @@ var hue2rgb = function(p, q, t) {
   if (t > 1) {
     t -= 1;
   }
-  if (t < 0.16666666666666666) {
+  if (t < 1 / 6) {
     return p + (q - p) * 6 * t;
   }
-  if (t < 0.5) {
+  if (t < 1 / 2) {
     return q;
   }
-  if (t < 0.6666666666666666) {
-    return p + (q - p) * (0.6666666666666666 - t) * 6;
+  if (t < 2 / 3) {
+    return p + (q - p) * (2 / 3 - t) * 6;
   }
   return p;
 };
 var hslToRgb = function(h, s, l) {
   const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
   const p = 2 * l - q;
-  const r = hue2rgb(p, q, h + 0.3333333333333333);
+  const r = hue2rgb(p, q, h + 1 / 3);
   const g = hue2rgb(p, q, h);
-  const b2 = hue2rgb(p, q, h - 0.3333333333333333);
+  const b2 = hue2rgb(p, q, h - 1 / 3);
   return Math.round(r * 255) << 24 | Math.round(g * 255) << 16 | Math.round(b2 * 255) << 8;
 };
 var parse255 = function(str) {
@@ -5898,8 +5866,10 @@ var OffthreadVideoForRendering = ({
         const blob = await res.blob();
         const url = URL.createObjectURL(blob);
         cleanup.push(() => URL.revokeObjectURL(url));
-        setImageSrc(url);
-        continueRender(newHandle);
+        setImageSrc({
+          src: url,
+          handle: newHandle
+        });
       } catch (err) {
         if (onError) {
           onError(err);
@@ -5937,8 +5907,9 @@ var OffthreadVideoForRendering = ({
   if (!imageSrc) {
     return null;
   }
+  continueRender(imageSrc.handle);
   return jsx29(Img, {
-    src: imageSrc,
+    src: imageSrc.src,
     className,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
@@ -5981,6 +5952,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     showInTimeline,
     loopVolumeCurveBehavior,
     onError,
+    onAutoPlayError,
     ...nativeProps
   } = props2;
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
@@ -6006,7 +5978,8 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     id: timelineId,
     stack: _remotionInternalStack,
     showInTimeline,
-    premountDisplay: null
+    premountDisplay: null,
+    onAutoPlayError: onAutoPlayError ?? null
   });
   useSyncVolumeWithMediaTag({
     volumePropFrame,
@@ -6024,7 +5997,8 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     acceptableTimeshift: acceptableTimeShiftInSeconds ?? DEFAULT_ACCEPTABLE_TIMESHIFT,
     isPremounting: Boolean(parentSequence?.premounting),
     pauseWhenBuffering,
-    debugSeeking: _remotionDebugSeeking
+    debugSeeking: _remotionDebugSeeking,
+    onAutoPlayError: onAutoPlayError ?? null
   });
   const actualFrom = parentSequence ? parentSequence.relativeFrom : 0;
   const duration = parentSequence ? Math.min(parentSequence.durationInFrames, durationInFrames) : durationInFrames;
@@ -6164,6 +6138,7 @@ var OffthreadVideo = (props2) => {
     transparent,
     toneMapped,
     _remotionDebugSeeking,
+    onAutoPlayError,
     ...withoutTransparent
   } = otherProps;
   return jsx31(VideoForPreview, {
@@ -6174,6 +6149,7 @@ var OffthreadVideo = (props2) => {
     onlyWarnForMediaSeekingError: true,
     pauseWhenBuffering: pauseWhenBuffering ?? false,
     showInTimeline: showInTimeline ?? true,
+    onAutoPlayError: onAutoPlayError ?? undefined,
     ...withoutTransparent
   });
 };
@@ -6484,6 +6460,7 @@ var VideoForwardingFunction = (props2, ref) => {
     stack,
     _remotionInternalNativeLoopPassed,
     showInTimeline,
+    onAutoPlayError,
     ...otherProps
   } = props2;
   const { loop: loop4, _remotionDebugSeeking, ...propsOtherThanLoop } = props2;
@@ -6553,7 +6530,8 @@ var VideoForwardingFunction = (props2, ref) => {
     _remotionInternalStack: stack ?? null,
     _remotionInternalNativeLoopPassed: _remotionInternalNativeLoopPassed ?? false,
     _remotionDebugSeeking: _remotionDebugSeeking ?? false,
-    showInTimeline: showInTimeline ?? true
+    showInTimeline: showInTimeline ?? true,
+    onAutoPlayError: onAutoPlayError ?? undefined
   });
 };
 var Video = forwardRef11(VideoForwardingFunction);

package/dist/esm/no-react.mjs

@@ -318,23 +318,23 @@ var hue2rgb = function(p, q, t) {
   if (t > 1) {
     t -= 1;
   }
-  if (t < 0.16666666666666666) {
+  if (t < 1 / 6) {
     return p + (q - p) * 6 * t;
   }
-  if (t < 0.5) {
+  if (t < 1 / 2) {
     return q;
   }
-  if (t < 0.6666666666666666) {
-    return p + (q - p) * (0.6666666666666666 - t) * 6;
+  if (t < 2 / 3) {
+    return p + (q - p) * (2 / 3 - t) * 6;
   }
   return p;
 };
 var hslToRgb = function(h, s, l) {
   const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
   const p = 2 * l - q;
-  const r = hue2rgb(p, q, h + 0.3333333333333333);
+  const r = hue2rgb(p, q, h + 1 / 3);
   const g = hue2rgb(p, q, h);
-  const b = hue2rgb(p, q, h - 0.3333333333333333);
+  const b = hue2rgb(p, q, h - 1 / 3);
   return Math.round(r * 255) << 24 | Math.round(g * 255) << 16 | Math.round(b * 255) << 8;
 };
 var parse255 = function(str) {

package/dist/esm/version.mjs

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

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/core"
   },
   "name": "remotion",
-  "version": "4.0.185",
+  "version": "4.0.187",
   "description": "Make videos programmatically",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",