admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature/IO-3377-Add-Notification-Tone-For-Messaging - Finalize

Browse Source
This commit is contained in:
Dave
2025-09-24 14:32:45 -04:00
parent e11260e8fc
commit 5ae2e33596
6 changed files with 221 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
client/src/App/SoundWrapper.jsx
View File

@@ -2,16 +2,22 @@ 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 }) {
export default function SoundWrapper({ children, bodyshop }) {
const { t } = useTranslation();
const notification = useNotification();
useEffect(() => {
// Initialize base audio
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);
// Show a one-time prompt when a play was blocked by autoplay policy
// 3) Show a one-time prompt when autoplay blocks first play
const onNeedsUnlock = () => {
notification.info({
description: t("audio.manager.description"),
@@ -20,17 +26,18 @@ export default function SoundWrapper({ children }) {
};
window.addEventListener("sound-needs-unlock", onNeedsUnlock);
// Proactively unlock on first gesture (once per session)
const handler = () => unlockAudio();
window.addEventListener("click", handler, { once: true, passive: true });
window.addEventListener("touchstart", handler, { once: true, passive: true });
window.addEventListener("keydown", handler, { once: true });
// 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);
// The gesture listeners were added with { once: true }, so they clean themselves up
// gesture listeners were added with {once:true}
};
}, [notification, t]);
}, [notification, t, bodyshop?.id]); // include bodyshop.id so this runs when org changes
return <>{children}</>;
}