@remotion/player 4.0.220 → 4.0.222

package/dist/cjs/Player.d.ts

@@ -5,6 +5,7 @@ import type { AnyZodObject } from 'zod';
 import type { RenderMuteButton } from './MediaVolumeSlider.js';
 import type { RenderFullscreenButton, RenderPlayPauseButton } from './PlayerControls.js';
 import type { PosterFillMode, RenderLoading, RenderPoster } from './PlayerUI.js';
+import type { BrowserMediaControlsBehavior } from './browser-mediasession.js';
 import type { PlayerRef } from './player-methods.js';
 import type { RenderVolumeSlider } from './render-volume-slider.js';
 import type { PropsIfHasProps } from './utils/props-if-has-props.js';
@@ -52,6 +53,7 @@ export type PlayerProps<Schema extends AnyZodObject, Props extends Record<string
     readonly bufferStateDelayInMilliseconds?: number;
     readonly hideControlsWhenPointerDoesntMove?: boolean | number;
     readonly overflowVisible?: boolean;
+    readonly browserMediaControlsBehavior?: BrowserMediaControlsBehavior;
 } & CompProps<Props> & PropsIfHasProps<Schema, Props>;
 export type PlayerPropsWithoutZod<Props extends Record<string, unknown>> = PlayerProps<AnyZodObject, Props>;
 export declare const componentOrNullIfLazy: <Props>(props: CompProps<Props>) => ComponentType<Props> | null;

package/dist/cjs/Player.js

@@ -22,7 +22,7 @@ const componentOrNullIfLazy = (props) => {
     return null;
 };
 exports.componentOrNullIfLazy = componentOrNullIfLazy;
-const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls = false, loop = false, autoPlay = false, showVolumeControls = true, allowFullscreen = true, clickToPlay, doubleClickToFullscreen = false, spaceKeyToPlayOrPause = true, moveToBeginningWhenEnded = true, numberOfSharedAudioTags = 5, errorFallback = () => '⚠️', playbackRate = 1, renderLoading, className, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, showPosterWhenBuffering, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, renderFullscreenButton, renderPlayPauseButton, renderVolumeSlider, alwaysShowControls = false, initiallyMuted = false, showPlaybackRateControl = false, posterFillMode = 'player-size', bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove = true, overflowVisible = false, renderMuteButton, ...componentProps }, ref) => {
+const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls = false, loop = false, autoPlay = false, showVolumeControls = true, allowFullscreen = true, clickToPlay, doubleClickToFullscreen = false, spaceKeyToPlayOrPause = true, moveToBeginningWhenEnded = true, numberOfSharedAudioTags = 5, errorFallback = () => '⚠️', playbackRate = 1, renderLoading, className, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, showPosterWhenBuffering, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, renderFullscreenButton, renderPlayPauseButton, renderVolumeSlider, alwaysShowControls = false, initiallyMuted = false, showPlaybackRateControl = false, posterFillMode = 'player-size', bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove = true, overflowVisible = false, renderMuteButton, browserMediaControlsBehavior: passedBrowserMediaControlsBehavior, ...componentProps }, ref) => {
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
@@ -138,9 +138,14 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
         }, []);
     }
     const actualInputProps = (0, react_1.useMemo)(() => inputProps !== null && inputProps !== void 0 ? inputProps : {}, [inputProps]);
