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

package/dist/cjs/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/cjs/utils/validate-in-out-frame.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateInOutFrames = exports.validateSingleFrame = void 0;
+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;
+};
+exports.validateSingleFrame = validateSingleFrame;
+const validateInOutFrames = ({ inFrame, durationInFrames, outFrame, }) => {
+    const validatedInFrame = (0, exports.validateSingleFrame)(inFrame, 'inFrame');
+    const validatedOutFrame = (0, exports.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);
+    }
+};
+exports.validateInOutFrames = validateInOutFrames;

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

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

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

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

package/dist/esm/MediaVolumeSlider.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const VOLUME_SLIDER_WIDTH = 100;
+export declare const MediaVolumeSlider: React.FC<{
+    displayVerticalVolumeSlider: Boolean;
+}>;

package/dist/esm/Player.d.ts

@@ -0,0 +1,49 @@
+import type { ComponentType } from 'react';
+import React from 'react';
+import type { CompProps } from 'remotion';
+import type { PlayerRef } from './player-methods.js';
+import type { RenderFullscreenButton, RenderPlayPauseButton } from './PlayerControls.js';
+import type { RenderLoading, RenderPoster } from './PlayerUI.js';
+import type { PropsIfHasProps } from './utils/props-if-has-props.js';
+export declare type ErrorFallback = (info: {
+    error: Error;
+}) => React.ReactNode;
+export declare type PlayerProps<T> = {
+    durationInFrames: number;
+    compositionWidth: number;
+    compositionHeight: number;
+    fps: number;
+    showVolumeControls?: boolean;
+    controls?: boolean;
+    errorFallback?: ErrorFallback;
+    style?: React.CSSProperties;
+    loop?: boolean;
+    autoPlay?: boolean;
+    allowFullscreen?: boolean;
+    clickToPlay?: boolean;
+    doubleClickToFullscreen?: boolean;
+    spaceKeyToPlayOrPause?: boolean;
+    numberOfSharedAudioTags?: number;
+    playbackRate?: number;
+    renderLoading?: RenderLoading;
+    moveToBeginningWhenEnded?: boolean;
+    className?: string;
+    initialFrame?: number;
+    renderPoster?: RenderPoster;
+    showPosterWhenPaused?: boolean;
+    showPosterWhenEnded?: boolean;
+    showPosterWhenUnplayed?: boolean;
+    inFrame?: number | null;
+    outFrame?: number | null;
+    initiallyShowControls?: number | boolean;
+    renderPlayPauseButton?: RenderPlayPauseButton;
+    renderFullscreenButton?: RenderFullscreenButton;
+    alwaysShowControls?: boolean;
+    initiallyMuted?: boolean;
+} & PropsIfHasProps<T> & CompProps<T>;
+export declare const componentOrNullIfLazy: <T>(props: CompProps<T>) => ComponentType<T> | null;
+/**
+ * @description A component which can be rendered in a regular React App (for example: Create React App, Next.js) to display a Remotion video.
+ * @see [Documentation](https://www.remotion.dev/docs/player/player)
+ */
+export declare const Player: <T>(props: PlayerProps<T> & React.RefAttributes<PlayerRef>) => React.ReactElement | null;

package/dist/esm/PlayerControls.d.ts

