@remotion/player 4.0.417 → 4.0.418

package/dist/cjs/Player.d.ts

@@ -6,7 +6,7 @@ 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 { PlayerRef, RenderCustomControls } from './player-methods.js';
 import type { RenderVolumeSlider } from './render-volume-slider.js';
 import type { PropsIfHasProps } from './utils/props-if-has-props.js';
 export type ErrorFallback = (info: {
@@ -46,6 +46,7 @@ export type PlayerProps<Schema extends AnyZodObject, Props extends Record<string
     readonly renderFullscreenButton?: RenderFullscreenButton;
     readonly renderMuteButton?: RenderMuteButton;
     readonly renderVolumeSlider?: RenderVolumeSlider;
+    readonly renderCustomControls?: RenderCustomControls;
     readonly alwaysShowControls?: boolean;
     readonly schema?: Schema;
     readonly initiallyMuted?: boolean;

package/dist/cjs/Player.js

@@ -23,7 +23,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, showPosterWhenBufferingAndPaused, 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, overrideInternalClassName, logLevel = 'info', noSuspense, acknowledgeRemotionLicense, audioLatencyHint = 'interactive', volumePersistenceKey, ...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, showPosterWhenBufferingAndPaused, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, renderFullscreenButton, renderPlayPauseButton, renderVolumeSlider, renderCustomControls, alwaysShowControls = false, initiallyMuted = false, showPlaybackRateControl = false, posterFillMode = 'player-size', bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove = true, overflowVisible = false, renderMuteButton, browserMediaControlsBehavior: passedBrowserMediaControlsBehavior, overrideInternalClassName, logLevel = 'info', noSuspense, acknowledgeRemotionLicense, audioLatencyHint = 'interactive', volumePersistenceKey, ...componentProps }, ref) => {
     if (typeof window !== 'undefined') {
         window.remotion_isPlayer = true;
     }
@@ -156,7 +156,7 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
     }, [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, logLevel: logLevel, audioLatencyHint: audioLatencyHint, volumePersistenceKey: volumePersistenceKey, inputProps: actualInputProps, audioEnabled: true, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.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), showPosterWhenBufferingAndPaused: Boolean(showPosterWhenBufferingAndPaused), 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, overrideInternalClassName: overrideInternalClassName !== null && overrideInternalClassName !== void 0 ? overrideInternalClassName : undefined, noSuspense: Boolean(noSuspense) }) }) }) }) }));
