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) => (
-
- ))}
-
-
-