index.tsx 952 B

123456789101112131415161718192021222324252627282930313233343536
  1. import React from "react";
  2. import { CloseCircleOutlined } from "@ant-design/icons";
  3. import styles from "./index.module.scss";
  4. import { useSelector } from "react-redux";
  5. import store, { RootState } from "@/store";
  6. import { baseURL } from "@/utils/http";
  7. function VideoLookDom() {
  8. const videoSrc = useSelector(
  9. (state: RootState) => state.layoutStore.videoSrc
  10. );
  11. return (
  12. <div
  13. className={styles.VideoLookDom}
  14. style={videoSrc ? { opacity: 1, pointerEvents: "auto" } : {}}
  15. >
  16. <div className="viedoBox">
  17. {videoSrc ? (
  18. <video autoPlay controls src={baseURL + videoSrc}></video>
  19. ) : null}
  20. </div>
  21. <div
  22. className="close"
  23. onClick={() =>
  24. store.dispatch({ type: "layout/lookVideo", payload: "" })
  25. }
  26. >
  27. <CloseCircleOutlined />
  28. </div>
  29. </div>
  30. );
  31. }
  32. const MemoVideoLookDom = React.memo(VideoLookDom);
  33. export default MemoVideoLookDom;