@remotion/player 4.0.0-lambda.3 → 4.0.0-newpathfunctions.13

package/dist/esm/utils/use-cancellable-promises.js

@@ -0,0 +1,18 @@
+import { useCallback, useMemo, useRef } from 'react';
+const useCancellablePromises = () => {
+    const pendingPromises = useRef([]);
+    const appendPendingPromise = useCallback((promise) => {
+        pendingPromises.current = [...pendingPromises.current, promise];
+    }, []);
+    const removePendingPromise = useCallback((promise) => {
+        pendingPromises.current = pendingPromises.current.filter((p) => p !== promise);
+    }, []);
+    const clearPendingPromises = useCallback(() => pendingPromises.current.map((p) => p.cancel()), []);
+    const api = useMemo(() => ({
+        appendPendingPromise,
+        removePendingPromise,
+        clearPendingPromises,
+    }), [appendPendingPromise, clearPendingPromises, removePendingPromise]);
+    return api;
+};
+export { useCancellablePromises };

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

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

package/dist/esm/utils/use-click-prevention-on-double-click.js

@@ -0,0 +1,42 @@
+import { useCallback, useMemo } from 'react';
+import { cancellablePromise } from './cancellable-promise';
+import { delay } from './delay';
+import { useCancellablePromises } from './use-cancellable-promises';
+const useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFullscreen) => {
+    const api = useCancellablePromises();
+    const handleClick = useCallback(async (e) => {
+        api.clearPendingPromises();
+        const waitForClick = cancellablePromise(delay(200));
+        api.appendPendingPromise(waitForClick);
+        try {
+            await waitForClick.promise;
+            api.removePendingPromise(waitForClick);
+            onClick(e);
+        }
+        catch (errorInfo) {
+            const info = errorInfo;
+            api.removePendingPromise(waitForClick);
+            if (!info.isCanceled) {
+                throw info.error;
+            }
+        }
+    }, [api, onClick]);
+    const handleDoubleClick = useCallback(() => {
+        api.clearPendingPromises();
+        onDoubleClick();
+    }, [api, onDoubleClick]);
+    const returnValue = useMemo(() => {
+        if (!doubleClickToFullscreen) {
+            return [onClick, onDoubleClick];
+        }
+        return [handleClick, handleDoubleClick];
+    }, [
+        doubleClickToFullscreen,
+        handleClick,
+        handleDoubleClick,
+        onClick,
+        onDoubleClick,
+    ]);
+    return returnValue;
+};
+export { useClickPreventionOnDoubleClick };

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

@@ -0,0 +1,16 @@
+export declare type Size = {
+    width: number;
+    height: number;
+    left: number;
+    top: number;
+    windowSize: {
+        width: number;
+        height: number;
+    };
+    refresh: () => void;
+};
+export declare const updateAllElementsSizes: () => void;
+export declare const useElementSize: (ref: React.RefObject<HTMLElement>, options: {
+    triggerOnWindowResize: boolean;
+    shouldApplyCssTransforms: boolean;
+}) => Size | null;

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

