remotion 4.0.486 → 4.0.488

package/dist/cjs/HtmlInCanvas.js

@@ -104,8 +104,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
             ref(node);
         }
         else if (ref) {
-            ref.current =
-                node;
+            ref.current = node;
         }
     }, [ref]);
     const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)();
@@ -319,8 +318,7 @@ const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = []
             ref(node);
         }
         else if (ref) {
-            ref.current =
-                node;
+            ref.current = node;
         }
     }, [ref]);
     return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { durationInFrames: resolvedDuration, name: name !== null && name !== void 0 ? name : '<HtmlInCanvas>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/remotion/html-in-canvas", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, outlineRef: actualRef, layout: "none", ...sequenceProps, children: jsx_runtime_1.jsx(HtmlInCanvasContent, { ref: setCanvasRef, width: width, height: height, effects: effects, onPaint: onPaint, onInit: onInit, pixelDensity: pixelDensity, controls: controls, style: style, children: children }) }));

package/dist/cjs/Img.js

@@ -23,6 +23,7 @@ const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRende
     const errors = (0, react_1.useRef)({});
     const { delayPlayback } = (0, use_buffer_state_js_1.useBufferState)();
     const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
     const _propsValid = true;
     if (!_propsValid) {
         throw new Error('typecheck error');
@@ -59,6 +60,8 @@ const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRende
         }, timeout);
     }, []);
     const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
+    const isPremounting = Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting);
+    const isPostmounting = Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmounting);
     const didGetError = (0, react_1.useCallback)((e) => {
         var _a, _b, _c, _d, _e, _f, _g;
         var _h, _j, _k, _l;
@@ -89,8 +92,19 @@ const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRende
         }
     }, [cancelRender, maxRetries, onError, retryIn]);
     if (typeof window !== 'undefined') {
-        const isPremounting = Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting);
-        const isPostmounting = Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmounting);
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        (0, react_1.useLayoutEffect)(() => {
+            if (!pauseWhenLoading || !isLoading || isPremounting || isPostmounting) {
+                return;
+            }
+            return delayPlayback().unblock;
+        }, [
+            delayPlayback,
+            isLoading,
+            isPostmounting,
+            isPremounting,
+            pauseWhenLoading,
+        ]);
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
             var _a, _b;
@@ -104,13 +118,11 @@ const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRende
             if (!current) {
                 return;
             }
+            setIsLoading(true);
             const newHandle = delayRender('Loading <Img> with src=' + (0, truncate_src_for_label_js_1.truncateSrcForLabel)(actualSrc), {
                 retries: delayRenderRetries !== null && delayRenderRetries !== void 0 ? delayRenderRetries : undefined,
                 timeoutInMilliseconds: delayRenderTimeoutInMilliseconds !== null && delayRenderTimeoutInMilliseconds !== void 0 ? delayRenderTimeoutInMilliseconds : undefined,
             });
