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

package/dist/calculate-scale.d.ts

@@ -1,14 +1,39 @@
-import { PreviewSize } from './utils/preview-size';
-import { Size } from './utils/use-element-size';
-export declare const calculateScale: ({ previewSize, compositionWidth, compositionHeight, canvasSize, }: {
-    previewSize: PreviewSize;
+import type { VideoConfig } from 'remotion';
+import type { PreviewSize } from './utils/preview-size';
+import type { Size } from './utils/use-element-size';
+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/calculate-scale.js

@@ -1,11 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.calculateScale = void 0;
-const calculateScale = ({ previewSize, compositionWidth, compositionHeight, canvasSize, }) => {
+exports.calculateOuter = exports.calculateContainerStyle = exports.calculateOuterStyle = exports.calculateCanvasTransformation = exports.calculateScale = void 0;
+const calculate_player_size_1 = require("./utils/calculate-player-size");
+const calculateScale = ({ canvasSize, compositionHeight, compositionWidth, previewSize, }) => {
     const heightRatio = canvasSize.height / compositionHeight;
     const widthRatio = canvasSize.width / compositionWidth;
     const ratio = Math.min(heightRatio, widthRatio);
-    const scale = previewSize === 'auto' ? ratio : Number(previewSize);
+    return previewSize === 'auto' ? ratio : Number(previewSize);
+};
+exports.calculateScale = calculateScale;
+const calculateCanvasTransformation = ({ previewSize, compositionWidth, compositionHeight, canvasSize, }) => {
+    const scale = (0, exports.calculateScale)({
+        canvasSize,
+        compositionHeight,
+        compositionWidth,
+        previewSize,
+    });
     const correction = 0 - (1 - scale) / 2;
     const xCorrection = correction * compositionWidth;
     const yCorrection = correction * compositionHeight;
@@ -21,4 +31,55 @@ const calculateScale = ({ previewSize, compositionWidth, compositionHeight, canv
         scale,
     };
 };
-exports.calculateScale = calculateScale;
+exports.calculateCanvasTransformation = calculateCanvasTransformation;
+const calculateOuterStyle = ({ config, style, canvasSize, }) => {
+    if (!config) {
+        return {};
+    }
+    return {
+        position: 'relative',
+        overflow: 'hidden',
+        ...(0, calculate_player_size_1.calculatePlayerSize)({
+            compositionHeight: config.height,
+            compositionWidth: config.width,
+            currentSize: canvasSize,
+            height: style === null || style === void 0 ? void 0 : style.height,
+            width: style === null || style === void 0 ? void 0 : style.width,
+        }),
+        ...style,
+    };
+};
+exports.calculateOuterStyle = calculateOuterStyle;
+const calculateContainerStyle = ({ config, canvasSize, layout, scale, }) => {
+    if (!config || !canvasSize || !layout) {
+        return {};
+    }
+    return {
+        position: 'absolute',
+        width: config.width,
+        height: config.height,
+        display: 'flex',
+        transform: `scale(${scale})`,
+        marginLeft: layout.xCorrection,
+        marginTop: layout.yCorrection,
+        overflow: 'hidden',
+    };
+};
+exports.calculateContainerStyle = calculateContainerStyle;
+const calculateOuter = ({ layout, scale, config, }) => {
+    if (!layout || !config) {
+        return {};
+    }
+    const { centerX, centerY } = layout;
+    return {
+        width: config.width * scale,
+        height: config.height * scale,
+        display: 'flex',
+        flexDirection: 'column',
+        position: 'absolute',
+        left: centerX,
+        top: centerY,
+        overflow: 'hidden',
+    };
+};
+exports.calculateOuter = calculateOuter;

package/dist/cjs/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/cjs/MediaVolumeSlider.js

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MediaVolumeSlider = exports.VOLUME_SLIDER_WIDTH = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const icons_1 = require("./icons");
+const use_hover_state_1 = require("./use-hover-state");
+const BAR_HEIGHT = 5;
+const KNOB_SIZE = 12;
+exports.VOLUME_SLIDER_WIDTH = 100;
+const MediaVolumeSlider = ({ displayVerticalVolumeSlider }) => {
+    const [mediaMuted, setMediaMuted] = remotion_1.Internals.useMediaMutedState();
+    const [mediaVolume, setMediaVolume] = remotion_1.Internals.useMediaVolumeState();
+    const [focused, setFocused] = (0, react_1.useState)(false);
+    const parentDivRef = (0, react_1.useRef)(null);
+    const inputRef = (0, react_1.useRef)(null);
+    const hover = (0, use_hover_state_1.useHoverState)(parentDivRef);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const randomId = typeof react_1.useId === 'undefined' ? 'volume-slider' : (0, react_1.useId)();
+    const [randomClass] = (0, react_1.useState)(() => `__remotion-volume-slider-${(0, remotion_1.random)(randomId)}`.replace('.', ''));
+    const isMutedOrZero = mediaMuted || mediaVolume === 0;
+    const onVolumeChange = (e) => {
+        setMediaVolume(parseFloat(e.target.value));
+    };
+    const onBlur = () => {
+        setTimeout(() => {
+            // We need a small delay to check which element was focused next,
+            // and if it wasn't the volume slider, we hide it
+            if (document.activeElement !== inputRef.current) {
+                setFocused(false);
+            }
+        }, 10);
+    };
+    const onClick = (0, react_1.useCallback)(() => {
+        if (mediaVolume === 0) {
+            setMediaVolume(1);
+            setMediaMuted(false);
+            return;
+        }
+        setMediaMuted((mute) => !mute);
+    }, [mediaVolume, setMediaMuted, setMediaVolume]);
+    const parentDivStyle = (0, react_1.useMemo)(() => {
+        return {
+            display: 'inline-flex',
+            background: 'none',
+            border: 'none',
+            padding: '6px',
+            justifyContent: 'center',
+            alignItems: 'center',
+            touchAction: 'none',
+            ...(displayVerticalVolumeSlider && { position: 'relative' }),
+        };
+    }, [displayVerticalVolumeSlider]);
+    const volumeContainer = (0, react_1.useMemo)(() => {
+        return {
+            display: 'inline',
+            width: icons_1.ICON_SIZE,
+            height: icons_1.ICON_SIZE,
+            cursor: 'pointer',
+            appearance: 'none',
+            background: 'none',
+            border: 'none',
+            padding: 0,
+        };
+    }, []);
+    const inputStyle = (0, react_1.useMemo)(() => {
+        const commonStyle = {
+            WebkitAppearance: 'none',
+            backgroundColor: 'rgba(255, 255, 255, 0.5)',
+            borderRadius: BAR_HEIGHT / 2,
+            cursor: 'pointer',
+            height: BAR_HEIGHT,
+            width: exports.VOLUME_SLIDER_WIDTH,
+            backgroundImage: `linear-gradient(
+				to right,
+				white ${mediaVolume * 100}%, rgba(255, 255, 255, 0) ${mediaVolume * 100}%
+			)`,
+        };
+        if (displayVerticalVolumeSlider) {
+            return {
+                ...commonStyle,
+                transform: `rotate(-90deg)`,
+                position: 'absolute',
+                bottom: icons_1.ICON_SIZE + exports.VOLUME_SLIDER_WIDTH / 2 + 5,
+            };
+        }
+        return {
+            ...commonStyle,
+            marginLeft: 5,
+        };
+    }, [displayVerticalVolumeSlider, mediaVolume]);
+    const sliderStyle = `
+	.${randomClass}::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		background-color: white;
+		border-radius: ${KNOB_SIZE / 2}px;
+		box-shadow: 0 0 2px black;
+		height: ${KNOB_SIZE}px;
+		width: ${KNOB_SIZE}px;
+	}
+
+	.${randomClass}::-moz-range-thumb {
+		-webkit-appearance: none;
+		background-color: white;
+		border-radius: ${KNOB_SIZE / 2}px;
+		box-shadow: 0 0 2px black;
+		height: ${KNOB_SIZE}px;
+		width: ${KNOB_SIZE}px;
+	}
+`;
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: parentDivRef, style: parentDivStyle, children: [(0, jsx_runtime_1.jsx)("style", { 
+                // eslint-disable-next-line react/no-danger
+                dangerouslySetInnerHTML: {
+                    __html: sliderStyle,
+                } }), (0, jsx_runtime_1.jsx)("button", { "aria-label": isMutedOrZero ? 'Unmute sound' : 'Mute sound', title: isMutedOrZero ? 'Unmute sound' : 'Mute sound', onClick: onClick, onBlur: onBlur, onFocus: () => setFocused(true), style: volumeContainer, type: "button", children: isMutedOrZero ? (0, jsx_runtime_1.jsx)(icons_1.VolumeOffIcon, {}) : (0, jsx_runtime_1.jsx)(icons_1.VolumeOnIcon, {}) }), (focused || hover) && !mediaMuted ? ((0, jsx_runtime_1.jsx)("input", { ref: inputRef, "aria-label": "Change volume", className: randomClass, max: 1, min: 0, onBlur: () => setFocused(false), onChange: onVolumeChange, step: 0.01, type: "range", value: mediaVolume, style: inputStyle })) : null] }));
+};
+exports.MediaVolumeSlider = MediaVolumeSlider;

package/dist/cjs/Player.d.ts

@@ -0,0 +1,43 @@
+import type { ComponentType } from 'react';
+import React from 'react';
+import type { CompProps } from 'remotion';
+import type { PlayerRef } from './player-methods';
+import type { RenderFullscreenButton, RenderPlayPauseButton } from './PlayerControls';
+import type { RenderLoading, RenderPoster } from './PlayerUI';
+import type { PropsIfHasProps } from './utils/props-if-has-props';
+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;
+} & PropsIfHasProps<T> & CompProps<T>;
+export declare const componentOrNullIfLazy: <T>(props: CompProps<T>) => ComponentType<T> | null;
+export declare const Player: <T>(props: PlayerProps<T> & React.RefAttributes<PlayerRef>) => React.ReactElement | null;

