fix logo in menus, add audiofiles caching

OpenDonationAssistant · Jan 27, 2024 · 520a2f9 · 520a2f9
1 parent f06fdb2
commit 520a2f9
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 42 deletions.
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
@@ -47,7 +47,7 @@ export default function Menu({ children }: { children: React.ReactNode }) {
       >
         <img
           className={classes.logo}
-          src={`${process.env.PUBLIC_URL}/favicon.png`}
+          src={`${process.env.PUBLIC_URL}/favicon.ico`}
         />
       </button>
       <div

diff --git a/src/logic/alert/AlertController.ts b/src/logic/alert/AlertController.ts
@@ -17,24 +17,30 @@ export class AlertController {
   private fontLoaders: IFontLoader[] = [];
   private imageLoaders: IImageLoader[] = [];
   private voiceController: VoiceController;
+  private _recipientId: string;
 
   constructor(settings: any, recipientId: string) {
     this.settings = settings;
-    this.handleSettings();
-    this.voiceController = new VoiceController(recipientId);
+    this._recipientId = recipientId;
   }
 
   listen(widgetId: string, conf: any) {
     this.conf = conf;
-    subscribe(widgetId, this.conf.topic.alerts, (message) => {
-      log.info(`Received alert: ${message.body}`);
-      let json = JSON.parse(message.body);
-      const alert = this.findAlert(json);
-      if (alert) {
-        this.renderAlert(alert, json, () => message.ack());
-      }
-      log.info("Alert is handled");
-    });
+    this.handleSettings()
+      .then(() => {
+        this.voiceController = new VoiceController(this._recipientId);
+      })
+      .then(() => {
+        subscribe(widgetId, this.conf.topic.alerts, (message) => {
+          log.info(`Received alert: ${message.body}`);
+          let json = JSON.parse(message.body);
+          const alert = this.findAlert(json);
+          if (alert) {
+            this.renderAlert(alert, json, () => message.ack());
+          }
+          log.info("Alert is handled");
+        });
+      });
   }
 
   private pausePlayer() {
@@ -84,22 +90,39 @@ export class AlertController {
   }
 
   private preloadImages() {
+    log.debug(`preload images`);
     this.imageLoaders.forEach((loader) => {
       this.sortedAlerts
         .map((alert) => alert.image)
         .forEach((image) => loader.addImage(image));
     });
   }
 
-  handleSettings() {
+  async handleSettings() {
     const sorted = this.settings.config.alerts.sort(
       (a, b) => a.trigger.amount - b.trigger.amount,
     );
     this.sortedAlerts = sorted;
-    log.debug(this.sortedAlerts);
+    log.debug(`loading audio`);
+    await Promise.all(this.sortedAlerts.map((alert) => this.loadAudio(alert)));
+    log.debug(`alerts: ${JSON.stringify(this.sortedAlerts)}`);
     this.preloadImages();
   }
 
+  loadAudio(alert: any): Promise<any> {
+    log.debug(`load ${alert.audio}`);
+    return fetch(
+      `${process.env.REACT_APP_FILE_API_ENDPOINT}/files/${alert.audio}`,
+      {
+        method: "GET",
+      },
+    )
+      .then((response) => response.arrayBuffer())
+      .then((buffer) => {
+        alert.buffer = buffer;
+      });
+  }
+
   private findSetting(properties, key: string, defaultValue: any | null) {
     const setting = properties.find((prop) => key === prop.name);
     if (setting) {

diff --git a/src/logic/voice/VoiceController.ts b/src/logic/voice/VoiceController.ts
@@ -23,6 +23,17 @@ export class VoiceController {
     this.recipientId = recipientId;
   }
 
+  playAudio(alert: any, onEndHandler: any) {
+    try {
+        this.pronounce(structuredClone(alert.buffer), onEndHandler);
+    } catch (error) {
+      console.log(error);
+      if (onEndHandler) {
+        onEndHandler();
+      }
+    }
+  }
+
   pronounceTitle(alert: any, data: any, onEndHandler: any) {
     log.debug("start to pronounce title");
     const playIfMessageEmpty = this.findSetting(
@@ -92,6 +103,7 @@ export class VoiceController {
   }
 
   private pronounce(buffer: ArrayBuffer, onEndHandler: any) {
+    console.log(buffer);
     this.audioCtx
       .decodeAudioData(
         buffer,
@@ -120,34 +132,6 @@ export class VoiceController {
       });
   }
 
-  playAudio(alert: any, onEndHandler: any) {
-    try {
-      fetch(`${process.env.REACT_APP_FILE_API_ENDPOINT}/files/${alert.audio}`, {
-        method: "GET",
-      })
-        .then((response) => response.arrayBuffer())
-        .then((buffer) => this.pronounce(buffer, onEndHandler))
-        .catch((error) => {
-          console.log(error);
-          if (onEndHandler) {
-            onEndHandler();
-          }
-        });
-    } catch (error) {
-      console.log(error);
-      if (onEndHandler) {
-        onEndHandler();
-      }
-    }
-  }
-
-  interrupt() {
-    if (this.playingSource) {
-      this.playingSource.removeEventListener("ended", this.onEndHandler);
-      this.playingSource.stop();
-    }
-  }
-
   private async voiceByMCS(message: string): Promise<ArrayBuffer> {
     return await fetch("https://api.oda.digital/tts?encoder=mp3", {
       method: "POST",
@@ -180,6 +164,13 @@ export class VoiceController {
     return base64ToArrayBuffer(json.audioContent);
   }
 
+  interrupt() {
+    if (this.playingSource) {
+      this.playingSource.removeEventListener("ended", this.onEndHandler);
+      this.playingSource.stop();
+    }
+  }
+
   private findSetting(properties, key: string, defaultValue: any | null) {
     const setting = properties.find((prop) => key === prop.name);
     if (setting) {