remotion 4.0.172 → 4.0.174

package/dist/cjs/audio/Audio.d.ts

@@ -12,6 +12,7 @@ export declare const Audio: React.ForwardRefExoticComponent<Omit<Omit<React.Deta
     allowAmplificationDuringRender?: boolean | undefined;
     _remotionInternalNeedsDurationCalculation?: boolean | undefined;
     _remotionInternalNativeLoopPassed?: boolean | undefined;
+    _remotionDebugSeeking?: boolean | undefined;
     toneFrequency?: number | undefined;
     pauseWhenBuffering?: boolean | undefined;
     showInTimeline?: boolean | undefined;

package/dist/cjs/audio/Audio.js

@@ -22,7 +22,7 @@ const shared_audio_tags_js_1 = require("./shared-audio-tags.js");
 const AudioRefForwardingFunction = (props, ref) => {
     var _a, _b, _c;
     const audioContext = (0, react_1.useContext)(shared_audio_tags_js_1.SharedAudioContext);
-    const { startFrom, endAt, name, stack, pauseWhenBuffering, showInTimeline, ...otherProps } = props;
+    const { startFrom, endAt, name, stack, pauseWhenBuffering, showInTimeline, _remotionDebugSeeking, ...otherProps } = props;
     const { loop, ...propsOtherThanLoop } = props;
     const { fps } = (0, use_video_config_js_1.useVideoConfig)();
     const environment = (0, get_remotion_environment_js_1.getRemotionEnvironment)();
@@ -68,7 +68,7 @@ const AudioRefForwardingFunction = (props, ref) => {
     if (environment.isRendering) {
         return ((0, jsx_runtime_1.jsx)(AudioForRendering_js_1.AudioForRendering, { onDuration: onDuration, ...props, ref: ref, onError: onError, _remotionInternalNeedsDurationCalculation: Boolean(loop) }));
     }
-    return ((0, jsx_runtime_1.jsx)(AudioForPreview_js_1.AudioForPreview, { _remotionInternalNativeLoopPassed: (_c = props._remotionInternalNativeLoopPassed) !== null && _c !== void 0 ? _c : false, _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, shouldPreMountAudioTags: audioContext !== null && audioContext.numberOfAudioTags > 0, ...props, ref: ref, onError: onError, onDuration: onDuration, 
+    return ((0, jsx_runtime_1.jsx)(AudioForPreview_js_1.AudioForPreview, { _remotionInternalNativeLoopPassed: (_c = props._remotionInternalNativeLoopPassed) !== null && _c !== void 0 ? _c : false, _remotionDebugSeeking: _remotionDebugSeeking !== null && _remotionDebugSeeking !== void 0 ? _remotionDebugSeeking : false, _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, shouldPreMountAudioTags: audioContext !== null && audioContext.numberOfAudioTags > 0, ...props, ref: ref, onError: onError, onDuration: onDuration, 
         // Proposal: Make this default to true in v5
         pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, _remotionInternalNeedsDurationCalculation: Boolean(loop), showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true }));
 };

package/dist/cjs/audio/AudioForPreview.d.ts

@@ -6,6 +6,7 @@ type AudioForPreviewProps = RemotionAudioProps & {
     readonly pauseWhenBuffering: boolean;
     readonly _remotionInternalNativeLoopPassed: boolean;
     readonly _remotionInternalStack: string | null;
+    readonly _remotionDebugSeeking: boolean;
     readonly showInTimeline: boolean;
     readonly stack?: string | undefined;
 };

package/dist/cjs/audio/AudioForPreview.js

@@ -7,7 +7,6 @@ const SequenceContext_js_1 = require("../SequenceContext.js");
 const SequenceManager_js_1 = require("../SequenceManager.js");
 const prefetch_js_1 = require("../prefetch.js");
 const random_js_1 = require("../random.js");
-const use_media_buffering_js_1 = require("../use-media-buffering.js");
 const use_media_in_timeline_js_1 = require("../use-media-in-timeline.js");
 const use_media_playback_js_1 = require("../use-media-playback.js");
 const use_media_tag_volume_js_1 = require("../use-media-tag-volume.js");
@@ -22,7 +21,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
     if (props.shouldPreMountAudioTags !== initialShouldPreMountAudioElements) {
         throw new Error('Cannot change the behavior for pre-mounting audio tags dynamically.');
     }
-    const { volume, muted, playbackRate, shouldPreMountAudioTags, src, onDuration, acceptableTimeShiftInSeconds, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, _remotionInternalStack, allowAmplificationDuringRender, name, pauseWhenBuffering, showInTimeline, loopVolumeCurveBehavior, stack, ...nativeProps } = props;
+    const { volume, muted, playbackRate, shouldPreMountAudioTags, src, onDuration, acceptableTimeShiftInSeconds, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, _remotionInternalStack, _remotionDebugSeeking, allowAmplificationDuringRender, name, pauseWhenBuffering, showInTimeline, loopVolumeCurveBehavior, stack, ...nativeProps } = props;
     const [mediaVolume] = (0, volume_position_state_js_1.useMediaVolumeState)();
     const [mediaMuted] = (0, volume_position_state_js_1.useMediaMutedState)();
     const volumePropFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)(loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat');
@@ -95,11 +94,9 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
         onlyWarnForMediaSeekingError: false,
         acceptableTimeshift: acceptableTimeShiftInSeconds !== null && acceptableTimeShiftInSeconds !== void 0 ? acceptableTimeShiftInSeconds : use_media_playback_js_1.DEFAULT_ACCEPTABLE_TIMESHIFT,
-    });
-    (0, use_media_buffering_js_1.useMediaBuffering)({
-        element: audioRef,
-        shouldBuffer: pauseWhenBuffering,
         isPremounting: Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting),
+        pauseWhenBuffering,
+        debugSeeking: _remotionDebugSeeking,
     });
     (0, react_1.useImperativeHandle)(ref, () => {
         return audioRef.current;

package/dist/cjs/audio/AudioForRendering.d.ts

@@ -8,6 +8,7 @@ export declare const AudioForRendering: ForwardRefExoticComponent<Omit<React.Det
     allowAmplificationDuringRender?: boolean | undefined;
     _remotionInternalNeedsDurationCalculation?: boolean | undefined;
     _remotionInternalNativeLoopPassed?: boolean | undefined;
+    _remotionDebugSeeking?: boolean | undefined;
     toneFrequency?: number | undefined;
     pauseWhenBuffering?: boolean | undefined;
     showInTimeline?: boolean | undefined;

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

@@ -13,6 +13,7 @@ export type RemotionAudioProps = Omit<React.DetailedHTMLProps<React.AudioHTMLAtt
     allowAmplificationDuringRender?: boolean;
     _remotionInternalNeedsDurationCalculation?: boolean;
     _remotionInternalNativeLoopPassed?: boolean;
+    _remotionDebugSeeking?: boolean;
     toneFrequency?: number;
     pauseWhenBuffering?: boolean;
     showInTimeline?: boolean;

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

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

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

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBufferUntilFirstFrame = void 0;
+const react_1 = require("react");
+const use_buffer_state_1 = require("./use-buffer-state");
+const useBufferUntilFirstFrame = ({ mediaRef, mediaType, }) => {
+    const bufferingRef = (0, react_1.useRef)(false);
+    const { delayPlayback } = (0, use_buffer_state_1.useBufferState)();
+    const bufferUntilFirstFrame = (0, react_1.useCallback)(({ skipIfPaused }) => {
+        if (mediaType !== 'video') {
+            return;
+        }
+        const current = mediaRef.current;
+        if (!current) {
+            return;
+        }
+        if (!current.requestVideoFrameCallback) {
+            return;
+        }
+        if (skipIfPaused && current.paused) {
+            return;
+        }
+        bufferingRef.current = true;
+        const playback = delayPlayback();
+        const unblock = () => {
+            playback.unblock();
+            current.removeEventListener('ended', unblock, {
+                // @ts-expect-error
+                once: true,
+            });
+            current.removeEventListener('pause', unblock, {
+                // @ts-expect-error
+                once: true,
+            });
+            bufferingRef.current = false;
+        };
+        const onEndedOrPause = () => {
+            unblock();
+        };
+        current.requestVideoFrameCallback(() => {
+            // Safari often seeks and then stalls.
+            // This makes sure that the video actually starts playing.
+            current.requestVideoFrameCallback(() => {
+                unblock();
+            });
+        });
+        current.addEventListener('ended', onEndedOrPause, { once: true });
+        current.addEventListener('pause', onEndedOrPause, { once: true });
+    }, [delayPlayback, mediaRef, mediaType]);
+    return (0, react_1.useMemo)(() => {
+        return {
+            isBuffering: () => bufferingRef.current,
+            bufferUntilFirstFrame,
+        };
+    }, [bufferUntilFirstFrame]);
+};
+exports.useBufferUntilFirstFrame = useBufferUntilFirstFrame;

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

@@ -36,7 +36,7 @@ const playAndHandleNotAllowedError = (mediaRef, mediaType) => {
             console.log(`Could not play ${mediaType} due to following error: `, err);
             if (!current.muted) {
                 // eslint-disable-next-line no-console
-                console.log(`The video will be muted and we'll retry playing it.`, err);
+                console.log(`The video will be muted and we'll retry playing it.`);
                 current.muted = true;
                 current.play();
             }

package/dist/cjs/use-buffer-state.d.ts

@@ -1,5 +1,8 @@
-export declare const useBufferState: () => {
-    delayPlayback: () => {
-        unblock: () => void;
-    };
+export type DelayPlaybackHandle = {
+    unblock: () => void;
 };
+type UseBufferState = {
+    delayPlayback: () => DelayPlaybackHandle;
+};
+export declare const useBufferState: () => UseBufferState;
+export {};

package/dist/cjs/use-buffer-state.js

@@ -5,16 +5,17 @@ const react_1 = require("react");
 const buffering_1 = require("./buffering");
 const useBufferState = () => {
     const buffer = (0, react_1.useContext)(buffering_1.BufferingContextReact);
+    if (!buffer) {
+        throw new Error('Tried to enable the buffering state, but a Remotion context was not found. This API can only be called in a component that was passed to the Remotion Player or a <Composition>. Or you might have experienced a version mismatch - run `npx remotion versions` and ensure all packages have the same version. This error is thrown by the buffer state https://remotion.dev/docs/player/buffer-state');
+    }
+    const { addBlock } = buffer;
     return (0, react_1.useMemo)(() => ({
         delayPlayback: () => {
-            if (!buffer) {
-                throw new Error('Tried to enable the buffering state, but a Remotion context was not found. This API can only be called in a component that was passed to the Remotion Player or a <Composition>. Or you might have experienced a version mismatch - run `npx remotion versions` and ensure all packages have the same version. This error is thrown by the buffer state https://remotion.dev/docs/player/buffer-state');
-            }
-            const { unblock } = buffer.addBlock({
+            const { unblock } = addBlock({
                 id: String(Math.random()),
             });
             return { unblock };
         },
-    }), [buffer]);
+    }), [addBlock]);
 };
 exports.useBufferState = useBufferState;

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

@@ -3,4 +3,4 @@ export declare const useMediaBuffering: ({ element, shouldBuffer, isPremounting,
     element: React.RefObject<HTMLVideoElement | HTMLAudioElement>;
     shouldBuffer: boolean;
     isPremounting: boolean;
-}) => void;
+}) => boolean;

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

@@ -5,6 +5,8 @@ const react_1 = require("react");
 const use_buffer_state_1 = require("./use-buffer-state");
 const useMediaBuffering = ({ element, shouldBuffer, isPremounting, }) => {
     const buffer = (0, use_buffer_state_1.useBufferState)();
+    const [isBuffering, setIsBuffering] = (0, react_1.useState)(false);
+    // Buffer state based on `waiting` and `canplay`
     (0, react_1.useEffect)(() => {
         let cleanupFns = [];
         const { current } = element;
@@ -20,8 +22,10 @@ const useMediaBuffering = ({ element, shouldBuffer, isPremounting, }) => {
         const cleanup = () => {
             cleanupFns.forEach((fn) => fn());
             cleanupFns = [];
+            setIsBuffering(false);
         };
         const onWaiting = () => {
+            setIsBuffering(true);
             const { unblock } = buffer.delayPlayback();
             const onCanPlay = () => {
                 cleanup();
@@ -75,5 +79,6 @@ const useMediaBuffering = ({ element, shouldBuffer, isPremounting, }) => {
             cleanup();
         };
     }, [buffer, element, isPremounting, shouldBuffer]);
+    return isBuffering;
 };
 exports.useMediaBuffering = useMediaBuffering;

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

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

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

@@ -3,10 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMediaPlayback = exports.DEFAULT_ACCEPTABLE_TIMESHIFT = void 0;
 const react_1 = require("react");
 const use_audio_frame_js_1 = require("./audio/use-audio-frame.js");
+const buffer_until_first_frame_js_1 = require("./buffer-until-first-frame.js");
 const buffering_js_1 = require("./buffering.js");
 const play_and_handle_not_allowed_error_js_1 = require("./play-and-handle-not-allowed-error.js");
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
 const use_current_frame_js_1 = require("./use-current-frame.js");
+const use_media_buffering_js_1 = require("./use-media-buffering.js");
+const use_request_video_callback_time_js_1 = require("./use-request-video-callback-time.js");
 const use_video_config_js_1 = require("./use-video-config.js");
 const get_current_time_js_1 = require("./video/get-current-time.js");
 const video_fragment_js_1 = require("./video/video-fragment.js");
@@ -17,13 +20,10 @@ const seek = (mediaRef, time) => {
         return;
     }
     // iOS seeking does not support multiple decimals
-    if ((0, video_fragment_js_1.isIosSafari)()) {
-        mediaRef.current.currentTime = Number(time.toFixed(1));
-        return;
-    }
-    mediaRef.current.currentTime = 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, }) => {
+const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybackRate, onlyWarnForMediaSeekingError, acceptableTimeshift, pauseWhenBuffering, isPremounting, debugSeeking, }) => {
     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)();
@@ -31,6 +31,25 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
     const buffering = (0, react_1.useContext)(buffering_js_1.BufferingContextReact);
     const { fps } = (0, use_video_config_js_1.useVideoConfig)();
     const mediaStartsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
+    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 { bufferUntilFirstFrame, isBuffering } = (0, buffer_until_first_frame_js_1.useBufferUntilFirstFrame)({
+        mediaRef,
+        mediaType,
+    });
     const playbackRate = localPlaybackRate * globalPlaybackRate;
     // For short audio, a lower acceptable time shift is used
     const acceptableTimeShiftButLessThanDuration = (() => {
@@ -40,14 +59,26 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         }
         return acceptableTimeshift;
     })();
-    const pausedOrBuffering = !playing || (buffering && buffering.buffering.current);
     (0, react_1.useEffect)(() => {
-        var _a;
-        if (pausedOrBuffering) {
+        var _a, _b;
+        if (!playing) {
             (_a = mediaRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+            return;
+        }
+        const isPlayerBuffering = buffering.buffering.current;
+        const isMediaTagBufferingOrStalled = isMediaTagBuffering || isBuffering();
+        if (isPlayerBuffering && !isMediaTagBufferingOrStalled) {
+            (_b = mediaRef.current) === null || _b === void 0 ? void 0 : _b.pause();
         }
-    }, [mediaRef, mediaType, pausedOrBuffering]);
+    }, [
+        buffering.buffering,
+        isBuffering,
+        isMediaTagBuffering,
+        mediaRef,
+        playing,
+    ]);
     (0, react_1.useEffect)(() => {
+        var _a;
         const tagName = mediaType === 'audio' ? '<Audio>' : '<Video>';
         if (!mediaRef.current) {
             throw new Error(`No ${mediaType} ref found`);
@@ -59,60 +90,79 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         if (mediaRef.current.playbackRate !== playbackRateToSet) {
             mediaRef.current.playbackRate = playbackRateToSet;
         }
-        const desiredUnclampedTime = (0, get_current_time_js_1.getMediaTime)({
-            frame,
-            playbackRate: localPlaybackRate,
-            startFrom: -mediaStartsAt,
-            fps,
-        });
         const { duration } = mediaRef.current;
         const shouldBeTime = !Number.isNaN(duration) && Number.isFinite(duration)
             ? Math.min(duration, desiredUnclampedTime)
             : desiredUnclampedTime;
         const isTime = mediaRef.current.currentTime;
-        const timeShift = Math.abs(shouldBeTime - isTime);
+        const rvcTime = (_a = currentTime.current) !== null && _a !== void 0 ? _a : null;
+        const timeShiftMediaTag = Math.abs(shouldBeTime - isTime);
+        const timeShiftRvcTag = rvcTime ? Math.abs(shouldBeTime - rvcTime) : null;
+        const timeShift = timeShiftRvcTag ? timeShiftRvcTag : timeShiftMediaTag;
+        if (debugSeeking) {
+            // eslint-disable-next-line no-console
+            console.log({
+                isTime,
+                rvcTime,
+                shouldBeTime,
+                state: mediaRef.current.readyState,
+                playing: !mediaRef.current.paused,
+            });
+        }
         if (timeShift > acceptableTimeShiftButLessThanDuration) {
             // If scrubbing around, adjust timing
             // or if time shift is bigger than 0.45sec
+            if (debugSeeking) {
+                // eslint-disable-next-line no-console
+                console.log('Seeking', { shouldBeTime, isTime, rvcTime, timeShift });
+            }
             seek(mediaRef, shouldBeTime);
+            bufferUntilFirstFrame({ skipIfPaused: true });
             if (!onlyWarnForMediaSeekingError) {
                 (0, warn_about_non_seekable_media_js_1.warnAboutNonSeekableMedia)(mediaRef.current, onlyWarnForMediaSeekingError ? 'console-warning' : 'console-error');
             }
             return;
         }
+        const seekThreshold = playing ? 0.15 : 0.00001;
         // Only perform a seek if the time is not already the same.
         // Chrome rounds to 6 digits, so 0.033333333 -> 0.033333,
         // therefore a threshold is allowed.
         // Refer to the https://github.com/remotion-dev/video-buffering-example
         // which is fixed by only seeking conditionally.
-        const makesSenseToSeek = Math.abs(mediaRef.current.currentTime - shouldBeTime) > 0.00001;
-        if (pausedOrBuffering || absoluteFrame === 0) {
+        const makesSenseToSeek = Math.abs(mediaRef.current.currentTime - shouldBeTime) > seekThreshold;
+        const isMediaTagBufferingOrStalled = isMediaTagBuffering || isBuffering();
+        const isSomethingElseBuffering = buffering.buffering.current && !isMediaTagBufferingOrStalled;
+        if (!playing || isSomethingElseBuffering) {
             if (makesSenseToSeek) {
                 seek(mediaRef, shouldBeTime);
             }
+            return;
         }
-        if (mediaRef.current.paused &&
-            !mediaRef.current.ended &&
-            !pausedOrBuffering) {
+        // We assured we are in playing state
+        if ((mediaRef.current.paused && !mediaRef.current.ended) ||
+            absoluteFrame === 0) {
             if (makesSenseToSeek) {
                 seek(mediaRef, shouldBeTime);
             }
             (0, play_and_handle_not_allowed_error_js_1.playAndHandleNotAllowedError)(mediaRef, mediaType);
+            bufferUntilFirstFrame({ skipIfPaused: false });
         }
     }, [
         absoluteFrame,
-        fps,
-        playbackRate,
-        frame,
+        acceptableTimeShiftButLessThanDuration,
+        bufferUntilFirstFrame,
+        buffering.buffering,
+        currentTime,
+        debugSeeking,
+        desiredUnclampedTime,
+        isBuffering,
+        isMediaTagBuffering,
         mediaRef,
         mediaType,
-        src,
-        mediaStartsAt,
-        localPlaybackRate,
         onlyWarnForMediaSeekingError,
-        acceptableTimeshift,
-        acceptableTimeShiftButLessThanDuration,
-        pausedOrBuffering,
+        playbackRate,
+        playing,
+        src,
     ]);
 };
 exports.useMediaPlayback = useMediaPlayback;

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

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

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

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRequestVideoCallbackTime = void 0;
+const react_1 = require("react");
+const useRequestVideoCallbackTime = (mediaRef, mediaType) => {
+    const currentTime = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const { current } = mediaRef;
+        if (current) {
+            currentTime.current = current.currentTime;
+        }
+        else {
+            currentTime.current = null;
+            return;
+        }
+        if (mediaType !== 'video') {
+            currentTime.current = null;
+            return;
+        }
+        const videoTag = current;
+        if (!videoTag.requestVideoFrameCallback) {
+            return;
+        }
+        let cancel = () => undefined;
+        const request = () => {
+            if (!videoTag) {
+                return;
+            }
+            const cb = videoTag.requestVideoFrameCallback((_, info) => {
+                currentTime.current = info.mediaTime;
+                request();
+            });
+            cancel = () => {
+                videoTag.cancelVideoFrameCallback(cb);
+                cancel = () => undefined;
+            };
+        };
+        request();
+        return () => {
+            cancel();
+        };
+    }, [mediaRef, mediaType]);
+    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.172";
+export declare const VERSION = "4.0.174";

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.172';
+exports.VERSION = '4.0.174';

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, ...withoutTransparent } = otherProps;
-    return ((0, jsx_runtime_1.jsx)(VideoForPreview_js_1.VideoForPreview, { _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, _remotionInternalNativeLoopPassed: 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, ...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 }));
 };
 exports.OffthreadVideo = OffthreadVideo;

