mt-fe-group/xuchang-screen
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add 5 videos

Browse Source
This commit is contained in:
lb 2023-11-06 21:03:44 +08:00
parent 559f6fcd32
commit 7faba81628
7 changed files with 281 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
src/components/模块组件/窑炉内部/Center/VideoContainer.jsx Normal file
View File

@ -0,0 +1,102 @@
import EnterVideo from './videoComponents/EnterVideo';
import EnterToFloorOne from './videoComponents/EnterToFloor1';
import EnterToFloorTwo from './videoComponents/EnterToFloor2';
import FloorOneToTwo from './videoComponents/Floor1To2';
import FloorTwoToOne from './videoComponents/Floor2To1';
import { useRef, useEffect, useReducer } from 'react';
const initOpacity = {
enterVideo: 1,
enterToFloorOne: 0,
enterToFloorTwo: 0,
floorOneToTwo: 0,
floorTwoToOne: 0,
};
const opacityReducer = (state, action) => {
switch (action.type) {
case 'enter-to-1': {
return {
...initOpacity,
enterToFloorOne: 1,
enterVideo: 0,
};
}
case 'enter-to-2': {
return {
...initOpacity,
enterToFloorTwo: 1,
enterVideo: 0,
};
}
case 'floor-1-to-2': {
return {
...initOpacity,
floorOneToTwo: 1,
enterToFloorOne: 0,
enterVideo: 0,
floorTwoToOne: 0,
};
}
case 'floor-2-to-1': {
return {
...initOpacity,
floorTwoToOne: 1,
enterToFloorTwo: 0,
floorOneToTwo: 0,
enterVideo: 0,
};
}
}
};
function VideoContainer(props) {
const floor = props.floor || null;
const lastFloor = useRef(null);
const [opacity, dispatch] = useReducer(opacityReducer, initOpacity);
useEffect(() => {
if (floor) {
if (floor == 1) {
if (lastFloor.current == 2) {
dispatch({ type: 'floor-2-to-1' });
} else {
dispatch({ type: 'enter-to-1' });
}
} else if (floor == 2) {
if (lastFloor.current == 1) {
dispatch({ type: 'floor-1-to-2' });
} else {
dispatch({ type: 'enter-to-2' });
}
}
lastFloor.current = floor;
}
}, [floor]);
const enterToFloorOne = () => {
// 更新层数
props.onFloorUpdate(2);
// floor1 one 立即显示，enter 延迟点消失
dispatch({ type: 'enter-to-2' });
};
function handleEnterVideoEnd() {
console.log('video end');
enterToFloorOne();
}
return (
<>
<EnterVideo
onVideoEnd={handleEnterVideoEnd}
opacity={opacity.enterVideo}
/>
<EnterToFloorOne opacity={opacity.enterToFloorOne} />
<EnterToFloorTwo opacity={opacity.enterToFloorTwo} />
<FloorOneToTwo opacity={opacity.floorOneToTwo} />
<FloorTwoToOne opacity={opacity.floorTwoToOne} />
</>
);
}
export default VideoContainer;

64
src/components/模块组件/窑炉内部/Center/index.jsx
View File

