@remotion/player 3.2.13 → 3.2.15

package/dist/Player.d.ts

@@ -2,7 +2,7 @@ import type { ComponentType, MutableRefObject } from 'react';
 import React from 'react';
 import type { CompProps } from 'remotion';
 import type { PlayerRef } from './player-methods';
-import type { RenderLoading } from './PlayerUI';
+import type { RenderLoading, RenderPoster } from './PlayerUI';
 declare type PropsIfHasProps<Props> = {} extends Props ? {
     inputProps?: Props;
 } : {
@@ -31,9 +31,16 @@ export declare type PlayerProps<T> = {
     renderLoading?: RenderLoading;
     moveToBeginningWhenEnded?: boolean;
     className?: string;
+    initialFrame?: number;
+    renderPoster?: RenderPoster;
+    showPosterWhenPaused?: boolean;
+    showPosterWhenEnded?: boolean;
+    showPosterWhenUnplayed?: boolean;
+    inFrame?: number | null;
+    outFrame?: number | null;
 } & PropsIfHasProps<T> & CompProps<T>;
 export declare const componentOrNullIfLazy: <T>(props: CompProps<T>) => ComponentType<T> | null;
-export declare const PlayerFn: <T>({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls, loop, autoPlay, showVolumeControls, allowFullscreen, clickToPlay, doubleClickToFullscreen, spaceKeyToPlayOrPause, moveToBeginningWhenEnded, numberOfSharedAudioTags, errorFallback, playbackRate, renderLoading, className, ...componentProps }: PlayerProps<T>, ref: MutableRefObject<PlayerRef>) => JSX.Element;
+export declare const PlayerFn: <T>({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls, loop, autoPlay, showVolumeControls, allowFullscreen, clickToPlay, doubleClickToFullscreen, spaceKeyToPlayOrPause, moveToBeginningWhenEnded, numberOfSharedAudioTags, errorFallback, playbackRate, renderLoading, className, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, initialFrame, renderPoster, inFrame, outFrame, ...componentProps }: PlayerProps<T>, ref: MutableRefObject<PlayerRef>) => JSX.Element;
 declare module 'react' {
     function forwardRef<T, P = {}>(render: (props: P, ref: React.MutableRefObject<T>) => React.ReactElement | null): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
 }

package/dist/Player.js

@@ -11,6 +11,8 @@ const emitter_context_1 = require("./emitter-context");
 const event_emitter_1 = require("./event-emitter");
 const player_css_classname_1 = require("./player-css-classname");
 const PlayerUI_1 = __importDefault(require("./PlayerUI"));
+const validate_in_out_frame_1 = require("./utils/validate-in-out-frame");
+const validate_initial_frame_1 = require("./utils/validate-initial-frame");
 const validate_playbackrate_1 = require("./utils/validate-playbackrate");
 const volume_persistance_1 = require("./volume-persistance");
 const componentOrNullIfLazy = (props) => {
@@ -20,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, ...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, initialFrame, renderPoster, inFrame, outFrame, ...componentProps }, ref) => {
     if (typeof window !== 'undefined') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
@@ -40,7 +42,8 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
         throw new TypeError(`'component' must not be the 'Composition' component. Pass your own React component directly, and set the duration, fps and dimensions as separate props. See https://www.remotion.dev/docs/player/examples for an example.`);
     }
     const component = remotion_1.Internals.useLazyComponent(componentProps);
-    const [frame, setFrame] = (0, react_1.useState)(0);
+    (0, validate_initial_frame_1.validateInitialFrame)({ initialFrame, durationInFrames });
+    const [frame, setFrame] = (0, react_1.useState)(() => initialFrame !== null && initialFrame !== void 0 ? initialFrame : 0);
     const [playing, setPlaying] = (0, react_1.useState)(false);
     const [rootId] = (0, react_1.useState)('player-comp');
     const [emitter] = (0, react_1.useState)(() => new event_emitter_1.PlayerEmitter());
@@ -59,6 +62,11 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
     remotion_1.Internals.validateDimension(compositionWidth, 'compositionWidth', 'of the <Player /> component');
     remotion_1.Internals.validateDurationInFrames(durationInFrames, 'of the <Player/> component');
     remotion_1.Internals.validateFps(fps, 'as a prop of the <Player/> component', false);
