95 lines
2.2 KiB
JavaScript
95 lines
2.2 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 FloorTwoToOne(props) {
|
|
const ctx = useContext(SocketContext);
|
|
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('开启2-1的火播放');
|
|
setFireCanPlay(true);
|
|
}, 3000);
|
|
}
|
|
if (!show) setFireCanPlay(false);
|
|
return () => {
|
|
console.log('关闭2-1的火播放');
|
|
setFireCanPlay(false);
|
|
};
|
|
}, [show]);
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
{show && (
|
|
<motion.div
|
|
className="video-wrapper"
|
|
style={{
|
|
position: 'fixed',
|
|
top: '7px',
|
|
left: '50px',
|
|
width: '100%',
|
|
height: '100%',
|
|
zIndex: -998,
|
|
}}
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0, transition: { duration: 0.2, delay: 0.2 } }}
|
|
>
|
|
<video ref={vd} muted width={'100%'}>
|
|
<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: '-26px' }}
|
|
></video>
|
|
)}
|
|
{fireCanPlay && fireDir == '西火' && (
|
|
// {fireCanPlay && (
|
|
<video
|
|
src="/video/fire_down.webm"
|
|
muted
|
|
autoPlay
|
|
loop
|
|
width={3800}
|
|
style={{ position: 'absolute', top: '-12px', left: '-26px' }}
|
|
></video>
|
|
)}
|
|
|
|
<motion.div
|
|
className={cls.videoLayer2}
|
|
key="eto1div"
|
|
style={{
|
|
top: '340px',
|
|
left: '690px',
|
|
height: '760px',
|
|
width: '2460px',
|
|
}}
|
|
animate={{
|
|
opacity: [0, 0, 0, 0.6, 1],
|
|
transition: { duration: 0.3, delay: 2 },
|
|
}}
|
|
></motion.div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
}
|
|
|
|
export default FloorTwoToOne;
|