Lazy load fixes

src/components/FeatureVideoViewBox.tsx

@@ -3,13 +3,13 @@ import { useEffect, useRef } from "react";
 interface FeatureVideoViewBoxProps {
   selectedVideo: string;
   videos: string[];
-  featureRef: React.LegacyRef<HTMLDivElement>;
+  isViewportEntered: boolean;
 }
 
 function FeatureVideoViewBox({
   selectedVideo,
   videos,
-  featureRef,
+  isViewportEntered,
 }: FeatureVideoViewBoxProps) {
   //   const videoRef = useRef<HTMLVideoElement>(null);
   const videoContainerRef = useRef<HTMLDivElement>(null);
@@ -36,15 +36,12 @@ function FeatureVideoViewBox({
   //   }
   // }, [selectedVideo]);
 
-  useEffect(() => {
-    return () => {};
-  }, [selectedVideo]);
-
   return (
     <div className="aspect-video sticky top-[25%] xl:block hidden">
-      <div ref={featureRef} className="relative h-fit">
+      <div className="relative h-fit">
         {videos.map((video) => (
           <video
+            src={isViewportEntered ? video : ""}
             data-src={video}
             key={video}
             muted

src/components/VideoSliderMobile.tsx

@@ -7,10 +7,10 @@ import ArrowRightIcon from "./icons/ArrowRightIcon";
 import { useSwipeable } from "react-swipeable";
 
 interface IVideoSliderMobile {
-  featureRef: React.LegacyRef<HTMLDivElement>;
+  isViewportEntered: boolean;
 }
 
-function VideoSliderMobile({ featureRef }: IVideoSliderMobile) {
+function VideoSliderMobile({ isViewportEntered }: IVideoSliderMobile) {
   const [items] = useState<any[]>([
     {
       title: "Виртуальный тур по жилому комплексу",
@@ -106,7 +106,6 @@ function VideoSliderMobile({ featureRef }: IVideoSliderMobile) {
       className="xl:hidden flex flex-col sm:gap-6 gap-4 border-b border-[#3D425C] pb-5"
     >
       <div
-        ref={featureRef}
         className={`relative flex sm:gap-[88px] items-start transition-all duration-500`}
         style={{ left: `-${activeIndex * 100}%` }}
       >
@@ -114,7 +113,7 @@ function VideoSliderMobile({ featureRef }: IVideoSliderMobile) {
           <motion.video
             key={index}
             ref={videoRefs[index]}
-            data-src={item.video}
+            src={isViewportEntered ? item.video : ""}
             muted
             loop
             playsInline