import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { PALETTE } from '../layout/colors';
import { PlayerSeekBar } from './PlayerSeekBar';
import { PlayerVolume } from './PlayerVolume';
import { PlayPauseButton } from './PlayPauseButton';
import { TimeDisplay } from './TimeDisplay';
const Separator = () => {
    return (_jsx("div", { style: {
            borderRight: `2px solid ${PALETTE.BOX_STROKE}`,
            height: 50,
        } }));
};
export const PlayerControls = ({ playerRef, durationInFrames, fps, children }) => {
    return (_jsxs("div", { className: 'flex flex-row items-center bg-pane', children: [_jsx(PlayPauseButton, { playerRef: playerRef }), _jsx(Separator, {}), _jsx(PlayerVolume, { playerRef: playerRef }), _jsx(Separator, {}), _jsx("div", { style: { width: 15 } }), _jsx(TimeDisplay, { playerRef: playerRef, fps: fps }), _jsx("div", { style: { width: 15 } }), _jsx(PlayerSeekBar, { durationInFrames: durationInFrames, playerRef: playerRef, inFrame: null, outFrame: null, onSeekEnd: () => undefined, onSeekStart: () => undefined }), _jsx("div", { style: { width: 20 } }), _jsx(Separator, {}), children] }));
};