+    const browserMediaControlsBehavior = (0, react_1.useMemo)(() => {
+        return (passedBrowserMediaControlsBehavior !== null && passedBrowserMediaControlsBehavior !== void 0 ? passedBrowserMediaControlsBehavior : {
+            mode: 'prevent-media-session',
+        });
+    }, [passedBrowserMediaControlsBehavior]);
     return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.IsPlayerContextProvider, { children: (0, jsx_runtime_1.jsx)(SharedPlayerContext_js_1.SharedPlayerContexts, { timelineContext: timelineContextValue, component: component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, numberOfSharedAudioTags: numberOfSharedAudioTags, initiallyMuted: initiallyMuted, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(EmitterProvider_js_1.PlayerEmitterProvider, { currentPlaybackRate: currentPlaybackRate, children: (0, jsx_runtime_1.jsx)(PlayerUI_js_1.default, { ref: rootRef, posterFillMode: posterFillMode, renderLoading: renderLoading, autoPlay: Boolean(autoPlay), loop: Boolean(loop), controls: Boolean(controls), errorFallback: errorFallback, style: style, inputProps: actualInputProps, allowFullscreen: Boolean(allowFullscreen), moveToBeginningWhenEnded: Boolean(moveToBeginningWhenEnded), clickToPlay: typeof clickToPlay === 'boolean'
                             ? clickToPlay
-                            : Boolean(controls), showVolumeControls: Boolean(showVolumeControls), doubleClickToFullscreen: Boolean(doubleClickToFullscreen), spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause), playbackRate: currentPlaybackRate, className: className !== null && className !== void 0 ? className : undefined, showPosterWhenUnplayed: Boolean(showPosterWhenUnplayed), showPosterWhenEnded: Boolean(showPosterWhenEnded), showPosterWhenPaused: Boolean(showPosterWhenPaused), showPosterWhenBuffering: Boolean(showPosterWhenBuffering), renderPoster: renderPoster, inFrame: inFrame !== null && inFrame !== void 0 ? inFrame : null, outFrame: outFrame !== null && outFrame !== void 0 ? outFrame : null, initiallyShowControls: initiallyShowControls !== null && initiallyShowControls !== void 0 ? initiallyShowControls : true, renderFullscreen: renderFullscreenButton !== null && renderFullscreenButton !== void 0 ? renderFullscreenButton : null, renderPlayPauseButton: renderPlayPauseButton !== null && renderPlayPauseButton !== void 0 ? renderPlayPauseButton : null, renderMuteButton: renderMuteButton !== null && renderMuteButton !== void 0 ? renderMuteButton : null, renderVolumeSlider: renderVolumeSlider !== null && renderVolumeSlider !== void 0 ? renderVolumeSlider : null, alwaysShowControls: alwaysShowControls, showPlaybackRateControl: showPlaybackRateControl, bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds !== null && bufferStateDelayInMilliseconds !== void 0 ? bufferStateDelayInMilliseconds : 300, hideControlsWhenPointerDoesntMove: hideControlsWhenPointerDoesntMove, overflowVisible: overflowVisible }) }) }) }) }));
+                            : Boolean(controls), showVolumeControls: Boolean(showVolumeControls), doubleClickToFullscreen: Boolean(doubleClickToFullscreen), spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause), playbackRate: currentPlaybackRate, className: className !== null && className !== void 0 ? className : undefined, showPosterWhenUnplayed: Boolean(showPosterWhenUnplayed), showPosterWhenEnded: Boolean(showPosterWhenEnded), showPosterWhenPaused: Boolean(showPosterWhenPaused), showPosterWhenBuffering: Boolean(showPosterWhenBuffering), renderPoster: renderPoster, inFrame: inFrame !== null && inFrame !== void 0 ? inFrame : null, outFrame: outFrame !== null && outFrame !== void 0 ? outFrame : null, initiallyShowControls: initiallyShowControls !== null && initiallyShowControls !== void 0 ? initiallyShowControls : true, renderFullscreen: renderFullscreenButton !== null && renderFullscreenButton !== void 0 ? renderFullscreenButton : null, renderPlayPauseButton: renderPlayPauseButton !== null && renderPlayPauseButton !== void 0 ? renderPlayPauseButton : null, renderMuteButton: renderMuteButton !== null && renderMuteButton !== void 0 ? renderMuteButton : null, renderVolumeSlider: renderVolumeSlider !== null && renderVolumeSlider !== void 0 ? renderVolumeSlider : null, alwaysShowControls: alwaysShowControls, showPlaybackRateControl: showPlaybackRateControl, bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds !== null && bufferStateDelayInMilliseconds !== void 0 ? bufferStateDelayInMilliseconds : 300, hideControlsWhenPointerDoesntMove: hideControlsWhenPointerDoesntMove, overflowVisible: overflowVisible, browserMediaControlsBehavior: browserMediaControlsBehavior }) }) }) }) }));
 };
 const forward = react_1.forwardRef;
 /**

package/dist/cjs/PlayerUI.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { RenderMuteButton } from './MediaVolumeSlider.js';
 import type { RenderFullscreenButton, RenderPlayPauseButton } from './PlayerControls.js';
+import type { BrowserMediaControlsBehavior } from './browser-mediasession.js';
 import type { PlayerRef } from './player-methods.js';
 import type { RenderVolumeSlider } from './render-volume-slider.js';
 export type ErrorFallback = (info: {
@@ -47,5 +48,6 @@ declare const _default: React.ForwardRefExoticComponent<{
     readonly bufferStateDelayInMilliseconds: number;
     readonly hideControlsWhenPointerDoesntMove: boolean | number;
     readonly overflowVisible: boolean;
+    readonly browserMediaControlsBehavior: BrowserMediaControlsBehavior;
 } & React.RefAttributes<PlayerRef>>;
 export default _default;

package/dist/cjs/PlayerUI.js

@@ -40,7 +40,7 @@ if (reactVersion === '0') {
     throw new Error(`Version ${reactVersion} of "react" is not supported by Remotion`);
 }
 const doesReactVersionSupportSuspense = parseInt(reactVersion, 10) >= 18;
-const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay, showVolumeControls, doubleClickToFullscreen, spaceKeyToPlayOrPause, errorFallback, playbackRate, renderLoading, renderPoster, className, moveToBeginningWhenEnded, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, showPosterWhenBuffering, inFrame, outFrame, initiallyShowControls, renderFullscreen: renderFullscreenButton, renderPlayPauseButton, renderMuteButton, renderVolumeSlider, alwaysShowControls, showPlaybackRateControl, posterFillMode, bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove, overflowVisible, }, ref) => {
+const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay, showVolumeControls, doubleClickToFullscreen, spaceKeyToPlayOrPause, errorFallback, playbackRate, renderLoading, renderPoster, className, moveToBeginningWhenEnded, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, showPosterWhenBuffering, inFrame, outFrame, initiallyShowControls, renderFullscreen: renderFullscreenButton, renderPlayPauseButton, renderMuteButton, renderVolumeSlider, alwaysShowControls, showPlaybackRateControl, posterFillMode, bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove, overflowVisible, browserMediaControlsBehavior, }, ref) => {
     var _a, _b, _c;
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const video = remotion_1.Internals.useVideo();
@@ -69,6 +69,7 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
         inFrame,
         outFrame,
         frameRef: player.remotionInternal_currentFrameRef,
+        browserMediaControlsBehavior,
     });
     (0, react_1.useEffect)(() => {
         if (hasPausedToResume && !player.playing) {

package/dist/cjs/browser-mediasession.d.ts

@@ -0,0 +1,13 @@
+import type { VideoConfig } from 'remotion';
+export type BrowserMediaControlsBehavior = {
+    mode: 'do-nothing';
+} | {
+    mode: 'prevent-media-session';
+} | {
+    mode: 'register-media-session';
+};
+export declare const useBrowserMediaSession: ({ browserMediaControlsBehavior, videoConfig, playbackRate, }: {
+    browserMediaControlsBehavior: BrowserMediaControlsBehavior;
+    videoConfig: VideoConfig | null;
+    playbackRate: number;
+}) => void;

package/dist/cjs/browser-mediasession.js

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBrowserMediaSession = void 0;
+const react_1 = require("react");
+const use_player_js_1 = require("./use-player.js");
+const useBrowserMediaSession = ({ browserMediaControlsBehavior, videoConfig, playbackRate, }) => {
+    const { playing, pause, play, emitter, getCurrentFrame, seek } = (0, use_player_js_1.usePlayer)();
+    (0, react_1.useEffect)(() => {
+        if (!navigator.mediaSession) {
+            return;
+        }
+        if (browserMediaControlsBehavior.mode === 'do-nothing') {
+            return;
+        }
+        if (playing) {
+            navigator.mediaSession.playbackState = 'playing';
+        }
+        else {
+            navigator.mediaSession.playbackState = 'paused';
+        }
+    }, [browserMediaControlsBehavior.mode, playing]);
+    (0, react_1.useEffect)(() => {
+        if (!navigator.mediaSession) {
+            return;
+        }
+        if (browserMediaControlsBehavior.mode === 'do-nothing') {
+            return;
+        }
+        const onTimeUpdate = () => {
+            if (!videoConfig) {
+                return;
+            }
+            if (navigator.mediaSession) {
+                navigator.mediaSession.setPositionState({
+                    duration: videoConfig.durationInFrames / videoConfig.fps,
+                    playbackRate,
+                    position: getCurrentFrame() / videoConfig.fps,
+                });
+            }
+        };
+        emitter.addEventListener('timeupdate', onTimeUpdate);
+        return () => {
+            emitter.removeEventListener('timeupdate', onTimeUpdate);
+        };
+    }, [
+        browserMediaControlsBehavior.mode,
+        emitter,
+        getCurrentFrame,
+        playbackRate,
+        videoConfig,
+    ]);
+    (0, react_1.useEffect)(() => {
+        if (!navigator.mediaSession) {
+            return;
+        }
+        if (browserMediaControlsBehavior.mode === 'do-nothing') {
+            return;
+        }
+        navigator.mediaSession.setActionHandler('play', () => {
+            if (browserMediaControlsBehavior.mode === 'register-media-session') {
+                play();
+            }
+        });
+        navigator.mediaSession.setActionHandler('pause', () => {
+            if (browserMediaControlsBehavior.mode === 'register-media-session') {
+                pause();
+            }
+        });
+        navigator.mediaSession.setActionHandler('seekto', (event) => {
+            if (browserMediaControlsBehavior.mode === 'register-media-session' &&
+                event.seekTime !== undefined &&
+                videoConfig) {
+                seek(Math.round(event.seekTime * videoConfig.fps));
+            }
+        });
+        navigator.mediaSession.setActionHandler('seekbackward', () => {
+            if (browserMediaControlsBehavior.mode === 'register-media-session' &&
+                videoConfig) {
+                seek(Math.max(0, Math.round((getCurrentFrame() - 10) * videoConfig.fps)));
+            }
+        });
+        navigator.mediaSession.setActionHandler('seekforward', () => {
+            if (browserMediaControlsBehavior.mode === 'register-media-session' &&
+                videoConfig) {
+                seek(Math.max(videoConfig.durationInFrames - 1, Math.round((getCurrentFrame() + 10) * videoConfig.fps)));
+            }
+        });
+        navigator.mediaSession.setActionHandler('previoustrack', () => {
+            if (browserMediaControlsBehavior.mode === 'register-media-session') {
+                seek(0);
+            }
+        });
+        return () => {
+            navigator.mediaSession.metadata = null;
+            navigator.mediaSession.setActionHandler('play', null);
+            navigator.mediaSession.setActionHandler('pause', null);
+            navigator.mediaSession.setActionHandler('seekto', null);
+            navigator.mediaSession.setActionHandler('seekbackward', null);
+            navigator.mediaSession.setActionHandler('seekforward', null);
+            navigator.mediaSession.setActionHandler('previoustrack', null);
+        };
+    }, [
+        browserMediaControlsBehavior.mode,
+        getCurrentFrame,
+        pause,
+        play,
+        seek,
+        videoConfig,
+    ]);
+};
+exports.useBrowserMediaSession = useBrowserMediaSession;

package/dist/cjs/error-boundary.d.ts

@@ -15,5 +15,5 @@ export declare class ErrorBoundary extends React.Component<{
         hasError: Error;
     };
     componentDidCatch(error: Error): void;
-    render(): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | null | undefined;
+    render(): string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
 }

package/dist/cjs/index.d.ts

@@ -32,13 +32,14 @@ export declare const PlayerInternals: {
         isBuffering: () => boolean;
         remotionInternal_currentFrameRef: React.MutableRefObject<number>;
     };
-    usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, frameRef, }: {
+    usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, frameRef, browserMediaControlsBehavior, }: {
         loop: boolean;
         playbackRate: number;
         moveToBeginningWhenEnded: boolean;
         inFrame: number | null;
         outFrame: number | null;
         frameRef: React.MutableRefObject<number>;
+        browserMediaControlsBehavior: import("./browser-mediasession.js").BrowserMediaControlsBehavior;
     }) => void;
     useElementSize: (ref: React.RefObject<HTMLElement>, options: {
         triggerOnWindowResize: boolean;

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

@@ -1,8 +1,10 @@
-export declare const usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, frameRef, }: {
+import type { BrowserMediaControlsBehavior } from './browser-mediasession.js';
+export declare const usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, frameRef, browserMediaControlsBehavior, }: {
     loop: boolean;
     playbackRate: number;
     moveToBeginningWhenEnded: boolean;
     inFrame: number | null;
     outFrame: number | null;
     frameRef: React.MutableRefObject<number>;
+    browserMediaControlsBehavior: BrowserMediaControlsBehavior;
 }) => void;

package/dist/cjs/use-playback.js

@@ -4,10 +4,11 @@ exports.usePlayback = void 0;
 /* eslint-disable @typescript-eslint/no-use-before-define */
 const react_1 = require("react");
 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, frameRef, }) => {
+const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, frameRef, browserMediaControlsBehavior, }) => {
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
     const { playing, pause, emitter } = (0, use_player_js_1.usePlayer)();
@@ -22,6 +23,12 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
     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();

package/dist/esm/index.mjs

@@ -520,77 +520,25 @@ var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
 };
 
 // src/use-playback.ts
