1 files changed, 14 insertions, 0 deletions
diff --git a/modern/src/SocketController.js b/modern/src/SocketController.js
index 57ffa0d5..05236971 100644
--- a/modern/src/SocketController.js
+++ b/modern/src/SocketController.js
@@ -8,6 +8,9 @@ import { useEffectAsync } from './reactHelper';
 import { useTranslation } from './common/components/LocalizationProvider';
 import { prefixString } from './common/util/stringUtils';
 import { snackBarDurationLongMs } from './common/util/duration';
+import usePersistedState from './common/util/usePersistedState';
+
+import alarm from '../public/alarm.mp3';
 
 const SocketController = () => {
   const dispatch = useDispatch();
@@ -22,6 +25,9 @@ const SocketController = () => {
   const [events, setEvents] = useState([]);
   const [notifications, setNotifications] = useState([]);
 
+  const [soundEvents] = usePersistedState('soundEvents', []);
+  const [soundAlarms] = usePersistedState('soundAlarms', ['sos']);
+
   const connectSocket = () => {
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
     const socket = new WebSocket(`${protocol}//${window.location.host}/api/socket`);
@@ -87,6 +93,14 @@ const SocketController = () => {
     })));
   }, [events, devices, t]);
 
+  useEffect(() => {
+    events.forEach((event) => {
+      if (soundEvents.includes(event.type) || (event.type === 'alarm' && soundAlarms.includes(event.attributes.alarm))) {
+        new Audio(alarm).play();
+      }
+    });
+  }, [events, soundEvents, soundAlarms]);
+
   return (
     <>
       {notifications.map((notification) => (