lazy loding

src/components/FeatureVideoViewBox.tsx

@@ -1,36 +1,65 @@
 import { useEffect, useRef } from "react";
 
 interface FeatureVideoViewBoxProps {
-  video: string;
+  selectedVideo: string;
+  videos: string[];
+  featureRef: React.LegacyRef<HTMLDivElement>;
 }
 
-function FeatureVideoViewBox({ video }: FeatureVideoViewBoxProps) {
+function FeatureVideoViewBox({
+  selectedVideo,
+  videos,
+  featureRef,
+}: FeatureVideoViewBoxProps) {
   //   const videoRef = useRef<HTMLVideoElement>(null);
   const videoContainerRef = useRef<HTMLDivElement>(null);
 
+  // useEffect(() => {
+  //   if (!selectedVideo || !videoContainerRef.current) return;
+
+  //   const videoEl = document.createElement("video");
+  //   videoEl.src = selectedVideo;
+  //   videoEl.muted = true;
+  //   videoEl.autoplay = true;
+  //   videoEl.loop = true;
+  //   videoEl.playsInline = true;
+  //   videoEl.preload = "metadata";
+  //   videoEl.classList.add("absolute", "h-fit");
+  //   // videoEl.onloadeddata = () => console.log("onloadeddata");
+
+  //   videoContainerRef.current.appendChild(videoEl);
+
+  //   if (videoContainerRef.current.childElementCount > 1) {
+  //     setTimeout(() => {
+  //       videoContainerRef.current?.firstElementChild?.remove();
+  //     }, 5000);
+  //   }
+  // }, [selectedVideo]);
+
   useEffect(() => {
-    if (!video || !videoContainerRef.current) return;
+    return () => {};
+  }, [selectedVideo]);
 
-    const videoEl = document.createElement("video");
-    videoEl.src = video;
-    videoEl.muted = true;
-    videoEl.autoplay = true;
-    videoEl.loop = true;
-    videoEl.playsInline = true;
-    videoEl.preload = "metadata";
-    videoEl.classList.add("absolute", "h-fit");
-    // videoEl.onloadeddata = () => console.log("onloadeddata");
-
-    videoContainerRef.current.appendChild(videoEl);
-
-    if (videoContainerRef.current.childElementCount > 1) {
-      setTimeout(() => {
-        videoContainerRef.current?.firstElementChild?.remove();
-      }, 5000);
-    }
-  }, [video]);
-
-  return <div ref={videoContainerRef} className="relative h-fit"></div>;
+  return (
+    <div className="aspect-video sticky top-[25%] xl:block hidden">
+      <div ref={featureRef} className="relative h-fit">
+        {videos.map((video) => (
+          <video
+            data-src={video}
+            key={video}
+            muted
+            autoPlay
+            loop
+            playsInline
+            preload="metadata"
+            className={`absolute h-fit ${
+              selectedVideo === video ? "block" : "hidden"
+            }`}
+          />
+        ))}
+      </div>
+    </div>
+  );
 }
 
 export default FeatureVideoViewBox;

src/components/VideoSliderMobile.tsx

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