From 996765de3147f3e78fd58a79ebb36cfee932f024 Mon Sep 17 00:00:00 2001
From: zojgame <zogame002@gmail.com>
Date: Tue, 26 Mar 2024 11:47:04 +0500
Subject: [PATCH] Lazy load fixes

---
 src/app/page.tsx                       | 30 +++++---------------------
 src/components/FeatureVideoViewBox.tsx | 11 ++++------
 src/components/VideoSliderMobile.tsx   |  7 +++---
 3 files changed, 12 insertions(+), 36 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 09d5e23..de14f20 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -98,32 +98,12 @@ export default function App() {
   const [setModal] = useModalStore((state) => [state.setModal]);
   const [isShownAllProjects, setIsShownAllProjects] = useState<boolean>(false);
   const [isBuffering, setIsBuffering] = useState(true);
-  const [viewPortEntered, setViewPortEntered] = useState(false);
-  const featureRefDesktop = useRef<HTMLDivElement>(null);
-  const featureRefMobile = useRef<HTMLDivElement>(null);
+  const [isViewportEntered, setIsViewportEntered] = useState(false);
 
   const handleOnViewportFeatureEnter = () => {
-    if (viewPortEntered) return;
+    if (isViewportEntered) return;
 
-    setViewPortEntered(true);
-
-    if (!featureRefDesktop.current || !featureRefMobile.current) return;
-    const videoDesktopRefs = featureRefDesktop.current.children;
-    const videoMobileRefs = featureRefMobile.current.children;
-
-    if (!videoDesktopRefs || !videoMobileRefs) return;
-
-    for (let i = 0; i < videoDesktopRefs.length; i++) {
-      const videoMobileEl = videoDesktopRefs[i] as HTMLVideoElement;
-      const videoDesktopEl = videoMobileRefs[i] as HTMLVideoElement;
-
-      if (videoMobileEl.dataset.src && videoDesktopEl.dataset.src) {
-        videoDesktopEl.src = videoDesktopEl.dataset.src;
-        videoMobileEl.src = videoMobileEl.dataset.src;
-      }
-    }
-
-    setViewPortEntered(true);
+    setIsViewportEntered(true);
   };
 
   async function getProjects() {
@@ -452,12 +432,12 @@ export default function App() {
               </div>
             </div>
             <FeatureVideoViewBox
+              isViewportEntered={isViewportEntered}
               selectedVideo={selectedVideo}
               videos={VIDEOS}
-              featureRef={featureRefDesktop}
             />
 
-            <VideoSliderMobile featureRef={featureRefMobile} />
+            <VideoSliderMobile isViewportEntered={isViewportEntered} />
           </motion.div>
 
           <Histories />
diff --git a/src/components/FeatureVideoViewBox.tsx b/src/components/FeatureVideoViewBox.tsx
index 876e0f3..d7fbf3d 100644
--- a/src/components/FeatureVideoViewBox.tsx
+++ b/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
diff --git a/src/components/VideoSliderMobile.tsx b/src/components/VideoSliderMobile.tsx
index 6542a75..8190dfd 100644
--- a/src/components/VideoSliderMobile.tsx
+++ b/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