remotion 4.0.249 → 4.0.251

package/dist/cjs/RemotionRoot.js

@@ -7,6 +7,7 @@ const CompositionManager_js_1 = require("./CompositionManager.js");
 const EditorProps_js_1 = require("./EditorProps.js");
 const buffering_js_1 = require("./buffering.js");
 const delay_render_js_1 = require("./delay-render.js");
+const log_level_context_js_1 = require("./log-level-context.js");
 const nonce_js_1 = require("./nonce.js");
 const prefetch_state_js_1 = require("./prefetch-state.js");
 const random_js_1 = require("./random.js");
@@ -86,6 +87,6 @@ const RemotionRoot = ({ children, numberOfAudioTags }) => {
             }
         }
     }, []);
-    return ((0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: nonceContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.TimelineContext.Provider, { value: timelineContextValue, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(EditorProps_js_1.EditorPropsProvider, { children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(CompositionManager_js_1.CompositionManagerProvider, { numberOfAudioTags: numberOfAudioTags, children: (0, jsx_runtime_1.jsx)(duration_state_js_1.DurationsContextProvider, { children: (0, jsx_runtime_1.jsx)(buffering_js_1.BufferingProvider, { children: children }) }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(log_level_context_js_1.LogLevelContext.Provider, { value: 'info', children: (0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: nonceContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.TimelineContext.Provider, { value: timelineContextValue, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(EditorProps_js_1.EditorPropsProvider, { children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(CompositionManager_js_1.CompositionManagerProvider, { numberOfAudioTags: numberOfAudioTags, children: (0, jsx_runtime_1.jsx)(duration_state_js_1.DurationsContextProvider, { children: (0, jsx_runtime_1.jsx)(buffering_js_1.BufferingProvider, { children: children }) }) }) }) }) }) }) }) }));
 };
 exports.RemotionRoot = RemotionRoot;

package/dist/cjs/animated-image/resolve-image-source.js

@@ -2,7 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.resolveAnimatedImageSource = void 0;
 const resolveAnimatedImageSource = (src) => {
-    return new URL(src, typeof window === 'undefined' ? undefined : window.origin)
-        .href;
+    if (typeof window === 'undefined') {
+        return src;
+    }
+    return new URL(src, window.origin).href;
 };
 exports.resolveAnimatedImageSource = resolveAnimatedImageSource;

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

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

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, _remotionDebugSeeking, ...otherProps } = props;
+    const { startFrom, endAt, name, stack, pauseWhenBuffering, showInTimeline, ...otherProps } = props;
     const { loop, ...propsOtherThanLoop } = props;
     const { fps } = (0, use_video_config_js_1.useVideoConfig)();
     const environment = (0, get_remotion_environment_js_1.getRemotionEnvironment)();
@@ -71,7 +71,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, _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, 
+    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, 
         // 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,7 +6,6 @@ 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

@@ -20,7 +20,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, _remotionDebugSeeking, allowAmplificationDuringRender, name, pauseWhenBuffering, showInTimeline, loopVolumeCurveBehavior, stack, ...nativeProps } = props;
+    const { volume, muted, playbackRate, shouldPreMountAudioTags, src, onDuration, acceptableTimeShiftInSeconds, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, _remotionInternalStack, 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,7 +95,6 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         acceptableTimeshift: acceptableTimeShiftInSeconds !== null && acceptableTimeShiftInSeconds !== void 0 ? acceptableTimeShiftInSeconds : use_media_playback_js_1.DEFAULT_ACCEPTABLE_TIMESHIFT,
         isPremounting: Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting),
         pauseWhenBuffering,