@ -1,39 +1,15 @@
import { useRef, useState } from 'react';
import { useState } from 'react';
import cls from './index.module.css';
import Chart2 from '../../../公共组件/时间火向数据';
import VideoContainer from './VideoContainer';
function KilnCenter() {
const videoRef = useRef(null);
const [currentVideo, setCurrentVideo] = useState(
'http://localhost:8000/video/new_boom.mp4',
);
const [activeFlr, setActiveFlr] = useState(0);
const [floor, setFloor] = useState(0);
console.log('video', videoRef);
function handleClickFlr(flr) {
if (flr == 1) {
setActiveFlr(1);
setCurrentVideo('http://localhost:8000/video/new_flr1.mp4');
} else {
setActiveFlr(2);
setCurrentVideo('http://localhost:8000/video/new_flr2.mp4');
}
function onFloorUpdate(flr) {
setFloor(flr);
}
const data = [
{ name: 'TE271', value: 163.3 },
{ name: 'TE271', value: 163.3 },
{ name: 'TE271', value: 163.3 },
{ name: 'TE271', value: 163.3 },
{ name: 'TE271', value: 163.3 },
{ name: 'TE271', value: 163.3 },
{ name: 'TE271', value: 163.3 },
{ name: 'TE271', value: 163.3 },
{ name: 'TE271', value: 163.3 },
{ name: 'TE271', value: 163.3 },
];
return (
<div
className="bgKilnInner"
@ -64,44 +40,24 @@ function KilnCenter() {
>
<div
className={
'flr flr1 ' +
cls.menuItem +
' ' +
(activeFlr == 1 ? cls.active : '')
'flr flr1 ' + cls.menuItem + ' ' + (floor == 1 ? cls.active : '')
}
onClick={() => handleClickFlr(1)}
onClick={() => onFloorUpdate(1)}
>
一层
</div>
<div
className={
'flr flr2 ' +
cls.menuItem +
' ' +
(activeFlr == 2 ? cls.active : '')
'flr flr2 ' + cls.menuItem + ' ' + (floor == 2 ? cls.active : '')
}
onClick={() => handleClickFlr(2)}
onClick={() => onFloorUpdate(2)}
>
二层
</div>
</div>
{/* video */}
<div
className="video-wrapper"
style={{
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: -1000,
}}
>
<video muted preload="auto" autoPlay={true} width={'100%'}>
<source src="/video/enter.webm" type="video/mp4" />
</video>
</div>
<VideoContainer onFloorUpdate={onFloorUpdate} floor={floor} />
<div className={cls.videoLayer2}></div>

33
src/components/模块组件/窑炉内部/Center/videoComponents/EnterToFloor1.jsx Normal file
View File

@ -0,0 +1,33 @@
import { motion } from 'framer-motion';
import { useRef } from 'react';
function EnterToFloorOne(props) {
const vd = useRef(null);
const opacity = props.opacity || 0;
if (opacity == 1) {
vd.current.play();
}
return (
<motion.div
className="video-wrapper"
style={{
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: -1000,
opacity: opacity,
zIndex: -999,
}}
transition={{ type: 'tween', duration: opacity ? 0.2 : 0.5 }}
>
<video ref={vd} muted preload="auto" width={'100%'}>
<source src="/video/floor1.webm" type="video/mp4" />
</video>
</motion.div>
);
}
export default EnterToFloorOne;

34
src/components/模块组件/窑炉内部/Center/videoComponents/EnterToFloor2.jsx Normal file
View File

@ -0,0 +1,34 @@
import { motion } from 'framer-motion';
import { useRef } from 'react';
function EnterToFloorTwo(props) {
const vd = useRef(null);
const opacity = props.opacity || 0;
if (opacity == 1) {
vd.current.play();
}
return (
<motion.div
className="video-wrapper"
style={{
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: -1000,
opacity: opacity,
zIndex: -999,
}}
transition={{ type: 'tween', duration: opacity ? 0.2 : 0.5 }}
>
<video ref={vd} muted preload="auto" width={'100%'}>
<source src="/video/floor2.webm" type="video/mp4" />
</video>
</motion.div>
);
}
export default EnterToFloorTwo;

34
src/components/模块组件/窑炉内部/Center/videoComponents/EnterVideo.jsx Normal file
View File

@ -0,0 +1,34 @@
import { motion } from 'framer-motion';
import { useEffect, useRef } from 'react';
function EnterVideo(props) {
const opacity = props.opacity || 0;
const vd = useRef(null);
useEffect(() => {
vd.current.addEventListener('ended', props.onVideoEnd);
}, []);
return (
<motion.div
className="video-wrapper"
style={{
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: -1000,
opacity: opacity,
zIndex: -1000,
}}
transition={{ type: 'tween' }}
>
<video ref={vd} muted preload="auto" autoPlay={true} width={'100%'}>
<source src="/video/enter.webm" type="video/mp4" />
</video>
</motion.div>
);
}
export default EnterVideo;

34
src/components/模块组件/窑炉内部/Center/videoComponents/Floor1To2.jsx Normal file
View File

@ -0,0 +1,34 @@
import { motion } from 'framer-motion';
import { useRef } from 'react';
function FloorOneToTwo(props) {
const vd = useRef(null);
const opacity = props.opacity || 0;
if (opacity == 1) {
vd.current.play();
}
return (
<motion.div
className="video-wrapper"
style={{
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: -1000,
opacity: opacity,
zIndex: -998,
}}
transition={{ type: 'tween', duration: opacity ? 0.2 : 0.5 }}
>
<video ref={vd} muted preload="auto" width={'100%'}>
<source src="/video/1to2.webm" type="video/mp4" />
</video>
</motion.div>
);
}
export default FloorOneToTwo;

34
src/components/模块组件/窑炉内部/Center/videoComponents/Floor2To1.jsx Normal file
View File

@ -0,0 +1,34 @@
import { motion } from 'framer-motion';
import { useRef } from 'react';
function FloorTwoToOne(props) {
const vd = useRef(null);
const opacity = props.opacity || 0;
if (opacity == 1) {
vd.current.play();
}
return (
<motion.div
className="video-wrapper"
style={{
position: 'fixed',
top: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: -1000,
opacity: opacity,
zIndex: -998,
}}
transition={{ type: 'tween', duration: opacity ? 0.2 : 0.5 }}
>
<video ref={vd} muted preload="auto" width={'100%'}>
<source src="/video/2to1.webm" type="video/mp4" />
</video>
</motion.div>
);
}
export default FloorTwoToOne;