@remotion/player 3.2.31 → 3.2.33

package/dist/MediaVolumeSlider.js

@@ -16,7 +16,9 @@ const MediaVolumeSlider = ({ displayVerticalVolumeSlider }) => {
     const parentDivRef = (0, react_1.useRef)(null);
     const inputRef = (0, react_1.useRef)(null);
     const hover = (0, use_hover_state_1.useHoverState)(parentDivRef);
-    const [randomClass] = (0, react_1.useState)(() => `slider-${(0, remotion_1.random)(null)}`.replace('.', ''));
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const randomId = typeof react_1.useId === 'undefined' ? 'volume-slider' : (0, react_1.useId)();
+    const [randomClass] = (0, react_1.useState)(() => `__remotion-volume-slider-${(0, remotion_1.random)(randomId)}`.replace('.', ''));
     const isMutedOrZero = mediaMuted || mediaVolume === 0;
     const onVolumeChange = (e) => {
         setMediaVolume(parseFloat(e.target.value));

package/dist/Player.d.ts

@@ -2,6 +2,7 @@ import type { ComponentType, MutableRefObject } from 'react';
 import React from 'react';
 import type { CompProps } from 'remotion';
 import type { PlayerRef } from './player-methods';
+import type { RenderFullscreenButton, RenderPlayPauseButton } from './PlayerControls';
 import type { RenderLoading, RenderPoster } from './PlayerUI';
 declare type PropsIfHasProps<Props> = {} extends Props ? {
     inputProps?: Props;
@@ -39,9 +40,11 @@ export declare type PlayerProps<T> = {
     inFrame?: number | null;
     outFrame?: number | null;
     initiallyShowControls?: number | boolean;
+    renderPlayPauseButton?: RenderPlayPauseButton;
+    renderFullscreenButton?: RenderFullscreenButton;
 } & PropsIfHasProps<T> & CompProps<T>;
 export declare const componentOrNullIfLazy: <T>(props: CompProps<T>) => ComponentType<T> | null;
-export declare const PlayerFn: <T>({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls, loop, autoPlay, showVolumeControls, allowFullscreen, clickToPlay, doubleClickToFullscreen, spaceKeyToPlayOrPause, moveToBeginningWhenEnded, numberOfSharedAudioTags, errorFallback, playbackRate, renderLoading, className, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, ...componentProps }: PlayerProps<T>, ref: MutableRefObject<PlayerRef>) => JSX.Element;
+export declare const PlayerFn: <T>({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls, loop, autoPlay, showVolumeControls, allowFullscreen, clickToPlay, doubleClickToFullscreen, spaceKeyToPlayOrPause, moveToBeginningWhenEnded, numberOfSharedAudioTags, errorFallback, playbackRate, renderLoading, className, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, renderFullscreenButton, renderPlayPauseButton, ...componentProps }: PlayerProps<T>, ref: MutableRefObject<PlayerRef>) => JSX.Element;
 declare module 'react' {
     function forwardRef<T, P = {}>(render: (props: P, ref: React.MutableRefObject<T>) => React.ReactElement | null): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
 }

package/dist/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, ...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, ...componentProps }, ref) => {
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
@@ -197,7 +197,7 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
     }
     return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.TimelineContext.Provider, { value: timelineContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.CompositionManager.Provider, { value: compositionManagerContext, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.MediaVolumeContext.Provider, { value: mediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.SetMediaVolumeContext.Provider, { value: setMediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.SharedAudioContextProvider, { numberOfAudioTags: numberOfSharedAudioTags, children: (0, jsx_runtime_1.jsx)(emitter_context_1.PlayerEventEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.DurationsContextProvider, { children: (0, jsx_runtime_1.jsx)(PlayerUI_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), setMediaVolume: setMediaVolumeAndPersist, mediaVolume: mediaVolume, mediaMuted: mediaMuted, doubleClickToFullscreen: Boolean(doubleClickToFullscreen), setMediaMuted: setMediaMuted, 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 }) }) }) }) }) }) }) }) }) }) }));