+    (0, validate_in_out_frame_1.validateInOutFrames)({
+        durationInFrames,
+        inFrame,
+        outFrame,
+    });
     if (typeof controls !== 'boolean' && typeof controls !== 'undefined') {
         throw new TypeError(`'controls' must be a boolean or undefined but got '${typeof controls}' instead`);
     }
@@ -189,7 +197,7 @@ const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps,
     }
     return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.TimelineContext.Provider, { value: timelineContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.CompositionManager.Provider, { value: compositionManagerContext, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.MediaVolumeContext.Provider, { value: mediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.SetMediaVolumeContext.Provider, { value: setMediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.SharedAudioContextProvider, { numberOfAudioTags: numberOfSharedAudioTags, children: (0, jsx_runtime_1.jsx)(emitter_context_1.PlayerEventEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(PlayerUI_1.default, { ref: rootRef, renderLoading: renderLoading, autoPlay: Boolean(autoPlay), loop: Boolean(loop), controls: Boolean(controls), errorFallback: errorFallback, style: style, inputProps: passedInputProps, allowFullscreen: Boolean(allowFullscreen), moveToBeginningWhenEnded: Boolean(moveToBeginningWhenEnded), clickToPlay: typeof clickToPlay === 'boolean'
                                             ? clickToPlay
-                                            : Boolean(controls), showVolumeControls: Boolean(showVolumeControls), setMediaVolume: setMediaVolumeAndPersist, mediaVolume: mediaVolume, mediaMuted: mediaMuted, doubleClickToFullscreen: Boolean(doubleClickToFullscreen), setMediaMuted: setMediaMuted, spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause), playbackRate: playbackRate, className: className !== null && className !== void 0 ? className : undefined }) }) }) }) }) }) }) }) }));
+                                            : Boolean(controls), showVolumeControls: Boolean(showVolumeControls), setMediaVolume: setMediaVolumeAndPersist, mediaVolume: mediaVolume, mediaMuted: mediaMuted, doubleClickToFullscreen: Boolean(doubleClickToFullscreen), setMediaMuted: setMediaMuted, spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause), playbackRate: playbackRate, className: className !== null && className !== void 0 ? className : undefined, showPosterWhenUnplayed: Boolean(showPosterWhenUnplayed), showPosterWhenEnded: Boolean(showPosterWhenEnded), showPosterWhenPaused: Boolean(showPosterWhenPaused), renderPoster: renderPoster, inFrame: inFrame !== null && inFrame !== void 0 ? inFrame : null, outFrame: outFrame !== null && outFrame !== void 0 ? outFrame : null }) }) }) }) }) }) }) }) }));
 };
 exports.PlayerFn = PlayerFn;
 exports.Player = (0, react_1.forwardRef)(exports.PlayerFn);

package/dist/PlayerControls.d.ts

@@ -22,4 +22,8 @@ export declare const Controls: React.FC<{
     allowFullscreen: boolean;
     onExitFullscreenButtonClick: MouseEventHandler<HTMLButtonElement>;
     spaceKeyToPlayOrPause: boolean;
+    onSeekEnd: () => void;
+    onSeekStart: () => void;
+    inFrame: number | null;
+    outFrame: number | null;
 }>;

package/dist/PlayerControls.js

@@ -62,7 +62,7 @@ const timeLabel = {
     fontFamily: 'sans-serif',
     fontSize: 14,
 };
