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

fix(ui): ensure instant video playback with auto-muted state and high-contrast white text for hero section

Browse Source
This commit is contained in:
Shanmuga Krishnan S M
2026-08-04 09:08:52 +05:30
parent 1852239452
commit 2a86af0113
2 changed files with 29 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,6 +11,11 @@ export default function LazyVideoHero({ children }: LazyVideoHeroProps) {
const [isVideoPlaying, setIsVideoPlaying] = useState(false);
useEffect(() => {
if (videoRef.current) {
videoRef.current.muted = true;
videoRef.current.play().catch(() => {});
}
const container = containerRef.current;
if (!container) return;
@@ -19,6 +24,7 @@ export default function LazyVideoHero({ children }: LazyVideoHeroProps) {
setIsIntersecting(entry.isIntersecting);
if (videoRef.current) {
if (entry.isIntersecting) {
videoRef.current.muted = true;
videoRef.current.play().catch(() => {});
} else {
videoRef.current.pause();
@@ -37,25 +43,10 @@ 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"
style={{
contain: 'strict',
willChange: 'transform',
}}
style={{ contain: 'strict', willChange: 'transform' }}
>
<video
ref={videoRef}
@@ -63,31 +54,25 @@ export default function LazyVideoHero({ children }: LazyVideoHeroProps) {
muted
loop
playsInline
preload="metadata"
onPlaying={() => setIsVideoPlaying(true)}
onError={() => setIsVideoPlaying(false)}
className="w-full h-full object-cover transition-opacity duration-700"
preload="auto"
className="w-full h-full object-cover transition-opacity duration-500"
style={{
filter: 'contrast(1.08) brightness(0.85) saturate(1.05)',
opacity: (isIntersecting && isVideoPlaying) ? 1 : 0,
filter: 'contrast(1.1) brightness(0.85) saturate(1.1)',
opacity: isIntersecting ? 1 : 0,
contain: 'strict',
}}
>
<source src="/video/whatsapp-video.mp4" type="video/mp4" />
<source src="/video/whatsapp-video.webm" type="video/webm" />
<source src="/video/RIT Video.mp4" type="video/mp4" />
<source src="/video/RIT Video.webm" type="video/webm" />
</video>
{/* 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%)',
}}
/>
)}
{/* High-Contrast Glassmorphic Overlay Gradient */}
<div
className="absolute inset-0"
style={{
background: 'linear-gradient(to bottom, rgba(15, 23, 42, 0.5) 0%, rgba(15, 23, 42, 0.8) 100%)',
}}
/>
</div>
{/* ─── Hero Content ──────────────────────────────────────────────────────── */}