+                                                    : Boolean(controls), showVolumeControls: Boolean(showVolumeControls), setMediaVolume: setMediaVolumeAndPersist, mediaVolume: mediaVolume, mediaMuted: mediaMuted, doubleClickToFullscreen: Boolean(doubleClickToFullscreen), setMediaMuted: setMediaMuted, 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 }) }) }) }) }) }) }) }) }) }) }));
 };
 exports.PlayerFn = PlayerFn;
 exports.Player = (0, react_1.forwardRef)(exports.PlayerFn);

package/dist/PlayerControls.d.ts

@@ -1,6 +1,12 @@
-import type { MouseEventHandler } from 'react';
+import type { MouseEventHandler, ReactNode } from 'react';
 import React from 'react';
 import type { usePlayer } from './use-player';
+export declare type RenderPlayPauseButton = (props: {
+    playing: boolean;
+}) => ReactNode;
+export declare type RenderFullscreenButton = (props: {
+    isFullscreen: boolean;
+}) => ReactNode;
 export declare const X_SPACER = 10;
 export declare const X_PADDING = 12;
 declare global {
@@ -30,4 +36,6 @@ export declare const Controls: React.FC<{
     outFrame: number | null;
     initiallyShowControls: number | boolean;
     playerWidth: number;
+    renderPlayPauseButton: RenderPlayPauseButton | null;
+    renderFullscreenButton: RenderFullscreenButton | null;
 }>;

package/dist/PlayerControls.js

@@ -60,7 +60,8 @@ const flex1 = {
     flex: 1,
 };
 const fullscreen = {};
-const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, initiallyShowControls, playerWidth, }) => {
+const PlayPauseButton = ({ playing }) => playing ? (0, jsx_runtime_1.jsx)(icons_1.PauseIcon, {}) : (0, jsx_runtime_1.jsx)(icons_1.PlayIcon, {});
+const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, initiallyShowControls, playerWidth, renderPlayPauseButton, renderFullscreenButton, }) => {
     const playButtonRef = (0, react_1.useRef)(null);
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
     const [supportsFullscreen, setSupportsFullscreen] = (0, react_1.useState)(false);
@@ -130,8 +131,8 @@ const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVo
             textOverflow: 'ellipsis',
         };
     }, [maxTimeLabelWidth]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: containerCss, children: [(0, jsx_runtime_1.jsxs)("div", { style: controlsRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: leftPartStyle, children: [(0, jsx_runtime_1.jsx)("button", { ref: playButtonRef, type: "button", style: buttonStyle, onClick: player.playing ? player.pause : player.play, "aria-label": player.playing ? 'Pause video' : 'Play video', title: player.playing ? 'Pause video' : 'Play video', children: player.playing ? (0, jsx_runtime_1.jsx)(icons_1.PauseIcon, {}) : (0, jsx_runtime_1.jsx)(icons_1.PlayIcon, {}) }), 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_1.MediaVolumeSlider, { displayVerticalVolumeSlider: displayVerticalVolumeSlider })] })) : null, (0, jsx_runtime_1.jsx)("div", { style: xSpacer }), (0, jsx_runtime_1.jsxs)("div", { style: timeLabel, children: [(0, format_time_1.formatTime)(frame / fps), " / ", (0, format_time_1.formatTime)(durationInFrames / fps)] }), (0, jsx_runtime_1.jsx)("div", { style: xSpacer })] }), (0, jsx_runtime_1.jsx)("div", { style: flex1 }), (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: buttonStyle, onClick: isFullscreen
+    return ((0, jsx_runtime_1.jsxs)("div", { style: containerCss, children: [(0, jsx_runtime_1.jsxs)("div", { style: controlsRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: leftPartStyle, children: [(0, jsx_runtime_1.jsx)("button", { ref: playButtonRef, type: "button", style: buttonStyle, onClick: player.playing ? player.pause : player.play, "aria-label": player.playing ? 'Pause video' : 'Play video', title: player.playing ? 'Pause video' : 'Play video', children: renderPlayPauseButton === null ? ((0, jsx_runtime_1.jsx)(PlayPauseButton, { playing: player.playing })) : (renderPlayPauseButton({ playing: player.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_1.MediaVolumeSlider, { displayVerticalVolumeSlider: displayVerticalVolumeSlider })] })) : null, (0, jsx_runtime_1.jsx)("div", { style: xSpacer }), (0, jsx_runtime_1.jsxs)("div", { style: timeLabel, children: [(0, format_time_1.formatTime)(frame / fps), " / ", (0, format_time_1.formatTime)(durationInFrames / fps)] }), (0, jsx_runtime_1.jsx)("div", { style: xSpacer })] }), (0, jsx_runtime_1.jsx)("div", { style: flex1 }), (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: buttonStyle, onClick: isFullscreen
                                 ? onExitFullscreenButtonClick
-                                : onFullscreenButtonClick, children: (0, jsx_runtime_1.jsx)(icons_1.FullscreenIcon, { minimized: !isFullscreen }) })) : null })] }), (0, jsx_runtime_1.jsx)("div", { style: ySpacer }), (0, jsx_runtime_1.jsx)(PlayerSeekBar_1.PlayerSeekBar, { onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, durationInFrames: durationInFrames, inFrame: inFrame, outFrame: outFrame })] }));
+                                : onFullscreenButtonClick, children: renderFullscreenButton === null ? ((0, jsx_runtime_1.jsx)(icons_1.FullscreenIcon, { isFullscreen: isFullscreen })) : (renderFullscreenButton({ isFullscreen })) })) : null })] }), (0, jsx_runtime_1.jsx)("div", { style: ySpacer }), (0, jsx_runtime_1.jsx)(PlayerSeekBar_1.PlayerSeekBar, { onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, durationInFrames: durationInFrames, inFrame: inFrame, outFrame: outFrame })] }));
 };
 exports.Controls = Controls;

