@remotion/player 4.0.231 → 4.0.233

package/dist/cjs/Player.d.ts

@@ -54,6 +54,7 @@ export type PlayerProps<Schema extends AnyZodObject, Props extends Record<string
     readonly hideControlsWhenPointerDoesntMove?: boolean | number;
     readonly overflowVisible?: boolean;
     readonly browserMediaControlsBehavior?: BrowserMediaControlsBehavior;
+    readonly overrideInternalClassName?: string;
 } & CompProps<Props> & PropsIfHasProps<Schema, Props>;
 export type PlayerPropsWithoutZod<Props extends Record<string, unknown>> = PlayerProps<AnyZodObject, Props>;
 export declare const componentOrNullIfLazy: <Props>(props: CompProps<Props>) => ComponentType<Props> | null;

package/dist/cjs/Player.js

@@ -22,7 +22,7 @@ const componentOrNullIfLazy = (props) => {
     return null;
 };
 exports.componentOrNullIfLazy = componentOrNullIfLazy;
-const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls = false, loop = false, autoPlay = false, showVolumeControls = true, allowFullscreen = true, clickToPlay, doubleClickToFullscreen = false, spaceKeyToPlayOrPause = true, moveToBeginningWhenEnded = true, numberOfSharedAudioTags = 5, errorFallback = () => '⚠️', playbackRate = 1, renderLoading, className, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, showPosterWhenBuffering, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, renderFullscreenButton, renderPlayPauseButton, renderVolumeSlider, alwaysShowControls = false, initiallyMuted = false, showPlaybackRateControl = false, posterFillMode = 'player-size', bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove = true, overflowVisible = false, renderMuteButton, browserMediaControlsBehavior: passedBrowserMediaControlsBehavior, ...componentProps }, ref) => {
+const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls = false, loop = false, autoPlay = false, showVolumeControls = true, allowFullscreen = true, clickToPlay, doubleClickToFullscreen = false, spaceKeyToPlayOrPause = true, moveToBeginningWhenEnded = true, numberOfSharedAudioTags = 5, errorFallback = () => '⚠️', playbackRate = 1, renderLoading, className, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, showPosterWhenBuffering, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, renderFullscreenButton, renderPlayPauseButton, renderVolumeSlider, alwaysShowControls = false, initiallyMuted = false, showPlaybackRateControl = false, posterFillMode = 'player-size', bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove = true, overflowVisible = false, renderMuteButton, browserMediaControlsBehavior: passedBrowserMediaControlsBehavior, overrideInternalClassName, ...componentProps }, ref) => {
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
@@ -134,8 +134,8 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
             // Inject CSS only on client, and also only after the Player has hydrated
-            remotion_1.Internals.CSSUtils.injectCSS(remotion_1.Internals.CSSUtils.makeDefaultPreviewCSS(`.${player_css_classname_js_1.PLAYER_CSS_CLASSNAME}`, '#fff'));
-        }, []);
+            remotion_1.Internals.CSSUtils.injectCSS(remotion_1.Internals.CSSUtils.makeDefaultPreviewCSS(`.${(0, player_css_classname_js_1.playerCssClassname)(overrideInternalClassName)}`, '#fff'));
+        }, [overrideInternalClassName]);
     }
     const actualInputProps = (0, react_1.useMemo)(() => inputProps !== null && inputProps !== void 0 ? inputProps : {}, [inputProps]);
     const browserMediaControlsBehavior = (0, react_1.useMemo)(() => {
@@ -145,7 +145,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, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(EmitterProvider_js_1.PlayerEmitterProvider, { currentPlaybackRate: currentPlaybackRate, children: (0, jsx_runtime_1.jsx)(PlayerUI_js_1.default, { ref: rootRef, posterFillMode: posterFillMode, renderLoading: renderLoading, autoPlay: Boolean(autoPlay), loop: Boolean(loop), controls: Boolean(controls), errorFallback: errorFallback, style: style, inputProps: actualInputProps, allowFullscreen: Boolean(allowFullscreen), moveToBeginningWhenEnded: Boolean(moveToBeginningWhenEnded), clickToPlay: typeof clickToPlay === 'boolean'
                             ? clickToPlay
-                            : Boolean(controls), showVolumeControls: Boolean(showVolumeControls), doubleClickToFullscreen: Boolean(doubleClickToFullscreen), spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause), playbackRate: currentPlaybackRate, className: className !== null && className !== void 0 ? className : undefined, showPosterWhenUnplayed: Boolean(showPosterWhenUnplayed), showPosterWhenEnded: Boolean(showPosterWhenEnded), showPosterWhenPaused: Boolean(showPosterWhenPaused), showPosterWhenBuffering: Boolean(showPosterWhenBuffering), renderPoster: renderPoster, inFrame: inFrame !== null && inFrame !== void 0 ? inFrame : null, outFrame: outFrame !== null && outFrame !== void 0 ? outFrame : null, initiallyShowControls: initiallyShowControls !== null && initiallyShowControls !== void 0 ? initiallyShowControls : true, renderFullscreen: renderFullscreenButton !== null && renderFullscreenButton !== void 0 ? renderFullscreenButton : null, renderPlayPauseButton: renderPlayPauseButton !== null && renderPlayPauseButton !== void 0 ? renderPlayPauseButton : null, renderMuteButton: renderMuteButton !== null && renderMuteButton !== void 0 ? renderMuteButton : null, renderVolumeSlider: renderVolumeSlider !== null && renderVolumeSlider !== void 0 ? renderVolumeSlider : null, alwaysShowControls: alwaysShowControls, showPlaybackRateControl: showPlaybackRateControl, bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds !== null && bufferStateDelayInMilliseconds !== void 0 ? bufferStateDelayInMilliseconds : 300, hideControlsWhenPointerDoesntMove: hideControlsWhenPointerDoesntMove, overflowVisible: overflowVisible, browserMediaControlsBehavior: browserMediaControlsBehavior }) }) }) }) }));
+                            : Boolean(controls), showVolumeControls: Boolean(showVolumeControls), doubleClickToFullscreen: Boolean(doubleClickToFullscreen), spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause), playbackRate: currentPlaybackRate, className: className !== null && className !== void 0 ? className : undefined, showPosterWhenUnplayed: Boolean(showPosterWhenUnplayed), showPosterWhenEnded: Boolean(showPosterWhenEnded), showPosterWhenPaused: Boolean(showPosterWhenPaused), showPosterWhenBuffering: Boolean(showPosterWhenBuffering), renderPoster: renderPoster, inFrame: inFrame !== null && inFrame !== void 0 ? inFrame : null, outFrame: outFrame !== null && outFrame !== void 0 ? outFrame : null, initiallyShowControls: initiallyShowControls !== null && initiallyShowControls !== void 0 ? initiallyShowControls : true, renderFullscreen: renderFullscreenButton !== null && renderFullscreenButton !== void 0 ? renderFullscreenButton : null, renderPlayPauseButton: renderPlayPauseButton !== null && renderPlayPauseButton !== void 0 ? renderPlayPauseButton : null, renderMuteButton: renderMuteButton !== null && renderMuteButton !== void 0 ? renderMuteButton : null, renderVolumeSlider: renderVolumeSlider !== null && renderVolumeSlider !== void 0 ? renderVolumeSlider : null, alwaysShowControls: alwaysShowControls, showPlaybackRateControl: showPlaybackRateControl, bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds !== null && bufferStateDelayInMilliseconds !== void 0 ? bufferStateDelayInMilliseconds : 300, hideControlsWhenPointerDoesntMove: hideControlsWhenPointerDoesntMove, overflowVisible: overflowVisible, browserMediaControlsBehavior: browserMediaControlsBehavior, overrideInternalClassName: overrideInternalClassName !== null && overrideInternalClassName !== void 0 ? overrideInternalClassName : undefined }) }) }) }) }));
 };
 const forward = react_1.forwardRef;
 /**

package/dist/cjs/PlayerControls.d.ts

@@ -2,7 +2,6 @@ import type { MouseEventHandler, ReactNode, SyntheticEvent } from 'react';
 import React from 'react';
 import type { RenderMuteButton } from './MediaVolumeSlider.js';
 import type { RenderVolumeSlider } from './render-volume-slider.js';
-import type { usePlayer } from './use-player.js';
 import type { Size } from './utils/use-element-size.js';
 export type RenderPlayPauseButton = (props: {
     playing: boolean;
@@ -15,7 +14,6 @@ export declare const Controls: React.FC<{
     readonly fps: number;
     readonly durationInFrames: number;
     readonly showVolumeControls: boolean;
-    readonly player: ReturnType<typeof usePlayer>;
     readonly onFullscreenButtonClick: MouseEventHandler<HTMLButtonElement>;
     readonly isFullscreen: boolean;
     readonly allowFullscreen: boolean;
@@ -38,4 +36,6 @@ export declare const Controls: React.FC<{
     readonly onDoubleClick: MouseEventHandler<HTMLDivElement> | undefined;
     readonly renderMuteButton: RenderMuteButton | null;
     readonly renderVolumeSlider: RenderVolumeSlider | null;
+    readonly playing: boolean;
+    readonly toggle: (e?: SyntheticEvent | PointerEvent) => void;
 }>;

package/dist/cjs/PlayerControls.js

@@ -3,12 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Controls = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const remotion_1 = require("remotion");
 const DefaultPlayPauseButton_js_1 = require("./DefaultPlayPauseButton.js");
 const MediaVolumeSlider_js_1 = require("./MediaVolumeSlider.js");
 const PlaybackrateControl_js_1 = require("./PlaybackrateControl.js");
 const PlayerSeekBar_js_1 = require("./PlayerSeekBar.js");
-const format_time_js_1 = require("./format-time.js");
+const PlayerTimeLabel_js_1 = require("./PlayerTimeLabel.js");
 const icons_js_1 = require("./icons.js");
 const use_hover_state_js_1 = require("./use-hover-state.js");
 const use_video_controls_resize_js_1 = require("./use-video-controls-resize.js");
@@ -66,10 +65,9 @@ const flex1 = {
     flex: 1,
 };
 const fullscreen = {};
-const Controls = ({ durationInFrames, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, initiallyShowControls, canvasSize, renderPlayPauseButton, renderFullscreenButton, alwaysShowControls, showPlaybackRateControl, containerRef, buffering, hideControlsWhenPointerDoesntMove, onPointerDown, onDoubleClick, renderMuteButton, renderVolumeSlider, }) => {
+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, }) => {
     var _a, _b;
     const playButtonRef = (0, react_1.useRef)(null);
-    const frame = remotion_1.Internals.Timeline.useTimelinePosition();
     const [supportsFullscreen, setSupportsFullscreen] = (0, react_1.useState)(false);
     const hovered = (0, use_hover_state_js_1.useHoverState)(containerRef, hideControlsWhenPointerDoesntMove);
     const { maxTimeLabelWidth, displayVerticalVolumeSlider } = (0, use_video_controls_resize_js_1.useVideoControlsResize)({
@@ -99,12 +97,12 @@ const Controls = ({ durationInFrames, isFullscreen, fps, player, showVolumeContr
     });
     const containerCss = (0, react_1.useMemo)(() => {
         // Hide if playing and mouse outside
-        const shouldShow = hovered || !player.playing || shouldShowInitially || alwaysShowControls;
+        const shouldShow = hovered || !playing || shouldShowInitially || alwaysShowControls;
         return {
             ...containerStyle,
             opacity: Number(shouldShow),
         };
-    }, [hovered, shouldShowInitially, player.playing, alwaysShowControls]);
+    }, [hovered, shouldShowInitially, playing, alwaysShowControls]);
     (0, react_1.useEffect)(() => {
         if (playButtonRef.current && spaceKeyToPlayOrPause) {
             // This switches focus to play button when player.playing flag changes
@@ -112,7 +110,7 @@ const Controls = ({ durationInFrames, isFullscreen, fps, player, showVolumeContr
                 preventScroll: true,
             });
         }
-    }, [player.playing, spaceKeyToPlayOrPause]);
+    }, [playing, spaceKeyToPlayOrPause]);
     (0, react_1.useEffect)(() => {
         var _a;
         // Must be handled client-side to avoid SSR hydration mismatch
@@ -133,16 +131,6 @@ const Controls = ({ durationInFrames, isFullscreen, fps, player, showVolumeContr
             clearInterval(timeout);
         };
     }, [shouldShowInitially]);
-    const timeLabel = (0, react_1.useMemo)(() => {
-        return {
-            color: 'white',
-            fontFamily: 'sans-serif',
-            fontSize: 14,
-            maxWidth: maxTimeLabelWidth === null ? undefined : maxTimeLabelWidth,
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-        };
-    }, [maxTimeLabelWidth]);
     const playbackRates = (0, react_1.useMemo)(() => {
         if (showPlaybackRateControl === true) {
             return [0.5, 0.8, 1, 1.2, 1.5, 1.8, 2, 2.5, 3];
@@ -174,10 +162,10 @@ const Controls = ({ durationInFrames, isFullscreen, fps, player, showVolumeContr
             onDoubleClick === null || onDoubleClick === void 0 ? void 0 : onDoubleClick(e);
         }
     }, [onDoubleClick]);
-    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: 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)(DefaultPlayPauseButton_js_1.DefaultPlayPauseButton, { buffering: buffering, playing: player.playing })) : (((_b = renderPlayPauseButton({
-                                    playing: player.playing,
+    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: 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_js_1.MediaVolumeSlider, { renderMuteButton: renderMuteButton, renderVolumeSlider: renderVolumeSlider, displayVerticalVolumeSlider: displayVerticalVolumeSlider })] })) : null, (0, jsx_runtime_1.jsx)("div", { style: xSpacer }), (0, jsx_runtime_1.jsxs)("div", { style: timeLabel, children: [(0, format_time_js_1.formatTime)(frame / fps), " / ", (0, format_time_js_1.formatTime)(durationInFrames / fps)] }), (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 }), 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/PlayerSeekBar.js

@@ -119,18 +119,18 @@ const PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outF
             backgroundColor: 'white',
             left: Math.max(0, (frame / Math.max(1, durationInFrames - 1)) * width - KNOB_SIZE / 2),
             boxShadow: '0 0 2px black',
-            opacity: Number(barHovered),
+            opacity: Number(barHovered || dragging.dragging),
         };
-    }, [barHovered, durationInFrames, frame, width]);
+    }, [barHovered, dragging.dragging, durationInFrames, frame, width]);
     const fillStyle = (0, react_1.useMemo)(() => {
         return {
             height: BAR_HEIGHT,
             backgroundColor: 'rgba(255, 255, 255, 1)',
-            width: ((frame - (inFrame !== null && inFrame !== void 0 ? inFrame : 0)) / (durationInFrames - 1)) * 100 + '%',
-            marginLeft: ((inFrame !== null && inFrame !== void 0 ? inFrame : 0) / (durationInFrames - 1)) * 100 + '%',
+            width: ((frame - (inFrame !== null && inFrame !== void 0 ? inFrame : 0)) / (durationInFrames - 1)) * width,
+            marginLeft: ((inFrame !== null && inFrame !== void 0 ? inFrame : 0) / (durationInFrames - 1)) * width,
             borderRadius: BAR_HEIGHT / 2,
         };
-    }, [durationInFrames, frame, inFrame]);
+    }, [durationInFrames, frame, inFrame, width]);
     const active = (0, react_1.useMemo)(() => {
         return {
             height: BAR_HEIGHT,

package/dist/cjs/PlayerTimeLabel.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const PlayerTimeLabel: React.FC<{
+    readonly maxTimeLabelWidth: number | null;
+    readonly durationInFrames: number;
+    readonly fps: number;
+}>;

package/dist/cjs/PlayerTimeLabel.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlayerTimeLabel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const format_time_1 = require("./format-time");
+const PlayerTimeLabel = ({ durationInFrames, maxTimeLabelWidth, fps }) => {
+    const frame = remotion_1.Internals.Timeline.useTimelinePosition();
+    const timeLabel = (0, react_1.useMemo)(() => {
+        return {
+            color: 'white',
+            fontFamily: 'sans-serif',
+            fontSize: 14,
+            maxWidth: maxTimeLabelWidth === null ? undefined : maxTimeLabelWidth,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+        };
+    }, [maxTimeLabelWidth]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: timeLabel, children: [(0, format_time_1.formatTime)(frame / fps), " / ", (0, format_time_1.formatTime)(durationInFrames / fps)] }));
+};
+exports.PlayerTimeLabel = PlayerTimeLabel;

package/dist/cjs/PlayerUI.d.ts

@@ -49,5 +49,6 @@ declare const _default: React.ForwardRefExoticComponent<{
     readonly hideControlsWhenPointerDoesntMove: boolean | number;
     readonly overflowVisible: boolean;
     readonly browserMediaControlsBehavior: BrowserMediaControlsBehavior;
+    readonly overrideInternalClassName: string | undefined;
 } & React.RefAttributes<PlayerRef>>;
 export default _default;

package/dist/cjs/PlayerUI.js

@@ -40,7 +40,7 @@ if (reactVersion === '0') {
     throw new Error(`Version ${reactVersion} of "react" is not supported by Remotion`);
 }
 const doesReactVersionSupportSuspense = parseInt(reactVersion, 10) >= 18;
-const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay, showVolumeControls, doubleClickToFullscreen, spaceKeyToPlayOrPause, errorFallback, playbackRate, renderLoading, renderPoster, className, moveToBeginningWhenEnded, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, showPosterWhenBuffering, inFrame, outFrame, initiallyShowControls, renderFullscreen: renderFullscreenButton, renderPlayPauseButton, renderMuteButton, renderVolumeSlider, alwaysShowControls, showPlaybackRateControl, posterFillMode, bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove, overflowVisible, browserMediaControlsBehavior, }, ref) => {
+const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay, showVolumeControls, doubleClickToFullscreen, spaceKeyToPlayOrPause, errorFallback, playbackRate, renderLoading, renderPoster, className, moveToBeginningWhenEnded, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, showPosterWhenBuffering, inFrame, outFrame, initiallyShowControls, renderFullscreen: renderFullscreenButton, renderPlayPauseButton, renderMuteButton, renderVolumeSlider, alwaysShowControls, showPlaybackRateControl, posterFillMode, bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove, overflowVisible, browserMediaControlsBehavior, overrideInternalClassName, }, ref) => {
     var _a, _b, _c;
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const video = remotion_1.Internals.useVideo();
@@ -62,13 +62,14 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
             document.webkitFullscreenEnabled);
     }, []);
     const player = (0, use_player_js_1.usePlayer)();
+    const playerToggle = player.toggle;
     (0, use_playback_js_1.usePlayback)({
         loop,
         playbackRate,
         moveToBeginningWhenEnded,
         inFrame,
         outFrame,
-        frameRef: player.remotionInternal_currentFrameRef,
+        getCurrentFrame: player.getCurrentFrame,
         browserMediaControlsBehavior,
     });
     (0, react_1.useEffect)(() => {
@@ -96,13 +97,8 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
         };
     }, []);
     const toggle = (0, react_1.useCallback)((e) => {
-        if (player.isPlaying()) {
-            player.pause();
-        }
-        else {
-            player.play(e);
-        }
-    }, [player]);
+        playerToggle(e);
+    }, [playerToggle]);
     const requestFullscreen = (0, react_1.useCallback)(() => {
         if (!allowFullscreen) {
             throw new Error('allowFullscreen is false');
@@ -338,11 +334,13 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
             overflowVisible,
         });
     }, [canvasSize, config, layout, overflowVisible, scale]);
+    const playerPause = player.pause;
+    const playerDispatchError = player.emitter.dispatchError;
     const onError = (0, react_1.useCallback)((error) => {
-        player.pause();
+        playerPause();
         // Pay attention to `this context`
-        player.emitter.dispatchError(error);
-    }, [player]);
+        playerDispatchError(error);
+    }, [playerDispatchError, playerPause]);
     const onFullscreenButtonClick = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
         requestFullscreen();
@@ -419,11 +417,11 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
             showPosterWhenBuffering && showBufferIndicator && player.isPlaying(),
         ].some(Boolean);
     const { left, top, width, height, ...outerWithoutScale } = outer;
-    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: outer, onPointerDown: clickToPlay ? handlePointerDown : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: (0, jsx_runtime_1.jsxs)("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)(remotion_1.Internals.CurrentScaleContext.Provider, { value: currentScale, children: (0, jsx_runtime_1.jsx)(VideoComponent, { ...((_c = video === null || video === void 0 ? void 0 : video.props) !== null && _c !== void 0 ? _c : {}), ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}) }) }) })) : null, shouldShowPoster && posterFillMode === 'composition-size' ? ((0, jsx_runtime_1.jsx)("div", { style: {
+    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: outer, onPointerDown: clickToPlay ? handlePointerDown : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: (0, jsx_runtime_1.jsxs)("div", { style: containerStyle, className: (0, player_css_classname_js_1.playerCssClassname)(overrideInternalClassName), children: [VideoComponent ? ((0, jsx_runtime_1.jsx)(error_boundary_js_1.ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.CurrentScaleContext.Provider, { value: currentScale, children: (0, jsx_runtime_1.jsx)(VideoComponent, { ...((_c = video === null || video === void 0 ? void 0 : video.props) !== null && _c !== void 0 ? _c : {}), ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}) }) }) })) : null, shouldShowPoster && posterFillMode === 'composition-size' ? ((0, jsx_runtime_1.jsx)("div", { style: {
                                 ...outerWithoutScale,
                                 width: config.width,
                                 height: config.height,
-                            }, onPointerDown: clickToPlay ? handlePointerDown : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null] }) }), 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, durationInFrames: config.durationInFrames, player: player, 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
+                            }, onPointerDown: clickToPlay ? handlePointerDown : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null] }) }), 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] }));
     if (is_node_js_1.IS_NODE && !doesReactVersionSupportSuspense) {

package/dist/cjs/Thumbnail.d.ts

@@ -15,6 +15,7 @@ export type ThumbnailProps<Schema extends AnyZodObject, Props extends Record<str
     readonly errorFallback?: ErrorFallback;
     readonly renderLoading?: RenderLoading;
     readonly className?: string;
+    readonly overrideInternalClassName?: string;
 };
 export type ThumbnailPropsWithoutZod<Props extends Record<string, unknown>> = ThumbnailProps<AnyZodObject, Props>;
 /**

package/dist/cjs/Thumbnail.js

@@ -11,7 +11,7 @@ const emitter_context_js_1 = require("./emitter-context.js");
 const event_emitter_js_1 = require("./event-emitter.js");
 const SharedPlayerContext_js_1 = require("./SharedPlayerContext.js");
 const ThumbnailUI_js_1 = __importDefault(require("./ThumbnailUI.js"));
-const ThumbnailFn = ({ frameToDisplay, style, inputProps, compositionHeight, compositionWidth, durationInFrames, fps, className, errorFallback = () => '⚠️', renderLoading, overflowVisible = false, ...componentProps }, ref) => {
+const ThumbnailFn = ({ frameToDisplay, style, inputProps, compositionHeight, compositionWidth, durationInFrames, fps, className, errorFallback = () => '⚠️', renderLoading, overflowVisible = false, overrideInternalClassName, ...componentProps }, ref) => {
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
@@ -44,7 +44,7 @@ const ThumbnailFn = ({ frameToDisplay, style, inputProps, compositionHeight, com
     const passedInputProps = (0, react_1.useMemo)(() => {
         return inputProps !== null && inputProps !== void 0 ? inputProps : {};
     }, [inputProps]);
-    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.IsPlayerContextProvider, { children: (0, jsx_runtime_1.jsx)(SharedPlayerContext_js_1.SharedPlayerContexts, { timelineContext: timelineState, component: Component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, numberOfSharedAudioTags: 0, initiallyMuted: true, children: (0, jsx_runtime_1.jsx)(emitter_context_js_1.ThumbnailEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(ThumbnailUI_js_1.default, { ref: rootRef, className: className, errorFallback: errorFallback, inputProps: passedInputProps, renderLoading: renderLoading, style: style, overflowVisible: overflowVisible }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.IsPlayerContextProvider, { children: (0, jsx_runtime_1.jsx)(SharedPlayerContext_js_1.SharedPlayerContexts, { timelineContext: timelineState, component: Component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, numberOfSharedAudioTags: 0, initiallyMuted: true, children: (0, jsx_runtime_1.jsx)(emitter_context_js_1.ThumbnailEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(ThumbnailUI_js_1.default, { ref: rootRef, className: className, errorFallback: errorFallback, inputProps: passedInputProps, renderLoading: renderLoading, style: style, overflowVisible: overflowVisible, overrideInternalClassName: overrideInternalClassName }) }) }) }));
 };
 const forward = react_1.forwardRef;
 /**

package/dist/cjs/ThumbnailUI.d.ts

@@ -8,5 +8,6 @@ declare const _default: React.ForwardRefExoticComponent<{
     readonly renderLoading: RenderLoading | undefined;
     readonly className: string | undefined;
     readonly overflowVisible: boolean;
+    readonly overrideInternalClassName: string | undefined;
 } & React.RefAttributes<ThumbnailMethods>>;
 export default _default;

package/dist/cjs/ThumbnailUI.js

@@ -38,7 +38,7 @@ if (reactVersion === '0') {
     throw new Error(`Version ${reactVersion} of "react" is not supported by Remotion`);
 }
 const doesReactVersionSupportSuspense = parseInt(reactVersion, 10) >= 18;
-const ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, className, overflowVisible }, ref) => {
+const ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, className, overflowVisible, overrideInternalClassName, }, ref) => {
     var _a, _b;
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const video = remotion_1.Internals.useVideo();
@@ -112,7 +112,7 @@ const ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, classNam
     if (!config) {
         return null;
     }
-    const content = ((0, jsx_runtime_1.jsx)("div", { style: outer, 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)(remotion_1.Internals.CurrentScaleContext.Provider, { value: currentScaleContext, children: (0, jsx_runtime_1.jsx)(VideoComponent, { ...((_b = video === null || video === void 0 ? void 0 : video.props) !== null && _b !== void 0 ? _b : {}), ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}) }) }) })) : null }) }));
+    const content = ((0, jsx_runtime_1.jsx)("div", { style: outer, children: (0, jsx_runtime_1.jsx)("div", { style: containerStyle, className: (0, player_css_classname_js_1.playerCssClassname)(overrideInternalClassName), children: VideoComponent ? ((0, jsx_runtime_1.jsx)(error_boundary_js_1.ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.CurrentScaleContext.Provider, { value: currentScaleContext, children: (0, jsx_runtime_1.jsx)(VideoComponent, { ...((_b = video === null || video === void 0 ? void 0 : video.props) !== null && _b !== void 0 ? _b : {}), ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}) }) }) })) : 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/index.d.ts

@@ -30,16 +30,16 @@ export declare const PlayerInternals: {
         isPlaying: () => boolean;
         hasPlayed: boolean;
         isBuffering: () => boolean;
-        remotionInternal_currentFrameRef: React.MutableRefObject<number>;
+        toggle: (e?: import("react").SyntheticEvent | PointerEvent) => void;
     };
-    usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, frameRef, browserMediaControlsBehavior, }: {
+    usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, browserMediaControlsBehavior, getCurrentFrame, }: {
         loop: boolean;
         playbackRate: number;
         moveToBeginningWhenEnded: boolean;
         inFrame: number | null;
         outFrame: number | null;
-        frameRef: React.MutableRefObject<number>;
         browserMediaControlsBehavior: import("./browser-mediasession.js").BrowserMediaControlsBehavior;
+        getCurrentFrame: import("./use-frame-imperative.js").GetCurrentFrame;
     }) => void;
     useElementSize: (ref: React.RefObject<HTMLElement>, options: {
         triggerOnWindowResize: boolean;
@@ -66,4 +66,5 @@ export declare const PlayerInternals: {
     BufferingIndicator: import("react").FC<{
         readonly type: "player" | "studio";
     }>;
+    useFrameImperative: () => import("./use-frame-imperative.js").GetCurrentFrame;
 };

package/dist/cjs/index.js

@@ -7,6 +7,7 @@ const calculate_scale_js_1 = require("./calculate-scale.js");
 const emitter_context_js_1 = require("./emitter-context.js");
 const EmitterProvider_js_1 = require("./EmitterProvider.js");
 const event_emitter_js_1 = require("./event-emitter.js");
+const use_frame_imperative_js_1 = require("./use-frame-imperative.js");
 const use_hover_state_js_1 = require("./use-hover-state.js");
 const use_playback_js_1 = require("./use-playback.js");
 const use_player_js_1 = require("./use-player.js");
@@ -26,4 +27,5 @@ exports.PlayerInternals = {
     updateAllElementsSizes: use_element_size_js_1.updateAllElementsSizes,
     PlayerEmitterProvider: EmitterProvider_js_1.PlayerEmitterProvider,
     BufferingIndicator: BufferingIndicator_js_1.BufferingIndicator,
+    useFrameImperative: use_frame_imperative_js_1.useFrameImperative,
 };

package/dist/cjs/player-css-classname.d.ts

@@ -1 +1 @@
-export declare const PLAYER_CSS_CLASSNAME = "__remotion-player";
+export declare const playerCssClassname: (override?: string) => string;

package/dist/cjs/player-css-classname.js

@@ -1,4 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PLAYER_CSS_CLASSNAME = void 0;
-exports.PLAYER_CSS_CLASSNAME = '__remotion-player';
+exports.playerCssClassname = void 0;
+const playerCssClassname = (override) => {
+    return override !== null && override !== void 0 ? override : '__remotion-player';
+};
+exports.playerCssClassname = playerCssClassname;

package/dist/cjs/use-frame-imperative.d.ts

@@ -0,0 +1,2 @@
+export type GetCurrentFrame = () => number;
+export declare const useFrameImperative: () => GetCurrentFrame;

package/dist/cjs/use-frame-imperative.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFrameImperative = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const useFrameImperative = () => {
+    const frame = remotion_1.Internals.Timeline.useTimelinePosition();
+    const frameRef = (0, react_1.useRef)(frame);
+    frameRef.current = frame;
+    const getCurrentFrame = (0, react_1.useCallback)(() => {
+        return frameRef.current;
+    }, []);
+    return getCurrentFrame;
+};
+exports.useFrameImperative = useFrameImperative;

package/dist/cjs/use-playback.d.ts

@@ -1,10 +1,11 @@
 import type { BrowserMediaControlsBehavior } from './browser-mediasession.js';
-export declare const usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, frameRef, browserMediaControlsBehavior, }: {
+import type { GetCurrentFrame } from './use-frame-imperative.js';
+export declare const usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, browserMediaControlsBehavior, getCurrentFrame, }: {
     loop: boolean;
     playbackRate: number;
     moveToBeginningWhenEnded: boolean;
     inFrame: number | null;
     outFrame: number | null;
-    frameRef: React.MutableRefObject<number>;
     browserMediaControlsBehavior: BrowserMediaControlsBehavior;
+    getCurrentFrame: GetCurrentFrame;
 }) => void;

package/dist/cjs/use-playback.js

@@ -8,7 +8,7 @@ const browser_mediasession_js_1 = require("./browser-mediasession.js");
 const calculate_next_frame_js_1 = require("./calculate-next-frame.js");
 const is_backgrounded_js_1 = require("./is-backgrounded.js");
 const use_player_js_1 = require("./use-player.js");
-const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, frameRef, browserMediaControlsBehavior, }) => {
+const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, browserMediaControlsBehavior, getCurrentFrame, }) => {
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
     const { playing, pause, emitter } = (0, use_player_js_1.usePlayer)();
@@ -70,7 +70,7 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
             const time = performance.now() - startedTime;
             const actualLastFrame = outFrame !== null && outFrame !== void 0 ? outFrame : config.durationInFrames - 1;
             const actualFirstFrame = inFrame !== null && inFrame !== void 0 ? inFrame : 0;
-            const currentFrame = frameRef.current;
+            const currentFrame = getCurrentFrame();
             const { nextFrame, framesToAdvance, hasEnded } = (0, calculate_next_frame_js_1.calculateNextFrame)({
                 time,
                 currentFrame,
@@ -82,7 +82,7 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
                 shouldLoop: loop,
             });
             framesAdvanced += framesToAdvance;
-            if (nextFrame !== frameRef.current &&
+            if (nextFrame !== getCurrentFrame() &&
                 (!hasEnded || moveToBeginningWhenEnded)) {
                 setFrame((c) => ({ ...c, [config.id]: nextFrame }));
             }
@@ -147,20 +147,20 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
         outFrame,
         moveToBeginningWhenEnded,
         isBackgroundedRef,
-        frameRef,
+        getCurrentFrame,
         buffering,
         context,
     ]);
     (0, react_1.useEffect)(() => {
         const interval = setInterval(() => {
-            if (lastTimeUpdateEvent.current === frameRef.current) {
+            if (lastTimeUpdateEvent.current === getCurrentFrame()) {
                 return;
             }
-            emitter.dispatchTimeUpdate({ frame: frameRef.current });
-            lastTimeUpdateEvent.current = frameRef.current;
+            emitter.dispatchTimeUpdate({ frame: getCurrentFrame() });
+            lastTimeUpdateEvent.current = getCurrentFrame();
         }, 250);
         return () => clearInterval(interval);
-    }, [emitter, frameRef]);
+    }, [emitter, getCurrentFrame]);
     (0, react_1.useEffect)(() => {
         emitter.dispatchFrameUpdate({ frame });
     }, [emitter, frame]);

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

@@ -15,10 +15,7 @@ type UsePlayerMethods = {
     isPlaying: () => boolean;
     hasPlayed: boolean;
     isBuffering: () => boolean;
-    /**
-     * @deprecated Remotion internal API
-     */
-    remotionInternal_currentFrameRef: React.MutableRefObject<number>;
+    toggle: (e?: SyntheticEvent | PointerEvent) => void;
 };
 export declare const usePlayer: () => UsePlayerMethods;
 export {};

