@remotion/player 4.0.0-alpha.4 → 4.0.0-alpha11

package/dist/{index.d.ts → cjs/index.d.ts}

@@ -1,12 +1,14 @@
 /// <reference types="react" />
-import type { CallbackListener, EventTypes } from './event-emitter';
-import { PlayerEmitter } from './event-emitter';
-export { ErrorFallback, Player } from './Player';
-export { PlayerMethods, PlayerRef } from './player-methods';
-export type { RenderLoading } from './PlayerUI';
-export { PreviewSize } from './utils/preview-size';
-export { Size } from './utils/use-element-size';
-export type { CallbackListener, EventTypes };
+import type { CallbackListener, PlayerEventTypes } from './event-emitter.js';
+import { PlayerEmitter } from './event-emitter.js';
+export { PlayerMethods, PlayerRef, ThumbnailMethods, ThumbnailRef, } from './player-methods.js';
+export { Player, PlayerProps } from './Player.js';
+export type { RenderFullscreenButton, RenderPlayPauseButton, } from './PlayerControls.js';
+export type { ErrorFallback, RenderLoading, RenderPoster } from './PlayerUI.js';
+export { Thumbnail } from './Thumbnail.js';
+export { PreviewSize, Translation } from './utils/preview-size.js';
+export { Size } from './utils/use-element-size.js';
+export type { CallbackListener, PlayerEventTypes as EventTypes };
 export declare const PlayerInternals: {
     PlayerEventEmitterContext: import("react").Context<PlayerEmitter | undefined>;
     PlayerEmitter: typeof PlayerEmitter;
@@ -14,6 +16,7 @@ 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;
@@ -22,6 +25,7 @@ export declare const PlayerInternals: {
         seek: (newFrame: number) => void;
         getCurrentFrame: () => number;
         isPlaying: () => boolean;
+        hasPlayed: boolean;
     };
     usePlayback: ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, }: {
         loop: boolean;
@@ -33,12 +37,12 @@ export declare const PlayerInternals: {
     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;
+    }) => import("./utils/use-element-size.js").Size | null;
+    calculateCanvasTransformation: ({ previewSize, compositionWidth, compositionHeight, canvasSize, }: {
+        previewSize: number | "auto";
         compositionWidth: number;
         compositionHeight: number;
-        canvasSize: import("./utils/use-element-size").Size;
+        canvasSize: import("./utils/use-element-size.js").Size;
     }) => {
         centerX: number;
         centerY: number;
@@ -48,4 +52,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.js").Size;
+    }) => number;
 };

package/dist/cjs/index.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlayerInternals = exports.Thumbnail = exports.Player = void 0;
+const calculate_scale_js_1 = require("./calculate-scale.js");
+const emitter_context_js_1 = require("./emitter-context.js");
+const event_emitter_js_1 = require("./event-emitter.js");
+const use_hover_state_js_1 = require("./use-hover-state.js");
+const use_playback_js_1 = require("./use-playback.js");
+const use_player_js_1 = require("./use-player.js");
+const use_element_size_js_1 = require("./utils/use-element-size.js");
+var Player_js_1 = require("./Player.js");
+Object.defineProperty(exports, "Player", { enumerable: true, get: function () { return Player_js_1.Player; } });
+var Thumbnail_js_1 = require("./Thumbnail.js");
+Object.defineProperty(exports, "Thumbnail", { enumerable: true, get: function () { return Thumbnail_js_1.Thumbnail; } });
+exports.PlayerInternals = {
+    PlayerEventEmitterContext: emitter_context_js_1.PlayerEventEmitterContext,
+    PlayerEmitter: event_emitter_js_1.PlayerEmitter,
+    usePlayer: use_player_js_1.usePlayer,
+    usePlayback: use_playback_js_1.usePlayback,
+    useElementSize: use_element_size_js_1.useElementSize,
+    calculateCanvasTransformation: calculate_scale_js_1.calculateCanvasTransformation,
+    useHoverState: use_hover_state_js_1.useHoverState,
+    updateAllElementsSizes: use_element_size_js_1.updateAllElementsSizes,
+    calculateScale: calculate_scale_js_1.calculateScale,
+};

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

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

