add 5 videos
This commit is contained in:
parent
559f6fcd32
commit
7faba81628
102
src/components/模块组件/窑炉内部/Center/VideoContainer.jsx
Normal file
102
src/components/模块组件/窑炉内部/Center/VideoContainer.jsx
Normal 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;
|
@ -1,39 +1,15 @@
|
|||||||
import { useRef, useState } from 'react';
|
import { useState } from 'react';
|
||||||
import cls from './index.module.css';
|
import cls from './index.module.css';
|
||||||
import Chart2 from '../../../公共组件/时间火向数据';
|
import Chart2 from '../../../公共组件/时间火向数据';
|
||||||
|
import VideoContainer from './VideoContainer';
|
||||||
|
|
||||||
function KilnCenter() {
|
function KilnCenter() {
|
||||||
const videoRef = useRef(null);
|
const [floor, setFloor] = useState(0);
|
||||||
const [currentVideo, setCurrentVideo] = useState(
|
|
||||||
'http://localhost:8000/video/new_boom.mp4',
|
|
||||||
);
|
|
||||||
const [activeFlr, setActiveFlr] = useState(0);
|
|
||||||
|
|
||||||
console.log('video', videoRef);
|
function onFloorUpdate(flr) {
|
||||||
|
setFloor(flr);
|
||||||
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');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
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 (
|
return (
|
||||||
<div
|
<div
|
||||||
className="bgKilnInner"
|
className="bgKilnInner"
|
||||||
@ -64,44 +40,24 @@ function KilnCenter() {
|
|||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className={
|
className={
|
||||||
'flr flr1 ' +
|
'flr flr1 ' + cls.menuItem + ' ' + (floor == 1 ? cls.active : '')
|
||||||
cls.menuItem +
|
|
||||||
' ' +
|
|
||||||
(activeFlr == 1 ? cls.active : '')
|
|
||||||
}
|
}
|
||||||
onClick={() => handleClickFlr(1)}
|
onClick={() => onFloorUpdate(1)}
|
||||||
>
|
>
|
||||||
一层
|
一层
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className={
|
className={
|
||||||
'flr flr2 ' +
|
'flr flr2 ' + cls.menuItem + ' ' + (floor == 2 ? cls.active : '')
|
||||||
cls.menuItem +
|
|
||||||
' ' +
|
|
||||||
(activeFlr == 2 ? cls.active : '')
|
|
||||||
}
|
}
|
||||||
onClick={() => handleClickFlr(2)}
|
onClick={() => onFloorUpdate(2)}
|
||||||
>
|
>
|
||||||
二层
|
二层
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* video */}
|
{/* video */}
|
||||||
<div
|
<VideoContainer onFloorUpdate={onFloorUpdate} floor={floor} />
|
||||||
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>
|
|
||||||
|
|
||||||
<div className={cls.videoLayer2}></div>
|
<div className={cls.videoLayer2}></div>
|
||||||
|
|
||||||
|
@ -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;
|
@ -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;
|
@ -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;
|
@ -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;
|
@ -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;
|
Loading…
Reference in New Issue
Block a user