diff --git a/src/app/page.tsx b/src/app/page.tsx index 6a73340..20fab1d 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -5,7 +5,7 @@ import "react-rangeslider/lib/index.css"; import "../components/RangeSlider.css"; import api from "@utils/api"; -import { useEffect, useState, useRef } from "react"; +import { useEffect, useState, useRef, Fragment } from "react"; import FeatureItem from "@components/FeatureItem"; import StreamButton from "@components/StreamButton"; import ProjectCard from "@components/ProjectCard"; @@ -32,24 +32,12 @@ import { ProjectYear } from "../types/ProjectYear"; import Histories from "@components/Histories"; import Winners from "@components/Winners"; import { getTime, getDate, getYear } from "date-fns"; -import LabelCard from "@components/CardYear"; import ProjectsSection from "@components/ProjectsSection"; import { motion } from "framer-motion"; import { Video } from "../types/Video"; import Reviews from "@components/Reviews"; -// const VIDEOS = [ -// "/videos/features/virtual_tour.mp4", -// "/videos/features/nks_infra.mp4", -// "/videos/features/uralsky.mp4", -// "/videos/features/parametric.mp4", -// "/videos/features/render.mp4", -// "/videos/features/wish.mp4", -// "/videos/features/integra_crm.mp4", -// "/videos/features/send.mp4", -// ]; - -const VIDEOS: Video[] = [ +const VIDEOS_FEATURES: Video[] = [ { id: "1", value: "/videos/features/virtual_tour.mp4", @@ -96,7 +84,7 @@ const VIDEOS: Video[] = [ desc: "Клиент может добавить варианты квартир в избранное, сравнить их между собой по основным параметрам и выбрать свою будущую квартиру.", }, { - id: "6", + id: "7", value: "/videos/features/integra_crm.mp4", poster: "/images/posters/integra_crm.jpg", @@ -104,7 +92,7 @@ const VIDEOS: Video[] = [ desc: "Приложение передает информацию о клиенте в CRM-систему застройщика и получает актуальную информацию по ценам и статусам квартир.", }, { - id: "7", + id: "8", value: "/videos/features/send.mp4", poster: "/images/posters/send.jpg", title: "Отправка коммерческого предложения", @@ -436,7 +424,7 @@ export default function App() {
- {VIDEOS.map((video) => ( + {VIDEOS_FEATURES.map((video) => ( @@ -685,19 +673,19 @@ export default function App() {
Проекты -
+
{projectLabels.map((year) => { const projects = (sortedProjects && sortedProjects.get(year)) ?? []; return ( - <> + {projects.length !== 0 && ( -
+
)} - + ); })}
diff --git a/src/components/Histories.tsx b/src/components/Histories.tsx index aa507d8..a8251b0 100644 --- a/src/components/Histories.tsx +++ b/src/components/Histories.tsx @@ -51,7 +51,6 @@ const Histories = () => { }); const [selectedVideo, setSelectedVideo] = useState(0); const [_document, setDocument] = useState(); - const [isVideoFinish, setIsVideoFinish] = useState(false); function handleOnLeftMove(): void { if (selectedVideo > 0) { @@ -108,7 +107,7 @@ const Histories = () => { const currentVideoRef = videoRefs[selectedVideo]; if (!currentVideoRef || !currentVideoRef.current) return; - const progress = Math.round( + const progress = Math.ceil( (100 / currentVideoRef.current.duration) * currentVideoRef.current.currentTime ); @@ -129,24 +128,13 @@ const Histories = () => { return () => clearInterval(interval); }, [selectedVideo, videoRefs]); - useEffect(() => { - if (100 - 5 < videoProgress) { - if (selectedVideo >= videoRefs.length - 1) { - // setOffset(0); - console.log("first"); - setSelectedVideo(0); - setVideoProgress(0); - const currentVideoRef = videoRefs[selectedVideo]; - if (currentVideoRef && currentVideoRef.current) { - currentVideoRef.current.currentTime = 0; - } - } else { - console.log("second"); - // setOffset((prev) => prev - 1); - setSelectedVideo((prev) => prev + 1); - } + function handleOnVideoEnd(): void { + if (selectedVideo >= videoRefs.length - 1) { + setSelectedVideo(0); + } else { + setSelectedVideo((prev) => prev + 1); } - }, [videoProgress]); + } return ( { ref={videoRefs[index]} src={isViewportEntered ? video.value : ""} muted - loop + // loop playsInline preload="metadata" className="w-full h-full object-cover touch-none" + onEnded={handleOnVideoEnd} + // onEnded={() => console.log("first")} />
{ return ( -
+
{projects.map((project, index) => ( diff --git a/src/components/Reviews.tsx b/src/components/Reviews.tsx index f84d661..2b7959c 100644 --- a/src/components/Reviews.tsx +++ b/src/components/Reviews.tsx @@ -145,9 +145,9 @@ const Reviews = () => { onViewportEnter={handleViewportEnter} className="container mx-auto 2xl:max-w-screen-2xl flex flex-col justify-center 2xl:mb-[200px] sm:mb-[120px] mb-20" > -
+
-
+

@@ -164,13 +164,18 @@ const Reviews = () => { > {(state) => (

{item.title}

- {item.desc} + Эффективность инструмента была подтверждена буквально в + первый день после его внедрения. Например, один из + клиентов, посетив офис и увидев свою будущую квартиру с + помощью интерактивной панели, сразу решил купить + недвижимость в этом проекте, отказавшись от других + вариантов

)} @@ -208,28 +213,7 @@ const Reviews = () => { selectedVideo === index ? "opacity-100" : "opacity-60" }`} > -

))}