xuchang-new/src/components/Modules/KilnOptimize/Center/videoComponents/FloorToFour.jsx

/*
 * @Author: zhp
 * @Date: 2024-08-28 15:27:46
 * @LastEditTime: 2024-09-12 15:28:17
 * @LastEditors: zhp
 * @Description: 
 */
import { motion, AnimatePresence } from "framer-motion";
import { useRef, useEffect, useMemo, useState } from "react";
import FeederStatus from "../../../../Common/Feeder";
import TemperatureBottom from "../../../../Common/TemperatureBottom";
import TemperatureTop from "../../../../Common/TemperatureTop/forecastIndex";
import { useSelector, useDispatch } from "react-redux";
// import TopColorBlock from "../../components/TopColorBlock";
import TopColorBlock from "../../components/forecastTopColorBlock";
function FloorTwoToOne(props) {
  const fireInfo = useSelector((state) => state.fireInfo);
  const fireDir = fireInfo?.fireDirection || null;
  const [fireCanPlay, setFireCanPlay] = useState(false);

  const vd = useRef(null);
  const show = props.opacity || 0;

  useEffect(() => {
    if (show) {
      vd.current.play();
      setTimeout(() => {
        // console.log("开启2-1的火播放");
        setFireCanPlay(true);
      }, 1800);
    }
    if (!show) setFireCanPlay(false);
    return () => {
      // console.log("关闭2-1的火播放");
      setFireCanPlay(false);
    };
  }, [show]);

  return (
    <AnimatePresence>
      {show && (
        <motion.div
          className="video-wrapper"
          style={{
            position: "fixed",
            top: "0px",
            left: "0px",
            width: "calc(100% - 500px)",
            height: "calc(100% - 7px)",
            zIndex: 998,
            overflow: "clip",
          }}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0, transition: { duration: 0.2, delay: 0.2 } }}
        >
          <video  style={{
            position: "fixed",
            top: "10px",
            left: "70px",
            width: "calc(100% - 600px)",
            height: "calc(100% - 7px)",
            zIndex: -998,
            overflow: "clip",
          }} ref={vd} muted>
            <source src="/video/2to1.webm" type="video/mp4" />
          </video>

          {fireCanPlay && fireDir == "东火" && (
            // {fireCanPlay && (
            <video
              src="/video/fire_top.webm"
              muted

              autoPlay
              loop
              width={3800}
              style={{
                position: "absolute",
                top: "10px",
                width: "calc(100% - 500px)",
                height: "calc(100% - 7px)",
                left: "240px",
                zIndex: 9,
              }}
            ></video>
          )}
          {fireCanPlay && fireDir == "西火" && (
            // {fireCanPlay && (
            <video
              src="/video/fire_down.webm"
              muted
              autoPlay
              loop
              width={3800}
              style={{
                position: "absolute",
                top: "-12px",
                left: "-100px",
                width: "calc(100% - 500px)",
                height: "calc(100% - 7px)",
                left: "240px",
                zIndex: 9,
              }}
            ></video>
          )}

          <TopColorBlock />

          <TemperatureTop
            style={{
              top: "200px",
              left: "652px",
              width: "2380px",
              zIndex: 9999,
            }}
          />
          <FeederStatus style={{ left: "680px" }} />
        </motion.div>
      )}
    </AnimatePresence>
  );
}

export default FloorTwoToOne;