@remotion/player 4.0.213 → 4.0.215

package/dist/cjs/DefaultPlayPauseButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const DefaultPlayPauseButton: React.FC<{
     playing: boolean;
     buffering: boolean;

package/dist/cjs/PlayerControls.js

@@ -174,10 +174,10 @@ const Controls = ({ durationInFrames, isFullscreen, fps, player, showVolumeContr
             onDoubleClick === null || onDoubleClick === void 0 ? void 0 : onDoubleClick(e);
         }
     }, [onDoubleClick]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: containerCss, onPointerDown: onPointerDownIfContainer, onDoubleClick: onDoubleClickIfContainer, children: [(0, jsx_runtime_1.jsxs)("div", { ref: flexRef, style: controlsRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: leftPartStyle, children: [(0, jsx_runtime_1.jsx)("button", { ref: playButtonRef, type: "button", style: PlaybackrateControl_js_1.playerButtonStyle, onClick: player.playing ? player.pause : player.play, "aria-label": player.playing ? 'Pause video' : 'Play video', title: player.playing ? 'Pause video' : 'Play video', children: renderPlayPauseButton === null ? ((0, jsx_runtime_1.jsx)(DefaultPlayPauseButton_js_1.DefaultPlayPauseButton, { buffering: buffering, playing: player.playing })) : ((_b = renderPlayPauseButton({
+    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, { renderMuteButton: renderMuteButton, renderVolumeSlider: renderVolumeSlider, displayVerticalVolumeSlider: displayVerticalVolumeSlider })] })) : null, (0, jsx_runtime_1.jsx)("div", { style: xSpacer }), (0, jsx_runtime_1.jsxs)("div", { style: timeLabel, children: [(0, format_time_js_1.formatTime)(frame / fps), " / ", (0, format_time_js_1.formatTime)(durationInFrames / fps)] }), (0, jsx_runtime_1.jsx)("div", { style: xSpacer })] }), (0, jsx_runtime_1.jsx)("div", { style: flex1 }), playbackRates && canvasSize && ((0, jsx_runtime_1.jsx)(PlaybackrateControl_js_1.PlaybackrateControl, { canvasSize: canvasSize, playbackRates: playbackRates })), playbackRates && supportsFullscreen && allowFullscreen ? ((0, jsx_runtime_1.jsx)("div", { style: xSpacer })) : null, (0, jsx_runtime_1.jsx)("div", { style: fullscreen, children: supportsFullscreen && allowFullscreen ? ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', title: isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', style: PlaybackrateControl_js_1.playerButtonStyle, onClick: isFullscreen
+                                })) !== null && _b !== void 0 ? _b : ((0, jsx_runtime_1.jsx)(DefaultPlayPauseButton_js_1.DefaultPlayPauseButton, { buffering: buffering, playing: player.playing })))) }), showVolumeControls ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: xSpacer }), (0, jsx_runtime_1.jsx)(MediaVolumeSlider_js_1.MediaVolumeSlider, { renderMuteButton: renderMuteButton, renderVolumeSlider: renderVolumeSlider, displayVerticalVolumeSlider: displayVerticalVolumeSlider })] })) : null, (0, jsx_runtime_1.jsx)("div", { style: xSpacer }), (0, jsx_runtime_1.jsxs)("div", { style: timeLabel, children: [(0, format_time_js_1.formatTime)(frame / fps), " / ", (0, format_time_js_1.formatTime)(durationInFrames / fps)] }), (0, jsx_runtime_1.jsx)("div", { style: xSpacer })] }), (0, jsx_runtime_1.jsx)("div", { style: flex1 }), playbackRates && canvasSize && ((0, jsx_runtime_1.jsx)(PlaybackrateControl_js_1.PlaybackrateControl, { canvasSize: canvasSize, playbackRates: playbackRates })), playbackRates && supportsFullscreen && allowFullscreen ? ((0, jsx_runtime_1.jsx)("div", { style: xSpacer })) : null, (0, jsx_runtime_1.jsx)("div", { style: fullscreen, children: supportsFullscreen && allowFullscreen ? ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', title: isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', style: PlaybackrateControl_js_1.playerButtonStyle, onClick: isFullscreen
                                 ? onExitFullscreenButtonClick
                                 : onFullscreenButtonClick, children: renderFullscreenButton === null ? ((0, jsx_runtime_1.jsx)(icons_js_1.FullscreenIcon, { isFullscreen: isFullscreen })) : (renderFullscreenButton({ isFullscreen })) })) : null })] }), (0, jsx_runtime_1.jsx)("div", { style: ySpacer }), (0, jsx_runtime_1.jsx)(PlayerSeekBar_js_1.PlayerSeekBar, { onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, durationInFrames: durationInFrames, inFrame: inFrame, outFrame: outFrame })] }));
 };

