import React from "react";
import { CloseCircleOutlined } from "@ant-design/icons";
import styles from "./index.module.scss";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "@/store";
import { baseURL } from "@/utils/http";
function VideoLookDom() {
  const videoSrc = useSelector((state: RootState) => state.loginStore.videoSrc);
  const dispatch = useDispatch();
  return (
    <div
      className={styles.VideoLookDom}
      style={videoSrc ? { opacity: 1, pointerEvents: "auto" } : {}}
    >
      <div className="viedoBox">
        {videoSrc ? (
          <video autoPlay controls src={baseURL + videoSrc}></video>
        ) : null}
      </div>

      <div
        className="close"
        onClick={() => dispatch({ type: "login/lookVideo", payload: "" })}
      >
        <CloseCircleOutlined />
      </div>
    </div>
  );
}

const MemoVideoLookDom = React.memo(VideoLookDom);

export default MemoVideoLookDom;