package/dist/cjs/is-backgrounded.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsBackgrounded = void 0;
+const react_1 = require("react");
+const getIsBackgrounded = () => {
+    if (typeof document === 'undefined') {
+        return false;
+    }
+    return document.visibilityState === 'hidden';
+};
+const useIsBackgrounded = () => {
+    const isBackgrounded = (0, react_1.useRef)(getIsBackgrounded());
+    (0, react_1.useEffect)(() => {
+        const onVisibilityChange = () => {
+            isBackgrounded.current = getIsBackgrounded();
+        };
+        document.addEventListener('visibilitychange', onVisibilityChange);
+        return () => {
+            document.removeEventListener('visibilitychange', onVisibilityChange);
+        };
+    }, []);
+    return isBackgrounded;
+};
+exports.useIsBackgrounded = useIsBackgrounded;

package/dist/{player-css-classname.d.ts → cjs/player-css-classname.d.ts}

@@ -1,2 +1 @@
 export declare const PLAYER_CSS_CLASSNAME = "__remotion-player";
-export declare const VOLUME_SLIDER_INPUT_CSS_CLASSNAME: string;

package/dist/cjs/player-css-classname.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PLAYER_CSS_CLASSNAME = void 0;
+exports.PLAYER_CSS_CLASSNAME = '__remotion-player';

package/dist/{player-methods.d.ts → cjs/player-methods.d.ts}

@@ -1,15 +1,18 @@
 import type { SyntheticEvent } from 'react';