package/dist/cjs/PlayerSeekBar.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const PlayerSeekBar: React.FC<{
     durationInFrames: number;
     onSeekStart: () => void;

package/dist/cjs/PlayerSeekBar.js

@@ -8,9 +8,8 @@ const use_hover_state_js_1 = require("./use-hover-state.js");
 const use_player_js_1 = require("./use-player.js");
 const use_element_size_js_1 = require("./utils/use-element-size.js");
 const getFrameFromX = (clientX, durationInFrames, width) => {
-    var _a;
     const pos = clientX;
-    const frame = Math.round((0, remotion_1.interpolate)(pos, [0, width], [0, (_a = durationInFrames - 1) !== null && _a !== void 0 ? _a : 0], {
+    const frame = Math.round((0, remotion_1.interpolate)(pos, [0, width], [0, durationInFrames - 1], {
         extrapolateLeft: 'clamp',
         extrapolateRight: 'clamp',
     }));

package/dist/cjs/PlayerUI.d.ts

@@ -20,14 +20,14 @@ declare const _default: React.ForwardRefExoticComponent<{
     readonly allowFullscreen: boolean;
     readonly inputProps: Record<string, unknown>;
     readonly showVolumeControls: boolean;
-    readonly style?: React.CSSProperties | undefined;
+    readonly style?: React.CSSProperties;
     readonly clickToPlay: boolean;
     readonly doubleClickToFullscreen: boolean;
     readonly spaceKeyToPlayOrPause: boolean;
     readonly errorFallback: ErrorFallback;
     readonly playbackRate: number;
     readonly renderLoading: RenderLoading | undefined;
-    readonly renderPoster: RenderLoading | undefined;
+    readonly renderPoster: RenderPoster | undefined;
     readonly className: string | undefined;
     readonly moveToBeginningWhenEnded: boolean;
     readonly showPosterWhenPaused: boolean;
@@ -45,7 +45,7 @@ declare const _default: React.ForwardRefExoticComponent<{
     readonly showPlaybackRateControl: boolean | number[];
     readonly posterFillMode: PosterFillMode;
     readonly bufferStateDelayInMilliseconds: number;
-    readonly hideControlsWhenPointerDoesntMove: number | boolean;
+    readonly hideControlsWhenPointerDoesntMove: boolean | number;
     readonly overflowVisible: boolean;
 } & React.RefAttributes<PlayerRef>>;
 export default _default;

package/dist/cjs/PlayerUI.js

@@ -317,8 +317,14 @@ 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, overflowVisible });
-    }, [canvasSize, config, overflowVisible, style]);
+        return (0, calculate_scale_js_1.calculateOuterStyle)({
+            canvasSize,
+            config,
+            style,
+            overflowVisible,
+            layout,
+        });
+    }, [canvasSize, config, layout, overflowVisible, style]);
     const outer = (0, react_1.useMemo)(() => {
         return (0, calculate_scale_js_1.calculateOuter)({ config, layout, scale, overflowVisible });
     }, [config, layout, overflowVisible, scale]);

package/dist/cjs/ThumbnailUI.d.ts

@@ -3,7 +3,7 @@ import type { ThumbnailMethods } from './player-methods.js';
 import type { ErrorFallback, RenderLoading } from './PlayerUI.js';
 declare const _default: React.ForwardRefExoticComponent<{
     inputProps: Record<string, unknown>;
-    style?: React.CSSProperties | undefined;
+    style?: React.CSSProperties;
     errorFallback: ErrorFallback;
     renderLoading: RenderLoading | undefined;
     className: string | undefined;

package/dist/cjs/ThumbnailUI.js

@@ -70,8 +70,14 @@ 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, overflowVisible });
-    }, [canvasSize, config, overflowVisible, style]);
+        return (0, calculate_scale_js_1.calculateOuterStyle)({
+            config,
+            style,
+            canvasSize,
+            overflowVisible,
+            layout,
+        });
+    }, [canvasSize, config, layout, overflowVisible, style]);
     const outer = (0, react_1.useMemo)(() => {
         return (0, calculate_scale_js_1.calculateOuter)({ config, layout, scale, overflowVisible });
     }, [config, layout, overflowVisible, scale]);

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