package/dist/cjs/Player.js

@@ -0,0 +1,143 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Player = exports.componentOrNullIfLazy = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const emitter_context_1 = require("./emitter-context");
+const event_emitter_1 = require("./event-emitter");
+const player_css_classname_1 = require("./player-css-classname");
+const PlayerUI_1 = __importDefault(require("./PlayerUI"));
+const SharedPlayerContext_1 = require("./SharedPlayerContext");
+const validate_in_out_frame_1 = require("./utils/validate-in-out-frame");
+const validate_initial_frame_1 = require("./utils/validate-initial-frame");
+const validate_playbackrate_1 = require("./utils/validate-playbackrate");
+const componentOrNullIfLazy = (props) => {
+    if ('component' in props) {
+        return props.component;
+    }
+    return null;
+};
+exports.componentOrNullIfLazy = componentOrNullIfLazy;
+const PlayerFn = ({ durationInFrames, compositionHeight, compositionWidth, fps, inputProps, style, controls = false, loop = false, autoPlay = false, showVolumeControls = true, allowFullscreen = true, clickToPlay, doubleClickToFullscreen = false, spaceKeyToPlayOrPause = true, moveToBeginningWhenEnded = true, numberOfSharedAudioTags = 5, errorFallback = () => '⚠️', playbackRate = 1, renderLoading, className, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, initialFrame, renderPoster, inFrame, outFrame, initiallyShowControls, renderFullscreenButton, renderPlayPauseButton, ...componentProps }, ref) => {
+    if (typeof window !== 'undefined') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        (0, react_1.useLayoutEffect)(() => {
+            window.remotion_isPlayer = true;
+        }, []);
+    }
+    // @ts-expect-error
+    if (componentProps.defaultProps !== undefined) {
+        throw new Error('The <Player /> component does not accept `defaultProps`, but some were passed. Use `inputProps` instead.');
+    }
+    const componentForValidation = (0, exports.componentOrNullIfLazy)(componentProps);
+    // @ts-expect-error
+    if ((componentForValidation === null || componentForValidation === void 0 ? void 0 : componentForValidation.type) === remotion_1.Composition) {
+        throw new TypeError(`'component' should not be an instance of <Composition/>. Pass the React component directly, and set the duration, fps and dimensions as separate props. See https://www.remotion.dev/docs/player/examples for an example.`);
+    }
+    if (componentForValidation === remotion_1.Composition) {
+        throw new TypeError(`'component' must not be the 'Composition' component. Pass your own React component directly, and set the duration, fps and dimensions as separate props. See https://www.remotion.dev/docs/player/examples for an example.`);
+    }
+    const component = remotion_1.Internals.useLazyComponent(componentProps);
+    (0, validate_initial_frame_1.validateInitialFrame)({ initialFrame, durationInFrames });
+    const [frame, setFrame] = (0, react_1.useState)(() => initialFrame !== null && initialFrame !== void 0 ? initialFrame : 0);
+    const [playing, setPlaying] = (0, react_1.useState)(false);
+    const [rootId] = (0, react_1.useState)('player-comp');
+    const [emitter] = (0, react_1.useState)(() => new event_emitter_1.PlayerEmitter());
+    const rootRef = (0, react_1.useRef)(null);
+    const audioAndVideoTags = (0, react_1.useRef)([]);
+    const imperativePlaying = (0, react_1.useRef)(false);
+    if (typeof compositionHeight !== 'number') {
+        throw new TypeError(`'compositionHeight' must be a number but got '${typeof compositionHeight}' instead`);
+    }
+    if (typeof compositionWidth !== 'number') {
+        throw new TypeError(`'compositionWidth' must be a number but got '${typeof compositionWidth}' instead`);
+    }
+    remotion_1.Internals.validateDimension(compositionHeight, 'compositionHeight', 'of the <Player /> component');
+    remotion_1.Internals.validateDimension(compositionWidth, 'compositionWidth', 'of the <Player /> component');
+    remotion_1.Internals.validateDurationInFrames(durationInFrames, 'of the <Player/> component');
+    remotion_1.Internals.validateFps(fps, 'as a prop of the <Player/> component', false);
+    (0, validate_in_out_frame_1.validateInOutFrames)({
+        durationInFrames,
+        inFrame,
+        outFrame,
+    });
+    if (typeof controls !== 'boolean' && typeof controls !== 'undefined') {
+        throw new TypeError(`'controls' must be a boolean or undefined but got '${typeof controls}' instead`);
+    }
+    if (typeof autoPlay !== 'boolean' && typeof autoPlay !== 'undefined') {
+        throw new TypeError(`'autoPlay' must be a boolean or undefined but got '${typeof autoPlay}' instead`);
+    }
+    if (typeof loop !== 'boolean' && typeof loop !== 'undefined') {
+        throw new TypeError(`'loop' must be a boolean or undefined but got '${typeof loop}' instead`);
+    }
+    if (typeof doubleClickToFullscreen !== 'boolean' &&
+        typeof doubleClickToFullscreen !== 'undefined') {
+        throw new TypeError(`'doubleClickToFullscreen' must be a boolean or undefined but got '${typeof doubleClickToFullscreen}' instead`);
+    }
+    if (typeof showVolumeControls !== 'boolean' &&
+        typeof showVolumeControls !== 'undefined') {
+        throw new TypeError(`'showVolumeControls' must be a boolean or undefined but got '${typeof showVolumeControls}' instead`);
+    }
+    if (typeof allowFullscreen !== 'boolean' &&
+        typeof allowFullscreen !== 'undefined') {
+        throw new TypeError(`'allowFullscreen' must be a boolean or undefined but got '${typeof allowFullscreen}' instead`);
+    }
+    if (typeof clickToPlay !== 'boolean' && typeof clickToPlay !== 'undefined') {
+        throw new TypeError(`'clickToPlay' must be a boolean or undefined but got '${typeof clickToPlay}' instead`);
+    }
+    if (typeof spaceKeyToPlayOrPause !== 'boolean' &&
+        typeof spaceKeyToPlayOrPause !== 'undefined') {
+        throw new TypeError(`'spaceKeyToPlayOrPause' must be a boolean or undefined but got '${typeof spaceKeyToPlayOrPause}' instead`);
+    }
+    if (typeof numberOfSharedAudioTags !== 'number' ||
+        numberOfSharedAudioTags % 1 !== 0 ||
+        !Number.isFinite(numberOfSharedAudioTags) ||
+        Number.isNaN(numberOfSharedAudioTags) ||
+        numberOfSharedAudioTags < 0) {
+        throw new TypeError(`'numberOfSharedAudioTags' must be an integer but got '${numberOfSharedAudioTags}' instead`);
+    }
+    (0, validate_playbackrate_1.validatePlaybackRate)(playbackRate);
+    (0, react_1.useEffect)(() => {
+        emitter.dispatchRatechange(playbackRate);
+    }, [emitter, playbackRate]);
+    (0, react_1.useImperativeHandle)(ref, () => rootRef.current, []);
+    const timelineContextValue = (0, react_1.useMemo)(() => {
+        return {
+            frame,
+            playing,
+            rootId,
+            shouldRegisterSequences: false,
+            playbackRate,
+            imperativePlaying,
+            setPlaybackRate: () => {
+                throw new Error('playback rate');
+            },
+            audioAndVideoTags,
+        };
+    }, [frame, playbackRate, playing, rootId]);
+    const setTimelineContextValue = (0, react_1.useMemo)(() => {
+        return {
+            setFrame,
+            setPlaying,
+        };
+    }, [setFrame]);
+    const passedInputProps = (0, react_1.useMemo)(() => {
+        return inputProps !== null && inputProps !== void 0 ? inputProps : {};
+    }, [inputProps]);
+    if (typeof window !== 'undefined') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        (0, react_1.useLayoutEffect)(() => {
+            // Inject CSS only on client, and also only after the Player has hydrated
+            remotion_1.Internals.CSSUtils.injectCSS(remotion_1.Internals.CSSUtils.makeDefaultCSS(`.${player_css_classname_1.PLAYER_CSS_CLASSNAME}`, '#fff'));
+        }, []);
+    }
+    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.IsPlayerContextProvider, { children: (0, jsx_runtime_1.jsx)(SharedPlayerContext_1.SharedPlayerContexts, { timelineContext: timelineContextValue, component: component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, inputProps: inputProps, numberOfSharedAudioTags: numberOfSharedAudioTags, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(emitter_context_1.PlayerEventEmitterContext.Provider, { value: emitter, children: (0, jsx_runtime_1.jsx)(PlayerUI_1.default, { ref: rootRef, renderLoading: renderLoading, autoPlay: Boolean(autoPlay), loop: Boolean(loop), controls: Boolean(controls), errorFallback: errorFallback, style: style, inputProps: passedInputProps, allowFullscreen: Boolean(allowFullscreen), moveToBeginningWhenEnded: Boolean(moveToBeginningWhenEnded), clickToPlay: typeof clickToPlay === 'boolean'
+                            ? clickToPlay
+                            : Boolean(controls), showVolumeControls: Boolean(showVolumeControls), doubleClickToFullscreen: Boolean(doubleClickToFullscreen), spaceKeyToPlayOrPause: Boolean(spaceKeyToPlayOrPause), playbackRate: playbackRate, className: className !== null && className !== void 0 ? className : undefined, showPosterWhenUnplayed: Boolean(showPosterWhenUnplayed), showPosterWhenEnded: Boolean(showPosterWhenEnded), showPosterWhenPaused: Boolean(showPosterWhenPaused), renderPoster: renderPoster, inFrame: inFrame !== null && inFrame !== void 0 ? inFrame : null, outFrame: outFrame !== null && outFrame !== void 0 ? outFrame : null, initiallyShowControls: initiallyShowControls !== null && initiallyShowControls !== void 0 ? initiallyShowControls : true, renderFullscreen: renderFullscreenButton !== null && renderFullscreenButton !== void 0 ? renderFullscreenButton : null, renderPlayPauseButton: renderPlayPauseButton !== null && renderPlayPauseButton !== void 0 ? renderPlayPauseButton : null }) }) }) }) }));
+};
+const forward = react_1.forwardRef;
+exports.Player = forward(PlayerFn);

