remotion 4.0.300 → 4.0.302

package/bundle.ts

@@ -42,3 +42,5 @@ const [noReactFile] = noReactOutput.outputs;
 await Bun.write('dist/esm/no-react.mjs', await noReactFile.text());
 
 export {};
+
+console.log('Done.');

package/dist/cjs/audio/AudioForPreview.js

@@ -11,7 +11,6 @@ const random_js_1 = require("../random.js");
 const use_amplification_js_1 = require("../use-amplification.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_sync_volume_with_media_tag_js_1 = require("../use-sync-volume-with-media-tag.js");
 const volume_position_state_js_1 = require("../volume-position-state.js");
 const volume_prop_js_1 = require("../volume-prop.js");
 const shared_audio_tags_js_1 = require("./shared-audio-tags.js");
@@ -66,13 +65,11 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         props.muted,
         props.loop,
     ]);
-    const audioRef = (0, shared_audio_tags_js_1.useSharedAudio)(propsToPass, id).el;
-    (0, use_sync_volume_with_media_tag_js_1.useSyncVolumeWithMediaTag)({
-        volumePropFrame,
-        volume,
-        mediaVolume,
-        mediaRef: audioRef,
-    });
+    const context = (0, react_1.useContext)(shared_audio_tags_js_1.SharedAudioContext);
+    if (!context) {
+        throw new Error('SharedAudioContext not found');
+    }
+    const { el: audioRef, mediaElementSourceNode } = (0, shared_audio_tags_js_1.useSharedAudio)(propsToPass, id, context.audioContext);
     (0, use_media_in_timeline_js_1.useMediaInTimeline)({
         volume,
         mediaVolume,
@@ -88,11 +85,8 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         onAutoPlayError: null,
         isPremounting: Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting),
     });
