From 7faba8162860d8c2a374c8e00188d4468db6c81e Mon Sep 17 00:00:00 2001 From: lb Date: Mon, 6 Nov 2023 21:03:44 +0800 Subject: [PATCH] add 5 videos --- .../窑炉内部/Center/VideoContainer.jsx | 102 ++++++++++++++++++ .../模块组件/窑炉内部/Center/index.jsx | 64 ++--------- .../Center/videoComponents/EnterToFloor1.jsx | 33 ++++++ .../Center/videoComponents/EnterToFloor2.jsx | 34 ++++++ .../Center/videoComponents/EnterVideo.jsx | 34 ++++++ .../窑炉内部/Center/videoComponents/Floor1To2.jsx | 34 ++++++ .../窑炉内部/Center/videoComponents/Floor2To1.jsx | 34 ++++++ 7 files changed, 281 insertions(+), 54 deletions(-) create mode 100644 src/components/模块组件/窑炉内部/Center/VideoContainer.jsx create mode 100644 src/components/模块组件/窑炉内部/Center/videoComponents/EnterToFloor1.jsx create mode 100644 src/components/模块组件/窑炉内部/Center/videoComponents/EnterToFloor2.jsx create mode 100644 src/components/模块组件/窑炉内部/Center/videoComponents/EnterVideo.jsx create mode 100644 src/components/模块组件/窑炉内部/Center/videoComponents/Floor1To2.jsx create mode 100644 src/components/模块组件/窑炉内部/Center/videoComponents/Floor2To1.jsx diff --git a/src/components/模块组件/窑炉内部/Center/VideoContainer.jsx b/src/components/模块组件/窑炉内部/Center/VideoContainer.jsx new file mode 100644 index 0000000..4cb3ba9 --- /dev/null +++ b/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 ( + <> + + + + + + + ); +} + +export default VideoContainer; diff --git a/src/components/模块组件/窑炉内部/Center/index.jsx b/src/components/模块组件/窑炉内部/Center/index.jsx index 4d7a2ee..cf4ff19 100644 --- a/src/components/模块组件/窑炉内部/Center/index.jsx +++ b/src/components/模块组件/窑炉内部/Center/index.jsx @@ -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 (
handleClickFlr(1)} + onClick={() => onFloorUpdate(1)} > 一层
handleClickFlr(2)} + onClick={() => onFloorUpdate(2)} > 二层
{/* video */} -
- -
+
diff --git a/src/components/模块组件/窑炉内部/Center/videoComponents/EnterToFloor1.jsx b/src/components/模块组件/窑炉内部/Center/videoComponents/EnterToFloor1.jsx new file mode 100644 index 0000000..2edb857 --- /dev/null +++ b/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 ( + + + + ); +} + +export default EnterToFloorOne; diff --git a/src/components/模块组件/窑炉内部/Center/videoComponents/EnterToFloor2.jsx b/src/components/模块组件/窑炉内部/Center/videoComponents/EnterToFloor2.jsx new file mode 100644 index 0000000..7185307 --- /dev/null +++ b/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 ( + + + + ); +} + +export default EnterToFloorTwo; diff --git a/src/components/模块组件/窑炉内部/Center/videoComponents/EnterVideo.jsx b/src/components/模块组件/窑炉内部/Center/videoComponents/EnterVideo.jsx new file mode 100644 index 0000000..0617dca --- /dev/null +++ b/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 ( + + + + ); +} + +export default EnterVideo; diff --git a/src/components/模块组件/窑炉内部/Center/videoComponents/Floor1To2.jsx b/src/components/模块组件/窑炉内部/Center/videoComponents/Floor1To2.jsx new file mode 100644 index 0000000..f62ee03 --- /dev/null +++ b/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 ( + + + + ); +} + +export default FloorOneToTwo; diff --git a/src/components/模块组件/窑炉内部/Center/videoComponents/Floor2To1.jsx b/src/components/模块组件/窑炉内部/Center/videoComponents/Floor2To1.jsx new file mode 100644 index 0000000..a1feda0 --- /dev/null +++ b/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 ( + + + + ); +} + +export default FloorTwoToOne;