+                            : 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), showPosterWhenBufferingAndPaused: Boolean(showPosterWhenBufferingAndPaused), 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, renderCustomControls: renderCustomControls !== null && renderCustomControls !== void 0 ? renderCustomControls : null, alwaysShowControls: alwaysShowControls, showPlaybackRateControl: showPlaybackRateControl, bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds !== null && bufferStateDelayInMilliseconds !== void 0 ? bufferStateDelayInMilliseconds : 300, hideControlsWhenPointerDoesntMove: hideControlsWhenPointerDoesntMove, overflowVisible: overflowVisible, browserMediaControlsBehavior: browserMediaControlsBehavior, overrideInternalClassName: overrideInternalClassName !== null && overrideInternalClassName !== void 0 ? overrideInternalClassName : undefined, noSuspense: Boolean(noSuspense) }) }) }) }) }));
 };
 const forward = react_1.forwardRef;
 /*

package/dist/cjs/PlayerControls.d.ts

@@ -1,6 +1,7 @@
 import type { MouseEventHandler, ReactNode, SyntheticEvent } from 'react';
 import React from 'react';
 import type { RenderMuteButton } from './MediaVolumeSlider.js';
+import type { RenderCustomControls } from './player-methods.js';
 import type { RenderVolumeSlider } from './render-volume-slider.js';
 import type { Size } from './utils/use-element-size.js';
 export type RenderPlayPauseButton = (props: {
@@ -38,4 +39,5 @@ export declare const Controls: React.FC<{
     readonly renderVolumeSlider: RenderVolumeSlider | null;
     readonly playing: boolean;
     readonly toggle: (e?: SyntheticEvent | PointerEvent) => void;
+    readonly renderCustomControls: RenderCustomControls | null;
 }>;

package/dist/cjs/PlayerControls.js

@@ -65,7 +65,7 @@ const flex1 = {
     flex: 1,
 };
 const fullscreen = {};
-const Controls = ({ durationInFrames, isFullscreen, fps, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, initiallyShowControls, canvasSize, renderPlayPauseButton, renderFullscreenButton, alwaysShowControls, showPlaybackRateControl, containerRef, buffering, hideControlsWhenPointerDoesntMove, onPointerDown, onDoubleClick, renderMuteButton, renderVolumeSlider, playing, toggle, }) => {
+const Controls = ({ durationInFrames, isFullscreen, fps, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, initiallyShowControls, canvasSize, renderPlayPauseButton, renderFullscreenButton, alwaysShowControls, showPlaybackRateControl, containerRef, buffering, hideControlsWhenPointerDoesntMove, onPointerDown, onDoubleClick, renderMuteButton, renderVolumeSlider, playing, toggle, renderCustomControls, }) => {
     var _a, _b;
     const playButtonRef = (0, react_1.useRef)(null);
     const [supportsFullscreen, setSupportsFullscreen] = (0, react_1.useState)(false);
@@ -148,6 +148,9 @@ const Controls = ({ durationInFrames, isFullscreen, fps, showVolumeControls, onF
         }
         return null;
     }, [showPlaybackRateControl]);
+    const customControlsElement = renderCustomControls
+        ? renderCustomControls()
+        : null;
     const ref = (0, react_1.useRef)(null);
     const flexRef = (0, react_1.useRef)(null);
     const onPointerDownIfContainer = (0, react_1.useCallback)((e) => {
@@ -165,7 +168,7 @@ const Controls = ({ durationInFrames, isFullscreen, fps, showVolumeControls, onF
     return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: containerCss, onPointerDown: onPointerDownIfContainer, onDoubleClick: onDoubleClickIfContainer, children: [(0, jsx_runtime_1.jsxs)("div", { ref: flexRef, style: controlsRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: leftPartStyle, children: [(0, jsx_runtime_1.jsx)("button", { ref: playButtonRef, type: "button", style: PlaybackrateControl_js_1.playerButtonStyle, onClick: toggle, "aria-label": playing ? 'Pause video' : 'Play video', title: playing ? 'Pause video' : 'Play video', children: renderPlayPauseButton === null ? ((0, jsx_runtime_1.jsx)(DefaultPlayPauseButton_js_1.DefaultPlayPauseButton, { buffering: buffering, playing: playing })) : (((_b = renderPlayPauseButton({
                                     playing,
                                     isBuffering: buffering,
-                                })) !== null && _b !== void 0 ? _b : ((0, jsx_runtime_1.jsx)(DefaultPlayPauseButton_js_1.DefaultPlayPauseButton, { buffering: buffering, playing: playing })))) }), showVolumeControls ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: xSpacer }), (0, jsx_runtime_1.jsx)(MediaVolumeSlider_js_1.MediaVolumeSlider, { renderMuteButton: renderMuteButton, renderVolumeSlider: renderVolumeSlider, displayVerticalVolumeSlider: displayVerticalVolumeSlider })] })) : null, (0, jsx_runtime_1.jsx)("div", { style: xSpacer }), (0, jsx_runtime_1.jsx)(PlayerTimeLabel_js_1.PlayerTimeLabel, { durationInFrames: durationInFrames, fps: fps, maxTimeLabelWidth: maxTimeLabelWidth }), (0, jsx_runtime_1.jsx)("div", { style: xSpacer })] }), (0, jsx_runtime_1.jsx)("div", { style: flex1 }), playbackRates && canvasSize && ((0, jsx_runtime_1.jsx)(PlaybackrateControl_js_1.PlaybackrateControl, { canvasSize: canvasSize, playbackRates: playbackRates })), playbackRates && supportsFullscreen && allowFullscreen ? ((0, jsx_runtime_1.jsx)("div", { style: xSpacer })) : null, (0, jsx_runtime_1.jsx)("div", { style: fullscreen, children: supportsFullscreen && allowFullscreen ? ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', title: isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', style: PlaybackrateControl_js_1.playerButtonStyle, onClick: isFullscreen
+                                })) !== null && _b !== void 0 ? _b : ((0, jsx_runtime_1.jsx)(DefaultPlayPauseButton_js_1.DefaultPlayPauseButton, { buffering: buffering, playing: playing })))) }), showVolumeControls ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: xSpacer }), (0, jsx_runtime_1.jsx)(MediaVolumeSlider_js_1.MediaVolumeSlider, { renderMuteButton: renderMuteButton, renderVolumeSlider: renderVolumeSlider, displayVerticalVolumeSlider: displayVerticalVolumeSlider })] })) : null, (0, jsx_runtime_1.jsx)("div", { style: xSpacer }), (0, jsx_runtime_1.jsx)(PlayerTimeLabel_js_1.PlayerTimeLabel, { durationInFrames: durationInFrames, fps: fps, maxTimeLabelWidth: maxTimeLabelWidth }), (0, jsx_runtime_1.jsx)("div", { style: xSpacer })] }), (0, jsx_runtime_1.jsx)("div", { style: flex1 }), customControlsElement, customControlsElement && playbackRates && canvasSize ? ((0, jsx_runtime_1.jsx)("div", { style: xSpacer })) : null, playbackRates && canvasSize && ((0, jsx_runtime_1.jsx)(PlaybackrateControl_js_1.PlaybackrateControl, { canvasSize: canvasSize, playbackRates: playbackRates })), playbackRates && supportsFullscreen && allowFullscreen ? ((0, jsx_runtime_1.jsx)("div", { style: xSpacer })) : null, (0, jsx_runtime_1.jsx)("div", { style: fullscreen, children: supportsFullscreen && allowFullscreen ? ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', title: isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', style: PlaybackrateControl_js_1.playerButtonStyle, onClick: isFullscreen
                                 ? onExitFullscreenButtonClick
                                 : onFullscreenButtonClick, children: renderFullscreenButton === null ? ((0, jsx_runtime_1.jsx)(icons_js_1.FullscreenIcon, { isFullscreen: isFullscreen })) : (renderFullscreenButton({ isFullscreen })) })) : null })] }), (0, jsx_runtime_1.jsx)("div", { style: ySpacer }), (0, jsx_runtime_1.jsx)(PlayerSeekBar_js_1.PlayerSeekBar, { onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, durationInFrames: durationInFrames, inFrame: inFrame, outFrame: outFrame })] }));
 };

package/dist/cjs/PlayerUI.d.ts

@@ -2,7 +2,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 { PlayerRef, RenderCustomControls } from './player-methods.js';
 import type { RenderVolumeSlider } from './render-volume-slider.js';
 export type ErrorFallback = (info: {
     error: Error;
@@ -43,6 +43,7 @@ declare const _default: React.ForwardRefExoticComponent<{
     readonly renderFullscreen: RenderFullscreenButton | null;
     readonly renderMuteButton: RenderMuteButton | null;
     readonly renderVolumeSlider: RenderVolumeSlider | null;
+    readonly renderCustomControls: RenderCustomControls | null;
     readonly alwaysShowControls: boolean;
     readonly showPlaybackRateControl: boolean | number[];
     readonly posterFillMode: PosterFillMode;

package/dist/cjs/PlayerUI.js

@@ -51,7 +51,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, showPosterWhenBufferingAndPaused, inFrame, outFrame, initiallyShowControls, renderFullscreen: renderFullscreenButton, renderPlayPauseButton, renderMuteButton, renderVolumeSlider, alwaysShowControls, showPlaybackRateControl, posterFillMode, bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove, overflowVisible, browserMediaControlsBehavior, overrideInternalClassName, noSuspense, }, ref) => {
+const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay, showVolumeControls, doubleClickToFullscreen, spaceKeyToPlayOrPause, errorFallback, playbackRate, renderLoading, renderPoster, className, moveToBeginningWhenEnded, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, showPosterWhenBuffering, showPosterWhenBufferingAndPaused, inFrame, outFrame, initiallyShowControls, renderFullscreen: renderFullscreenButton, renderPlayPauseButton, renderMuteButton, renderVolumeSlider, renderCustomControls, alwaysShowControls, showPlaybackRateControl, posterFillMode, bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove, overflowVisible, browserMediaControlsBehavior, overrideInternalClassName, noSuspense, }, ref) => {
     var _a, _b, _c;
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const video = remotion_1.Internals.useVideo();
@@ -436,7 +436,7 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
                                     height: config.height,
                                 }, onPointerDown: clickToPlay ? handlePointerDown : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null] }), (0, jsx_runtime_1.jsx)(license_blacklist_js_1.RenderWarningIfBlacklist, {})] }), shouldShowPoster && posterFillMode === 'player-size' ? ((0, jsx_runtime_1.jsx)("div", { style: outer, onPointerDown: clickToPlay ? handlePointerDown : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null, controls ? ((0, jsx_runtime_1.jsx)(PlayerControls_js_1.Controls, { fps: config.fps, playing: player.playing, toggle: player.toggle, durationInFrames: config.durationInFrames, containerRef: container, onFullscreenButtonClick: onFullscreenButtonClick, isFullscreen: isFullscreen, allowFullscreen: allowFullscreen, showVolumeControls: showVolumeControls, onExitFullscreenButtonClick: onExitFullscreenButtonClick, spaceKeyToPlayOrPause: spaceKeyToPlayOrPause, onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, inFrame: inFrame, outFrame: outFrame, initiallyShowControls: initiallyShowControls, canvasSize: canvasSize, renderFullscreenButton: renderFullscreenButton, renderPlayPauseButton: renderPlayPauseButton, alwaysShowControls: alwaysShowControls, showPlaybackRateControl: showPlaybackRateControl, buffering: showBufferIndicator, hideControlsWhenPointerDoesntMove: hideControlsWhenPointerDoesntMove, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, onPointerDown: clickToPlay
                     ? handlePointerDown
-                    : undefined, renderMuteButton: renderMuteButton, renderVolumeSlider: renderVolumeSlider })) : null] }));
+                    : undefined, renderMuteButton: renderMuteButton, renderVolumeSlider: renderVolumeSlider, renderCustomControls: renderCustomControls })) : null] }));
     if (noSuspense || (is_node_js_1.IS_NODE && !doesReactVersionSupportSuspense)) {
         return ((0, jsx_runtime_1.jsx)("div", { ref: container, style: outerStyle, className: className, children: content }));
     }

package/dist/cjs/index.d.ts

@@ -2,7 +2,7 @@ import './_check-rsc.js';
 import type { CallbackListener, PlayerEventTypes } from './event-emitter.js';
 import { PlayerEmitter } from './event-emitter.js';
 export type { RenderMuteButton } from './MediaVolumeSlider.js';
-export type { PlayerMethods, PlayerRef, ThumbnailMethods, ThumbnailRef, } from './player-methods.js';
+export type { PlayerMethods, PlayerRef, RenderCustomControls, ThumbnailMethods, ThumbnailRef, } from './player-methods.js';
 export { Player } from './Player.js';
 export type { PlayerProps, PlayerPropsWithoutZod } from './Player.js';
 export type { RenderFullscreenButton, RenderPlayPauseButton, } from './PlayerControls.js';

package/dist/cjs/player-methods.d.ts

@@ -1,4 +1,4 @@
-import type { SyntheticEvent } from 'react';
+import type { ReactElement, SyntheticEvent } from 'react';
 import type { PlayerEmitter, ThumbnailEmitter } from './event-emitter.js';
 export type ThumbnailMethods = {
     getContainerNode: () => HTMLDivElement | null;
@@ -23,3 +23,4 @@ export type PlayerMethods = ThumbnailMethods & {
 };
 export type ThumbnailRef = ThumbnailEmitter & ThumbnailMethods;
 export type PlayerRef = PlayerEmitter & PlayerMethods;
+export type RenderCustomControls = () => ReactElement | null;

package/dist/esm/index.mjs

@@ -1971,7 +1971,8 @@ var Controls = ({
   renderMuteButton,
   renderVolumeSlider,
   playing,
-  toggle
+  toggle,
+  renderCustomControls
 }) => {
   const playButtonRef = useRef8(null);
   const [supportsFullscreen, setSupportsFullscreen] = useState10(false);
@@ -2047,6 +2048,7 @@ var Controls = ({
     }
     return null;
   }, [showPlaybackRateControl]);
+  const customControlsElement = renderCustomControls ? renderCustomControls() : null;
   const ref = useRef8(null);
   const flexRef = useRef8(null);
   const onPointerDownIfContainer = useCallback8((e) => {
@@ -2118,6 +2120,10 @@ var Controls = ({
           /* @__PURE__ */ jsx9("div", {
             style: flex1
           }),