@@ -0,0 +1,40 @@
+import type { MouseEventHandler, ReactNode } from 'react';
+import React from 'react';
+import type { usePlayer } from './use-player.js';
+export declare type RenderPlayPauseButton = (props: {
+    playing: boolean;
+}) => ReactNode;
+export declare type RenderFullscreenButton = (props: {
+    isFullscreen: boolean;
+}) => ReactNode;
+declare global {
+    interface Document {
+        webkitFullscreenEnabled?: boolean;
+        webkitFullscreenElement?: Element;
+        webkitExitFullscreen?: Document['exitFullscreen'];
+    }
+    interface HTMLDivElement {
+        webkitRequestFullScreen: HTMLDivElement['requestFullscreen'];
+    }
+}
+export declare const Controls: React.FC<{
+    fps: number;
+    durationInFrames: number;
+    hovered: boolean;
+    showVolumeControls: boolean;
+    player: ReturnType<typeof usePlayer>;
+    onFullscreenButtonClick: MouseEventHandler<HTMLButtonElement>;
+    isFullscreen: boolean;
+    allowFullscreen: boolean;
+    onExitFullscreenButtonClick: MouseEventHandler<HTMLButtonElement>;
+    spaceKeyToPlayOrPause: boolean;
+    onSeekEnd: () => void;
+    onSeekStart: () => void;
+    inFrame: number | null;
+    outFrame: number | null;
+    initiallyShowControls: number | boolean;
+    playerWidth: number;
+    renderPlayPauseButton: RenderPlayPauseButton | null;
+    renderFullscreenButton: RenderFullscreenButton | null;
+    alwaysShowControls: boolean;
+}>;

package/dist/esm/PlayerSeekBar.d.ts

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

package/dist/esm/PlayerUI.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import type { PlayerRef } from './player-methods.js';
+import type { RenderFullscreenButton, RenderPlayPauseButton } from './PlayerControls.js';
+export declare type ErrorFallback = (info: {
+    error: Error;
+}) => React.ReactNode;
+export declare type RenderLoading = (canvas: {
+    height: number;
+    width: number;
+}) => React.ReactNode;
+export declare type RenderPoster = RenderLoading;
+declare const _default: React.ForwardRefExoticComponent<{
+    controls: boolean;
+    loop: boolean;
+    autoPlay: boolean;
+    allowFullscreen: boolean;
+    inputProps: unknown;
+    showVolumeControls: boolean;
+    style?: React.CSSProperties | undefined;
+    clickToPlay: boolean;
+    doubleClickToFullscreen: boolean;
+    spaceKeyToPlayOrPause: boolean;
+    errorFallback: ErrorFallback;
+    playbackRate: number;
+    renderLoading: RenderLoading | undefined;
+    renderPoster: RenderLoading | undefined;
+    className: string | undefined;
+    moveToBeginningWhenEnded: boolean;
+    showPosterWhenPaused: boolean;
+    showPosterWhenEnded: boolean;
+    showPosterWhenUnplayed: boolean;
+    inFrame: number | null;
+    outFrame: number | null;
+    initiallyShowControls: number | boolean;
+    renderPlayPauseButton: RenderPlayPauseButton | null;
+    renderFullscreen: RenderFullscreenButton | null;
+    alwaysShowControls: boolean;
+} & React.RefAttributes<PlayerRef>>;
+export default _default;

package/dist/esm/SharedPlayerContext.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentType, LazyExoticComponent } from 'react';
+import React from 'react';
+import type { TimelineContextValue } from 'remotion';
+export declare const SharedPlayerContexts: React.FC<{
+    children: React.ReactNode;
+    timelineContext: TimelineContextValue;
+    inputProps?: unknown;
+    fps: number;
+    compositionWidth: number;
+    compositionHeight: number;
+    durationInFrames: number;
+    component: LazyExoticComponent<ComponentType<unknown>>;
+    numberOfSharedAudioTags: number;
+    initiallyMuted: boolean;
+}>;

package/dist/esm/Thumbnail.d.ts

