import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { isHLSProvider, MediaPlayer, MediaProvider, } from '@vidstack/react';
import { defaultLayoutIcons, DefaultVideoLayout, } from '@vidstack/react/player/layouts/default';
import { useCallback } from 'react';
import '@vidstack/react/player/styles/default/layouts/video.css';
import '@vidstack/react/player/styles/default/theme.css';
export const MuxPlayer = ({ playbackId, title, rounded = true }) => {
    const onProviderChange = useCallback((provider, _e) => {
        if (isHLSProvider(provider)) {
            // @ts-expect-error - hls.js is not typed
            provider.library = () => import('hls.js');
        }
    }, []);
    return (_jsxs(MediaPlayer, { src: `https://stream.mux.com/${playbackId}.m3u8`, crossOrigin: true, playsInline: true, autoPlay: true, muted: true, title: title, className: `w-full aspect-video bg-black overflow-hidden ${rounded ? 'rounded' : ''}`, onProviderChange: onProviderChange, children: [_jsx(MediaProvider, {}), _jsx(DefaultVideoLayout, { icons: defaultLayoutIcons, slots: {
                    captionButton: null,
                    pipButton: null,
                    airPlayButton: null,
                    googleCastButton: null,
                    settingsMenu: null,
                } })] }));
};
