import React, {useEffect} from 'react';
// @ts-ignore
import WebRtcStreamer from 'webrtc-streamer/html/webrtcstreamer.js';
export type Props = {
  stream_url?: string;
  server_url: string;
  is_open: boolean;
};
const WebRTCStreamer : React.FC<Props> = (props) =>{
  let webRtcServer: { connect: (arg0: string) => void; disconnect: () => void; } | null = null;

  useEffect(() => {
    if (props.is_open) {
      webRtcServer = new WebRtcStreamer("video", props.server_url);
      if (webRtcServer && props.stream_url) {
        webRtcServer.connect(props.stream_url);

      }
    }
    if (webRtcServer) {
      webRtcServer.disconnect();
    }
  }, [props.is_open, props.server_url, props.stream_url]);

  return (
    <div style={{height: '100%', width: '100%'}}>
      <video style={{height: '100%', width: '100%'}} id="video" muted={true} controls={true} autoPlay={true} />
    </div>
  );
}

export default WebRTCStreamer;