@@ -0,0 +1,24 @@
+import type { CSSProperties, MutableRefObject } from 'react';
+import type { CompProps } from 'remotion';
+import type { ThumbnailMethods } from './player-methods.js';
+import type { ErrorFallback, RenderLoading } from './PlayerUI.js';
+import type { PropsIfHasProps } from './utils/props-if-has-props.js';
+declare type ThumbnailProps<T> = PropsIfHasProps<T> & CompProps<T> & {
+    frameToDisplay: number;
+    style?: CSSProperties;
+    durationInFrames: number;
+    compositionWidth: number;
+    compositionHeight: number;
+    inputProps?: unknown;
+    fps: number;
+    errorFallback?: ErrorFallback;
+    renderLoading?: RenderLoading;
+    className?: string;
+};
+export declare const ThumbnailFn: <T>({ frameToDisplay, style, inputProps, compositionHeight, compositionWidth, durationInFrames, fps, className, errorFallback, renderLoading, ...componentProps }: ThumbnailProps<T>, ref: MutableRefObject<ThumbnailMethods>) => JSX.Element;
+/**
+ * @description A component which can be rendered in a regular React App (for example: Create React App, Next.js) to display a single frame of a video.
+ * @see [Documentation](https://www.remotion.dev/docs/player/thumbnail)
+ */
+export declare const Thumbnail: <T>(props: ThumbnailProps<T> & import("react").RefAttributes<ThumbnailMethods>) => React.ReactElement | null;
+export {};

package/dist/esm/ThumbnailUI.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ThumbnailMethods } from './player-methods.js';
+import type { ErrorFallback, RenderLoading } from './PlayerUI.js';
+declare const _default: React.ForwardRefExoticComponent<{
+    inputProps: unknown;
+    style?: React.CSSProperties | undefined;
+    errorFallback: ErrorFallback;
+    renderLoading: RenderLoading | undefined;
+    className: string | undefined;
+} & React.RefAttributes<ThumbnailMethods>>;
+export default _default;

package/dist/esm/calculate-next-frame.d.ts

@@ -0,0 +1,14 @@
+export declare const calculateNextFrame: ({ time, currentFrame: startFrame, playbackSpeed, fps, actualLastFrame, actualFirstFrame, framesAdvanced, shouldLoop, }: {
+    time: number;
+    currentFrame: number;
+    playbackSpeed: number;
+    fps: number;
+    actualFirstFrame: number;
+    actualLastFrame: number;
+    framesAdvanced: number;
+    shouldLoop: boolean;
+}) => {
+    nextFrame: number;
+    framesToAdvance: number;
+    hasEnded: boolean;
+};

package/dist/esm/calculate-scale.d.ts

@@ -0,0 +1,39 @@
+import type { VideoConfig } from 'remotion';
+import type { PreviewSize } from './utils/preview-size.js';
+import type { Size } from './utils/use-element-size.js';
+export declare const calculateScale: ({ canvasSize, compositionHeight, compositionWidth, previewSize, }: {
+    previewSize: PreviewSize['size'];
+    compositionWidth: number;
+    compositionHeight: number;
+    canvasSize: Size;
+}) => number;
+declare type Layout = {
+    centerX: number;
+    centerY: number;
+    xCorrection: number;
+    yCorrection: number;
+    scale: number;
+};
+export declare const calculateCanvasTransformation: ({ previewSize, compositionWidth, compositionHeight, canvasSize, }: {
+    previewSize: PreviewSize['size'];
+    compositionWidth: number;
+    compositionHeight: number;
+    canvasSize: Size;
+}) => Layout;
+export declare const calculateOuterStyle: ({ config, style, canvasSize, }: {
+    config: VideoConfig | null;
+    style: React.CSSProperties | undefined;
+    canvasSize: Size | null;
+}) => React.CSSProperties;
+export declare const calculateContainerStyle: ({ config, canvasSize, layout, scale, }: {
+    config: VideoConfig | null;
+    canvasSize: Size | null;
+    layout: Layout | null;
+    scale: number;
+}) => React.CSSProperties;
+export declare const calculateOuter: ({ layout, scale, config, }: {
+    layout: Layout | null;
+    scale: number;
+    config: VideoConfig | null;
+}) => React.CSSProperties;
+export {};

package/dist/esm/emitter-context.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { PlayerEmitter, ThumbnailEmitter } from './event-emitter.js';
+export declare const PlayerEventEmitterContext: React.Context<PlayerEmitter | undefined>;
+export declare const ThumbnailEmitterContext: React.Context<ThumbnailEmitter | undefined>;

