From b461c6cf322927837a0505ac297febeebcd65666 Mon Sep 17 00:00:00 2001
From: Shanmuga Krishnan S M <shanmugakrishnan.240293@aids.ritchennai.edu.in>
Date: Tue, 4 Aug 2026 09:03:39 +0530
Subject: [PATCH] fix(ui): activate dark video overlay only when video is
 playing

---
 .../LazyVideoHero/LazyVideoHero.tsx           | 41 ++++++++++++-------
 1 file changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/components/LazyVideoHero/LazyVideoHero.tsx b/src/components/LazyVideoHero/LazyVideoHero.tsx
index c6c0045..d0eb0f5 100644
--- a/src/components/LazyVideoHero/LazyVideoHero.tsx
+++ b/src/components/LazyVideoHero/LazyVideoHero.tsx
@@ -8,6 +8,7 @@ export default function LazyVideoHero({ children }: LazyVideoHeroProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const videoRef = useRef<HTMLVideoElement>(null);
   const [isIntersecting, setIsIntersecting] = useState(true);
+  const [isVideoPlaying, setIsVideoPlaying] = useState(false);
 
   useEffect(() => {
     const container = containerRef.current;
@@ -18,17 +19,13 @@ export default function LazyVideoHero({ children }: LazyVideoHeroProps) {
         setIsIntersecting(entry.isIntersecting);
         if (videoRef.current) {
           if (entry.isIntersecting) {
-            videoRef.current.play().catch(() => {
-              // Ignore autoplay restrictions if browser blocks
-            });
+            videoRef.current.play().catch(() => {});
           } else {
             videoRef.current.pause();
           }
         }
       },
-      {
-        threshold: 0.1, // Pause when 90% of section is out of view
-      }
+      { threshold: 0.1 }
     );
 
     observer.observe(container);
@@ -40,6 +37,18 @@ export default function LazyVideoHero({ children }: LazyVideoHeroProps) {
 
   return (
     <div ref={containerRef} className="relative w-full overflow-hidden">
+      {/* Ambient Mesh Backdrop (Used when video is loading or absent) */}
+      <div className="absolute top-0 left-0 right-0 h-[650px] overflow-hidden pointer-events-none z-0">
+        <div 
+          className="absolute -top-[20%] -left-[10%] w-[60%] h-[80%] rounded-full opacity-20 blur-[120px]"
+          style={{ background: 'radial-gradient(circle, #F97316 0%, #FB923C 100%)' }}
+        />
+        <div 
+          className="absolute top-[10%] -right-[10%] w-[50%] h-[70%] rounded-full opacity-15 blur-[120px]"
+          style={{ background: 'radial-gradient(circle, #EA580C 0%, #F97316 100%)' }}
+        />
+      </div>
+
       {/* ─── Optimized Video Background ────────────────────────────────────────── */}
       <div 
         className="absolute inset-0 w-full h-full z-0 pointer-events-none"
@@ -55,10 +64,12 @@ export default function LazyVideoHero({ children }: LazyVideoHeroProps) {
           loop
           playsInline
           preload="metadata"
+          onPlaying={() => setIsVideoPlaying(true)}
+          onError={() => setIsVideoPlaying(false)}
           className="w-full h-full object-cover transition-opacity duration-700"
           style={{
             filter: 'contrast(1.08) brightness(0.85) saturate(1.05)',
-            opacity: isIntersecting ? 1 : 0,
+            opacity: (isIntersecting && isVideoPlaying) ? 1 : 0,
             contain: 'strict',
           }}
         >
@@ -68,13 +79,15 @@ export default function LazyVideoHero({ children }: LazyVideoHeroProps) {
           <source src="/video/RIT Video.webm" type="video/webm" />
         </video>
 
-        {/* High-Contrast Glassmorphic Overlay Gradient */}
-        <div 
-          className="absolute inset-0"
-          style={{
-            background: 'linear-gradient(to bottom, rgba(15, 23, 42, 0.45) 0%, rgba(15, 23, 42, 0.75) 100%)',
-          }}
-        />
+        {/* High-Contrast Glassmorphic Overlay Gradient (Only active when video plays) */}
+        {isVideoPlaying && (
+          <div 
+            className="absolute inset-0 transition-opacity duration-700"
+            style={{
+              background: 'linear-gradient(to bottom, rgba(15, 23, 42, 0.45) 0%, rgba(15, 23, 42, 0.75) 100%)',
+            }}
+          />
+        )}
       </div>
 
       {/* ─── Hero Content ──────────────────────────────────────────────────────── */}