import { jsx as _jsx } from "react/jsx-runtime";
import Hls from 'hls.js';
import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
import { VideoPlayerWithControls } from './VideoPlayerWithControls';
const getVideoToPlayUrl = (muxId) => {
    return `https://stream.mux.com/${muxId}.m3u8`;
};
const MuxVideoForward = ({ muxId, ...props }, ref) => {
    const videoRef = useRef(null);
    const vidUrl = getVideoToPlayUrl(muxId);
    useImperativeHandle(ref, () => videoRef.current, []);
    useEffect(() => {
        let hls;
        if (videoRef.current) {
            const { current } = videoRef;
            if (current.canPlayType('application/vnd.apple.mpegurl')) {
                // Some browers (safari and ie edge) support HLS natively
                current.src = vidUrl;
            }
            else if (Hls.isSupported()) {
                // This will run in all other modern browsers
                hls = new Hls();
                hls.loadSource(vidUrl);
                hls.attachMedia(current);
            }
            else {
                // eslint-disable-next-line no-console
                console.error("This is a legacy browser that doesn't support MSE");
            }
        }
        return () => {
            if (hls) {
                hls.destroy();
            }
        };
    }, [vidUrl, videoRef]);
    return _jsx("video", { ref: videoRef, ...props });
};
export const MuxVideo = forwardRef(MuxVideoForward);
export const NewMuxVideo = ({ muxId }) => {
    return (_jsx(VideoPlayerWithControls, { playbackId: muxId, poster: 'https://image.mux.com/' + muxId + '/thumbnail.png?time=1', onError: (error) => {
            // eslint-disable-next-line no-console
            console.log(error);
        }, onLoaded: () => undefined, onSize: () => undefined }));
};
