history fixed + review starting

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() {
               </div>
 
               <div className="pr-6 xl:block hidden">
-                {VIDEOS.map((video) => (
+                {VIDEOS_FEATURES.map((video) => (
                   <FeatureItem
                     key={video.id}
                     title={video.title}
@@ -450,11 +438,11 @@ export default function App() {
             <FeatureVideoViewBox
               isViewportEntered={isViewportEntered}
               selectedVideo={selectedVideo}
-              videos={VIDEOS}
+              videos={VIDEOS_FEATURES}
             />
             <VideoSliderMobile
               isViewportEntered={isViewportEntered}
-              videos={VIDEOS}
+              videos={VIDEOS_FEATURES}
             />
           </motion.div>
 
@@ -685,19 +673,19 @@ export default function App() {
 
           <div className="flex flex-col 2xl:gap-16 xl:gap-10 gap-8 2xl:mb-[200px] sm:mb-[120px] mb-20">
             <Heading2>Проекты</Heading2>
-            <div className="flex-col gap-4 2xl:flex hidden">
+            <div className="flex-col gap-8 2xl:flex hidden">
               {projectLabels.map((year) => {
                 const projects =
                   (sortedProjects && sortedProjects.get(year)) ?? [];
 
                 return (
-                  <>
+                  <Fragment key={year}>
                     {projects.length !== 0 && (
-                      <div key={year} className="border-t border-t-[#3D425C]">
+                      <div className="border-t border-t-[#3D425C]">
                         <ProjectsSection year={year} projects={projects} />
                       </div>
                     )}
-                  </>
+                  </Fragment>
                 );
               })}
             </div>

src/components/Histories.tsx

@@ -51,7 +51,6 @@ const Histories = () => {
   });
   const [selectedVideo, setSelectedVideo] = useState<number>(0);
   const [_document, setDocument] = useState<Document>();
-  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 (
     <motion.div
@@ -222,10 +210,12 @@ const Histories = () => {
                       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")}
                     />
 
                     <div

src/components/ProjectsSection.tsx

@@ -9,7 +9,7 @@ type ProjectYearSectionProps = {
 
 const ProjectsSection = ({ year, projects }: ProjectYearSectionProps) => {
   return (
-    <div className="2xl:grid hidden xl:grid-cols-4 sm:grid-cols-3 gap-4 pt-4">
+    <div className="2xl:grid hidden xl:grid-cols-4 sm:grid-cols-3 gap-4 pt-8">
       <LabelCard label={year} />
       {projects.map((project, index) => (
         <ProjectCard key={index} {...project} />

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"
     >
-      <div className="sm:border-b border-b-[#3D425C] 2xl:h-[760px] xl:h-[687px] sm:h-[656px] h-full">
+      <div className="sm:border-b border-b-[#3D425C] 2xl:h-[594px] xl:h-[484px] sm:h-[404px] h-full">
         <div className="flex sm:h-full h-fit sm:flex-row flex-col sm:w-full sm:mx-0 mx-auto">
-          <div className=" flex flex-col justify-between 2xl:min-w-[384px] xl:min-w-[308px] sm:min-w-[263px] sm:pb-6 xl:pb-10 sm:h-full">
+          <div className=" flex flex-col justify-between 2xl:min-w-[496px] xl:min-w-[395px] sm:min-w-[263px] sm:pb-6 xl:pb-10 sm:h-full">
             <div className="2xl:pr-10 xl:pr-8 sm:pr-[37px]">
               <h2 className="font-medium  2xl:text-[64px] xl:text-5xl text-[40px] leading-10 sm:mb-10 mb-6 font-gilroy">
                 <p className="from-[#798FFF] to-[#D375FF] bg-gradient-to-r bg-clip-text text-transparent">
@@ -164,13 +164,18 @@ const Reviews = () => {
                 >
                   {(state) => (
                     <div
-                      className={`absolute 2xl:w-[344px] xl:w-[276px] sm:w-[226px] w-[280px] transition-opacity duration-300 ${state}`}
+                      className={`absolute 2xl:w-[456px] xl:w-[363px] sm:w-[350px] w-[280px] transition-opacity duration-300 ${state}`}
                     >
                       <p className="font-semibold mb-4 2xl:text-xl xl:text-[16px] sm:block hidden">
                         {item.title}
                       </p>
                       <p className="font-normal 2xl:text-[16px] xl:text-[14px] sm:block hidden">
-                        {item.desc}
+                        Эффективность инструмента была подтверждена буквально в
+                        первый день после его внедрения. Например, один из
+                        клиентов, посетив офис и увидев свою будущую квартиру с
+                        помощью интерактивной панели, сразу решил купить
+                        недвижимость в этом проекте, отказавшись от других
+                        вариантов
                       </p>
                     </div>
                   )}
@@ -208,28 +213,7 @@ const Reviews = () => {
                       selectedVideo === index ? "opacity-100" : "opacity-60"
                     }`}
                   >
-                    <video
-                      poster={"/images/posters/integra_crm.jpg"}
-                      // poster={video.poster}
-                      ref={videoRefs[index]}
-                      src={isViewportEntered ? video.value : ""}
-                      muted
-                      loop
-                      playsInline
-                      preload="metadata"
-                      className="w-full h-full object-cover touch-none"
-                    />
-
-                    <div
-                      className={`absolute bottom-0 w-full h-1 bg-[#52587A] sm:block hidden transition-opacity duration-500 ${
-                        offset === -1 * index ? "opacity-100" : "opacity-0"
-                      }`}
-                    >
-                      <div
-                        className="w-0 bg-white h-1 transition-[width] duration-500"
-                        style={{ width: `${videoProgress}%` }}
-                      ></div>
-                    </div>
+                    <img src="/images/posters/integra_crm.jpg" alt="img" />
                   </div>
                 ))}
               </div>