"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PreviewToolbar = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const remotion_1 = require("remotion");
const check_fullscreen_support_1 = require("../helpers/check-fullscreen-support");
const colors_1 = require("../helpers/colors");
const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
const mobile_layout_1 = require("../helpers/mobile-layout");
const timeline_layout_1 = require("../helpers/timeline-layout");
const loop_1 = require("../state/loop");
const CheckboardToggle_1 = require("./CheckboardToggle");
const FpsCounter_1 = require("./FpsCounter");
const FullscreenToggle_1 = require("./FullscreenToggle");
const layout_1 = require("./layout");
const LoopToggle_1 = require("./LoopToggle");
const MuteToggle_1 = require("./MuteToggle");
const OutlineToggle_1 = require("./OutlineToggle");
const PlaybackKeyboardShortcutsManager_1 = require("./PlaybackKeyboardShortcutsManager");
const PlaybackRatePersistor_1 = require("./PlaybackRatePersistor");
const PlaybackRateSelector_1 = require("./PlaybackRateSelector");
const PlayPause_1 = require("./PlayPause");
const RenderButton_1 = require("./RenderButton");
const SizeSelector_1 = require("./SizeSelector");
const SnappingToggle_1 = require("./SnappingToggle");
const TimelineZoomControls_1 = require("./Timeline/TimelineZoomControls");
const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
const TOOLBAR_HEIGHT = 50;
const container = {
    display: 'flex',
    justifyContent: 'center',
    borderTop: colors_1.BORDER_BLACK_ALPHA_50,
    alignItems: 'center',
    flexDirection: 'row',
    background: colors_1.BACKGROUND,
    height: TOOLBAR_HEIGHT,
};
const mobileContainer = {
    ...container,
    position: 'relative',
    overflowY: 'auto',
    justifyContent: 'flex-start',
};
const scrollIndicatorLeft = {
    position: 'fixed',
    display: 'none',
    top: 0,
    left: 0,
    width: 40,
    height: '100%',
    pointerEvents: 'none',
    background: `linear-gradient(to right, ${colors_1.BACKGROUND}, ${colors_1.BACKGROUND__TRANSPARENT})`,
};
const scrollIndicatorRight = {
    position: 'fixed',
    display: 'none',
    top: 0,
    right: 0,
    width: 40,
    height: '100%',
    pointerEvents: 'none',
    background: `linear-gradient(to left, ${colors_1.BACKGROUND}, ${colors_1.BACKGROUND__TRANSPARENT})`,
};
const sideContainer = {
    width: 300,
    height: 36,
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
};
const padding = {
    width: timeline_layout_1.TIMELINE_PADDING,
};
const toolbarControl = {
    display: 'contents',
};
const PreviewToolbarControl = ({ children }) => {
    const onPointerDown = (0, react_1.useCallback)((e) => {
        // Prevent deselection of currently selected items
        e.stopPropagation();
    }, []);
    return (jsx_runtime_1.jsx("div", { style: toolbarControl, onPointerDown: onPointerDown, children: children }));
};
const PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
    const { playbackRate, setPlaybackRate } = remotion_1.Internals.usePlaybackRate();
    const { playerMuted } = (0, react_1.useContext)(remotion_1.Internals.MediaVolumeContext);
    const { setPlayerMuted } = (0, react_1.useContext)(remotion_1.Internals.SetMediaVolumeContext);
    const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
    const isVideoComposition = (0, is_current_selected_still_1.useIsVideoComposition)();
    const previewToolbarRef = (0, react_1.useRef)(null);
    const leftScrollIndicatorRef = (0, react_1.useRef)(null);
    const rightScrollIndicatorRef = (0, react_1.useRef)(null);
    const isStill = (0, is_current_selected_still_1.useIsStill)();
    const [loop, setLoop] = (0, react_1.useState)((0, loop_1.loadLoopOption)());
    const isFullscreenSupported = (0, check_fullscreen_support_1.checkFullscreenSupport)();
    const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
    (0, react_1.useEffect)(() => {
        if (!isMobileLayout) {
            // The indicators are `position: fixed` and are shown/placed
            // imperatively by the scroll handler below. Without this reset,
            // leaving the mobile layout (window resized past the breakpoint)
            // leaves them visible at stale viewport coordinates — an orphaned
            // grey gradient rectangle floating over the canvas.
            if (leftScrollIndicatorRef.current) {
                leftScrollIndicatorRef.current.style.display = 'none';
            }
            if (rightScrollIndicatorRef.current) {
                rightScrollIndicatorRef.current.style.display = 'none';
            }
            return;
        }
        if (previewToolbarRef.current) {
            const updateScrollableIndicatorProps = (target) => {
                var _a;
                const boundingBox = target.getBoundingClientRect();
                const { scrollLeft, scrollWidth, clientWidth } = target;
                const scrollRight = scrollWidth - clientWidth - scrollLeft;
                if (!leftScrollIndicatorRef.current ||
                    !rightScrollIndicatorRef.current) {
                    return;
                }
                if (scrollLeft !== 0) {
                    Object.assign(leftScrollIndicatorRef.current.style, {
                        display: 'block',
                        height: `${boundingBox.height}px`,
                        top: `${boundingBox.top}px`,
                        left: `${boundingBox.left}px`,
                    });
                }
                else {
                    Object.assign(leftScrollIndicatorRef.current.style, {
                        display: 'none',
                    });
                }
                if (scrollRight !== 0) {
                    const itemWidth = ((_a = rightScrollIndicatorRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0;
                    Object.assign(rightScrollIndicatorRef.current.style, {
                        display: 'block',
                        height: `${boundingBox.height}px`,
                        top: `${boundingBox.top}px`,
                        left: `${boundingBox.left + boundingBox.width - itemWidth}px`,
                    });
                }
                else {
                    Object.assign(rightScrollIndicatorRef.current.style, {
                        display: 'none',
                    });
                }
            };
            const previewToolbar = previewToolbarRef.current;
            const scrollHandler = () => {
                updateScrollableIndicatorProps(previewToolbar);
            };
            previewToolbar.addEventListener('scroll', scrollHandler);
            scrollHandler();
            return () => {
                previewToolbar.removeEventListener('scroll', scrollHandler);
            };
        }
    });
    return (jsx_runtime_1.jsxs("div", { ref: previewToolbarRef, style: isMobileLayout ? mobileContainer : container, className: "css-reset", children: [
            jsx_runtime_1.jsx("div", { ref: leftScrollIndicatorRef, style: scrollIndicatorLeft }), isMobileLayout ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                    jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
                            jsx_runtime_1.jsx("div", { style: padding }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(TimelineZoomControls_1.TimelineZoomControls, {}) })
                        ] }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}) }), isStill || isVideoComposition ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }) })) : null] })), isVideoComposition ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlayPause_1.PlayPause, { bufferStateDelayInMilliseconds: bufferStateDelayInMilliseconds, loop: loop, playbackRate: playbackRate, muted: playerMuted }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }) }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(MuteToggle_1.MuteToggle, { muted: playerMuted, setMuted: setPlayerMuted }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(TimelineInOutToggle_1.TimelineInOutPointToggle, {}) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 })
                ] })) : null, (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                    jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(CheckboardToggle_1.CheckboardToggle, {}) }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(OutlineToggle_1.OutlineToggle, { disabled: readOnlyStudio }) }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SnappingToggle_1.SnappingToggle, { disabled: readOnlyStudio }) })
                ] })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), canvasContent && isFullscreenSupported ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(FullscreenToggle_1.FullScreenToggle, {}) })) : null, jsx_runtime_1.jsx(layout_1.Flex, {}), isMobileLayout && (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                    jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(SizeSelector_1.SizeSelector, {}) }), isStill || isVideoComposition ? (jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }) })) : null] })), jsx_runtime_1.jsxs("div", { style: sideContainer, children: [
                    jsx_runtime_1.jsx(layout_1.Flex, {}), !isMobileLayout && jsx_runtime_1.jsx(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }), jsx_runtime_1.jsx(PreviewToolbarControl, { children: jsx_runtime_1.jsx(RenderButton_1.RenderButton, { readOnlyStudio: readOnlyStudio }) }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1.5 })
                ] }), jsx_runtime_1.jsx(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), jsx_runtime_1.jsx(PlaybackRatePersistor_1.PlaybackRatePersistor, {}), jsx_runtime_1.jsx("div", { ref: rightScrollIndicatorRef, style: scrollIndicatorRight })
        ] }));
};
exports.PreviewToolbar = PreviewToolbar;