package/dist/esm/error-boundary.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export declare class ErrorBoundary extends React.Component<{
+    onError: (error: Error) => void;
+    children: React.ReactNode;
+    errorFallback: (info: {
+        error: Error;
+    }) => React.ReactNode;
+}, {
+    hasError: Error | null;
+}> {
+    state: {
+        hasError: null;
+    };
+    static getDerivedStateFromError(error: Error): {
+        hasError: Error;
+    };
+    componentDidCatch(error: Error): void;
+    render(): string | number | boolean | JSX.Element | React.ReactFragment | null | undefined;
+}

package/dist/esm/event-emitter.d.ts

@@ -0,0 +1,76 @@
+declare type SeekPayload = {
+    frame: number;
+};
+declare type ErrorPayload = {
+    error: Error;
+};
+declare type TimeUpdateEventPayload = {
+    frame: number;
+};
+declare type FrameUpdateEventPayload = {
+    frame: number;
+};
+declare type RateChangeEventPayload = {
+    playbackRate: number;
+};
+declare type ScaleChangeEventPayload = {
+    scale: number;
+};
+declare type VolumeChangeEventPayload = {
+    volume: number;
+};
+declare type FullscreenChangeEventPayload = {
+    isFullscreen: boolean;
+};
+declare type PlayerStateEventMap = {
+    seeked: SeekPayload;
+    pause: undefined;
+    play: undefined;
+    ratechange: RateChangeEventPayload;
+    scalechange: ScaleChangeEventPayload;
+    volumechange: VolumeChangeEventPayload;
+    ended: undefined;
+    error: ErrorPayload;
+    timeupdate: TimeUpdateEventPayload;
+    frameupdate: FrameUpdateEventPayload;
+    fullscreenchange: FullscreenChangeEventPayload;
+};
+declare type ThumbnailStateEventMap = {
+    error: ErrorPayload;
+};
+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 PlayerListeners = {
+    [EventType in PlayerEventTypes]: CallbackListener<EventType>[];
+};
+declare type ThumbnailListeners = {
+    [EventType in ThumbnailEventTypes]: CallbackListener<EventType>[];
+};
+export declare class PlayerEmitter {
+    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;
+    dispatchVolumeChange(volume: number): void;
+    dispatchPause(): void;
+    dispatchPlay(): void;
+    dispatchEnded(): void;
+    dispatchRateChange(playbackRate: number): void;
+    dispatchScaleChange(scale: number): void;
+    dispatchError(error: Error): void;
+    dispatchTimeUpdate(event: TimeUpdateEventPayload): void;
+    dispatchFrameUpdate(event: FrameUpdateEventPayload): void;
+    dispatchFullscreenChange(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/esm/format-time.d.ts

@@ -0,0 +1 @@
+export declare const formatTime: (timeInSeconds: number) => string;

package/dist/esm/icons.d.ts

@@ -0,0 +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<{
+    isFullscreen: boolean;
+}>;
+export declare const VolumeOffIcon: React.FC;
+export declare const VolumeOnIcon: React.FC;

package/dist/esm/index.d.ts

@@ -0,0 +1,61 @@
+/// <reference types="react" />
+import type { CallbackListener, PlayerEventTypes } from './event-emitter.js';
+import { PlayerEmitter } from './event-emitter.js';
+export { Player, PlayerProps } from './Player.js';
+export { PlayerMethods, PlayerRef, ThumbnailMethods, ThumbnailRef, } from './player-methods.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;
+    usePlayer: () => {
+        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, 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.js").Size | null;
+    calculateCanvasTransformation: ({ previewSize, compositionWidth, compositionHeight, canvasSize, }: {
+        previewSize: number | "auto";
+        compositionWidth: number;
+        compositionHeight: number;
+        canvasSize: import("./utils/use-element-size.js").Size;
+    }) => {
+        centerX: number;
+        centerY: number;
+        xCorrection: number;
+        yCorrection: number;
+        scale: number;
+    };
+    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;
+};