@remotion/player 4.0.0-oops.3 → 4.0.0-prefetch.10

package/dist/icons.js

@@ -8,11 +8,11 @@ const rotate = {
     transform: `rotate(90deg)`,
 };
 const PlayIcon = () => {
-    return ((0, jsx_runtime_1.jsx)("svg", { width: exports.ICON_SIZE, height: exports.ICON_SIZE, viewBox: "-100 -100 400 400", style: rotate, children: (0, jsx_runtime_1.jsx)("path", { fill: "#fff", stroke: "#fff", strokeWidth: "100", strokeLinejoin: "round", d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z" }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("svg", { width: exports.ICON_SIZE, height: exports.ICON_SIZE, viewBox: "-100 -100 400 400", style: rotate, children: (0, jsx_runtime_1.jsx)("path", { fill: "#fff", stroke: "#fff", strokeWidth: "100", strokeLinejoin: "round", d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z" }) }));
 };
 exports.PlayIcon = PlayIcon;
 const PauseIcon = () => {
-    return ((0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 100 100", width: exports.ICON_SIZE, height: exports.ICON_SIZE, children: [(0, jsx_runtime_1.jsx)("rect", { x: "25", y: "20", width: "20", height: "60", fill: "#fff", ry: "5", rx: "5" }, void 0), (0, jsx_runtime_1.jsx)("rect", { x: "55", y: "20", width: "20", height: "60", fill: "#fff", ry: "5", rx: "5" }, void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)("svg", { viewBox: "0 0 100 100", width: exports.ICON_SIZE, height: exports.ICON_SIZE, children: [(0, jsx_runtime_1.jsx)("rect", { x: "25", y: "20", width: "20", height: "60", fill: "#fff", ry: "5", rx: "5" }), (0, jsx_runtime_1.jsx)("rect", { x: "55", y: "20", width: "20", height: "60", fill: "#fff", ry: "5", rx: "5" })] }));
 };
 exports.PauseIcon = PauseIcon;
 const FullscreenIcon = ({ minimized }) => {
@@ -25,26 +25,26 @@ const FullscreenIcon = ({ minimized }) => {
 				M ${out} ${inset}
 				L ${middleInset} ${middleInset}
 				L ${inset} ${out}
-				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: `
+				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }), (0, jsx_runtime_1.jsx)("path", { d: `
 				M ${viewSize - out} ${inset}
 				L ${viewSize - middleInset} ${middleInset}
 				L ${viewSize - inset} ${out}
-				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: `
+				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }), (0, jsx_runtime_1.jsx)("path", { d: `
 				M ${out} ${viewSize - inset}
 				L ${middleInset} ${viewSize - middleInset}
 				L ${inset} ${viewSize - out}
-				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }, void 0), (0, jsx_runtime_1.jsx)("path", { d: `
+				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }), (0, jsx_runtime_1.jsx)("path", { d: `
 				M ${viewSize - out} ${viewSize - inset}
 				L ${viewSize - middleInset} ${viewSize - middleInset}
 				L ${viewSize - inset} ${viewSize - out}
-				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }, void 0)] }, void 0));
+				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" })] }));
 };
 exports.FullscreenIcon = FullscreenIcon;
 const VolumeOffIcon = () => {
-    return ((0, jsx_runtime_1.jsx)("svg", { width: exports.ICON_SIZE, height: exports.ICON_SIZE, viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M3.63 3.63a.996.996 0 000 1.41L7.29 8.7 7 9H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71v-4.17l4.18 4.18c-.49.37-1.02.68-1.6.91-.36.15-.58.53-.58.92 0 .72.73 1.18 1.39.91.8-.33 1.55-.77 2.22-1.31l1.34 1.34a.996.996 0 101.41-1.41L5.05 3.63c-.39-.39-1.02-.39-1.42 0zM19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-3.83-2.4-7.11-5.78-8.4-.59-.23-1.22.23-1.22.86v.19c0 .38.25.71.61.85C17.18 6.54 19 9.06 19 12zm-8.71-6.29l-.17.17L12 7.76V6.41c0-.89-1.08-1.33-1.71-.7zM16.5 12A4.5 4.5 0 0014 7.97v1.79l2.48 2.48c.01-.08.02-.16.02-.24z", fill: "#fff" }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("svg", { width: exports.ICON_SIZE, height: exports.ICON_SIZE, viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M3.63 3.63a.996.996 0 000 1.41L7.29 8.7 7 9H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71v-4.17l4.18 4.18c-.49.37-1.02.68-1.6.91-.36.15-.58.53-.58.92 0 .72.73 1.18 1.39.91.8-.33 1.55-.77 2.22-1.31l1.34 1.34a.996.996 0 101.41-1.41L5.05 3.63c-.39-.39-1.02-.39-1.42 0zM19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-3.83-2.4-7.11-5.78-8.4-.59-.23-1.22.23-1.22.86v.19c0 .38.25.71.61.85C17.18 6.54 19 9.06 19 12zm-8.71-6.29l-.17.17L12 7.76V6.41c0-.89-1.08-1.33-1.71-.7zM16.5 12A4.5 4.5 0 0014 7.97v1.79l2.48 2.48c.01-.08.02-.16.02-.24z", fill: "#fff" }) }));
 };
 exports.VolumeOffIcon = VolumeOffIcon;
 const VolumeOnIcon = () => {
-    return ((0, jsx_runtime_1.jsx)("svg", { width: exports.ICON_SIZE, height: exports.ICON_SIZE, viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M3 10v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71V6.41c0-.89-1.08-1.34-1.71-.71L7 9H4c-.55 0-1 .45-1 1zm13.5 2A4.5 4.5 0 0014 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 4.45v.2c0 .38.25.71.6.85C17.18 6.53 19 9.06 19 12s-1.82 5.47-4.4 6.5c-.36.14-.6.47-.6.85v.2c0 .63.63 1.07 1.21.85C18.6 19.11 21 15.84 21 12s-2.4-7.11-5.79-8.4c-.58-.23-1.21.22-1.21.85z", fill: "#fff" }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("svg", { width: exports.ICON_SIZE, height: exports.ICON_SIZE, viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { d: "M3 10v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71V6.41c0-.89-1.08-1.34-1.71-.71L7 9H4c-.55 0-1 .45-1 1zm13.5 2A4.5 4.5 0 0014 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 4.45v.2c0 .38.25.71.6.85C17.18 6.53 19 9.06 19 12s-1.82 5.47-4.4 6.5c-.36.14-.6.47-.6.85v.2c0 .63.63 1.07 1.21.85C18.6 19.11 21 15.84 21 12s-2.4-7.11-5.79-8.4c-.58-.23-1.21.22-1.21.85z", fill: "#fff" }) }));
 };
 exports.VolumeOnIcon = VolumeOnIcon;

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
-import { CallbackListener, EventTypes, PlayerEmitter } from './event-emitter';
-export { ErrorFallback, Player } from './Player';
+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: {
@@ -13,24 +14,30 @@ export declare const PlayerInternals: {
         frameBack: (frames: number) => void;
         frameForward: (frames: number) => void;
         isLastFrame: boolean;
+        isFirstFrame: boolean;
         emitter: PlayerEmitter;
         playing: boolean;
         play: (e?: import("react").SyntheticEvent<Element, Event> | undefined) => void;
         pause: () => void;
+        pauseAndReturnToPlayStart: () => void;
         seek: (newFrame: number) => void;
         getCurrentFrame: () => number;
         isPlaying: () => boolean;
+        hasPlayed: boolean;
     };
-    usePlayback: ({ loop, playbackRate, }: {
+    usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, }: {
         loop: boolean;
         playbackRate: number;
+        moveToBeginningWhenEnded: boolean;
+        inFrame: number | null;
+        outFrame: number | null;
     }) => void;
     useElementSize: (ref: import("react").RefObject<HTMLElement>, options: {
         triggerOnWindowResize: boolean;
         shouldApplyCssTransforms: boolean;
     }) => import("./utils/use-element-size").Size | null;
-    calculateScale: ({ previewSize, compositionWidth, compositionHeight, canvasSize, }: {
-        previewSize: import("./utils/preview-size").PreviewSize;
+    calculateCanvasTransformation: ({ previewSize, compositionWidth, compositionHeight, canvasSize, }: {
+        previewSize: number | "auto";
         compositionWidth: number;
         compositionHeight: number;
         canvasSize: import("./utils/use-element-size").Size;
@@ -43,4 +50,10 @@ export declare const PlayerInternals: {
     };
     useHoverState: (ref: import("react").RefObject<HTMLDivElement>) => boolean;
     updateAllElementsSizes: () => void;
+    calculateScale: ({ canvasSize, compositionHeight, compositionWidth, previewSize, }: {
+        previewSize: number | "auto";
+        compositionWidth: number;
+        compositionHeight: number;
+        canvasSize: import("./utils/use-element-size").Size;
+    }) => number;
 };

package/dist/index.js

@@ -16,7 +16,8 @@ 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,
+    calculateScale: calculate_scale_1.calculateScale,
 };

package/dist/player-methods.d.ts

@@ -1,5 +1,5 @@
-import { SyntheticEvent } from 'react';
-import { PlayerEmitter } from './event-emitter';
+import type { SyntheticEvent } from 'react';
+import type { PlayerEmitter } from './event-emitter';
 export declare type PlayerMethods = {
     play: (e?: SyntheticEvent) => void;
     pause: () => void;

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

@@ -1,6 +1,6 @@
-import { queries, RenderOptions } from '@testing-library/react';
-import { FC, ReactElement } from 'react';
+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<typeof queries, HTMLElement, HTMLElement>, "queries"> | undefined) => 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 { customRender as render, HelloWorld };

package/dist/test/test-utils.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -14,14 +18,14 @@ exports.HelloWorld = exports.render = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@testing-library/react");
 const HelloWorld = () => {
-    return (0, jsx_runtime_1.jsx)("div", { children: "Hello World" }, void 0);
+    return (0, jsx_runtime_1.jsx)("div", { children: "Hello World" });
 };
 exports.HelloWorld = HelloWorld;
 const AllTheProviders = ({ children }) => {
     // overwriting console.error console does not gets poluted with all the errors
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     window.console.error = () => { };
-    return (0, jsx_runtime_1.jsx)("div", { children: children }, void 0);
+    return (0, jsx_runtime_1.jsx)("div", { children: children });
 };
 const customRender = (ui, options) => (0, react_1.render)(ui, { wrapper: AllTheProviders, ...options });
 exports.render = customRender;

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

@@ -10,7 +10,7 @@ test('no compositionWidth should give errors', () => {
         // @ts-expect-error
         , { 
             // @ts-expect-error
-            compositionWidth: null, errorFallback: () => 'something went wrong', compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }, void 0));
+            compositionWidth: null, errorFallback: () => 'something went wrong', compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
     }
     catch (e) {
         expect(e.message).toMatch(/'compositionWidth' must be a number but got 'object' instead/);
@@ -20,7 +20,7 @@ test('no compositionHeight should give errors', () => {
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 400, errorFallback: () => 'something went wrong', 
             // @ts-expect-error
-            compositionHeight: undefined, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }, void 0));
+            compositionHeight: undefined, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
     }
     catch (e) {
         expect(e.message).toMatch(/'compositionHeight' must be a number but got 'undefined' instead/);
@@ -30,7 +30,7 @@ test('No fps should give errors', () => {
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', 
             // @ts-expect-error
-            fps: null, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }, void 0));
+            fps: null, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
     }
     catch (e) {
         expect(e.message).toMatch(/"fps" must be a number, but you passed a value of type object/);
@@ -38,7 +38,7 @@ test('No fps should give errors', () => {
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', 
             // @ts-expect-error
-            fps: undefined, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }, void 0));
+            fps: undefined, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
     }
     catch (e) {
         expect(e.message).toMatch(/"fps" must be a number, but you passed a value of type undefined/);
@@ -48,15 +48,15 @@ test('No durationInFrames should give errors', () => {
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', fps: 30, 
             // @ts-expect-error
-            durationInFrames: undefined, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }, void 0));
+            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', () => {
     try {
-        (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true, playbackRate: -5 }, void 0));
+        (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true, playbackRate: -5 }));
     }
     catch (e) {
         expect(e.message).toMatch(/The lowest possible playback rate is -4. You passed: -5/);
@@ -64,7 +64,7 @@ test('Invalid playbackRate should give error', () => {
 });
 test('playbackRate of 0 should not be possible', () => {
     try {
-        (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true, playbackRate: 0 }, void 0));
+        (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true, playbackRate: 0 }));
     }
     catch (e) {
         expect(e.message).toMatch(/A playback rate of 0 is not supported./);
@@ -74,14 +74,14 @@ test('playbackRate of wrong type should not be possible', () => {
     try {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true, 
             // @ts-expect-error
-            playbackRate: 'hi' }, void 0));
+            playbackRate: 'hi' }));
     }
     catch (e) {
         expect(e.message).toMatch(/A playback rate of 0 is not supported./);
     }
 });
 test('playbackRate of undefined should be okay', () => {
-    (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }, void 0));
+    (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_1.HelloWorld, controls: true, showVolumeControls: true }));
     expect(true).toBe(true);
 });
 test('passing in <Composition /> instance should not be possible', () => {
@@ -93,21 +93,21 @@ test('passing in <Composition /> instance should not be possible', () => {
                 fps: 30,
                 durationInFrames: 500,
                 component: test_utils_1.HelloWorld,
-            } }, void 0));
+            } }));
     }).toThrow(/'component' must not be the 'Composition' component\. Pass your own React/);
 });
 test('passing in <Composition /> instance should not be possible', () => {
     expect(() => {
         (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, 
             // @ts-expect-error
-            component: (0, jsx_runtime_1.jsx)(remotion_1.Composition, { durationInFrames: 30, fps: 30, height: 10, width: 10, id: "hello", component: test_utils_1.HelloWorld }, void 0), controls: true, showVolumeControls: true, inputProps: {
+            component: (0, jsx_runtime_1.jsx)(remotion_1.Composition, { durationInFrames: 30, fps: 30, height: 10, width: 10, id: "hello", component: test_utils_1.HelloWorld }), controls: true, showVolumeControls: true, inputProps: {
                 id: 'HelloWorld',
                 width: 500,
                 height: 400,
                 fps: 30,
                 durationInFrames: 500,
                 component: test_utils_1.HelloWorld,
-            } }, void 0));
+            } }));
     }).toThrow(/'component' should not be an instance of <Composition\/>\. Pass the React component dir/);
 });
 test.each([
@@ -122,7 +122,7 @@ test.each([
     const props = {};
     props[a] = 'hey';
     try {
-        (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', fps: 30, durationInFrames: 100, component: test_utils_1.HelloWorld, ...props }, void 0));
+        (0, test_utils_1.render)((0, jsx_runtime_1.jsx)(index_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', fps: 30, durationInFrames: 100, component: test_utils_1.HelloWorld, ...props }));
     }
     catch (e) {
         expect(e.message).toMatch(`'${a}' must be a boolean or undefined but got 'string' instead`);

package/dist/use-playback.d.ts

@@ -1,4 +1,7 @@
-export declare const usePlayback: ({ loop, playbackRate, }: {
+export declare const usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, }: {
     loop: boolean;
     playbackRate: number;
+    moveToBeginningWhenEnded: boolean;
+    inFrame: number | null;
+    outFrame: number | null;
 }) => void;

package/dist/use-playback.js

@@ -5,12 +5,11 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const calculate_next_frame_1 = require("./calculate-next-frame");
 const use_player_1 = require("./use-player");
-const usePlayback = ({ loop, playbackRate, }) => {
+const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, }) => {
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     const { playing, pause, emitter } = (0, use_player_1.usePlayer)();
     const setFrame = remotion_1.Internals.Timeline.useTimelineSetFrame();
-    const { inFrame, outFrame } = remotion_1.Internals.Timeline.useTimelineInOutFramePosition();
     const frameRef = (0, react_1.useRef)(frame);
     frameRef.current = frame;
     const lastTimeUpdateEvent = (0, react_1.useRef)(null);
@@ -46,7 +45,8 @@ const usePlayback = ({ loop, playbackRate, }) => {
                 shouldLoop: loop,
             });
             framesAdvanced += framesToAdvance;
-            if (nextFrame !== frameRef.current) {
+            if (nextFrame !== frameRef.current &&
+                (!hasEnded || moveToBeginningWhenEnded)) {
                 setFrame(nextFrame);
             }
             if (hasEnded) {
@@ -73,6 +73,7 @@ const usePlayback = ({ loop, playbackRate, }) => {
         playbackRate,
         inFrame,
         outFrame,
+        moveToBeginningWhenEnded,
     ]);
     (0, react_1.useEffect)(() => {
         const interval = setInterval(() => {

package/dist/use-player.d.ts

@@ -1,14 +1,19 @@
-import { SyntheticEvent } from 'react';
-import { PlayerEmitter } from './event-emitter';
-export declare const usePlayer: () => {
+import type { SyntheticEvent } from 'react';
+import type { PlayerEmitter } from './event-emitter';
+declare type UsePlayerMethods = {
     frameBack: (frames: number) => void;
     frameForward: (frames: number) => void;
     isLastFrame: boolean;
+    isFirstFrame: boolean;
     emitter: PlayerEmitter;
     playing: boolean;
-    play: (e?: SyntheticEvent<Element, Event> | undefined) => void;
+    play: (e?: SyntheticEvent) => void;
     pause: () => void;
+    pauseAndReturnToPlayStart: () => void;
     seek: (newFrame: number) => void;
     getCurrentFrame: () => number;
     isPlaying: () => boolean;
+    hasPlayed: boolean;
 };
+export declare const usePlayer: () => UsePlayerMethods;
+export {};

package/dist/use-player.js

@@ -7,7 +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)(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);
@@ -19,6 +21,7 @@ const usePlayer = () => {
     const emitter = (0, react_1.useContext)(emitter_context_1.PlayerEventEmitterContext);
     const lastFrame = ((_a = config === null || config === void 0 ? void 0 : config.durationInFrames) !== null && _a !== void 0 ? _a : 1) - 1;
     const isLastFrame = frame === lastFrame;
+    const isFirstFrame = frame === 0;
     if (!emitter) {
         throw new TypeError('Expected Player event emitter context');
     }
@@ -30,6 +33,7 @@ const usePlayer = () => {
         if (imperativePlaying.current) {
             return;
         }
+        setHasPlayed(true);
         if (isLastFrame) {
             seek(0);
         }
@@ -46,6 +50,7 @@ const usePlayer = () => {
         audioAndVideoTags.current.forEach((a) => a.play());
         imperativePlaying.current = true;
         setPlaying(true);
+        playStart.current = frameRef.current;
         emitter.dispatchPlay();
     }, [
         imperativePlaying,
@@ -63,6 +68,14 @@ const usePlayer = () => {
             emitter.dispatchPause();
         }
     }, [emitter, imperativePlaying, setPlaying]);
+    const pauseAndReturnToPlayStart = (0, react_1.useCallback)(() => {
+        if (imperativePlaying.current) {
+            imperativePlaying.current = false;
+            setTimelinePosition(playStart.current);
+            setPlaying(false);
+            emitter.dispatchPause();
+        }
+    }, [emitter, imperativePlaying, setPlaying, setTimelinePosition]);
     const hasVideo = Boolean(video);
     const frameBack = (0, react_1.useCallback)((frames) => {
         if (!hasVideo) {
@@ -94,19 +107,25 @@ const usePlayer = () => {
             play,
             pause,
             seek,
+            isFirstFrame,
             getCurrentFrame: () => frameRef.current,
             isPlaying: () => imperativePlaying.current,
+            pauseAndReturnToPlayStart,
+            hasPlayed,
         };
     }, [
-        emitter,
         frameBack,
         frameForward,
-        imperativePlaying,
         isLastFrame,
-        pause,
-        play,
+        emitter,
         playing,
+        play,
+        pause,
         seek,
+        isFirstFrame,
+        pauseAndReturnToPlayStart,
+        imperativePlaying,
+        hasPlayed,
     ]);
     return returnValue;
 };

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

@@ -1,5 +1,5 @@
-import { StandardLonghandProperties } from 'csstype';
-import { Size } from './use-element-size';
+import type { StandardLonghandProperties } from 'csstype';
+import type { Size } from './use-element-size';
 export declare const calculatePlayerSize: ({ currentSize, width, height, compositionWidth, compositionHeight, }: {
     currentSize: Size | null;
     width: StandardLonghandProperties['width'] | undefined;

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/use-cancellable-promises.d.ts

@@ -1,4 +1,4 @@
-import { CancellablePromise } from './cancellable-promise';
+import type { CancellablePromise } from './cancellable-promise';
 declare const useCancellablePromises: () => {
     appendPendingPromise: (promise: CancellablePromise) => void;
     removePendingPromise: (promise: CancellablePromise) => void;

package/dist/utils/use-click-prevention-on-double-click.d.ts

@@ -1,3 +1,3 @@
-import { SyntheticEvent } from 'react';
+import type { SyntheticEvent } from 'react';
 declare const useClickPreventionOnDoubleClick: (onClick: (e: SyntheticEvent) => void, onDoubleClick: () => void, doubleClickToFullscreen: boolean) => [(e: SyntheticEvent) => void, () => void];
 export { useClickPreventionOnDoubleClick };

package/dist/utils/use-element-size.d.ts

@@ -3,6 +3,10 @@ export declare type Size = {
     height: number;
     left: number;
     top: number;
+    windowSize: {
+        width: number;
+        height: number;
+    };
 };
 export declare const updateAllElementsSizes: () => void;
 export declare const useElementSize: (ref: React.RefObject<HTMLElement>, options: {

package/dist/utils/use-element-size.js

@@ -36,6 +36,10 @@ const useElementSize = (ref, options) => {
                 height,
                 left: newSize[0].x,
                 top: newSize[0].y,
+                windowSize: {
+                    height: window.innerHeight,
+                    width: window.innerWidth,
+                },
             });
         });
     }, [options.shouldApplyCssTransforms]);
@@ -53,6 +57,10 @@ const useElementSize = (ref, options) => {
             height: rect[0].height,
             left: rect[0].x,
             top: rect[0].y,
+            windowSize: {
+                height: window.innerHeight,
+                width: window.innerWidth,
+            },
         });
     }, [ref]);
     (0, react_1.useEffect)(() => {

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;