@remotion/player 3.2.14 → 3.2.15

package/dist/Player.d.ts

@@ -36,9 +36,11 @@ export declare type PlayerProps<T> = {
     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, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, initialFrame, renderPoster, ...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,7 @@ 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");
@@ -21,7 +22,7 @@ const componentOrNullIfLazy = (props) => {
     return null;
 };
 exports.componentOrNullIfLazy = componentOrNullIfLazy;
-const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls = false, loop = false, autoPlay = false, showVolumeControls = true, allowFullscreen = true, clickToPlay, doubleClickToFullscreen = false, spaceKeyToPlayOrPause = true, moveToBeginningWhenEnded = true, numberOfSharedAudioTags = 5, errorFallback = () => '⚠️', playbackRate = 1, renderLoading, className, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, initialFrame, renderPoster, ...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)(() => {
@@ -61,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`);
     }
@@ -191,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, showPosterWhenUnplayed: Boolean(showPosterWhenUnplayed), showPosterWhenEnded: Boolean(showPosterWhenEnded), showPosterWhenPaused: Boolean(showPosterWhenPaused), renderPoster: renderPoster }) }) }) }) }) }) }) }) }));
+                                            : 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

@@ -24,4 +24,6 @@ export declare const Controls: React.FC<{
     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, onSeekEnd, onSeekStart, }) => {
+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, { onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, 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

@@ -3,4 +3,6 @@ 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, onSeekEnd, onSeekStart }) => {
+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, {
@@ -123,10 +123,24 @@ const PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart }) => {
         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

@@ -32,5 +32,7 @@ declare const _default: (props: {
     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, renderPoster, className, moveToBeginningWhenEnded, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, }, 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();
@@ -60,8 +60,8 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
         loop,
         playbackRate,
         moveToBeginningWhenEnded,
-        inFrame: null,
-        outFrame: null,
+        inFrame,
+        outFrame,
     });
     const player = (0, use_player_1.usePlayer)();
     (0, react_1.useEffect)(() => {
@@ -233,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)(() => {
@@ -260,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',
@@ -332,7 +344,7 @@ const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps
             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 })) : 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 }) }), 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/error-boundary.d.ts

@@ -15,5 +15,5 @@ export declare class ErrorBoundary extends React.Component<{
         hasError: Error;
     };
     componentDidCatch(error: Error): void;
-    render(): string | number | boolean | React.ReactFragment | JSX.Element | null | undefined;
+    render(): string | number | boolean | JSX.Element | React.ReactFragment | null | undefined;
 }

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import { PlayerEmitter } from './event-emitter';
 export { ErrorFallback, Player, PlayerProps } from './Player';
 export { PlayerMethods, PlayerRef } from './player-methods';
 export type { RenderLoading, RenderPoster } from './PlayerUI';
-export { PreviewSize } from './utils/preview-size';
+export { PreviewSize, Translation } from './utils/preview-size';
 export { Size } from './utils/use-element-size';
 export type { CallbackListener, EventTypes };
 export declare const PlayerInternals: {
@@ -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/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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/player",
-	"version": "3.2.14",
+	"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.14"
+		"remotion": "3.2.15"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
@@ -63,5 +63,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "544ef952c9df79b015496d68202776787f15cd93"
+	"gitHead": "7346704683815d274733cb3d280157b9ff570773"
 }