-        debugSeeking: _remotionDebugSeeking,
         onAutoPlayError: null,
     });
     (0, react_1.useImperativeHandle)(ref, () => {

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

@@ -12,7 +12,6 @@ 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/index.d.ts

@@ -86,6 +86,7 @@ export * from './IFrame.js';
 export { Img, ImgProps } from './Img.js';
 export * from './internals.js';
 export { interpolateColors } from './interpolate-colors.js';
+export { LogLevel } from './log.js';
 export { Loop } from './loop/index.js';
 export { EasingFunction, ExtrapolateType, interpolate, InterpolateOptions, random, RandomSeed, } from './no-react';
 export { prefetch, PrefetchOnProgress } from './prefetch.js';

package/dist/cjs/internals.d.ts

@@ -166,5 +166,13 @@ export declare const Internals: {
     } | null>;
     readonly PROPS_UPDATED_EXTERNALLY: "remotion.propsUpdatedExternally";
     readonly validateRenderAsset: (artifact: TRenderAsset) => void;
+    readonly Log: {
+        trace: (logLevel: import("./log.js").LogLevel, ...args: Parameters<typeof console.log>) => void;
+        verbose: (logLevel: import("./log.js").LogLevel, ...args: Parameters<typeof console.log>) => void;
+        info: (logLevel: import("./log.js").LogLevel, ...args: Parameters<typeof console.log>) => void;
+        warn: (logLevel: import("./log.js").LogLevel, ...args: Parameters<typeof console.log>) => void;
+        error: (...args: Parameters<typeof console.log>) => void;
+    };
+    readonly LogLevelContext: import("react").Context<"error" | "trace" | "verbose" | "info" | "warn" | null>;
 };
 export type { CompositionManagerContext, CompProps, MediaVolumeContextValue, RemotionEnvironment, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TRenderAsset as TAsset, TCompMetadata, TComposition, TimelinePosition as Timeline, TimelineContextValue, TSequence, WatchRemotionStaticFilesPayload, };

package/dist/cjs/internals.js

@@ -36,6 +36,8 @@ const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-trace
 const get_preview_dom_element_js_1 = require("./get-preview-dom-element.js");
 const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
 const is_player_js_1 = require("./is-player.js");
+const log_level_context_js_1 = require("./log-level-context.js");
+const log_js_1 = require("./log.js");
 const nonce_js_1 = require("./nonce.js");
 const portal_node_js_1 = require("./portal-node.js");
 const prefetch_state_js_1 = require("./prefetch-state.js");
@@ -124,4 +126,6 @@ exports.Internals = {
     editorPropsProviderRef: EditorProps_js_1.editorPropsProviderRef,
     PROPS_UPDATED_EXTERNALLY: ResolveCompositionConfig_js_1.PROPS_UPDATED_EXTERNALLY,
     validateRenderAsset: validate_artifact_js_1.validateRenderAsset,
+    Log: log_js_1.Log,
+    LogLevelContext: log_level_context_js_1.LogLevelContext,
 };

package/dist/cjs/log-level-context.d.ts

@@ -0,0 +1,4 @@
+import type { LogLevel } from './log';
+import React = require('react');
+export declare const LogLevelContext: React.Context<"error" | "trace" | "verbose" | "info" | "warn" | null>;
+export declare const useLogLevel: () => LogLevel;

package/dist/cjs/log-level-context.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogLevel = exports.LogLevelContext = void 0;
+const react_1 = require("react");
+const React = require("react");
+exports.LogLevelContext = (0, react_1.createContext)('info');
+const useLogLevel = () => {
+    const logLevel = React.useContext(exports.LogLevelContext);
+    if (logLevel === null) {
+        throw new Error('useLogLevel must be used within a LogLevelProvider');
+    }
+    return logLevel;
+};
+exports.useLogLevel = useLogLevel;

package/dist/cjs/log.d.ts

@@ -0,0 +1,10 @@
+export declare const logLevels: readonly ["trace", "verbose", "info", "warn", "error"];
+export type LogLevel = (typeof logLevels)[number];
+export declare const isEqualOrBelowLogLevel: (currentLevel: LogLevel, level: LogLevel) => boolean;
+export declare const Log: {
+    trace: (logLevel: LogLevel, ...args: Parameters<typeof console.log>) => void;
+    verbose: (logLevel: LogLevel, ...args: Parameters<typeof console.log>) => void;
+    info: (logLevel: LogLevel, ...args: Parameters<typeof console.log>) => void;
+    warn: (logLevel: LogLevel, ...args: Parameters<typeof console.log>) => void;
+    error: (...args: Parameters<typeof console.log>) => void;
+};

package/dist/cjs/log.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Log = exports.isEqualOrBelowLogLevel = exports.logLevels = void 0;
+/* eslint-disable no-console */
+exports.logLevels = ['trace', 'verbose', 'info', 'warn', 'error'];
+const getNumberForLogLevel = (level) => {
+    return exports.logLevels.indexOf(level);
+};
+const isEqualOrBelowLogLevel = (currentLevel, level) => {
+    return getNumberForLogLevel(currentLevel) <= getNumberForLogLevel(level);
+};
+exports.isEqualOrBelowLogLevel = isEqualOrBelowLogLevel;
+exports.Log = {
+    trace: (logLevel, ...args) => {
+        if ((0, exports.isEqualOrBelowLogLevel)(logLevel, 'trace')) {
+            return console.log(...args);
+        }
+    },
+    verbose: (logLevel, ...args) => {
+        if ((0, exports.isEqualOrBelowLogLevel)(logLevel, 'verbose')) {
+            return console.log(...args);
+        }
+    },
+    info: (logLevel, ...args) => {
+        if ((0, exports.isEqualOrBelowLogLevel)(logLevel, 'info')) {
+            return console.log(...args);
+        }
+    },
+    warn: (logLevel, ...args) => {
+        if ((0, exports.isEqualOrBelowLogLevel)(logLevel, 'warn')) {
+            return console.warn(...args);
+        }
+    },
+    error: (...args) => {
+        return console.error(...args);
+    },
+};

package/dist/cjs/prefetch.d.ts

@@ -1,3 +1,4 @@
+import type { LogLevel } from './log.js';
 export declare const usePreload: (src: string) => string;
 type FetchAndPreload = {
     free: () => void;
@@ -12,5 +13,6 @@ export declare const prefetch: (src: string, options?: {
     contentType?: string;
     onProgress?: PrefetchOnProgress;
     credentials?: RequestCredentials;
+    logLevel?: LogLevel;
 }) => FetchAndPreload;
 export {};

package/dist/cjs/prefetch.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.prefetch = exports.usePreload = void 0;
 const react_1 = require("react");
 const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
+const log_js_1 = require("./log.js");
 const prefetch_state_js_1 = require("./prefetch-state.js");
 const usePreload = (src) => {
     var _a;
@@ -52,14 +53,16 @@ const getBlobFromReader = async ({ reader, contentType, contentLength, onProgres
  * @see [Documentation](https://www.remotion.dev/docs/prefetch)
  */
 const prefetch = (src, options) => {
-    var _a, _b;
+    var _a, _b, _c;
     const method = (_a = options === null || options === void 0 ? void 0 : options.method) !== null && _a !== void 0 ? _a : 'blob-url';
+    const logLevel = (_b = options === null || options === void 0 ? void 0 : options.logLevel) !== null && _b !== void 0 ? _b : 'info';
     if ((0, get_remotion_environment_js_1.getRemotionEnvironment)().isRendering) {
         return {
             free: () => undefined,
             waitUntilDone: () => Promise.resolve(src),
         };
     }
+    log_js_1.Log.verbose(logLevel, `[prefetch] Starting prefetch ${src}`);
     let canceled = false;
     let objectUrl = null;
     let resolve = () => undefined;
@@ -72,7 +75,7 @@ const prefetch = (src, options) => {
     let canBeAborted = true;
     fetch(src, {
         signal: controller.signal,
-        credentials: (_b = options === null || options === void 0 ? void 0 : options.credentials) !== null && _b !== void 0 ? _b : undefined,
+        credentials: (_c = options === null || options === void 0 ? void 0 : options.credentials) !== null && _c !== void 0 ? _c : undefined,
     })
         .then((res) => {
         var _a, _b, _c;
@@ -122,6 +125,7 @@ const prefetch = (src, options) => {
         if (canceled) {
             return;
         }
+        log_js_1.Log.trace(logLevel, `[prefetch] Finished prefetch ${src} with method ${method}`);
         objectUrl = url;
         (0, prefetch_state_js_1.setPreloads)((p) => ({
             ...p,
@@ -137,6 +141,7 @@ const prefetch = (src, options) => {
     });
     return {
         free: () => {
+            log_js_1.Log.trace(logLevel, `[prefetch] Freeing ${src}`);
             if (objectUrl) {
                 if (method === 'blob-url') {
                     URL.revokeObjectURL(objectUrl);

package/dist/cjs/seek.d.ts

@@ -0,0 +1,7 @@
+import type { LogLevel } from './log';
+export declare const seek: ({ mediaRef, time, logLevel, why, }: {
+    mediaRef: HTMLVideoElement | HTMLAudioElement;
+    time: number;
+    logLevel: LogLevel;
+    why: string;
+}) => number;

package/dist/cjs/seek.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.seek = void 0;
+const log_1 = require("./log");
+const video_fragment_1 = require("./video/video-fragment");
+const seek = ({ mediaRef, time, logLevel, why, }) => {
+    // iOS seeking does not support multiple decimals
+    const timeToSet = (0, video_fragment_1.isIosSafari)() ? Number(time.toFixed(1)) : time;
+    log_1.Log.trace(logLevel, `[seek] from ${mediaRef.currentTime} to ${timeToSet}. Reason: ${why}`);
+    mediaRef.currentTime = timeToSet;
+    return timeToSet;
+};
+exports.seek = seek;

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

@@ -1,6 +1,8 @@
 import type React from 'react';
-export declare const useMediaBuffering: ({ element, shouldBuffer, isPremounting, }: {
+import type { LogLevel } from './log';
+export declare const useMediaBuffering: ({ element, shouldBuffer, isPremounting, logLevel, }: {
     element: React.RefObject<HTMLVideoElement | HTMLAudioElement | null>;
     shouldBuffer: boolean;
     isPremounting: boolean;
+    logLevel: LogLevel;
 }) => boolean;

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

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMediaBuffering = void 0;
 const react_1 = require("react");
+const log_1 = require("./log");
 const use_buffer_state_1 = require("./use-buffer-state");
-const useMediaBuffering = ({ element, shouldBuffer, isPremounting, }) => {
+const useMediaBuffering = ({ element, shouldBuffer, isPremounting, logLevel, }) => {
     const buffer = (0, use_buffer_state_1.useBufferState)();
     const [isBuffering, setIsBuffering] = (0, react_1.useState)(false);
     // Buffer state based on `waiting` and `canplay`
@@ -26,26 +27,28 @@ const useMediaBuffering = ({ element, shouldBuffer, isPremounting, }) => {
             // Breaks on Firefox though: https://github.com/remotion-dev/remotion/issues/3915
             if (current.readyState < current.HAVE_FUTURE_DATA) {
                 if (!navigator.userAgent.includes('Firefox/')) {
+                    log_1.Log.trace(logLevel, `[load] Calling .load() on ${current.src} because readyState is ${current.readyState} and it is not Firefox. Element is premounted`);
                     current.load();
                 }
             }
             return;
         }
-        const cleanup = () => {
-            cleanupFns.forEach((fn) => fn());
+        const cleanup = (reason) => {
+            cleanupFns.forEach((fn) => fn(reason));
             cleanupFns = [];
             setIsBuffering(false);
         };
-        const onWaiting = () => {
+        const blockMedia = (reason) => {
             setIsBuffering(true);
+            log_1.Log.trace(logLevel, `[buffer] buffering ${current.src}. reason = ${reason}`);
             const { unblock } = buffer.delayPlayback();
             const onCanPlay = () => {
-                cleanup();
+                cleanup('"canplay" was fired');
                 // eslint-disable-next-line @typescript-eslint/no-use-before-define
                 init();
             };
             const onError = () => {
-                cleanup();
+                cleanup('"error" event was occurred');
                 // eslint-disable-next-line @typescript-eslint/no-use-before-define
                 init();
             };
@@ -61,13 +64,14 @@ const useMediaBuffering = ({ element, shouldBuffer, isPremounting, }) => {
             cleanupFns.push(() => {
                 current.removeEventListener('error', onError);
             });
-            cleanupFns.push(() => {
+            cleanupFns.push((cleanupReason) => {
+                log_1.Log.trace(logLevel, `unblocking ${current.src} from buffer. reason = ${cleanupReason}`);
                 unblock();
             });
         };
         const init = () => {
             if (current.readyState < current.HAVE_FUTURE_DATA) {
-                onWaiting();
+                blockMedia(`readyState is ${current.readyState}, which is less than HAVE_FUTURE_DATA`);
                 // Needed by iOS Safari which will not load by default
                 // and therefore not fire the canplay event.
                 // Be cautious about using `current.load()` as it will
@@ -76,10 +80,14 @@ const useMediaBuffering = ({ element, shouldBuffer, isPremounting, }) => {
                 // has no future data.
                 // Breaks on Firefox though: https://github.com/remotion-dev/remotion/issues/3915
                 if (!navigator.userAgent.includes('Firefox/')) {
+                    log_1.Log.trace(logLevel, `[load] Calling .load() on ${current.src} because readyState is ${current.readyState} and it is not Firefox.`);
                     current.load();
                 }
             }
             else {
+                const onWaiting = () => {
+                    blockMedia('"waiting" event was fired');
+                };
                 current.addEventListener('waiting', onWaiting);
                 cleanupFns.push(() => {
                     current.removeEventListener('waiting', onWaiting);
@@ -88,9 +96,9 @@ const useMediaBuffering = ({ element, shouldBuffer, isPremounting, }) => {
         };
         init();
         return () => {
-            cleanup();
+            cleanup('element was unmounted or prop changed');
         };
-    }, [buffer, element, isPremounting, shouldBuffer]);
+    }, [buffer, element, isPremounting, logLevel, shouldBuffer]);
     return isBuffering;
 };
 exports.useMediaBuffering = useMediaBuffering;

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, onAutoPlayError, }: {
+export declare const useMediaPlayback: ({ mediaRef, src, mediaType, playbackRate: localPlaybackRate, onlyWarnForMediaSeekingError, acceptableTimeshift, pauseWhenBuffering, isPremounting, onAutoPlayError, }: {
     mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement | null>;
     src: string | undefined;
     mediaType: "audio" | "video";
@@ -9,6 +9,5 @@ export declare const useMediaPlayback: ({ mediaRef, src, mediaType, playbackRate
     acceptableTimeshift: number;
     pauseWhenBuffering: boolean;
     isPremounting: boolean;
-    debugSeeking: boolean;
     onAutoPlayError: null | (() => void);
 }) => void;

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

@@ -5,25 +5,19 @@ 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 log_level_context_js_1 = require("./log-level-context.js");
+const log_js_1 = require("./log.js");
 const play_and_handle_not_allowed_error_js_1 = require("./play-and-handle-not-allowed-error.js");
+const seek_js_1 = require("./seek.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");
 const warn_about_non_seekable_media_js_1 = require("./warn-about-non-seekable-media.js");
 exports.DEFAULT_ACCEPTABLE_TIMESHIFT = 0.45;
-const seek = (mediaRef, time) => {
-    if (!mediaRef.current) {
-        return;
-    }
-    // iOS seeking does not support multiple decimals
-    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, onAutoPlayError, }) => {
+const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybackRate, onlyWarnForMediaSeekingError, acceptableTimeshift, pauseWhenBuffering, isPremounting, 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)();
@@ -33,6 +27,7 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
     const mediaStartsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
     const lastSeekDueToShift = (0, react_1.useRef)(null);
     const lastSeek = (0, react_1.useRef)(null);
+    const logLevel = (0, log_level_context_js_1.useLogLevel)();
     if (!buffering) {
         throw new Error('useMediaPlayback must be used inside a <BufferingContext>');
     }
@@ -41,12 +36,9 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         if (!src) {
             return;
         }
-        if (debugSeeking) {
-            // eslint-disable-next-line no-console
-            console.log(`Detected ${src} as a variable FPS video. Disabling buffering while seeking.`);
-        }
+        log_js_1.Log.verbose(logLevel, `Detected ${src} as a variable FPS video. Disabling buffering while seeking.`);
         isVariableFpsVideoMap.current[src] = true;
-    }, [debugSeeking, src]);
+    }, [logLevel, src]);
     const currentTime = (0, use_request_video_callback_time_js_1.useRequestVideoCallbackTime)({
         mediaRef,
         mediaType,
@@ -63,6 +55,7 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         element: mediaRef,
         shouldBuffer: pauseWhenBuffering,
         isPremounting,
+        logLevel,
     });
     const { bufferUntilFirstFrame, isBuffering } = (0, buffer_until_first_frame_js_1.useBufferUntilFirstFrame)({
         mediaRef,
@@ -116,34 +109,17 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         const timeShift = timeShiftRvcTag && !isVariableFpsVideo
             ? timeShiftRvcTag
             : timeShiftMediaTag;
-        if (debugSeeking) {
-            // eslint-disable-next-line no-console
-            console.log({
-                mediaTagTime,
-                rvcTime,
-                shouldBeTime,
-                state: mediaRef.current.readyState,
-                playing: !mediaRef.current.paused,
-                isVariableFpsVideo,
-            });
-        }
         if (timeShift > acceptableTimeShiftButLessThanDuration &&
             lastSeekDueToShift.current !== shouldBeTime) {
             // 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: mediaTagTime,
-                    rvcTime,
-                    timeShift,
-                    isVariableFpsVideo,
-                });
-            }
-            seek(mediaRef, shouldBeTime);
-            lastSeek.current = shouldBeTime;
-            lastSeekDueToShift.current = shouldBeTime;
+            lastSeek.current = (0, seek_js_1.seek)({
+                mediaRef: mediaRef.current,
+                time: shouldBeTime,
+                logLevel,
+                why: `because time shift is too big. shouldBeTime = ${shouldBeTime}, isTime = ${mediaTagTime}, requestVideoCallbackTime = ${rvcTime}, timeShift = ${timeShift}, isVariableFpsVideo = ${Boolean(isVariableFpsVideo)}`,
+            });
+            lastSeekDueToShift.current = lastSeek.current;
             if (playing && !isVariableFpsVideo) {
                 if (playbackRate > 0) {
                     bufferUntilFirstFrame(shouldBeTime);
@@ -168,8 +144,12 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         const isSomethingElseBuffering = buffering.buffering.current && !isMediaTagBufferingOrStalled;
         if (!playing || isSomethingElseBuffering) {
             if (makesSenseToSeek) {
-                seek(mediaRef, shouldBeTime);
-                lastSeek.current = shouldBeTime;
+                lastSeek.current = (0, seek_js_1.seek)({
+                    mediaRef: mediaRef.current,
+                    time: shouldBeTime,
+                    logLevel,
+                    why: `not playing or something else is buffering. time offset is over seek threshold (${seekThreshold})`,
+                });
             }
             return;
         }
@@ -177,8 +157,12 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         if ((mediaRef.current.paused && !mediaRef.current.ended) ||
             absoluteFrame === 0) {
             if (makesSenseToSeek) {
-                seek(mediaRef, shouldBeTime);
-                lastSeek.current = shouldBeTime;
+                lastSeek.current = (0, seek_js_1.seek)({
+                    mediaRef: mediaRef.current,
+                    time: shouldBeTime,
+                    logLevel,
+                    why: `is over timeshift threshold (threshold = ${seekThreshold}) is paused OR has reached end of timeline and is starting over`,
+                });
             }
             (0, play_and_handle_not_allowed_error_js_1.playAndHandleNotAllowedError)(mediaRef, mediaType, onAutoPlayError);
             if (!isVariableFpsVideo) {
@@ -193,7 +177,7 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         bufferUntilFirstFrame,
         buffering.buffering,
         currentTime,
-        debugSeeking,
+        logLevel,
         desiredUnclampedTime,
         isBuffering,
         isMediaTagBuffering,

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

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.249';
+exports.VERSION = '4.0.251';

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, onAutoPlayError, onVideoFrame, crossOrigin, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...propsForPreview } = 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, onVideoFrame: onVideoFrame !== null && onVideoFrame !== void 0 ? onVideoFrame : null, crossOrigin: crossOrigin, ...propsForPreview }));
+    const { transparent, toneMapped, onAutoPlayError, onVideoFrame, crossOrigin, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...propsForPreview } = 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, onAutoPlayError: onAutoPlayError !== null && onAutoPlayError !== void 0 ? onAutoPlayError : undefined, onVideoFrame: onVideoFrame !== null && onVideoFrame !== void 0 ? onVideoFrame : null, crossOrigin: crossOrigin, ...propsForPreview }));
 };
 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, onAutoPlayError, ...otherProps } = props;
-    const { loop, _remotionDebugSeeking, ...propsOtherThanLoop } = props;
+    const { loop, ...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);
@@ -60,7 +60,7 @@ const VideoForwardingFunction = (props, ref) => {
     }
     return ((0, jsx_runtime_1.jsx)(VideoForPreview_js_1.VideoForPreview, { onlyWarnForMediaSeekingError: false, ...otherProps, ref: ref, onVideoFrame: null, 
         // 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, onAutoPlayError: onAutoPlayError !== null && onAutoPlayError !== void 0 ? onAutoPlayError : undefined }));
+        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, onAutoPlayError: onAutoPlayError !== null && onAutoPlayError !== void 0 ? onAutoPlayError : undefined }));
 };
 /*
  * @description Wraps the native `<video>` element to include video in your component that is synchronized with Remotion's time.

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

@@ -6,7 +6,6 @@ type VideoForPreviewProps = RemotionVideoProps & {
     readonly pauseWhenBuffering: boolean;
     readonly _remotionInternalNativeLoopPassed: boolean;
     readonly _remotionInternalStack: string | null;
-    readonly _remotionDebugSeeking: boolean;
     readonly showInTimeline: boolean;
     readonly onVideoFrame: null | OnVideoFrame;
     readonly crossOrigin?: '' | 'anonymous' | 'use-credentials';