98 lines
2.6 KiB
JavaScript
98 lines
2.6 KiB
JavaScript
import { motion, AnimatePresence } from "framer-motion";
|
|
import { useRef, useEffect, useMemo, useState } from "react";
|
|
import cls from "../index.module.css";
|
|
// import SocketContext from '../../../../../store/socket-data-provider';
|
|
import { useContext } from "react";
|
|
|
|
function FloorOneToTwo(props) {
|
|
// const ctx = useContext(SocketContext);
|
|
|
|
const ctx = null;
|
|
|
|
const fireDir = ctx?.runState?.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("开启1-2的火播放");
|
|
setFireCanPlay(true);
|
|
}, 3000);
|
|
}
|
|
if (!show) setFireCanPlay(false);
|
|
return () => {
|
|
console.log("关闭1-2的火播放");
|
|
setFireCanPlay(false);
|
|
};
|
|
}, [show]);
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
{show && (
|
|
<motion.div
|
|
className="video-wrapper"
|
|
style={{
|
|
position: "fixed",
|
|
top: "7px",
|
|
left: "50px",
|
|
width: "calc(100% - 50px)",
|
|
height: "calc(100% - 7px)",
|
|
zIndex: -998,
|
|
overflow: "clip",
|
|
}}
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0, transition: { duration: 0, delay: 0.1 } }}
|
|
>
|
|
<video ref={vd} muted>
|
|
<source src="/video/1to2.webm" type="video/mp4" />
|
|
</video>
|
|
|
|
{fireCanPlay && fireDir == "东火" && (
|
|
<video
|
|
src="/video/fire_top.webm"
|
|
muted
|
|
autoPlay
|
|
loop
|
|
width={3700}
|
|
style={{ position: "absolute", top: "18px", left: "56px" }}
|
|
></video>
|
|
)}
|
|
{fireCanPlay && fireDir == "西火" && (
|
|
// {fireCanPlay && (
|
|
<video
|
|
src="/video/fire_down.webm"
|
|
muted
|
|
autoPlay
|
|
loop
|
|
width={3780}
|
|
style={{ position: "absolute", top: "-24px", left: "12px" }}
|
|
></video>
|
|
)}
|
|
|
|
<motion.div
|
|
className={cls.videoLayer2}
|
|
key="1to2div"
|
|
style={{
|
|
top: "360px",
|
|
left: "740px",
|
|
width: "2415px",
|
|
height: "690px",
|
|
}}
|
|
animate={{
|
|
opacity: [0, 0, 0, 0.6, 1],
|
|
transition: { duration: 0.3, delay: 2 },
|
|
}}
|
|
></motion.div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
}
|
|
|
|
export default FloorOneToTwo;
|