/* global React, window */
const { useEffect, useRef, useState } = React;
function MusicToggle() {
const audioRef = useRef(null);
const [on, setOn] = useState(true);
const [unlocked, setUnlocked] = useState(false);
const playAudio = () => {
const audio = audioRef.current;
if (!audio) return;
audio.volume = 0.75;
const p = audio.play();
if (p && p.then) {
p.then(() => setUnlocked(true)).catch(() => setUnlocked(false));
} else {
setUnlocked(true);
}
};
useEffect(() => {
const video = document.getElementById("hero-video");
if (video) {
video.muted = true;
video.volume = 0;
}
}, []);
useEffect(() => {
const audio = audioRef.current;
if (!audio) return;
if (!on) {
audio.pause();
}
}, [on]);
useEffect(() => {
const unlock = () => {
if (on) playAudio();
window.removeEventListener("pointerdown", unlock);
window.removeEventListener("keydown", unlock);
};
window.addEventListener("pointerdown", unlock, { passive: true });
window.addEventListener("keydown", unlock);
return () => {
window.removeEventListener("pointerdown", unlock);
window.removeEventListener("keydown", unlock);
};
}, [on]);
const toggle = () => {
setOn((current) => {
const next = !current;
if (!next && audioRef.current) audioRef.current.pause();
return next;
});
};
return (
<>
);
}
window.MusicToggle = MusicToggle;