105 lines
2.8 KiB
JavaScript
105 lines
2.8 KiB
JavaScript
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";
|
|
import { useSelector, useDispatch } from "react-redux";
|
|
import TopColorBlock from "./../../components/TopColorBlock";
|
|
|
|
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% - 50px)",
|
|
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 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",
|
|
left: "0px",
|
|
zIndex: 9,
|
|
}}
|
|
></video>
|
|
)}
|
|
{fireCanPlay && fireDir == "西火" && (
|
|
// {fireCanPlay && (
|
|
<video
|
|
src="/video/fire_down.webm"
|
|
muted
|
|
autoPlay
|
|
loop
|
|
width={3800}
|
|
style={{
|
|
position: "absolute",
|
|
top: "-12px",
|
|
left: "-10px",
|
|
zIndex: 9,
|
|
}}
|
|
></video>
|
|
)}
|
|
|
|
<TopColorBlock />
|
|
|
|
<TemperatureTop
|
|
style={{
|
|
top: "200px",
|
|
left: "652px",
|
|
width: "2380px",
|
|
zIndex: 10,
|
|
}}
|
|
/>
|
|
<FeederStatus style={{ left: "680px" }} />
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
}
|
|
|
|
export default FloorTwoToOne;
|