Allow configurable alert audio when alert occurs (#1001)

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>
open-rmf · Aug 21, 2024 · 7e77763 · 7e77763
1 parent d8998de
commit 7e77763
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 2 deletions.
diff --git a/packages/dashboard/app-config.schema.json b/packages/dashboard/app-config.schema.json
@@ -135,6 +135,10 @@
         }
     },
     "properties": {
+        "alertAudioPath": {
+            "description": "Url to a .wav file to be played when an alert occurs on the dashboard.",
+            "type": "string"
+        },
         "allowedTasks": {
             "description": "List of allowed tasks that can be requested",
             "items": {

diff --git a/packages/dashboard/src/app-config.ts b/packages/dashboard/src/app-config.ts
@@ -125,6 +125,11 @@ export interface RuntimeConfig {
    */
   allowedTasks: TaskResource[];
 
+  /**
+   * Url to a .wav file to be played when an alert occurs on the dashboard.
+   */
+  alertAudioPath?: string;
+
   /**
    * Set various resources (icons, logo etc) used. Different resource can be used based on the theme, `default` is always required.
    */

diff --git a/packages/dashboard/src/components/alert-manager.tsx b/packages/dashboard/src/components/alert-manager.tsx
@@ -20,6 +20,7 @@ import React from 'react';
 import { base } from 'react-components';
 import { Subscription } from 'rxjs';
 
+import { AppConfigContext } from '../app-config';
 import { AppControllerContext } from './app-contexts';
 import { AppEvents } from './app-events';
 import { RmfAppContext } from './rmf-app';
@@ -256,6 +257,10 @@ const AlertDialog = React.memo((props: AlertDialogProps) => {
 export const AlertManager = React.memo(() => {
   const rmf = React.useContext(RmfAppContext);
   const [openAlerts, setOpenAlerts] = React.useState<Record<string, AlertRequest>>({});
+  const appConfig = React.useContext(AppConfigContext);
+  const alertAudio: HTMLAudioElement | undefined = appConfig.alertAudioPath
+    ? new Audio(appConfig.alertAudioPath)
+    : undefined;
 
   React.useEffect(() => {
     if (!rmf) {
@@ -285,9 +290,14 @@ export const AlertManager = React.memo(() => {
           `Alert [${alertRequest.id}]: was responded with [${resp.response}] at ${resp.unix_millis_response_time}`,
         );
       } catch (e) {
-        console.log(
-          `Error retrieving alert response of ID ${alertRequest.id}, ${(e as Error).message}`,
+        console.debug(
+          `Failed to retrieve alert response of ID ${alertRequest.id}, ${(e as Error).message}`,
         );
+
+        if (alertAudio) {
+          alertAudio.play();
+        }
+
         setOpenAlerts((prev) => {
           return {
             ...prev,