import React, { useEffect } from "react";
import videojs from "video.js";
import "video.js/dist/video-js.css";
import "videojs-contrib-hls";
export const VideoJS = ( props: any ) => {

  const videoRef = React.useRef(null);
  const playerRef = React.useRef<any>(null);
  const { options, onReady, width, height } = props;
  console.log('props', props)
  useEffect(() => {

    // make sure Video.js player is only initialized once
    if (!playerRef.current) {
      const videoElement = videoRef.current;
      if (!videoElement) return;

      const player = playerRef.current = videojs(videoElement, options, () => {
        console.log("player is ready");
        onReady && onReady(player);
      });
    } else {
      // you can update player here [update player through props]
      const player = playerRef.current;
      console.log('playerplayerplayer===',player);
      player.src(options.sources[0].src);
      player.autoplay(true);

    }
  }, [options, videoRef]);

  return (
    <div data-vjs-player>
      <video style={{
        width: width || '100%',
        height: height || 'auto'
      }} ref={videoRef} className="video-js vjs-big-play-centered" />
    </div>
  );
}
