@remotion/player 4.0.458 → 4.0.460

package/dist/cjs/set-global-time-anchor.d.ts

@@ -1,5 +1,5 @@
 export declare const ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT = 0.1;
-export declare const setGlobalTimeAnchor: ({ audioContext, audioSyncAnchor, absoluteTimeInSeconds, globalPlaybackRate, logLevel, }: {
+export declare const setGlobalTimeAnchor: ({ audioContext, audioSyncAnchor, absoluteTimeInSeconds, globalPlaybackRate, logLevel, force, }: {
     audioContext: AudioContext;
     audioSyncAnchor: {
         value: number;
@@ -7,4 +7,5 @@ export declare const setGlobalTimeAnchor: ({ audioContext, audioSyncAnchor, abso
     absoluteTimeInSeconds: number;
     globalPlaybackRate: number;
     logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+    force: boolean;
 }) => boolean;

package/dist/cjs/set-global-time-anchor.js

@@ -3,17 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.setGlobalTimeAnchor = exports.ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT = void 0;
 const remotion_1 = require("remotion");
 exports.ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT = 0.1;
-const setGlobalTimeAnchor = ({ audioContext, audioSyncAnchor, absoluteTimeInSeconds, globalPlaybackRate, logLevel, }) => {
+const setGlobalTimeAnchor = ({ audioContext, audioSyncAnchor, absoluteTimeInSeconds, globalPlaybackRate, logLevel, force, }) => {
     const newAnchor = audioContext.currentTime - absoluteTimeInSeconds / globalPlaybackRate;
     const shift = (newAnchor - audioSyncAnchor.value) * globalPlaybackRate;
     const { outputLatency } = audioContext;
     const safeOutputLatency = outputLatency === 0 ? 0.3 : outputLatency;
     const latency = audioContext.baseLatency + safeOutputLatency;
     // Skip small shifts to avoid audio glitches from frame-quantized re-anchoring
-    if (Math.abs(shift) < exports.ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT + latency) {
+    if (Math.abs(shift) < exports.ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT + latency && !force) {
         return false;
     }
-    remotion_1.Internals.Log.verbose({ logLevel, tag: 'audio-scheduling' }, 'Anchor changed from %s to %s with shift %s', audioSyncAnchor.value, newAnchor, shift);
+    remotion_1.Internals.Log.verbose({ logLevel, tag: 'audio-scheduling' }, 'Anchor ' +
+        (force ? 'forcibly ' : '') +
+        'changed from %s to %s with shift %s', audioSyncAnchor.value, newAnchor, shift);
     audioSyncAnchor.value = newAnchor;
     return true;
 };

package/dist/cjs/use-playback.js

@@ -31,6 +31,8 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
         playbackRate,
         videoConfig: config,
     });
+    // Update time anchor when seeking:
+    // If the user clicked on a different time in the timeline, we need to re-sync the anchor
     (0, react_1.useLayoutEffect)(() => {
         if (!sharedAudioContext) {
             return;
@@ -41,17 +43,58 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
         if (!config) {
             return;
         }
+        if (muted) {
+            return;
+        }
         const changed = (0, set_global_time_anchor_js_1.setGlobalTimeAnchor)({
             audioContext: sharedAudioContext.audioContext,
             audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
             absoluteTimeInSeconds: frame / config.fps,
             globalPlaybackRate: playbackRate,
             logLevel,
+            force: false,
         });
         if (changed) {
             sharedAudioContext.audioSyncAnchorEmitter.dispatch('changed');
         }
-    }, [config, frame, logLevel, playbackRate, sharedAudioContext]);
+    }, [config, frame, logLevel, playbackRate, sharedAudioContext, muted]);
+    // When the audio context is suspended, we use the opportunity to
+    // re-anchor the time to be exact.
+    (0, react_1.useLayoutEffect)(() => {
+        const audioContext = sharedAudioContext === null || sharedAudioContext === void 0 ? void 0 : sharedAudioContext.audioContext;
+        if (!audioContext) {
+            return;
+        }
+        if (!config) {
+            return;
+        }
+        if (muted) {
+            return;
+        }
+        const callback = () => {
+            if (audioContext.state !== 'running') {
+                (0, set_global_time_anchor_js_1.setGlobalTimeAnchor)({
+                    audioContext,
+                    audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
+                    absoluteTimeInSeconds: getCurrentFrame() / config.fps,
+                    globalPlaybackRate: playbackRate,
+                    logLevel,
+                    force: true,
+                });
+            }
+        };
+        audioContext === null || audioContext === void 0 ? void 0 : audioContext.addEventListener('statechange', callback);
+        return () => {
+            audioContext === null || audioContext === void 0 ? void 0 : audioContext.removeEventListener('statechange', callback);
+        };
+    }, [
+        config,
+        getCurrentFrame,
+        logLevel,
+        muted,
+        playbackRate,
+        sharedAudioContext,
+    ]);
     (0, react_2.useEffect)(() => {
         var _a;
         if (!config) {
@@ -88,7 +131,7 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
                 (_a = sharedAudioContext === null || sharedAudioContext === void 0 ? void 0 : sharedAudioContext.suspend) === null || _a === void 0 ? void 0 : _a.call(sharedAudioContext);
                 return;
             }
-            if (!muted) {
+            if (!muted && !context.buffering.current) {
                 (_b = sharedAudioContext === null || sharedAudioContext === void 0 ? void 0 : sharedAudioContext.resume) === null || _b === void 0 ? void 0 : _b.call(sharedAudioContext);
             }
             const time = performance.now() - startedTime;
@@ -107,7 +150,8 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
             });
             framesAdvanced += framesToAdvance;
             if (nextFrame !== getCurrentFrame() &&
-                (!hasEnded || moveToBeginningWhenEnded)) {
+                (!hasEnded || moveToBeginningWhenEnded) &&
+                !context.buffering.current) {
                 setFrame((c) => ({ ...c, [config.id]: nextFrame }));
             }
             if (hasEnded) {
@@ -124,31 +168,16 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
             const getIsResumingAudioContext = (_c = (_a = sharedAudioContext === null || sharedAudioContext === void 0 ? void 0 : sharedAudioContext.getIsResumingAudioContext) === null || _a === void 0 ? void 0 : _a.call(sharedAudioContext)) !== null && _c !== void 0 ? _c : null;
             if (getIsResumingAudioContext !== null && !muted) {
                 getIsResumingAudioContext.then(() => {
-                    if (!(sharedAudioContext === null || sharedAudioContext === void 0 ? void 0 : sharedAudioContext.audioContext)) {
-                        return;
-                    }
-                    if (!sharedAudioContext.audioSyncAnchor) {
-                        return;
-                    }
-                    // set it here and DON'T propagate an event
-                    // the useLayoutEffect above is supposed to handle a user seek,
-                    // this is a natural wait for the audio playback to start.
-                    // we don't wanna destroy the iterators.
-                    (0, set_global_time_anchor_js_1.setGlobalTimeAnchor)({
-                        audioContext: sharedAudioContext.audioContext,
-                        audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
-                        absoluteTimeInSeconds: getCurrentFrame() / config.fps,
-                        globalPlaybackRate: playbackRate,
-                        logLevel,
-                    });
                     startedTime = performance.now();
                     framesAdvanced = 0;
                     queueNextFrame();
                 });
                 return;
             }
-            if (context.buffering.current && !muted) {
-                (_b = sharedAudioContext === null || sharedAudioContext === void 0 ? void 0 : sharedAudioContext.suspend) === null || _b === void 0 ? void 0 : _b.call(sharedAudioContext);
+            if (context.buffering.current) {
+                if (!muted) {
+                    (_b = sharedAudioContext === null || sharedAudioContext === void 0 ? void 0 : sharedAudioContext.suspend) === null || _b === void 0 ? void 0 : _b.call(sharedAudioContext);
+                }
                 const stopListening = context.listenForResume(() => {
                     stopListening.remove();
                     startedTime = performance.now();

package/dist/esm/index.mjs

@@ -912,17 +912,18 @@ var setGlobalTimeAnchor = ({
   audioSyncAnchor,
   absoluteTimeInSeconds,
   globalPlaybackRate,
-  logLevel
+  logLevel,
+  force
 }) => {
   const newAnchor = audioContext.currentTime - absoluteTimeInSeconds / globalPlaybackRate;
   const shift = (newAnchor - audioSyncAnchor.value) * globalPlaybackRate;
   const { outputLatency } = audioContext;
   const safeOutputLatency = outputLatency === 0 ? 0.3 : outputLatency;
   const latency = audioContext.baseLatency + safeOutputLatency;
-  if (Math.abs(shift) < ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT + latency) {
+  if (Math.abs(shift) < ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT + latency && !force) {
     return false;
   }
-  Internals6.Log.verbose({ logLevel, tag: "audio-scheduling" }, "Anchor changed from %s to %s with shift %s", audioSyncAnchor.value, newAnchor, shift);
+  Internals6.Log.verbose({ logLevel, tag: "audio-scheduling" }, "Anchor " + (force ? "forcibly " : "") + "changed from %s to %s with shift %s", audioSyncAnchor.value, newAnchor, shift);
   audioSyncAnchor.value = newAnchor;
   return true;
 };
@@ -965,17 +966,56 @@ var usePlayback = ({
     if (!config) {
       return;
     }
+    if (muted) {
+      return;
+    }
     const changed = setGlobalTimeAnchor({
       audioContext: sharedAudioContext.audioContext,
       audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
       absoluteTimeInSeconds: frame / config.fps,
       globalPlaybackRate: playbackRate,
-      logLevel
+      logLevel,
+      force: false
     });
     if (changed) {
       sharedAudioContext.audioSyncAnchorEmitter.dispatch("changed");
     }
-  }, [config, frame, logLevel, playbackRate, sharedAudioContext]);
+  }, [config, frame, logLevel, playbackRate, sharedAudioContext, muted]);
+  useLayoutEffect2(() => {
+    const audioContext = sharedAudioContext?.audioContext;
+    if (!audioContext) {
+      return;
+    }
+    if (!config) {
+      return;
+    }
+    if (muted) {
+      return;
+    }
+    const callback = () => {
+      if (audioContext.state !== "running") {
+        setGlobalTimeAnchor({
+          audioContext,
+          audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
+          absoluteTimeInSeconds: getCurrentFrame() / config.fps,
+          globalPlaybackRate: playbackRate,
+          logLevel,
+          force: true
+        });
+      }
+    };
+    audioContext?.addEventListener("statechange", callback);
+    return () => {
+      audioContext?.removeEventListener("statechange", callback);
+    };
+  }, [
+    config,
+    getCurrentFrame,
+    logLevel,
+    muted,
+    playbackRate,
+    sharedAudioContext
+  ]);
   useEffect5(() => {
     if (!config) {
       return;
@@ -1009,7 +1049,7 @@ var usePlayback = ({
         sharedAudioContext?.suspend?.();
         return;
       }
-      if (!muted) {
+      if (!muted && !context.buffering.current) {
         sharedAudioContext?.resume?.();
       }
       const time = performance.now() - startedTime;
@@ -1027,7 +1067,7 @@ var usePlayback = ({
         shouldLoop: loop
       });
       framesAdvanced += framesToAdvance;
-      if (nextFrame !== getCurrentFrame() && (!hasEnded || moveToBeginningWhenEnded)) {
+      if (nextFrame !== getCurrentFrame() && (!hasEnded || moveToBeginningWhenEnded) && !context.buffering.current) {
         setFrame((c) => ({ ...c, [config.id]: nextFrame }));
       }
       if (hasEnded) {
@@ -1042,27 +1082,16 @@ var usePlayback = ({
       const getIsResumingAudioContext = sharedAudioContext?.getIsResumingAudioContext?.() ?? null;
       if (getIsResumingAudioContext !== null && !muted) {
         getIsResumingAudioContext.then(() => {
-          if (!sharedAudioContext?.audioContext) {
-            return;
-          }
-          if (!sharedAudioContext.audioSyncAnchor) {
-            return;
-          }
-          setGlobalTimeAnchor({
-            audioContext: sharedAudioContext.audioContext,
-            audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
-            absoluteTimeInSeconds: getCurrentFrame() / config.fps,
-            globalPlaybackRate: playbackRate,
-            logLevel
-          });
           startedTime = performance.now();
           framesAdvanced = 0;
           queueNextFrame();
         });
         return;
       }
-      if (context.buffering.current && !muted) {
-        sharedAudioContext?.suspend?.();
+      if (context.buffering.current) {
+        if (!muted) {
+          sharedAudioContext?.suspend?.();
+        }
         const stopListening = context.listenForResume(() => {
           stopListening.remove();
           startedTime = performance.now();

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/player"
 	},
 	"name": "@remotion/player",
-	"version": "4.0.458",
+	"version": "4.0.460",
 	"description": "React component for embedding a Remotion preview into your app",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -36,7 +36,7 @@
 	],
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"remotion": "4.0.458"
+		"remotion": "4.0.460"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
@@ -50,7 +50,7 @@
 		"react-dom": "19.2.3",
 		"webpack": "5.105.0",
 		"zod": "4.3.6",
-		"@remotion/eslint-config-internal": "4.0.458",
+		"@remotion/eslint-config-internal": "4.0.460",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},