@@ -8,16 +8,17 @@ type Layout = {
     scale: number;
 };
 export declare const calculateCanvasTransformation: ({ previewSize, compositionWidth, compositionHeight, canvasSize, }: {
-    previewSize: PreviewSize['size'];
+    previewSize: PreviewSize["size"];
     compositionWidth: number;
     compositionHeight: number;
     canvasSize: Size;
 }) => Layout;
-export declare const calculateOuterStyle: ({ config, style, canvasSize, overflowVisible, }: {
+export declare const calculateOuterStyle: ({ config, style, canvasSize, overflowVisible, layout, }: {
     config: VideoConfig | null;
     style: React.CSSProperties | undefined;
     canvasSize: Size | null;
     overflowVisible: boolean;
+    layout: Layout | null;
 }) => React.CSSProperties;
 export declare const calculateContainerStyle: ({ config, canvasSize, layout, scale, overflowVisible, }: {
     config: VideoConfig | null;

package/dist/cjs/calculate-scale.js

@@ -26,7 +26,7 @@ const calculateCanvasTransformation = ({ previewSize, compositionWidth, composit
     };
 };
 exports.calculateCanvasTransformation = calculateCanvasTransformation;
-const calculateOuterStyle = ({ config, style, canvasSize, overflowVisible, }) => {
+const calculateOuterStyle = ({ config, style, canvasSize, overflowVisible, layout, }) => {
     if (!config) {
         return {};
     }
@@ -40,6 +40,7 @@ const calculateOuterStyle = ({ config, style, canvasSize, overflowVisible, }) =>
             height: style === null || style === void 0 ? void 0 : style.height,
             width: style === null || style === void 0 ? void 0 : style.width,
         }),
+        opacity: layout ? 1 : 0,
         ...style,
     };
 };

package/dist/cjs/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './_check-rsc.js';
 import type { CallbackListener, PlayerEventTypes } from './event-emitter.js';
 import { PlayerEmitter } from './event-emitter.js';
@@ -23,7 +22,7 @@ export declare const PlayerInternals: {
         isFirstFrame: boolean;
         emitter: PlayerEmitter;
         playing: boolean;
-        play: (e?: PointerEvent | import("react").SyntheticEvent<Element, Event> | undefined) => void;
+        play: (e?: import("react").SyntheticEvent | PointerEvent) => void;
         pause: () => void;
         pauseAndReturnToPlayStart: () => void;
         seek: (newFrame: number) => void;
@@ -31,7 +30,7 @@ export declare const PlayerInternals: {
         isPlaying: () => boolean;
         hasPlayed: boolean;
         isBuffering: () => boolean;
-        remotionInternal_currentFrameRef: import("react").MutableRefObject<number>;
+        remotionInternal_currentFrameRef: React.MutableRefObject<number>;
     };
     usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, frameRef, }: {
         loop: boolean;
@@ -39,14 +38,14 @@ export declare const PlayerInternals: {
         moveToBeginningWhenEnded: boolean;
         inFrame: number | null;
         outFrame: number | null;
-        frameRef: import("react").MutableRefObject<number>;
+        frameRef: React.MutableRefObject<number>;
     }) => void;
-    useElementSize: (ref: import("react").RefObject<HTMLElement>, options: {
+    useElementSize: (ref: React.RefObject<HTMLElement>, options: {
         triggerOnWindowResize: boolean;
         shouldApplyCssTransforms: boolean;
     }) => import("./utils/use-element-size.js").Size | null;
     calculateCanvasTransformation: ({ previewSize, compositionWidth, compositionHeight, canvasSize, }: {
-        previewSize: number | "auto";
+        previewSize: import("remotion").PreviewSize["size"];
         compositionWidth: number;
         compositionHeight: number;
         canvasSize: import("./utils/use-element-size.js").Size;
@@ -57,7 +56,7 @@ export declare const PlayerInternals: {
         yCorrection: number;
         scale: number;
     };
-    useHoverState: (ref: import("react").RefObject<HTMLDivElement>, hideControlsWhenPointerDoesntMove: number | boolean) => boolean;
+    useHoverState: (ref: React.RefObject<HTMLDivElement>, hideControlsWhenPointerDoesntMove: boolean | number) => boolean;
     updateAllElementsSizes: () => void;
     PlayerEmitterProvider: import("react").FC<{
         children: import("react").ReactNode;

package/dist/cjs/is-backgrounded.d.ts

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

package/dist/cjs/test/test-utils.d.ts

@@ -1,6 +1,6 @@
 import type { queries, RenderOptions } from '@testing-library/react';
 import type { FC, ReactElement } from 'react';
 declare const HelloWorld: FC;
-declare const customRender: (ui: ReactElement, options?: Omit<RenderOptions, 'queries'>) => import("@testing-library/react").RenderResult<typeof queries, HTMLElement, HTMLElement>;
+declare const customRender: (ui: ReactElement, options?: Omit<RenderOptions, "queries">) => import("@testing-library/react").RenderResult<typeof queries, HTMLElement, HTMLElement>;
 export * from '@testing-library/react';
 export { HelloWorld, customRender as render };

package/dist/cjs/utils/calculate-player-size.d.ts

@@ -2,8 +2,8 @@ import type { StandardLonghandProperties } from 'csstype';
 import type { Size } from './use-element-size.js';
 export declare const calculatePlayerSize: ({ currentSize, width, height, compositionWidth, compositionHeight, }: {
     currentSize: Size | null;
-    width: StandardLonghandProperties['width'] | undefined;
-    height: StandardLonghandProperties['height'] | undefined;
+    width: StandardLonghandProperties["width"] | undefined;
+    height: StandardLonghandProperties["height"] | undefined;
     compositionWidth: number;
     compositionHeight: number;
 }) => React.CSSProperties;

package/dist/cjs/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;

package/dist/cjs/utils/use-component-visible.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = useComponentVisible;
 const react_1 = require("react");
 // hook to hide a popup/modal when clicked outside
 function useComponentVisible(initialIsVisible) {
@@ -18,4 +19,3 @@ function useComponentVisible(initialIsVisible) {
     }, []);
     return { ref, isComponentVisible, setIsComponentVisible };
 }
-exports.default = useComponentVisible;

package/dist/esm/index.mjs

@@ -1,9 +1,6 @@
 "use client";
 // src/icons.tsx
-import {
-jsx,
-jsxs
-} from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var ICON_SIZE = 25;
 var fullscreenIconSize = 16;
 var PlayIcon = () => {
@@ -128,11 +125,7 @@ var VolumeOnIcon = () => {
 };
 
 // src/BufferingIndicator.tsx
-import {
-jsx as jsx2,
-jsxs as jsxs2,
-Fragment
-} from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2, Fragment } from "react/jsx-runtime";
 var className = "__remotion_buffering_indicator";
 var remotionBufferingAnimation = "__remotion_buffering_animation";
 var playerStyle = {
@@ -190,7 +183,7 @@ var BufferingIndicator = ({ type }) => {
 };
 
 // src/calculate-scale.ts
-import {Internals} from "remotion";
+import { Internals } from "remotion";
 
 // src/utils/calculate-player-size.ts
 var calculatePlayerSize = ({
@@ -254,7 +247,8 @@ var calculateOuterStyle = ({
   config,
   style,
   canvasSize,
-  overflowVisible
+  overflowVisible,
+  layout
 }) => {
   if (!config) {
     return {};
@@ -269,6 +263,7 @@ var calculateOuterStyle = ({
       height: style?.height,
       width: style?.width
     }),
+    opacity: layout ? 1 : 0,
     ...style
   };
 };
@@ -321,8 +316,8 @@ var PlayerEventEmitterContext = React.createContext(undefined);
 var ThumbnailEmitterContext = React.createContext(undefined);
 
 // src/EmitterProvider.tsx
-import {useContext as useContext2, useEffect as useEffect2, useState} from "react";
-import {Internals as Internals3} from "remotion";
+import { useContext as useContext2, useEffect as useEffect2, useState } from "react";
+import { Internals as Internals3 } from "remotion";
 
 // src/event-emitter.ts
 class PlayerEmitter {
@@ -438,8 +433,8 @@ class ThumbnailEmitter {
 }
 
 // src/use-buffer-state-emitter.ts
-import {useContext, useEffect} from "react";
-import {Internals as Internals2} from "remotion";
+import { useContext, useEffect } from "react";
+import { Internals as Internals2 } from "remotion";
 var useBufferStateEmitter = (emitter) => {
   const bufferManager = useContext(Internals2.BufferingContextReact);
   if (!bufferManager) {
@@ -462,9 +457,7 @@ var useBufferStateEmitter = (emitter) => {
 };
 
 // src/EmitterProvider.tsx
-import {
-jsx as jsx3
-} from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
   const [emitter] = useState(() => new PlayerEmitter);
   const bufferManager = useContext2(Internals3.BufferingContextReact);
@@ -484,7 +477,7 @@ var PlayerEmitterProvider = ({ children, currentPlaybackRate }) => {
 };
 
 // src/use-hover-state.ts
-import {useEffect as useEffect3, useState as useState2} from "react";
+import { useEffect as useEffect3, useState as useState2 } from "react";
 var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
   const [hovered, setHovered] = useState2(false);
   useEffect3(() => {
@@ -527,8 +520,8 @@ var useHoverState = (ref, hideControlsWhenPointerDoesntMove) => {
 };
 
 // src/use-playback.ts
-import {useContext as useContext4, useEffect as useEffect5, useRef as useRef3} from "react";
-import {Internals as Internals5} from "remotion";
+import { useContext as useContext4, useEffect as useEffect5, useRef as useRef3 } from "react";
+import { Internals as Internals5 } from "remotion";
 
 // src/calculate-next-frame.ts
 var calculateNextFrame = ({
@@ -564,7 +557,7 @@ var calculateNextFrame = ({
 };
 
 // src/is-backgrounded.ts
-import {useEffect as useEffect4, useRef} from "react";
+import { useEffect as useEffect4, useRef } from "react";
 var getIsBackgrounded = () => {
   if (typeof document === "undefined") {
     return false;
@@ -586,8 +579,8 @@ var useIsBackgrounded = () => {
 };
 
 // src/use-player.ts
-import {useCallback, useContext as useContext3, useMemo, useRef as useRef2, useState as useState3} from "react";
-import {Internals as Internals4} from "remotion";
+import { useCallback, useContext as useContext3, useMemo, useRef as useRef2, useState as useState3 } from "react";
+import { Internals as Internals4 } from "remotion";
 var usePlayer = () => {
   const [playing, setPlaying, imperativePlaying] = Internals4.Timeline.usePlayingState();
   const [hasPlayed, setHasPlayed] = useState3(false);
@@ -885,7 +878,7 @@ var usePlayback = ({
 };
 
 // src/utils/use-element-size.ts
-import {useCallback as useCallback2, useEffect as useEffect6, useMemo as useMemo2, useState as useState4} from "react";
+import { useCallback as useCallback2, useEffect as useEffect6, useMemo as useMemo2, useState as useState4 } from "react";
 var elementSizeHooks = [];
 var updateAllElementsSizes = () => {
   for (const listener of elementSizeHooks) {
@@ -1003,38 +996,36 @@ var useElementSize = (ref, options) => {
 
 // src/Player.tsx
 import {
-forwardRef as forwardRef2,
-useEffect as useEffect12,
-useImperativeHandle as useImperativeHandle2,
-useLayoutEffect,
-useMemo as useMemo13,
-useRef as useRef10,
-useState as useState13
+  forwardRef as forwardRef2,
+  useEffect as useEffect12,
+  useImperativeHandle as useImperativeHandle2,
+  useLayoutEffect,
+  useMemo as useMemo13,
+  useRef as useRef10,
+  useState as useState13
 } from "react";
-import {Composition, Internals as Internals12} from "remotion";
+import { Composition, Internals as Internals12 } from "remotion";
 
 // src/PlayerUI.tsx
 import React8, {
-Suspense,
-forwardRef,
-useCallback as useCallback10,
-useContext as useContext6,
-useEffect as useEffect11,
-useImperativeHandle,
-useMemo as useMemo11,
-useRef as useRef9,
-useState as useState11
+  Suspense,
+  forwardRef,
+  useCallback as useCallback10,
+  useContext as useContext6,
+  useEffect as useEffect11,
+  useImperativeHandle,
+  useMemo as useMemo11,
+  useRef as useRef9,
+  useState as useState11
 } from "react";
-import {Internals as Internals10} from "remotion";
+import { Internals as Internals10 } from "remotion";
 
 // src/PlayerControls.tsx
-import {useCallback as useCallback7, useEffect as useEffect10, useMemo as useMemo8, useRef as useRef7, useState as useState10} from "react";
-import {Internals as Internals9} from "remotion";
+import { useCallback as useCallback7, useEffect as useEffect10, useMemo as useMemo8, useRef as useRef7, useState as useState10 } from "react";
+import { Internals as Internals9 } from "remotion";
 
 // src/DefaultPlayPauseButton.tsx
-import {
-jsx as jsx4
-} from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var DefaultPlayPauseButton = ({ playing, buffering }) => {
   if (playing && buffering) {
     return /* @__PURE__ */ jsx4(BufferingIndicator, {
@@ -1048,16 +1039,13 @@ var DefaultPlayPauseButton = ({ playing, buffering }) => {
 };
 
 // src/MediaVolumeSlider.tsx
-import {useCallback as useCallback4, useMemo as useMemo4, useRef as useRef4, useState as useState6} from "react";
-import {Internals as Internals6} from "remotion";
+import { useCallback as useCallback4, useMemo as useMemo4, useRef as useRef4, useState as useState6 } from "react";
+import { Internals as Internals6 } from "remotion";
 
 // src/render-volume-slider.tsx
-import React3, {useCallback as useCallback3, useMemo as useMemo3, useState as useState5} from "react";
-import {random} from "remotion";
-import {
-jsx as jsx5,
-jsxs as jsxs3
-} from "react/jsx-runtime";
+import React3, { useCallback as useCallback3, useMemo as useMemo3, useState as useState5 } from "react";
+import { random } from "remotion";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var KNOB_SIZE = 12;
 var BAR_HEIGHT = 5;
 var DefaultVolumeSlider = ({
@@ -1163,12 +1151,9 @@ var renderDefaultVolumeSlider = (props) => {
 };
 
 // src/MediaVolumeSlider.tsx
-import {
-jsx as jsx6,
-jsxs as jsxs4
-} from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var VOLUME_SLIDER_WIDTH = 100;
-var MediaVolumeSlider2 = ({ displayVerticalVolumeSlider, renderMuteButton, renderVolumeSlider }) => {
+var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, renderVolumeSlider }) => {
   const [mediaMuted, setMediaMuted] = Internals6.useMediaMutedState();
   const [mediaVolume, setMediaVolume] = Internals6.useMediaVolumeState();
   const [focused, setFocused] = useState6(false);
@@ -1259,16 +1244,16 @@ var MediaVolumeSlider2 = ({ displayVerticalVolumeSlider, renderMuteButton, rende
 
 // src/PlaybackrateControl.tsx
 import {
-useCallback as useCallback5,
-useContext as useContext5,
-useEffect as useEffect8,
-useMemo as useMemo5,
-useState as useState8
+  useCallback as useCallback5,
+  useContext as useContext5,
+  useEffect as useEffect8,
+  useMemo as useMemo5,
+  useState as useState8
 } from "react";
-import {Internals as Internals7} from "remotion";
+import { Internals as Internals7 } from "remotion";
 
 // src/utils/use-component-visible.ts
-import {useEffect as useEffect7, useRef as useRef5, useState as useState7} from "react";
+import { useEffect as useEffect7, useRef as useRef5, useState as useState7 } from "react";
 function useComponentVisible(initialIsVisible) {
   const [isComponentVisible, setIsComponentVisible] = useState7(initialIsVisible);
   const ref = useRef5(null);
@@ -1287,10 +1272,7 @@ function useComponentVisible(initialIsVisible) {
 }
 
 // src/PlaybackrateControl.tsx
-import {
-jsx as jsx7,
-jsxs as jsxs5
-} from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var BOTTOM = 35;
 var THRESHOLD = 70;
 var rateDiv = {
@@ -1490,12 +1472,9 @@ var PlaybackrateControl = ({ playbackRates, canvasSize }) => {
 };
 
 // src/PlayerSeekBar.tsx
-import {useCallback as useCallback6, useEffect as useEffect9, useMemo as useMemo6, useRef as useRef6, useState as useState9} from "react";
-import {Internals as Internals8, interpolate} from "remotion";
-import {
-jsx as jsx8,
-jsxs as jsxs6
-} from "react/jsx-runtime";
+import { useCallback as useCallback6, useEffect as useEffect9, useMemo as useMemo6, useRef as useRef6, useState as useState9 } from "react";
+import { Internals as Internals8, interpolate } from "remotion";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var getFrameFromX = (clientX, durationInFrames, width) => {
   const pos = clientX;
   const frame = Math.round(interpolate(pos, [0, width], [0, durationInFrames - 1], {
@@ -1657,7 +1636,7 @@ var formatTime = (timeInSeconds) => {
 };
 
 // src/use-video-controls-resize.ts
-import {useMemo as useMemo7} from "react";
+import { useMemo as useMemo7 } from "react";
 var X_SPACER = 10;
 var X_PADDING = 12;
 var useVideoControlsResize = ({
@@ -1684,11 +1663,7 @@ var useVideoControlsResize = ({
 };
 
 // src/PlayerControls.tsx
-import {
-jsx as jsx9,
-jsxs as jsxs7,
-Fragment as Fragment2
-} from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7, Fragment as Fragment2 } from "react/jsx-runtime";
 var gradientSteps = [
   0,
   0.013,
@@ -1928,7 +1903,7 @@ var Controls = ({
                   /* @__PURE__ */ jsx9("div", {
                     style: xSpacer
                   }),
-                  /* @__PURE__ */ jsx9(MediaVolumeSlider2, {
+                  /* @__PURE__ */ jsx9(MediaVolumeSlider, {
                     renderMuteButton,
                     renderVolumeSlider,
                     displayVerticalVolumeSlider
@@ -1992,9 +1967,7 @@ var Controls = ({
 
 // src/error-boundary.tsx
 import React7 from "react";
-import {
-jsx as jsx10
-} from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var errorStyle = {
   display: "flex",
   justifyContent: "center",
@@ -2032,7 +2005,7 @@ var PLAYER_CSS_CLASSNAME = "__remotion-player";
 var IS_NODE = typeof document === "undefined";
 
 // src/utils/use-click-prevention-on-double-click.ts
-import {useCallback as useCallback9, useMemo as useMemo10} from "react";
+import { useCallback as useCallback9, useMemo as useMemo10 } from "react";
 
 // src/utils/cancellable-promise.ts
 var cancellablePromise = (promise) => {
@@ -2060,7 +2033,7 @@ var cancellablePromise = (promise) => {
 var delay = (n) => new Promise((resolve) => setTimeout(resolve, n));
 
 // src/utils/use-cancellable-promises.ts
-import {useCallback as useCallback8, useMemo as useMemo9, useRef as useRef8} from "react";
+import { useCallback as useCallback8, useMemo as useMemo9, useRef as useRef8 } from "react";
 var useCancellablePromises = () => {
   const pendingPromises = useRef8([]);
   const appendPendingPromise = useCallback8((promise) => {
@@ -2124,11 +2097,7 @@ var useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFull
 };
 
 // src/PlayerUI.tsx
-import {
-jsx as jsx11,
-jsxs as jsxs8,
-Fragment as Fragment3
-} from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs8, Fragment as Fragment3 } from "react/jsx-runtime";
 var reactVersion = React8.version.split(".")[0];
 if (reactVersion === "0") {
   throw new Error(`Version ${reactVersion} of "react" is not supported by Remotion`);
@@ -2422,8 +2391,14 @@ var PlayerUI = ({
   ]);
   const VideoComponent = video ? video.component : null;
   const outerStyle = useMemo11(() => {
-    return calculateOuterStyle({ canvasSize, config, style, overflowVisible });
-  }, [canvasSize, config, overflowVisible, style]);
+    return calculateOuterStyle({
+      canvasSize,
+      config,
+      style,
+      overflowVisible,
+      layout
+    });
+  }, [canvasSize, config, layout, overflowVisible, style]);
   const outer = useMemo11(() => {
     return calculateOuter({ config, layout, scale, overflowVisible });
   }, [config, layout, overflowVisible, scale]);
@@ -2599,8 +2574,8 @@ var PlayerUI = ({
 var PlayerUI_default = forwardRef(PlayerUI);
 
 // src/SharedPlayerContext.tsx
-import {useCallback as useCallback11, useMemo as useMemo12, useState as useState12} from "react";
-import {Internals as Internals11} from "remotion";
+import { useCallback as useCallback11, useMemo as useMemo12, useState as useState12 } from "react";
+import { Internals as Internals11 } from "remotion";
 
 // src/volume-persistance.ts
 var VOLUME_PERSISTANCE_KEY = "remotion.volumePreference";
@@ -2627,9 +2602,7 @@ var getPreferredVolume = () => {
 };
 
 // src/SharedPlayerContext.tsx
-import {
-jsx as jsx12
-} from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var PLAYER_COMP_ID = "player-comp";
 var SharedPlayerContexts = ({
   children,
@@ -2826,16 +2799,14 @@ var validatePlaybackRate = (playbackRate) => {
 };
 
 // src/validate.ts
-import {NoReactInternals} from "remotion/no-react";
+import { NoReactInternals } from "remotion/no-react";
 var validateFps = NoReactInternals.validateFps;
 var validateDimension = NoReactInternals.validateDimension;
 var validateDurationInFrames = NoReactInternals.validateDurationInFrames;
 var validateDefaultAndInputProps = NoReactInternals.validateDefaultAndInputProps;
 
 // src/Player.tsx
-import {
-jsx as jsx13
-} from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var componentOrNullIfLazy = (props) => {
   if ("component" in props) {
     return props.component;
@@ -3046,28 +3017,28 @@ var forward = forwardRef2;
 var Player = forward(PlayerFn);
 // src/Thumbnail.tsx
 import {
-forwardRef as forwardRef4,
-useImperativeHandle as useImperativeHandle4,
-useLayoutEffect as useLayoutEffect2,
-useMemo as useMemo16,
-useRef as useRef12,
-useState as useState14
+  forwardRef as forwardRef4,
+  useImperativeHandle as useImperativeHandle4,
+  useLayoutEffect as useLayoutEffect2,
+  useMemo as useMemo16,
+  useRef as useRef12,
+  useState as useState14
 } from "react";
-import {Internals as Internals14, random as random2} from "remotion";
+import { Internals as Internals14, random as random2 } from "remotion";
 
 // src/ThumbnailUI.tsx
 import React11, {
-forwardRef as forwardRef3,
-Suspense as Suspense2,
-useCallback as useCallback12,
-useImperativeHandle as useImperativeHandle3,
-useMemo as useMemo15,
-useRef as useRef11
+  forwardRef as forwardRef3,
+  Suspense as Suspense2,
+  useCallback as useCallback12,
+  useImperativeHandle as useImperativeHandle3,
+  useMemo as useMemo15,
+  useRef as useRef11
 } from "react";
-import {Internals as Internals13} from "remotion";
+import { Internals as Internals13 } from "remotion";
 
 // src/use-thumbnail.ts
-import {useContext as useContext7, useMemo as useMemo14} from "react";
+import { useContext as useContext7, useMemo as useMemo14 } from "react";
 var useThumbnail = () => {
   const emitter = useContext7(ThumbnailEmitterContext);
   if (!emitter) {
@@ -3082,9 +3053,7 @@ var useThumbnail = () => {
 };
 
 // src/ThumbnailUI.tsx
-import {
-jsx as jsx14
-} from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var reactVersion2 = React11.version.split(".")[0];
 if (reactVersion2 === "0") {
   throw new Error(`Version ${reactVersion2} of "react" is not supported by Remotion`);
@@ -3121,8 +3090,14 @@ var ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, className:
   }, [scale, thumbnail.emitter]);
   const VideoComponent = video ? video.component : null;
   const outerStyle = useMemo15(() => {
-    return calculateOuterStyle({ config, style, canvasSize, overflowVisible });
-  }, [canvasSize, config, overflowVisible, style]);
+    return calculateOuterStyle({
+      config,
+      style,
+      canvasSize,
+      overflowVisible,
+      layout
+    });
+  }, [canvasSize, config, layout, overflowVisible, style]);
   const outer = useMemo15(() => {
     return calculateOuter({ config, layout, scale, overflowVisible });
   }, [config, layout, overflowVisible, scale]);
@@ -3193,9 +3168,7 @@ var ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, className:
 var ThumbnailUI_default = forwardRef3(ThumbnailUI);
 
 // src/Thumbnail.tsx
-import {
-jsx as jsx15
-} from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var ThumbnailFn = ({
   frameToDisplay,
   style,

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/player"
   },
   "name": "@remotion/player",
-  "version": "4.0.213",
+  "version": "4.0.215",
   "description": "React component for embedding a Remotion preview into your app",
   "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.213"
+    "remotion": "4.0.215"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -57,7 +57,7 @@
   "scripts": {
     "formatting": "prettier src --check",
     "lint": "eslint src --ext ts,tsx",
-    "build": "bun ensure-correct-version.ts && bun --env-file=../.env.bundle bundle.ts",
+    "make": "bun ensure-correct-version.ts && bun --env-file=../.env.bundle bundle.ts",
     "test": "bun test src",
     "prerelease": "cp ../../README.md ."
   }