-const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, }) => {
+const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, }) => {
     const playButtonRef = (0, react_1.useRef)(null);
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
     const [supportsFullscreen, setSupportsFullscreen] = (0, react_1.useState)(false);
@@ -90,6 +90,6 @@ const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVo
     }, []);
     return ((0, jsx_runtime_1.jsxs)("div", { style: containerCss, children: [(0, jsx_runtime_1.jsxs)("div", { style: controlsRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: leftPartStyle, children: [(0, jsx_runtime_1.jsx)("button", { ref: playButtonRef, type: "button", style: buttonStyle, onClick: player.playing ? player.pause : player.play, "aria-label": player.playing ? 'Pause video' : 'Play video', title: player.playing ? 'Pause video' : 'Play video', children: player.playing ? (0, jsx_runtime_1.jsx)(icons_1.PauseIcon, {}) : (0, jsx_runtime_1.jsx)(icons_1.PlayIcon, {}) }), 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_1.MediaVolumeSlider, {})] })) : null, (0, jsx_runtime_1.jsx)("div", { style: xSpacer }), (0, jsx_runtime_1.jsxs)("div", { style: timeLabel, children: [(0, format_time_1.formatTime)(frame / fps), " / ", (0, format_time_1.formatTime)(durationInFrames / fps)] }), (0, jsx_runtime_1.jsx)("div", { style: xSpacer })] }), (0, jsx_runtime_1.jsx)("div", { style: flex1 }), (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: buttonStyle, onClick: isFullscreen
                                 ? onExitFullscreenButtonClick
-                                : onFullscreenButtonClick, children: (0, jsx_runtime_1.jsx)(icons_1.FullscreenIcon, { minimized: !isFullscreen }) })) : null })] }), (0, jsx_runtime_1.jsx)("div", { style: ySpacer }), (0, jsx_runtime_1.jsx)(PlayerSeekBar_1.PlayerSeekBar, { durationInFrames: durationInFrames })] }));
+                                : onFullscreenButtonClick, children: (0, jsx_runtime_1.jsx)(icons_1.FullscreenIcon, { minimized: !isFullscreen }) })) : null })] }), (0, jsx_runtime_1.jsx)("div", { style: ySpacer }), (0, jsx_runtime_1.jsx)(PlayerSeekBar_1.PlayerSeekBar, { onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, durationInFrames: durationInFrames, inFrame: inFrame, outFrame: outFrame })] }));
 };
 exports.Controls = Controls;

package/dist/PlayerSeekBar.d.ts

@@ -1,4 +1,8 @@
 /// <reference types="react" />
 export declare const PlayerSeekBar: React.FC<{
     durationInFrames: number;
+    onSeekStart: () => void;
+    onSeekEnd: () => void;
+    inFrame: number | null;
+    outFrame: number | null;
 }>;

package/dist/PlayerSeekBar.js

@@ -30,7 +30,7 @@ const containerStyle = {
 };
 const barBackground = {
     height: BAR_HEIGHT,
-    backgroundColor: 'rgba(255, 255, 255, 0.5)',
+    backgroundColor: 'rgba(255, 255, 255, 0.25)',
     width: '100%',
     borderRadius: BAR_HEIGHT / 2,
 };
@@ -41,7 +41,7 @@ const findBodyInWhichDivIsLocated = (div) => {
     }
     return current;
 };
-const PlayerSeekBar = ({ durationInFrames }) => {
+const PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFrame }) => {
     const containerRef = (0, react_1.useRef)(null);
     const barHovered = (0, use_hover_state_1.useHoverState)(containerRef);
     const size = (0, use_element_size_1.useElementSize)(containerRef, {
@@ -64,7 +64,8 @@ const PlayerSeekBar = ({ durationInFrames }) => {
             dragging: true,
             wasPlaying: playing,
         });
-    }, [size, durationInFrames, pause, seek, playing]);
+        onSeekStart();
+    }, [size, durationInFrames, pause, seek, playing, onSeekStart]);
     const onPointerMove = (0, react_1.useCallback)((e) => {
         var _a;
         if (!size) {
@@ -89,7 +90,8 @@ const PlayerSeekBar = ({ durationInFrames }) => {
         else {
             pause();
         }
-    }, [dragging, pause, play]);
+        onSeekEnd();
+    }, [dragging, onSeekEnd, pause, play]);
     (0, react_1.useEffect)(() => {
         if (!dragging.dragging) {
             return;
@@ -121,10 +123,24 @@ const PlayerSeekBar = ({ durationInFrames }) => {
         return {
             height: BAR_HEIGHT,
             backgroundColor: 'rgba(255, 255, 255, 1)',
-            width: (frame / (durationInFrames - 1)) * 100 + '%',
+            width: ((frame - (inFrame !== null && inFrame !== void 0 ? inFrame : 0)) / (durationInFrames - 1)) * 100 + '%',
+            marginLeft: ((inFrame !== null && inFrame !== void 0 ? inFrame : 0) / (durationInFrames - 1)) * 100 + '%',
             borderRadius: BAR_HEIGHT / 2,
         };
-    }, [durationInFrames, frame]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, onPointerDown: onPointerDown, style: containerStyle, children: [(0, jsx_runtime_1.jsx)("div", { style: barBackground, children: (0, jsx_runtime_1.jsx)("div", { style: fillStyle }) }), (0, jsx_runtime_1.jsx)("div", { style: knobStyle })] }));
+    }, [durationInFrames, frame, inFrame]);
+    const active = (0, react_1.useMemo)(() => {
+        return {
+            height: BAR_HEIGHT,
+            backgroundColor: 'rgba(255, 255, 255, 0.25)',
+            width: (((outFrame !== null && outFrame !== void 0 ? outFrame : durationInFrames - 1) - (inFrame !== null && inFrame !== void 0 ? inFrame : 0)) /
+                (durationInFrames - 1)) *
+                100 +
+                '%',
+            marginLeft: ((inFrame !== null && inFrame !== void 0 ? inFrame : 0) / (durationInFrames - 1)) * 100 + '%',
+            borderRadius: BAR_HEIGHT / 2,
+            position: 'absolute',
+        };
+    }, [durationInFrames, inFrame, outFrame]);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, onPointerDown: onPointerDown, style: containerStyle, children: [(0, jsx_runtime_1.jsxs)("div", { style: barBackground, children: [(0, jsx_runtime_1.jsx)("div", { style: active }), (0, jsx_runtime_1.jsx)("div", { style: fillStyle })] }), (0, jsx_runtime_1.jsx)("div", { style: knobStyle })] }));
 };
 exports.PlayerSeekBar = PlayerSeekBar;

