ShanmugaKrishnanSM/RIT-nexus
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(ui): activate dark video overlay only when video is playing

Browse Source
This commit is contained in:
Shanmuga Krishnan S M
2026-08-04 09:03:39 +05:30
parent 68902caaa4
commit b461c6cf32
1 changed files with 27 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/LazyVideoHero/LazyVideoHero.tsx
View File

@@ -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 ──────────────────────────────────────────────────────── */}