-import { useContext as useContext4, useEffect as useEffect5, useRef as useRef3 } from "react";
+import { useContext as useContext4, useEffect as useEffect6, useRef as useRef3 } from "react";
 import { Internals as Internals5 } from "remotion";
 
-// src/calculate-next-frame.ts
-var calculateNextFrame = ({
-  time,
-  currentFrame: startFrame,
-  playbackSpeed,
-  fps,
-  actualLastFrame,
-  actualFirstFrame,
-  framesAdvanced,
-  shouldLoop
-}) => {
-  const op = playbackSpeed < 0 ? Math.ceil : Math.floor;
-  const framesToAdvance = op(time * playbackSpeed / (1000 / fps)) - framesAdvanced;
-  const nextFrame = framesToAdvance + startFrame;
-  const isCurrentFrameOutside = startFrame > actualLastFrame || startFrame < actualFirstFrame;
-  const isNextFrameOutside = nextFrame > actualLastFrame || nextFrame < actualFirstFrame;
-  const hasEnded = !shouldLoop && isNextFrameOutside && !isCurrentFrameOutside;
-  if (playbackSpeed > 0) {
-    if (isNextFrameOutside) {
-      return {
-        nextFrame: actualFirstFrame,
-        framesToAdvance,
-        hasEnded
-      };
-    }
-    return { nextFrame, framesToAdvance, hasEnded };
-  }
-  if (isNextFrameOutside) {
-    return { nextFrame: actualLastFrame, framesToAdvance, hasEnded };
-  }
-  return { nextFrame, framesToAdvance, hasEnded };
-};
-
-// src/is-backgrounded.ts
-import { useEffect as useEffect4, useRef } from "react";
-var getIsBackgrounded = () => {
-  if (typeof document === "undefined") {
-    return false;
-  }
-  return document.visibilityState === "hidden";
-};
-var useIsBackgrounded = () => {
-  const isBackgrounded = useRef(getIsBackgrounded());
-  useEffect4(() => {
-    const onVisibilityChange = () => {
-      isBackgrounded.current = getIsBackgrounded();
-    };
-    document.addEventListener("visibilitychange", onVisibilityChange);
-    return () => {
-      document.removeEventListener("visibilitychange", onVisibilityChange);
-    };
-  }, []);
-  return isBackgrounded;
-};
+// src/browser-mediasession.ts
+import { useEffect as useEffect4 } from "react";
 
 // src/use-player.ts
