@remotion/player 4.0.306 → 4.0.309

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerControls.d.ts

@@ -1,47 +0,0 @@
-import type { MouseEventHandler, ReactNode } from 'react';
-import React from 'react';
-import type { usePlayer } from './use-player.js';
-import type { Size } from './utils/use-element-size.js';
-export type RenderPlayPauseButton = (props: {
-    playing: boolean;
-    isBuffering: boolean;
-}) => ReactNode | null;
-export 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;
-    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;
-    canvasSize: Size | null;
-    renderPlayPauseButton: RenderPlayPauseButton | null;
-    renderFullscreenButton: RenderFullscreenButton | null;
-    alwaysShowControls: boolean;
-    showPlaybackRateControl: boolean | number[];
-    containerRef: React.RefObject<HTMLDivElement>;
-    buffering: boolean;
-    hideControlsWhenPointerDoesntMove: boolean | number;
-    onPointerUp: React.PointerEventHandler<HTMLDivElement> | undefined;
-    onDoubleClick: MouseEventHandler<HTMLDivElement> | undefined;
-}>;

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerControls.js

@@ -1,176 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Internals } from 'remotion';
-import { DefaultPlayPauseButton } from './DefaultPlayPauseButton.js';
-import { formatTime } from './format-time.js';
-import { FullscreenIcon } from './icons.js';
-import { MediaVolumeSlider } from './MediaVolumeSlider.js';
-import { PlaybackrateControl, playerButtonStyle } from './PlaybackrateControl.js';
-import { PlayerSeekBar } from './PlayerSeekBar.js';
-import { useHoverState } from './use-hover-state.js';
-import { useVideoControlsResize, X_PADDING, } from './use-video-controls-resize.js';
-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: X_PADDING,
-    paddingLeft: X_PADDING,
-    flexDirection: 'column',
-    transition: 'opacity 0.3s',
-};
-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: 12,
-};
-const ySpacer = {
-    height: 8,
-};
-const flex1 = {
-    flex: 1,
-};
-const fullscreen = {};
-export const Controls = ({ durationInFrames, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, initiallyShowControls, canvasSize, renderPlayPauseButton, renderFullscreenButton, alwaysShowControls, showPlaybackRateControl, containerRef, buffering, hideControlsWhenPointerDoesntMove, onPointerUp, onDoubleClick, }) => {
-    var _a, _b;
-    const playButtonRef = useRef(null);
-    const frame = Internals.Timeline.useTimelinePosition();
-    const [supportsFullscreen, setSupportsFullscreen] = useState(false);
-    const hovered = useHoverState(containerRef, hideControlsWhenPointerDoesntMove);
-    const { maxTimeLabelWidth, displayVerticalVolumeSlider } = useVideoControlsResize({
-        allowFullscreen,
-        playerWidth: (_a = canvasSize === null || canvasSize === void 0 ? void 0 : canvasSize.width) !== null && _a !== void 0 ? _a : 0,
-    });
-    const [shouldShowInitially, setInitiallyShowControls] = 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 = useMemo(() => {
-        // Hide if playing and mouse outside
-        const shouldShow = hovered || !player.playing || shouldShowInitially || alwaysShowControls;
-        return {
-            ...containerStyle,
-            opacity: Number(shouldShow),
-        };
-    }, [hovered, shouldShowInitially, player.playing, alwaysShowControls]);
-    useEffect(() => {
-        if (playButtonRef.current && spaceKeyToPlayOrPause) {
-            // This switches focus to play button when player.playing flag changes
-            playButtonRef.current.focus({
-                preventScroll: true,
-            });
-        }
-    }, [player.playing, spaceKeyToPlayOrPause]);
-    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);
-    }, []);
-    useEffect(() => {
-        if (shouldShowInitially === false) {
-            return;
-        }
-        const time = shouldShowInitially === true ? 2000 : shouldShowInitially;
-        const timeout = setTimeout(() => {
-            setInitiallyShowControls(false);
-        }, time);
-        return () => {
-            clearInterval(timeout);
-        };
-    }, [shouldShowInitially]);
-    const timeLabel = useMemo(() => {
-        return {
-            color: 'white',
-            fontFamily: 'sans-serif',
-            fontSize: 14,
-            maxWidth: maxTimeLabelWidth === null ? undefined : maxTimeLabelWidth,
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-        };
-    }, [maxTimeLabelWidth]);
-    const playbackRates = useMemo(() => {
-        if (showPlaybackRateControl === true) {
-            return [0.5, 0.8, 1, 1.2, 1.5, 1.8, 2, 2.5, 3];
-        }
-        if (Array.isArray(showPlaybackRateControl)) {
-            for (const rate of showPlaybackRateControl) {
-                if (typeof rate !== 'number') {
-                    throw new Error('Every item in showPlaybackRateControl must be a number');
-                }
-                if (rate <= 0) {
-                    throw new Error('Every item in showPlaybackRateControl must be positive');
-                }
-            }
-            return showPlaybackRateControl;
-        }
-        return null;
-    }, [showPlaybackRateControl]);
-    const ref = useRef(null);
-    const flexRef = useRef(null);
-    const onPointerUpIfContainer = useCallback((e) => {
-        // Only if pressing the container
-        if (e.target === ref.current || e.target === flexRef.current) {
-            onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp(e);
-        }
-    }, [onPointerUp]);
-    const onDoubleClickIfContainer = useCallback((e) => {
-        // Only if pressing the container
-        if (e.target === ref.current || e.target === flexRef.current) {
-            onDoubleClick === null || onDoubleClick === void 0 ? void 0 : onDoubleClick(e);
-        }
-    }, [onDoubleClick]);
-    return (_jsxs("div", { ref: ref, style: containerCss, onPointerUp: onPointerUpIfContainer, onDoubleClick: onDoubleClickIfContainer, children: [_jsxs("div", { ref: flexRef, style: controlsRow, children: [_jsxs("div", { style: leftPartStyle, children: [_jsx("button", { ref: playButtonRef, type: "button", style: playerButtonStyle, 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 ? (_jsx(DefaultPlayPauseButton, { buffering: buffering, playing: player.playing })) : ((_b = renderPlayPauseButton({
-                                    playing: player.playing,
-                                    isBuffering: buffering,
-                                })) !== null && _b !== void 0 ? _b : (_jsx(DefaultPlayPauseButton, { buffering: buffering, playing: player.playing }))) }), showVolumeControls ? (_jsxs(_Fragment, { children: [_jsx("div", { style: xSpacer }), _jsx(MediaVolumeSlider, { displayVerticalVolumeSlider: displayVerticalVolumeSlider })] })) : null, _jsx("div", { style: xSpacer }), _jsxs("div", { style: timeLabel, children: [formatTime(frame / fps), " / ", formatTime(durationInFrames / fps)] }), _jsx("div", { style: xSpacer })] }), _jsx("div", { style: flex1 }), playbackRates && canvasSize && (_jsx(PlaybackrateControl, { canvasSize: canvasSize, playbackRates: playbackRates })), playbackRates && supportsFullscreen && allowFullscreen ? (_jsx("div", { style: xSpacer })) : null, _jsx("div", { style: fullscreen, children: supportsFullscreen && allowFullscreen ? (_jsx("button", { type: "button", "aria-label": isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', title: isFullscreen ? 'Exit fullscreen' : 'Enter Fullscreen', style: playerButtonStyle, onClick: isFullscreen
-                                ? onExitFullscreenButtonClick
-                                : onFullscreenButtonClick, children: renderFullscreenButton === null ? (_jsx(FullscreenIcon, { isFullscreen: isFullscreen })) : (renderFullscreenButton({ isFullscreen })) })) : null })] }), _jsx("div", { style: ySpacer }), _jsx(PlayerSeekBar, { onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, durationInFrames: durationInFrames, inFrame: inFrame, outFrame: outFrame })] }));
-};

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerSeekBar.d.ts

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

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerSeekBar.js

