@remotion/player 3.3.53 → 3.3.55

package/dist/cjs/Player.d.ts

@@ -38,6 +38,11 @@ export declare type PlayerProps<T> = {
     initiallyShowControls?: number | boolean;
     renderPlayPauseButton?: RenderPlayPauseButton;
     renderFullscreenButton?: RenderFullscreenButton;
+    alwaysShowControls?: boolean;
 } & PropsIfHasProps<T> & CompProps<T>;
 export declare const componentOrNullIfLazy: <T>(props: CompProps<T>) => ComponentType<T> | null;
+/**
+ * @description A component which can be rendered in a regular React App (for example: Create React App, Next.js) to display a Remotion video.
+ * @see [Documentation](https://www.remotion.dev/docs/player/player)
+ */
 export declare const Player: <T>(props: PlayerProps<T> & React.RefAttributes<PlayerRef>) => React.ReactElement | 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, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, renderFullscreenButton, renderPlayPauseButton, ...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, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, renderFullscreenButton, renderPlayPauseButton, alwaysShowControls = false, ...componentProps }, ref) => {
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
@@ -137,7 +137,11 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
     }
     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, inputProps: inputProps, numberOfSharedAudioTags: numberOfSharedAudioTags, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(emitter_context_js_1.PlayerEventEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(PlayerUI_js_1.default, { ref: rootRef, renderLoading: renderLoading, autoPlay: Boolean(autoPlay), loop: Boolean(loop), controls: Boolean(controls), errorFallback: errorFallback, style: style, inputProps: passedInputProps, allowFullscreen: Boolean(allowFullscreen), moveToBeginningWhenEnded: Boolean(moveToBeginningWhenEnded), clickToPlay: typeof clickToPlay === 'boolean'
                             ? clickToPlay
-                            : Boolean(controls), showVolumeControls: Boolean(showVolumeControls), doubleClickToFullscreen: Boolean(doubleClickToFullscreen), spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause), playbackRate: playbackRate, className: className !== null && className !== void 0 ? className : undefined, showPosterWhenUnplayed: Boolean(showPosterWhenUnplayed), showPosterWhenEnded: Boolean(showPosterWhenEnded), showPosterWhenPaused: Boolean(showPosterWhenPaused), 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 }) }) }) }) }));
+                            : Boolean(controls), showVolumeControls: Boolean(showVolumeControls), doubleClickToFullscreen: Boolean(doubleClickToFullscreen), spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause), playbackRate: playbackRate, className: className !== null && className !== void 0 ? className : undefined, showPosterWhenUnplayed: Boolean(showPosterWhenUnplayed), showPosterWhenEnded: Boolean(showPosterWhenEnded), showPosterWhenPaused: Boolean(showPosterWhenPaused), 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, alwaysShowControls: alwaysShowControls }) }) }) }) }));
 };
 const forward = react_1.forwardRef;
+/**
+ * @description A component which can be rendered in a regular React App (for example: Create React App, Next.js) to display a Remotion video.
+ * @see [Documentation](https://www.remotion.dev/docs/player/player)
+ */
 exports.Player = forward(PlayerFn);

package/dist/cjs/PlayerControls.d.ts

