@remotion/player 3.3.55 → 3.3.56

package/dist/esm/MediaVolumeSlider.js

@@ -1,114 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useId, useMemo, useRef, useState } from 'react';
-import { Internals, random } from 'remotion';
-import { ICON_SIZE, VolumeOffIcon, VolumeOnIcon } from './icons.js';
-import { useHoverState } from './use-hover-state.js';
-const BAR_HEIGHT = 5;
-const KNOB_SIZE = 12;
-export const VOLUME_SLIDER_WIDTH = 100;
-export const MediaVolumeSlider = ({ displayVerticalVolumeSlider }) => {
-    const [mediaMuted, setMediaMuted] = Internals.useMediaMutedState();
-    const [mediaVolume, setMediaVolume] = Internals.useMediaVolumeState();
-    const [focused, setFocused] = useState(false);
-    const parentDivRef = useRef(null);
-    const inputRef = useRef(null);
-    const hover = useHoverState(parentDivRef);
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const randomId = typeof useId === 'undefined' ? 'volume-slider' : useId();
-    const [randomClass] = useState(() => `__remotion-volume-slider-${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 = useCallback(() => {
-        if (mediaVolume === 0) {
-            setMediaVolume(1);
-            setMediaMuted(false);
-            return;
-        }
-        setMediaMuted((mute) => !mute);
-    }, [mediaVolume, setMediaMuted, setMediaVolume]);
-    const parentDivStyle = useMemo(() => {
-        return {
-            display: 'inline-flex',
-            background: 'none',
-            border: 'none',
-            padding: '6px',
-            justifyContent: 'center',
-            alignItems: 'center',
-            touchAction: 'none',
-            ...(displayVerticalVolumeSlider && { position: 'relative' }),
-        };
-    }, [displayVerticalVolumeSlider]);
-    const volumeContainer = useMemo(() => {
-        return {
-            display: 'inline',
-            width: ICON_SIZE,
-            height: ICON_SIZE,
-            cursor: 'pointer',
-            appearance: 'none',
-            background: 'none',
-            border: 'none',
-            padding: 0,
-        };
-    }, []);
-    const inputStyle = useMemo(() => {
-        const commonStyle = {
-            WebkitAppearance: 'none',
-            backgroundColor: 'rgba(255, 255, 255, 0.5)',
-            borderRadius: BAR_HEIGHT / 2,
-            cursor: 'pointer',
-            height: BAR_HEIGHT,
-            width: 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: ICON_SIZE + 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 (_jsxs("div", { ref: parentDivRef, style: parentDivStyle, children: [_jsx("style", { 
-                // eslint-disable-next-line react/no-danger
-                dangerouslySetInnerHTML: {
-                    __html: sliderStyle,
-                } }), _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 ? _jsx(VolumeOffIcon, {}) : _jsx(VolumeOnIcon, {}) }), (focused || hover) && !mediaMuted ? (_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] }));
-};

package/dist/esm/Player.js

@@ -1,140 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, } from 'react';
-import { Composition, Internals } from 'remotion';
-import { PlayerEventEmitterContext } from './emitter-context.js';
-import { PlayerEmitter } from './event-emitter.js';
-import { PLAYER_CSS_CLASSNAME } from './player-css-classname.js';
-import PlayerUI from './PlayerUI.js';
-import { SharedPlayerContexts } from './SharedPlayerContext.js';
-import { validateInOutFrames } from './utils/validate-in-out-frame.js';
-import { validateInitialFrame } from './utils/validate-initial-frame.js';
-import { validatePlaybackRate } from './utils/validate-playbackrate.js';
-export const componentOrNullIfLazy = (props) => {
-    if ('component' in props) {
-        return props.component;
-    }
-    return null;
-};
-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, alwaysShowControls = false, ...componentProps }, ref) => {
-    if (typeof window !== 'undefined') {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        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 = componentOrNullIfLazy(componentProps);
-    // @ts-expect-error
-    if ((componentForValidation === null || componentForValidation === void 0 ? void 0 : componentForValidation.type) === 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 === 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 = Internals.useLazyComponent(componentProps);
-    validateInitialFrame({ initialFrame, durationInFrames });
-    const [frame, setFrame] = useState(() => initialFrame !== null && initialFrame !== void 0 ? initialFrame : 0);
-    const [playing, setPlaying] = useState(false);
-    const [rootId] = useState('player-comp');
-    const [emitter] = useState(() => new PlayerEmitter());
-    const rootRef = useRef(null);
-    const audioAndVideoTags = useRef([]);
-    const imperativePlaying = 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`);
-    }
-    Internals.validateDimension(compositionHeight, 'compositionHeight', 'of the <Player /> component');
-    Internals.validateDimension(compositionWidth, 'compositionWidth', 'of the <Player /> component');
-    Internals.validateDurationInFrames(durationInFrames, 'of the <Player/> component');
-    Internals.validateFps(fps, 'as a prop of the <Player/> component', false);
-    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`);
-    }
-    validatePlaybackRate(playbackRate);
-    useEffect(() => {
-        emitter.dispatchRatechange(playbackRate);
-    }, [emitter, playbackRate]);
-    useImperativeHandle(ref, () => rootRef.current, []);
-    const timelineContextValue = useMemo(() => {
-        return {
-            frame,
-            playing,
-            rootId,
-            shouldRegisterSequences: false,
-            playbackRate,
-            imperativePlaying,
-            setPlaybackRate: () => {
-                throw new Error('playback rate');
-            },
-            audioAndVideoTags,
-        };
-    }, [frame, playbackRate, playing, rootId]);
-    const setTimelineContextValue = useMemo(() => {
-        return {
-            setFrame,
-            setPlaying,
-        };
-    }, [setFrame]);
-    const passedInputProps = useMemo(() => {
-        return inputProps !== null && inputProps !== void 0 ? inputProps : {};
-    }, [inputProps]);
-    if (typeof window !== 'undefined') {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        useLayoutEffect(() => {
-            // Inject CSS only on client, and also only after the Player has hydrated
-            Internals.CSSUtils.injectCSS(Internals.CSSUtils.makeDefaultCSS(`.${PLAYER_CSS_CLASSNAME}`, '#fff'));
-        }, []);
-    }
-    return (_jsx(Internals.IsPlayerContextProvider, { children: _jsx(SharedPlayerContexts, { timelineContext: timelineContextValue, component: component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, inputProps: inputProps, numberOfSharedAudioTags: numberOfSharedAudioTags, children: _jsx(Internals.Timeline.SetTimelineContext.Provider, { value: setTimelineContextValue, children: _jsx(PlayerEventEmitterContext.Provider, { value: emitter, children: _jsx(PlayerUI, { 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, alwaysShowControls: alwaysShowControls }) }) }) }) }));
-};
-const forward = forwardRef;
-/**
- * @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 const Player = forward(PlayerFn);

package/dist/esm/PlayerControls.js

@@ -1,146 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { Internals } from 'remotion';
-import { formatTime } from './format-time.js';
-import { FullscreenIcon, PauseIcon, PlayIcon } from './icons.js';
-import { MediaVolumeSlider } from './MediaVolumeSlider.js';
-import { PlayerSeekBar } from './PlayerSeekBar.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 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 ? _jsx(PauseIcon, {}) : _jsx(PlayIcon, {});
-export const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, initiallyShowControls, playerWidth, renderPlayPauseButton, renderFullscreenButton, alwaysShowControls, }) => {
-    const playButtonRef = useRef(null);
-    const frame = Internals.Timeline.useTimelinePosition();
-    const [supportsFullscreen, setSupportsFullscreen] = useState(false);
-    const { maxTimeLabelWidth, displayVerticalVolumeSlider } = useVideoControlsResize({ allowFullscreen, playerWidth });
-    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]);
-    return (_jsxs("div", { style: containerCss, children: [_jsxs("div", { style: controlsRow, children: [_jsxs("div", { style: leftPartStyle, children: [_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 ? (_jsx(PlayPauseButton, { playing: player.playing })) : (renderPlayPauseButton({ 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 }), _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: buttonStyle, 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/dist/esm/PlayerSeekBar.js

@@ -1,142 +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 }) => {
-    const containerRef = useRef(null);
-    const barHovered = useHoverState(containerRef);
-    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 onPointerDown = useCallback((e) => {
-        if (!size) {
-            throw new Error('Player has no size');
-        }
-        const _frame = getFrameFromX(e.clientX - size.left, durationInFrames, size.width);
-        pause();
-        seek(_frame);
-        setDragging({
-            dragging: true,
-            wasPlaying: playing,
-        });
-        onSeekStart();
-    }, [size, durationInFrames, pause, seek, playing, onSeekStart]);
-    const onPointerMove = useCallback((e) => {
-        var _a;
-        if (!size) {
-            throw new Error('Player has no size');
-        }
-        if (!dragging.dragging) {
-            return;
-        }
-        const _frame = getFrameFromX(e.clientX - ((_a = size === null || size === void 0 ? void 0 : size.left) !== null && _a !== void 0 ? _a : 0), 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(() => {
-        var _a;
-        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)) * ((_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : 0) -
-                KNOB_SIZE / 2),
-            boxShadow: '0 0 2px black',
-            opacity: Number(barHovered),
-        };
-    }, [barHovered, durationInFrames, frame, size]);
-    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 })] }));
-};