// AudioBackground — discreet music control floating top-right.
// The Georgian panduri loop auto-starts (faded in) when the user picks a
// language in LangGate (window.__startBgAudio fires inside that gesture so
// iOS Safari permits playback). The FAB then toggles play/mute manually.
const { useState: useStateAudio, useEffect: useEffectAudio, useRef: useRefAudio } = React;
// Soft Georgian panduri loop (Rustavi — Mtis Melodiebi, 36s segment with
// fade-in/out for clean looping). Mono 80 kbps mp3 ≈ 350 KB.
const AUDIO_SRC = 'audio/panduri.mp3';
const TARGET_VOLUME = 0.32;
const AudioBackground = () => {
const ref = useRefAudio(null);
const [muted, setMuted] = useStateAudio(true);
const [hasInteracted, setHasInteracted] = useStateAudio(false);
const t = (window.useT && window.useT().audio) || {
activate: 'Activer la musique', mute: 'Couper la musique',
tip_off: 'Qartuli ♪', tip_on: 'En cours',
};
// Smooth volume ramp — used on play (fade in) and on mute (fade out).
const fadeTo = useRefAudio(null);
const fade = (target, ms = 900) => {
const a = ref.current;
if (!a) return;
if (fadeTo.current) cancelAnimationFrame(fadeTo.current);
const start = a.volume;
const t0 = performance.now();
const step = (now) => {
const k = Math.min(1, (now - t0) / ms);
a.volume = start + (target - start) * k;
if (k < 1) fadeTo.current = requestAnimationFrame(step);
};
fadeTo.current = requestAnimationFrame(step);
};
// Expose a play hook so the LangGate can start the track during the
// user gesture that selected a language (iOS Safari requires that).
useEffectAudio(() => {
window.__startBgAudio = () => {
const a = ref.current;
if (!a) return;
a.muted = false;
a.volume = 0;
a.play().then(() => fade(TARGET_VOLUME, 1400)).catch(() => {});
setMuted(false);
setHasInteracted(true);
};
return () => { delete window.__startBgAudio; };
}, []);
// Stop the music when the user leaves the page (tab switch, app
// background, lock screen, navigation away). Resume on return only if
// the track was actively playing before the page was hidden.
useEffectAudio(() => {
let wasPlaying = false;
const onVisibility = () => {
const a = ref.current;
if (!a) return;
if (document.hidden) {
wasPlaying = !a.paused && !a.muted;
if (wasPlaying) a.pause();
} else if (wasPlaying) {
a.play().catch(() => {});
}
};
const onPageHide = () => {
const a = ref.current;
if (a) a.pause();
};
document.addEventListener('visibilitychange', onVisibility);
window.addEventListener('pagehide', onPageHide);
return () => {
document.removeEventListener('visibilitychange', onVisibility);
window.removeEventListener('pagehide', onPageHide);
};
}, []);
const toggle = () => {
setHasInteracted(true);
const a = ref.current;
if (a) {
if (muted) {
a.muted = false;
if (a.paused) a.play().catch(() => {});
fade(TARGET_VOLUME, 700);
} else {
fade(0, 500);
setTimeout(() => { if (ref.current) ref.current.muted = true; }, 520);
}
}
setMuted((m) => !m);
};
return (
<>
);
};
window.AudioBackground = AudioBackground;