package/dist/PlayerUI.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { PlayerRef } from './player-methods';
+import type { RenderFullscreenButton, RenderPlayPauseButton } from './PlayerControls';
 export declare type ErrorFallback = (info: {
     error: Error;
 }) => React.ReactNode;
@@ -35,5 +36,7 @@ declare const _default: (props: {
     inFrame: number | null;
     outFrame: number | null;
     initiallyShowControls: number | boolean;
+    renderPlayPauseButton: RenderPlayPauseButton | null;
+    renderFullscreen: RenderFullscreenButton | null;
 } & React.RefAttributes<PlayerRef | null>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
 export default _default;

package/dist/PlayerUI.js

@@ -42,7 +42,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, mediaVolume, mediaMuted, doubleClickToFullscreen, setMediaMuted, setMediaVolume, spaceKeyToPlayOrPause, errorFallback, playbackRate, renderLoading, renderPoster, className, moveToBeginningWhenEnded, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, inFrame, outFrame, initiallyShowControls, }, ref) => {
+const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay, showVolumeControls, mediaVolume, mediaMuted, doubleClickToFullscreen, setMediaMuted, setMediaVolume, spaceKeyToPlayOrPause, errorFallback, playbackRate, renderLoading, renderPoster, className, moveToBeginningWhenEnded, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, inFrame, outFrame, initiallyShowControls, renderFullscreen: renderFullscreenButton, renderPlayPauseButton, }, ref) => {
     var _a, _b, _c, _d, _e;
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const video = remotion_1.Internals.useVideo();
@@ -329,7 +329,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_1.PLAYER_CSS_CLASSNAME, children: VideoComponent ? ((0, jsx_runtime_1.jsx)(error_boundary_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_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 })) : 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_1.PLAYER_CSS_CLASSNAME, children: VideoComponent ? ((0, jsx_runtime_1.jsx)(error_boundary_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_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] }));
     if (is_node_1.IS_NODE && !doesReactVersionSupportSuspense) {
         return ((0, jsx_runtime_1.jsx)("div", { ref: container, style: outerStyle, className: className, children: content }));
     }

package/dist/icons.d.ts

@@ -4,7 +4,7 @@ export declare const fullscreenIconSize = 16;
 export declare const PlayIcon: React.FC;
 export declare const PauseIcon: React.FC;
 export declare const FullscreenIcon: React.FC<{
-    minimized: boolean;
+    isFullscreen: boolean;
 }>;
 export declare const VolumeOffIcon: React.FC;
 export declare const VolumeOnIcon: React.FC;

package/dist/icons.js

