@remotion/player 4.0.300 → 4.0.302

package/dist/cjs/use-player.js

@@ -39,6 +39,7 @@ const usePlayer = () => {
         emitter.dispatchSeek(newFrame);
     }, [emitter, setTimelinePosition, video === null || video === void 0 ? void 0 : video.id]);
     const play = (0, react_1.useCallback)((e) => {
+        var _a;
         if (imperativePlaying.current) {
             return;
         }
@@ -46,6 +47,7 @@ const usePlayer = () => {
         if (isLastFrame) {
             seek(0);
         }
+        (_a = audioContext === null || audioContext === void 0 ? void 0 : audioContext.audioContext) === null || _a === void 0 ? void 0 : _a.resume();
         /**
          * Play silent audio tags to warm them up for autoplay
          */
@@ -71,12 +73,14 @@ const usePlayer = () => {
         audioAndVideoTags,
     ]);
     const pause = (0, react_1.useCallback)(() => {
+        var _a;
         if (imperativePlaying.current) {
             imperativePlaying.current = false;
             setPlaying(false);
             emitter.dispatchPause();
+            (_a = audioContext === null || audioContext === void 0 ? void 0 : audioContext.audioContext) === null || _a === void 0 ? void 0 : _a.suspend();
         }
-    }, [emitter, imperativePlaying, setPlaying]);
+    }, [emitter, imperativePlaying, setPlaying, audioContext]);
     const pauseAndReturnToPlayStart = (0, react_1.useCallback)(() => {
         if (imperativePlaying.current) {
             imperativePlaying.current = false;

package/dist/esm/index.mjs

@@ -582,6 +582,7 @@ var usePlayer = () => {
     if (isLastFrame) {
       seek(0);
     }
+    audioContext?.audioContext?.resume();
     if (audioContext && audioContext.numberOfAudioTags > 0 && e) {
       audioContext.playAllAudios();
     }
@@ -604,8 +605,9 @@ var usePlayer = () => {
       imperativePlaying.current = false;
       setPlaying(false);
       emitter.dispatchPause();
+      audioContext?.audioContext?.suspend();
     }
-  }, [emitter, imperativePlaying, setPlaying]);
+  }, [emitter, imperativePlaying, setPlaying, audioContext]);
   const pauseAndReturnToPlayStart = useCallback2(() => {
     if (imperativePlaying.current) {
       imperativePlaying.current = false;

package/package.json

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

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

@@ -1,171 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePlayback = void 0;
-/* eslint-disable @typescript-eslint/no-use-before-define */
-const react_1 = require("react");
-const react_dom_1 = require("react-dom");
-const remotion_1 = require("remotion");
-const browser_mediasession_js_1 = require("./browser-mediasession.js");
-const calculate_next_frame_js_1 = require("./calculate-next-frame.js");
-const is_backgrounded_js_1 = require("./is-backgrounded.js");
-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 setFrame = remotion_1.Internals.Timeline.useTimelineSetFrame();
-    const buffering = (0, react_1.useRef)(null);
-    // requestAnimationFrame() does not work if the tab is not active.
-    // This means that audio will keep playing even if it has ended.
-    // In that case, we use setTimeout() instead.
-    const isBackgroundedRef = (0, is_backgrounded_js_1.useIsBackgrounded)();
-    const lastTimeUpdateEvent = (0, react_1.useRef)(null);
-    const context = (0, react_1.useContext)(remotion_1.Internals.BufferingContextReact);
-    if (!context) {
-        throw new Error('Missing the buffering context. Most likely you have a Remotion version mismatch.');
-    }
-    (0, browser_mediasession_js_1.useBrowserMediaSession)({
-        browserMediaControlsBehavior,
-        playbackRate,
-        videoConfig: config,
-    });
-    //	complete code for media session API
-    (0, react_1.useEffect)(() => {
-        const onBufferClear = context.listenForBuffering(() => {
-            buffering.current = performance.now();
-        });
-        const onResumeClear = context.listenForResume(() => {
-            buffering.current = null;
-        });
-        return () => {
-            onBufferClear.remove();
-            onResumeClear.remove();
-        };
-    }, [context]);
-    (0, react_1.useEffect)(() => {
-        if (!config) {
-            return;
-        }
-        if (!playing) {
-            return;
-        }
-        let hasBeenStopped = false;
-        let reqAnimFrameCall = null;
-        let startedTime = performance.now();
-        let framesAdvanced = 0;
-        const cancelQueuedFrame = () => {
-            if (reqAnimFrameCall !== null) {
-                if (reqAnimFrameCall.type === 'raf') {
-                    cancelAnimationFrame(reqAnimFrameCall.id);
-                }
-                else {
-                    clearTimeout(reqAnimFrameCall.id);
-                }
-            }
-        };
-        const stop = () => {
-            hasBeenStopped = true;
-            cancelQueuedFrame();
-        };
-        const callback = () => {
-            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;
-            const currentFrame = getCurrentFrame();
-            const { nextFrame, framesToAdvance, hasEnded } = (0, calculate_next_frame_js_1.calculateNextFrame)({
-                time,
-                currentFrame,
-                playbackSpeed: playbackRate,
-                fps: config.fps,
-                actualFirstFrame,
-                actualLastFrame,
-                framesAdvanced,
-                shouldLoop: loop,
-            });
-            framesAdvanced += framesToAdvance;
-            if (nextFrame !== getCurrentFrame() &&
-                (!hasEnded || moveToBeginningWhenEnded)) {
-                (0, react_dom_1.flushSync)(() => {
-                    setFrame((c) => ({ ...c, [config.id]: nextFrame }));
-                });
-            }
-            if (hasEnded) {
-                stop();
-                pause();
-                emitter.dispatchEnded();
-                return;
-            }
-            if (!hasBeenStopped) {
-                queueNextFrame();
-            }
-        };
-        const queueNextFrame = () => {
-            if (buffering.current) {
-                const stopListening = context.listenForResume(() => {
-                    stopListening.remove();
-                    if (hasBeenStopped) {
-                        return;
-                    }
-                    startedTime = performance.now();
-                    framesAdvanced = 0;
-                    callback();
-                });
-                return;
-            }
-            if (isBackgroundedRef.current) {
-                reqAnimFrameCall = {
-                    type: 'timeout',
-                    // Note: Most likely, this will not be 1000 / fps, but the browser will throttle it to ~1/sec.
-                    id: setTimeout(callback, 1000 / config.fps),
-                };
-            }
-            else {
-                reqAnimFrameCall = { type: 'raf', id: requestAnimationFrame(callback) };
-            }
-        };
-        queueNextFrame();
-        const onVisibilityChange = () => {
-            if (document.visibilityState === 'visible') {
-                return;
-            }
-            // If tab goes into the background, cancel requestAnimationFrame() and update immediately.
-            // , so the transition to setTimeout() can be fulfilled.
-            cancelQueuedFrame();
-            callback();
-        };
-        window.addEventListener('visibilitychange', onVisibilityChange);
-        return () => {
-            window.removeEventListener('visibilitychange', onVisibilityChange);
-            stop();
-        };
-    }, [
-        config,
-        loop,
-        pause,
-        playing,
-        setFrame,
-        emitter,
-        playbackRate,
-        inFrame,
-        outFrame,
-        moveToBeginningWhenEnded,
-        isBackgroundedRef,
-        getCurrentFrame,
-        buffering,
-        context,
-    ]);
-    (0, react_1.useEffect)(() => {
-        const interval = setInterval(() => {
-            if (lastTimeUpdateEvent.current === getCurrentFrame()) {
-                return;
-            }
-            emitter.dispatchTimeUpdate({ frame: getCurrentFrame() });
-            lastTimeUpdateEvent.current = getCurrentFrame();
-        }, 250);
-        return () => clearInterval(interval);
-    }, [emitter, getCurrentFrame]);
-    (0, react_1.useEffect)(() => {
-        emitter.dispatchFrameUpdate({ frame });
-    }, [emitter, frame]);
-};
-exports.usePlayback = usePlayback;