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

client/src/App/App.jsx

@@ -73,9 +73,6 @@ export function App({
     setIsPartsEntry(isParts);
   }, [setIsPartsEntry]);
 
-  //const b = Grid.useBreakpoint();
-  // console.log("Breakpoints:", b);
-
   // Associate event listeners, memoize to prevent multiple listeners being added
   useEffect(() => {
     const offlineListener = () => {
@@ -165,7 +162,7 @@ export function App({
       />
 
       <NotificationProvider>
-        <SoundWrapper>
+        <SoundWrapper bodyshop={bodyshop}>
           <Routes>
             <Route
               path="*"

client/src/App/SoundWrapper.jsx

@@ -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}</>;
 }