add 5 videos

src/components/模块组件/窑炉内部/Center/VideoContainer.jsx

@@ -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;

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

@@ -1,38 +1,14 @@
-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 [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 (
 		<div
@@ -64,44 +40,24 @@ function KilnCenter() {
 			>
 				<div
 					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
 					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>
 
 			{/* 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>
 

src/components/模块组件/窑炉内部/Center/videoComponents/EnterToFloor1.jsx

@@ -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;

src/components/模块组件/窑炉内部/Center/videoComponents/EnterToFloor2.jsx

@@ -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;

src/components/模块组件/窑炉内部/Center/videoComponents/EnterVideo.jsx

@@ -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;

src/components/模块组件/窑炉内部/Center/videoComponents/Floor1To2.jsx

@@ -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;

src/components/模块组件/窑炉内部/Center/videoComponents/Floor2To1.jsx

@@ -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;