remotion 4.0.186 → 4.0.188

package/dist/cjs/_check-rsc.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/_check-rsc.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+if (typeof react_1.createContext !== 'function') {
+    const err = [
+        'Remotion requires React.createContext, but it is "undefined".',
+        'If you are in a React Server Component, turn it into a client component by adding "use client" at the top of the file.',
+        '',
+        'Before:',
+        '  import {useCurrentFrame} from "remotion";',
+        '',
+        'After:',
+        '  "use client";',
+        '  import {useCurrentFrame} from "remotion";',
+    ];
+    throw new Error(err.join('\n'));
+}

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/buffer-until-first-frame.d.ts

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

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

@@ -3,13 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useBufferUntilFirstFrame = void 0;
 const react_1 = require("react");
 const use_buffer_state_1 = require("./use-buffer-state");
-const useBufferUntilFirstFrame = ({ mediaRef, mediaType, onVariableFpsVideoDetected, }) => {
+const useBufferUntilFirstFrame = ({ mediaRef, mediaType, onVariableFpsVideoDetected, pauseWhenBuffering, }) => {
     const bufferingRef = (0, react_1.useRef)(false);
     const { delayPlayback } = (0, use_buffer_state_1.useBufferState)();
     const bufferUntilFirstFrame = (0, react_1.useCallback)((requestedTime) => {
         if (mediaType !== 'video') {
             return;
         }
+        if (!pauseWhenBuffering) {
+            return;
+        }
         const current = mediaRef.current;
         if (!current) {
             return;
@@ -47,7 +50,13 @@ const useBufferUntilFirstFrame = ({ mediaRef, mediaType, onVariableFpsVideoDetec
         });
         current.addEventListener('ended', onEndedOrPause, { once: true });
         current.addEventListener('pause', onEndedOrPause, { once: true });
-    }, [delayPlayback, mediaRef, mediaType, onVariableFpsVideoDetected]);
+    }, [
+        delayPlayback,
+        mediaRef,
+        mediaType,
+        onVariableFpsVideoDetected,
+        pauseWhenBuffering,
+    ]);
     return (0, react_1.useMemo)(() => {
         return {
             isBuffering: () => bufferingRef.current,

package/dist/cjs/check-rsc.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/check-rsc.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+if (typeof react_1.createContext !== 'function') {
+    throw new Error('React 18 is required for Remotion');
+}

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)();
@@ -32,21 +32,10 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
     const { fps } = (0, use_video_config_js_1.useVideoConfig)();
     const mediaStartsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
     const lastSeekDueToShift = (0, react_1.useRef)(null);
+    const lastSeek = (0, react_1.useRef)(null);
     if (!buffering) {
         throw new Error('useMediaPlayback must be used inside a <BufferingContext>');
     }
-    const currentTime = (0, use_request_video_callback_time_js_1.useRequestVideoCallbackTime)(mediaRef, mediaType);
-    const desiredUnclampedTime = (0, get_current_time_js_1.getMediaTime)({
-        frame,
-        playbackRate: localPlaybackRate,
-        startFrom: -mediaStartsAt,
-        fps,
-    });
-    const isMediaTagBuffering = (0, use_media_buffering_js_1.useMediaBuffering)({
-        element: mediaRef,
-        shouldBuffer: pauseWhenBuffering,
-        isPremounting,
-    });
     const isVariableFpsVideoMap = (0, react_1.useRef)({});
     const onVariableFpsVideoDetected = (0, react_1.useCallback)(() => {
         if (!src) {
@@ -58,10 +47,28 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         }
         isVariableFpsVideoMap.current[src] = true;
     }, [debugSeeking, src]);
+    const currentTime = (0, use_request_video_callback_time_js_1.useRequestVideoCallbackTime)({
+        mediaRef,
+        mediaType,
+        lastSeek,
+        onVariableFpsVideoDetected,
+    });
+    const desiredUnclampedTime = (0, get_current_time_js_1.getMediaTime)({
+        frame,
+        playbackRate: localPlaybackRate,
+        startFrom: -mediaStartsAt,
+        fps,
+    });
+    const isMediaTagBuffering = (0, use_media_buffering_js_1.useMediaBuffering)({
+        element: mediaRef,
+        shouldBuffer: pauseWhenBuffering,
+        isPremounting,
+    });
     const { bufferUntilFirstFrame, isBuffering } = (0, buffer_until_first_frame_js_1.useBufferUntilFirstFrame)({
         mediaRef,
         mediaType,
         onVariableFpsVideoDetected,
+        pauseWhenBuffering,
     });
     const playbackRate = localPlaybackRate * globalPlaybackRate;
     // For short audio, a lower acceptable time shift is used
@@ -137,14 +144,16 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
                     isTime: mediaTagTime,
                     rvcTime,
                     timeShift,
+                    isVariableFpsVideo,
                 });
             }
             seek(mediaRef, shouldBeTime);