-    (0, use_amplification_js_1.useAmplification)({
-        logLevel,
-        mediaRef: audioRef,
-        volume: userPreferredVolume,
-    });
+    // putting playback before useVolume
+    // because volume looks at playbackrate
     (0, use_media_playback_js_1.useMediaPlayback)({
         mediaRef: audioRef,
         src,
@@ -103,7 +97,12 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         isPremounting: Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting),
         pauseWhenBuffering,
         onAutoPlayError: null,
-        userPreferredVolume,
+    });
+    (0, use_amplification_js_1.useVolume)({
+        logLevel,
+        mediaRef: audioRef,
+        source: mediaElementSourceNode,
+        volume: userPreferredVolume,
     });
     (0, react_1.useImperativeHandle)(ref, () => {
         return audioRef.current;

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

@@ -1,6 +1,7 @@
 import type { ComponentType, LazyExoticComponent } from 'react';
 import React from 'react';
 import type { RemotionAudioProps } from './props.js';
+import type { SharedElementSourceNode } from './shared-element-source-node.js';
 /**
  * This functionality of Remotion will keep a certain amount
  * of <audio> tags pre-mounted and by default filled with an empty audio track.
@@ -15,6 +16,7 @@ import type { RemotionAudioProps } from './props.js';
 type AudioElem = {
     id: number;
     props: RemotionAudioProps;
+    mediaElementSourceNode: SharedElementSourceNode | null;
     el: React.RefObject<HTMLAudioElement | null>;
     audioId: string;
 };
@@ -28,6 +30,7 @@ type SharedContext = {
     }) => void;
     playAllAudios: () => void;
     numberOfAudioTags: number;
+    audioContext: AudioContext | null;
 };
 export declare const SharedAudioContext: React.Context<SharedContext | null>;
 export declare const SharedAudioContextProvider: React.FC<{
@@ -35,5 +38,5 @@ export declare const SharedAudioContextProvider: React.FC<{
     readonly children: React.ReactNode;
     readonly component: LazyExoticComponent<ComponentType<Record<string, unknown>>> | null;
 }>;
-export declare const useSharedAudio: (aud: RemotionAudioProps, audioId: string) => AudioElem;
+export declare const useSharedAudio: (aud: RemotionAudioProps, audioId: string, audioContext: AudioContext | null) => AudioElem;
 export {};

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

@@ -38,6 +38,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const log_level_context_js_1 = require("../log-level-context.js");
 const play_and_handle_not_allowed_error_js_1 = require("../play-and-handle-not-allowed-error.js");
+const shared_element_source_node_js_1 = require("./shared-element-source-node.js");
+const use_audio_context_js_1 = require("./use-audio-context.js");
 const EMPTY_AUDIO = 'data:audio/mp3;base64,/+MYxAAJcAV8AAgAABn//////+/gQ5BAMA+D4Pg+BAQBAEAwD4Pg+D4EBAEAQDAPg++hYBH///hUFQVBUFREDQNHmf///////+MYxBUGkAGIMAAAAP/29Xt6lUxBTUUzLjEwMFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV/+MYxDUAAANIAAAAAFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV';
 const compareProps = (obj1, obj2) => {
     const keysA = Object.keys(obj1).sort();
@@ -83,6 +85,8 @@ const SharedAudioContextProvider = ({ children, numberOfAudioTags, component })
         });
     }, [numberOfAudioTags]);
     const takenAudios = (0, react_1.useRef)(new Array(numberOfAudioTags).fill(false));
+    const logLevel = (0, log_level_context_js_1.useLogLevel)();
+    const audioContext = (0, use_audio_context_js_1.useSingletonAudioContext)(logLevel);
     const rerenderAudios = (0, react_1.useCallback)(() => {
         refs.forEach(({ ref, id }) => {
             var _a;
@@ -125,6 +129,12 @@ const SharedAudioContextProvider = ({ children, numberOfAudioTags, component })
         takenAudios.current = cloned;
         const newElem = {
             props: aud,
+            mediaElementSourceNode: audioContext
+                ? (0, shared_element_source_node_js_1.makeSharedElementSourceNode)({
+                    audioContext,
+                    ref,
+                })
+                : null,
             id,
             el: ref,
             audioId,
@@ -132,7 +142,7 @@ const SharedAudioContextProvider = ({ children, numberOfAudioTags, component })
         (_b = audios.current) === null || _b === void 0 ? void 0 : _b.push(newElem);
         rerenderAudios();
         return newElem;
-    }, [numberOfAudioTags, refs, rerenderAudios]);
+    }, [numberOfAudioTags, refs, rerenderAudios, audioContext]);
     const unregisterAudio = (0, react_1.useCallback)((id) => {
         var _a;
         const cloned = [...takenAudios.current];
@@ -167,7 +177,6 @@ const SharedAudioContextProvider = ({ children, numberOfAudioTags, component })
             rerenderAudios();
         }
     }, [rerenderAudios]);
-    const logLevel = (0, log_level_context_js_1.useLogLevel)();
     const mountTime = (0, log_level_context_js_1.useMountTime)();
     const playAllAudios = (0, react_1.useCallback)(() => {
         refs.forEach((ref) => {
@@ -180,7 +189,8 @@ const SharedAudioContextProvider = ({ children, numberOfAudioTags, component })
                 reason: 'playing all audios',
             });
         });
-    }, [logLevel, mountTime, refs]);
+        audioContext === null || audioContext === void 0 ? void 0 : audioContext.resume();
+    }, [audioContext, logLevel, mountTime, refs]);
     const value = (0, react_1.useMemo)(() => {
         return {
             registerAudio,
@@ -188,6 +198,7 @@ const SharedAudioContextProvider = ({ children, numberOfAudioTags, component })
             updateAudio,
             playAllAudios,
             numberOfAudioTags,
+            audioContext,
         };
     }, [
         numberOfAudioTags,
@@ -195,6 +206,7 @@ const SharedAudioContextProvider = ({ children, numberOfAudioTags, component })
         registerAudio,
         unregisterAudio,
         updateAudio,
+        audioContext,
     ]);
     // Fixing a bug: In React, if a component is unmounted using useInsertionEffect, then
     // the cleanup function does sometimes not work properly. That is why when we
@@ -221,7 +233,7 @@ const SharedAudioContextProvider = ({ children, numberOfAudioTags, component })
             }), children] }));
 };
 exports.SharedAudioContextProvider = SharedAudioContextProvider;
-const useSharedAudio = (aud, audioId) => {
+const useSharedAudio = (aud, audioId, audioContext) => {
     var _a;
     const ctx = (0, react_1.useContext)(exports.SharedAudioContext);
     /**
@@ -231,11 +243,18 @@ const useSharedAudio = (aud, audioId) => {
         if (ctx && ctx.numberOfAudioTags > 0) {
             return ctx.registerAudio(aud, audioId);
         }
+        const el = react_1.default.createRef();
         return {
-            el: react_1.default.createRef(),
+            el,
             id: Math.random(),
             props: aud,
             audioId,
+            mediaElementSourceNode: audioContext
+                ? (0, shared_element_source_node_js_1.makeSharedElementSourceNode)({
+                    audioContext,
+                    ref: el,
+                })
+                : null,
         };
     });
     /**

package/dist/cjs/audio/shared-element-source-node.d.ts

@@ -0,0 +1,8 @@
+export declare const makeSharedElementSourceNode: ({ audioContext, ref, }: {
+    audioContext: AudioContext;
+    ref: React.RefObject<HTMLAudioElement | null>;
+}) => {
+    attemptToConnect: () => void;
+    get: () => MediaElementAudioSourceNode;
+};
+export type SharedElementSourceNode = ReturnType<typeof makeSharedElementSourceNode>;

package/dist/cjs/audio/shared-element-source-node.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeSharedElementSourceNode = void 0;
+const makeSharedElementSourceNode = ({ audioContext, ref, }) => {
+    let connected = null;
+    return {
+        attemptToConnect: () => {
+            if (!connected && ref.current) {
+                const mediaElementSourceNode = audioContext.createMediaElementSource(ref.current);
+                connected = mediaElementSourceNode;
+            }
+        },
+        get: () => {
+            if (!connected) {
+                throw new Error('Audio element not connected');
+            }
+            return connected;
+        },
+    };
+};
+exports.makeSharedElementSourceNode = makeSharedElementSourceNode;

package/dist/cjs/audio/use-audio-context.d.ts

@@ -0,0 +1,2 @@
+import type { LogLevel } from '../log';
+export declare const useSingletonAudioContext: (logLevel: LogLevel) => AudioContext | null;

package/dist/cjs/audio/use-audio-context.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSingletonAudioContext = void 0;
+const react_1 = require("react");
+const log_1 = require("../log");
+let warned = false;
+const warnOnce = (logLevel) => {
+    if (warned) {
+        return;
+    }
+    warned = true;
+    // Don't pullute logs if in SSR
+    if (typeof window !== 'undefined') {
+        log_1.Log.warn(logLevel, 'AudioContext is not supported in this browser');
+    }
+};
+const useSingletonAudioContext = (logLevel) => {
+    const audioContext = (0, react_1.useMemo)(() => {
+        if (typeof AudioContext === 'undefined') {
+            warnOnce(logLevel);
+            return null;
+        }
+        return new AudioContext({
+            latencyHint: 'interactive',
+        });
+    }, [logLevel]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            if (audioContext) {
+                audioContext.close();
+            }
+        };
+    }, [audioContext]);
+    return audioContext;
+};
+exports.useSingletonAudioContext = useSingletonAudioContext;

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

@@ -28,7 +28,7 @@ const useBufferUntilFirstFrame = ({ mediaRef, mediaType, onVariableFpsVideoDetec
         if (!current) {
             return;
         }
-        if (current.readyState >= current.HAVE_ENOUGH_DATA &&
+        if (current.readyState >= current.HAVE_FUTURE_DATA &&
             !isSafariWebkit() &&
             // In Desktop Chrome, the video might switch to playing
             // but does not play due to Bluetooth headphones

package/dist/cjs/internals.d.ts

@@ -51,6 +51,7 @@ export declare const Internals: {
         registerAudio: (aud: import("./index.js").RemotionAudioProps, audioId: string) => {
             id: number;
             props: import("./index.js").RemotionAudioProps;
+            mediaElementSourceNode: import("./audio/shared-element-source-node.js").SharedElementSourceNode | null;
             el: React.RefObject<HTMLAudioElement | null>;
             audioId: string;
         };
@@ -62,6 +63,7 @@ export declare const Internals: {
         }) => void;
         playAllAudios: () => void;
         numberOfAudioTags: number;
+        audioContext: AudioContext | null;
     } | null>;
     readonly SharedAudioContextProvider: import("react").FC<{
         readonly numberOfAudioTags: number;

package/dist/cjs/media-tag-current-time-timestamp.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const useCurrentTimeOfMediaTagWithUpdateTimeStamp: (mediaRef: React.RefObject<HTMLVideoElement | HTMLAudioElement | null>) => React.RefObject<{
+    time: number;
+    lastUpdate: number;
+}>;

package/dist/cjs/media-tag-current-time-timestamp.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCurrentTimeOfMediaTagWithUpdateTimeStamp = void 0;
+const react_1 = __importDefault(require("react"));
+const useCurrentTimeOfMediaTagWithUpdateTimeStamp = (mediaRef) => {
+    var _a, _b, _c, _d;
+    const lastUpdate = react_1.default.useRef({
+        time: (_b = (_a = mediaRef.current) === null || _a === void 0 ? void 0 : _a.currentTime) !== null && _b !== void 0 ? _b : 0,
+        lastUpdate: performance.now(),
+    });
+    const nowCurrentTime = (_d = (_c = mediaRef.current) === null || _c === void 0 ? void 0 : _c.currentTime) !== null && _d !== void 0 ? _d : null;
+    if (nowCurrentTime !== null) {
+        if (lastUpdate.current.time !== nowCurrentTime) {
+            lastUpdate.current.time = nowCurrentTime;
+            lastUpdate.current.lastUpdate = performance.now();
+        }
+    }
+    return lastUpdate;
+};
+exports.useCurrentTimeOfMediaTagWithUpdateTimeStamp = useCurrentTimeOfMediaTagWithUpdateTimeStamp;

package/dist/cjs/use-amplification.d.ts

@@ -1,13 +1,16 @@
 import { type RefObject } from 'react';
+import type { SharedElementSourceNode } from './audio/shared-element-source-node';
 import type { LogLevel } from './log';
 type AudioItems = {
     gainNode: GainNode;
-    source: MediaElementAudioSourceNode;
-    audioContext: AudioContext;
 };
-export declare const getShouldAmplify: (volume: number) => boolean;
-export declare const useAmplification: ({ mediaRef, volume, logLevel, }: {
+/**
+ * [1] Bug case: In Safari, you cannot combine playbackRate and volume !== 1.
+ * If that is the case, volume will not be applied.
+ */
+export declare const useVolume: ({ mediaRef, volume, logLevel, source, }: {
     mediaRef: RefObject<HTMLAudioElement | HTMLVideoElement | null>;
+    source: SharedElementSourceNode | null;
     volume: number;
     logLevel: LogLevel;
 }) => RefObject<AudioItems | null>;

package/dist/cjs/use-amplification.js

@@ -1,66 +1,81 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAmplification = exports.getShouldAmplify = void 0;
+exports.useVolume = void 0;
 const react_1 = require("react");
+const shared_audio_tags_1 = require("./audio/shared-audio-tags");
+const is_approximately_the_same_1 = require("./is-approximately-the-same");
 const log_1 = require("./log");
+const video_fragment_1 = require("./video/video-fragment");
 let warned = false;
-const warnOnce = (logLevel) => {
+const warnSafariOnce = (logLevel) => {
     if (warned) {
         return;
     }
     warned = true;
-    log_1.Log.warn(logLevel, 'AudioContext is not supported in this browser');
+    log_1.Log.warn(logLevel, 'In Safari, setting a volume and a playback rate at the same time is buggy.');
+    log_1.Log.warn(logLevel, 'In Desktop Safari, only volumes <= 1 will be applied.');
+    log_1.Log.warn(logLevel, 'In Mobile Safari, the volume will be ignored and set to 1 if a playbackRate is set.');
 };
-const getShouldAmplify = (volume) => {
-    return volume > 1;
-};
-exports.getShouldAmplify = getShouldAmplify;
-const useAmplification = ({ mediaRef, volume, logLevel, }) => {
-    var _a;
-    const shouldAmplify = (0, exports.getShouldAmplify)(volume);
+/**
+ * [1] Bug case: In Safari, you cannot combine playbackRate and volume !== 1.
+ * If that is the case, volume will not be applied.
+ */
+const useVolume = ({ mediaRef, volume, logLevel, source, }) => {
+    var _a, _b, _c;
     const audioStuffRef = (0, react_1.useRef)(null);
     const currentVolumeRef = (0, react_1.useRef)(volume);
     currentVolumeRef.current = volume;
+    const sharedAudioContext = (0, react_1.useContext)(shared_audio_tags_1.SharedAudioContext);
+    if (!sharedAudioContext) {
+        throw new Error('useAmplification must be used within a SharedAudioContext');
+    }
+    const { audioContext } = sharedAudioContext;
     (0, react_1.useLayoutEffect)(() => {
-        var _a;
-        if (!shouldAmplify) {
+        var _a, _b;
+        if (!audioContext) {
             return;
         }
-        if (!AudioContext) {
-            warnOnce(logLevel);
+        if (!mediaRef.current) {
             return;
         }
-        if (!mediaRef.current) {
+        // [1]
+        if (mediaRef.current.playbackRate !== 1 && (0, video_fragment_1.isSafari)()) {
+            warnSafariOnce(logLevel);
             return;
         }
-        if (audioStuffRef.current) {
+        if (!source) {
             return;
         }
-        const audioContext = new AudioContext({
-            latencyHint: 'interactive',
-        });
-        const source = new MediaElementAudioSourceNode(audioContext, {
-            mediaElement: mediaRef.current,
-        });
         const gainNode = new GainNode(audioContext, {
-            gain: Math.max(currentVolumeRef.current, 1),
+            gain: currentVolumeRef.current,
         });
+        source.attemptToConnect();
+        source.get().connect(gainNode);
+        gainNode.connect(audioContext.destination);
         audioStuffRef.current = {
             gainNode,
-            source,
-            audioContext,
         };
-        source.connect(gainNode);
-        gainNode.connect(audioContext.destination);
-        log_1.Log.trace(logLevel, `Starting to amplify ${(_a = mediaRef.current) === null || _a === void 0 ? void 0 : _a.src}. Gain = ${currentVolumeRef.current}`);
-    }, [logLevel, mediaRef, shouldAmplify]);
+        log_1.Log.trace(logLevel, `Starting to amplify ${(_a = mediaRef.current) === null || _a === void 0 ? void 0 : _a.src}. Gain = ${currentVolumeRef.current}, playbackRate = ${(_b = mediaRef.current) === null || _b === void 0 ? void 0 : _b.playbackRate}`);
+        return () => {
+            audioStuffRef.current = null;
+            gainNode.disconnect();
+            source.get().disconnect();
+        };
+    }, [logLevel, mediaRef, audioContext, source]);
     if (audioStuffRef.current) {
-        const valueToSet = Math.max(volume, 1);
-        if (audioStuffRef.current.gainNode.gain.value !== valueToSet) {
+        const valueToSet = volume;
+        if (!(0, is_approximately_the_same_1.isApproximatelyTheSame)(audioStuffRef.current.gainNode.gain.value, valueToSet)) {
             audioStuffRef.current.gainNode.gain.value = valueToSet;
             log_1.Log.trace(logLevel, `Setting gain to ${valueToSet} for ${(_a = mediaRef.current) === null || _a === void 0 ? void 0 : _a.src}`);
         }
     }
+    // [1]
+    if (mediaRef.current &&
+        (0, video_fragment_1.isSafari)() &&
+        ((_b = mediaRef.current) === null || _b === void 0 ? void 0 : _b.playbackRate) !== 1 &&
+        !(0, is_approximately_the_same_1.isApproximatelyTheSame)(volume, (_c = mediaRef.current) === null || _c === void 0 ? void 0 : _c.volume)) {
+        mediaRef.current.volume = Math.min(volume, 1);
+    }
     return audioStuffRef;
 };
-exports.useAmplification = useAmplification;
+exports.useVolume = useVolume;

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

@@ -29,11 +29,13 @@ const useMediaBuffering = ({ element, shouldBuffer, isPremounting, logLevel, mou
                 if (!navigator.userAgent.includes('Firefox/')) {
                     (0, playback_logging_1.playbackLogging)({
                         logLevel,
-                        message: `Calling .load() on ${current.src} because readyState is ${current.readyState} and it is not Firefox. Element is premounted`,
+                        message: `Calling .load() on ${current.src} because readyState is ${current.readyState} and it is not Firefox. Element is premounted ${current.playbackRate}`,
                         tag: 'load',
                         mountTime,
                     });
+                    const previousPlaybackRate = current.playbackRate;
                     current.load();
+                    current.playbackRate = previousPlaybackRate;
                 }
             }
             return;
@@ -114,11 +116,13 @@ const useMediaBuffering = ({ element, shouldBuffer, isPremounting, logLevel, mou
                 if (!navigator.userAgent.includes('Firefox/')) {
                     (0, playback_logging_1.playbackLogging)({
                         logLevel,
-                        message: `Calling .load() on ${src} because readyState is ${current.readyState} and it is not Firefox.`,
+                        message: `Calling .load() on ${src} because readyState is ${current.readyState} and it is not Firefox. ${current.playbackRate}`,
                         tag: 'load',
                         mountTime,
                     });
+                    const previousPlaybackRate = current.playbackRate;
                     current.load();
+                    current.playbackRate = previousPlaybackRate;
                 }
             }
             else {

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

@@ -1,5 +1,5 @@
 import type { RefObject } from 'react';
-export declare const useMediaPlayback: ({ mediaRef, src, mediaType, playbackRate: localPlaybackRate, onlyWarnForMediaSeekingError, acceptableTimeshift, pauseWhenBuffering, isPremounting, onAutoPlayError, userPreferredVolume, }: {
+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,5 +9,4 @@ export declare const useMediaPlayback: ({ mediaRef, src, mediaType, playbackRate
     pauseWhenBuffering: boolean;
     isPremounting: boolean;
     onAutoPlayError: null | (() => void);
-    userPreferredVolume: number;
 }) => void;

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

@@ -7,18 +7,18 @@ 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 media_tag_current_time_timestamp_js_1 = require("./media-tag-current-time-timestamp.js");
 const play_and_handle_not_allowed_error_js_1 = require("./play-and-handle-not-allowed-error.js");
 const playback_logging_js_1 = require("./playback-logging.js");
 const seek_js_1 = require("./seek.js");
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
-const use_amplification_js_1 = require("./use-amplification.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 warn_about_non_seekable_media_js_1 = require("./warn-about-non-seekable-media.js");
-const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybackRate, onlyWarnForMediaSeekingError, acceptableTimeshift, pauseWhenBuffering, isPremounting, onAutoPlayError, userPreferredVolume, }) => {
+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)();
@@ -38,15 +38,19 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         if (!src) {
             return;
         }
+        if (isVariableFpsVideoMap.current[src]) {
+            return;
+        }
         log_js_1.Log.verbose(logLevel, `Detected ${src} as a variable FPS video. Disabling buffering while seeking.`);
         isVariableFpsVideoMap.current[src] = true;
     }, [logLevel, src]);
-    const currentTime = (0, use_request_video_callback_time_js_1.useRequestVideoCallbackTime)({
+    const rvcCurrentTime = (0, use_request_video_callback_time_js_1.useRequestVideoCallbackTime)({
         mediaRef,
         mediaType,
         lastSeek,
         onVariableFpsVideoDetected,
     });
+    const mediaTagCurrentTime = (0, media_tag_current_time_timestamp_js_1.useCurrentTimeOfMediaTagWithUpdateTimeStamp)(mediaRef);
     const desiredUnclampedTime = (0, get_current_time_js_1.getMediaTime)({
         frame,
         playbackRate: localPlaybackRate,
@@ -76,9 +80,7 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         const DEFAULT_ACCEPTABLE_TIMESHIFT_WITH_NORMAL_PLAYBACK = 0.45;
         // If there is amplification, the acceptable timeshift is higher
         const DEFAULT_ACCEPTABLE_TIMESHIFT_WITH_AMPLIFICATION = DEFAULT_ACCEPTABLE_TIMESHIFT_WITH_NORMAL_PLAYBACK + 0.2;
-        const defaultAcceptableTimeshift = (0, use_amplification_js_1.getShouldAmplify)(userPreferredVolume)
-            ? DEFAULT_ACCEPTABLE_TIMESHIFT_WITH_AMPLIFICATION
-            : DEFAULT_ACCEPTABLE_TIMESHIFT_WITH_NORMAL_PLAYBACK;
+        const defaultAcceptableTimeshift = DEFAULT_ACCEPTABLE_TIMESHIFT_WITH_AMPLIFICATION;
         // For short audio, a lower acceptable time shift is used
         if ((_a = mediaRef.current) === null || _a === void 0 ? void 0 : _a.duration) {
             return Math.min(mediaRef.current.duration, acceptableTimeshift !== null && acceptableTimeshift !== void 0 ? acceptableTimeshift : defaultAcceptableTimeshift);
@@ -124,8 +126,17 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         mountTime,
         playing,
     ]);
+    // This must be a useLayoutEffect, because afterwards, useVolume() looks at the playbackRate
+    // and it is also in a useLayoutEffect.
+    (0, react_1.useLayoutEffect)(() => {
+        const playbackRateToSet = Math.max(0, playbackRate);
+        if (mediaRef.current &&
+            mediaRef.current.playbackRate !== playbackRateToSet) {
+            mediaRef.current.playbackRate = playbackRateToSet;
+        }
+    }, [mediaRef, playbackRate]);
     (0, react_1.useEffect)(() => {
-        var _a;
+        var _a, _b, _c;
         const tagName = mediaType === 'audio' ? '<Audio>' : '<Video>';
         if (!mediaRef.current) {
             throw new Error(`No ${mediaType} ref found`);
@@ -133,22 +144,22 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         if (!src) {
             throw new Error(`No 'src' attribute was passed to the ${tagName} element.`);
         }
-        const playbackRateToSet = Math.max(0, playbackRate);
-        if (mediaRef.current.playbackRate !== playbackRateToSet) {
-            mediaRef.current.playbackRate = playbackRateToSet;
-        }
         const { duration } = mediaRef.current;
         const shouldBeTime = !Number.isNaN(duration) && Number.isFinite(duration)
             ? Math.min(duration, desiredUnclampedTime)
             : desiredUnclampedTime;
-        const mediaTagTime = mediaRef.current.currentTime;
-        const rvcTime = (_a = currentTime.current) !== null && _a !== void 0 ? _a : null;
+        const mediaTagTime = mediaTagCurrentTime.current.time;
+        const rvcTime = (_b = (_a = rvcCurrentTime.current) === null || _a === void 0 ? void 0 : _a.time) !== null && _b !== void 0 ? _b : null;
         const isVariableFpsVideo = isVariableFpsVideoMap.current[src];
         const timeShiftMediaTag = Math.abs(shouldBeTime - mediaTagTime);
         const timeShiftRvcTag = rvcTime ? Math.abs(shouldBeTime - rvcTime) : null;
-        const timeShift = timeShiftRvcTag && !isVariableFpsVideo
+        const mostRecentTimeshift = ((_c = rvcCurrentTime.current) === null || _c === void 0 ? void 0 : _c.lastUpdate) &&
+            rvcCurrentTime.current.time > mediaTagCurrentTime.current.lastUpdate
             ? timeShiftRvcTag
             : timeShiftMediaTag;
+        const timeShift = timeShiftRvcTag && !isVariableFpsVideo
+            ? mostRecentTimeshift
+            : timeShiftMediaTag;
         if (timeShift > acceptableTimeShiftButLessThanDuration &&
             lastSeekDueToShift.current !== shouldBeTime) {
             // If scrubbing around, adjust timing
@@ -238,7 +249,7 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         acceptableTimeShiftButLessThanDuration,
         bufferUntilFirstFrame,
         buffering.buffering,
-        currentTime,
+        rvcCurrentTime,
         logLevel,
         desiredUnclampedTime,
         isBuffering,
@@ -253,6 +264,7 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         isPremounting,
         pauseWhenBuffering,
         mountTime,
+        mediaTagCurrentTime,
     ]);
 };
 exports.useMediaPlayback = useMediaPlayback;

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

@@ -4,4 +4,7 @@ export declare const useRequestVideoCallbackTime: ({ mediaRef, mediaType, lastSe
     mediaType: "video" | "audio";
     lastSeek: React.MutableRefObject<number | null>;
     onVariableFpsVideoDetected: () => void;
-}) => RefObject<number | null>;
+}) => RefObject<{
+    time: number;
+    lastUpdate: number;
+} | null>;