-            const unblock = pauseWhenLoading && !isPremounting && !isPostmounting
-                ? delayPlayback().unblock
-                : () => undefined;
             let unmounted = false;
             const onComplete = () => {
                 var _a, _b, _c;
@@ -128,7 +140,7 @@ const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRende
                 if (current) {
                     onImageFrame === null || onImageFrame === void 0 ? void 0 : onImageFrame(current);
                 }
-                unblock();
+                setIsLoading(false);
                 continueRender(newHandle);
             };
             if (!imageRef.current) {
@@ -158,17 +170,12 @@ const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRende
             return () => {
                 unmounted = true;
                 current.removeEventListener('load', onComplete);
-                unblock();
                 continueRender(newHandle);
             };
         }, [
             actualSrc,
-            delayPlayback,
             delayRenderRetries,
             delayRenderTimeoutInMilliseconds,
-            pauseWhenLoading,
-            isPremounting,
-            isPostmounting,
             onImageFrame,
             continueRender,
             delayRender,

package/dist/cjs/Still.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Still = void 0;
 const react_1 = __importDefault(require("react"));
 const Composition_js_1 = require("./Composition.js");
+const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
 /*
  * @description A `<Still />` is a `<Composition />` that is only 1 frame long.
  * @see [Documentation](https://www.remotion.dev/docs/still)
@@ -20,3 +21,4 @@ const Still = (props) => {
     return react_1.default.createElement(Composition_js_1.Composition, newProps);
 };
 exports.Still = Still;
+(0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(exports.Still);

package/dist/cjs/TimelineContext.d.ts

@@ -1,12 +1,12 @@
-import type { MutableRefObject } from 'react';
+import type { RefObject } from 'react';
 import React from 'react';
 import { type PlayableMediaTag } from './timeline-position-state';
 export type TimelineContextValue = {
     frame: Record<string, number>;
     playing: boolean;
     rootId: string;
-    imperativePlaying: MutableRefObject<boolean>;
-    audioAndVideoTags: MutableRefObject<PlayableMediaTag[]>;
+    imperativePlaying: RefObject<boolean>;
+    audioAndVideoTags: RefObject<PlayableMediaTag[]>;
 };
 export type PlaybackRateContextValue = {
     playbackRate: number;

package/dist/cjs/animated-image/AnimatedImage.d.ts

@@ -1,8 +1,19 @@
 import type React from 'react';
 import type { SequenceControls } from '../CompositionManager.js';
 import type { EffectsProp } from '../effects/effect-types.js';
-import type { RemotionAnimatedImageProps } from './props';
-export declare const AnimatedImage: React.ComponentType<import("../Interactive.js").InteractiveBaseProps & RemotionAnimatedImageProps & {
+export declare const AnimatedImage: React.ComponentType<import("../Interactive.js").InteractiveBaseProps & {
+    src: string;
+    width?: number | undefined;
+    height?: number | undefined;
+    onError?: ((error: Error) => void) | undefined;
+    fit?: import("../calculate-image-fit.js").ImageFit | undefined;
+    playbackRate?: number | undefined;
+    style?: React.CSSProperties | undefined;
+    loopBehavior?: import("./props").RemotionAnimatedImageLoopBehavior | undefined;
+    id?: string | undefined;
+    className?: string | undefined;
+    requestInit?: RequestInit | undefined;
+} & React.AriaAttributes & Record<`data-${string}`, string | undefined> & {
     readonly effects?: EffectsProp | undefined;
 } & {
     readonly controls?: SequenceControls | undefined;

package/dist/cjs/animated-image/AnimatedImage.js

@@ -30,6 +30,17 @@ const animatedImageSchema = {
     },
     ...interactivity_schema_js_1.transformSchema,
 };
+const getCanvasPropsFromSequenceProps = (props) => {
+    const canvasProps = {};
+    const mutableCanvasProps = canvasProps;
+    for (const key in props) {
+        if (Object.prototype.hasOwnProperty.call(props, key) &&
+            (key.startsWith('data-') || key.startsWith('aria-'))) {
+            mutableCanvasProps[key] = props[key];
+        }
+    }
+    return canvasProps;
+};
 const AnimatedImageContent = (0, react_1.forwardRef)(({ src, width, height, onError, loopBehavior = 'loop', playbackRate = 1, fit = 'fill', requestInit, effects, controls, ...props }, canvasRef) => {
     var _a;
     const resolvedSrc = (0, resolve_image_source_1.resolveAnimatedImageSource)(src);
@@ -158,6 +169,7 @@ const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, lo
     (0, react_1.useImperativeHandle)(ref, () => {
         return actualRef.current;
     }, []);
+    const canvasProps = getCanvasPropsFromSequenceProps(sequenceProps);
     const animatedImageProps = {
         src,
         width,
@@ -170,6 +182,7 @@ const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, lo
         className,
         style,
         requestInit,
+        ...canvasProps,
     };
     return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", durationInFrames: resolvedDuration, name: "<AnimatedImage>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, ...sequenceProps, outlineRef: actualRef, children: jsx_runtime_1.jsx(AnimatedImageContent, { ...animatedImageProps, ref: actualRef, effects: effects, controls: controls }) }));
 };

package/dist/cjs/animated-image/canvas.d.ts

@@ -1,18 +1,15 @@
 import React from 'react';
 import type { EffectDefinitionAndStack } from '../effects/effect-types.js';
-import type { AnimatedImageFillMode } from './props';
-type Props = {
-    readonly width?: number;
-    readonly height?: number;
-    readonly fit: AnimatedImageFillMode;
-    readonly className?: string;
-    readonly style?: React.CSSProperties;
-    readonly effects: EffectDefinitionAndStack<unknown>[];
-};
 export type AnimatedImageCanvasRef = {
     readonly draw: (imageData: VideoFrame) => Promise<boolean>;
     readonly getCanvas: () => HTMLCanvasElement | null;
     clear: () => void;
 };
-export declare const Canvas: React.ForwardRefExoticComponent<Props & React.RefAttributes<AnimatedImageCanvasRef>>;
-export {};
+export declare const Canvas: React.ForwardRefExoticComponent<{
+    readonly width?: number | undefined;
+    readonly height?: number | undefined;
+    readonly fit: import("../calculate-image-fit.js").ImageFit;
+    readonly className?: string | undefined;
+    readonly style?: React.CSSProperties | undefined;
+    readonly effects: EffectDefinitionAndStack<unknown>[];
+} & React.AriaAttributes & Record<`data-${string}`, string | undefined> & React.RefAttributes<AnimatedImageCanvasRef>>;

package/dist/cjs/animated-image/canvas.js

@@ -39,7 +39,7 @@ const react_1 = __importStar(require("react"));
 const calculate_image_fit_js_1 = require("../calculate-image-fit.js");
 const run_effect_chain_js_1 = require("../effects/run-effect-chain.js");
 const use_effect_chain_state_js_1 = require("../effects/use-effect-chain-state.js");
-const CanvasRefForwardingFunction = ({ width, height, fit, className, style, effects }, ref) => {
+const CanvasRefForwardingFunction = ({ width, height, fit, className, style, effects, ...props }, ref) => {
     const canvasRef = (0, react_1.useRef)(null);
     const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)();
     const sourceCanvas = (0, react_1.useMemo)(() => {
@@ -101,6 +101,6 @@ const CanvasRefForwardingFunction = ({ width, height, fit, className, style, eff
             },
         };
     }, [draw]);
-    return jsx_runtime_1.jsx("canvas", { ref: canvasRef, className: className, style: style });
+    return (jsx_runtime_1.jsx("canvas", { ref: canvasRef, className: className, style: style, ...props }));
 };
 exports.Canvas = react_1.default.forwardRef(CanvasRefForwardingFunction);

package/dist/cjs/animated-image/props.d.ts

@@ -2,6 +2,7 @@ import type { ImageFit } from '../calculate-image-fit.js';
 import type { EffectsProp } from '../effects/effect-types.js';
 import type { InteractiveBaseProps } from '../Interactive.js';
 export type RemotionAnimatedImageLoopBehavior = 'loop' | 'pause-after-finish' | 'clear-after-finish';
+export type AnimatedImageCanvasProps = React.AriaAttributes & Record<`data-${string}`, string | undefined>;
 export type RemotionAnimatedImageProps = {
     src: string;
     width?: number;
@@ -14,7 +15,7 @@ export type RemotionAnimatedImageProps = {
     id?: string;
     className?: string;
     requestInit?: RequestInit;
-};
+} & AnimatedImageCanvasProps;
 export type AnimatedImageProps = InteractiveBaseProps & RemotionAnimatedImageProps & {
     readonly effects?: EffectsProp;
 };

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

@@ -33,6 +33,7 @@ export type ScheduleAudioNodeResult = {
 export type ScheduleAudioNodeOptions = {
     readonly node: AudioBufferSourceNode;
     readonly mediaTimestamp: number;
+    readonly sourceOffset: number;
     readonly scheduledTime: number;
     readonly originalUnloopedMediaTimestamp: number;
     readonly duration: number;

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

@@ -129,7 +129,7 @@ const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled,
         nodesToResume.current.delete(node);
     }, []);
     const scheduleAudioNode = (0, react_1.useMemo)(() => {
-        return ({ node, mediaTimestamp, scheduledTime, duration, offset, originalUnloopedMediaTimestamp, }) => {
+        return ({ node, mediaTimestamp, sourceOffset, scheduledTime, duration, offset, originalUnloopedMediaTimestamp, }) => {
             if (!ctxAndGain) {
                 throw new Error('Audio context not found');
             }
@@ -154,7 +154,7 @@ const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled,
                 }
             }
             const scheduledEndTime = scheduledTime + duration / node.playbackRate.value;
-            const mediaTime = mediaTimestamp + offset;
+            const mediaTime = mediaTimestamp + offset - sourceOffset;
             const mediaEndTime = mediaTime + duration;
             const latency = ctxAndGain.audioContext.baseLatency +
                 ctxAndGain.audioContext.outputLatency;

package/dist/cjs/buffering.d.ts

@@ -17,7 +17,7 @@ type BufferManager = {
     addBlock: AddBlock;
     listenForBuffering: ListenForBuffering;
     listenForResume: ListenForResume;
-    buffering: React.MutableRefObject<boolean>;
+    buffering: React.RefObject<boolean>;
 };
 export declare const BufferingContextReact: React.Context<BufferManager | null>;
 export declare const BufferingProvider: React.FC<{

package/dist/cjs/buffering.js

@@ -90,7 +90,11 @@ const useBufferManager = (logLevel, mountTime) => {
         if (rendering) {
             return;
         }
-        if (blocks.length > 0) {
+        // Only fire on the `false -> true` transition: adding a block while
+        // already buffering (e.g. a second media element starts loading) must
+        // not re-dispatch `waiting` to listeners.
+        if (blocks.length > 0 && !buffering.current) {
+            buffering.current = true;
             onBufferingCallbacks.forEach((c) => c());
             (0, playback_logging_1.playbackLogging)({
                 logLevel,
@@ -110,7 +114,11 @@ const useBufferManager = (logLevel, mountTime) => {
             if (rendering) {
                 return;
             }
-            if (blocks.length === 0) {
+            // Only fire on the `true -> false` transition: the initial mount and
+            // a block that was added and removed within the same commit must not
+            // dispatch `resume` to listeners.
+            if (blocks.length === 0 && buffering.current) {
+                buffering.current = false;
                 onResumeCallbacks.forEach((c) => c());
                 (0, playback_logging_1.playbackLogging)({
                     logLevel,
@@ -145,11 +153,11 @@ const useIsPlayerBuffering = (bufferManager) => {
         const onResume = () => {
             setIsBuffering(false);
         };
-        bufferManager.listenForBuffering(onBuffer);
-        bufferManager.listenForResume(onResume);
+        const buffer = bufferManager.listenForBuffering(onBuffer);
+        const resume = bufferManager.listenForResume(onResume);
         return () => {
-            bufferManager.listenForBuffering(() => undefined);
-            bufferManager.listenForResume(() => undefined);
+            buffer.remove();
+            resume.remove();
         };
     }, [bufferManager]);
     return isBuffering;

package/dist/cjs/canvas-image/CanvasImage.js

@@ -108,13 +108,18 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
     });
     const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
     const pendingLoadDelayRef = (0, react_1.useRef)(null);
-    const continuePendingLoadDelay = (0, react_1.useCallback)(() => {
+    const [isLoadPending, setIsLoadPending] = (0, react_1.useState)(false);
+    const isPremounting = Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting);
+    const isPostmounting = Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmounting);
+    const continuePendingLoadDelay = (0, react_1.useCallback)(({ markAsReady }) => {
         const pending = pendingLoadDelayRef.current;
         if (!pending || pending.continued) {
             return;
         }
         pending.continued = true;
-        pending.unblock();
+        if (markAsReady) {
+            setIsLoadPending(false);
+        }
         continueRender(pending.handle);
         pendingLoadDelayRef.current = null;
     }, [continueRender]);
@@ -137,23 +142,33 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
         }
     }, [ref, refForOutline]);
     (0, react_1.useLayoutEffect)(() => {
-        const isPremounting = Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting);
-        const isPostmounting = Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmounting);
+        if (!pauseWhenLoading ||
+            !isLoadPending ||
+            isPremounting ||
+            isPostmounting) {
+            return;
+        }
+        return delayPlayback().unblock;
+    }, [
+        delayPlayback,
+        isLoadPending,
+        isPostmounting,
+        isPremounting,
+        pauseWhenLoading,
+    ]);
+    (0, react_1.useLayoutEffect)(() => {
         const handle = delayRender(`Rendering <CanvasImage> with src="${(0, truncate_src_for_label_js_1.truncateSrcForLabel)(actualSrc)}"`, {
             retries: delayRenderRetries !== null && delayRenderRetries !== void 0 ? delayRenderRetries : undefined,
             timeoutInMilliseconds: delayRenderTimeoutInMilliseconds !== null && delayRenderTimeoutInMilliseconds !== void 0 ? delayRenderTimeoutInMilliseconds : undefined,
         });
-        const unblock = pauseWhenLoading && !isPremounting && !isPostmounting
-            ? delayPlayback().unblock
-            : () => undefined;
         const controller = new AbortController();
         let cancelled = false;
         let errorCount = 0;
         let timeoutId = null;
         setLoadedImage(null);
+        setIsLoadPending(true);
         pendingLoadDelayRef.current = {
             handle,
-            unblock,
             continued: false,
         };
         const attemptLoad = () => {
@@ -166,7 +181,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
             })
                 .catch((err) => {
                 if (err.name === 'AbortError') {
-                    continuePendingLoadDelay();
+                    continuePendingLoadDelay({ markAsReady: false });
                     return;
                 }
                 errorCount++;
@@ -182,7 +197,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
                 }
                 else if (onError) {
                     onError(err);
-                    continuePendingLoadDelay();
+                    continuePendingLoadDelay({ markAsReady: true });
                 }
                 else {
                     cancelRender(err);
@@ -196,21 +211,17 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
                 clearTimeout(timeoutId);
             }
             controller.abort();
-            continuePendingLoadDelay();
+            continuePendingLoadDelay({ markAsReady: false });
         };
     }, [
         actualSrc,
         cancelRender,
         continuePendingLoadDelay,
-        delayPlayback,
         delayRender,
         delayRenderRetries,
         delayRenderTimeoutInMilliseconds,
         maxRetries,
         onError,
-        pauseWhenLoading,
-        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmounting,
-        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting,
     ]);
     (0, react_1.useLayoutEffect)(() => {
         if (!loadedImage || !outputCanvas || !sourceCanvas) {
@@ -261,7 +272,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
                             return;
                         }
                         continueRenderOnce();
-                        continuePendingLoadDelay();
+                        continuePendingLoadDelay({ markAsReady: true });
                     },
                 });
             }
@@ -273,7 +284,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
             if (onError) {
                 onError(err);
                 continueRenderOnce();
-                continuePendingLoadDelay();
+                continuePendingLoadDelay({ markAsReady: true });
             }
             else {
                 cancelRender(err);

package/dist/cjs/get-media-sync-action.d.ts

@@ -0,0 +1,44 @@
+export type MediaSyncAction = {
+    type: 'seek-due-to-shift';
+    shouldBeTime: number;
+    why: string;
+    bufferUntilFirstFrame: boolean;
+    playReason: string | null;
+    warnAboutNonSeekable: boolean;
+} | {
+    type: 'seek-if-not-playing';
+    shouldBeTime: number;
+    why: string | null;
+} | {
+    type: 'play-and-seek';
+    shouldBeTime: number;
+    why: string | null;
+    playReason: string;
+    bufferUntilFirstFrame: boolean;
+} | {
+    type: 'none';
+};
+export type GetMediaSyncActionInput = {
+    duration: number;
+    currentTime: number;
+    paused: boolean;
+    ended: boolean;
+    desiredUnclampedTime: number;
+    mediaTagTime: number;
+    mediaTagLastUpdate: number;
+    rvcTime: number | null;
+    rvcLastUpdate: number | null;
+    isVariableFpsVideo: boolean;
+    acceptableTimeShift: number;
+    lastSeekDueToShift: number | null;
+    playing: boolean;
+    playbackRate: number;
+    mediaTagBufferingOrStalled: boolean;
+    playerBuffering: boolean;
+    absoluteFrame: number;
+    onlyWarnForMediaSeekingError: boolean;
+    isPremounting: boolean;
+    isPostmounting: boolean;
+    pauseWhenBuffering: boolean;
+};
+export declare const getMediaSyncAction: (input: GetMediaSyncActionInput) => MediaSyncAction;

package/dist/cjs/get-media-sync-action.js

@@ -0,0 +1,78 @@
+"use strict";
+// Pure decision logic for `useMediaPlayback`.
+//
+// Every frame, the media element's clock has to be reconciled with the
+// timeline clock. This function takes a snapshot of the relevant state and
+// decides *what* should happen (seek / play / buffer / nothing). The effect in
+// `use-media-playback.ts` is responsible for actually executing the returned
+// action. Keeping the decision separate makes the branch ordering testable
+// without a DOM or a real media element.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMediaSyncAction = void 0;
+const getMediaSyncAction = (input) => {
+    const { duration, currentTime, paused, ended, desiredUnclampedTime, mediaTagTime, mediaTagLastUpdate, rvcTime, rvcLastUpdate, isVariableFpsVideo, acceptableTimeShift, lastSeekDueToShift, playing, playbackRate, mediaTagBufferingOrStalled, playerBuffering, absoluteFrame, onlyWarnForMediaSeekingError, isPremounting, isPostmounting, pauseWhenBuffering, } = input;
+    const shouldBeTime = !Number.isNaN(duration) && Number.isFinite(duration)
+        ? Math.min(duration, desiredUnclampedTime)
+        : desiredUnclampedTime;
+    const timeShiftMediaTag = Math.abs(shouldBeTime - mediaTagTime);
+    const timeShiftRvcTag = rvcTime ? Math.abs(shouldBeTime - rvcTime) : null;
+    const mostRecentTimeshift = rvcLastUpdate && rvcTime > mediaTagLastUpdate
+        ? timeShiftRvcTag
+        : timeShiftMediaTag;
+    const timeShift = timeShiftRvcTag && !isVariableFpsVideo
+        ? mostRecentTimeshift
+        : timeShiftMediaTag;
+    if (timeShift > acceptableTimeShift && lastSeekDueToShift !== shouldBeTime) {
+        // If scrubbing around, adjust timing
+        // or if time shift is bigger than 0.45sec
+        return {
+            type: 'seek-due-to-shift',
+            shouldBeTime,
+            why: `because time shift is too big. shouldBeTime = ${shouldBeTime}, isTime = ${mediaTagTime}, requestVideoCallbackTime = ${rvcTime}, timeShift = ${timeShift}${isVariableFpsVideo ? ', isVariableFpsVideo = true' : ''}, isPremounting = ${isPremounting}, isPostmounting = ${isPostmounting}, pauseWhenBuffering = ${pauseWhenBuffering}`,
+            bufferUntilFirstFrame: playing && playbackRate > 0,
+            playReason: playing && paused
+                ? 'player is playing but media tag is paused, and just seeked'
+                : null,
+            warnAboutNonSeekable: !onlyWarnForMediaSeekingError,
+        };
+    }
+    const seekThreshold = playing ? 0.15 : 0.01;
+    // 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(currentTime - shouldBeTime) > seekThreshold;
+    const isSomethingElseBuffering = playerBuffering && !mediaTagBufferingOrStalled;
+    if (!playing || isSomethingElseBuffering) {
+        return {
+            type: 'seek-if-not-playing',
+            shouldBeTime,
+            why: makesSenseToSeek
+                ? `not playing or something else is buffering. time offset is over seek threshold (${seekThreshold})`
+                : null,
+        };
+    }
+    if (!playing || playerBuffering) {
+        return { type: 'none' };
+    }
+    // We now assured we are in playing state and not buffering
+    const pausedCondition = paused && !ended;
+    const firstFrameCondition = absoluteFrame === 0;
+    if (pausedCondition || firstFrameCondition) {
+        const reason = pausedCondition
+            ? 'media tag is paused'
+            : 'absolute frame is 0';
+        return {
+            type: 'play-and-seek',
+            shouldBeTime,
+            why: makesSenseToSeek
+                ? `is over timeshift threshold (threshold = ${seekThreshold}) and ${reason}`
+                : null,
+            playReason: `player is playing and ${reason}`,
+            bufferUntilFirstFrame: !isVariableFpsVideo && playbackRate > 0,
+        };
+    }
+    return { type: 'none' };
+};
+exports.getMediaSyncAction = getMediaSyncAction;

package/dist/cjs/internals.d.ts

@@ -694,7 +694,7 @@ export declare const Internals: {
         listenForResume: (callback: () => void) => {
             remove: () => void;
         };
-        buffering: import("react").MutableRefObject<boolean>;
+        buffering: import("react").RefObject<boolean>;
     } | null>;
     readonly getComponentsToAddStacksTo: () => unknown[];
     readonly CurrentScaleContext: import("react").Context<import("./use-current-scale.js").CurrentScaleContextType | null>;
@@ -823,7 +823,7 @@ export declare const Internals: {
         listenForResume: (callback: () => void) => {
             remove: () => void;
         };
-        buffering: import("react").MutableRefObject<boolean>;
+        buffering: import("react").RefObject<boolean>;
     }) => boolean;
     readonly TimelinePosition: typeof TimelinePosition;
     readonly DelayRenderContextType: import("react").Context<import("./delay-render.js").DelayRenderScope | null>;

package/dist/cjs/interpolate-translate.d.ts

@@ -0,0 +1,8 @@
+import { type InterpolateOptions } from './interpolate.js';
+export type InterpolateTranslateOptions = InterpolateOptions;
+export declare const interpolateTranslate: (input: number, inputRange: readonly number[], outputRange: readonly string[], options?: Partial<{
+    easing: import("./interpolate.js").EasingFunction | readonly import("./interpolate.js").EasingFunction[];
+    extrapolateLeft: import("./interpolate.js").ExtrapolateType;
+    extrapolateRight: import("./interpolate.js").ExtrapolateType;
+    posterize: number;
+}> | undefined) => string;