package/dist/cjs/PlayerControls.d.ts

@@ -0,0 +1,41 @@
+import type { MouseEventHandler, ReactNode } from 'react';
+import React from 'react';
+import type { usePlayer } from './use-player';
+export declare type RenderPlayPauseButton = (props: {
+    playing: boolean;
+}) => ReactNode;
+export declare type RenderFullscreenButton = (props: {
+    isFullscreen: boolean;
+}) => ReactNode;
+export declare const X_SPACER = 10;
+export declare const X_PADDING = 12;
+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;
+}>;

package/dist/cjs/PlayerControls.js

@@ -0,0 +1,152 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Controls = exports.X_PADDING = exports.X_SPACER = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const format_time_1 = require("./format-time");
+const icons_1 = require("./icons");
+const MediaVolumeSlider_1 = require("./MediaVolumeSlider");
+const PlayerSeekBar_1 = require("./PlayerSeekBar");
+const use_video_controls_resize_1 = require("./use-video-controls-resize");
+exports.X_SPACER = 10;
+exports.X_PADDING = 12;
+const gradientSteps = [
+    0, 0.013, 0.049, 0.104, 0.175, 0.259, 0.352, 0.45, 0.55, 0.648, 0.741, 0.825,
+    0.896, 0.951, 0.987,
+];
+const gradientOpacities = [
+    0, 8.1, 15.5, 22.5, 29, 35.3, 41.2, 47.1, 52.9, 58.8, 64.7, 71, 77.5, 84.5,
+    91.9,
+];
+const globalGradientOpacity = 1 / 0.7;
+const containerStyle = {
+    boxSizing: 'border-box',
+    position: 'absolute',
+    bottom: 0,
+    width: '100%',
+    paddingTop: 40,
+    paddingBottom: 10,
+    backgroundImage: `linear-gradient(to bottom,${gradientSteps
+        .map((g, i) => {
+        return `hsla(0, 0%, 0%, ${g}) ${gradientOpacities[i] * globalGradientOpacity}%`;
+    })
+        .join(', ')}, hsl(0, 0%, 0%) 100%)`,
+    backgroundSize: 'auto 145px',
+    display: 'flex',
+    paddingRight: exports.X_PADDING,
+    paddingLeft: exports.X_PADDING,
+    flexDirection: 'column',
+    transition: 'opacity 0.3s',
+};
+const buttonStyle = {
+    appearance: 'none',
+    backgroundColor: 'transparent',
+    border: 'none',
+    cursor: 'pointer',
+    padding: 0,
+    display: 'inline',
+    marginBottom: 0,
+    marginTop: 0,
+    height: 25,
+};
+const controlsRow = {
+    display: 'flex',
+    flexDirection: 'row',
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    userSelect: 'none',
+};
+const leftPartStyle = {
+    display: 'flex',
+    flexDirection: 'row',
+    userSelect: 'none',
+    alignItems: 'center',
+};
+const xSpacer = {
+    width: 10,
+};
+const ySpacer = {
+    height: 8,
+};
+const flex1 = {
+    flex: 1,
+};
+const fullscreen = {};
+const PlayPauseButton = ({ playing }) => playing ? (0, jsx_runtime_1.jsx)(icons_1.PauseIcon, {}) : (0, jsx_runtime_1.jsx)(icons_1.PlayIcon, {});
+const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, initiallyShowControls, playerWidth, renderPlayPauseButton, renderFullscreenButton, }) => {
+    const playButtonRef = (0, react_1.useRef)(null);
+    const frame = remotion_1.Internals.Timeline.useTimelinePosition();
+    const [supportsFullscreen, setSupportsFullscreen] = (0, react_1.useState)(false);
+    const { maxTimeLabelWidth, displayVerticalVolumeSlider } = (0, use_video_controls_resize_1.useVideoControlsResize)({ allowFullscreen, playerWidth });
+    const [shouldShowInitially, setInitiallyShowControls] = (0, react_1.useState)(() => {
+        if (typeof initiallyShowControls === 'boolean') {
+            return initiallyShowControls;
+        }
+        if (typeof initiallyShowControls === 'number') {
+            if (initiallyShowControls % 1 !== 0) {
+                throw new Error('initiallyShowControls must be an integer or a boolean');
+            }
+            if (Number.isNaN(initiallyShowControls)) {
+                throw new Error('initiallyShowControls must not be NaN');
+            }
+            if (!Number.isFinite(initiallyShowControls)) {
+                throw new Error('initiallyShowControls must be finite');
+            }
+            if (initiallyShowControls <= 0) {
+                throw new Error('initiallyShowControls must be a positive integer');
+            }
+            return initiallyShowControls;
+        }
+        throw new TypeError('initiallyShowControls must be a number or a boolean');
+    });
+    const containerCss = (0, react_1.useMemo)(() => {
+        // Hide if playing and mouse outside
+        const shouldShow = hovered || !player.playing || shouldShowInitially;
+        return {
+            ...containerStyle,
+            opacity: Number(shouldShow),
+        };
+    }, [hovered, shouldShowInitially, player.playing]);
+    (0, react_1.useEffect)(() => {
+        if (playButtonRef.current && spaceKeyToPlayOrPause) {
+            // This switches focus to play button when player.playing flag changes
+            playButtonRef.current.focus({
+                preventScroll: true,
+            });
+        }
+    }, [player.playing, spaceKeyToPlayOrPause]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        // Must be handled client-side to avoid SSR hydration mismatch
+        setSupportsFullscreen((_a = (typeof document !== 'undefined' &&
+            (document.fullscreenEnabled || document.webkitFullscreenEnabled))) !== null && _a !== void 0 ? _a : false);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (shouldShowInitially === false) {
+            return;
+        }
+        const time = shouldShowInitially === true ? 2000 : shouldShowInitially;
+        const timeout = setTimeout(() => {
+            setInitiallyShowControls(false);
+        }, time);
+        return () => {
+            clearInterval(timeout);
+        };
+    }, [shouldShowInitially]);
+    const timeLabel = (0, react_1.useMemo)(() => {
+        return {
+            color: 'white',
+            fontFamily: 'sans-serif',
+            fontSize: 14,
+            maxWidth: maxTimeLabelWidth,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+        };
+    }, [maxTimeLabelWidth]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: containerCss, children: [(0, jsx_runtime_1.jsxs)("div", { style: controlsRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: leftPartStyle, children: [(0, jsx_runtime_1.jsx)("button", { ref: playButtonRef, type: "button", style: buttonStyle, onClick: player.playing ? player.pause : player.play, "aria-label": player.playing ? 'Pause video' : 'Play video', title: player.playing ? 'Pause video' : 'Play video', children: renderPlayPauseButton === null ? ((0, jsx_runtime_1.jsx)(PlayPauseButton, { playing: player.playing })) : (renderPlayPauseButton({ playing: player.playing })) }), showVolumeControls ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: xSpacer }), (0, jsx_runtime_1.jsx)(MediaVolumeSlider_1.MediaVolumeSlider, { displayVerticalVolumeSlider: displayVerticalVolumeSlider })] })) : null, (0, jsx_runtime_1.jsx)("div", { style: xSpacer }), (0, jsx_runtime_1.jsxs)("div", { style: timeLabel, children: [(0, format_time_1.formatTime)(frame / fps), " / ", (0, format_time_1.formatTime)(durationInFrames / fps)] }), (0, jsx_runtime_1.jsx)("div", { style: xSpacer })] }), (0, jsx_runtime_1.jsx)("div", { style: flex1 }), (0, jsx_runtime_1.jsx)("div", { style: fullscreen, children: supportsFullscreen && allowFullscreen ? ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', title: isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', style: buttonStyle, onClick: isFullscreen
+                                ? onExitFullscreenButtonClick
+                                : onFullscreenButtonClick, children: renderFullscreenButton === null ? ((0, jsx_runtime_1.jsx)(icons_1.FullscreenIcon, { isFullscreen: isFullscreen })) : (renderFullscreenButton({ isFullscreen })) })) : null })] }), (0, jsx_runtime_1.jsx)("div", { style: ySpacer }), (0, jsx_runtime_1.jsx)(PlayerSeekBar_1.PlayerSeekBar, { onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, durationInFrames: durationInFrames, inFrame: inFrame, outFrame: outFrame })] }));
+};
+exports.Controls = Controls;

package/dist/cjs/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;
+}>;