import { useEffect, useRef } from "react";
import DPlayer from "dplayer";
import './index.less'

interface IProps {
  video: {
    url: string;
    pic: string;
  };
}

function Player(props: IProps) {
  const playerRef = useRef<any>();

  useEffect(() => {
    if (props.video) {
      new DPlayer({
        container: playerRef.current,
        video: {
          ...props.video,
          type: "hls",
        },
        preload: "auto",
        playbackSpeed: [0.5, 0.75, 1, 1.25, 1.5, 2],
        screenshot: true,
        pluginOptions: {
          hls: {
            // hls config
          },
        },
      });
    }
  }, [props.video]);

  return <div id="vs" ref={playerRef} style={{ height: "100%" }}></div>;
}

export default Player;