@@ -15,12 +15,12 @@ const PauseIcon = () => {
     return ((0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 100 100", width: exports.ICON_SIZE, height: exports.ICON_SIZE, children: [(0, jsx_runtime_1.jsx)("rect", { x: "25", y: "20", width: "20", height: "60", fill: "#fff", ry: "5", rx: "5" }), (0, jsx_runtime_1.jsx)("rect", { x: "55", y: "20", width: "20", height: "60", fill: "#fff", ry: "5", rx: "5" })] }));
 };
 exports.PauseIcon = PauseIcon;
-const FullscreenIcon = ({ minimized }) => {
+const FullscreenIcon = ({ isFullscreen, }) => {
     const strokeWidth = 6;
     const viewSize = 32;
-    const out = minimized ? strokeWidth / 2 : 0;
-    const middleInset = minimized ? strokeWidth / 2 : strokeWidth * 1.6;
-    const inset = minimized ? strokeWidth * 2 : strokeWidth * 1.6;
+    const out = isFullscreen ? 0 : strokeWidth / 2;
+    const middleInset = isFullscreen ? strokeWidth * 1.6 : strokeWidth / 2;
+    const inset = isFullscreen ? strokeWidth * 1.6 : strokeWidth * 2;
     return ((0, jsx_runtime_1.jsxs)("svg", { viewBox: `0 0 ${viewSize} ${viewSize}`, height: exports.fullscreenIconSize, width: exports.fullscreenIconSize, children: [(0, jsx_runtime_1.jsx)("path", { d: `
 				M ${out} ${inset}
 				L ${middleInset} ${middleInset}

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
 import type { CallbackListener, EventTypes } from './event-emitter';
 import { PlayerEmitter } from './event-emitter';
-export { ErrorFallback, Player, PlayerProps } from './Player';
+export { Player, PlayerProps } from './Player';
 export { PlayerMethods, PlayerRef } from './player-methods';
-export type { RenderLoading, RenderPoster } from './PlayerUI';
+export type { RenderFullscreenButton, RenderPlayPauseButton, } from './PlayerControls';
+export type { ErrorFallback, RenderLoading, RenderPoster } from './PlayerUI';
 export { PreviewSize, Translation } from './utils/preview-size';
 export { Size } from './utils/use-element-size';
 export type { CallbackListener, EventTypes };

package/dist/test/index.test.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const vitest_1 = require("vitest");
 const use_player_1 = require("../use-player");
-test('It should throw an error if not being used inside a RemotionRoot', () => {
-    expect(() => {
+(0, vitest_1.test)('It should throw an error if not being used inside a RemotionRoot', () => {
+    (0, vitest_1.expect)(() => {
         (0, use_player_1.usePlayer)();
     }).toThrow();
 });

package/dist/test/validate-in-out-frames.test.js

@@ -1,53 +1,54 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const vitest_1 = require("vitest");
 const validate_in_out_frame_1 = require("../utils/validate-in-out-frame");
-test('Validate in out frames', () => {
-    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+(0, vitest_1.test)('Validate in out frames', () => {
+    (0, vitest_1.expect)(() => (0, validate_in_out_frame_1.validateInOutFrames)({
         durationInFrames: 200,
         inFrame: 201,
         outFrame: undefined,
     })).toThrow(/inFrame must be less than \(durationInFrames - 1\)/);
-    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+    (0, vitest_1.expect)(() => (0, validate_in_out_frame_1.validateInOutFrames)({
         durationInFrames: 200,
         inFrame: 199,
         outFrame: 201,
     })).toThrow(/outFrame must be less than \(durationInFrames - 1\)/);
-    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+    (0, vitest_1.expect)(() => (0, validate_in_out_frame_1.validateInOutFrames)({
         durationInFrames: 200,
         inFrame: -10,
         outFrame: null,
     })).toThrow(/inFrame must be greater than 0, but is -10/);
-    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+    (0, vitest_1.expect)(() => (0, validate_in_out_frame_1.validateInOutFrames)({
         durationInFrames: 200,
         inFrame: null,
         outFrame: -10,
     })).toThrow(/outFrame must be greater than 0, but is -10/);
-    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+    (0, vitest_1.expect)(() => (0, validate_in_out_frame_1.validateInOutFrames)({
         durationInFrames: 200,
         inFrame: 1.5,
         outFrame: null,
     })).toThrow(/"inFrame" must be an integer, but is 1.5/);
-    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+    (0, vitest_1.expect)(() => (0, validate_in_out_frame_1.validateInOutFrames)({
         durationInFrames: 200,
         inFrame: 20,
         outFrame: 20,
     })).toThrow(/outFrame must be greater than inFrame, but is 20/);
-    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+    (0, vitest_1.expect)(() => (0, validate_in_out_frame_1.validateInOutFrames)({
         durationInFrames: 200,
         inFrame: 21,
         outFrame: 20,
     })).toThrow(/outFrame must be greater than inFrame, but is 20 <= 21/);
-    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+    (0, vitest_1.expect)(() => (0, validate_in_out_frame_1.validateInOutFrames)({
         durationInFrames: 200,
         inFrame: null,
         outFrame: 20,
     })).not.toThrow();
-    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+    (0, vitest_1.expect)(() => (0, validate_in_out_frame_1.validateInOutFrames)({
         durationInFrames: 200,
         inFrame: null,
         outFrame: null,
     })).not.toThrow();
-    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+    (0, vitest_1.expect)(() => (0, validate_in_out_frame_1.validateInOutFrames)({
         durationInFrames: 200,
         inFrame: 10,
         outFrame: 20,

package/dist/test/validate-prop.test.js

@@ -2,9 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const remotion_1 = require("remotion");
+const vitest_1 = require("vitest");
 const index_1 = require("../index");
 const test_utils_1 = require("./test-utils");
-test('no compositionWidth should give errors', () => {
+(0, vitest_1.test)('no compositionWidth should give errors', () => {
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player
         // @ts-expect-error
@@ -13,27 +14,27 @@ test('no compositionWidth should give errors', () => {
             compositionWidth: null, errorFallback: () => 'something went wrong', compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
     }
     catch (e) {
-        expect(e.message).toMatch(/'compositionWidth' must be a number but got 'object' instead/);
+        (0, vitest_1.expect)(e.message).toMatch(/'compositionWidth' must be a number but got 'object' instead/);
     }
 });
-test('no compositionHeight should give errors', () => {
+(0, vitest_1.test)('no compositionHeight should give errors', () => {
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 400, errorFallback: () => 'something went wrong', 
             // @ts-expect-error
             compositionHeight: undefined, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
     }
     catch (e) {
-        expect(e.message).toMatch(/'compositionHeight' must be a number but got 'undefined' instead/);
+        (0, vitest_1.expect)(e.message).toMatch(/'compositionHeight' must be a number but got 'undefined' instead/);
     }
 });
-test('No fps should give errors', () => {
+(0, vitest_1.test)('No fps should give errors', () => {
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', 
             // @ts-expect-error
             fps: null, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
     }
     catch (e) {
-        expect(e.message).toMatch(/"fps" must be a number, but you passed a value of type object/);
+        (0, vitest_1.expect)(e.message).toMatch(/"fps" must be a number, but you passed a value of type object/);
     }
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', 
@@ -41,51 +42,51 @@ test('No fps should give errors', () => {
             fps: undefined, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
     }
     catch (e) {
-        expect(e.message).toMatch(/"fps" must be a number, but you passed a value of type undefined/);
+        (0, vitest_1.expect)(e.message).toMatch(/"fps" must be a number, but you passed a value of type undefined/);
     }
 });
-test('No durationInFrames should give errors', () => {
+(0, vitest_1.test)('No durationInFrames should give errors', () => {
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', fps: 30, 
             // @ts-expect-error
             durationInFrames: undefined, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
     }
     catch (e) {
-        expect(e.message).toMatch(/durationInFrames` must be a number, but is undefined/);
+        (0, vitest_1.expect)(e.message).toMatch(/durationInFrames` must be a number, but is undefined/);
     }
 });
-test('Invalid playbackRate should give error', () => {
+(0, vitest_1.test)('Invalid playbackRate should give error', () => {
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true, playbackRate: -5 }));
     }
     catch (e) {
-        expect(e.message).toMatch(/The lowest possible playback rate is -4. You passed: -5/);
+        (0, vitest_1.expect)(e.message).toMatch(/The lowest possible playback rate is -4. You passed: -5/);
     }
 });
-test('playbackRate of 0 should not be possible', () => {
+(0, vitest_1.test)('playbackRate of 0 should not be possible', () => {
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true, playbackRate: 0 }));
     }
     catch (e) {
-        expect(e.message).toMatch(/A playback rate of 0 is not supported./);
+        (0, vitest_1.expect)(e.message).toMatch(/A playback rate of 0 is not supported./);
     }
 });
-test('playbackRate of wrong type should not be possible', () => {
+(0, vitest_1.test)('playbackRate of wrong type should not be possible', () => {
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true, 
             // @ts-expect-error
             playbackRate: 'hi' }));
     }
     catch (e) {
-        expect(e.message).toMatch(/A playback rate of 0 is not supported./);
+        (0, vitest_1.expect)(e.message).toMatch(/A playback rate of 0 is not supported./);
     }
 });
-test('playbackRate of undefined should be okay', () => {
+(0, vitest_1.test)('playbackRate of undefined should be okay', () => {
     (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
-    expect(true).toBe(true);
+    (0, vitest_1.expect)(true).toBe(true);
 });
-test('passing in <Composition /> instance should not be possible', () => {
-    expect(() => {
+(0, vitest_1.test)('passing in <Composition /> instance should not be possible', () => {
+    (0, vitest_1.expect)(() => {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: remotion_1.Composition, controls: true, showVolumeControls: true, inputProps: {
                 id: 'HelloWorld',
                 width: 500,
@@ -96,8 +97,8 @@ test('passing in <Composition /> instance should not be possible', () => {
             } }));
     }).toThrow(/'component' must not be the 'Composition' component\. Pass your own React/);
 });
-test('passing in <Composition /> instance should not be possible', () => {
-    expect(() => {
+(0, vitest_1.test)('passing in <Composition /> instance should not be possible', () => {
+    (0, vitest_1.expect)(() => {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, 
             // @ts-expect-error
             component: (0, jsx_runtime_1.jsx)(remotion_1.Composition, { durationInFrames: 30, fps: 30, height: 10, width: 10, id: "hello", component: test_utils_1.HelloWorld }), controls: true, showVolumeControls: true, inputProps: {
@@ -110,7 +111,7 @@ test('passing in <Composition /> instance should not be possible', () => {
             } }));
     }).toThrow(/'component' should not be an instance of <Composition\/>\. Pass the React component dir/);
 });
-test.each([
+vitest_1.test.each([
     ['controls'],
     ['loop'],
     ['autoPlay'],
@@ -125,6 +126,6 @@ test.each([
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', fps: 30, durationInFrames: 100, component: test_utils_1.HelloWorld, ...props }));
     }
     catch (e) {
-        expect(e.message).toMatch(`'${a}' must be a boolean or undefined but got 'string' instead`);
+        (0, vitest_1.expect)(e.message).toMatch(`'${a}' must be a boolean or undefined but got 'string' instead`);
     }
 });

package/package.json

@@ -1,12 +1,11 @@
 {
 	"name": "@remotion/player",
-	"version": "3.2.31",
+	"version": "3.2.33",
 	"description": "Remotion Player",
 	"main": "dist/index.js",
 	"sideEffects": false,
 	"scripts": {
 		"lint": "eslint src --ext ts,tsx",
-		"test": "jest",
 		"build": "tsc -d",
 		"watch": "tsc -w",
 		"prerelease": "cp ../../README.md ."
@@ -28,7 +27,7 @@
 	],
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"remotion": "3.2.31"
+		"remotion": "3.2.33"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
@@ -37,19 +36,19 @@
 	"devDependencies": {
 		"@jonny/eslint-config": "3.0.266",
 		"@testing-library/react": "13.1.1",
-		"@types/jest": "^27.4.0",
 		"@types/node": "^14.14.14",
 		"@types/react": "18.0.1",
 		"@types/react-dom": "18.0.0",
+		"@vitejs/plugin-react": "^2.0.0",
 		"csstype": "^3.0.9",
 		"eslint": "8.13.0",
-		"jest": "^27.2.4",
+		"jsdom": "20.0.1",
 		"prettier": "^2.0.5",
 		"prettier-plugin-organize-imports": "^2.3.4",
 		"react": "^18.0.0",
 		"react-dom": "^18.0.0",
-		"ts-jest": "^27.0.5",
 		"typescript": "^4.7.0",
+		"vitest": "0.24.3",
 		"webpack": "5.74.0"
 	},
 	"keywords": [
@@ -63,5 +62,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "f011b454d78903e548c32f548d8fef642c5ff7a6"
+	"gitHead": "3c864e5ab73870674d028a1199005ddbabaede12"
 }