package/dist/PlayerUI.d.ts

@@ -7,6 +7,7 @@ export declare type RenderLoading = (canvas: {
     height: number;
     width: number;
 }) => React.ReactChild;
+export declare type RenderPoster = RenderLoading;
 declare const _default: (props: {
     controls: boolean;
     loop: boolean;
@@ -24,8 +25,14 @@ declare const _default: (props: {
     mediaVolume: number;
     errorFallback: ErrorFallback;
     playbackRate: number;
-    renderLoading?: RenderLoading | undefined;
+    renderLoading: RenderLoading | undefined;
+    renderPoster: RenderLoading | undefined;
     className: string | undefined;
     moveToBeginningWhenEnded: boolean;
+    showPosterWhenPaused: boolean;
+    showPosterWhenEnded: boolean;
+    showPosterWhenUnplayed: boolean;
+    inFrame: number | null;
+    outFrame: number | null;
 } & React.RefAttributes<PlayerRef | null>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
 export default _default;

package/dist/PlayerUI.js

@@ -42,7 +42,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, mediaVolume, mediaMuted, doubleClickToFullscreen, setMediaMuted, setMediaVolume, spaceKeyToPlayOrPause, errorFallback, playbackRate, renderLoading, className, moveToBeginningWhenEnded, }, ref) => {
+const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay, showVolumeControls, mediaVolume, mediaMuted, doubleClickToFullscreen, setMediaMuted, setMediaVolume, spaceKeyToPlayOrPause, errorFallback, playbackRate, renderLoading, renderPoster, className, moveToBeginningWhenEnded, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, inFrame, outFrame, }, ref) => {
     var _a, _b, _c;
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const video = remotion_1.Internals.useVideo();
@@ -55,12 +55,13 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
     const [hasPausedToResume, setHasPausedToResume] = (0, react_1.useState)(false);
     const [shouldAutoplay, setShouldAutoPlay] = (0, react_1.useState)(autoPlay);
     const [isFullscreen, setIsFullscreen] = (0, react_1.useState)(() => false);
+    const [seeking, setSeeking] = (0, react_1.useState)(false);
     (0, use_playback_1.usePlayback)({
         loop,
         playbackRate,
         moveToBeginningWhenEnded,
-        inFrame: null,
-        outFrame: null,
+        inFrame,
+        outFrame,
     });
     const player = (0, use_player_1.usePlayer)();
     (0, react_1.useEffect)(() => {
@@ -232,11 +233,17 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
         if (!config || !canvasSize) {
             return null;
         }
-        return (0, calculate_scale_1.calculateScale)({
+        return (0, calculate_scale_1.calculateCanvasTransformation)({
             canvasSize,
             compositionHeight: config.height,
             compositionWidth: config.width,
-            previewSize: 'auto',
+            previewSize: {
+                size: 'auto',
+                translation: {
+                    x: 0,
+                    y: 0,
+                },
+            },
         });
     }, [canvasSize, config]);
     const outer = (0, react_1.useMemo)(() => {
@@ -259,11 +266,17 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
         if (!config || !canvasSize) {
             return {};
         }
-        const { scale, xCorrection, yCorrection } = (0, calculate_scale_1.calculateScale)({
+        const { scale, xCorrection, yCorrection } = (0, calculate_scale_1.calculateCanvasTransformation)({
             canvasSize,
             compositionHeight: config.height,
             compositionWidth: config.width,
-            previewSize: 'auto',
+            previewSize: {
+                size: 'auto',
+                translation: {
+                    x: 0,
+                    y: 0,
+                },
+            },
         });
         return {
             position: 'absolute',
@@ -292,6 +305,12 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
     const onSingleClick = (0, react_1.useCallback)((e) => {
         toggle(e);
     }, [toggle]);
+    const onSeekStart = (0, react_1.useCallback)(() => {
+        setSeeking(true);
+    }, []);
+    const onSeekEnd = (0, react_1.useCallback)(() => {
+        setSeeking(false);
+    }, []);
     const onDoubleClick = (0, react_1.useCallback)(() => {
         if (isFullscreen) {
             exitFullscreen();
@@ -310,7 +329,22 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
     if (!config) {
         return null;
     }
-    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: (0, jsx_runtime_1.jsx)("div", { style: containerStyle, className: player_css_classname_1.PLAYER_CSS_CLASSNAME, children: VideoComponent ? ((0, jsx_runtime_1.jsx)(error_boundary_1.ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: (0, jsx_runtime_1.jsx)(VideoComponent, { ...((_b = video === null || video === void 0 ? void 0 : video.defaultProps) !== null && _b !== void 0 ? _b : {}), ...((_c = inputProps) !== null && _c !== void 0 ? _c : {}) }) })) : null }) }), controls ? ((0, jsx_runtime_1.jsx)(PlayerControls_1.Controls, { fps: config.fps, durationInFrames: config.durationInFrames, hovered: hovered, player: player, onFullscreenButtonClick: onFullscreenButtonClick, isFullscreen: isFullscreen, allowFullscreen: allowFullscreen, showVolumeControls: showVolumeControls, onExitFullscreenButtonClick: onExitFullscreenButtonClick, spaceKeyToPlayOrPause: spaceKeyToPlayOrPause })) : null] }));
+    const poster = renderPoster
+        ? renderPoster({
+            height: outerStyle.height,
+            width: outerStyle.width,
+        })
+        : null;
+    if (poster === undefined) {
+        throw new TypeError('renderPoster() must return a React element, but undefined was returned');
+    }
+    const shouldShowPoster = poster &&
+        [
+            showPosterWhenPaused && !player.isPlaying() && !seeking,
+            showPosterWhenEnded && player.isLastFrame && !player.isPlaying(),
+            showPosterWhenUnplayed && !player.hasPlayed && !player.isPlaying(),
+        ].some(Boolean);
+    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: (0, jsx_runtime_1.jsx)("div", { style: containerStyle, className: player_css_classname_1.PLAYER_CSS_CLASSNAME, children: VideoComponent ? ((0, jsx_runtime_1.jsx)(error_boundary_1.ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: (0, jsx_runtime_1.jsx)(VideoComponent, { ...((_b = video === null || video === void 0 ? void 0 : video.defaultProps) !== null && _b !== void 0 ? _b : {}), ...((_c = inputProps) !== null && _c !== void 0 ? _c : {}) }) })) : null }) }), shouldShowPoster ? ((0, jsx_runtime_1.jsx)("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null, controls ? ((0, jsx_runtime_1.jsx)(PlayerControls_1.Controls, { fps: config.fps, durationInFrames: config.durationInFrames, hovered: hovered, player: player, onFullscreenButtonClick: onFullscreenButtonClick, isFullscreen: isFullscreen, allowFullscreen: allowFullscreen, showVolumeControls: showVolumeControls, onExitFullscreenButtonClick: onExitFullscreenButtonClick, spaceKeyToPlayOrPause: spaceKeyToPlayOrPause, onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, inFrame: inFrame, outFrame: outFrame })) : null] }));
     if (is_node_1.IS_NODE && !doesReactVersionSupportSuspense) {
         return ((0, jsx_runtime_1.jsx)("div", { ref: container, style: outerStyle, className: className, children: content }));
     }

package/dist/calculate-scale.d.ts

@@ -1,6 +1,12 @@
 import type { PreviewSize } from './utils/preview-size';
 import type { Size } from './utils/use-element-size';
-export declare const calculateScale: ({ previewSize, compositionWidth, compositionHeight, canvasSize, }: {
+export declare const calculateScale: ({ canvasSize, compositionHeight, compositionWidth, previewSize, }: {
+    previewSize: PreviewSize['size'];
+    compositionWidth: number;
+    compositionHeight: number;
+    canvasSize: Size;
+}) => number;
+export declare const calculateCanvasTransformation: ({ previewSize, compositionWidth, compositionHeight, canvasSize, }: {
     previewSize: PreviewSize;
     compositionWidth: number;
     compositionHeight: number;

package/dist/calculate-scale.js

@@ -1,11 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.calculateScale = void 0;
-const calculateScale = ({ previewSize, compositionWidth, compositionHeight, canvasSize, }) => {
+exports.calculateCanvasTransformation = exports.calculateScale = void 0;
+const calculateScale = ({ canvasSize, compositionHeight, compositionWidth, previewSize, }) => {
     const heightRatio = canvasSize.height / compositionHeight;
     const widthRatio = canvasSize.width / compositionWidth;
     const ratio = Math.min(heightRatio, widthRatio);
-    const scale = previewSize === 'auto' ? ratio : Number(previewSize);
+    return previewSize === 'auto' ? ratio : Number(previewSize);
+};
+exports.calculateScale = calculateScale;
+const calculateCanvasTransformation = ({ previewSize, compositionWidth, compositionHeight, canvasSize, }) => {
+    const scale = (0, exports.calculateScale)({
+        canvasSize,
+        compositionHeight,
+        compositionWidth,
+        previewSize: previewSize.size,
+    });
     const correction = 0 - (1 - scale) / 2;
     const xCorrection = correction * compositionWidth;
     const yCorrection = correction * compositionHeight;
@@ -21,4 +30,4 @@ const calculateScale = ({ previewSize, compositionWidth, compositionHeight, canv
         scale,
     };
 };
-exports.calculateScale = calculateScale;
+exports.calculateCanvasTransformation = calculateCanvasTransformation;

package/dist/index.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="react" />
 import type { CallbackListener, EventTypes } from './event-emitter';
 import { PlayerEmitter } from './event-emitter';
 export { ErrorFallback, Player, PlayerProps } from './Player';
 export { PlayerMethods, PlayerRef } from './player-methods';
-export type { RenderLoading } from './PlayerUI';
-export { PreviewSize } from './utils/preview-size';
+export type { RenderLoading, RenderPoster } from './PlayerUI';
+export { PreviewSize, Translation } from './utils/preview-size';
 export { Size } from './utils/use-element-size';
 export type { CallbackListener, EventTypes };
 export declare const PlayerInternals: {
@@ -23,6 +22,7 @@ export declare const PlayerInternals: {
         seek: (newFrame: number) => void;
         getCurrentFrame: () => number;
         isPlaying: () => boolean;
+        hasPlayed: boolean;
     };
     usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, }: {
         loop: boolean;
@@ -35,7 +35,7 @@ export declare const PlayerInternals: {
         triggerOnWindowResize: boolean;
         shouldApplyCssTransforms: boolean;
     }) => import("./utils/use-element-size").Size | null;
-    calculateScale: ({ previewSize, compositionWidth, compositionHeight, canvasSize, }: {
+    calculateCanvasTransformation: ({ previewSize, compositionWidth, compositionHeight, canvasSize, }: {
         previewSize: import("./utils/preview-size").PreviewSize;
         compositionWidth: number;
         compositionHeight: number;

package/dist/index.js

@@ -16,7 +16,7 @@ exports.PlayerInternals = {
     usePlayer: use_player_1.usePlayer,
     usePlayback: use_playback_1.usePlayback,
     useElementSize: use_element_size_1.useElementSize,
-    calculateScale: calculate_scale_1.calculateScale,
+    calculateCanvasTransformation: calculate_scale_1.calculateCanvasTransformation,
     useHoverState: use_hover_state_1.useHoverState,
     updateAllElementsSizes: use_element_size_1.updateAllElementsSizes,
 };

package/dist/test/validate-in-out-frames.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/test/validate-in-out-frames.test.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const validate_in_out_frame_1 = require("../utils/validate-in-out-frame");
+test('Validate in out frames', () => {
+    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+        durationInFrames: 200,
+        inFrame: 201,
+        outFrame: undefined,
+    })).toThrow(/inFrame must be less than \(durationInFrames - 1\)/);
+    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+        durationInFrames: 200,
+        inFrame: 199,
+        outFrame: 201,
+    })).toThrow(/outFrame must be less than \(durationInFrames - 1\)/);
+    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+        durationInFrames: 200,
+        inFrame: -10,
+        outFrame: null,
+    })).toThrow(/inFrame must be greater than 0, but is -10/);
+    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+        durationInFrames: 200,
+        inFrame: null,
+        outFrame: -10,
+    })).toThrow(/outFrame must be greater than 0, but is -10/);
+    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+        durationInFrames: 200,
+        inFrame: 1.5,
+        outFrame: null,
+    })).toThrow(/"inFrame" must be an integer, but is 1.5/);
+    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+        durationInFrames: 200,
+        inFrame: 20,
+        outFrame: 20,
+    })).toThrow(/outFrame must be greater than inFrame, but is 20/);
+    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+        durationInFrames: 200,
+        inFrame: 21,
+        outFrame: 20,
+    })).toThrow(/outFrame must be greater than inFrame, but is 20 <= 21/);
+    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+        durationInFrames: 200,
+        inFrame: null,
+        outFrame: 20,
+    })).not.toThrow();
+    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+        durationInFrames: 200,
+        inFrame: null,
+        outFrame: null,
+    })).not.toThrow();
+    expect(() => (0, validate_in_out_frame_1.validateInOutFrames)({
+        durationInFrames: 200,
+        inFrame: 10,
+        outFrame: 20,
+    })).not.toThrow();
+});