+            lastSeek.current = shouldBeTime;
             lastSeekDueToShift.current = shouldBeTime;
             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) {
@@ -164,6 +173,7 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         if (!playing || isSomethingElseBuffering) {
             if (makesSenseToSeek) {
                 seek(mediaRef, shouldBeTime);
+                lastSeek.current = shouldBeTime;
             }
             return;
         }
@@ -172,8 +182,9 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
             absoluteFrame === 0) {
             if (makesSenseToSeek) {
                 seek(mediaRef, shouldBeTime);
+                lastSeek.current = 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 +205,7 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         playbackRate,
         playing,
         src,
+        onAutoPlayError,
     ]);
 };
 exports.useMediaPlayback = useMediaPlayback;

package/dist/cjs/use-request-video-callback-time.d.ts

@@ -1,2 +1,7 @@
 import type { RefObject } from 'react';
-export declare const useRequestVideoCallbackTime: (mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement>, mediaType: 'video' | 'audio') => import("react").MutableRefObject<number | null>;
+export declare const useRequestVideoCallbackTime: ({ mediaRef, mediaType, lastSeek, onVariableFpsVideoDetected, }: {
+    mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement>;
+    mediaType: 'video' | 'audio';
+    lastSeek: React.MutableRefObject<number | null>;
+    onVariableFpsVideoDetected: () => void;
+}) => import("react").MutableRefObject<number | null>;

package/dist/cjs/use-request-video-callback-time.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRequestVideoCallbackTime = void 0;
 const react_1 = require("react");
-const useRequestVideoCallbackTime = (mediaRef, mediaType) => {
+const useRequestVideoCallbackTime = ({ mediaRef, mediaType, lastSeek, onVariableFpsVideoDetected, }) => {
     const currentTime = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const { current } = mediaRef;
@@ -27,6 +27,20 @@ const useRequestVideoCallbackTime = (mediaRef, mediaType) => {
                 return;
             }
             const cb = videoTag.requestVideoFrameCallback((_, info) => {
+                if (currentTime.current !== null) {
+                    const difference = Math.abs(currentTime.current - info.mediaTime);
+                    const differenceToLastSeek = Math.abs(lastSeek.current === null
+                        ? Infinity
+                        : info.mediaTime - lastSeek.current);
+                    // If a video suddenly jumps to a position much further than previously
+                    // and there was no relevant seek
+                    // Case to be seen with 66a4a49b0862333a56c7d03c.mp4 and autoPlay and pauseWhenBuffering
+                    if (difference > 0.5 &&
+                        differenceToLastSeek > 0.5 &&
+                        info.mediaTime > currentTime.current) {
+                        onVariableFpsVideoDetected();
+                    }
+                }
                 currentTime.current = info.mediaTime;
                 request();
             });
@@ -39,7 +53,7 @@ const useRequestVideoCallbackTime = (mediaRef, mediaType) => {
         return () => {
             cancel();
         };
-    }, [mediaRef, mediaType]);
+    }, [lastSeek, mediaRef, mediaType, onVariableFpsVideoDetected]);
     return currentTime;
 };
 exports.useRequestVideoCallbackTime = useRequestVideoCallbackTime;

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

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.186';
+exports.VERSION = '4.0.188';

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,10 +130,19 @@ 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 component is unmounted, we should not throw
+                if (err.message.includes('aborted')) {
+                    return;
+                }
+                if (controller.signal.aborted) {
+                    return;
+                }
                 if (onError) {
                     onError(err);
                 }
@@ -174,6 +183,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.186";
+var VERSION = "4.0.188";
 
 // 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