-import type { PlayerEmitter } from './event-emitter';
-export declare type PlayerMethods = {
+import type { PlayerEmitter } from './event-emitter.js';
+export declare type ThumbnailMethods = {
+    getContainerNode: () => HTMLDivElement | null;
+    getScale: () => number;
+};
+export declare type PlayerMethods = ThumbnailMethods & {
     play: (e?: SyntheticEvent) => void;
     pause: () => void;
     toggle: (e?: SyntheticEvent) => void;
     seekTo: (frame: number) => void;
-    getContainerNode: () => HTMLDivElement | null;
     getCurrentFrame: () => number;
     requestFullscreen: () => void;
     exitFullscreen: () => void;
-    isFullscreen: () => void;
+    isFullscreen: () => boolean;
     setVolume: (num: number) => void;
     getVolume: () => number;
     isMuted: () => boolean;
@@ -17,4 +20,5 @@ export declare type PlayerMethods = {
     mute: () => void;
     unmute: () => void;
 };
+export declare type ThumbnailRef = PlayerEmitter & ThumbnailMethods;
 export declare type PlayerRef = PlayerEmitter & PlayerMethods;

package/dist/cjs/test/index.test.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vitest_1 = require("vitest");
+const use_player_js_1 = require("../use-player.js");
+(0, vitest_1.test)('It should throw an error if not being used inside a RemotionRoot', () => {
+    (0, vitest_1.expect)(() => {
+        (0, use_player_js_1.usePlayer)();
+    }).toThrow();
+});

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

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

package/dist/cjs/test/validate-prop.test.d.ts

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

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

@@ -0,0 +1,131 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const remotion_1 = require("remotion");
+const vitest_1 = require("vitest");
+const index_js_1 = require("../index.js");
+const test_utils_js_1 = require("./test-utils.js");
+(0, vitest_1.test)('no compositionWidth should give errors', () => {
+    try {
+        (0, test_utils_js_1.render)((0, jsx_runtime_1.jsx)(index_js_1.Player
+        // @ts-expect-error
+        , { 
+            // @ts-expect-error
+            compositionWidth: null, errorFallback: () => 'something went wrong', compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_js_1.HelloWorld, controls: true, showVolumeControls: true }));
+    }
+    catch (e) {
+        (0, vitest_1.expect)(e.message).toMatch(/'compositionWidth' must be a number but got 'object' instead/);
+    }
+});
+(0, vitest_1.test)('no compositionHeight should give errors', () => {
+    try {
+        (0, test_utils_js_1.render)((0, jsx_runtime_1.jsx)(index_js_1.Player, { compositionWidth: 400, errorFallback: () => 'something went wrong', 
+            // @ts-expect-error
+            compositionHeight: undefined, fps: 30, durationInFrames: 500, component: test_utils_js_1.HelloWorld, controls: true, showVolumeControls: true }));
+    }
+    catch (e) {
+        (0, vitest_1.expect)(e.message).toMatch(/'compositionHeight' must be a number but got 'undefined' instead/);
+    }
+});
+(0, vitest_1.test)('No fps should give errors', () => {
+    try {
+        (0, test_utils_js_1.render)((0, jsx_runtime_1.jsx)(index_js_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', 
+            // @ts-expect-error
+            fps: null, durationInFrames: 500, component: test_utils_js_1.HelloWorld, controls: true, showVolumeControls: true }));
+    }
+    catch (e) {
+        (0, vitest_1.expect)(e.message).toMatch(/"fps" must be a number, but you passed a value of type object/);
+    }
+    try {
+        (0, test_utils_js_1.render)((0, jsx_runtime_1.jsx)(index_js_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', 
+            // @ts-expect-error
+            fps: undefined, durationInFrames: 500, component: test_utils_js_1.HelloWorld, controls: true, showVolumeControls: true }));
+    }
+    catch (e) {
+        (0, vitest_1.expect)(e.message).toMatch(/"fps" must be a number, but you passed a value of type undefined/);
+    }
+});
+(0, vitest_1.test)('No durationInFrames should give errors', () => {
+    try {
+        (0, test_utils_js_1.render)((0, jsx_runtime_1.jsx)(index_js_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', fps: 30, 
+            // @ts-expect-error
+            durationInFrames: undefined, component: test_utils_js_1.HelloWorld, controls: true, showVolumeControls: true }));
+    }
+    catch (e) {
+        (0, vitest_1.expect)(e.message).toMatch(/durationInFrames` must be a number, but is undefined/);
+    }
+});
+(0, vitest_1.test)('Invalid playbackRate should give error', () => {
+    try {
+        (0, test_utils_js_1.render)((0, jsx_runtime_1.jsx)(index_js_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_js_1.HelloWorld, controls: true, showVolumeControls: true, playbackRate: -5, inputProps: {} }));
+    }
+    catch (e) {
+        (0, vitest_1.expect)(e.message).toMatch(/The lowest possible playback rate is -4. You passed: -5/);
+    }
+});
+(0, vitest_1.test)('playbackRate of 0 should not be possible', () => {
+    try {
+        (0, test_utils_js_1.render)((0, jsx_runtime_1.jsx)(index_js_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_js_1.HelloWorld, controls: true, showVolumeControls: true, playbackRate: 0 }));
+    }
+    catch (e) {
+        (0, vitest_1.expect)(e.message).toMatch(/A playback rate of 0 is not supported./);
+    }
+});
+(0, vitest_1.test)('playbackRate of wrong type should not be possible', () => {
+    try {
+        (0, test_utils_js_1.render)((0, jsx_runtime_1.jsx)(index_js_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_js_1.HelloWorld, controls: true, showVolumeControls: true, 
+            // @ts-expect-error
+            playbackRate: 'hi' }));
+    }
+    catch (e) {
+        (0, vitest_1.expect)(e.message).toMatch(/A playback rate of 0 is not supported./);
+    }
+});
+(0, vitest_1.test)('playbackRate of undefined should be okay', () => {
+    (0, test_utils_js_1.render)((0, jsx_runtime_1.jsx)(index_js_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: test_utils_js_1.HelloWorld, controls: true, showVolumeControls: true }));
+    (0, vitest_1.expect)(true).toBe(true);
+});
+(0, vitest_1.test)('passing in <Composition /> instance should not be possible', () => {
+    (0, vitest_1.expect)(() => {
+        (0, test_utils_js_1.render)((0, jsx_runtime_1.jsx)(index_js_1.Player, { compositionWidth: 500, compositionHeight: 400, fps: 30, durationInFrames: 500, component: remotion_1.Composition, controls: true, showVolumeControls: true, inputProps: {
+                id: 'HelloWorld',
+                width: 500,
+                height: 400,
+                fps: 30,
+                durationInFrames: 500,
+                component: test_utils_js_1.HelloWorld,
+            } }));
+    }).toThrow(/'component' must not be the 'Composition' component\. Pass your own React/);
+});
+(0, vitest_1.test)('passing in <Composition /> instance should not be possible', () => {
+    (0, vitest_1.expect)(() => {
+        (0, test_utils_js_1.render)((0, jsx_runtime_1.jsx)(index_js_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_js_1.HelloWorld }), controls: true, showVolumeControls: true, inputProps: {
+                id: 'HelloWorld',
+                width: 500,
+                height: 400,
+                fps: 30,
+                durationInFrames: 500,
+                component: test_utils_js_1.HelloWorld,
+            } }));
+    }).toThrow(/'component' should not be an instance of <Composition\/>\. Pass the React component dir/);
+});
+vitest_1.test.each([
+    ['controls'],
+    ['loop'],
+    ['autoPlay'],
+    ['showVolumeControls'],
+    ['allowFullscreen'],
+    ['clickToPlay'],
+    ['doubleClickToFullscreen'],
+])('No durationInFrames should give errors %s', (a) => {
+    const props = {};
+    props[a] = 'hey';
+    try {
+        (0, test_utils_js_1.render)((0, jsx_runtime_1.jsx)(index_js_1.Player, { compositionWidth: 500, compositionHeight: 400, errorFallback: () => 'something went wrong', fps: 30, durationInFrames: 100, component: test_utils_js_1.HelloWorld, ...props }));
+    }
+    catch (e) {
+        (0, vitest_1.expect)(e.message).toMatch(`'${a}' must be a boolean or undefined but got 'string' instead`);
+    }
+});

package/dist/{use-playback.js → cjs/use-playback.js}

@@ -3,13 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePlayback = void 0;
 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 calculate_next_frame_js_1 = require("./calculate-next-frame.js");
+const is_backgrounded_js_1 = require("./is-backgrounded.js");
+const use_player_js_1 = require("./use-player.js");
 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 { playing, pause, emitter } = (0, use_player_js_1.usePlayer)();
     const setFrame = remotion_1.Internals.Timeline.useTimelineSetFrame();
+    // requestAnimationFrame() does not work if the tab is not active.
+    // This means that audio will keep playing even if it has ended.
+    // In that case, we use setTimeout() instead.
+    const isBackgroundedRef = (0, is_backgrounded_js_1.useIsBackgrounded)();
     const frameRef = (0, react_1.useRef)(frame);
     frameRef.current = frame;
     const lastTimeUpdateEvent = (0, react_1.useRef)(null);
@@ -24,17 +29,25 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
         let reqAnimFrameCall = null;
         const startedTime = performance.now();
         let framesAdvanced = 0;
-        const stop = () => {
-            hasBeenStopped = true;
+        const cancelQueuedFrame = () => {
             if (reqAnimFrameCall !== null) {
-                cancelAnimationFrame(reqAnimFrameCall);
+                if (reqAnimFrameCall.type === 'raf') {
+                    cancelAnimationFrame(reqAnimFrameCall.id);
+                }
+                else {
+                    clearTimeout(reqAnimFrameCall.id);
+                }
             }
         };
+        const stop = () => {
+            hasBeenStopped = true;
+            cancelQueuedFrame();
+        };
         const callback = () => {
             const time = performance.now() - startedTime;
             const actualLastFrame = outFrame !== null && outFrame !== void 0 ? outFrame : config.durationInFrames - 1;
             const actualFirstFrame = inFrame !== null && inFrame !== void 0 ? inFrame : 0;
-            const { nextFrame, framesToAdvance, hasEnded } = (0, calculate_next_frame_1.calculateNextFrame)({
+            const { nextFrame, framesToAdvance, hasEnded } = (0, calculate_next_frame_js_1.calculateNextFrame)({
                 time,
                 currentFrame: frameRef.current,
                 playbackSpeed: playbackRate,
@@ -56,11 +69,34 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
                 return;
             }
             if (!hasBeenStopped) {
-                reqAnimFrameCall = requestAnimationFrame(callback);
+                queueNextFrame();
+            }
+        };
+        const queueNextFrame = () => {
+            if (isBackgroundedRef.current) {
+                reqAnimFrameCall = {
+                    type: 'timeout',
+                    // Note: Most likely, this will not be 1000 / fps, but the browser will throttle it to ~1/sec.
+                    id: setTimeout(callback, 1000 / config.fps),
+                };
+            }
+            else {
+                reqAnimFrameCall = { type: 'raf', id: requestAnimationFrame(callback) };
+            }
+        };
+        queueNextFrame();
+        const onVisibilityChange = () => {
+            if (document.visibilityState === 'visible') {
+                return;
             }
+            // If tab goes into the background, cancel requestAnimationFrame() and update immediately.
+            // , so the transition to setTimeout() can be fulfilled.
+            cancelQueuedFrame();
+            callback();
         };
-        reqAnimFrameCall = requestAnimationFrame(callback);
+        window.addEventListener('visibilitychange', onVisibilityChange);
         return () => {
+            window.removeEventListener('visibilitychange', onVisibilityChange);
             stop();
         };
     }, [
@@ -74,6 +110,7 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
         inFrame,
         outFrame,
         moveToBeginningWhenEnded,
+        isBackgroundedRef,
     ]);
     (0, react_1.useEffect)(() => {
         const interval = setInterval(() => {
@@ -85,5 +122,8 @@ const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, ou
         }, 250);
         return () => clearInterval(interval);
     }, [emitter]);
+    (0, react_1.useEffect)(() => {
+        emitter.dispatchFrameUpdate({ frame });
+    }, [emitter, frame]);
 };
 exports.usePlayback = usePlayback;

package/dist/{use-player.d.ts → cjs/use-player.d.ts}

@@ -1,9 +1,10 @@
 import type { SyntheticEvent } from 'react';
-import type { PlayerEmitter } from './event-emitter';
+import type { PlayerEmitter } from './event-emitter.js';
 declare type UsePlayerMethods = {
     frameBack: (frames: number) => void;
     frameForward: (frames: number) => void;
     isLastFrame: boolean;
+    isFirstFrame: boolean;
     emitter: PlayerEmitter;
     playing: boolean;
     play: (e?: SyntheticEvent) => void;
@@ -12,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 → cjs/use-player.js}

@@ -3,12 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePlayer = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const emitter_context_1 = require("./emitter-context");
+const emitter_context_js_1 = require("./emitter-context.js");
 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);
@@ -17,9 +18,10 @@ const usePlayer = () => {
     frameRef.current = frame;
     const video = remotion_1.Internals.useVideo();
     const config = remotion_1.Internals.useUnsafeVideoConfig();
-    const emitter = (0, react_1.useContext)(emitter_context_1.PlayerEventEmitterContext);
+    const emitter = (0, react_1.useContext)(emitter_context_js_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');
     }
@@ -31,6 +33,7 @@ const usePlayer = () => {
         if (imperativePlaying.current) {
             return;
         }
+        setHasPlayed(true);
         if (isLastFrame) {
             seek(0);
         }
@@ -104,21 +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,
-        pauseAndReturnToPlayStart,
+        play,
+        pause,
         seek,
+        isFirstFrame,
+        pauseAndReturnToPlayStart,
+        imperativePlaying,
+        hasPlayed,
     ]);
     return returnValue;
 };

package/dist/cjs/use-thumbnail.d.ts

@@ -0,0 +1,6 @@
+import type { ThumbnailEmitter } from './event-emitter.js';
+declare type UseThumbnailMethods = {
+    emitter: ThumbnailEmitter;
+};
+export declare const useThumbnail: () => UseThumbnailMethods;
+export {};

package/dist/cjs/use-thumbnail.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useThumbnail = void 0;
+const react_1 = require("react");
+const emitter_context_js_1 = require("./emitter-context.js");
+const useThumbnail = () => {
+    const emitter = (0, react_1.useContext)(emitter_context_js_1.ThumbnailEmitterContext);
+    if (!emitter) {
+        throw new TypeError('Expected Player event emitter context');
+    }
+    const returnValue = (0, react_1.useMemo)(() => {
+        return {
+            emitter,
+        };
+    }, [emitter]);
+    return returnValue;
+};
+exports.useThumbnail = useThumbnail;

package/dist/cjs/use-video-controls-resize.d.ts

@@ -0,0 +1,11 @@
+declare type Info = {
+    maxTimeLabelWidth: number | null;
+    displayVerticalVolumeSlider: boolean;
+};
+export declare const X_SPACER = 10;
+export declare const X_PADDING = 12;
+export declare const useVideoControlsResize: ({ allowFullscreen: allowFullScreen, playerWidth, }: {
+    allowFullscreen: boolean;
+    playerWidth: number;
+}) => Info;
+export {};

package/dist/cjs/use-video-controls-resize.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useVideoControlsResize = exports.X_PADDING = exports.X_SPACER = void 0;
+const react_1 = require("react");
+const icons_js_1 = require("./icons.js");
+const MediaVolumeSlider_js_1 = require("./MediaVolumeSlider.js");
+exports.X_SPACER = 10;
+exports.X_PADDING = 12;
+const useVideoControlsResize = ({ allowFullscreen: allowFullScreen, playerWidth, }) => {
+    const resizeInfo = (0, react_1.useMemo)(() => {
+        const playPauseIconSize = icons_js_1.ICON_SIZE;
+        const volumeIconSize = icons_js_1.ICON_SIZE;
+        const _fullscreenIconSize = allowFullScreen ? icons_js_1.fullscreenIconSize : 0;
+        const elementsSize = volumeIconSize +
+            playPauseIconSize +
+            _fullscreenIconSize +
+            exports.X_PADDING * 2 +
+            exports.X_SPACER * 2;
+        const maxTimeLabelWidth = playerWidth - elementsSize;
+        const maxTimeLabelWidthWithoutNegativeValue = Math.max(maxTimeLabelWidth, 0);
+        const availableTimeLabelWidthIfVolumeOpen = maxTimeLabelWidthWithoutNegativeValue - MediaVolumeSlider_js_1.VOLUME_SLIDER_WIDTH;
+        // If max label width is lower than the volume width
+        // then it means we need to take it's width as the max label width
+        // otherwise we took the available width when volume open
+        const computedLabelWidth = availableTimeLabelWidthIfVolumeOpen < MediaVolumeSlider_js_1.VOLUME_SLIDER_WIDTH
+            ? maxTimeLabelWidthWithoutNegativeValue
+            : availableTimeLabelWidthIfVolumeOpen;
+        const minWidthForHorizontalDisplay = computedLabelWidth + elementsSize + MediaVolumeSlider_js_1.VOLUME_SLIDER_WIDTH;
+        const displayVerticalVolumeSlider = playerWidth < minWidthForHorizontalDisplay;
+        return {
+            maxTimeLabelWidth: maxTimeLabelWidthWithoutNegativeValue === 0
+                ? null
+                : maxTimeLabelWidthWithoutNegativeValue,
+            displayVerticalVolumeSlider,
+        };
+    }, [allowFullScreen, playerWidth]);
+    return resizeInfo;
+};
+exports.useVideoControlsResize = useVideoControlsResize;