feautre/IO-3377-Add-Notification-Tone-For-Messaging - Complete

client/src/App/SoundWrapper.jsx

@@ -0,0 +1,38 @@
+// src/app/SoundWrapper.jsx
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { useNotification } from "../contexts/Notifications/notificationContext.jsx";
+import newMessageWav from "./../audio/messageTone.wav";
+import { initNewMessageSound, unlockAudio } from "./../utils/soundManager";
+
+export default function SoundWrapper({ children }) {
+  const { t } = useTranslation();
+  const notification = useNotification();
+
+  useEffect(() => {
+    // Initialize base audio
+    initNewMessageSound(newMessageWav, 0.7);
+
+    // Show a one-time prompt when a play was blocked by autoplay policy
+    const onNeedsUnlock = () => {
+      notification.info({
+        description: t("audio.manager.description"),
+        duration: 3
+      });
+    };
+    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 });
+
+    return () => {
+      window.removeEventListener("sound-needs-unlock", onNeedsUnlock);
+      // The gesture listeners were added with { once: true }, so they clean themselves up
+    };
+  }, [notification, t]);
+
+  return <>{children}</>;
+}