@remotion/player 4.0.213 → 4.0.214

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,10 +56,10 @@ 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;
+        children: React.ReactNode;
         currentPlaybackRate: number | null;
     }>;
     BufferingIndicator: import("react").FC<{

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

@@ -254,7 +254,8 @@ var calculateOuterStyle = ({
   config,
   style,
   canvasSize,
-  overflowVisible
+  overflowVisible,
+  layout
 }) => {
   if (!config) {
     return {};
@@ -269,6 +270,7 @@ var calculateOuterStyle = ({
       height: style?.height,
       width: style?.width
     }),
+    opacity: layout ? 1 : 0,
     ...style
   };
 };
@@ -2422,8 +2424,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]);
@@ -3121,8 +3129,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]);

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.214",
   "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.214"
   },
   "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 ."
   }