-import { useCallback, useContext as useContext3, useMemo, useRef as useRef2, useState as useState3 } from "react";
+import { useCallback, useContext as useContext3, useMemo, useRef, useState as useState3 } from "react";
 import { Internals as Internals4 } from "remotion";
 var usePlayer = () => {
   const [playing, setPlaying, imperativePlaying] = Internals4.Timeline.usePlayingState();
   const [hasPlayed, setHasPlayed] = useState3(false);
   const frame = Internals4.Timeline.useTimelinePosition();
-  const playStart = useRef2(frame);
+  const playStart = useRef(frame);
   const setFrame = Internals4.Timeline.useTimelineSetFrame();
   const setTimelinePosition = Internals4.Timeline.useTimelineSetFrame();
   const audioContext = useContext3(Internals4.SharedAudioContext);
   const { audioAndVideoTags } = useContext3(Internals4.Timeline.TimelineContext);
-  const frameRef = useRef2(frame);
+  const frameRef = useRef(frame);
   frameRef.current = frame;
   const video = Internals4.useVideo();
   const config = Internals4.useUnsafeVideoConfig();
@@ -726,6 +674,167 @@ var usePlayer = () => {
   return returnValue;
 };
 
+// src/browser-mediasession.ts
+var useBrowserMediaSession = ({
+  browserMediaControlsBehavior,
+  videoConfig,
+  playbackRate
+}) => {
+  const { playing, pause, play, emitter, getCurrentFrame, seek } = usePlayer();
+  useEffect4(() => {
+    if (!navigator.mediaSession) {
+      return;
+    }
+    if (browserMediaControlsBehavior.mode === "do-nothing") {
+      return;
+    }
+    if (playing) {
+      navigator.mediaSession.playbackState = "playing";
+    } else {
+      navigator.mediaSession.playbackState = "paused";
+    }
+  }, [browserMediaControlsBehavior.mode, playing]);
+  useEffect4(() => {
+    if (!navigator.mediaSession) {
+      return;
+    }
+    if (browserMediaControlsBehavior.mode === "do-nothing") {
+      return;
+    }
+    const onTimeUpdate = () => {
+      if (!videoConfig) {
+        return;
+      }
+      if (navigator.mediaSession) {
+        navigator.mediaSession.setPositionState({
+          duration: videoConfig.durationInFrames / videoConfig.fps,
+          playbackRate,
+          position: getCurrentFrame() / videoConfig.fps
+        });
+      }
+    };
+    emitter.addEventListener("timeupdate", onTimeUpdate);
+    return () => {
+      emitter.removeEventListener("timeupdate", onTimeUpdate);
+    };
+  }, [
+    browserMediaControlsBehavior.mode,
+    emitter,
+    getCurrentFrame,
+    playbackRate,
+    videoConfig
+  ]);
+  useEffect4(() => {
+    if (!navigator.mediaSession) {
+      return;
+    }
+    if (browserMediaControlsBehavior.mode === "do-nothing") {
+      return;
+    }
+    navigator.mediaSession.setActionHandler("play", () => {
+      if (browserMediaControlsBehavior.mode === "register-media-session") {
+        play();
+      }
+    });
+    navigator.mediaSession.setActionHandler("pause", () => {
+      if (browserMediaControlsBehavior.mode === "register-media-session") {
+        pause();
+      }
+    });
+    navigator.mediaSession.setActionHandler("seekto", (event) => {
+      if (browserMediaControlsBehavior.mode === "register-media-session" && event.seekTime !== undefined && videoConfig) {
+        seek(Math.round(event.seekTime * videoConfig.fps));
+      }
+    });
+    navigator.mediaSession.setActionHandler("seekbackward", () => {
+      if (browserMediaControlsBehavior.mode === "register-media-session" && videoConfig) {
+        seek(Math.max(0, Math.round((getCurrentFrame() - 10) * videoConfig.fps)));
+      }
+    });
+    navigator.mediaSession.setActionHandler("seekforward", () => {
+      if (browserMediaControlsBehavior.mode === "register-media-session" && videoConfig) {
+        seek(Math.max(videoConfig.durationInFrames - 1, Math.round((getCurrentFrame() + 10) * videoConfig.fps)));
+      }
+    });
+    navigator.mediaSession.setActionHandler("previoustrack", () => {
+      if (browserMediaControlsBehavior.mode === "register-media-session") {
+        seek(0);
+      }
+    });
+    return () => {
+      navigator.mediaSession.metadata = null;
+      navigator.mediaSession.setActionHandler("play", null);
+      navigator.mediaSession.setActionHandler("pause", null);
+      navigator.mediaSession.setActionHandler("seekto", null);
+      navigator.mediaSession.setActionHandler("seekbackward", null);
+      navigator.mediaSession.setActionHandler("seekforward", null);
+      navigator.mediaSession.setActionHandler("previoustrack", null);
+    };
+  }, [
+    browserMediaControlsBehavior.mode,
+    getCurrentFrame,
+    pause,
+    play,
+    seek,
+    videoConfig
+  ]);
+};
+
+// src/calculate-next-frame.ts
+var calculateNextFrame = ({
+  time,
+  currentFrame: startFrame,
+  playbackSpeed,
+  fps,
+  actualLastFrame,
+  actualFirstFrame,
+  framesAdvanced,
+  shouldLoop
+}) => {
+  const op = playbackSpeed < 0 ? Math.ceil : Math.floor;
+  const framesToAdvance = op(time * playbackSpeed / (1000 / fps)) - framesAdvanced;
+  const nextFrame = framesToAdvance + startFrame;
+  const isCurrentFrameOutside = startFrame > actualLastFrame || startFrame < actualFirstFrame;
+  const isNextFrameOutside = nextFrame > actualLastFrame || nextFrame < actualFirstFrame;
+  const hasEnded = !shouldLoop && isNextFrameOutside && !isCurrentFrameOutside;
+  if (playbackSpeed > 0) {
+    if (isNextFrameOutside) {
+      return {
+        nextFrame: actualFirstFrame,
+        framesToAdvance,
+        hasEnded
+      };
+    }
+    return { nextFrame, framesToAdvance, hasEnded };
+  }
+  if (isNextFrameOutside) {
+    return { nextFrame: actualLastFrame, framesToAdvance, hasEnded };
+  }
+  return { nextFrame, framesToAdvance, hasEnded };
+};
+
+// src/is-backgrounded.ts
+import { useEffect as useEffect5, useRef as useRef2 } from "react";
+var getIsBackgrounded = () => {
+  if (typeof document === "undefined") {
+    return false;
+  }
+  return document.visibilityState === "hidden";
+};
+var useIsBackgrounded = () => {
+  const isBackgrounded = useRef2(getIsBackgrounded());
+  useEffect5(() => {
+    const onVisibilityChange = () => {
+      isBackgrounded.current = getIsBackgrounded();
+    };
+    document.addEventListener("visibilitychange", onVisibilityChange);
+    return () => {
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+    };
+  }, []);
+  return isBackgrounded;
+};
+
 // src/use-playback.ts
 var usePlayback = ({
   loop,
@@ -733,7 +842,8 @@ var usePlayback = ({
   moveToBeginningWhenEnded,
   inFrame,
   outFrame,
-  frameRef
+  frameRef,
+  browserMediaControlsBehavior
 }) => {
   const config = Internals5.useUnsafeVideoConfig();
   const frame = Internals5.Timeline.useTimelinePosition();
@@ -746,7 +856,12 @@ var usePlayback = ({
   if (!context) {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
   }
-  useEffect5(() => {
+  useBrowserMediaSession({
+    browserMediaControlsBehavior,
+    playbackRate,
+    videoConfig: config
+  });
+  useEffect6(() => {
     const onBufferClear = context.listenForBuffering(() => {
       buffering.current = performance.now();
     });
@@ -758,7 +873,7 @@ var usePlayback = ({
       onResumeClear.remove();
     };
   }, [context]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!config) {
       return;
     }
@@ -862,7 +977,7 @@ var usePlayback = ({
     buffering,
     context
   ]);
-  useEffect5(() => {
+  useEffect6(() => {
     const interval = setInterval(() => {
       if (lastTimeUpdateEvent.current === frameRef.current) {
         return;
@@ -872,13 +987,13 @@ var usePlayback = ({
     }, 250);
     return () => clearInterval(interval);
   }, [emitter, frameRef]);
-  useEffect5(() => {
+  useEffect6(() => {
     emitter.dispatchFrameUpdate({ frame });
   }, [emitter, frame]);
 };
 
 // src/utils/use-element-size.ts
-import { useCallback as useCallback2, useEffect as useEffect6, useMemo as useMemo2, useState as useState4 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect7, useMemo as useMemo2, useState as useState4 } from "react";
 var elementSizeHooks = [];
 var updateAllElementsSizes = () => {
   for (const listener of elementSizeHooks) {
@@ -957,7 +1072,7 @@ var useElementSize = (ref, options) => {
       };
     });
   }, [ref]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!observer) {
       return;
     }
@@ -971,7 +1086,7 @@ var useElementSize = (ref, options) => {
       }
     };
   }, [observer, ref, updateSize]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!options.triggerOnWindowResize) {
       return;
     }
@@ -980,7 +1095,7 @@ var useElementSize = (ref, options) => {
       window.removeEventListener("resize", updateSize);
     };
   }, [options.triggerOnWindowResize, updateSize]);
-  useEffect6(() => {
+  useEffect7(() => {
     elementSizeHooks.push(updateSize);
     return () => {
       elementSizeHooks = elementSizeHooks.filter((e) => e !== updateSize);
@@ -997,7 +1112,7 @@ var useElementSize = (ref, options) => {
 // src/Player.tsx
 import {
   forwardRef as forwardRef2,
-  useEffect as useEffect12,
+  useEffect as useEffect13,
   useImperativeHandle as useImperativeHandle2,
   useLayoutEffect,
   useMemo as useMemo13,
@@ -1012,7 +1127,7 @@ import React8, {
   forwardRef,
   useCallback as useCallback10,
   useContext as useContext6,
-  useEffect as useEffect11,
+  useEffect as useEffect12,
   useImperativeHandle,
   useMemo as useMemo11,
   useRef as useRef9,
@@ -1021,7 +1136,7 @@ import React8, {
 import { Internals as Internals10 } from "remotion";
 
 // src/PlayerControls.tsx
-import { useCallback as useCallback7, useEffect as useEffect10, useMemo as useMemo8, useRef as useRef7, useState as useState10 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect11, useMemo as useMemo8, useRef as useRef7, useState as useState10 } from "react";
 import { Internals as Internals9 } from "remotion";
 
 // src/DefaultPlayPauseButton.tsx
@@ -1246,18 +1361,18 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
 import {
   useCallback as useCallback5,
   useContext as useContext5,
-  useEffect as useEffect8,
+  useEffect as useEffect9,
   useMemo as useMemo5,
   useState as useState8
 } from "react";
 import { Internals as Internals7 } from "remotion";
 
 // src/utils/use-component-visible.ts
-import { useEffect as useEffect7, useRef as useRef5, useState as useState7 } from "react";
+import { useEffect as useEffect8, useRef as useRef5, useState as useState7 } from "react";
 function useComponentVisible(initialIsVisible) {
   const [isComponentVisible, setIsComponentVisible] = useState7(initialIsVisible);
   const ref = useRef5(null);
-  useEffect7(() => {
+  useEffect8(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target)) {
         setIsComponentVisible(false);
@@ -1340,7 +1455,7 @@ var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }
 var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
   const { setPlaybackRate, playbackRate } = useContext5(Internals7.Timeline.TimelineContext);
   const [keyboardSelectedRate, setKeyboardSelectedRate] = useState8(playbackRate);
-  useEffect8(() => {
+  useEffect9(() => {
     const listener = (e) => {
       e.preventDefault();
       if (e.key === "ArrowUp") {
@@ -1472,7 +1587,7 @@ var PlaybackrateControl = ({ playbackRates, canvasSize }) => {
 };
 
 // src/PlayerSeekBar.tsx
-import { useCallback as useCallback6, useEffect as useEffect9, useMemo as useMemo6, useRef as useRef6, useState as useState9 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect10, useMemo as useMemo6, useRef as useRef6, useState as useState9 } from "react";
 import { Internals as Internals8, interpolate } from "remotion";
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var getFrameFromX = (clientX, durationInFrames, width) => {
@@ -1561,7 +1676,7 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
     }
     onSeekEnd();
   }, [dragging, onSeekEnd, pause, play]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!dragging.dragging) {
       return;
     }
@@ -1806,17 +1921,17 @@ var Controls = ({
       opacity: Number(shouldShow)
     };
   }, [hovered, shouldShowInitially, player.playing, alwaysShowControls]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (playButtonRef.current && spaceKeyToPlayOrPause) {
       playButtonRef.current.focus({
         preventScroll: true
       });
     }
   }, [player.playing, spaceKeyToPlayOrPause]);
-  useEffect10(() => {
+  useEffect11(() => {
     setSupportsFullscreen((typeof document !== "undefined" && (document.fullscreenEnabled || document.webkitFullscreenEnabled)) ?? false);
   }, []);
-  useEffect10(() => {
+  useEffect11(() => {
     if (shouldShowInitially === false) {
       return;
     }
@@ -2136,7 +2251,8 @@ var PlayerUI = ({
   posterFillMode,
   bufferStateDelayInMilliseconds,
   hideControlsWhenPointerDoesntMove,
-  overflowVisible
+  overflowVisible,
+  browserMediaControlsBehavior
 }, ref) => {
   const config = Internals10.useUnsafeVideoConfig();
   const video = Internals10.useVideo();
@@ -2162,15 +2278,16 @@ var PlayerUI = ({
     moveToBeginningWhenEnded,
     inFrame,
     outFrame,
-    frameRef: player.remotionInternal_currentFrameRef
+    frameRef: player.remotionInternal_currentFrameRef,
+    browserMediaControlsBehavior
   });
-  useEffect11(() => {
+  useEffect12(() => {
     if (hasPausedToResume && !player.playing) {
       setHasPausedToResume(false);
       player.play();
     }
   }, [hasPausedToResume, player]);
-  useEffect11(() => {
+  useEffect12(() => {
     const { current } = container;
     if (!current) {
       return;
@@ -2216,7 +2333,7 @@ var PlayerUI = ({
       document.exitFullscreen();
     }
   }, []);
-  useEffect11(() => {
+  useEffect12(() => {
     const { current } = container;
     if (!current) {
       return;
@@ -2254,7 +2371,7 @@ var PlayerUI = ({
   }, [canvasSize, config]);
   const scale = layout?.scale ?? 1;
   const initialScaleIgnored = useRef9(false);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!initialScaleIgnored.current) {
       initialScaleIgnored.current = true;
       return;
@@ -2263,17 +2380,17 @@ var PlayerUI = ({
   }, [player.emitter, scale]);
   const { setMediaVolume, setMediaMuted } = useContext6(Internals10.SetMediaVolumeContext);
   const { mediaMuted, mediaVolume } = useContext6(Internals10.MediaVolumeContext);
-  useEffect11(() => {
+  useEffect12(() => {
     player.emitter.dispatchVolumeChange(mediaVolume);
   }, [player.emitter, mediaVolume]);
   const isMuted = mediaMuted || mediaVolume === 0;
-  useEffect11(() => {
+  useEffect12(() => {
     player.emitter.dispatchMuteChange({
       isMuted
     });
   }, [player.emitter, isMuted]);
   const [showBufferIndicator, setShowBufferState] = useState11(false);
-  useEffect11(() => {
+  useEffect12(() => {
     let timeout = null;
     let stopped = false;
     const onBuffer = () => {
@@ -2444,7 +2561,7 @@ var PlayerUI = ({
     }
   }, [exitFullscreen, isFullscreen, requestFullscreen]);
   const { handlePointerDown, handleDoubleClick } = useClickPreventionOnDoubleClick(onSingleClick, onDoubleClick, doubleClickToFullscreen && allowFullscreen && supportsFullScreen);
-  useEffect11(() => {
+  useEffect12(() => {
     if (shouldAutoplay) {
       player.play();
       setShouldAutoPlay(false);
@@ -2854,6 +2971,7 @@ var PlayerFn = ({
   hideControlsWhenPointerDoesntMove = true,
   overflowVisible = false,
   renderMuteButton,
+  browserMediaControlsBehavior: passedBrowserMediaControlsBehavior,
   ...componentProps
 }, ref) => {
   if (typeof window !== "undefined") {
@@ -2929,7 +3047,7 @@ var PlayerFn = ({
     throw new TypeError(`'numberOfSharedAudioTags' must be an integer but got '${numberOfSharedAudioTags}' instead`);
   }
   validatePlaybackRate(currentPlaybackRate);
-  useEffect12(() => {
+  useEffect13(() => {
     setCurrentPlaybackRate(playbackRate);
   }, [playbackRate]);
   useImperativeHandle2(ref, () => rootRef.current, []);
@@ -2958,6 +3076,11 @@ var PlayerFn = ({
     }, []);
   }
   const actualInputProps = useMemo13(() => inputProps ?? {}, [inputProps]);
+  const browserMediaControlsBehavior = useMemo13(() => {
+    return passedBrowserMediaControlsBehavior ?? {
+      mode: "prevent-media-session"
+    };
+  }, [passedBrowserMediaControlsBehavior]);
   return /* @__PURE__ */ jsx13(Internals12.IsPlayerContextProvider, {
     children: /* @__PURE__ */ jsx13(SharedPlayerContexts, {
       timelineContext: timelineContextValue,
@@ -3006,7 +3129,8 @@ var PlayerFn = ({
             showPlaybackRateControl,
             bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds ?? 300,
             hideControlsWhenPointerDoesntMove,
-            overflowVisible
+            overflowVisible,
+            browserMediaControlsBehavior
           })
         })
       })

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/player"
   },
   "name": "@remotion/player",
-  "version": "4.0.220",
+  "version": "4.0.222",
   "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.220"
+    "remotion": "4.0.222"
   },
   "peerDependencies": {
     "react": ">=16.8.0",