@remotion/player 4.0.394 → 4.0.396

package/dist/cjs/use-playback.js

@@ -11,7 +11,7 @@ const use_player_js_1 = require("./use-player.js");
 const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, browserMediaControlsBehavior, getCurrentFrame, }) => {
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
-    const { playing, pause, emitter } = (0, use_player_js_1.usePlayer)();
+    const { playing, pause, emitter, isPlaying } = (0, use_player_js_1.usePlayer)();
     const setFrame = remotion_1.Internals.Timeline.useTimelineSetFrame();
     // requestAnimationFrame() does not work if the tab is not active.
     // This means that audio will keep playing even if it has ended.
@@ -57,6 +57,9 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
             if (hasBeenStopped) {
                 return;
             }
+            if (!isPlaying()) {
+                return;
+            }
             const time = performance.now() - startedTime;
             const actualLastFrame = outFrame !== null && outFrame !== void 0 ? outFrame : config.durationInFrames - 1;
             const actualFirstFrame = inFrame !== null && inFrame !== void 0 ? inFrame : 0;
@@ -133,6 +136,7 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
         isBackgroundedRef,
         getCurrentFrame,
         context,
+        isPlaying,
     ]);
     (0, react_1.useEffect)(() => {
         const interval = setInterval(() => {

package/dist/cjs/use-player.js

@@ -143,6 +143,15 @@ const usePlayer = () => {
             play(e);
         }
     }, [imperativePlaying, pause, play]);
+    const isPlaying = (0, react_1.useCallback)(() => {
+        return imperativePlaying.current;
+    }, [imperativePlaying]);
+    const getCurrentFrame = (0, react_1.useCallback)(() => {
+        return frameRef.current;
+    }, [frameRef]);
+    const isBuffering = (0, react_1.useCallback)(() => {
+        return buffering.current;
+    }, [buffering]);
     const returnValue = (0, react_1.useMemo)(() => {
         return {
             frameBack,
@@ -154,28 +163,29 @@ const usePlayer = () => {
             pause,
             seek,
             isFirstFrame,
-            getCurrentFrame: () => frameRef.current,
-            isPlaying: () => imperativePlaying.current,
-            isBuffering: () => buffering.current,
+            getCurrentFrame,
+            isPlaying,
+            isBuffering,
             pauseAndReturnToPlayStart,
             hasPlayed,
             toggle,
         };
     }, [
-        buffering,
         emitter,
         frameBack,
         frameForward,
         hasPlayed,
-        imperativePlaying,
         isFirstFrame,
         isLastFrame,
+        getCurrentFrame,
         pause,
         pauseAndReturnToPlayStart,
         play,
         playing,
         seek,
         toggle,
+        isPlaying,
+        isBuffering,
     ]);
     return returnValue;
 };

package/dist/esm/index.mjs

@@ -687,6 +687,15 @@ var usePlayer = () => {
       play(e);
     }
   }, [imperativePlaying, pause, play]);
+  const isPlaying = useCallback2(() => {
+    return imperativePlaying.current;
+  }, [imperativePlaying]);
+  const getCurrentFrame = useCallback2(() => {
+    return frameRef.current;
+  }, [frameRef]);
+  const isBuffering = useCallback2(() => {
+    return buffering.current;
+  }, [buffering]);
   const returnValue = useMemo(() => {
     return {
       frameBack,
@@ -698,28 +707,29 @@ var usePlayer = () => {
       pause,
       seek,
       isFirstFrame,
-      getCurrentFrame: () => frameRef.current,
-      isPlaying: () => imperativePlaying.current,
-      isBuffering: () => buffering.current,
+      getCurrentFrame,
+      isPlaying,
+      isBuffering,
       pauseAndReturnToPlayStart,
       hasPlayed,
       toggle
     };
   }, [
-    buffering,
     emitter,
     frameBack,
     frameForward,
     hasPlayed,
-    imperativePlaying,
     isFirstFrame,
     isLastFrame,
+    getCurrentFrame,
     pause,
     pauseAndReturnToPlayStart,
     play,
     playing,
     seek,
-    toggle
+    toggle,
+    isPlaying,
+    isBuffering
   ]);
   return returnValue;
 };
@@ -897,7 +907,7 @@ var usePlayback = ({
 }) => {
   const config = Internals6.useUnsafeVideoConfig();
   const frame = Internals6.Timeline.useTimelinePosition();
-  const { playing, pause, emitter } = usePlayer();
+  const { playing, pause, emitter, isPlaying } = usePlayer();
   const setFrame = Internals6.Timeline.useTimelineSetFrame();
   const isBackgroundedRef = useIsBackgrounded();
   const lastTimeUpdateEvent = useRef4(null);
@@ -938,6 +948,9 @@ var usePlayback = ({
       if (hasBeenStopped) {
         return;
       }
+      if (!isPlaying()) {
+        return;
+      }
       const time = performance.now() - startedTime;
       const actualLastFrame = outFrame ?? config.durationInFrames - 1;
       const actualFirstFrame = inFrame ?? 0;
@@ -1009,7 +1022,8 @@ var usePlayback = ({
     moveToBeginningWhenEnded,
     isBackgroundedRef,
     getCurrentFrame,
-    context
+    context,
+    isPlaying
   ]);
   useEffect5(() => {
     const interval = setInterval(() => {

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/player"
 	},
 	"name": "@remotion/player",
-	"version": "4.0.394",
+	"version": "4.0.396",
 	"description": "React component for embedding a Remotion preview into your app",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -35,7 +35,7 @@
 	],
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"remotion": "4.0.394"
+		"remotion": "4.0.396"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
@@ -49,7 +49,7 @@
 		"react-dom": "19.2.3",
 		"webpack": "5.96.1",
 		"zod": "3.22.3",
-		"@remotion/eslint-config-internal": "4.0.394",
+		"@remotion/eslint-config-internal": "4.0.396",
 		"eslint": "9.19.0"
 	},
 	"keywords": [