package/dist/cjs/video/Video.js

@@ -20,7 +20,7 @@ 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 { loop, ...propsOtherThanLoop } = props;
+    const { loop, _remotionDebugSeeking, ...propsOtherThanLoop } = props;
     const { fps } = (0, use_video_config_js_1.useVideoConfig)();
     const environment = (0, get_remotion_environment_js_1.getRemotionEnvironment)();
     const { durations, setDurations } = (0, react_1.useContext)(duration_state_js_1.DurationsContext);
@@ -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, 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 }));
 };
 /**
  * @description allows you to include a video file in your Remotion project. It wraps the native HTMLVideoElement.

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

@@ -6,6 +6,7 @@ type VideoForPreviewProps = RemotionVideoProps & {
     readonly pauseWhenBuffering: boolean;
     readonly _remotionInternalNativeLoopPassed: boolean;
     readonly _remotionInternalStack: string | null;
+    readonly _remotionDebugSeeking: boolean;
     readonly showInTimeline: boolean;
 };
 export declare const VideoForPreview: React.ForwardRefExoticComponent<Omit<VideoForPreviewProps, "ref"> & React.RefAttributes<HTMLVideoElement>>;

package/dist/cjs/video/VideoForPreview.js

@@ -7,7 +7,6 @@ const SequenceContext_js_1 = require("../SequenceContext.js");
 const SequenceManager_js_1 = require("../SequenceManager.js");
 const use_audio_frame_js_1 = require("../audio/use-audio-frame.js");
 const prefetch_js_1 = require("../prefetch.js");
-const use_media_buffering_js_1 = require("../use-media-buffering.js");
 const use_media_in_timeline_js_1 = require("../use-media-in-timeline.js");
 const use_media_playback_js_1 = require("../use-media-playback.js");
 const use_media_tag_volume_js_1 = require("../use-media-tag-volume.js");
@@ -20,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, style, pauseWhenBuffering, showInTimeline, loopVolumeCurveBehavior, ...nativeProps } = props;
+    acceptableTimeShift, acceptableTimeShiftInSeconds, toneFrequency, name, _remotionInternalNativeLoopPassed, _remotionInternalStack, _remotionDebugSeeking, style, pauseWhenBuffering, showInTimeline, loopVolumeCurveBehavior, ...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);
@@ -60,11 +59,9 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         playbackRate: (_c = props.playbackRate) !== null && _c !== void 0 ? _c : 1,
         onlyWarnForMediaSeekingError,
         acceptableTimeshift: acceptableTimeShiftInSeconds !== null && acceptableTimeShiftInSeconds !== void 0 ? acceptableTimeShiftInSeconds : use_media_playback_js_1.DEFAULT_ACCEPTABLE_TIMESHIFT,
-    });
-    (0, use_media_buffering_js_1.useMediaBuffering)({
-        element: videoRef,
-        shouldBuffer: pauseWhenBuffering,
         isPremounting: Boolean(parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.premounting),
+        pauseWhenBuffering,
+        debugSeeking: _remotionDebugSeeking,
     });
     const actualFrom = parentSequence ? parentSequence.relativeFrom : 0;
     const duration = parentSequence

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

@@ -8,6 +8,7 @@ export type RemotionMainVideoProps = {
      * @deprecated Only for internal `transparent` use
      */
     _remotionInternalNativeLoopPassed?: boolean;
+    _remotionDebugSeeking?: boolean;
 };
 export type RemotionVideoProps = Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, 'autoPlay' | 'controls' | 'onEnded' | 'nonce'> & {
     name?: string;