+          customControlsElement,
+          customControlsElement && playbackRates && canvasSize ? /* @__PURE__ */ jsx9("div", {
+            style: xSpacer
+          }) : null,
           playbackRates && canvasSize && /* @__PURE__ */ jsx9(PlaybackrateControl, {
             canvasSize,
             playbackRates
@@ -2412,6 +2418,7 @@ var PlayerUI = ({
   renderPlayPauseButton,
   renderMuteButton,
   renderVolumeSlider,
+  renderCustomControls,
   alwaysShowControls,
   showPlaybackRateControl,
   posterFillMode,
@@ -2835,7 +2842,8 @@ var PlayerUI = ({
         onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined,
         onPointerDown: clickToPlay ? handlePointerDown : undefined,
         renderMuteButton,
-        renderVolumeSlider
+        renderVolumeSlider,
+        renderCustomControls
       }) : null
     ]
   });
@@ -3168,6 +3176,7 @@ var PlayerFn = ({
   renderFullscreenButton,
   renderPlayPauseButton,
   renderVolumeSlider,
+  renderCustomControls,
   alwaysShowControls = false,
   initiallyMuted = false,
   showPlaybackRateControl = false,
@@ -3353,6 +3362,7 @@ var PlayerFn = ({
             renderPlayPauseButton: renderPlayPauseButton ?? null,
             renderMuteButton: renderMuteButton ?? null,
             renderVolumeSlider: renderVolumeSlider ?? null,
+            renderCustomControls: renderCustomControls ?? null,
             alwaysShowControls,
             showPlaybackRateControl,
             bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds ?? 300,

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/player"
 	},
 	"name": "@remotion/player",
-	"version": "4.0.417",
+	"version": "4.0.418",
 	"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.417"
+		"remotion": "4.0.418"
 	},
 	"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.417",
+		"@remotion/eslint-config-internal": "4.0.418",
 		"eslint": "9.19.0"
 	},
 	"keywords": [