package/dist/cjs/use-player.js

@@ -4,6 +4,7 @@ exports.usePlayer = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const emitter_context_js_1 = require("./emitter-context.js");
+const use_frame_imperative_js_1 = require("./use-frame-imperative.js");
 const usePlayer = () => {
     var _a;
     const [playing, setPlaying, imperativePlaying] = remotion_1.Internals.Timeline.usePlayingState();
@@ -123,6 +124,15 @@ const usePlayer = () => {
             };
         });
     }, [videoId, imperativePlaying, lastFrame, setFrame]);
+    const getCurrentFrame = (0, use_frame_imperative_js_1.useFrameImperative)();
+    const toggle = (0, react_1.useCallback)((e) => {
+        if (imperativePlaying.current) {
+            pause();
+        }
+        else {
+            play(e);
+        }
+    }, [imperativePlaying, pause, play]);
     const returnValue = (0, react_1.useMemo)(() => {
         return {
             frameBack,
@@ -134,27 +144,30 @@ const usePlayer = () => {
             pause,
             seek,
             isFirstFrame,
-            getCurrentFrame: () => frameRef.current,
+            getCurrentFrame,
             isPlaying: () => imperativePlaying.current,
             isBuffering: () => buffering.current,
             pauseAndReturnToPlayStart,
             hasPlayed,
             remotionInternal_currentFrameRef: frameRef,
+            toggle,
         };
     }, [
+        buffering,
+        emitter,
         frameBack,
         frameForward,
+        getCurrentFrame,
+        hasPlayed,
+        imperativePlaying,
+        isFirstFrame,
         isLastFrame,
-        emitter,
-        playing,
-        play,
         pause,
-        seek,
-        isFirstFrame,
         pauseAndReturnToPlayStart,
-        hasPlayed,
-        imperativePlaying,
-        buffering,
+        play,
+        playing,
+        seek,
+        toggle,
     ]);
     return returnValue;
 };