import { Store } from "antd/es/form/interface";
import { inject, observer } from "mobx-react";
import { useEffect, useRef } from "react";
import videojs from "video.js";
import "video.js/dist/video-js.css";
const videoJsOptions = {
  autoplay: true,
  controls: true,
  responsive: true,
  fluid: true,
  sources: [
    {
      src: "https://sprh.hswzct.cn:4443/hls/stream_1_0/playlist.m3u8",
      type: "application/x-mpegURL",
    },
  ],
};
const Video = (props: Store) => {
  const { homeStore, onReady } = props;
  const videoRef = useRef<HTMLDivElement>(null);
  const playerRef = useRef<any>(null); // 使用 any 类型
  useEffect(() => {
    homeStore.getNewTask();
  }, [homeStore]);
  useEffect(() => {
    if (!playerRef.current && videoRef.current) {
      const videoElement = document.createElement("video-js");
      videoElement.classList.add("vjs-big-play-centered");
      videoRef.current.appendChild(videoElement);
      const player = (playerRef.current = videojs(
        videoElement,
        videoJsOptions,
        () => {
          videojs.log("player is ready");
          onReady && onReady(player);
        }
      ));
    } else {
      const player = playerRef.current;
      player?.autoplay(videoJsOptions.autoplay);
      player.src(videoJsOptions.sources);
    }
  }, [videoRef, onReady]);
  useEffect(() => {
    const player = playerRef.current;
    return () => {
      if (player && !player.isDisposed()) {
        player.dispose();
        playerRef.current = null;
      }
    };
  }, [playerRef]);
  return (
    <>
      <div data-vjs-player style={{ width: "100%", height: "100%" }}>
        <div ref={videoRef} style={{ width: "100%", height: "100%" }} />
      </div>
    </>
  );
};

export default inject("homeStore")(observer(Video));