@@ -1,145 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Internals, interpolate } from 'remotion';
-import { useHoverState } from './use-hover-state.js';
-import { usePlayer } from './use-player.js';
-import { useElementSize } from './utils/use-element-size.js';
-const getFrameFromX = (clientX, durationInFrames, width) => {
-    var _a;
-    const pos = clientX;
-    const frame = Math.round(interpolate(pos, [0, width], [0, (_a = durationInFrames - 1) !== null && _a !== void 0 ? _a : 0], {
-        extrapolateLeft: 'clamp',
-        extrapolateRight: 'clamp',
-    }));
-    return frame;
-};
-const BAR_HEIGHT = 5;
-const KNOB_SIZE = 12;
-const VERTICAL_PADDING = 4;
-const containerStyle = {
-    userSelect: 'none',
-    paddingTop: VERTICAL_PADDING,
-    paddingBottom: VERTICAL_PADDING,
-    boxSizing: 'border-box',
-    cursor: 'pointer',
-    position: 'relative',
-    touchAction: 'none',
-};
-const barBackground = {
-    height: BAR_HEIGHT,
-    backgroundColor: 'rgba(255, 255, 255, 0.25)',
-    width: '100%',
-    borderRadius: BAR_HEIGHT / 2,
-};
-const findBodyInWhichDivIsLocated = (div) => {
-    let current = div;
-    while (current.parentElement) {
-        current = current.parentElement;
-    }
-    return current;
-};
-export const PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFrame }) => {
-    var _a;
-    const containerRef = useRef(null);
-    const barHovered = useHoverState(containerRef, false);
-    const size = useElementSize(containerRef, {
-        triggerOnWindowResize: true,
-        shouldApplyCssTransforms: true,
-    });
-    const { seek, play, pause, playing } = usePlayer();
-    const frame = Internals.Timeline.useTimelinePosition();
-    const [dragging, setDragging] = useState({
-        dragging: false,
-    });
-    const width = (_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : 0;
-    const onPointerDown = useCallback((e) => {
-        var _a;
-        if (e.button !== 0) {
-            return;
-        }
-        const posLeft = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left;
-        const _frame = getFrameFromX(e.clientX - posLeft, durationInFrames, width);
-        pause();
-        seek(_frame);
-        setDragging({
-            dragging: true,
-            wasPlaying: playing,
-        });
-        onSeekStart();
-    }, [durationInFrames, width, pause, seek, playing, onSeekStart]);
-    const onPointerMove = useCallback((e) => {
-        var _a;
-        if (!size) {
-            throw new Error('Player has no size');
-        }
-        if (!dragging.dragging) {
-            return;
-        }
-        const posLeft = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left;
-        const _frame = getFrameFromX(e.clientX - posLeft, durationInFrames, size.width);
-        seek(_frame);
-    }, [dragging.dragging, durationInFrames, seek, size]);
-    const onPointerUp = useCallback(() => {
-        setDragging({
-            dragging: false,
-        });
-        if (!dragging.dragging) {
-            return;
-        }
-        if (dragging.wasPlaying) {
-            play();
-        }
-        else {
-            pause();
-        }
-        onSeekEnd();
-    }, [dragging, onSeekEnd, pause, play]);
-    useEffect(() => {
-        if (!dragging.dragging) {
-            return;
-        }
-        const body = findBodyInWhichDivIsLocated(containerRef.current);
-        body.addEventListener('pointermove', onPointerMove);
-        body.addEventListener('pointerup', onPointerUp);
-        return () => {
-            body.removeEventListener('pointermove', onPointerMove);
-            body.removeEventListener('pointerup', onPointerUp);
-        };
-    }, [dragging.dragging, onPointerMove, onPointerUp]);
-    const knobStyle = useMemo(() => {
-        return {
-            height: KNOB_SIZE,
-            width: KNOB_SIZE,
-            borderRadius: KNOB_SIZE / 2,
-            position: 'absolute',
-            top: VERTICAL_PADDING - KNOB_SIZE / 2 + 5 / 2,
-            backgroundColor: 'white',
-            left: Math.max(0, (frame / Math.max(1, durationInFrames - 1)) * width - KNOB_SIZE / 2),
-            boxShadow: '0 0 2px black',
-            opacity: Number(barHovered),
-        };
-    }, [barHovered, durationInFrames, frame, width]);
-    const fillStyle = useMemo(() => {
-        return {
-            height: BAR_HEIGHT,
-            backgroundColor: 'rgba(255, 255, 255, 1)',
-            width: ((frame - (inFrame !== null && inFrame !== void 0 ? inFrame : 0)) / (durationInFrames - 1)) * 100 + '%',
-            marginLeft: ((inFrame !== null && inFrame !== void 0 ? inFrame : 0) / (durationInFrames - 1)) * 100 + '%',
-            borderRadius: BAR_HEIGHT / 2,
-        };
-    }, [durationInFrames, frame, inFrame]);
-    const active = useMemo(() => {
-        return {
-            height: BAR_HEIGHT,
-            backgroundColor: 'rgba(255, 255, 255, 0.25)',
-            width: (((outFrame !== null && outFrame !== void 0 ? outFrame : durationInFrames - 1) - (inFrame !== null && inFrame !== void 0 ? inFrame : 0)) /
-                (durationInFrames - 1)) *
-                100 +
-                '%',
-            marginLeft: ((inFrame !== null && inFrame !== void 0 ? inFrame : 0) / (durationInFrames - 1)) * 100 + '%',
-            borderRadius: BAR_HEIGHT / 2,
-            position: 'absolute',
-        };
-    }, [durationInFrames, inFrame, outFrame]);
-    return (_jsxs("div", { ref: containerRef, onPointerDown: onPointerDown, style: containerStyle, children: [_jsxs("div", { style: barBackground, children: [_jsx("div", { style: active }), _jsx("div", { style: fillStyle })] }), _jsx("div", { style: knobStyle })] }));
-};

package/.rollup.cache/Users/jonathanburger/remotion/packages/player/dist/esm/PlayerUI.d.ts

@@ -1,46 +0,0 @@
-import React from 'react';
-import type { PlayerRef } from './player-methods.js';
-import type { RenderFullscreenButton, RenderPlayPauseButton } from './PlayerControls.js';
-export type ErrorFallback = (info: {
-    error: Error;
-}) => React.ReactNode;
-export type RenderLoading = (canvas: {
-    height: number;
-    width: number;
-    isBuffering: boolean;
-}) => React.ReactNode;
-export type RenderPoster = RenderLoading;
-export type PosterFillMode = 'player-size' | 'composition-size';
-declare const _default: React.ForwardRefExoticComponent<{
-    controls: boolean;
-    loop: boolean;
-    autoPlay: boolean;
-    allowFullscreen: boolean;
-    inputProps: Record<string, 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;
-    showPosterWhenBuffering: boolean;
-    inFrame: number | null;
-    outFrame: number | null;
-    initiallyShowControls: number | boolean;
-    renderPlayPauseButton: RenderPlayPauseButton | null;
-    renderFullscreen: RenderFullscreenButton | null;
-    alwaysShowControls: boolean;
-    showPlaybackRateControl: boolean | number[];
-    posterFillMode: PosterFillMode;
-    bufferStateDelayInMilliseconds: number;
-    hideControlsWhenPointerDoesntMove: number | boolean;
-} & React.RefAttributes<PlayerRef>>;
-export default _default;