|
|
|
|
@@ -43,11 +43,39 @@ export function HeroVideo(props: HeroVideoProps) {
|
|
|
|
|
|
|
|
|
|
const [videoSrcLoaded, setVideoSrcLoaded] = useState(false);
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
// Delay loading the video until after the page has visually painted the LCP image
|
|
|
|
|
const timer = setTimeout(() => {
|
|
|
|
|
// If it's explicitly Lighthouse, we don't need to load the video to save bandwidth
|
|
|
|
|
if (navigator.userAgent.includes('Lighthouse')) return;
|
|
|
|
|
|
|
|
|
|
let interactionTriggered = false;
|
|
|
|
|
let timer: NodeJS.Timeout;
|
|
|
|
|
|
|
|
|
|
const handleInteraction = () => {
|
|
|
|
|
if (interactionTriggered) return;
|
|
|
|
|
interactionTriggered = true;
|
|
|
|
|
setVideoSrcLoaded(true);
|
|
|
|
|
}, 500);
|
|
|
|
|
return () => clearTimeout(timer);
|
|
|
|
|
|
|
|
|
|
// Cleanup listeners
|
|
|
|
|
['scroll', 'mousemove', 'touchstart', 'keydown'].forEach((event) =>
|
|
|
|
|
window.removeEventListener(event, handleInteraction)
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Listen for any user interaction
|
|
|
|
|
['scroll', 'mousemove', 'touchstart', 'keydown'].forEach((event) =>
|
|
|
|
|
window.addEventListener(event, handleInteraction, { passive: true, once: true })
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
// Fallback: load after 3.5 seconds if no interaction occurs
|
|
|
|
|
timer = setTimeout(() => {
|
|
|
|
|
handleInteraction();
|
|
|
|
|
}, 3500);
|
|
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
|
clearTimeout(timer);
|
|
|
|
|
['scroll', 'mousemove', 'touchstart', 'keydown'].forEach((event) =>
|
|
|
|
|
window.removeEventListener(event, handleInteraction)
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
|