lil navbar fix and gif-like videos optimizations

Author: YasInvolved

app/components/Navbar.tsx

@@ -41,7 +41,7 @@ export default function Navbar() {
     const pathname = usePathname()
 
     useEffect(() => {
-        setIsDropdownEnabled(!isDropdownEnabled)
+        setIsDropdownEnabled(false)
     }, [pathname])
 
     return (

app/components/OptimizedLoopVideo.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import { useEffect, useRef, VideoHTMLAttributes } from "react"
+
+export default function OptimizedLoopVideo({ src, className }: VideoHTMLAttributes<HTMLVideoElement>) {
+    const videoRef = useRef<HTMLVideoElement>(null)
+
+    useEffect(() => {
+        if (window["IntersectionObserver"] === undefined && window["IntersectionObserver"] === null)
+            return;
+
+        if (!videoRef.current)
+            return;
+
+        // lil debug stuff
+        videoRef.current.onload = () => console.log("Video Loaded")
+        videoRef.current.onplay = () => console.log("Video is playing");
+
+        const intersectionObserver = new IntersectionObserver((entries, observer) => {
+            entries.forEach(video => {
+                if (video.isIntersecting) {
+                    for (var source in video.target.children) {
+                        var videoSource = video.target.children[source] as HTMLVideoElement;
+                        if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
+                            videoSource.src = videoSource.dataset.src as string;
+                        }
+                    }
+                    
+                    console.log("Loading video");
+                    (video.target as HTMLVideoElement).load();
+                    video.target.classList.remove("lazy");
+                    intersectionObserver.unobserve(video.target);
+                }
+            }); 
+        });
+
+        intersectionObserver.observe(videoRef.current)
+
+        return () => {
+            intersectionObserver.disconnect()
+        }
+    }, [])
+
+    return <video
+            ref={videoRef}
+            autoPlay
+            muted
+            playsInline
+            loop
+            className={`lazy ${className}`}
+        >
+            <source data-src={src}/>
+        </video>
+}

app/services/page.tsx

@@ -2,6 +2,7 @@ import Link from "next/link"
 import Image from "next/image"
 import { Paragraph, Chapter } from "../components/TextUtils"
 import { StaticImport } from "next/dist/shared/lib/get-img-props"
+import OptimizedLoopVideo from "../components/OptimizedLoopVideo"
 
 import volumeReconstructPng from "@/public/clients/baw/volume_reconstruct.png";
 import n4ce_1 from "@/public/clients/apps_in_cadd/n4ce_1.jpg";
@@ -28,7 +29,7 @@ function PastProject({company, companyWebsite, images, videos, projects}: PastPr
                 {projects.map((project, index) => <li key={index}>{project}</li>)}
             </ul>
             {(images || videos) && 
-                <div className="grid grid-cols-1 md:grid-cols-2 p-4 justify-center">
+                <div className="grid grid-cols-1 lg:grid-cols-2 p-4 justify-center">
                     {images && images.map((image, index) => 
                         <Image
                             key={index}
@@ -38,13 +39,9 @@ function PastProject({company, companyWebsite, images, videos, projects}: PastPr
                         />
                     )}
                     {videos && videos.map((video, index) => 
-                        <video
+                        <OptimizedLoopVideo
                             key={index} 
                             src={video}
-                            autoPlay
-                            muted
-                            playsInline
-                            loop
                             className="aspect-video w-[500px]"
                         />
                     )}