@remotion/player - npm Package Compare versions

Comparing version 4.0.220 to 4.0.221

dist/cjs/index.d.ts

@@ -35,3 +35,3 @@ import './_check-rsc.js';
     };
-    usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, frameRef, }: {
+    usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, frameRef, browserMediaControlsBehavior, }: {
         loop: boolean;
@@ -43,2 +43,3 @@ playbackRate: number;
         frameRef: React.MutableRefObject<number>;
+        browserMediaControlsBehavior: import("./browser-mediasession.js").BrowserMediaControlsBehavior;
     }) => void;
@@ -45,0 +46,0 @@ useElementSize: (ref: React.RefObject<HTMLElement>, options: {

dist/cjs/Player.d.ts

@@ -8,2 +8,3 @@ import type { ComponentType } from 'react';
 import type { PosterFillMode, RenderLoading, RenderPoster } from './PlayerUI.js';
+import type { BrowserMediaControlsBehavior } from './browser-mediasession.js';
 import type { PlayerRef } from './player-methods.js';
@@ -56,2 +57,3 @@ import type { RenderVolumeSlider } from './render-volume-slider.js';
     readonly overflowVisible?: boolean;
+    readonly browserMediaControlsBehavior?: BrowserMediaControlsBehavior;
 } & CompProps<Props> & PropsIfHasProps<Schema, Props>;
@@ -58,0 +60,0 @@ export type PlayerPropsWithoutZod<Props extends Record<string, unknown>> = PlayerProps<AnyZodObject, Props>;

dist/cjs/Player.js

@@ -25,3 +25,3 @@ "use strict";
 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') {
@@ -142,5 +142,10 @@ // eslint-disable-next-line react-hooks/rules-of-hooks
     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 }) }) }) }) }));
 };
@@ -147,0 +152,0 @@ const forward = react_1.forwardRef;

dist/cjs/PlayerUI.d.ts

 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';
@@ -50,3 +51,4 @@ import type { RenderVolumeSlider } from './render-volume-slider.js';
     readonly overflowVisible: boolean;
+    readonly browserMediaControlsBehavior: BrowserMediaControlsBehavior;
 } & React.RefAttributes<PlayerRef>>;
 export default _default;

dist/cjs/PlayerUI.js

@@ -43,3 +43,3 @@ "use strict";
 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;
@@ -73,2 +73,3 @@ const config = remotion_1.Internals.useUnsafeVideoConfig();
         frameRef: player.remotionInternal_currentFrameRef,
+        browserMediaControlsBehavior,
     });
@@ -75,0 +76,0 @@ (0, react_1.useEffect)(() => {

dist/cjs/use-playback.d.ts

@@ -1,2 +0,3 @@
-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;
@@ -8,2 +9,3 @@ playbackRate: number;
     frameRef: React.MutableRefObject<number>;
+    browserMediaControlsBehavior: BrowserMediaControlsBehavior;
 }) => void;

dist/cjs/use-playback.js

@@ -7,6 +7,7 @@ "use strict";
 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();
@@ -26,2 +27,8 @@ const frame = remotion_1.Internals.Timeline.useTimelinePosition();
     }
+    (0, browser_mediasession_js_1.useBrowserMediaSession)({
+        browserMediaControlsBehavior,
+        playbackRate,
+        videoConfig: config,
+    });
+    //	complete code for media session API
     (0, react_1.useEffect)(() => {
@@ -28,0 +35,0 @@ const onBufferClear = context.listenForBuffering(() => {

package.json

@@ -6,3 +6,3 @@ {
   "name": "@remotion/player",
-  "version": "4.0.220",
+  "version": "4.0.221",
   "description": "React component for embedding a Remotion preview into your app",
@@ -32,3 +32,3 @@ "main": "dist/cjs/index.js",
   "dependencies": {
-    "remotion": "4.0.220"
+    "remotion": "4.0.221"
   },
@@ -35,0 +35,0 @@ "peerDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

290177

decreased by-40.07%

Number of package files

106

decreased by-46.73%

Lines of code

7349

decreased by-29.96%

Dependency changes

• + Addedremotion@4.0.221(transitive)

• - Removedremotion@4.0.220(transitive)

• Updatedremotion@4.0.221