fixes

src/app/page.tsx

@@ -460,7 +460,7 @@ export default function App() {
             <VideoSliderMobile featureRef={featureRefMobile} />
           </motion.div>
 
-          {/* <Histories /> */}
+          <Histories />
 
           <div className="relative 2xl:mb-[200px] sm:mb-[120px] mb-20">
             <div className="grid sm:grid-cols-2 sm:gap-4 gap-6 2xl:mb-16 xl:mb-10 sm:mb-12 mb-8">

src/components/Histories.tsx

@@ -1,32 +1,48 @@
-import { createRef, useEffect, useLayoutEffect, useState } from "react";
+import { createRef, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { useSwipeable } from "react-swipeable";
 import ArrowLeftIcon from "./icons/ArrowLeftIcon";
 import ArrowRightIcon from "./icons/ArrowRightIcon";
 import { Transition } from "react-transition-group";
+import { motion } from "framer-motion";
+
+interface IVideo {
+  id: number;
+  src: string;
+  title: string;
+  desc: string;
+}
 
 const CARD_COUNT = 3;
-const videos = [
+const videos: IVideo[] = [
   {
     id: 1,
-    src: "videos/video.mp4",
-    title: "Вся информация о жилом комплексе на одном экране",
-    desc: "Инструмент продаж graff.estate для проекта LIFE RESIDENCE: новый подход к презентации недвижимости",
+    src: "/videos/histories/1.mp4",
+    title: "",
+    desc: "",
   },
   {
     id: 2,
-    src: "videos/video.mp4",
-    title: "Говно",
-    desc: "Жопа",
+    src: "/videos/histories/2.mp4",
+    title: "",
+    desc: "",
   },
   {
     id: 3,
-    src: "videos/video.mp4",
-    title: "И в",
-    desc: "прод",
+    src: "/videos/histories/3.mp4",
+    title: "",
+    desc: "",
   },
 ];
 
 const Histories = () => {
+  const [isViewportEntered, setIsViewportEntered] = useState<boolean>(false);
+  // const [videos, setVideos] = useState<IVideo[]>([]);
+
+  function handleViewportEnter() {
+    if (isViewportEntered) return;
+    setIsViewportEntered(true);
+  }
+
   const [offset, setOffset] = useState(0);
   const [videoRefs, setVideoRefs] = useState<
     React.RefObject<HTMLVideoElement>[]
@@ -96,7 +112,7 @@ const Histories = () => {
         video.current.pause();
       }
     });
-  }, [videoRefs, selectedVideo]);
+  }, [videoRefs, selectedVideo, isViewportEntered]);
 
   useEffect(() => {
     const currentVideoRef = videoRefs[selectedVideo];
@@ -124,7 +140,10 @@ const Histories = () => {
   }, [selectedVideo, videoRefs]);
 
   return (
-    <div className="container mx-auto 2xl:max-w-screen-2xl flex flex-col justify-center 2xl:mb-[200px] sm:mb-[120px] mb-20">
+    <motion.div
+      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="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">
@@ -188,7 +207,7 @@ const Histories = () => {
                   >
                     <video
                       ref={videoRefs[index]}
-                      src={video.src}
+                      src={isViewportEntered ? video.src : ""}
                       muted
                       loop
                       playsInline
@@ -211,13 +230,12 @@ const Histories = () => {
               </div>
             </div>
           </div>
-          <div className="bg-[#212431] p-6 block sm:hidden mb-6">
+          <div className=" p-6 block sm:hidden mb-6">
             <h2 className="font-semibold text-sm leading-[18px] pb-2">
-              Вся информация о жилом комплексе на одном экране
+              {videos[selectedVideo].title}
             </h2>
             <p className="text-[12px] leading-[18px]">
-              Инструмент продаж graff.estate для проекта LIFE RESIDENCE: новый
-              подход к презентации недвижимости
+              {videos[selectedVideo].desc}
             </p>
           </div>
           <div className="mx-auto flex gap-2 h-2 sm:hidden">
@@ -241,7 +259,7 @@ const Histories = () => {
           </div>
         </div>
       </div>
-    </div>
+    </motion.div>
   );
 };