@@ -2430,7 +2406,8 @@ var useBufferState = () => {
 var useBufferUntilFirstFrame = ({
   mediaRef,
   mediaType,
-  onVariableFpsVideoDetected
+  onVariableFpsVideoDetected,
+  pauseWhenBuffering
 }) => {
   const bufferingRef = useRef3(false);
   const { delayPlayback } = useBufferState();
@@ -2438,6 +2415,9 @@ var useBufferUntilFirstFrame = ({
     if (mediaType !== "video") {
       return;
     }
+    if (!pauseWhenBuffering) {
+      return;
+    }
     const current = mediaRef.current;
     if (!current) {
       return;
@@ -2471,7 +2451,13 @@ var useBufferUntilFirstFrame = ({
     });
     current.addEventListener("ended", onEndedOrPause, { once: true });
     current.addEventListener("pause", onEndedOrPause, { once: true });
-  }, [delayPlayback, mediaRef, mediaType, onVariableFpsVideoDetected]);
+  }, [
+    delayPlayback,
+    mediaRef,
+    mediaType,
+    onVariableFpsVideoDetected,
+    pauseWhenBuffering
+  ]);
   return useMemo17(() => {
     return {
       isBuffering: () => bufferingRef.current,
@@ -2556,7 +2542,12 @@ var useMediaBuffering = ({
 
 // src/use-request-video-callback-time.ts
 import {useEffect as useEffect11, useRef as useRef4} from "react";
-var useRequestVideoCallbackTime = (mediaRef, mediaType) => {
+var useRequestVideoCallbackTime = ({
+  mediaRef,
+  mediaType,
+  lastSeek,
+  onVariableFpsVideoDetected
+}) => {
   const currentTime = useRef4(null);
   useEffect11(() => {
     const { current } = mediaRef;
@@ -2582,6 +2573,13 @@ var useRequestVideoCallbackTime = (mediaRef, mediaType) => {
         return;
       }
       const cb = videoTag.requestVideoFrameCallback((_, info) => {
+        if (currentTime.current !== null) {
+          const difference = Math.abs(currentTime.current - info.mediaTime);
+          const differenceToLastSeek = Math.abs(lastSeek.current === null ? Infinity : info.mediaTime - lastSeek.current);
+          if (difference > 0.5 && differenceToLastSeek > 0.5 && info.mediaTime > currentTime.current) {
+            onVariableFpsVideoDetected();
+          }
+        }
         currentTime.current = info.mediaTime;
         request();
       });
@@ -2596,7 +2594,7 @@ var useRequestVideoCallbackTime = (mediaRef, mediaType) => {
     return () => {
       cancel();
     };
-  }, [mediaRef, mediaType]);
+  }, [lastSeek, mediaRef, mediaType, onVariableFpsVideoDetected]);
   return currentTime;
 };
 
@@ -2855,7 +2853,8 @@ var useMediaPlayback = ({
   acceptableTimeshift,
   pauseWhenBuffering,
   isPremounting,
-  debugSeeking
+  debugSeeking,
+  onAutoPlayError
 }) => {
   const { playbackRate: globalPlaybackRate } = useContext18(TimelineContext);
   const frame = useCurrentFrame();
@@ -2865,10 +2864,26 @@ var useMediaPlayback = ({
   const { fps } = useVideoConfig();
   const mediaStartsAt = useMediaStartsAt();
   const lastSeekDueToShift = useRef6(null);
+  const lastSeek = useRef6(null);
   if (!buffering3) {
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
-  const currentTime = useRequestVideoCallbackTime(mediaRef, mediaType);
+  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 currentTime = useRequestVideoCallbackTime({
+    mediaRef,
+    mediaType,
+    lastSeek,
+    onVariableFpsVideoDetected
+  });
   const desiredUnclampedTime = getMediaTime({
     frame,
     playbackRate: localPlaybackRate,
@@ -2880,20 +2895,11 @@ 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,
-    onVariableFpsVideoDetected
+    onVariableFpsVideoDetected,
+    pauseWhenBuffering
   });
   const playbackRate = localPlaybackRate * globalPlaybackRate;
   const acceptableTimeShiftButLessThanDuration = (() => {
@@ -2955,15 +2961,17 @@ var useMediaPlayback = ({
           shouldBeTime,
           isTime: mediaTagTime,
           rvcTime,
-          timeShift
+          timeShift,
+          isVariableFpsVideo
         });
       }
       seek(mediaRef, shouldBeTime);
+      lastSeek.current = shouldBeTime;
       lastSeekDueToShift.current = shouldBeTime;
       if (playing && !isVariableFpsVideo) {
         bufferUntilFirstFrame(shouldBeTime);
         if (mediaRef.current.paused) {
-          playAndHandleNotAllowedError(mediaRef, mediaType);
+          playAndHandleNotAllowedError(mediaRef, mediaType, onAutoPlayError);
         }
       }
       if (!onlyWarnForMediaSeekingError) {
@@ -2978,14 +2986,16 @@ var useMediaPlayback = ({
     if (!playing || isSomethingElseBuffering) {
       if (makesSenseToSeek) {
         seek(mediaRef, shouldBeTime);
+        lastSeek.current = shouldBeTime;
       }
       return;
     }
     if (mediaRef.current.paused && !mediaRef.current.ended || absoluteFrame === 0) {
       if (makesSenseToSeek) {
         seek(mediaRef, shouldBeTime);
+        lastSeek.current = shouldBeTime;
       }
-      playAndHandleNotAllowedError(mediaRef, mediaType);
+      playAndHandleNotAllowedError(mediaRef, mediaType, onAutoPlayError);
       if (!isVariableFpsVideo) {
         bufferUntilFirstFrame(shouldBeTime);
       }
@@ -3005,7 +3015,8 @@ var useMediaPlayback = ({
     onlyWarnForMediaSeekingError,
     playbackRate,
     playing,
-    src
+    src,
+    onAutoPlayError
   ]);
 };
 
@@ -3231,7 +3242,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 +3405,8 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     id: timelineId,
     stack: _remotionInternalStack,
     showInTimeline,
-    premountDisplay: null
+    premountDisplay: null,
+    onAutoPlayError: null
   });
   useMediaPlayback({
     mediaRef: audioRef,
@@ -3405,7 +3417,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 +4335,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 +4561,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 +5051,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,9 +5899,17 @@ 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 (err.message.includes("aborted")) {
+          return;
+        }
+        if (controller.signal.aborted) {
+          return;
+        }
         if (onError) {
           onError(err);
         } else {
@@ -5937,8 +5946,9 @@ var OffthreadVideoForRendering = ({
   if (!imageSrc) {
     return null;
   }
+  continueRender(imageSrc.handle);
   return jsx29(Img, {
-    src: imageSrc,
+    src: imageSrc.src,
     className,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
@@ -5981,6 +5991,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     showInTimeline,
     loopVolumeCurveBehavior,
     onError,
+    onAutoPlayError,
     ...nativeProps
   } = props2;
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
@@ -6006,7 +6017,8 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     id: timelineId,
     stack: _remotionInternalStack,
     showInTimeline,
-    premountDisplay: null
+    premountDisplay: null,
+    onAutoPlayError: onAutoPlayError ?? null
   });
   useSyncVolumeWithMediaTag({
     volumePropFrame,
@@ -6024,7 +6036,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 +6177,7 @@ var OffthreadVideo = (props2) => {
     transparent,
     toneMapped,
     _remotionDebugSeeking,
+    onAutoPlayError,
     ...withoutTransparent
   } = otherProps;
   return jsx31(VideoForPreview, {
@@ -6174,6 +6188,7 @@ var OffthreadVideo = (props2) => {
     onlyWarnForMediaSeekingError: true,
     pauseWhenBuffering: pauseWhenBuffering ?? false,
     showInTimeline: showInTimeline ?? true,
+    onAutoPlayError: onAutoPlayError ?? undefined,
     ...withoutTransparent
   });
 };
@@ -6484,6 +6499,7 @@ var VideoForwardingFunction = (props2, ref) => {
     stack,
     _remotionInternalNativeLoopPassed,
     showInTimeline,
+    onAutoPlayError,
     ...otherProps
   } = props2;
   const { loop: loop4, _remotionDebugSeeking, ...propsOtherThanLoop } = props2;
@@ -6553,7 +6569,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.186";
+var VERSION = "4.0.188";
 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.186",
+  "version": "4.0.188",
   "description": "Make videos programmatically",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",