@@ -7,8 +7,6 @@ export declare type RenderPlayPauseButton = (props: {
 export declare type RenderFullscreenButton = (props: {
     isFullscreen: boolean;
 }) => ReactNode;
-export declare const X_SPACER = 10;
-export declare const X_PADDING = 12;
 declare global {
     interface Document {
         webkitFullscreenEnabled?: boolean;
@@ -38,4 +36,5 @@ export declare const Controls: React.FC<{
     playerWidth: number;
     renderPlayPauseButton: RenderPlayPauseButton | null;
     renderFullscreenButton: RenderFullscreenButton | null;
+    alwaysShowControls: boolean;
 }>;

package/dist/cjs/PlayerControls.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Controls = exports.X_PADDING = exports.X_SPACER = void 0;
+exports.Controls = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
@@ -9,8 +9,6 @@ const icons_js_1 = require("./icons.js");
 const MediaVolumeSlider_js_1 = require("./MediaVolumeSlider.js");
 const PlayerSeekBar_js_1 = require("./PlayerSeekBar.js");
 const use_video_controls_resize_js_1 = require("./use-video-controls-resize.js");
-exports.X_SPACER = 10;
-exports.X_PADDING = 12;
 const gradientSteps = [
     0, 0.013, 0.049, 0.104, 0.175, 0.259, 0.352, 0.45, 0.55, 0.648, 0.741, 0.825,
     0.896, 0.951, 0.987,
@@ -34,8 +32,8 @@ const containerStyle = {
         .join(', ')}, hsl(0, 0%, 0%) 100%)`,
     backgroundSize: 'auto 145px',
     display: 'flex',
-    paddingRight: exports.X_PADDING,
-    paddingLeft: exports.X_PADDING,
+    paddingRight: use_video_controls_resize_js_1.X_PADDING,
+    paddingLeft: use_video_controls_resize_js_1.X_PADDING,
     flexDirection: 'column',
     transition: 'opacity 0.3s',
 };
@@ -75,7 +73,7 @@ const flex1 = {
 };
 const fullscreen = {};
 const PlayPauseButton = ({ playing }) => playing ? (0, jsx_runtime_1.jsx)(icons_js_1.PauseIcon, {}) : (0, jsx_runtime_1.jsx)(icons_js_1.PlayIcon, {});
-const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, initiallyShowControls, playerWidth, renderPlayPauseButton, renderFullscreenButton, }) => {
+const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, initiallyShowControls, playerWidth, renderPlayPauseButton, renderFullscreenButton, alwaysShowControls, }) => {
     const playButtonRef = (0, react_1.useRef)(null);
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
     const [supportsFullscreen, setSupportsFullscreen] = (0, react_1.useState)(false);
@@ -103,12 +101,12 @@ const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVo
     });
     const containerCss = (0, react_1.useMemo)(() => {
         // Hide if playing and mouse outside
-        const shouldShow = hovered || !player.playing || shouldShowInitially;
+        const shouldShow = hovered || !player.playing || shouldShowInitially || alwaysShowControls;
         return {
             ...containerStyle,
             opacity: Number(shouldShow),
         };
-    }, [hovered, shouldShowInitially, player.playing]);
+    }, [hovered, shouldShowInitially, player.playing, alwaysShowControls]);
     (0, react_1.useEffect)(() => {
         if (playButtonRef.current && spaceKeyToPlayOrPause) {
             // This switches focus to play button when player.playing flag changes

package/dist/cjs/PlayerUI.d.ts

@@ -34,5 +34,6 @@ declare const _default: React.ForwardRefExoticComponent<{
     initiallyShowControls: number | boolean;
     renderPlayPauseButton: RenderPlayPauseButton | null;
     renderFullscreen: RenderFullscreenButton | null;
+    alwaysShowControls: boolean;
 } & React.RefAttributes<PlayerRef>>;
 export default _default;

package/dist/cjs/PlayerUI.js

@@ -41,7 +41,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, inFrame, outFrame, initiallyShowControls, renderFullscreen: renderFullscreenButton, renderPlayPauseButton, }, ref) => {
+const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay, showVolumeControls, doubleClickToFullscreen, spaceKeyToPlayOrPause, errorFallback, playbackRate, renderLoading, renderPoster, className, moveToBeginningWhenEnded, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, inFrame, outFrame, initiallyShowControls, renderFullscreen: renderFullscreenButton, renderPlayPauseButton, alwaysShowControls, }, ref) => {
     var _a, _b, _c, _d, _e;
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const video = remotion_1.Internals.useVideo();
@@ -299,7 +299,7 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
             showPosterWhenEnded && player.isLastFrame && !player.isPlaying(),
             showPosterWhenUnplayed && !player.hasPlayed && !player.isPlaying(),
         ].some(Boolean);
-    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: (0, jsx_runtime_1.jsx)("div", { style: containerStyle, className: player_css_classname_js_1.PLAYER_CSS_CLASSNAME, children: VideoComponent ? ((0, jsx_runtime_1.jsx)(error_boundary_js_1.ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: (0, jsx_runtime_1.jsx)(VideoComponent, { ...((_c = video === null || video === void 0 ? void 0 : video.defaultProps) !== null && _c !== void 0 ? _c : {}), ...((_d = inputProps) !== null && _d !== void 0 ? _d : {}) }) })) : null }) }), shouldShowPoster ? ((0, jsx_runtime_1.jsx)("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null, controls ? ((0, jsx_runtime_1.jsx)(PlayerControls_js_1.Controls, { fps: config.fps, durationInFrames: config.durationInFrames, hovered: hovered, player: player, onFullscreenButtonClick: onFullscreenButtonClick, isFullscreen: isFullscreen, allowFullscreen: allowFullscreen, showVolumeControls: showVolumeControls, onExitFullscreenButtonClick: onExitFullscreenButtonClick, spaceKeyToPlayOrPause: spaceKeyToPlayOrPause, onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, inFrame: inFrame, outFrame: outFrame, initiallyShowControls: initiallyShowControls, playerWidth: (_e = canvasSize === null || canvasSize === void 0 ? void 0 : canvasSize.width) !== null && _e !== void 0 ? _e : 0, renderFullscreenButton: renderFullscreenButton, renderPlayPauseButton: renderPlayPauseButton })) : null] }));
+    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: (0, jsx_runtime_1.jsx)("div", { style: containerStyle, className: player_css_classname_js_1.PLAYER_CSS_CLASSNAME, children: VideoComponent ? ((0, jsx_runtime_1.jsx)(error_boundary_js_1.ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: (0, jsx_runtime_1.jsx)(VideoComponent, { ...((_c = video === null || video === void 0 ? void 0 : video.defaultProps) !== null && _c !== void 0 ? _c : {}), ...((_d = inputProps) !== null && _d !== void 0 ? _d : {}) }) })) : null }) }), shouldShowPoster ? ((0, jsx_runtime_1.jsx)("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null, controls ? ((0, jsx_runtime_1.jsx)(PlayerControls_js_1.Controls, { fps: config.fps, durationInFrames: config.durationInFrames, hovered: hovered, player: player, onFullscreenButtonClick: onFullscreenButtonClick, isFullscreen: isFullscreen, allowFullscreen: allowFullscreen, showVolumeControls: showVolumeControls, onExitFullscreenButtonClick: onExitFullscreenButtonClick, spaceKeyToPlayOrPause: spaceKeyToPlayOrPause, onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, inFrame: inFrame, outFrame: outFrame, initiallyShowControls: initiallyShowControls, playerWidth: (_e = canvasSize === null || canvasSize === void 0 ? void 0 : canvasSize.width) !== null && _e !== void 0 ? _e : 0, renderFullscreenButton: renderFullscreenButton, renderPlayPauseButton: renderPlayPauseButton, alwaysShowControls: alwaysShowControls })) : null] }));
     if (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/Thumbnail.d.ts

@@ -16,5 +16,9 @@ declare type ThumbnailProps<T> = PropsIfHasProps<T> & CompProps<T> & {
     className?: string;
 };
 export declare const ThumbnailFn: <T>({ frameToDisplay, style, inputProps, compositionHeight, compositionWidth, durationInFrames, fps, className, errorFallback, renderLoading, ...componentProps }: ThumbnailProps<T>, ref: MutableRefObject<ThumbnailMethods>) => JSX.Element;
+/**
+ * @description A component which can be rendered in a regular React App (for example: Create React App, Next.js) to display a single frame of a video.
+ * @see [Documentation](https://www.remotion.dev/docs/player/thumbnail)
+ */
 export declare const Thumbnail: <T>(props: ThumbnailProps<T> & import("react").RefAttributes<ThumbnailMethods>) => React.ReactElement | null;
 export {};

package/dist/cjs/Thumbnail.js

@@ -39,4 +39,8 @@ const ThumbnailFn = ({ frameToDisplay, style, inputProps, compositionHeight, com
 };
 exports.ThumbnailFn = ThumbnailFn;
 const forward = react_1.forwardRef;
+/**
+ * @description A component which can be rendered in a regular React App (for example: Create React App, Next.js) to display a single frame of a video.
+ * @see [Documentation](https://www.remotion.dev/docs/player/thumbnail)
+ */
 exports.Thumbnail = forward(exports.ThumbnailFn);

package/dist/cjs/use-video-controls-resize.d.ts

@@ -2,6 +2,8 @@ declare type Info = {
     maxTimeLabelWidth: number | null;
     displayVerticalVolumeSlider: boolean;
 };
+export declare const X_SPACER = 10;
+export declare const X_PADDING = 12;
 export declare const useVideoControlsResize: ({ allowFullscreen: allowFullScreen, playerWidth, }: {
     allowFullscreen: boolean;
     playerWidth: number;

package/dist/cjs/use-video-controls-resize.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useVideoControlsResize = void 0;
+exports.useVideoControlsResize = exports.X_PADDING = exports.X_SPACER = void 0;
 const react_1 = require("react");
 const icons_js_1 = require("./icons.js");
 const MediaVolumeSlider_js_1 = require("./MediaVolumeSlider.js");
-const PlayerControls_js_1 = require("./PlayerControls.js");
+exports.X_SPACER = 10;
+exports.X_PADDING = 12;
 const useVideoControlsResize = ({ allowFullscreen: allowFullScreen, playerWidth, }) => {
     const resizeInfo = (0, react_1.useMemo)(() => {
         const playPauseIconSize = icons_js_1.ICON_SIZE;
@@ -13,8 +14,8 @@ const useVideoControlsResize = ({ allowFullscreen: allowFullScreen, playerWidth,
         const elementsSize = volumeIconSize +
             playPauseIconSize +
             _fullscreenIconSize +
-            PlayerControls_js_1.X_PADDING * 2 +
-            PlayerControls_js_1.X_SPACER * 2;
+            exports.X_PADDING * 2 +
+            exports.X_SPACER * 2;
         const maxTimeLabelWidth = playerWidth - elementsSize;
         const maxTimeLabelWidthWithoutNegativeValue = Math.max(maxTimeLabelWidth, 0);
         const availableTimeLabelWidthIfVolumeOpen = maxTimeLabelWidthWithoutNegativeValue - MediaVolumeSlider_js_1.VOLUME_SLIDER_WIDTH;

package/dist/esm/Player.d.ts

@@ -38,6 +38,11 @@ export declare type PlayerProps<T> = {
     initiallyShowControls?: number | boolean;
     renderPlayPauseButton?: RenderPlayPauseButton;
     renderFullscreenButton?: RenderFullscreenButton;
+    alwaysShowControls?: boolean;
 } & PropsIfHasProps<T> & CompProps<T>;
 export declare const componentOrNullIfLazy: <T>(props: CompProps<T>) => ComponentType<T> | null;
+/**
+ * @description A component which can be rendered in a regular React App (for example: Create React App, Next.js) to display a Remotion video.
+ * @see [Documentation](https://www.remotion.dev/docs/player/player)
+ */
 export declare const Player: <T>(props: PlayerProps<T> & React.RefAttributes<PlayerRef>) => React.ReactElement | null;

package/dist/esm/Player.js

@@ -15,7 +15,7 @@ export const componentOrNullIfLazy = (props) => {
     }
     return null;
 };
-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, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, renderFullscreenButton, renderPlayPauseButton, ...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, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, renderFullscreenButton, renderPlayPauseButton, alwaysShowControls = false, ...componentProps }, ref) => {
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         useLayoutEffect(() => {
@@ -130,7 +130,11 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
     }
     return (_jsx(Internals.IsPlayerContextProvider, { children: _jsx(SharedPlayerContexts, { timelineContext: timelineContextValue, component: component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, inputProps: inputProps, numberOfSharedAudioTags: numberOfSharedAudioTags, children: _jsx(Internals.Timeline.SetTimelineContext.Provider, { value: setTimelineContextValue, children: _jsx(PlayerEventEmitterContext.Provider, { value: emitter, children: _jsx(PlayerUI, { ref: rootRef, renderLoading: renderLoading, autoPlay: Boolean(autoPlay), loop: Boolean(loop), controls: Boolean(controls), errorFallback: errorFallback, style: style, inputProps: passedInputProps, allowFullscreen: Boolean(allowFullscreen), moveToBeginningWhenEnded: Boolean(moveToBeginningWhenEnded), clickToPlay: typeof clickToPlay === 'boolean'
                             ? clickToPlay
-                            : Boolean(controls), showVolumeControls: Boolean(showVolumeControls), doubleClickToFullscreen: Boolean(doubleClickToFullscreen), spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause), playbackRate: playbackRate, className: className !== null && className !== void 0 ? className : undefined, showPosterWhenUnplayed: Boolean(showPosterWhenUnplayed), showPosterWhenEnded: Boolean(showPosterWhenEnded), showPosterWhenPaused: Boolean(showPosterWhenPaused), 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 }) }) }) }) }));
+                            : Boolean(controls), showVolumeControls: Boolean(showVolumeControls), doubleClickToFullscreen: Boolean(doubleClickToFullscreen), spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause), playbackRate: playbackRate, className: className !== null && className !== void 0 ? className : undefined, showPosterWhenUnplayed: Boolean(showPosterWhenUnplayed), showPosterWhenEnded: Boolean(showPosterWhenEnded), showPosterWhenPaused: Boolean(showPosterWhenPaused), 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, alwaysShowControls: alwaysShowControls }) }) }) }) }));
 };
 const forward = forwardRef;
+/**
+ * @description A component which can be rendered in a regular React App (for example: Create React App, Next.js) to display a Remotion video.
+ * @see [Documentation](https://www.remotion.dev/docs/player/player)
+ */
 export const Player = forward(PlayerFn);

package/dist/esm/PlayerControls.d.ts

@@ -7,8 +7,6 @@ export declare type RenderPlayPauseButton = (props: {
 export declare type RenderFullscreenButton = (props: {
     isFullscreen: boolean;
 }) => ReactNode;
-export declare const X_SPACER = 10;
-export declare const X_PADDING = 12;
 declare global {
     interface Document {
         webkitFullscreenEnabled?: boolean;
@@ -38,4 +36,5 @@ export declare const Controls: React.FC<{
     playerWidth: number;
     renderPlayPauseButton: RenderPlayPauseButton | null;
     renderFullscreenButton: RenderFullscreenButton | null;
+    alwaysShowControls: boolean;
 }>;

package/dist/esm/PlayerControls.js

@@ -5,9 +5,7 @@ import { formatTime } from './format-time.js';
 import { FullscreenIcon, PauseIcon, PlayIcon } from './icons.js';
 import { MediaVolumeSlider } from './MediaVolumeSlider.js';
 import { PlayerSeekBar } from './PlayerSeekBar.js';
-import { useVideoControlsResize } from './use-video-controls-resize.js';
-export const X_SPACER = 10;
-export const X_PADDING = 12;
+import { useVideoControlsResize, X_PADDING } from './use-video-controls-resize.js';
 const gradientSteps = [
     0, 0.013, 0.049, 0.104, 0.175, 0.259, 0.352, 0.45, 0.55, 0.648, 0.741, 0.825,
     0.896, 0.951, 0.987,
@@ -72,7 +70,7 @@ const flex1 = {
 };
 const fullscreen = {};
 const PlayPauseButton = ({ playing }) => playing ? _jsx(PauseIcon, {}) : _jsx(PlayIcon, {});
-export const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, initiallyShowControls, playerWidth, renderPlayPauseButton, renderFullscreenButton, }) => {
+export const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, initiallyShowControls, playerWidth, renderPlayPauseButton, renderFullscreenButton, alwaysShowControls, }) => {
     const playButtonRef = useRef(null);
     const frame = Internals.Timeline.useTimelinePosition();
     const [supportsFullscreen, setSupportsFullscreen] = useState(false);
@@ -100,12 +98,12 @@ export const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player,
     });
     const containerCss = useMemo(() => {
         // Hide if playing and mouse outside
-        const shouldShow = hovered || !player.playing || shouldShowInitially;
+        const shouldShow = hovered || !player.playing || shouldShowInitially || alwaysShowControls;
         return {
             ...containerStyle,
             opacity: Number(shouldShow),
         };
-    }, [hovered, shouldShowInitially, player.playing]);
+    }, [hovered, shouldShowInitially, player.playing, alwaysShowControls]);
     useEffect(() => {
         if (playButtonRef.current && spaceKeyToPlayOrPause) {
             // This switches focus to play button when player.playing flag changes

package/dist/esm/PlayerUI.d.ts

@@ -34,5 +34,6 @@ declare const _default: React.ForwardRefExoticComponent<{
     initiallyShowControls: number | boolean;
     renderPlayPauseButton: RenderPlayPauseButton | null;
     renderFullscreen: RenderFullscreenButton | null;
+    alwaysShowControls: boolean;
 } & React.RefAttributes<PlayerRef>>;
 export default _default;

package/dist/esm/PlayerUI.js

@@ -16,7 +16,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, inFrame, outFrame, initiallyShowControls, renderFullscreen: renderFullscreenButton, renderPlayPauseButton, }, ref) => {
+const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay, showVolumeControls, doubleClickToFullscreen, spaceKeyToPlayOrPause, errorFallback, playbackRate, renderLoading, renderPoster, className, moveToBeginningWhenEnded, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, inFrame, outFrame, initiallyShowControls, renderFullscreen: renderFullscreenButton, renderPlayPauseButton, alwaysShowControls, }, ref) => {
     var _a, _b, _c, _d, _e;
     const config = Internals.useUnsafeVideoConfig();
     const video = Internals.useVideo();
@@ -274,7 +274,7 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
             showPosterWhenEnded && player.isLastFrame && !player.isPlaying(),
             showPosterWhenUnplayed && !player.hasPlayed && !player.isPlaying(),
         ].some(Boolean);
-    const content = (_jsxs(_Fragment, { children: [_jsx("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: _jsx("div", { style: containerStyle, className: PLAYER_CSS_CLASSNAME, children: VideoComponent ? (_jsx(ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: _jsx(VideoComponent, { ...((_c = video === null || video === void 0 ? void 0 : video.defaultProps) !== null && _c !== void 0 ? _c : {}), ...((_d = inputProps) !== null && _d !== void 0 ? _d : {}) }) })) : null }) }), shouldShowPoster ? (_jsx("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null, controls ? (_jsx(Controls, { fps: config.fps, durationInFrames: config.durationInFrames, hovered: hovered, player: player, onFullscreenButtonClick: onFullscreenButtonClick, isFullscreen: isFullscreen, allowFullscreen: allowFullscreen, showVolumeControls: showVolumeControls, onExitFullscreenButtonClick: onExitFullscreenButtonClick, spaceKeyToPlayOrPause: spaceKeyToPlayOrPause, onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, inFrame: inFrame, outFrame: outFrame, initiallyShowControls: initiallyShowControls, playerWidth: (_e = canvasSize === null || canvasSize === void 0 ? void 0 : canvasSize.width) !== null && _e !== void 0 ? _e : 0, renderFullscreenButton: renderFullscreenButton, renderPlayPauseButton: renderPlayPauseButton })) : null] }));
+    const content = (_jsxs(_Fragment, { children: [_jsx("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: _jsx("div", { style: containerStyle, className: PLAYER_CSS_CLASSNAME, children: VideoComponent ? (_jsx(ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: _jsx(VideoComponent, { ...((_c = video === null || video === void 0 ? void 0 : video.defaultProps) !== null && _c !== void 0 ? _c : {}), ...((_d = inputProps) !== null && _d !== void 0 ? _d : {}) }) })) : null }) }), shouldShowPoster ? (_jsx("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null, controls ? (_jsx(Controls, { fps: config.fps, durationInFrames: config.durationInFrames, hovered: hovered, player: player, onFullscreenButtonClick: onFullscreenButtonClick, isFullscreen: isFullscreen, allowFullscreen: allowFullscreen, showVolumeControls: showVolumeControls, onExitFullscreenButtonClick: onExitFullscreenButtonClick, spaceKeyToPlayOrPause: spaceKeyToPlayOrPause, onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, inFrame: inFrame, outFrame: outFrame, initiallyShowControls: initiallyShowControls, playerWidth: (_e = canvasSize === null || canvasSize === void 0 ? void 0 : canvasSize.width) !== null && _e !== void 0 ? _e : 0, renderFullscreenButton: renderFullscreenButton, renderPlayPauseButton: renderPlayPauseButton, alwaysShowControls: alwaysShowControls })) : null] }));
     if (IS_NODE && !doesReactVersionSupportSuspense) {
         return (_jsx("div", { ref: container, style: outerStyle, className: className, children: content }));
     }

package/dist/esm/Thumbnail.d.ts

@@ -16,5 +16,9 @@ declare type ThumbnailProps<T> = PropsIfHasProps<T> & CompProps<T> & {
     className?: string;
 };
 export declare const ThumbnailFn: <T>({ frameToDisplay, style, inputProps, compositionHeight, compositionWidth, durationInFrames, fps, className, errorFallback, renderLoading, ...componentProps }: ThumbnailProps<T>, ref: MutableRefObject<ThumbnailMethods>) => JSX.Element;
+/**
+ * @description A component which can be rendered in a regular React App (for example: Create React App, Next.js) to display a single frame of a video.
+ * @see [Documentation](https://www.remotion.dev/docs/player/thumbnail)
+ */
 export declare const Thumbnail: <T>(props: ThumbnailProps<T> & import("react").RefAttributes<ThumbnailMethods>) => React.ReactElement | null;
 export {};

package/dist/esm/Thumbnail.js

@@ -32,4 +32,8 @@ export const ThumbnailFn = ({ frameToDisplay, style, inputProps, compositionHeig
     return (_jsx(Internals.IsPlayerContextProvider, { children: _jsx(SharedPlayerContexts, { timelineContext: timelineState, component: Component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, inputProps: inputProps, numberOfSharedAudioTags: 0, children: _jsx(ThumbnailEmitterContext.Provider, { value: emitter, children: _jsx(ThumbnailUI, { className: className, errorFallback: errorFallback, inputProps: passedInputProps, renderLoading: renderLoading, style: style }) }) }) }));
 };
 const forward = forwardRef;
+/**
+ * @description A component which can be rendered in a regular React App (for example: Create React App, Next.js) to display a single frame of a video.
+ * @see [Documentation](https://www.remotion.dev/docs/player/thumbnail)
+ */
 export const Thumbnail = forward(ThumbnailFn);

package/dist/esm/calculate-scale.d.ts

@@ -6,7 +6,7 @@ export declare const calculateScale: ({ canvasSize, compositionHeight, compositi
     compositionWidth: number;
     compositionHeight: number;
     canvasSize: Size;
-}) => number;
+}) => any;
 declare type Layout = {
     centerX: number;
     centerY: number;

package/dist/esm/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { CallbackListener, PlayerEventTypes } from './event-emitter.js';
 import { PlayerEmitter } from './event-emitter.js';
 export { Player, PlayerProps } from './Player.js';
@@ -57,5 +56,5 @@ export declare const PlayerInternals: {
         compositionWidth: number;
         compositionHeight: number;
         canvasSize: import("./utils/use-element-size.js").Size;
-    }) => number;
+    }) => any;
 };