From 4bd08ed72c2c88dcd777549a67a89e3f33c090f1 Mon Sep 17 00:00:00 2001 From: zojgame Date: Thu, 28 Mar 2024 18:00:12 +0500 Subject: [PATCH] history refactoring --- src/app/page.tsx | 5 +- src/components/Histories.tsx | 427 ++++++++++++++++++---------------- src/components/Histories1.tsx | 258 -------------------- 3 files changed, 221 insertions(+), 469 deletions(-) delete mode 100644 src/components/Histories1.tsx diff --git a/src/app/page.tsx b/src/app/page.tsx index 5ee25ac..81f1e15 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -29,14 +29,13 @@ import TelegramIcon from "@components/icons/TelegramIcon"; import { IProject } from "../types/IProject"; import { SortedProject } from "../types/SortedProject"; import { ProjectYear } from "../types/ProjectYear"; -import Histories from "@components/Histories"; import Winners from "@components/Winners"; import { getTime, getDate, getYear } from "date-fns"; import ProjectsSection from "@components/ProjectsSection"; import { motion } from "framer-motion"; import { Video } from "../types/Video"; import Reviews from "@components/Reviews"; -import Histories1 from "@components/Histories1"; +import Histories from "@components/Histories"; const VIDEOS_FEATURES: Video[] = [ { @@ -447,9 +446,7 @@ export default function App() { videos={VIDEOS_FEATURES} /> - -
diff --git a/src/components/Histories.tsx b/src/components/Histories.tsx index 4245d81..d186ac1 100644 --- a/src/components/Histories.tsx +++ b/src/components/Histories.tsx @@ -1,266 +1,279 @@ -import { createRef, useEffect, useLayoutEffect, useRef, useState } from "react"; +import { createRef, useEffect, useState } from "react"; +import { useInView } from "react-intersection-observer"; import { useSwipeable } from "react-swipeable"; +import { Video } from "../types/Video"; import ArrowLeftIcon from "./icons/ArrowLeftIcon"; import ArrowRightIcon from "./icons/ArrowRightIcon"; import { Transition } from "react-transition-group"; -import { motion } from "framer-motion"; -import { Video } from "../types/Video"; const VIDEOS: Video[] = [ { id: "1", value: "/videos/histories/1.mp4", - title: "", + title: "Вся информация о жилом комплексе на одном экране", desc: "Интерактивный комплекс GRAFF.estate для ЖК Upside Towers, Москва", poster: "", }, { id: "2", value: "/videos/histories/2.mp4", - title: "", + title: "Вся информация о жилом комплексе на одном экране", desc: "Graff.estate на выставке 100+ TechnoBuild", poster: "", }, { id: "3", value: "/videos/histories/3.mp4", - title: "", + title: "Вся информация о жилом комплексе на одном экране", desc: "Интерактивная инсталляция graff.estate для ЖК DNS City в г.Владивосток", poster: "", }, + { + value: "https://graff.estate/videos/histories/1.mp4", + poster: "", + title: "Вся информация о жилом комплексе на одном экране", + desc: "Интерактивный комплекс GRAFF.estate для ЖК Upside Towers, Москва", + id: "4", + }, + { + value: "https://graff.estate/videos/histories/2.mp4", + poster: "", + title: "Вся информация о жилом комплексе на одном экране", + desc: "Graff.estate на выставке 100+ TechnoBuild", + id: "5", + }, + { + value: "https://graff.estate/videos/histories/3.mp4", + poster: "", + title: "Вся информация о жилом комплексе на одном экране", + desc: "Интерактивный комплекс GRAFF.estate для ЖК Upside Towers, Москва", + id: "6", + }, ]; -const Histories = () => { - const [isViewportEntered, setIsViewportEntered] = useState(false); - - function handleViewportEnter() { - if (isViewportEntered) return; - setIsViewportEntered(true); - } - - const [videoRefs, setVideoRefs] = useState< - React.RefObject[] - >([]); - const [videoProgress, setVideoProgress] = useState(0); - const [cardWidth, setCardWidth] = useState(0); +function Histories() { + const [selectedVideoIndex, setSelectedVideoIndex] = useState(0); + const videoRefs = VIDEOS.map(() => createRef()); + const [videoWidth, setVideoWidth] = useState(0); + const [videoHeigth, setVideoHeigth] = useState(0); + const [videoProgesses, setVideoProgresses] = useState([]); + const { ref, inView } = useInView(); + const [isEntered, setIsEntered] = useState(false); const handlers = useSwipeable({ - onSwipedLeft: handleOnRightMove, - onSwipedRight: handleOnLeftMove, + onSwipedLeft: next, + onSwipedRight: prev, trackMouse: true, }); - const [selectedVideo, setSelectedVideo] = useState(0); - const [_document, setDocument] = useState(); - function handleOnLeftMove(): void { - if (selectedVideo > 0) { - setSelectedVideo((prev) => prev - 1); + function handleEnded() { + if (selectedVideoIndex === VIDEOS.length - 1) { + setSelectedVideoIndex(0); + } else { + setSelectedVideoIndex((prev) => prev + 1); } } - function handleOnRightMove(): void { - if (selectedVideo < 2) { - setSelectedVideo((prev) => prev + 1); - } + function prev() { + if (selectedVideoIndex === 0) return; + setSelectedVideoIndex((prev) => prev - 1); + } + + function next() { + if (selectedVideoIndex === VIDEOS.length - 1) return; + setSelectedVideoIndex((prev) => prev + 1); } useEffect(() => { - setDocument(document); - - setVideoRefs((elRefs) => - Array.from({ length: VIDEOS.length }, (_, index) => index).map( - (_, i) => elRefs[i] || createRef() - ) - ); + const progresses = VIDEOS.map(() => 0); + setVideoProgresses(progresses); }, []); useEffect(() => { - if (!_document) return; - - const clientWidth = _document.children[0].clientWidth; - - if (clientWidth >= 1600) { - setCardWidth(420); - } else if (clientWidth >= 1280) { - setCardWidth(379); - } else if (clientWidth >= 640) { - setCardWidth(370); - } else { - setCardWidth(clientWidth - 16); - } - }, [_document]); - - useEffect(() => { - videoRefs.forEach((video, index) => { - if (!video.current) return; - if (index === selectedVideo) { - video.current.play(); - } else { - video.current.pause(); - } - }); - }, [videoRefs, selectedVideo, isViewportEntered]); - - useEffect(() => { - const currentVideoRef = videoRefs[selectedVideo]; - if (!currentVideoRef || !currentVideoRef.current) return; - - const progress = Math.ceil( - (100 / currentVideoRef.current.duration) * - currentVideoRef.current.currentTime - ); - setVideoProgress(progress); - const interval = setInterval(() => { - if (!currentVideoRef || !currentVideoRef.current) return; - const progress = - (100 / currentVideoRef.current.duration) * - currentVideoRef.current.currentTime; + const updatedProgresses = videoRefs.map((currentVideoRef) => { + if (!currentVideoRef.current) return 0; - setVideoProgress(progress); - if (97 <= progress) { - clearInterval(interval); - } + return ( + (100 / currentVideoRef.current.duration) * + currentVideoRef.current.currentTime + ); + }); + + setVideoProgresses(updatedProgresses); }, 1000); return () => clearInterval(interval); - }, [selectedVideo, videoRefs]); + }, [selectedVideoIndex, videoRefs]); - function handleOnVideoEnd(): void { - if (selectedVideo >= videoRefs.length - 1) { - setSelectedVideo(0); - } else { - setSelectedVideo((prev) => prev + 1); + useEffect(() => { + if (!inView || isEntered) return; + + setIsEntered(true); + }, [inView]); + + useEffect(() => { + for (let index = 0; index < videoRefs.length; index++) { + if (selectedVideoIndex === index) { + videoRefs[index].current?.play(); + } else { + videoRefs[index].current?.pause(); + } } - } + }, [isEntered, selectedVideoIndex]); return ( - -
-
-
-
-

-

- Истории -

-

graff.estate

-

- - {VIDEOS.map((item, index) => ( - - {(state) => ( -
-

+

+
+

+

+ Истории +

+

graff.estate

+

+
+ {VIDEOS.map((item, index) => ( + + {(state) => ( +
+ {item.title ? ( +

{item.title}

-

- {item.desc} -

-
- )} - - ))} -
-
- - -
-
-
-
-
-
- {VIDEOS.map((video, index) => ( -
-
- ))} -
-
-
-
-

- {VIDEOS[selectedVideo].title} -

-

- {VIDEOS[selectedVideo].desc} -

-
-
-
-
-
- {VIDEOS.map((video, index) => ( -
+ )} + ))}
+
+ + +
+
+
+ {VIDEOS.map((video, index) => ( +
+
+ ))} +
+
+ {VIDEOS.map((item, index) => ( + + {(state) => ( +
+ {item.title ? ( +

+ {item.title} +

+ ) : ( + <> + )} +

+ {item.desc} +

+
+ )} + + ))} +
+
+
+
+
+ {VIDEOS.map((video, index) => ( +
+ ))}
- +
); -}; +} export default Histories; diff --git a/src/components/Histories1.tsx b/src/components/Histories1.tsx deleted file mode 100644 index eed9b3b..0000000 --- a/src/components/Histories1.tsx +++ /dev/null @@ -1,258 +0,0 @@ -import { createRef, useEffect, useState } from "react"; -import { useInView } from "react-intersection-observer"; -import { useSwipeable } from "react-swipeable"; -import { Video } from "../types/Video"; -import ArrowLeftIcon from "./icons/ArrowLeftIcon"; -import ArrowRightIcon from "./icons/ArrowRightIcon"; -import { Transition } from "react-transition-group"; - -const VIDEOS: Video[] = [ - { - id: "1", - value: "/videos/histories/1.mp4", - title: "Вся информация о жилом комплексе на одном экране", - desc: "Интерактивный комплекс GRAFF.estate для ЖК Upside Towers, Москва", - poster: "", - }, - { - id: "2", - value: "/videos/histories/2.mp4", - title: "Вся информация о жилом комплексе на одном экране", - desc: "Graff.estate на выставке 100+ TechnoBuild", - poster: "", - }, - { - id: "3", - value: "/videos/histories/3.mp4", - title: "Вся информация о жилом комплексе на одном экране", - desc: "Интерактивная инсталляция graff.estate для ЖК DNS City в г.Владивосток", - poster: "", - }, - { - value: "https://graff.estate/videos/histories/1.mp4", - poster: "", - title: "Вся информация о жилом комплексе на одном экране", - desc: "Интерактивный комплекс GRAFF.estate для ЖК Upside Towers, Москва", - id: "4", - }, - { - value: "https://graff.estate/videos/histories/2.mp4", - poster: "", - title: "Вся информация о жилом комплексе на одном экране", - desc: "Graff.estate на выставке 100+ TechnoBuild", - id: "5", - }, - { - value: "https://graff.estate/videos/histories/3.mp4", - poster: "", - title: "Вся информация о жилом комплексе на одном экране", - desc: "Интерактивный комплекс GRAFF.estate для ЖК Upside Towers, Москва", - id: "6", - }, -]; - -function Histories1() { - const [selectedVideoIndex, setSelectedVideoIndex] = useState(0); - const videoRefs = VIDEOS.map(() => createRef()); - const [videoWidth, setVideoWidth] = useState(0); - const [videoHeigth, setVideoHeigth] = useState(0); - // const [_document, setDocument] = useState(); - const { ref, inView } = useInView(); - const [isEntered, setIsEntered] = useState(false); - - const handlers = useSwipeable({ - onSwipedLeft: next, - onSwipedRight: prev, - trackMouse: true, - }); - - function handleEnded() { - if (selectedVideoIndex === VIDEOS.length - 1) { - setSelectedVideoIndex(0); - } else { - setSelectedVideoIndex((prev) => prev + 1); - } - } - - function prev() { - if (selectedVideoIndex === 0) return; - setSelectedVideoIndex((prev) => prev - 1); - } - - function next() { - if (selectedVideoIndex === VIDEOS.length - 1) return; - setSelectedVideoIndex((prev) => prev + 1); - } - - useEffect(() => { - // - }, []); - - useEffect(() => { - if (!inView || isEntered) return; - - setIsEntered(true); - }, [inView]); - - useEffect(() => { - for (let index = 0; index < videoRefs.length; index++) { - if (selectedVideoIndex === index) { - videoRefs[index].current?.play(); - } else { - videoRefs[index].current?.pause(); - } - } - }, [isEntered, selectedVideoIndex]); - - return ( -
-
-
-

-

- Истории -

-

graff.estate

-

-
- {VIDEOS.map((item, index) => ( - - {(state) => ( -
- {item.title ? ( -

- {item.title} -

- ) : ( - <> - )} -

- {item.desc} -

-
- )} - - ))} -
-
- - -
-
-
- {VIDEOS.map((video, index) => ( -
-
- ))} -
-
- {VIDEOS.map((item, index) => ( - - {(state) => ( -
- {item.title ? ( -

- {item.title} -

- ) : ( - <> - )} -

- {item.desc} -

-
- )} - - ))} -
-
-
-
-
- {VIDEOS.map((video, index) => ( -
- ))} -
-
-
- ); -} - -export default Histories1;