44 lines
1.7 KiB
JavaScript
44 lines
1.7 KiB
JavaScript
import { useEffect } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useNotification } from "../contexts/Notifications/notificationContext.jsx";
|
|
import { initNewMessageSound, unlockAudio } from "./../utils/soundManager";
|
|
import { initSingleTabAudioLeader } from "../utils/singleTabAudioLeader";
|
|
|
|
export default function SoundWrapper({ children, bodyshop }) {
|
|
const { t } = useTranslation();
|
|
const notification = useNotification();
|
|
|
|
useEffect(() => {
|
|
if (!bodyshop?.id) return;
|
|
|
|
// 1) Init single-tab leader election (only one tab should play sounds), scoped by bodyshopId
|
|
const cleanupLeader = initSingleTabAudioLeader(bodyshop.id);
|
|
|
|
// 2) Initialize base audio
|
|
initNewMessageSound("https://images.imex.online/app/messageTone.wav", 0.7);
|
|
|
|
// 3) Show a one-time prompt when autoplay blocks first play
|
|
const onNeedsUnlock = () => {
|
|
notification.info({
|
|
description: t("audio.manager.description"),
|
|
duration: 3
|
|
});
|
|
};
|
|
window.addEventListener("sound-needs-unlock", onNeedsUnlock);
|
|
|
|
// 4) Proactively unlock on first gesture (once per session)
|
|
const gesture = () => unlockAudio(bodyshop.id);
|
|
window.addEventListener("click", gesture, { once: true, passive: true });
|
|
window.addEventListener("touchstart", gesture, { once: true, passive: true });
|
|
window.addEventListener("keydown", gesture, { once: true });
|
|
|
|
return () => {
|
|
cleanupLeader();
|
|
window.removeEventListener("sound-needs-unlock", onNeedsUnlock);
|
|
// gesture listeners were added with {once:true}
|
|
};
|
|
}, [notification, t, bodyshop?.id]); // include bodyshop.id so this runs when org changes
|
|
|
|
return <>{children}</>;
|
|
}
|