diff --git a/frontend/src/app/(pages)/BenefitsPage.tsx b/frontend/src/app/(pages)/BenefitsPage.tsx index d67b138..96c3f19 100644 --- a/frontend/src/app/(pages)/BenefitsPage.tsx +++ b/frontend/src/app/(pages)/BenefitsPage.tsx @@ -6,7 +6,7 @@ import Image from "next/image"; export default function BenefitsPage() { return ( -
+
(null) + const containerRef = useRef(null) + + const videoId = "VGlzJgzTvWg" + + const postCommand = (func: string, args: any[] = []) => { + if (iframeRef.current?.contentWindow) { + iframeRef.current.contentWindow.postMessage( + JSON.stringify({ event: "command", func, args }), + "https://www.youtube-nocookie.com" + ) + } + } + + useEffect(() => { + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (hasLoadedOnce) { + if (entry.isIntersecting) { + postCommand("playVideo") + setIsPlaying(true) + } else { + postCommand("pauseVideo") + setIsPlaying(false) + } + } + }) + }, + { threshold: 0.6 } + ) + + if (containerRef.current) observer.observe(containerRef.current) + return () => observer.disconnect() + }, [hasLoadedOnce]) + + useEffect(() => { + if (hasLoadedOnce) { + postCommand(isMuted ? "mute" : "unMute") + } + }, [isMuted, hasLoadedOnce]) + + const togglePlay = () => { + if (!hasLoadedOnce) { + setHasLoadedOnce(true) + setIsPlaying(true) + } else { + const nextState = !isPlaying + setIsPlaying(nextState) + postCommand(nextState ? "playVideo" : "pauseVideo") + } + } + + const toggleMute = (e: React.MouseEvent) => { + e.stopPropagation() + setIsMuted(!isMuted) + } + + return ( +
+
+ The DeerHack Experience +
+ +
+
+ +
+
+ + {hasLoadedOnce ? ( +