@@ -0,0 +1,93 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+let elementSizeHooks = [];
+export const updateAllElementsSizes = () => {
+    for (const listener of elementSizeHooks) {
+        listener();
+    }
+};
+export const useElementSize = (ref, options) => {
+    const [size, setSize] = useState(null);
+    const observer = useMemo(() => {
+        if (typeof ResizeObserver === 'undefined') {
+            return null;
+        }
+        return new ResizeObserver((entries) => {
+            // The contentRect returns the width without any `scale()`'s being applied. The height is wrong
+            const { contentRect } = entries[0];
+            // The clientRect returns the size with `scale()` being applied.
+            const newSize = entries[0].target.getClientRects();
+            if (!newSize || !newSize[0]) {
+                setSize(null);
+                return;
+            }
+            const probableCssParentScale = newSize[0].width / contentRect.width;
+            const width = options.shouldApplyCssTransforms
+                ? newSize[0].width
+                : newSize[0].width * (1 / probableCssParentScale);
+            const height = options.shouldApplyCssTransforms
+                ? newSize[0].height
+                : newSize[0].height * (1 / probableCssParentScale);
+            setSize({
+                width,
+                height,
+                left: newSize[0].x,
+                top: newSize[0].y,
+                windowSize: {
+                    height: window.innerHeight,
+                    width: window.innerWidth,
+                },
+            });
+        });
+    }, [options.shouldApplyCssTransforms]);
+    const updateSize = useCallback(() => {
+        if (!ref.current) {
+            return;
+        }
+        const rect = ref.current.getClientRects();
+        if (!rect[0]) {
+            setSize(null);
+            return;
+        }
+        setSize({
+            width: rect[0].width,
+            height: rect[0].height,
+            left: rect[0].x,
+            top: rect[0].y,
+            windowSize: {
+                height: window.innerHeight,
+                width: window.innerWidth,
+            },
+        });
+    }, [ref]);
+    useEffect(() => {
+        if (!observer) {
+            return;
+        }
+        updateSize();
+        const { current } = ref;
+        if (ref.current) {
+            observer.observe(ref.current);
+        }
+        return () => {
+            if (current) {
+                observer.unobserve(current);
+            }
+        };
+    }, [observer, ref, updateSize]);
+    useEffect(() => {
+        if (!options.triggerOnWindowResize) {
+            return;
+        }
+        window.addEventListener('resize', updateSize);
+        return () => {
+            window.removeEventListener('resize', updateSize);
+        };
+    }, [options.triggerOnWindowResize, updateSize]);
+    useEffect(() => {
+        elementSizeHooks.push(updateSize);
+        return () => {
+            elementSizeHooks = elementSizeHooks.filter((e) => e !== updateSize);
+        };
+    }, [updateSize]);
+    return size ? { ...size, refresh: updateSize } : null;
+};

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

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

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

