@remotion/player 4.0.172 → 4.0.173

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;

package/dist/esm/index.mjs

@@ -253,14 +253,15 @@ var calculateCanvasTransformation = ({
 var calculateOuterStyle = ({
   config,
   style,
-  canvasSize
+  canvasSize,
+  overflowVisible
 }) => {
   if (!config) {
     return {};
   }
   return {
     position: "relative",
-    overflow: "hidden",
+    overflow: overflowVisible ? "visible" : "hidden",
     ...calculatePlayerSize({
       compositionHeight: config.height,
       compositionWidth: config.width,
@@ -275,7 +276,8 @@ var calculateContainerStyle = ({
   config,
   canvasSize,
   layout,
-  scale
+  scale,
+  overflowVisible
 }) => {
   if (!config || !canvasSize || !layout) {
     return {};
@@ -288,13 +290,14 @@ var calculateContainerStyle = ({
     transform: `scale(${scale})`,
     marginLeft: layout.xCorrection,
     marginTop: layout.yCorrection,
-    overflow: "hidden"
+    overflow: overflowVisible ? "visible" : "hidden"
   };
 };
 var calculateOuter = ({
   layout,
   scale,
-  config
+  config,
+  overflowVisible
 }) => {
   if (!layout || !config) {
     return {};
@@ -308,7 +311,7 @@ var calculateOuter = ({
     position: "absolute",
     left: centerX,
     top: centerY,
-    overflow: "hidden"
+    overflow: overflowVisible ? "visible" : "hidden"
   };
 };
 
@@ -1455,6 +1458,7 @@ var KNOB_SIZE2 = 12;
 var VERTICAL_PADDING = 4;
 var containerStyle = {
   userSelect: "none",
+  WebkitUserSelect: "none",
   paddingTop: VERTICAL_PADDING,
   paddingBottom: VERTICAL_PADDING,
   boxSizing: "border-box",
@@ -1692,12 +1696,14 @@ var controlsRow = {
   width: "100%",
   alignItems: "center",
   justifyContent: "center",
-  userSelect: "none"
+  userSelect: "none",
+  WebkitUserSelect: "none"
 };
 var leftPartStyle = {
   display: "flex",
   flexDirection: "row",
   userSelect: "none",
+  WebkitUserSelect: "none",
   alignItems: "center"
 };
 var xSpacer = {
@@ -1733,7 +1739,7 @@ var Controls = ({
   containerRef,
   buffering,
   hideControlsWhenPointerDoesntMove,
-  onPointerUp,
+  onPointerDown,
   onDoubleClick
 }) => {
   const playButtonRef = useRef7(null);
@@ -1823,11 +1829,11 @@ var Controls = ({
   }, [showPlaybackRateControl]);
   const ref = useRef7(null);
   const flexRef = useRef7(null);
-  const onPointerUpIfContainer = useCallback6((e) => {
+  const onPointerDownIfContainer = useCallback6((e) => {
     if (e.target === ref.current || e.target === flexRef.current) {
-      onPointerUp?.(e);
+      onPointerDown?.(e);
     }
-  }, [onPointerUp]);
+  }, [onPointerDown]);
   const onDoubleClickIfContainer = useCallback6((e) => {
     if (e.target === ref.current || e.target === flexRef.current) {
       onDoubleClick?.(e);
@@ -1836,7 +1842,7 @@ var Controls = ({
   return jsxs6("div", {
     ref,
     style: containerCss,
-    onPointerUp: onPointerUpIfContainer,
+    onPointerDown: onPointerDownIfContainer,
     onDoubleClick: onDoubleClickIfContainer,
     children: [
       jsxs6("div", {
@@ -2024,7 +2030,7 @@ var useCancellablePromises = () => {
 var useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFullscreen) => {
   const api = useCancellablePromises();
   const handleClick = useCallback8(async (e) => {
-    if (e.nativeEvent.pointerType === "touch") {
+    if (e instanceof PointerEvent ? e.pointerType === "touch" : e.nativeEvent.pointerType === "touch") {
       onClick(e);
       return;
     }
@@ -2043,18 +2049,25 @@ var useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFull
       }
     }
   }, [api, onClick]);
+  const handlePointerDown = useCallback8(() => {
+    document.addEventListener("pointerup", (newEvt) => {
+      handleClick(newEvt);
+    }, {
+      once: true
+    });
+  }, [handleClick]);
   const handleDoubleClick = useCallback8(() => {
     api.clearPendingPromises();
     onDoubleClick();
   }, [api, onDoubleClick]);
   const returnValue = useMemo9(() => {
     if (!doubleClickToFullscreen) {
-      return [onClick, () => {
+      return { handlePointerDown: onClick, handleDoubleClick: () => {
         return;
-      }];
+      } };
     }
-    return [handleClick, handleDoubleClick];
-  }, [doubleClickToFullscreen, handleClick, handleDoubleClick, onClick]);
+    return { handlePointerDown, handleDoubleClick };
+  }, [doubleClickToFullscreen, handleDoubleClick, handlePointerDown, onClick]);
   return returnValue;
 };
 
@@ -2099,7 +2112,8 @@ var PlayerUI = ({
   showPlaybackRateControl,
   posterFillMode,
   bufferStateDelayInMilliseconds,
-  hideControlsWhenPointerDoesntMove
+  hideControlsWhenPointerDoesntMove,
+  overflowVisible
 }, ref) => {
   const config = Internals10.useUnsafeVideoConfig();
   const video = Internals10.useVideo();
@@ -2348,14 +2362,20 @@ var PlayerUI = ({
   ]);
   const VideoComponent = video ? video.component : null;
   const outerStyle = useMemo10(() => {
-    return calculateOuterStyle({ canvasSize, config, style });
-  }, [canvasSize, config, style]);
+    return calculateOuterStyle({ canvasSize, config, style, overflowVisible });
+  }, [canvasSize, config, overflowVisible, style]);
   const outer = useMemo10(() => {
-    return calculateOuter({ config, layout, scale });
-  }, [config, layout, scale]);
+    return calculateOuter({ config, layout, scale, overflowVisible });
+  }, [config, layout, overflowVisible, scale]);
   const containerStyle3 = useMemo10(() => {
-    return calculateContainerStyle({ canvasSize, config, layout, scale });
-  }, [canvasSize, config, layout, scale]);
+    return calculateContainerStyle({
+      canvasSize,
+      config,
+      layout,
+      scale,
+      overflowVisible
+    });
+  }, [canvasSize, config, layout, overflowVisible, scale]);
   const onError = useCallback9((error) => {
     player.pause();
     player.emitter.dispatchError(error);
@@ -2384,7 +2404,7 @@ var PlayerUI = ({
       requestFullscreen();
     }
   }, [exitFullscreen, isFullscreen, requestFullscreen]);
-  const [handleClick, handleDoubleClick] = useClickPreventionOnDoubleClick(onSingleClick, onDoubleClick, doubleClickToFullscreen && allowFullscreen && supportsFullScreen);
+  const { handlePointerDown, handleDoubleClick } = useClickPreventionOnDoubleClick(onSingleClick, onDoubleClick, doubleClickToFullscreen && allowFullscreen && supportsFullScreen);
   useEffect11(() => {
     if (shouldAutoplay) {
       player.play();
@@ -2426,7 +2446,7 @@ var PlayerUI = ({
     children: [
       jsx10("div", {
         style: outer,
-        onPointerUp: clickToPlay ? handleClick : undefined,
+        onPointerDown: clickToPlay ? handlePointerDown : undefined,
         onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined,
         children: jsxs7("div", {
           style: containerStyle3,
@@ -2451,7 +2471,7 @@ var PlayerUI = ({
                 width: config.width,
                 height: config.height
               },
-              onPointerUp: clickToPlay ? handleClick : undefined,
+              onPointerDown: clickToPlay ? handlePointerDown : undefined,
               onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined,
               children: poster
             }) : null
@@ -2460,7 +2480,7 @@ var PlayerUI = ({
       }),
       shouldShowPoster && posterFillMode === "player-size" ? jsx10("div", {
         style: outer,
-        onPointerUp: clickToPlay ? handleClick : undefined,
+        onPointerDown: clickToPlay ? handlePointerDown : undefined,
         onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined,
         children: poster
       }) : null,
@@ -2488,7 +2508,7 @@ var PlayerUI = ({
         buffering: showBufferIndicator,
         hideControlsWhenPointerDoesntMove,
         onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined,
-        onPointerUp: clickToPlay ? handleClick : undefined
+        onPointerDown: clickToPlay ? handlePointerDown : undefined
       }) : null
     ]
   });
@@ -2794,6 +2814,7 @@ var PlayerFn = ({
   posterFillMode = "player-size",
   bufferStateDelayInMilliseconds,
   hideControlsWhenPointerDoesntMove = true,
+  overflowVisible = false,
   ...componentProps
 }, ref) => {
   if (typeof window !== "undefined") {
@@ -2943,7 +2964,8 @@ var PlayerFn = ({
             alwaysShowControls,
             showPlaybackRateControl,
             bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds ?? 300,
-            hideControlsWhenPointerDoesntMove
+            hideControlsWhenPointerDoesntMove,
+            overflowVisible
           })
         })
       })
@@ -2999,7 +3021,7 @@ if (reactVersion2 === "0") {
   throw new Error(`Version ${reactVersion2} of "react" is not supported by Remotion`);
 }
 var doesReactVersionSupportSuspense2 = parseInt(reactVersion2, 10) >= 18;
-var ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, className: className2 }, ref) => {
+var ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, className: className2, overflowVisible }, ref) => {
   const config = Internals13.useUnsafeVideoConfig();
   const video = Internals13.useVideo();
   const container = useRef11(null);
@@ -3030,19 +3052,20 @@ var ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, className:
   }, [scale, thumbnail.emitter]);
   const VideoComponent = video ? video.component : null;
   const outerStyle = useMemo14(() => {
-    return calculateOuterStyle({ config, style, canvasSize });
-  }, [canvasSize, config, style]);
+    return calculateOuterStyle({ config, style, canvasSize, overflowVisible });
+  }, [canvasSize, config, overflowVisible, style]);
   const outer = useMemo14(() => {
-    return calculateOuter({ config, layout, scale });
-  }, [config, layout, scale]);
+    return calculateOuter({ config, layout, scale, overflowVisible });
+  }, [config, layout, overflowVisible, scale]);
   const containerStyle3 = useMemo14(() => {
     return calculateContainerStyle({
       canvasSize,
       config,
       layout,
-      scale
+      scale,
+      overflowVisible
     });
-  }, [canvasSize, config, layout, scale]);
+  }, [canvasSize, config, layout, overflowVisible, scale]);
   const onError = useCallback11((error) => {
     thumbnail.emitter.dispatchError(error);
   }, [thumbnail.emitter]);
@@ -3115,6 +3138,7 @@ var ThumbnailFn = ({
   className: className2,
   errorFallback = () => "\u26A0\uFE0F",
   renderLoading,
+  overflowVisible = false,
   ...componentProps
 }, ref) => {
   if (typeof window !== "undefined") {
@@ -3166,7 +3190,8 @@ var ThumbnailFn = ({
           errorFallback,
           inputProps: passedInputProps,
           renderLoading,
-          style
+          style,
+          overflowVisible
         })
       })
     })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/player",
-  "version": "4.0.172",
+  "version": "4.0.173",
   "description": "Remotion Player",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",
@@ -28,7 +28,7 @@
   ],
   "license": "SEE LICENSE IN LICENSE.md",
   "dependencies": {
-    "remotion": "4.0.172"
+    "remotion": "4.0.173"
   },
   "peerDependencies": {
     "react": ">=16.8.0",