history offset + styles fixes

src/components/Histories.tsx

@@ -4,39 +4,35 @@ 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;
-}
+import { Video } from "../types/Video";
 
 const CARD_COUNT = 3;
-const videos: IVideo[] = [
+const videos: Video[] = [
   {
-    id: 1,
-    src: "/videos/histories/1.mp4",
+    id: "1",
+    value: "/videos/histories/1.mp4",
     title: "",
-    desc: "",
+    desc: "Интерактивный комплекс GRAFF.estate для ЖК Upside Towers, Москва",
+    poster: "",
   },
   {
-    id: 2,
-    src: "/videos/histories/2.mp4",
+    id: "2",
+    value: "/videos/histories/2.mp4",
     title: "",
-    desc: "",
+    desc: "Graff.estate на выставке 100+ TechnoBuild",
+    poster: "",
   },
   {
-    id: 3,
-    src: "/videos/histories/3.mp4",
+    id: "3",
+    value: "/videos/histories/3.mp4",
     title: "",
-    desc: "",
+    desc: "Интерактивная инсталляция graff.estate для ЖК DNS City в г.Владивосток",
+    poster: "",
   },
 ];
 
 const Histories = () => {
   const [isViewportEntered, setIsViewportEntered] = useState<boolean>(false);
-  // const [videos, setVideos] = useState<IVideo[]>([]);
 
   function handleViewportEnter() {
     if (isViewportEntered) return;
@@ -139,6 +135,17 @@ const Histories = () => {
     return () => clearInterval(interval);
   }, [selectedVideo, videoRefs]);
 
+  useEffect(() => {
+    const _offset = offset;
+    if (100 - 3 < videoProgress) {
+      if (_offset === -1 * videoRefs.length - 1) {
+        setOffset(0);
+      } else {
+        setOffset((prev) => prev - 1);
+      }
+    }
+  }, [videoProgress]);
+
   return (
     <motion.div
       onViewportEnter={handleViewportEnter}
@@ -203,11 +210,15 @@ const Histories = () => {
                 {videos.map((video, index) => (
                   <div
                     key={video.id}
-                    className={`relative 2xl:w-[404px] xl:w-[363px] sm:w-[354px] w-[calc(100vw-32px)] 2xl:h-[720px] xl:h-[647px] sm:h-[632px] h-[546px]`}
+                    className={`relative 2xl:w-[404px] xl:w-[363px] sm:w-[354px] w-[calc(100vw-32px)] 2xl:h-[720px] xl:h-[647px] sm:h-[632px] h-[546px] transition-opacity duration-300 ${
+                      selectedVideo === index ? "opacity-100" : "opacity-60"
+                    }`}
                   >
                     <video
+                      poster={"/images/posters/integra_crm.jpg"}
+                      // poster={video.poster}
                       ref={videoRefs[index]}
-                      src={isViewportEntered ? video.src : ""}
+                      src={isViewportEntered ? video.value : ""}
                       muted
                       loop
                       playsInline

src/components/MoreProjectButton.tsx

@@ -12,7 +12,7 @@ function MoreProjectButton({ onClick }: MoreProjectButtonProps) {
       whileInView={{ opacity: 1 }}
       viewport={{ once: true, margin: "-100px" }}
       transition={{ duration: 1, ease: [0.58, 0.12, 0.27, 0.98], delay: 0.2 }}
-      className="sm:aspect-[4/3] border border-[#3D425C] rounded-[48px] px-6 py-4 flex sm:flex-col sm:justify-center justify-between items-center gap-2"
+      className="border border-[#3D425C] rounded-[48px] px-6 py-4 flex sm:flex-col sm:justify-center justify-between items-center gap-2"
       onClick={onClick}
     >
       <p className="font-gilroy font-medium leading-none">Показать еще</p>

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">
+    <div className="2xl:grid hidden xl:grid-cols-4 sm:grid-cols-3 gap-4 pt-4">
       <LabelCard label={year} />
       {projects.map((project, index) => (
         <ProjectCard key={index} {...project} />

src/components/VideoSliderMobile.tsx

@@ -47,7 +47,7 @@ function VideoSliderMobile({ isViewportEntered, videos }: IVideoSliderMobile) {
         videoRefs[index].current?.pause();
       }
     });
-  }, [activeIndex]);
+  }, [activeIndex, videoRefs]);
 
   return (
     <div