@@ -0,0 +1,49 @@
+export const validateSingleFrame = (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;
+};
+export const validateInOutFrames = ({ inFrame, durationInFrames, outFrame, }) => {
+    const validatedInFrame = validateSingleFrame(inFrame, 'inFrame');
+    const validatedOutFrame = validateSingleFrame(outFrame, 'outFrame');
+    if (validatedInFrame === null && validatedOutFrame === 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 (validatedOutFrame !== null && validatedOutFrame > durationInFrames - 1) {
+        throw new Error('outFrame must be less than (durationInFrames - 1), but is ' +
+            validatedOutFrame);
+    }
+    // Must not be under 0
+    if (validatedInFrame !== null && validatedInFrame < 0) {
+        throw new Error('inFrame must be greater than 0, but is ' + validatedInFrame);
+    }
+    if (validatedOutFrame !== null && validatedOutFrame <= 0) {
+        throw new Error(`outFrame must be greater than 0, but is ${validatedOutFrame}. If you want to render a single frame, use <Thumbnail /> instead.`);
+    }
+    if (validatedOutFrame !== null &&
+        validatedInFrame !== null &&
+        validatedOutFrame <= validatedInFrame) {
+        throw new Error('outFrame must be greater than inFrame, but is ' +
+            validatedOutFrame +
+            ' <= ' +
+            validatedInFrame);
+    }
+};

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

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

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

@@ -0,0 +1,23 @@
+export const validateInitialFrame = ({ initialFrame, durationInFrames, }) => {
+    if (typeof durationInFrames !== 'number') {
+        throw new Error(`\`durationInFrames\` must be a number, but is ${JSON.stringify(durationInFrames)}`);
+    }
+    if (typeof initialFrame === 'undefined') {
+        return;
+    }
+    if (typeof initialFrame !== 'number') {
+        throw new Error(`\`initialFrame\` must be a number, but is ${JSON.stringify(initialFrame)}`);
+    }
+    if (Number.isNaN(initialFrame)) {
+        throw new Error(`\`initialFrame\` must be a number, but is NaN`);
+    }
+    if (!Number.isFinite(initialFrame)) {
+        throw new Error(`\`initialFrame\` must be a number, but is Infinity`);
+    }
+    if (initialFrame % 1 !== 0) {
+        throw new Error(`\`initialFrame\` must be an integer, but is ${JSON.stringify(initialFrame)}`);
+    }
+    if (initialFrame > durationInFrames - 1) {
+        throw new Error(`\`initialFrame\` must be less or equal than \`durationInFrames - 1\`, but is ${JSON.stringify(initialFrame)}`);
+    }
+};

package/dist/esm/utils/validate-playbackrate.d.ts

@@ -0,0 +1 @@
+export declare const validatePlaybackRate: (playbackRate: number | undefined) => void;

package/dist/esm/utils/validate-playbackrate.js

@@ -0,0 +1,14 @@
+export const validatePlaybackRate = (playbackRate) => {
+    if (playbackRate === undefined) {
+        return;
+    }
+    if (playbackRate > 4) {
+        throw new Error(`The highest possible playback rate is 4. You passed: ${playbackRate}`);
+    }
+    if (playbackRate < -4) {
+        throw new Error(`The lowest possible playback rate is -4. You passed: ${playbackRate}`);
+    }
+    if (playbackRate === 0) {
+        throw new Error(`A playback rate of 0 is not supported.`);
+    }
+};

package/dist/esm/volume-persistance.d.ts

@@ -0,0 +1,2 @@
+export declare const persistVolume: (volume: number) => void;
+export declare const getPreferredVolume: () => number;

package/dist/esm/volume-persistance.js

@@ -0,0 +1,14 @@
+const VOLUME_PERSISTANCE_KEY = 'remotion.volumePreference';
+export const persistVolume = (volume) => {
+    if (typeof window === 'undefined') {
+        return;
+    }
+    window.localStorage.setItem(VOLUME_PERSISTANCE_KEY, String(volume));
+};
+export const getPreferredVolume = () => {
+    if (typeof window === 'undefined') {
+        return 1;
+    }
+    const val = window.localStorage.getItem(VOLUME_PERSISTANCE_KEY);
+    return val ? Number(val) : 1;
+};

package/dist/event-emitter.d.ts

@@ -7,10 +7,16 @@ declare type ErrorPayload = {
 declare type TimeUpdateEventPayload = {
     frame: number;
 };
+declare type FrameUpdateEventPayload = {
+    frame: number;
+};
 declare type RateChangeEventPayload = {
     playbackRate: number;
 };
-declare type StateEventMap = {
+declare type FullscreenChangeEventPayload = {
+    isFullscreen: boolean;
+};
+declare type PlayerStateEventMap = {
     seeked: SeekPayload;
     pause: undefined;
     play: undefined;
@@ -18,18 +24,27 @@ declare type StateEventMap = {
     ended: undefined;
     error: ErrorPayload;
     timeupdate: TimeUpdateEventPayload;
+    frameupdate: FrameUpdateEventPayload;
+    fullscreenchange: FullscreenChangeEventPayload;
+};
+declare type ThumbnailStateEventMap = {
+    error: ErrorPayload;
 };
-export declare type EventTypes = keyof StateEventMap;
-export declare type CallbackListener<T extends EventTypes> = (data: {
-    detail: StateEventMap[T];
+export declare type PlayerEventTypes = keyof PlayerStateEventMap;
+export declare type ThumbnailEventTypes = keyof ThumbnailStateEventMap;
+export declare type CallbackListener<T extends PlayerEventTypes> = (data: {
+    detail: PlayerStateEventMap[T];
 }) => void;
-declare type Listeners = {
-    [EventType in EventTypes]: CallbackListener<EventType>[];
+declare type PlayerListeners = {
+    [EventType in PlayerEventTypes]: CallbackListener<EventType>[];
+};
+declare type ThumbnailListeners = {
+    [EventType in ThumbnailEventTypes]: CallbackListener<EventType>[];
 };
 export declare class PlayerEmitter {
-    listeners: Listeners;
-    addEventListener<Q extends EventTypes>(name: Q, callback: CallbackListener<Q>): void;
-    removeEventListener<Q extends EventTypes>(name: Q, callback: CallbackListener<Q>): void;
+    listeners: PlayerListeners;
+    addEventListener<Q extends PlayerEventTypes>(name: Q, callback: CallbackListener<Q>): void;
+    removeEventListener<Q extends PlayerEventTypes>(name: Q, callback: CallbackListener<Q>): void;
     private dispatchEvent;
     dispatchSeek(frame: number): void;
     dispatchPause(): void;
@@ -38,5 +53,14 @@ export declare class PlayerEmitter {
     dispatchRatechange(playbackRate: number): void;
     dispatchError(error: Error): void;
     dispatchTimeUpdate(event: TimeUpdateEventPayload): void;
+    dispatchFrameUpdate(event: FrameUpdateEventPayload): void;
+    dispatchFullscreenChangeUpdate(event: FullscreenChangeEventPayload): void;
+}
+export declare class ThumbnailEmitter {
+    listeners: ThumbnailListeners;
+    addEventListener<Q extends ThumbnailEventTypes>(name: Q, callback: CallbackListener<Q>): void;
+    removeEventListener<Q extends ThumbnailEventTypes>(name: Q, callback: CallbackListener<Q>): void;
+    private dispatchEvent;
+    dispatchError(error: Error): void;
 }
 export {};

package/dist/event-emitter.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PlayerEmitter = void 0;
+exports.ThumbnailEmitter = exports.PlayerEmitter = void 0;
 class PlayerEmitter {
     constructor() {
         this.listeners = {
@@ -11,6 +11,8 @@ class PlayerEmitter {
             ratechange: [],
             seeked: [],
             timeupdate: [],
+            frameupdate: [],
+            fullscreenchange: [],
         };
     }
     addEventListener(name, callback) {
@@ -51,5 +53,35 @@ class PlayerEmitter {
     dispatchTimeUpdate(event) {
         this.dispatchEvent('timeupdate', event);
     }
+    dispatchFrameUpdate(event) {
+        this.dispatchEvent('frameupdate', event);
+    }
+    dispatchFullscreenChangeUpdate(event) {
+        this.dispatchEvent('fullscreenchange', event);
+    }
 }
 exports.PlayerEmitter = PlayerEmitter;
+class ThumbnailEmitter {
+    constructor() {
+        this.listeners = {
+            error: [],
+        };
+    }
+    addEventListener(name, callback) {
+        this.listeners[name].push(callback);
+    }
+    removeEventListener(name, callback) {
+        this.listeners[name] = this.listeners[name].filter((l) => l !== callback);
+    }
+    dispatchEvent(dispatchName, context) {
+        this.listeners[dispatchName].forEach((callback) => {
+            callback({ detail: context });
+        });
+    }
+    dispatchError(error) {
+        this.dispatchEvent('error', {
+            error,
+        });
+    }
+}
+exports.ThumbnailEmitter = ThumbnailEmitter;

package/dist/icons.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 export declare const ICON_SIZE = 25;
+export declare const fullscreenIconSize = 16;
 export declare const PlayIcon: React.FC;
 export declare const PauseIcon: React.FC;
 export declare const FullscreenIcon: React.FC<{
-    minimized: boolean;
+    isFullscreen: boolean;
 }>;
 export declare const VolumeOffIcon: React.FC;
 export declare const VolumeOnIcon: React.FC;

package/dist/icons.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VolumeOnIcon = exports.VolumeOffIcon = exports.FullscreenIcon = exports.PauseIcon = exports.PlayIcon = exports.ICON_SIZE = void 0;
+exports.VolumeOnIcon = exports.VolumeOffIcon = exports.FullscreenIcon = exports.PauseIcon = exports.PlayIcon = exports.fullscreenIconSize = exports.ICON_SIZE = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 exports.ICON_SIZE = 25;
-const fullscreenIconSize = 16;
+exports.fullscreenIconSize = 16;
 const rotate = {
     transform: `rotate(90deg)`,
 };
@@ -15,13 +15,13 @@ 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" }), (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 }) => {
+const FullscreenIcon = ({ isFullscreen, }) => {
     const strokeWidth = 6;
     const viewSize = 32;
-    const out = minimized ? strokeWidth / 2 : 0;
-    const middleInset = minimized ? strokeWidth / 2 : strokeWidth * 1.6;
-    const inset = minimized ? strokeWidth * 2 : strokeWidth * 1.6;
-    return ((0, jsx_runtime_1.jsxs)("svg", { viewBox: `0 0 ${viewSize} ${viewSize}`, height: fullscreenIconSize, width: fullscreenIconSize, children: [(0, jsx_runtime_1.jsx)("path", { d: `
+    const out = isFullscreen ? 0 : strokeWidth / 2;
+    const middleInset = isFullscreen ? strokeWidth * 1.6 : strokeWidth / 2;
+    const inset = isFullscreen ? strokeWidth * 1.6 : strokeWidth * 2;
+    return ((0, jsx_runtime_1.jsxs)("svg", { viewBox: `0 0 ${viewSize} ${viewSize}`, height: exports.fullscreenIconSize, width: exports.fullscreenIconSize, children: [(0, jsx_runtime_1.jsx)("path", { d: `
 				M ${out} ${inset}
 				L ${middleInset} ${middleInset}
 				L ${inset} ${out}

package/dist/index.d.ts

@@ -1,10 +1,14 @@
-import { CallbackListener, EventTypes, 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';
+/// <reference types="react" />
+import type { CallbackListener, PlayerEventTypes } from './event-emitter';
+import { PlayerEmitter } from './event-emitter';
+export { Player, PlayerProps } from './Player';
+export { PlayerMethods, PlayerRef, ThumbnailMethods, ThumbnailRef, } from './player-methods';
+export type { RenderFullscreenButton, RenderPlayPauseButton, } from './PlayerControls';
+export type { ErrorFallback, RenderLoading, RenderPoster } from './PlayerUI';
+export { Thumbnail } from './Thumbnail';
+export { PreviewSize, Translation } from './utils/preview-size';
 export { Size } from './utils/use-element-size';
-export type { CallbackListener, EventTypes };
+export type { CallbackListener, PlayerEventTypes as EventTypes };
 export declare const PlayerInternals: {
     PlayerEventEmitterContext: import("react").Context<PlayerEmitter | undefined>;
     PlayerEmitter: typeof PlayerEmitter;
@@ -12,24 +16,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;
@@ -42,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").Size;
+    }) => number;
 };

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PlayerInternals = exports.Player = void 0;
+exports.PlayerInternals = exports.Thumbnail = exports.Player = void 0;
 const calculate_scale_1 = require("./calculate-scale");
 const emitter_context_1 = require("./emitter-context");
 const event_emitter_1 = require("./event-emitter");
@@ -10,13 +10,16 @@ const use_player_1 = require("./use-player");
 const use_element_size_1 = require("./utils/use-element-size");
 var Player_1 = require("./Player");
 Object.defineProperty(exports, "Player", { enumerable: true, get: function () { return Player_1.Player; } });
+var Thumbnail_1 = require("./Thumbnail");
+Object.defineProperty(exports, "Thumbnail", { enumerable: true, get: function () { return Thumbnail_1.Thumbnail; } });
 exports.PlayerInternals = {
     PlayerEventEmitterContext: emitter_context_1.PlayerEventEmitterContext,
     PlayerEmitter: event_emitter_1.PlayerEmitter,
     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-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/player-css-classname.js

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

package/dist/player-methods.d.ts

@@ -1,11 +1,14 @@
-import { SyntheticEvent } from 'react';
-import { PlayerEmitter } from './event-emitter';
-export declare type PlayerMethods = {
+import type { SyntheticEvent } from 'react';
+import type { PlayerEmitter } from './event-emitter';
+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;
@@ -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/test/index.test.js

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

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

@@ -1,5 +1,5 @@
-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, 'queries'>) => import("@testing-library/react").RenderResult<typeof queries, HTMLElement, HTMLElement>;
 export * from '@testing-library/react';

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

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