@remotion/player 4.0.172 → 4.0.174

package/dist/cjs/Player.d.ts

@@ -47,6 +47,7 @@ export type PlayerProps<Schema extends AnyZodObject, Props> = {
     readonly posterFillMode?: PosterFillMode;
     readonly bufferStateDelayInMilliseconds?: number;
     readonly hideControlsWhenPointerDoesntMove?: boolean | number;
+    readonly overflowVisible?: boolean;
 } & CompProps<Props> & PropsIfHasProps<Schema, 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, alwaysShowControls = false, initiallyMuted = false, showPlaybackRateControl = false, posterFillMode = 'player-size', bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove = true, ...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, overflowVisible = false, ...componentProps }, ref) => {
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
@@ -140,7 +140,7 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
     const actualInputProps = (0, react_1.useMemo)(() => 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: 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, alwaysShowControls: alwaysShowControls, showPlaybackRateControl: showPlaybackRateControl, bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds !== null && bufferStateDelayInMilliseconds !== void 0 ? bufferStateDelayInMilliseconds : 300, hideControlsWhenPointerDoesntMove: hideControlsWhenPointerDoesntMove }) }) }) }) }));
+                            : 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, overflowVisible: overflowVisible }) }) }) }) }));
 };
 const forward = react_1.forwardRef;
 /**

package/dist/cjs/PlayerControls.d.ts

@@ -1,4 +1,4 @@
-import type { MouseEventHandler, ReactNode } from 'react';
+import type { MouseEventHandler, ReactNode, SyntheticEvent } from 'react';
 import React from 'react';
 import type { usePlayer } from './use-player.js';
 import type { Size } from './utils/use-element-size.js';
@@ -42,6 +42,6 @@ export declare const Controls: React.FC<{
     readonly containerRef: React.RefObject<HTMLDivElement>;
     readonly buffering: boolean;
     readonly hideControlsWhenPointerDoesntMove: boolean | number;
-    readonly onPointerUp: React.PointerEventHandler<HTMLDivElement> | undefined;
+    readonly onPointerDown: ((ev: PointerEvent | SyntheticEvent) => void) | undefined;
     readonly onDoubleClick: MouseEventHandler<HTMLDivElement> | undefined;
 }>;

package/dist/cjs/PlayerControls.js

@@ -47,11 +47,13 @@ const controlsRow = {
     alignItems: 'center',
     justifyContent: 'center',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
 };
 const leftPartStyle = {
     display: 'flex',
     flexDirection: 'row',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
     alignItems: 'center',
 };
 const xSpacer = {
@@ -64,7 +66,7 @@ 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, onPointerUp, onDoubleClick, }) => {
+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, }) => {
     var _a, _b;
     const playButtonRef = (0, react_1.useRef)(null);
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
@@ -158,19 +160,19 @@ const Controls = ({ durationInFrames, isFullscreen, fps, player, showVolumeContr
     }, [showPlaybackRateControl]);
     const ref = (0, react_1.useRef)(null);
     const flexRef = (0, react_1.useRef)(null);
-    const onPointerUpIfContainer = (0, react_1.useCallback)((e) => {
+    const onPointerDownIfContainer = (0, react_1.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);
+            onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(e);
         }
-    }, [onPointerUp]);
+    }, [onPointerDown]);
     const onDoubleClickIfContainer = (0, react_1.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 ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: containerCss, onPointerUp: onPointerUpIfContainer, 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({
+    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,
                                     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, { 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

package/dist/cjs/PlayerSeekBar.js

@@ -21,6 +21,7 @@ const KNOB_SIZE = 12;
 const VERTICAL_PADDING = 4;
 const containerStyle = {
     userSelect: 'none',
+    WebkitUserSelect: 'none',
     paddingTop: VERTICAL_PADDING,
     paddingBottom: VERTICAL_PADDING,
     boxSizing: 'border-box',

package/dist/cjs/PlayerUI.d.ts

@@ -42,5 +42,6 @@ declare const _default: React.ForwardRefExoticComponent<{
     readonly posterFillMode: PosterFillMode;
     readonly bufferStateDelayInMilliseconds: number;
     readonly hideControlsWhenPointerDoesntMove: number | boolean;
+    readonly overflowVisible: boolean;
 } & 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, alwaysShowControls, showPlaybackRateControl, posterFillMode, bufferStateDelayInMilliseconds, hideControlsWhenPointerDoesntMove, }, 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, overflowVisible, }, ref) => {
     var _a, _b, _c;
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const video = remotion_1.Internals.useVideo();
@@ -298,14 +298,20 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
     ]);
     const VideoComponent = video ? video.component : null;
     const outerStyle = (0, react_1.useMemo)(() => {
-        return (0, calculate_scale_js_1.calculateOuterStyle)({ canvasSize, config, style });
-    }, [canvasSize, config, style]);
+        return (0, calculate_scale_js_1.calculateOuterStyle)({ canvasSize, config, style, overflowVisible });
+    }, [canvasSize, config, overflowVisible, style]);
     const outer = (0, react_1.useMemo)(() => {
-        return (0, calculate_scale_js_1.calculateOuter)({ config, layout, scale });
-    }, [config, layout, scale]);
+        return (0, calculate_scale_js_1.calculateOuter)({ config, layout, scale, overflowVisible });
+    }, [config, layout, overflowVisible, scale]);
     const containerStyle = (0, react_1.useMemo)(() => {
-        return (0, calculate_scale_js_1.calculateContainerStyle)({ canvasSize, config, layout, scale });
-    }, [canvasSize, config, layout, scale]);
+        return (0, calculate_scale_js_1.calculateContainerStyle)({
+            canvasSize,
+            config,
+            layout,
+            scale,
+            overflowVisible,
+        });
+    }, [canvasSize, config, layout, overflowVisible, scale]);
     const onError = (0, react_1.useCallback)((error) => {
         player.pause();
         // Pay attention to `this context`
@@ -336,7 +342,7 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
             requestFullscreen();
         }
     }, [exitFullscreen, isFullscreen, requestFullscreen]);
-    const [handleClick, handleDoubleClick] = (0, use_click_prevention_on_double_click_js_1.useClickPreventionOnDoubleClick)(onSingleClick, onDoubleClick, doubleClickToFullscreen && allowFullscreen && supportsFullScreen);
+    const { handlePointerDown, handleDoubleClick } = (0, use_click_prevention_on_double_click_js_1.useClickPreventionOnDoubleClick)(onSingleClick, onDoubleClick, doubleClickToFullscreen && allowFullscreen && supportsFullScreen);
     (0, react_1.useEffect)(() => {
         if (shouldAutoplay) {
             player.play();
@@ -383,11 +389,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, onPointerUp: clickToPlay ? handleClick : 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.ClipComposition, { 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: 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.ClipComposition, { 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,
-                            }, onPointerUp: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null] }) }), shouldShowPoster && posterFillMode === 'player-size' ? ((0, jsx_runtime_1.jsx)("div", { style: outer, onPointerUp: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null, controls ? ((0, jsx_runtime_1.jsx)(PlayerControls_js_1.Controls, { fps: config.fps, durationInFrames: config.durationInFrames, 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] }));
+                            }, 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 ? handlePointerDown : undefined })) : null] }));
     if (is_node_js_1.IS_NODE && !doesReactVersionSupportSuspense) {
         return ((0, jsx_runtime_1.jsx)("div", { ref: container, style: outerStyle, className: className, children: content }));
     }

package/dist/cjs/Thumbnail.d.ts

@@ -11,6 +11,7 @@ type ThumbnailProps<Schema extends AnyZodObject, Props extends Record<string, un
     compositionWidth: number;
     compositionHeight: number;
     fps: number;
+    overflowVisible?: boolean;
     errorFallback?: ErrorFallback;
     renderLoading?: RenderLoading;
     className?: string;

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, ...componentProps }, ref) => {
+const ThumbnailFn = ({ frameToDisplay, style, inputProps, compositionHeight, compositionWidth, durationInFrames, fps, className, errorFallback = () => '⚠️', renderLoading, overflowVisible = false, ...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 }) }) }) }));
+    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 }) }) }) }));
 };
 const forward = react_1.forwardRef;
 /**

package/dist/cjs/ThumbnailUI.d.ts

@@ -7,5 +7,6 @@ declare const _default: React.ForwardRefExoticComponent<{
     errorFallback: ErrorFallback;
     renderLoading: RenderLoading | undefined;
     className: string | undefined;
+    overflowVisible: boolean;
 } & 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 }, ref) => {
+const ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, className, overflowVisible }, ref) => {
     var _a, _b;
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const video = remotion_1.Internals.useVideo();
@@ -70,19 +70,20 @@ const ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, classNam
     }, [scale, thumbnail.emitter]);
     const VideoComponent = video ? video.component : null;
     const outerStyle = (0, react_1.useMemo)(() => {
-        return (0, calculate_scale_js_1.calculateOuterStyle)({ config, style, canvasSize });
-    }, [canvasSize, config, style]);
+        return (0, calculate_scale_js_1.calculateOuterStyle)({ config, style, canvasSize, overflowVisible });
+    }, [canvasSize, config, overflowVisible, style]);
     const outer = (0, react_1.useMemo)(() => {
-        return (0, calculate_scale_js_1.calculateOuter)({ config, layout, scale });
-    }, [config, layout, scale]);
+        return (0, calculate_scale_js_1.calculateOuter)({ config, layout, scale, overflowVisible });
+    }, [config, layout, overflowVisible, scale]);
     const containerStyle = (0, react_1.useMemo)(() => {
         return (0, calculate_scale_js_1.calculateContainerStyle)({
             canvasSize,
             config,
             layout,
             scale,
+            overflowVisible,
         });
-    }, [canvasSize, config, layout, scale]);
+    }, [canvasSize, config, layout, overflowVisible, scale]);
     const onError = (0, react_1.useCallback)((error) => {
         // Pay attention to `this context`
         thumbnail.emitter.dispatchError(error);

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

@@ -13,21 +13,24 @@ export declare const calculateCanvasTransformation: ({ previewSize, compositionW
     compositionHeight: number;
     canvasSize: Size;
 }) => Layout;
-export declare const calculateOuterStyle: ({ config, style, canvasSize, }: {
+export declare const calculateOuterStyle: ({ config, style, canvasSize, overflowVisible, }: {
     config: VideoConfig | null;
     style: React.CSSProperties | undefined;
     canvasSize: Size | null;
+    overflowVisible: boolean;
 }) => React.CSSProperties;
-export declare const calculateContainerStyle: ({ config, canvasSize, layout, scale, }: {
+export declare const calculateContainerStyle: ({ config, canvasSize, layout, scale, overflowVisible, }: {
     config: VideoConfig | null;
     canvasSize: Size | null;
     layout: Layout | null;
     scale: number;
+    overflowVisible: boolean;
 }) => React.CSSProperties;
-export declare const calculateOuter: ({ layout, scale, config, }: {
+export declare const calculateOuter: ({ layout, scale, config, overflowVisible, }: {
     layout: Layout | null;
     scale: number;
     config: VideoConfig | null;
+    overflowVisible: boolean;
 }) => {
     readonly width?: undefined;
     readonly height?: undefined;
@@ -45,6 +48,6 @@ export declare const calculateOuter: ({ layout, scale, config, }: {
     readonly position: "absolute";
     readonly left: number;
     readonly top: number;
-    readonly overflow: "hidden";
+    readonly overflow: "hidden" | "visible";
 };
 export {};

package/dist/cjs/calculate-scale.js

@@ -26,13 +26,13 @@ const calculateCanvasTransformation = ({ previewSize, compositionWidth, composit
     };
 };
 exports.calculateCanvasTransformation = calculateCanvasTransformation;
-const calculateOuterStyle = ({ config, style, canvasSize, }) => {
+const calculateOuterStyle = ({ config, style, canvasSize, overflowVisible, }) => {
     if (!config) {
         return {};
     }
     return {
         position: 'relative',
-        overflow: 'hidden',
+        overflow: overflowVisible ? 'visible' : 'hidden',
         ...(0, calculate_player_size_js_1.calculatePlayerSize)({
             compositionHeight: config.height,
             compositionWidth: config.width,
@@ -44,7 +44,7 @@ const calculateOuterStyle = ({ config, style, canvasSize, }) => {
     };
 };
 exports.calculateOuterStyle = calculateOuterStyle;
-const calculateContainerStyle = ({ config, canvasSize, layout, scale, }) => {
+const calculateContainerStyle = ({ config, canvasSize, layout, scale, overflowVisible, }) => {
     if (!config || !canvasSize || !layout) {
         return {};
     }
@@ -56,11 +56,11 @@ const calculateContainerStyle = ({ config, canvasSize, layout, scale, }) => {
         transform: `scale(${scale})`,
         marginLeft: layout.xCorrection,
         marginTop: layout.yCorrection,
-        overflow: 'hidden',
+        overflow: overflowVisible ? 'visible' : 'hidden',
     };
 };
 exports.calculateContainerStyle = calculateContainerStyle;
-const calculateOuter = ({ layout, scale, config, }) => {
+const calculateOuter = ({ layout, scale, config, overflowVisible, }) => {
     if (!layout || !config) {
         return {};
     }
@@ -73,7 +73,7 @@ const calculateOuter = ({ layout, scale, config, }) => {
         position: 'absolute',
         left: centerX,
         top: centerY,
-        overflow: 'hidden',
+        overflow: overflowVisible ? 'visible' : 'hidden',
     };
 };
 exports.calculateOuter = calculateOuter;

package/dist/cjs/index.d.ts

@@ -19,7 +19,7 @@ export declare const PlayerInternals: {
         isFirstFrame: boolean;
         emitter: PlayerEmitter;
         playing: boolean;
-        play: (e?: import("react").SyntheticEvent<Element, Event> | undefined) => void;
+        play: (e?: PointerEvent | import("react").SyntheticEvent<Element, Event> | undefined) => void;
         pause: () => void;
         pauseAndReturnToPlayStart: () => void;
         seek: (newFrame: number) => void;

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

@@ -7,7 +7,7 @@ type UsePlayerMethods = {
     isFirstFrame: boolean;
     emitter: PlayerEmitter;
     playing: boolean;
-    play: (e?: SyntheticEvent) => void;
+    play: (e?: SyntheticEvent | PointerEvent) => void;
     pause: () => void;
     pauseAndReturnToPlayStart: () => void;
     seek: (newFrame: number) => void;

package/dist/cjs/utils/use-click-prevention-on-double-click.d.ts

@@ -1,3 +1,7 @@
 import type { SyntheticEvent } from 'react';
-declare const useClickPreventionOnDoubleClick: (onClick: (e: SyntheticEvent) => void, onDoubleClick: () => void, doubleClickToFullscreen: boolean) => [(e: SyntheticEvent) => void, () => void];
+type ReturnVal = {
+    handlePointerDown: (e: SyntheticEvent | PointerEvent) => void;
+    handleDoubleClick: () => void;
+};
+declare const useClickPreventionOnDoubleClick: (onClick: (e: PointerEvent | SyntheticEvent) => void, onDoubleClick: () => void, doubleClickToFullscreen: boolean) => ReturnVal;
 export { useClickPreventionOnDoubleClick };

package/dist/cjs/utils/use-click-prevention-on-double-click.js

@@ -9,7 +9,9 @@ const useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFu
     const api = (0, use_cancellable_promises_js_1.useCancellablePromises)();
     const handleClick = (0, react_1.useCallback)(async (e) => {
         // UnSupported double click on touch.(mobile)
-        if (e.nativeEvent.pointerType === 'touch') {
+        if (e instanceof PointerEvent
+            ? e.pointerType === 'touch'
+            : e.nativeEvent.pointerType === 'touch') {
             onClick(e);
             return;
         }
@@ -29,16 +31,23 @@ const useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFu
             }
         }
     }, [api, onClick]);
+    const handlePointerDown = (0, react_1.useCallback)(() => {
+        document.addEventListener('pointerup', (newEvt) => {
+            handleClick(newEvt);
+        }, {
+            once: true,
+        });
+    }, [handleClick]);
     const handleDoubleClick = (0, react_1.useCallback)(() => {
         api.clearPendingPromises();
         onDoubleClick();
     }, [api, onDoubleClick]);
     const returnValue = (0, react_1.useMemo)(() => {
         if (!doubleClickToFullscreen) {
-            return [onClick, () => undefined];
+            return { handlePointerDown: onClick, handleDoubleClick: () => undefined };
         }
-        return [handleClick, handleDoubleClick];
-    }, [doubleClickToFullscreen, handleClick, handleDoubleClick, onClick]);
+        return { handlePointerDown, handleDoubleClick };
+    }, [doubleClickToFullscreen, handleDoubleClick, handlePointerDown, onClick]);
     return returnValue;
 };
 exports.useClickPreventionOnDoubleClick = useClickPreventionOnDoubleClick;