@remotion/player 4.0.219 → 4.0.221

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/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();