@remotion/player 4.0.122 → 4.0.124

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/MediaVolumeSlider.js

@@ -12,7 +12,7 @@ export const MediaVolumeSlider = ({ displayVerticalVolumeSlider }) => {
     const [focused, setFocused] = useState(false);
     const parentDivRef = useRef(null);
     const inputRef = useRef(null);
-    const hover = useHoverState(parentDivRef);
+    const hover = useHoverState(parentDivRef, false);
     // Need to import it from React to fix React 17 ESM support.
     const randomId = 
     // eslint-disable-next-line react-hooks/rules-of-hooks

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/Player.d.ts

@@ -46,6 +46,7 @@ export type PlayerProps<Schema extends AnyZodObject, Props> = {
     showPlaybackRateControl?: boolean | number[];
     posterFillMode?: PosterFillMode;
     bufferStateDelayInMilliseconds?: number;
+    hideControlsWhenPointerDoesntMove?: boolean | number;
 } & CompProps<Props> & PropsIfHasProps<Schema, Props>;
 export declare const componentOrNullIfLazy: <Props>(props: CompProps<Props>) => ComponentType<Props> | null;
 /**

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/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, showPosterWhenBuffering, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, renderFullscreenButton, renderPlayPauseButton, alwaysShowControls = false, initiallyMuted = false, showPlaybackRateControl = false, posterFillMode = 'player-size', bufferStateDelayInMilliseconds, ...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, alwaysShowControls = false, initiallyMuted = false, showPlaybackRateControl = false, posterFillMode = 'player-size', bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove = true, ...componentProps }, ref) => {
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         useLayoutEffect(() => {
@@ -133,7 +133,7 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
     const actualInputProps = useMemo(() => inputProps !== null && inputProps !== void 0 ? inputProps : {}, [inputProps]);
     return (_jsx(Internals.IsPlayerContextProvider, { children: _jsx(SharedPlayerContexts, { timelineContext: timelineContextValue, component: component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, numberOfSharedAudioTags: numberOfSharedAudioTags, initiallyMuted: initiallyMuted, children: _jsx(Internals.Timeline.SetTimelineContext.Provider, { value: setTimelineContextValue, children: _jsx(PlayerEmitterProvider, { currentPlaybackRate: currentPlaybackRate, children: _jsx(PlayerUI, { 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, alwaysShowControls: alwaysShowControls, showPlaybackRateControl: showPlaybackRateControl, bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds !== null && bufferStateDelayInMilliseconds !== void 0 ? bufferStateDelayInMilliseconds : 300 }) }) }) }) }));
+                            : 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, alwaysShowControls: alwaysShowControls, showPlaybackRateControl: showPlaybackRateControl, bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds !== null && bufferStateDelayInMilliseconds !== void 0 ? bufferStateDelayInMilliseconds : 300, hideControlsWhenPointerDoesntMove: hideControlsWhenPointerDoesntMove }) }) }) }) }));
 };
 const forward = forwardRef;
 /**

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerControls.d.ts

@@ -41,4 +41,7 @@ export declare const Controls: React.FC<{
     showPlaybackRateControl: boolean | number[];
     containerRef: React.RefObject<HTMLDivElement>;
     buffering: boolean;
+    hideControlsWhenPointerDoesntMove: boolean | number;
+    onPointerUp: React.PointerEventHandler<HTMLDivElement> | undefined;
+    onDoubleClick: MouseEventHandler<HTMLDivElement> | undefined;
 }>;

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerControls.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Internals } from 'remotion';
 import { DefaultPlayPauseButton } from './DefaultPlayPauseButton.js';
 import { formatTime } from './format-time.js';
@@ -61,12 +61,12 @@ const flex1 = {
     flex: 1,
 };
 const fullscreen = {};
-export const Controls = ({ durationInFrames, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, initiallyShowControls, canvasSize, renderPlayPauseButton, renderFullscreenButton, alwaysShowControls, showPlaybackRateControl, containerRef, buffering, }) => {
+export const Controls = ({ durationInFrames, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, initiallyShowControls, canvasSize, renderPlayPauseButton, renderFullscreenButton, alwaysShowControls, showPlaybackRateControl, containerRef, buffering, hideControlsWhenPointerDoesntMove, onPointerUp, onDoubleClick, }) => {
     var _a, _b;
     const playButtonRef = useRef(null);
     const frame = Internals.Timeline.useTimelinePosition();
     const [supportsFullscreen, setSupportsFullscreen] = useState(false);
-    const hovered = useHoverState(containerRef);
+    const hovered = useHoverState(containerRef, hideControlsWhenPointerDoesntMove);
     const { maxTimeLabelWidth, displayVerticalVolumeSlider } = useVideoControlsResize({
         allowFullscreen,
         playerWidth: (_a = canvasSize === null || canvasSize === void 0 ? void 0 : canvasSize.width) !== null && _a !== void 0 ? _a : 0,
@@ -153,7 +153,21 @@ export const Controls = ({ durationInFrames, isFullscreen, fps, player, showVolu
         }
         return null;
     }, [showPlaybackRateControl]);
-    return (_jsxs("div", { style: containerCss, children: [_jsxs("div", { style: controlsRow, children: [_jsxs("div", { style: leftPartStyle, children: [_jsx("button", { ref: playButtonRef, type: "button", style: 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 ? (_jsx(DefaultPlayPauseButton, { buffering: buffering, playing: player.playing })) : ((_b = renderPlayPauseButton({
+    const ref = useRef(null);
+    const flexRef = useRef(null);
+    const onPointerUpIfContainer = useCallback((e) => {
+        // Only if pressing the container
+        if (e.target === ref.current || e.target === flexRef.current) {
+            onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp(e);
+        }
+    }, [onPointerUp]);
+    const onDoubleClickIfContainer = useCallback((e) => {
+        // Only if pressing the container
+        if (e.target === ref.current || e.target === flexRef.current) {
+            onDoubleClick === null || onDoubleClick === void 0 ? void 0 : onDoubleClick(e);
+        }
+    }, [onDoubleClick]);
+    return (_jsxs("div", { ref: ref, style: containerCss, onPointerUp: onPointerUpIfContainer, onDoubleClick: onDoubleClickIfContainer, children: [_jsxs("div", { ref: flexRef, style: controlsRow, children: [_jsxs("div", { style: leftPartStyle, children: [_jsx("button", { ref: playButtonRef, type: "button", style: 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 ? (_jsx(DefaultPlayPauseButton, { buffering: buffering, playing: player.playing })) : ((_b = renderPlayPauseButton({
                                     playing: player.playing,
                                     isBuffering: buffering,
                                 })) !== null && _b !== void 0 ? _b : (_jsx(DefaultPlayPauseButton, { buffering: buffering, playing: player.playing }))) }), showVolumeControls ? (_jsxs(_Fragment, { children: [_jsx("div", { style: xSpacer }), _jsx(MediaVolumeSlider, { displayVerticalVolumeSlider: displayVerticalVolumeSlider })] })) : null, _jsx("div", { style: xSpacer }), _jsxs("div", { style: timeLabel, children: [formatTime(frame / fps), " / ", formatTime(durationInFrames / fps)] }), _jsx("div", { style: xSpacer })] }), _jsx("div", { style: flex1 }), playbackRates && canvasSize && (_jsx(PlaybackrateControl, { canvasSize: canvasSize, playbackRates: playbackRates })), playbackRates && supportsFullscreen && allowFullscreen ? (_jsx("div", { style: xSpacer })) : null, _jsx("div", { style: fullscreen, children: supportsFullscreen && allowFullscreen ? (_jsx("button", { type: "button", "aria-label": isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', title: isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', style: playerButtonStyle, onClick: isFullscreen

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerSeekBar.js

@@ -41,7 +41,7 @@ const findBodyInWhichDivIsLocated = (div) => {
 export const PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFrame }) => {
     var _a;
     const containerRef = useRef(null);
-    const barHovered = useHoverState(containerRef);
+    const barHovered = useHoverState(containerRef, false);
     const size = useElementSize(containerRef, {
         triggerOnWindowResize: true,
         shouldApplyCssTransforms: true,

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerUI.d.ts

@@ -41,5 +41,6 @@ declare const _default: React.ForwardRefExoticComponent<{
     showPlaybackRateControl: boolean | number[];
     posterFillMode: PosterFillMode;
     bufferStateDelayInMilliseconds: number;
+    hideControlsWhenPointerDoesntMove: number | boolean;
 } & React.RefAttributes<PlayerRef>>;
 export default _default;

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerUI.js

@@ -15,7 +15,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, alwaysShowControls, showPlaybackRateControl, posterFillMode, bufferStateDelayInMilliseconds, }, 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, alwaysShowControls, showPlaybackRateControl, posterFillMode, bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove, }, ref) => {
     var _a, _b, _c;
     const config = Internals.useUnsafeVideoConfig();
     const video = Internals.useVideo();
@@ -28,6 +28,12 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
     const [shouldAutoplay, setShouldAutoPlay] = useState(autoPlay);
     const [isFullscreen, setIsFullscreen] = useState(() => false);
     const [seeking, setSeeking] = useState(false);
+    const supportsFullScreen = useMemo(() => {
+        if (typeof document === 'undefined') {
+            return false;
+        }
+        return Boolean(document.fullscreenEnabled || document.webkitFullscreenEnabled);
+    }, []);
     const player = usePlayer();
     usePlayback({
         loop,
@@ -71,7 +77,6 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
         if (!allowFullscreen) {
             throw new Error('allowFullscreen is false');
         }
-        const supportsFullScreen = document.fullscreenEnabled || document.webkitFullscreenEnabled;
         if (!supportsFullScreen) {
             throw new Error('Browser doesnt support fullscreen');
         }
@@ -84,7 +89,7 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
         else {
             container.current.requestFullscreen();
         }
-    }, [allowFullscreen]);
+    }, [allowFullscreen, supportsFullScreen]);
     const exitFullscreen = useCallback(() => {
         if (document.webkitExitFullscreen) {
             document.webkitExitFullscreen();
@@ -304,7 +309,7 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
             requestFullscreen();
         }
     }, [exitFullscreen, isFullscreen, requestFullscreen]);
-    const [handleClick, handleDoubleClick] = useClickPreventionOnDoubleClick(onSingleClick, onDoubleClick, doubleClickToFullscreen);
+    const [handleClick, handleDoubleClick] = useClickPreventionOnDoubleClick(onSingleClick, onDoubleClick, doubleClickToFullscreen && allowFullscreen && supportsFullScreen);
     useEffect(() => {
         if (shouldAutoplay) {
             player.play();
@@ -351,11 +356,11 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
             showPosterWhenBuffering && showBufferIndicator && player.isPlaying(),
         ].some(Boolean);
     const { left, top, width, height, ...outerWithoutScale } = outer;
-    const content = (_jsxs(_Fragment, { children: [_jsx("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: _jsxs("div", { style: containerStyle, className: PLAYER_CSS_CLASSNAME, children: [VideoComponent ? (_jsx(ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: _jsx(Internals.ClipComposition, { children: _jsx(Internals.CurrentScaleContext.Provider, { value: currentScale, children: _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' ? (_jsx("div", { style: {
+    const content = (_jsxs(_Fragment, { children: [_jsx("div", { style: outer, onPointerUp: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: _jsxs("div", { style: containerStyle, className: PLAYER_CSS_CLASSNAME, children: [VideoComponent ? (_jsx(ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: _jsx(Internals.ClipComposition, { children: _jsx(Internals.CurrentScaleContext.Provider, { value: currentScale, children: _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' ? (_jsx("div", { style: {
                                 ...outerWithoutScale,
                                 width: config.width,
                                 height: config.height,
-                            }, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null] }) }), shouldShowPoster && posterFillMode === 'player-size' ? (_jsx("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null, controls ? (_jsx(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 })) : null] }));
+                            }, onPointerUp: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null] }) }), shouldShowPoster && posterFillMode === 'player-size' ? (_jsx("div", { style: outer, onPointerUp: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null, controls ? (_jsx(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, onPointerUp: clickToPlay ? handleClick : undefined })) : null] }));
     if (IS_NODE && !doesReactVersionSupportSuspense) {
         return (_jsx("div", { ref: container, style: outerStyle, className: className, children: content }));
     }

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/Thumbnail.d.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, MutableRefObject } from 'react';
+import type { CSSProperties } from 'react';
 import type { CompProps } from 'remotion';
 import type { AnyZodObject } from 'zod';
 import type { ThumbnailMethods } from './player-methods.js';
@@ -15,7 +15,6 @@ type ThumbnailProps<Schema extends AnyZodObject, Props extends Record<string, un
     renderLoading?: RenderLoading;
     className?: string;
 };
-export declare const ThumbnailFn: <Schema extends AnyZodObject, Props extends Record<string, unknown>>({ frameToDisplay, style, inputProps, compositionHeight, compositionWidth, durationInFrames, fps, className, errorFallback, renderLoading, ...componentProps }: ThumbnailProps<Schema, Props>, ref: MutableRefObject<ThumbnailMethods>) => import("react/jsx-runtime.js").JSX.Element;
 /**
  * @description A component which can be rendered in a regular React App (for example: Next.js, Vite) to display a single frame of a video.
  * @see [Documentation](https://www.remotion.dev/docs/player/thumbnail)

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/Thumbnail.js

@@ -5,7 +5,7 @@ import { ThumbnailEmitterContext } from './emitter-context.js';
 import { ThumbnailEmitter } from './event-emitter.js';
 import { PLAYER_COMP_ID, SharedPlayerContexts } from './SharedPlayerContext.js';
 import ThumbnailUI from './ThumbnailUI.js';
-export const ThumbnailFn = ({ frameToDisplay, style, inputProps, compositionHeight, compositionWidth, durationInFrames, fps, className, errorFallback = () => '⚠️', renderLoading, ...componentProps }, ref) => {
+const ThumbnailFn = ({ frameToDisplay, style, inputProps, compositionHeight, compositionWidth, durationInFrames, fps, className, errorFallback = () => '⚠️', renderLoading, ...componentProps }, ref) => {
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         useLayoutEffect(() => {

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/ThumbnailUI.js

@@ -60,8 +60,6 @@ const ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, classNam
         // Pay attention to `this context`
         thumbnail.emitter.dispatchError(error);
     }, [thumbnail.emitter]);
-    const rootRef = useRef(null);
-    useImperativeHandle(ref, () => rootRef.current, []);
     const loadingMarkup = useMemo(() => {
         return renderLoading
             ? renderLoading({

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/error-boundary.d.ts

@@ -15,5 +15,5 @@ export declare class ErrorBoundary extends React.Component<{
         hasError: Error;
     };
     componentDidCatch(error: Error): void;
-    render(): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | null | undefined;
+    render(): string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
 }

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/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 { PlayerMethods, PlayerRef, ThumbnailMethods, ThumbnailRef, } from './player-methods.js';
@@ -52,7 +51,7 @@ export declare const PlayerInternals: {
         yCorrection: number;
         scale: number;
     };
-    useHoverState: (ref: import("react").RefObject<HTMLDivElement>) => boolean;
+    useHoverState: (ref: import("react").RefObject<HTMLDivElement>, hideControlsWhenPointerDoesntMove: number | boolean) => boolean;
     updateAllElementsSizes: () => void;
     PlayerEmitterProvider: import("react").FC<{
         children: import("react").ReactNode;

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/is-backgrounded.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const useIsBackgrounded: () => import("react").MutableRefObject<boolean>;

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-hover-state.d.ts

@@ -1 +1 @@
-export declare const useHoverState: (ref: React.RefObject<HTMLDivElement>) => boolean;
+export declare const useHoverState: (ref: React.RefObject<HTMLDivElement>, hideControlsWhenPointerDoesntMove: boolean | number) => boolean;

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/use-hover-state.js

@@ -1,23 +1,43 @@
 import { useEffect, useState } from 'react';
-export const useHoverState = (ref) => {
-    const [hovered, stetHovered] = useState(false);
+export const useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
+    const [hovered, setHovered] = useState(false);
     useEffect(() => {
         const { current } = ref;
         if (!current) {
             return;
         }
+        let hoverTimeout;
+        const addHoverTimeout = () => {
+            if (hideControlsWhenPointerDoesntMove) {
+                clearTimeout(hoverTimeout);
+                hoverTimeout = setTimeout(() => {
+                    setHovered(false);
+                }, hideControlsWhenPointerDoesntMove === true
+                    ? 3000
+                    : hideControlsWhenPointerDoesntMove);
+            }
+        };
         const onHover = () => {
-            stetHovered(true);
+            setHovered(true);
+            addHoverTimeout();
         };
         const onLeave = () => {
-            stetHovered(false);
+            setHovered(false);
+            clearTimeout(hoverTimeout);
+        };
+        const onMove = () => {
+            setHovered(true);
+            addHoverTimeout();
         };
         current.addEventListener('mouseenter', onHover);
         current.addEventListener('mouseleave', onLeave);
+        current.addEventListener('mousemove', onMove);
         return () => {
             current.removeEventListener('mouseenter', onHover);
-            current.removeEventListener('mouseenter', onLeave);
+            current.removeEventListener('mouseleave', onLeave);
+            current.removeEventListener('mousemove', onMove);
+            clearTimeout(hoverTimeout);
         };
-    }, [ref]);
+    }, [hideControlsWhenPointerDoesntMove, ref]);
     return hovered;
 };

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-click-prevention-on-double-click.js

@@ -5,6 +5,11 @@ import { useCancellablePromises } from './use-cancellable-promises.js';
 const useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFullscreen) => {
     const api = useCancellablePromises();
     const handleClick = useCallback(async (e) => {
+        // UnSupported double click on touch.(mobile)
+        if (e.nativeEvent.pointerType === 'touch') {
+            onClick(e);
+            return;
+        }
         api.clearPendingPromises();
         const waitForClick = cancellablePromise(delay(200));
         api.appendPendingPromise(waitForClick);
@@ -27,16 +32,10 @@ const useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFu
     }, [api, onDoubleClick]);
     const returnValue = useMemo(() => {
         if (!doubleClickToFullscreen) {
-            return [onClick, onDoubleClick];
+            return [onClick, () => undefined];
         }
         return [handleClick, handleDoubleClick];
-    }, [
-        doubleClickToFullscreen,
-        handleClick,
-        handleDoubleClick,
-        onClick,
-        onDoubleClick,
-    ]);
+    }, [doubleClickToFullscreen, handleClick, handleDoubleClick, onClick]);
     return returnValue;
 };
 export { useClickPreventionOnDoubleClick };

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/utils/use-component-visible.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export default function useComponentVisible(initialIsVisible: boolean): {
     ref: import("react").RefObject<HTMLDivElement>;
     isComponentVisible: boolean;