package/dist/test/validate-prop.test.js

@@ -51,7 +51,7 @@ test('No durationInFrames should give errors', () => {
             durationInFrames: undefined, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
     }
     catch (e) {
-        expect(e.message).toMatch(/The "durationInFrames" prop of the <Player\/> component must be a number, but you passed a value of type undefined/);
+        expect(e.message).toMatch(/durationInFrames` must be a number, but is undefined/);
     }
 });
 test('Invalid playbackRate should give error', () => {

package/dist/use-player.d.ts

@@ -13,6 +13,7 @@ declare type UsePlayerMethods = {
     seek: (newFrame: number) => void;
     getCurrentFrame: () => number;
     isPlaying: () => boolean;
+    hasPlayed: boolean;
 };
 export declare const usePlayer: () => UsePlayerMethods;
 export {};

package/dist/use-player.js

@@ -7,8 +7,9 @@ const emitter_context_1 = require("./emitter-context");
 const usePlayer = () => {
     var _a;
     const [playing, setPlaying, imperativePlaying] = remotion_1.Internals.Timeline.usePlayingState();
+    const [hasPlayed, setHasPlayed] = (0, react_1.useState)(false);
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
-    const playStart = (0, react_1.useRef)(0);
+    const playStart = (0, react_1.useRef)(frame);
     const setFrame = remotion_1.Internals.Timeline.useTimelineSetFrame();
     const setTimelinePosition = remotion_1.Internals.Timeline.useTimelineSetFrame();
     const audioContext = (0, react_1.useContext)(remotion_1.Internals.SharedAudioContext);
@@ -32,6 +33,7 @@ const usePlayer = () => {
         if (imperativePlaying.current) {
             return;
         }
+        setHasPlayed(true);
         if (isLastFrame) {
             seek(0);
         }
@@ -109,6 +111,7 @@ const usePlayer = () => {
             getCurrentFrame: () => frameRef.current,
             isPlaying: () => imperativePlaying.current,
             pauseAndReturnToPlayStart,
+            hasPlayed,
         };
     }, [
         frameBack,
@@ -122,6 +125,7 @@ const usePlayer = () => {
         isFirstFrame,
         pauseAndReturnToPlayStart,
         imperativePlaying,
+        hasPlayed,
     ]);
     return returnValue;
 };

package/dist/utils/preview-size.d.ts

@@ -1 +1,8 @@
-export declare type PreviewSize = 'auto' | number;
+export declare type Translation = {
+    x: number;
+    y: number;
+};
+export declare type PreviewSize = {
+    size: number | 'auto';
+    translation: Translation;
+};

package/dist/utils/validate-in-out-frame.d.ts

@@ -0,0 +1,6 @@
+export declare const validateSingleFrameFrame: (frame: unknown, variableName: string) => number | null;
+export declare const validateInOutFrames: ({ inFrame, durationInFrames, outFrame, }: {
+    inFrame: unknown;
+    outFrame: unknown;
+    durationInFrames: number;
+}) => void;

package/dist/utils/validate-in-out-frame.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateInOutFrames = exports.validateSingleFrameFrame = void 0;
+const validateSingleFrameFrame = (frame, variableName) => {
+    if (typeof frame === 'undefined' || frame === null) {
+        return frame !== null && frame !== void 0 ? frame : null;
+    }
+    if (typeof frame !== 'number') {
+        throw new TypeError(`"${variableName}" must be a number, but is ${JSON.stringify(frame)}`);
+    }
+    if (Number.isNaN(frame)) {
+        throw new TypeError(`"${variableName}" must not be NaN, but is ${JSON.stringify(frame)}`);
+    }
+    if (!Number.isFinite(frame)) {
+        throw new TypeError(`"${variableName}" must be finite, but is ${JSON.stringify(frame)}`);
+    }
+    if (frame % 1 !== 0) {
+        throw new TypeError(`"${variableName}" must be an integer, but is ${JSON.stringify(frame)}`);
+    }
+    return frame;
+};
+exports.validateSingleFrameFrame = validateSingleFrameFrame;
+const validateInOutFrames = ({ inFrame, durationInFrames, outFrame, }) => {
+    const validatedInFrame = (0, exports.validateSingleFrameFrame)(inFrame, 'inFrame');
+    const validateOutFrame = (0, exports.validateSingleFrameFrame)(outFrame, 'outFrame');
+    if (validatedInFrame === null && validateOutFrame === null) {
+        return;
+    }
+    // Must not be over the duration
+    if (validatedInFrame !== null && validatedInFrame > durationInFrames - 1) {
+        throw new Error('inFrame must be less than (durationInFrames - 1), but is ' +
+            validatedInFrame);
+    }
+    if (validateOutFrame !== null && validateOutFrame > durationInFrames - 1) {
+        throw new Error('outFrame must be less than (durationInFrames - 1), but is ' +
+            validatedInFrame);
+    }
+    // Must not be under 0
+    if (validatedInFrame !== null && validatedInFrame < 0) {
+        throw new Error('inFrame must be greater than 0, but is ' + validatedInFrame);
+    }
+    if (validateOutFrame !== null && validateOutFrame < 0) {
+        throw new Error('outFrame must be greater than 0, but is ' + validateOutFrame);
+    }
+    if (validateOutFrame !== null &&
+        validatedInFrame !== null &&
+        validateOutFrame <= validatedInFrame) {
+        throw new Error('outFrame must be greater than inFrame, but is ' +
+            validateOutFrame +
+            ' <= ' +
+            validatedInFrame);
+    }
+};
+exports.validateInOutFrames = validateInOutFrames;

package/dist/utils/validate-initial-frame.d.ts

@@ -0,0 +1,4 @@
+export declare const validateInitialFrame: ({ initialFrame, durationInFrames, }: {
+    initialFrame: unknown;
+    durationInFrames: unknown;
+}) => void;

package/dist/utils/validate-initial-frame.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateInitialFrame = void 0;
+const validateInitialFrame = ({ initialFrame, durationInFrames, }) => {
+    if (typeof durationInFrames !== 'number') {
+        throw new Error(`\`durationInFrames\` must be a number, but is ${JSON.stringify(durationInFrames)}`);
+    }
+    if (typeof initialFrame === 'undefined') {
+        return;
+    }
+    if (typeof initialFrame !== 'number') {
+        throw new Error(`\`initialFrame\` must be a number, but is ${JSON.stringify(initialFrame)}`);
+    }
+    if (Number.isNaN(initialFrame)) {
+        throw new Error(`\`initialFrame\` must be a number, but is NaN`);
+    }
+    if (!Number.isFinite(initialFrame)) {
+        throw new Error(`\`initialFrame\` must be a number, but is Infinity`);
+    }
+    if (initialFrame % 1 !== 0) {
+        throw new Error(`\`initialFrame\` must be an integer, but is ${JSON.stringify(initialFrame)}`);
+    }
+    if (initialFrame > durationInFrames - 1) {
+        throw new Error(`\`initialFrame\` must be less or equal than \`durationInFrames - 1\`, but is ${JSON.stringify(initialFrame)}`);
+    }
+};
+exports.validateInitialFrame = validateInitialFrame;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/player",
-	"version": "3.2.13",
+	"version": "3.2.15",
 	"description": "Remotion Player",
 	"main": "dist/index.js",
 	"sideEffects": false,
@@ -28,7 +28,7 @@
 	],
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"remotion": "3.2.13"
+		"remotion": "3.2.15"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
@@ -63,5 +63,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "989d20fc0ace36685c71396847e1b7b7a06d00d7"
+	"gitHead": "7346704683815d274733cb3d280157b9ff570773"
 }