@remotion/player 4.0.0-webhook.26 → 4.1.0-alpha1

package/dist/esm/index.mjs

@@ -0,0 +1,2132 @@
+"use client";
+import React, { useState, useEffect, useRef, useContext, useCallback, useMemo, forwardRef, useImperativeHandle, Suspense, useLayoutEffect } from 'react';
+import { Internals, random, interpolate, Composition } from 'remotion';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+const calculatePlayerSize = ({ currentSize, width, height, compositionWidth, compositionHeight, }) => {
+    if (width !== undefined && height === undefined) {
+        return {
+            aspectRatio: [compositionWidth, compositionHeight].join('/'),
+        };
+    }
+    // Opposite: If has height specified, evaluate the height and specify a default width.
+    if (height !== undefined && width === undefined) {
+        return {
+            // Aspect ratio CSS prop will work
+            aspectRatio: [compositionWidth, compositionHeight].join('/'),
+        };
+    }
+    if (!currentSize) {
+        return {
+            width: compositionWidth,
+            height: compositionHeight,
+        };
+    }
+    return {
+        width: compositionWidth,
+        height: compositionHeight,
+    };
+};
+
+const calculateScale = ({ canvasSize, compositionHeight, compositionWidth, previewSize, }) => {
+    const heightRatio = canvasSize.height / compositionHeight;
+    const widthRatio = canvasSize.width / compositionWidth;
+    const ratio = Math.min(heightRatio, widthRatio);
+    return previewSize === 'auto' ? ratio : Number(previewSize);
+};
+const calculateCanvasTransformation = ({ previewSize, compositionWidth, compositionHeight, canvasSize, }) => {
+    const scale = calculateScale({
+        canvasSize,
+        compositionHeight,
+        compositionWidth,
+        previewSize,
+    });
+    const correction = 0 - (1 - scale) / 2;
+    const xCorrection = correction * compositionWidth;
+    const yCorrection = correction * compositionHeight;
+    const width = compositionWidth * scale;
+    const height = compositionHeight * scale;
+    const centerX = canvasSize.width / 2 - width / 2;
+    const centerY = canvasSize.height / 2 - height / 2;
+    return {
+        centerX,
+        centerY,
+        xCorrection,
+        yCorrection,
+        scale,
+    };
+};
+const calculateOuterStyle = ({ config, style, canvasSize, }) => {
+    if (!config) {
+        return {};
+    }
+    return {
+        position: 'relative',
+        overflow: 'hidden',
+        ...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,
+    };
+};
+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',
+    };
+};
+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',
+    };
+};
+
+const PlayerEventEmitterContext = React.createContext(undefined);
+const ThumbnailEmitterContext = React.createContext(undefined);
+
+class PlayerEmitter {
+    constructor() {
+        this.listeners = {
+            ended: [],
+            error: [],
+            pause: [],
+            play: [],
+            ratechange: [],
+            scalechange: [],
+            seeked: [],
+            timeupdate: [],
+            frameupdate: [],
+            fullscreenchange: [],
+            volumechange: [],
+            mutechange: [],
+        };
+    }
+    addEventListener(name, callback) {
+        this.listeners[name].push(callback);
+    }
+    removeEventListener(name, callback) {
+        this.listeners[name] = this.listeners[name].filter((l) => l !== callback);
+    }
+    dispatchEvent(dispatchName, context) {
+        this.listeners[dispatchName].forEach((callback) => {
+            callback({ detail: context });
+        });
+    }
+    dispatchSeek(frame) {
+        this.dispatchEvent('seeked', {
+            frame,
+        });
+    }
+    dispatchVolumeChange(volume) {
+        this.dispatchEvent('volumechange', {
+            volume,
+        });
+    }
+    dispatchPause() {
+        this.dispatchEvent('pause', undefined);
+    }
+    dispatchPlay() {
+        this.dispatchEvent('play', undefined);
+    }
+    dispatchEnded() {
+        this.dispatchEvent('ended', undefined);
+    }
+    dispatchRateChange(playbackRate) {
+        this.dispatchEvent('ratechange', {
+            playbackRate,
+        });
+    }
+    dispatchScaleChange(scale) {
+        this.dispatchEvent('scalechange', {
+            scale,
+        });
+    }
+    dispatchError(error) {
+        this.dispatchEvent('error', {
+            error,
+        });
+    }
+    dispatchTimeUpdate(event) {
+        this.dispatchEvent('timeupdate', event);
+    }
+    dispatchFrameUpdate(event) {
+        this.dispatchEvent('frameupdate', event);
+    }
+    dispatchFullscreenChange(event) {
+        this.dispatchEvent('fullscreenchange', event);
+    }
+    dispatchMuteChange(event) {
+        this.dispatchEvent('mutechange', event);
+    }
+}
+class ThumbnailEmitter {
+    constructor() {
+        this.listeners = {
+            error: [],
+        };
+    }
+    addEventListener(name, callback) {
+        this.listeners[name].push(callback);
+    }
+    removeEventListener(name, callback) {
+        this.listeners[name] = this.listeners[name].filter((l) => l !== callback);
+    }
+    dispatchEvent(dispatchName, context) {
+        this.listeners[dispatchName].forEach((callback) => {
+            callback({ detail: context });
+        });
+    }
+    dispatchError(error) {
+        this.dispatchEvent('error', {
+            error,
+        });
+    }
+}
+
+const useHoverState = (ref) => {
+    const [hovered, stetHovered] = useState(false);
+    useEffect(() => {
+        const { current } = ref;
+        if (!current) {
+            return;
+        }
+        const onHover = () => {
+            stetHovered(true);
+        };
+        const onLeave = () => {
+            stetHovered(false);
+        };
+        current.addEventListener('mouseenter', onHover);
+        current.addEventListener('mouseleave', onLeave);
+        return () => {
+            current.removeEventListener('mouseenter', onHover);
+            current.removeEventListener('mouseenter', onLeave);
+        };
+    }, [ref]);
+    return hovered;
+};
+
+const calculateNextFrame = ({ time, currentFrame: startFrame, playbackSpeed, fps, actualLastFrame, actualFirstFrame, framesAdvanced, shouldLoop, }) => {
+    const op = playbackSpeed < 0 ? Math.ceil : Math.floor;
+    const framesToAdvance = op((time * playbackSpeed) / (1000 / fps)) - framesAdvanced;
+    const nextFrame = framesToAdvance + startFrame;
+    const isCurrentFrameOutside = startFrame > actualLastFrame || startFrame < actualFirstFrame;
+    const isNextFrameOutside = nextFrame > actualLastFrame || nextFrame < actualFirstFrame;
+    const hasEnded = !shouldLoop && isNextFrameOutside && !isCurrentFrameOutside;
+    if (playbackSpeed > 0) {
+        // Play forwards
+        if (isNextFrameOutside) {
+            return {
+                nextFrame: actualFirstFrame,
+                framesToAdvance,
+                hasEnded,
+            };
+        }
+        return { nextFrame, framesToAdvance, hasEnded };
+    }
+    // Reverse playback
+    if (isNextFrameOutside) {
+        return { nextFrame: actualLastFrame, framesToAdvance, hasEnded };
+    }
+    return { nextFrame, framesToAdvance, hasEnded };
+};
+
+const getIsBackgrounded = () => {
+    if (typeof document === 'undefined') {
+        return false;
+    }
+    return document.visibilityState === 'hidden';
+};
+const useIsBackgrounded = () => {
+    const isBackgrounded = useRef(getIsBackgrounded());
+    useEffect(() => {
+        const onVisibilityChange = () => {
+            isBackgrounded.current = getIsBackgrounded();
+        };
+        document.addEventListener('visibilitychange', onVisibilityChange);
+        return () => {
+            document.removeEventListener('visibilitychange', onVisibilityChange);
+        };
+    }, []);
+    return isBackgrounded;
+};
+
+const usePlayer = () => {
+    var _a;
+    const [playing, setPlaying, imperativePlaying] = Internals.Timeline.usePlayingState();
+    const [hasPlayed, setHasPlayed] = useState(false);
+    const frame = Internals.Timeline.useTimelinePosition();
+    const playStart = useRef(frame);
+    const setFrame = Internals.Timeline.useTimelineSetFrame();
+    const setTimelinePosition = Internals.Timeline.useTimelineSetFrame();
+    const audioContext = useContext(Internals.SharedAudioContext);
+    const { audioAndVideoTags } = useContext(Internals.Timeline.TimelineContext);
+    const frameRef = useRef();
+    frameRef.current = frame;
+    const video = Internals.useVideo();
+    const config = Internals.useUnsafeVideoConfig();
+    const emitter = useContext(PlayerEventEmitterContext);
+    const lastFrame = ((_a = config === null || config === void 0 ? void 0 : config.durationInFrames) !== null && _a !== void 0 ? _a : 1) - 1;
+    const isLastFrame = frame === lastFrame;
+    const isFirstFrame = frame === 0;
+    if (!emitter) {
+        throw new TypeError('Expected Player event emitter context');
+    }
+    const seek = useCallback((newFrame) => {
+        setTimelinePosition(newFrame);
+        emitter.dispatchSeek(newFrame);
+    }, [emitter, setTimelinePosition]);
+    const play = useCallback((e) => {
+        if (imperativePlaying.current) {
+            return;
+        }
+        setHasPlayed(true);
+        if (isLastFrame) {
+            seek(0);
+        }
+        /**
+         * Play silent audio tags to warm them up for autoplay
+         */
+        if (audioContext && audioContext.numberOfAudioTags > 0 && e) {
+            audioContext.playAllAudios();
+        }
+        /**
+         * Play audios and videos directly here so they can benefit from
+         * being triggered by a click
+         */
+        audioAndVideoTags.current.forEach((a) => a.play());
+        imperativePlaying.current = true;
+        setPlaying(true);
+        playStart.current = frameRef.current;
+        emitter.dispatchPlay();
+    }, [
+        imperativePlaying,
+        isLastFrame,
+        audioContext,
+        setPlaying,
+        emitter,
+        seek,
+        audioAndVideoTags,
+    ]);
+    const pause = useCallback(() => {
+        if (imperativePlaying.current) {
+            imperativePlaying.current = false;
+            setPlaying(false);
+            emitter.dispatchPause();
+        }
+    }, [emitter, imperativePlaying, setPlaying]);
+    const pauseAndReturnToPlayStart = useCallback(() => {
+        if (imperativePlaying.current) {
+            imperativePlaying.current = false;
+            setTimelinePosition(playStart.current);
+            setPlaying(false);
+            emitter.dispatchPause();
+        }
+    }, [emitter, imperativePlaying, setPlaying, setTimelinePosition]);
+    const hasVideo = Boolean(video);
+    const frameBack = useCallback((frames) => {
+        if (!hasVideo) {
+            return null;
+        }
+        if (imperativePlaying.current) {
+            return;
+        }
+        setFrame((f) => {
+            return Math.max(0, f - frames);
+        });
+    }, [hasVideo, imperativePlaying, setFrame]);
+    const frameForward = useCallback((frames) => {
+        if (!hasVideo) {
+            return null;
+        }
+        if (imperativePlaying.current) {
+            return;
+        }
+        setFrame((f) => Math.min(lastFrame, f + frames));
+    }, [hasVideo, imperativePlaying, lastFrame, setFrame]);
+    const returnValue = useMemo(() => {
+        return {
+            frameBack,
+            frameForward,
+            isLastFrame,
+            emitter,
+            playing,
+            play,
+            pause,
+            seek,
+            isFirstFrame,
+            getCurrentFrame: () => frameRef.current,
+            isPlaying: () => imperativePlaying.current,
+            pauseAndReturnToPlayStart,
+            hasPlayed,
+        };
+    }, [
+        frameBack,
+        frameForward,
+        isLastFrame,
+        emitter,
+        playing,
+        play,
+        pause,
+        seek,
+        isFirstFrame,
+        pauseAndReturnToPlayStart,
+        imperativePlaying,
+        hasPlayed,
+    ]);
+    return returnValue;
+};
+
+const usePlayback = ({ loop, playbackRate, moveToBeginningWhenEnded, inFrame, outFrame, }) => {
+    const frame = Internals.Timeline.useTimelinePosition();
+    const config = Internals.useUnsafeVideoConfig();
+    const { playing, pause, emitter } = usePlayer();
+    const setFrame = Internals.Timeline.useTimelineSetFrame();
+    // requestAnimationFrame() does not work if the tab is not active.
+    // This means that audio will keep playing even if it has ended.
+    // In that case, we use setTimeout() instead.
+    const isBackgroundedRef = useIsBackgrounded();
+    const frameRef = useRef(frame);
+    frameRef.current = frame;
+    const lastTimeUpdateEvent = useRef(null);
+    useEffect(() => {
+        if (!config) {
+            return;
+        }
+        if (!playing) {
+            return;
+        }
+        let hasBeenStopped = false;
+        let reqAnimFrameCall = null;
+        const startedTime = performance.now();
+        let framesAdvanced = 0;
+        const cancelQueuedFrame = () => {
+            if (reqAnimFrameCall !== null) {
+                if (reqAnimFrameCall.type === 'raf') {
+                    cancelAnimationFrame(reqAnimFrameCall.id);
+                }
+                else {
+                    clearTimeout(reqAnimFrameCall.id);
+                }
+            }
+        };
+        const stop = () => {
+            hasBeenStopped = true;
+            cancelQueuedFrame();
+        };
+        const callback = () => {
+            const time = performance.now() - startedTime;
+            const actualLastFrame = outFrame !== null && outFrame !== void 0 ? outFrame : config.durationInFrames - 1;
+            const actualFirstFrame = inFrame !== null && inFrame !== void 0 ? inFrame : 0;
+            const { nextFrame, framesToAdvance, hasEnded } = calculateNextFrame({
+                time,
+                currentFrame: frameRef.current,
+                playbackSpeed: playbackRate,
+                fps: config.fps,
+                actualFirstFrame,
+                actualLastFrame,
+                framesAdvanced,
+                shouldLoop: loop,
+            });
+            framesAdvanced += framesToAdvance;
+            if (nextFrame !== frameRef.current &&
+                (!hasEnded || moveToBeginningWhenEnded)) {
+                setFrame(nextFrame);
+            }
+            if (hasEnded) {
+                stop();
+                pause();
+                emitter.dispatchEnded();
+                return;
+            }
+            if (!hasBeenStopped) {
+                queueNextFrame();
+            }
+        };
+        const queueNextFrame = () => {
+            if (isBackgroundedRef.current) {
+                reqAnimFrameCall = {
+                    type: 'timeout',
+                    // Note: Most likely, this will not be 1000 / fps, but the browser will throttle it to ~1/sec.
+                    id: setTimeout(callback, 1000 / config.fps),
+                };
+            }
+            else {
+                reqAnimFrameCall = { type: 'raf', id: requestAnimationFrame(callback) };
+            }
+        };
+        queueNextFrame();
+        const onVisibilityChange = () => {
+            if (document.visibilityState === 'visible') {
+                return;
+            }
+            // If tab goes into the background, cancel requestAnimationFrame() and update immediately.
+            // , so the transition to setTimeout() can be fulfilled.
+            cancelQueuedFrame();
+            callback();
+        };
+        window.addEventListener('visibilitychange', onVisibilityChange);
+        return () => {
+            window.removeEventListener('visibilitychange', onVisibilityChange);
+            stop();
+        };
+    }, [
+        config,
+        loop,
+        pause,
+        playing,
+        setFrame,
+        emitter,
+        playbackRate,
+        inFrame,
+        outFrame,
+        moveToBeginningWhenEnded,
+        isBackgroundedRef,
+    ]);
+    useEffect(() => {
+        const interval = setInterval(() => {
+            if (lastTimeUpdateEvent.current === frameRef.current) {
+                return;
+            }
+            emitter.dispatchTimeUpdate({ frame: frameRef.current });
+            lastTimeUpdateEvent.current = frameRef.current;
+        }, 250);
+        return () => clearInterval(interval);
+    }, [emitter]);
+    useEffect(() => {
+        emitter.dispatchFrameUpdate({ frame });
+    }, [emitter, frame]);
+};
+
+let elementSizeHooks = [];
+const updateAllElementsSizes = () => {
+    for (const listener of elementSizeHooks) {
+        listener();
+    }
+};
+const useElementSize = (ref, options) => {
+    const [size, setSize] = useState(null);
+    const observer = useMemo(() => {
+        if (typeof ResizeObserver === 'undefined') {
+            return null;
+        }
+        return new ResizeObserver((entries) => {
+            // The contentRect returns the width without any `scale()`'s being applied. The height is wrong
+            const { contentRect } = entries[0];
+            // The clientRect returns the size with `scale()` being applied.
+            const newSize = entries[0].target.getClientRects();
+            if (!(newSize === null || newSize === void 0 ? void 0 : newSize[0])) {
+                setSize(null);
+                return;
+            }
+            const probableCssParentScale = contentRect.width === 0 ? 1 : newSize[0].width / contentRect.width;
+            const width = options.shouldApplyCssTransforms
+                ? newSize[0].width
+                : newSize[0].width * (1 / probableCssParentScale);
+            const height = options.shouldApplyCssTransforms
+                ? newSize[0].height
+                : newSize[0].height * (1 / probableCssParentScale);
+            setSize({
+                width,
+                height,
+                left: newSize[0].x,
+                top: newSize[0].y,
+                windowSize: {
+                    height: window.innerHeight,
+                    width: window.innerWidth,
+                },
+            });
+        });
+    }, [options.shouldApplyCssTransforms]);
+    const updateSize = useCallback(() => {
+        if (!ref.current) {
+            return;
+        }
+        const rect = ref.current.getClientRects();
+        if (!rect[0]) {
+            setSize(null);
+            return;
+        }
+        setSize((prevState) => {
+            const isSame = prevState &&
+                prevState.width === rect[0].width &&
+                prevState.height === rect[0].height &&
+                prevState.left === rect[0].x &&
+                prevState.top === rect[0].y &&
+                prevState.windowSize.height === window.innerHeight &&
+                prevState.windowSize.width === window.innerWidth;
+            if (isSame) {
+                return prevState;
+            }
+            return {
+                width: rect[0].width,
+                height: rect[0].height,
+                left: rect[0].x,
+                top: rect[0].y,
+                windowSize: {
+                    height: window.innerHeight,
+                    width: window.innerWidth,
+                },
+            };
+        });
+    }, [ref]);
+    useEffect(() => {
+        if (!observer) {
+            return;
+        }
+        updateSize();
+        const { current } = ref;
+        if (ref.current) {
+            observer.observe(ref.current);
+        }
+        return () => {
+            if (current) {
+                observer.unobserve(current);
+            }
+        };
+    }, [observer, ref, updateSize]);
+    useEffect(() => {
+        if (!options.triggerOnWindowResize) {
+            return;
+        }
+        window.addEventListener('resize', updateSize);
+        return () => {
+            window.removeEventListener('resize', updateSize);
+        };
+    }, [options.triggerOnWindowResize, updateSize]);
+    useEffect(() => {
+        elementSizeHooks.push(updateSize);
+        return () => {
+            elementSizeHooks = elementSizeHooks.filter((e) => e !== updateSize);
+        };
+    }, [updateSize]);
+    return useMemo(() => {
+        if (!size) {
+            return null;
+        }
+        return { ...size, refresh: updateSize };
+    }, [size, updateSize]);
+};
+
+const PLAYER_CSS_CLASSNAME = '__remotion-player';
+
+const errorStyle = {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flex: 1,
+    height: '100%',
+    width: '100%',
+};
+class ErrorBoundary extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.state = { hasError: null };
+    }
+    static getDerivedStateFromError(error) {
+        // Update state so the next render will show the fallback UI.
+        return { hasError: error };
+    }
+    componentDidCatch(error) {
+        this.props.onError(error);
+    }
+    render() {
+        if (this.state.hasError) {
+            // You can render any custom fallback UI
+            return (jsx("div", { style: errorStyle, children: this.props.errorFallback({
+                    error: this.state.hasError,
+                }) }));
+        }
+        return this.props.children;
+    }
+}
+
+const formatTime = (timeInSeconds) => {
+    const minutes = Math.floor(timeInSeconds / 60);
+    const seconds = Math.floor(timeInSeconds - minutes * 60);
+    return `${String(minutes)}:${String(seconds).padStart(2, '0')}`;
+};
+
+const ICON_SIZE = 25;
+const fullscreenIconSize = 16;
+const rotate = {
+    transform: `rotate(90deg)`,
+};
+const PlayIcon = () => {
+    return (jsx("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "-100 -100 400 400", style: rotate, children: jsx("path", { fill: "#fff", stroke: "#fff", strokeWidth: "100", strokeLinejoin: "round", d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z" }) }));
+};
+const PauseIcon = () => {
+    return (jsxs("svg", { viewBox: "0 0 100 100", width: ICON_SIZE, height: ICON_SIZE, children: [jsx("rect", { x: "25", y: "20", width: "20", height: "60", fill: "#fff", ry: "5", rx: "5" }), jsx("rect", { x: "55", y: "20", width: "20", height: "60", fill: "#fff", ry: "5", rx: "5" })] }));
+};
+const FullscreenIcon = ({ isFullscreen, }) => {
+    const strokeWidth = 6;
+    const viewSize = 32;
+    const out = isFullscreen ? 0 : strokeWidth / 2;
+    const middleInset = isFullscreen ? strokeWidth * 1.6 : strokeWidth / 2;
+    const inset = isFullscreen ? strokeWidth * 1.6 : strokeWidth * 2;
+    return (jsxs("svg", { viewBox: `0 0 ${viewSize} ${viewSize}`, height: fullscreenIconSize, width: fullscreenIconSize, children: [jsx("path", { d: `
+				M ${out} ${inset}
+				L ${middleInset} ${middleInset}
+				L ${inset} ${out}
+				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: `
+				M ${viewSize - out} ${inset}
+				L ${viewSize - middleInset} ${middleInset}
+				L ${viewSize - inset} ${out}
+				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: `
+				M ${out} ${viewSize - inset}
+				L ${middleInset} ${viewSize - middleInset}
+				L ${inset} ${viewSize - out}
+				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" }), jsx("path", { d: `
+				M ${viewSize - out} ${viewSize - inset}
+				L ${viewSize - middleInset} ${viewSize - middleInset}
+				L ${viewSize - inset} ${viewSize - out}
+				`, stroke: "#fff", strokeWidth: strokeWidth, fill: "none" })] }));
+};
+const VolumeOffIcon = () => {
+    return (jsx("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "0 0 24 24", children: jsx("path", { d: "M3.63 3.63a.996.996 0 000 1.41L7.29 8.7 7 9H4c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71v-4.17l4.18 4.18c-.49.37-1.02.68-1.6.91-.36.15-.58.53-.58.92 0 .72.73 1.18 1.39.91.8-.33 1.55-.77 2.22-1.31l1.34 1.34a.996.996 0 101.41-1.41L5.05 3.63c-.39-.39-1.02-.39-1.42 0zM19 12c0 .82-.15 1.61-.41 2.34l1.53 1.53c.56-1.17.88-2.48.88-3.87 0-3.83-2.4-7.11-5.78-8.4-.59-.23-1.22.23-1.22.86v.19c0 .38.25.71.61.85C17.18 6.54 19 9.06 19 12zm-8.71-6.29l-.17.17L12 7.76V6.41c0-.89-1.08-1.33-1.71-.7zM16.5 12A4.5 4.5 0 0014 7.97v1.79l2.48 2.48c.01-.08.02-.16.02-.24z", fill: "#fff" }) }));
+};
+const VolumeOnIcon = () => {
+    return (jsx("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "0 0 24 24", children: jsx("path", { d: "M3 10v4c0 .55.45 1 1 1h3l3.29 3.29c.63.63 1.71.18 1.71-.71V6.41c0-.89-1.08-1.34-1.71-.71L7 9H4c-.55 0-1 .45-1 1zm13.5 2A4.5 4.5 0 0014 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 4.45v.2c0 .38.25.71.6.85C17.18 6.53 19 9.06 19 12s-1.82 5.47-4.4 6.5c-.36.14-.6.47-.6.85v.2c0 .63.63 1.07 1.21.85C18.6 19.11 21 15.84 21 12s-2.4-7.11-5.79-8.4c-.58-.23-1.21.22-1.21.85z", fill: "#fff" }) }));
+};
+
+const BAR_HEIGHT$1 = 5;
+const KNOB_SIZE$1 = 12;
+const VOLUME_SLIDER_WIDTH = 100;
+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);
+    // Need to import it from React to fix React 17 ESM support.
+    const randomId = 
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    typeof React.useId === 'undefined' ? 'volume-slider' : React.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',
+            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$1 / 2,
+            cursor: 'pointer',
+            height: BAR_HEIGHT$1,
+            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$1 / 2}px;
+		box-shadow: 0 0 2px black;
+		height: ${KNOB_SIZE$1}px;
+		width: ${KNOB_SIZE$1}px;
+	}
+
+	.${randomClass}::-moz-range-thumb {
+		-webkit-appearance: none;
+		background-color: white;
+		border-radius: ${KNOB_SIZE$1 / 2}px;
+		box-shadow: 0 0 2px black;
+		height: ${KNOB_SIZE$1}px;
+		width: ${KNOB_SIZE$1}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] }));
+};
+
+// hook to hide a popup/modal when clicked outside
+function useComponentVisible(initialIsVisible) {
+    const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible);
+    const ref = useRef(null);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (ref.current && !ref.current.contains(event.target)) {
+                setIsComponentVisible(false);
+            }
+        };
+        document.addEventListener('pointerup', handleClickOutside, true);
+        return () => {
+            document.removeEventListener('pointerup', handleClickOutside, true);
+        };
+    }, []);
+    return { ref, isComponentVisible, setIsComponentVisible };
+}
+
+// To align
+const BOTTOM = 35;
+// Arbitrary to clamp the height of the popup
+const THRESHOLD = 70;
+const rateDiv = {
+    height: 30,
+    paddingRight: 15,
+    paddingLeft: 12,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+};
+const checkmarkContainer = {
+    width: 22,
+    display: 'flex',
+    alignItems: 'center',
+};
+const checkmarkStyle = {
+    width: 14,
+    height: 14,
+    color: 'black',
+};
+const Checkmark = () => (jsx("svg", { viewBox: "0 0 512 512", style: checkmarkStyle, children: jsx("path", { fill: "currentColor", d: "M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z" }) }));
+const PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
+    const { setPlaybackRate, playbackRate } = useContext(Internals.Timeline.TimelineContext);
+    const [keyboardSelectedRate, setKeyboardSelectedRate] = useState(playbackRate);
+    useEffect(() => {
+        const listener = (e) => {
+            e.preventDefault();
+            if (e.key === 'ArrowUp') {
+                const currentIndex = playbackRates.findIndex((rate) => rate === keyboardSelectedRate);
+                if (currentIndex === 0) {
+                    return;
+                }
+                if (currentIndex === -1) {
+                    setKeyboardSelectedRate(playbackRates[0]);
+                }
+                else {
+                    setKeyboardSelectedRate(playbackRates[currentIndex - 1]);
+                }
+            }
+            else if (e.key === 'ArrowDown') {
+                const currentIndex = playbackRates.findIndex((rate) => rate === keyboardSelectedRate);
+                if (currentIndex === playbackRates.length - 1) {
+                    return;
+                }
+                if (currentIndex === -1) {
+                    setKeyboardSelectedRate(playbackRates[playbackRates.length - 1]);
+                }
+                else {
+                    setKeyboardSelectedRate(playbackRates[currentIndex + 1]);
+                }
+            }
+            else if (e.key === 'Enter') {
+                setPlaybackRate(keyboardSelectedRate);
+                setIsComponentVisible(false);
+            }
+        };
+        window.addEventListener('keydown', listener);
+        return () => {
+            window.removeEventListener('keydown', listener);
+        };
+    }, [
+        playbackRates,
+        keyboardSelectedRate,
+        setPlaybackRate,
+        setIsComponentVisible,
+    ]);
+    const onSelect = useCallback((rate) => {
+        setPlaybackRate(rate);
+        setIsComponentVisible(false);
+    }, [setIsComponentVisible, setPlaybackRate]);
+    const playbackPopup = useMemo(() => {
+        return {
+            position: 'absolute',
+            right: 0,
+            width: 125,
+            maxHeight: canvasSize.height - THRESHOLD - BOTTOM,
+            bottom: 35,
+            background: '#fff',
+            borderRadius: 4,
+            overflow: 'auto',
+            color: 'black',
+            textAlign: 'left',
+        };
+    }, [canvasSize.height]);
+    return (jsx("div", { style: playbackPopup, children: playbackRates.map((rate) => {
+            return (jsx(PlaybackrateOption, { selectedRate: playbackRate, onSelect: onSelect, rate: rate, keyboardSelectedRate: keyboardSelectedRate }, rate));
+        }) }));
+};
+const PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }) => {
+    const onClick = useCallback((e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        onSelect(rate);
+    }, [onSelect, rate]);
+    const [hovered, setHovered] = useState(false);
+    const onMouseEnter = useCallback(() => {
+        setHovered(true);
+    }, []);
+    const onMouseLeave = useCallback(() => {
+        setHovered(false);
+    }, []);
+    const actualStyle = useMemo(() => {
+        return {
+            ...rateDiv,
+            backgroundColor: hovered || keyboardSelectedRate === rate ? '#eee' : 'transparent',
+        };
+    }, [hovered, keyboardSelectedRate, rate]);
+    return (jsxs("div", { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, tabIndex: 0, style: actualStyle, onClick: onClick, children: [jsx("div", { style: checkmarkContainer, children: rate === selectedRate ? jsx(Checkmark, {}) : null }), rate.toFixed(1), "x"] }, rate));
+};
+const label = {
+    fontSize: 13,
+    fontWeight: 'bold',
+    color: 'white',
+    border: '2px solid white',
+    borderRadius: 20,
+    paddingLeft: 8,
+    paddingRight: 8,
+    paddingTop: 2,
+    paddingBottom: 2,
+};
+const playerButtonStyle = {
+    appearance: 'none',
+    backgroundColor: 'transparent',
+    border: 'none',
+    cursor: 'pointer',
+    paddingLeft: 0,
+    paddingRight: 0,
+    paddingTop: 6,
+    paddingBottom: 6,
+    height: 37,
+    display: 'inline-flex',
+    marginBottom: 0,
+    marginTop: 0,
+    alignItems: 'center',
+};
+const button = {
+    ...playerButtonStyle,
+    position: 'relative',
+};
+const PlaybackrateControl = ({ playbackRates, canvasSize }) => {
+    const { ref, isComponentVisible, setIsComponentVisible } = useComponentVisible(false);
+    const { playbackRate } = useContext(Internals.Timeline.TimelineContext);
+    const onClick = useCallback((e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        setIsComponentVisible(!isComponentVisible);
+    }, [isComponentVisible, setIsComponentVisible]);
+    return (jsx("div", { ref: ref, children: jsxs("button", { type: "button", "aria-label": "Change playback rate", style: button, onClick: onClick, children: [jsxs("div", { style: label, children: [playbackRate, "x"] }), isComponentVisible && (jsx(PlaybackPopup, { canvasSize: canvasSize, playbackRates: playbackRates, setIsComponentVisible: setIsComponentVisible }))] }) }));
+};
+
+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$1 = {
+    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;
+};
+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$1, children: [jsxs("div", { style: barBackground, children: [jsx("div", { style: active }), jsx("div", { style: fillStyle })] }), jsx("div", { style: knobStyle })] }));
+};
+
+const X_SPACER = 10;
+const X_PADDING = 12;
+const useVideoControlsResize = ({ allowFullscreen: allowFullScreen, playerWidth, }) => {
+    const resizeInfo = useMemo(() => {
+        const playPauseIconSize = ICON_SIZE;
+        const volumeIconSize = ICON_SIZE;
+        const _fullscreenIconSize = allowFullScreen ? fullscreenIconSize : 0;
+        const elementsSize = volumeIconSize +
+            playPauseIconSize +
+            _fullscreenIconSize +
+            X_PADDING * 2 +
+            X_SPACER * 2;
+        const maxTimeLabelWidth = playerWidth - elementsSize;
+        const maxTimeLabelWidthWithoutNegativeValue = Math.max(maxTimeLabelWidth, 0);
+        const availableTimeLabelWidthIfVolumeOpen = maxTimeLabelWidthWithoutNegativeValue - VOLUME_SLIDER_WIDTH;
+        // If max label width is lower than the volume width
+        // then it means we need to take it's width as the max label width
+        // otherwise we took the available width when volume open
+        const computedLabelWidth = availableTimeLabelWidthIfVolumeOpen < VOLUME_SLIDER_WIDTH
+            ? maxTimeLabelWidthWithoutNegativeValue
+            : availableTimeLabelWidthIfVolumeOpen;
+        const minWidthForHorizontalDisplay = computedLabelWidth + elementsSize + VOLUME_SLIDER_WIDTH;
+        const displayVerticalVolumeSlider = playerWidth < minWidthForHorizontalDisplay;
+        return {
+            maxTimeLabelWidth: maxTimeLabelWidthWithoutNegativeValue === 0
+                ? null
+                : maxTimeLabelWidthWithoutNegativeValue,
+            displayVerticalVolumeSlider,
+        };
+    }, [allowFullScreen, playerWidth]);
+    return resizeInfo;
+};
+
+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 = {};
+const PlayPauseButton = ({ playing }) => playing ? jsx(PauseIcon, {}) : jsx(PlayIcon, {});
+const Controls = ({ durationInFrames, hovered, isFullscreen, fps, player, showVolumeControls, onFullscreenButtonClick, allowFullscreen, onExitFullscreenButtonClick, spaceKeyToPlayOrPause, onSeekEnd, onSeekStart, inFrame, outFrame, initiallyShowControls, canvasSize, renderPlayPauseButton, renderFullscreenButton, alwaysShowControls, showPlaybackRateControl, }) => {
+    var _a;
+    const playButtonRef = useRef(null);
+    const frame = Internals.Timeline.useTimelinePosition();
+    const [supportsFullscreen, setSupportsFullscreen] = useState(false);
+    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]);
+    return (jsxs("div", { style: containerCss, children: [jsxs("div", { 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(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 }), 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 })] }));
+};
+
+const IS_NODE = typeof document === 'undefined';
+
+const cancellablePromise = (promise) => {
+    let isCanceled = false;
+    const wrappedPromise = new Promise((resolve, reject) => {
+        promise
+            .then((value) => {
+            if (isCanceled) {
+                reject({ isCanceled, value });
+                return;
+            }
+            resolve(value);
+        })
+            .catch((error) => {
+            reject({ isCanceled, error });
+        });
+    });
+    return {
+        promise: wrappedPromise,
+        cancel: () => {
+            isCanceled = true;
+        },
+    };
+};
+
+/* eslint-disable no-promise-executor-return */
+const delay = (n) => new Promise((resolve) => setTimeout(resolve, n));
+
+const useCancellablePromises = () => {
+    const pendingPromises = useRef([]);
+    const appendPendingPromise = useCallback((promise) => {
+        pendingPromises.current = [...pendingPromises.current, promise];
+    }, []);
+    const removePendingPromise = useCallback((promise) => {
+        pendingPromises.current = pendingPromises.current.filter((p) => p !== promise);
+    }, []);
+    const clearPendingPromises = useCallback(() => pendingPromises.current.map((p) => p.cancel()), []);
+    const api = useMemo(() => ({
+        appendPendingPromise,
+        removePendingPromise,
+        clearPendingPromises,
+    }), [appendPendingPromise, clearPendingPromises, removePendingPromise]);
+    return api;
+};
+
+const useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFullscreen) => {
+    const api = useCancellablePromises();
+    const handleClick = useCallback(async (e) => {
+        api.clearPendingPromises();
+        const waitForClick = cancellablePromise(delay(200));
+        api.appendPendingPromise(waitForClick);
+        try {
+            await waitForClick.promise;
+            api.removePendingPromise(waitForClick);
+            onClick(e);
+        }
+        catch (errorInfo) {
+            const info = errorInfo;
+            api.removePendingPromise(waitForClick);
+            if (!info.isCanceled) {
+                throw info.error;
+            }
+        }
+    }, [api, onClick]);
+    const handleDoubleClick = useCallback(() => {
+        api.clearPendingPromises();
+        onDoubleClick();
+    }, [api, onDoubleClick]);
+    const returnValue = useMemo(() => {
+        if (!doubleClickToFullscreen) {
+            return [onClick, onDoubleClick];
+        }
+        return [handleClick, handleDoubleClick];
+    }, [
+        doubleClickToFullscreen,
+        handleClick,
+        handleDoubleClick,
+        onClick,
+        onDoubleClick,
+    ]);
+    return returnValue;
+};
+
+const reactVersion$1 = React.version.split('.')[0];
+if (reactVersion$1 === '0') {
+    throw new Error(`Version ${reactVersion$1} of "react" is not supported by Remotion`);
+}
+const doesReactVersionSupportSuspense$1 = parseInt(reactVersion$1, 10) >= 18;
+const PlayerUI = ({ controls, style, loop, autoPlay, allowFullscreen, inputProps, clickToPlay, showVolumeControls, doubleClickToFullscreen, spaceKeyToPlayOrPause, errorFallback, playbackRate, renderLoading, renderPoster, className, moveToBeginningWhenEnded, showPosterWhenUnplayed, showPosterWhenEnded, showPosterWhenPaused, inFrame, outFrame, initiallyShowControls, renderFullscreen: renderFullscreenButton, renderPlayPauseButton, alwaysShowControls, showPlaybackRateControl, }, ref) => {
+    var _a, _b, _c;
+    const config = Internals.useUnsafeVideoConfig();
+    const video = Internals.useVideo();
+    const container = useRef(null);
+    const hovered = useHoverState(container);
+    const canvasSize = useElementSize(container, {
+        triggerOnWindowResize: false,
+        shouldApplyCssTransforms: false,
+    });
+    const [hasPausedToResume, setHasPausedToResume] = useState(false);
+    const [shouldAutoplay, setShouldAutoPlay] = useState(autoPlay);
+    const [isFullscreen, setIsFullscreen] = useState(() => false);
+    const [seeking, setSeeking] = useState(false);
+    usePlayback({
+        loop,
+        playbackRate,
+        moveToBeginningWhenEnded,
+        inFrame,
+        outFrame,
+    });
+    const player = usePlayer();
+    useEffect(() => {
+        if (hasPausedToResume && !player.playing) {
+            setHasPausedToResume(false);
+            player.play();
+        }
+    }, [hasPausedToResume, player]);
+    useEffect(() => {
+        const { current } = container;
+        if (!current) {
+            return;
+        }
+        const onFullscreenChange = () => {
+            setIsFullscreen(document.fullscreenElement === current ||
+                document.webkitFullscreenElement === current);
+        };
+        document.addEventListener('fullscreenchange', onFullscreenChange);
+        document.addEventListener('webkitfullscreenchange', onFullscreenChange);
+        return () => {
+            document.removeEventListener('fullscreenchange', onFullscreenChange);
+            document.removeEventListener('webkitfullscreenchange', onFullscreenChange);
+        };
+    }, []);
+    const toggle = useCallback((e) => {
+        if (player.isPlaying()) {
+            player.pause();
+        }
+        else {
+            player.play(e);
+        }
+    }, [player]);
+    const requestFullscreen = useCallback(() => {
+        if (!allowFullscreen) {
+            throw new Error('allowFullscreen is false');
+        }
+        const supportsFullScreen = document.fullscreenEnabled || document.webkitFullscreenEnabled;
+        if (!supportsFullScreen) {
+            throw new Error('Browser doesnt support fullscreen');
+        }
+        if (!container.current) {
+            throw new Error('No player ref found');
+        }
+        if (container.current.webkitRequestFullScreen) {
+            container.current.webkitRequestFullScreen();
+        }
+        else {
+            container.current.requestFullscreen();
+        }
+    }, [allowFullscreen]);
+    const exitFullscreen = useCallback(() => {
+        if (document.webkitExitFullscreen) {
+            document.webkitExitFullscreen();
+        }
+        else {
+            document.exitFullscreen();
+        }
+    }, []);
+    useEffect(() => {
+        const { current } = container;
+        if (!current) {
+            return;
+        }
+        const fullscreenChange = () => {
+            var _a;
+            const element = (_a = document.webkitFullscreenElement) !== null && _a !== void 0 ? _a : document.fullscreenElement;
+            if (element && element === container.current) {
+                player.emitter.dispatchFullscreenChange({
+                    isFullscreen: true,
+                });
+            }
+            else {
+                player.emitter.dispatchFullscreenChange({
+                    isFullscreen: false,
+                });
+            }
+        };
+        current.addEventListener('webkitfullscreenchange', fullscreenChange);
+        current.addEventListener('fullscreenchange', fullscreenChange);
+        return () => {
+            current.removeEventListener('webkitfullscreenchange', fullscreenChange);
+            current.removeEventListener('fullscreenchange', fullscreenChange);
+        };
+    }, [player.emitter]);
+    const durationInFrames = (_a = config === null || config === void 0 ? void 0 : config.durationInFrames) !== null && _a !== void 0 ? _a : 1;
+    const layout = useMemo(() => {
+        if (!config || !canvasSize) {
+            return null;
+        }
+        return calculateCanvasTransformation({
+            canvasSize,
+            compositionHeight: config.height,
+            compositionWidth: config.width,
+            previewSize: 'auto',
+        });
+    }, [canvasSize, config]);
+    const scale = (_b = layout === null || layout === void 0 ? void 0 : layout.scale) !== null && _b !== void 0 ? _b : 1;
+    const initialScaleIgnored = useRef(false);
+    useEffect(() => {
+        if (!initialScaleIgnored.current) {
+            initialScaleIgnored.current = true;
+            return;
+        }
+        player.emitter.dispatchScaleChange(scale);
+    }, [player.emitter, scale]);
+    const { setMediaVolume, setMediaMuted } = useContext(Internals.SetMediaVolumeContext);
+    const { mediaMuted, mediaVolume } = useContext(Internals.MediaVolumeContext);
+    useEffect(() => {
+        player.emitter.dispatchVolumeChange(mediaVolume);
+    }, [player.emitter, mediaVolume]);
+    const isMuted = mediaMuted || mediaVolume === 0;
+    useEffect(() => {
+        player.emitter.dispatchMuteChange({
+            isMuted,
+        });
+    }, [player.emitter, isMuted]);
+    useImperativeHandle(ref, () => {
+        const methods = {
+            play: player.play,
+            pause: player.pause,
+            toggle,
+            getContainerNode: () => container.current,
+            getCurrentFrame: player.getCurrentFrame,
+            isPlaying: () => player.playing,
+            seekTo: (f) => {
+                const lastFrame = durationInFrames - 1;
+                const frameToSeekTo = Math.max(0, Math.min(lastFrame, f));
+                if (player.isPlaying()) {
+                    const pauseToResume = frameToSeekTo !== lastFrame || loop;
+                    setHasPausedToResume(pauseToResume);
+                    player.pause();
+                }
+                if (frameToSeekTo === lastFrame && !loop) {
+                    player.emitter.dispatchEnded();
+                }
+                player.seek(frameToSeekTo);
+            },
+            isFullscreen: () => isFullscreen,
+            requestFullscreen,
+            exitFullscreen,
+            getVolume: () => {
+                if (mediaMuted) {
+                    return 0;
+                }
+                return mediaVolume;
+            },
+            setVolume: (vol) => {
+                if (typeof vol !== 'number') {
+                    throw new TypeError(`setVolume() takes a number, got value of type ${typeof vol}`);
+                }
+                if (isNaN(vol)) {
+                    throw new TypeError(`setVolume() got a number that is NaN. Volume must be between 0 and 1.`);
+                }
+                if (vol < 0 || vol > 1) {
+                    throw new TypeError(`setVolume() got a number that is out of range. Must be between 0 and 1, got ${typeof vol}`);
+                }
+                setMediaVolume(vol);
+            },
+            isMuted: () => isMuted,
+            mute: () => {
+                setMediaMuted(true);
+            },
+            unmute: () => {
+                setMediaMuted(false);
+            },
+            getScale: () => scale,
+        };
+        return Object.assign(player.emitter, methods);
+    }, [
+        durationInFrames,
+        exitFullscreen,
+        isFullscreen,
+        loop,
+        mediaMuted,
+        isMuted,
+        mediaVolume,
+        player,
+        requestFullscreen,
+        setMediaMuted,
+        setMediaVolume,
+        toggle,
+        scale,
+    ]);
+    const VideoComponent = video ? video.component : null;
+    const outerStyle = useMemo(() => {
+        return calculateOuterStyle({ canvasSize, config, style });
+    }, [canvasSize, config, style]);
+    const outer = useMemo(() => {
+        return calculateOuter({ config, layout, scale });
+    }, [config, layout, scale]);
+    const containerStyle = useMemo(() => {
+        return calculateContainerStyle({ canvasSize, config, layout, scale });
+    }, [canvasSize, config, layout, scale]);
+    const onError = useCallback((error) => {
+        player.pause();
+        // Pay attention to `this context`
+        player.emitter.dispatchError(error);
+    }, [player]);
+    const onFullscreenButtonClick = useCallback((e) => {
+        e.stopPropagation();
+        requestFullscreen();
+    }, [requestFullscreen]);
+    const onExitFullscreenButtonClick = useCallback((e) => {
+        e.stopPropagation();
+        exitFullscreen();
+    }, [exitFullscreen]);
+    const onSingleClick = useCallback((e) => {
+        toggle(e);
+    }, [toggle]);
+    const onSeekStart = useCallback(() => {
+        setSeeking(true);
+    }, []);
+    const onSeekEnd = useCallback(() => {
+        setSeeking(false);
+    }, []);
+    const onDoubleClick = useCallback(() => {
+        if (isFullscreen) {
+            exitFullscreen();
+        }
+        else {
+            requestFullscreen();
+        }
+    }, [exitFullscreen, isFullscreen, requestFullscreen]);
+    const [handleClick, handleDoubleClick] = useClickPreventionOnDoubleClick(onSingleClick, onDoubleClick, doubleClickToFullscreen);
+    useEffect(() => {
+        if (shouldAutoplay) {
+            player.play();
+            setShouldAutoPlay(false);
+        }
+    }, [shouldAutoplay, player]);
+    const loadingMarkup = useMemo(() => {
+        return renderLoading
+            ? renderLoading({
+                height: outerStyle.height,
+                width: outerStyle.width,
+            })
+            : null;
+    }, [outerStyle.height, outerStyle.width, renderLoading]);
+    if (!config) {
+        return null;
+    }
+    const poster = renderPoster
+        ? renderPoster({
+            height: outerStyle.height,
+            width: outerStyle.width,
+        })
+        : null;
+    if (poster === undefined) {
+        throw new TypeError('renderPoster() must return a React element, but undefined was returned');
+    }
+    const shouldShowPoster = poster &&
+        [
+            showPosterWhenPaused && !player.isPlaying() && !seeking,
+            showPosterWhenEnded && player.isLastFrame && !player.isPlaying(),
+            showPosterWhenUnplayed && !player.hasPlayed && !player.isPlaying(),
+        ].some(Boolean);
+    const content = (jsxs(Fragment, { children: [jsx("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: jsx("div", { style: containerStyle, className: PLAYER_CSS_CLASSNAME, children: VideoComponent ? (jsx(ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: jsx(VideoComponent, { ...((_c = video === null || video === void 0 ? void 0 : video.defaultProps) !== null && _c !== void 0 ? _c : {}), ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}) }) })) : null }) }), shouldShowPoster ? (jsx("div", { style: outer, onClick: clickToPlay ? handleClick : undefined, onDoubleClick: doubleClickToFullscreen ? handleDoubleClick : undefined, children: poster })) : null, controls ? (jsx(Controls, { fps: config.fps, durationInFrames: config.durationInFrames, hovered: hovered, player: player, onFullscreenButtonClick: onFullscreenButtonClick, isFullscreen: isFullscreen, allowFullscreen: allowFullscreen, showVolumeControls: showVolumeControls, onExitFullscreenButtonClick: onExitFullscreenButtonClick, spaceKeyToPlayOrPause: spaceKeyToPlayOrPause, onSeekEnd: onSeekEnd, onSeekStart: onSeekStart, inFrame: inFrame, outFrame: outFrame, initiallyShowControls: initiallyShowControls, canvasSize: canvasSize, renderFullscreenButton: renderFullscreenButton, renderPlayPauseButton: renderPlayPauseButton, alwaysShowControls: alwaysShowControls, showPlaybackRateControl: showPlaybackRateControl })) : null] }));
+    if (IS_NODE && !doesReactVersionSupportSuspense$1) {
+        return (jsx("div", { ref: container, style: outerStyle, className: className, children: content }));
+    }
+    return (jsx("div", { ref: container, style: outerStyle, className: className, children: jsx(Suspense, { fallback: loadingMarkup, children: content }) }));
+};
+var PlayerUI$1 = forwardRef(PlayerUI);
+
+const VOLUME_PERSISTANCE_KEY = 'remotion.volumePreference';
+const persistVolume = (volume) => {
+    if (typeof window === 'undefined') {
+        return;
+    }
+    window.localStorage.setItem(VOLUME_PERSISTANCE_KEY, String(volume));
+};
+const getPreferredVolume = () => {
+    if (typeof window === 'undefined') {
+        return 1;
+    }
+    const val = window.localStorage.getItem(VOLUME_PERSISTANCE_KEY);
+    return val ? Number(val) : 1;
+};
+
+const SharedPlayerContexts = ({ children, timelineContext, inputProps, fps, compositionHeight, compositionWidth, durationInFrames, component, numberOfSharedAudioTags, initiallyMuted, }) => {
+    const compositionManagerContext = useMemo(() => {
+        return {
+            compositions: [
+                {
+                    component: component,
+                    durationInFrames,
+                    height: compositionHeight,
+                    width: compositionWidth,
+                    fps,
+                    id: 'player-comp',
+                    props: inputProps,
+                    nonce: 777,
+                    scale: 1,
+                    folderName: null,
+                    defaultProps: undefined,
+                    parentFolderName: null,
+                    schema: null,
+                    calculateMetadata: null,
+                },
+            ],
+            folders: [],
+            registerFolder: () => undefined,
+            unregisterFolder: () => undefined,
+            currentComposition: 'player-comp',
+            registerComposition: () => undefined,
+            registerSequence: () => undefined,
+            sequences: [],
+            setCurrentComposition: () => undefined,
+            unregisterComposition: () => undefined,
+            unregisterSequence: () => undefined,
+            registerAsset: () => undefined,
+            unregisterAsset: () => undefined,
+            currentCompositionMetadata: null,
+            setCurrentCompositionMetadata: () => undefined,
+            assets: [],
+            setClipRegion: () => undefined,
+            resolved: null,
+        };
+    }, [
+        component,
+        durationInFrames,
+        compositionHeight,
+        compositionWidth,
+        fps,
+        inputProps,
+    ]);
+    const [mediaMuted, setMediaMuted] = useState(() => initiallyMuted);
+    const [mediaVolume, setMediaVolume] = useState(() => getPreferredVolume());
+    const mediaVolumeContextValue = useMemo(() => {
+        return {
+            mediaMuted,
+            mediaVolume,
+        };
+    }, [mediaMuted, mediaVolume]);
+    const setMediaVolumeAndPersist = useCallback((vol) => {
+        setMediaVolume(vol);
+        persistVolume(vol);
+    }, []);
+    const setMediaVolumeContextValue = useMemo(() => {
+        return {
+            setMediaMuted,
+            setMediaVolume: setMediaVolumeAndPersist,
+        };
+    }, [setMediaVolumeAndPersist]);
+    return (jsx(Internals.CanUseRemotionHooksProvider, { children: jsx(Internals.Timeline.TimelineContext.Provider, { value: timelineContext, children: jsx(Internals.CompositionManager.Provider, { value: compositionManagerContext, children: jsx(Internals.ResolveCompositionConfig, { children: jsx(Internals.PrefetchProvider, { children: jsx(Internals.DurationsContextProvider, { children: jsx(Internals.MediaVolumeContext.Provider, { value: mediaVolumeContextValue, children: jsx(Internals.SetMediaVolumeContext.Provider, { value: setMediaVolumeContextValue, children: jsx(Internals.SharedAudioContextProvider, { numberOfAudioTags: numberOfSharedAudioTags, component: component, children: children }) }) }) }) }) }) }) }) }));
+};
+
+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;
+};
+const validateInOutFrames = ({ inFrame, durationInFrames, outFrame, }) => {
+    const validatedInFrame = validateSingleFrame(inFrame, 'inFrame');
+    const validatedOutFrame = validateSingleFrame(outFrame, 'outFrame');
+    if (validatedInFrame === null && validatedOutFrame === null) {
+        return;
+    }
+    // Must not be over the duration
+    if (validatedInFrame !== null && validatedInFrame > durationInFrames - 1) {
+        throw new Error('inFrame must be less than (durationInFrames - 1), but is ' +
+            validatedInFrame);
+    }
+    if (validatedOutFrame !== null && validatedOutFrame > durationInFrames - 1) {
+        throw new Error('outFrame must be less than (durationInFrames - 1), but is ' +
+            validatedOutFrame);
+    }
+    // Must not be under 0
+    if (validatedInFrame !== null && validatedInFrame < 0) {
+        throw new Error('inFrame must be greater than 0, but is ' + validatedInFrame);
+    }
+    if (validatedOutFrame !== null && validatedOutFrame <= 0) {
+        throw new Error(`outFrame must be greater than 0, but is ${validatedOutFrame}. If you want to render a single frame, use <Thumbnail /> instead.`);
+    }
+    if (validatedOutFrame !== null &&
+        validatedInFrame !== null &&
+        validatedOutFrame <= validatedInFrame) {
+        throw new Error('outFrame must be greater than inFrame, but is ' +
+            validatedOutFrame +
+            ' <= ' +
+            validatedInFrame);
+    }
+};
+
+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)}`);
+    }
+};
+
+const validatePlaybackRate = (playbackRate) => {
+    if (playbackRate === undefined) {
+        return;
+    }
+    if (playbackRate > 4) {
+        throw new Error(`The highest possible playback rate is 4. You passed: ${playbackRate}`);
+    }
+    if (playbackRate < -4) {
+        throw new Error(`The lowest possible playback rate is -4. You passed: ${playbackRate}`);
+    }
+    if (playbackRate === 0) {
+        throw new Error(`A playback rate of 0 is not supported.`);
+    }
+};
+
+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, initiallyMuted = false, showPlaybackRateControl = 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);
+    const [currentPlaybackRate, setCurrentPlaybackRate] = useState(playbackRate);
+    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,
+        component: 'of the <Player/> component',
+        allowFloats: false,
+    });
+    Internals.validateFps(fps, 'as a prop of the <Player/> component', false);
+    Internals.validateDefaultAndInputProps(inputProps, 'inputProps', null);
+    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(currentPlaybackRate);
+    useEffect(() => {
+        emitter.dispatchRateChange(currentPlaybackRate);
+    }, [emitter, currentPlaybackRate]);
+    useEffect(() => {
+        setCurrentPlaybackRate(playbackRate);
+    }, [playbackRate]);
+    useImperativeHandle(ref, () => rootRef.current, []);
+    const timelineContextValue = useMemo(() => {
+        return {
+            frame,
+            playing,
+            rootId,
+            shouldRegisterSequences: false,
+            playbackRate: currentPlaybackRate,
+            imperativePlaying,
+            setPlaybackRate: (rate) => {
+                setCurrentPlaybackRate(rate);
+            },
+            audioAndVideoTags,
+        };
+    }, [frame, currentPlaybackRate, 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'));
+        }, []);
+    }
+    const actualInputProps = useMemo(() => inputProps !== null && inputProps !== void 0 ? inputProps : {}, [inputProps]);
+    return (jsx(Internals.IsPlayerContextProvider, { children: jsx(SharedPlayerContexts, { timelineContext: timelineContextValue, component: component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, inputProps: actualInputProps, numberOfSharedAudioTags: numberOfSharedAudioTags, initiallyMuted: initiallyMuted, children: jsx(Internals.Timeline.SetTimelineContext.Provider, { value: setTimelineContextValue, children: jsx(PlayerEventEmitterContext.Provider, { value: emitter, children: jsx(PlayerUI$1, { 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: currentPlaybackRate, 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, showPlaybackRateControl: showPlaybackRateControl }) }) }) }) }));
+};
+const forward$1 = 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)
+ */
+const Player = forward$1(PlayerFn);
+
+const useThumbnail = () => {
+    const emitter = useContext(ThumbnailEmitterContext);
+    if (!emitter) {
+        throw new TypeError('Expected Player event emitter context');
+    }
+    const returnValue = useMemo(() => {
+        return {
+            emitter,
+        };
+    }, [emitter]);
+    return returnValue;
+};
+
+const reactVersion = React.version.split('.')[0];
+if (reactVersion === '0') {
+    throw new Error(`Version ${reactVersion} of "react" is not supported by Remotion`);
+}
+const doesReactVersionSupportSuspense = parseInt(reactVersion, 10) >= 18;
+const ThumbnailUI = ({ style, inputProps, errorFallback, renderLoading, className }, ref) => {
+    var _a, _b;
+    const config = Internals.useUnsafeVideoConfig();
+    const video = Internals.useVideo();
+    const container = useRef(null);
+    const canvasSize = useElementSize(container, {
+        triggerOnWindowResize: false,
+        shouldApplyCssTransforms: false,
+    });
+    const layout = useMemo(() => {
+        if (!config || !canvasSize) {
+            return null;
+        }
+        return calculateCanvasTransformation({
+            canvasSize,
+            compositionHeight: config.height,
+            compositionWidth: config.width,
+            previewSize: 'auto',
+        });
+    }, [canvasSize, config]);
+    const scale = (_a = layout === null || layout === void 0 ? void 0 : layout.scale) !== null && _a !== void 0 ? _a : 1;
+    const thumbnail = useThumbnail();
+    useImperativeHandle(ref, () => {
+        const methods = {
+            getContainerNode: () => container.current,
+            getScale: () => scale,
+        };
+        return Object.assign(thumbnail.emitter, methods);
+    }, [scale, thumbnail.emitter]);
+    const VideoComponent = video ? video.component : null;
+    const outerStyle = useMemo(() => {
+        return calculateOuterStyle({ config, style, canvasSize });
+    }, [canvasSize, config, style]);
+    const outer = useMemo(() => {
+        return calculateOuter({ config, layout, scale });
+    }, [config, layout, scale]);
+    const containerStyle = useMemo(() => {
+        return calculateContainerStyle({
+            canvasSize,
+            config,
+            layout,
+            scale,
+        });
+    }, [canvasSize, config, layout, scale]);
+    const onError = useCallback((error) => {
+        // Pay attention to `this context`
+        thumbnail.emitter.dispatchError(error);
+    }, [thumbnail.emitter]);
+    const rootRef = useRef(null);
+    useImperativeHandle(ref, () => rootRef.current, []);
+    const loadingMarkup = useMemo(() => {
+        return renderLoading
+            ? renderLoading({
+                height: outerStyle.height,
+                width: outerStyle.width,
+            })
+            : null;
+    }, [outerStyle.height, outerStyle.width, renderLoading]);
+    if (!config) {
+        return null;
+    }
+    const content = (jsx("div", { style: outer, children: jsx("div", { style: containerStyle, className: PLAYER_CSS_CLASSNAME, children: VideoComponent ? (jsx(ErrorBoundary, { onError: onError, errorFallback: errorFallback, children: jsx(VideoComponent, { ...((_b = video === null || video === void 0 ? void 0 : video.defaultProps) !== null && _b !== void 0 ? _b : {}), ...(inputProps !== null && inputProps !== void 0 ? inputProps : {}) }) })) : null }) }));
+    if (IS_NODE && !doesReactVersionSupportSuspense) {
+        return (jsx("div", { ref: container, style: outerStyle, className: className, children: content }));
+    }
+    return (jsx("div", { ref: container, style: outerStyle, className: className, children: jsx(Suspense, { fallback: loadingMarkup, children: content }) }));
+};
+var ThumbnailUI$1 = forwardRef(ThumbnailUI);
+
+const ThumbnailFn = ({ frameToDisplay, style, inputProps, compositionHeight, compositionWidth, durationInFrames, fps, className, errorFallback = () => '⚠️', renderLoading, ...componentProps }, ref) => {
+    const [thumbnailId] = useState(() => String(random(null)));
+    const rootRef = useRef(null);
+    const timelineState = useMemo(() => {
+        return {
+            playing: false,
+            frame: frameToDisplay,
+            rootId: thumbnailId,
+            imperativePlaying: {
+                current: false,
+            },
+            playbackRate: 1,
+            setPlaybackRate: () => {
+                throw new Error('thumbnail');
+            },
+            audioAndVideoTags: { current: [] },
+        };
+    }, [frameToDisplay, thumbnailId]);
+    useImperativeHandle(ref, () => rootRef.current, []);
+    const Component = Internals.useLazyComponent(componentProps);
+    const [emitter] = useState(() => new ThumbnailEmitter());
+    const passedInputProps = useMemo(() => {
+        return inputProps !== null && inputProps !== void 0 ? inputProps : {};
+    }, [inputProps]);
+    return (jsx(Internals.IsPlayerContextProvider, { children: jsx(SharedPlayerContexts, { timelineContext: timelineState, component: Component, compositionHeight: compositionHeight, compositionWidth: compositionWidth, durationInFrames: durationInFrames, fps: fps, inputProps: passedInputProps, numberOfSharedAudioTags: 0, initiallyMuted: true, children: jsx(ThumbnailEmitterContext.Provider, { value: emitter, children: jsx(ThumbnailUI$1, { className: className, errorFallback: errorFallback, inputProps: passedInputProps, renderLoading: renderLoading, style: style }) }) }) }));
+};
+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 single frame of a video.
+ * @see [Documentation](https://www.remotion.dev/docs/player/thumbnail)
+ */
+const Thumbnail = forward(ThumbnailFn);
+
+const PlayerInternals = {
+    PlayerEventEmitterContext,
+    PlayerEmitter,
+    usePlayer,
+    usePlayback,
+    useElementSize,
+    calculateCanvasTransformation,
+    useHoverState,
+    updateAllElementsSizes,
+    calculateScale,
+};
+
+export { Player, PlayerInternals, Thumbnail };