fix: AudioContext warning when loading widget on Chrome (#3956)

* fix: AudioContext warning when loading widget on Chrome

* minor fixes

* Minor fixes

* adds event on document

* Play audio from parent window through SDK

* Adds notification to dashboard

Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Co-authored-by: Vishnu Narayanan <vishnu@chatwoot.com>

app/javascript/packs/application.js

@@ -21,7 +21,10 @@ import App from '../dashboard/App';
 import i18n from '../dashboard/i18n';
 import createAxios from '../dashboard/helper/APIHelper';
 import commonHelpers, { isJSONValid } from '../dashboard/helper/commons';
-import { getAlertAudio } from '../shared/helpers/AudioNotificationHelper';
+import {
+  getAlertAudio,
+  initOnEvents,
+} from '../shared/helpers/AudioNotificationHelper';
 import { initFaviconSwitcher } from '../shared/helpers/faviconHelper';
 import router from '../dashboard/routes';
 import store from '../dashboard/store';
@@ -102,6 +105,13 @@ window.onload = () => {
   vueActionCable.init();
 };
 
+const setupAudioListeners = () => {
+  getAlertAudio().then(() => {
+    initOnEvents.forEach(event => {
+      document.removeEventListener(event, setupAudioListeners, false);
+    });
+  });
+};
 window.addEventListener('load', () => {
   verifyServiceWorkerExistence(registration =>
     registration.pushManager.getSubscription().then(subscription => {
@@ -110,6 +120,9 @@ window.addEventListener('load', () => {
       }
     })
   );
-  getAlertAudio();
+  window.playAudioAlert = () => {};
+  initOnEvents.forEach(e => {
+    document.addEventListener(e, setupAudioListeners, false);
+  });
   initFaviconSwitcher();
 });

app/javascript/packs/widget.js

@@ -4,7 +4,6 @@ import VueI18n from 'vue-i18n';
 import store from '../widget/store';
 import App from '../widget/App.vue';
 import ActionCableConnector from '../widget/helpers/actionCable';
-import { getAlertAudio } from 'shared/helpers/AudioNotificationHelper';
 import i18n from '../widget/i18n';
 
 import router from '../widget/router';
@@ -33,5 +32,4 @@ window.onload = () => {
     window.WOOT_WIDGET,
     window.chatwootPubsubToken
   );
-  getAlertAudio();
 };

app/javascript/sdk/IFrameHelper.js

@@ -26,6 +26,10 @@ import { dispatchWindowEvent } from 'shared/helpers/CustomEventHelper';
 import { CHATWOOT_ERROR, CHATWOOT_READY } from '../widget/constants/sdkEvents';
 import { SET_USER_ERROR } from '../widget/constants/errorTypes';
 import { getUserCookieName } from './cookieHelpers';
+import {
+  getAlertAudio,
+  initOnEvents,
+} from 'shared/helpers/AudioNotificationHelper';
 import { isFlatWidgetStyle } from './settingsHelper';
 
 export const IFrameHelper = {
@@ -114,6 +118,18 @@ export const IFrameHelper = {
       iframe.setAttribute('style', `height: ${updatedIframeHeight} !important`);
   },
 
+  setupAudioListeners: () => {
+    getAlertAudio().then(() =>
+      initOnEvents.forEach(event => {
+        document.removeEventListener(
+          event,
+          IFrameHelper.setupAudioListeners,
+          false
+        );
+      })
+    );
+  },
+
   events: {
     loaded: message => {
       Cookies.set('cw_conversation', message.config.authToken, {
@@ -136,6 +152,15 @@ export const IFrameHelper = {
       if (window.$chatwoot.user) {
         IFrameHelper.sendMessage('set-user', window.$chatwoot.user);
       }
+      
+      dispatchWindowEvent({ eventName: CHATWOOT_READY });
+
+      window.playAudioAlert = () => {};
+
+      initOnEvents.forEach(e => {
+        document.addEventListener(e, IFrameHelper.setupAudioListeners, false);
+      });
+
       if (!window.$chatwoot.resetTriggered) {
         dispatchWindowEvent({ eventName: CHATWOOT_READY });
       }
@@ -214,6 +239,10 @@ export const IFrameHelper = {
     closeChat: () => {
       onBubbleClick({ toggleValue: false });
     },
+
+    playAudio: () => {
+      window.playAudioAlert();
+    },
   },
   pushEvent: eventName => {
     IFrameHelper.sendMessage('push-event', { eventName });

app/javascript/shared/helpers/AudioNotificationHelper.js

@@ -1,9 +1,10 @@
 import { MESSAGE_TYPE } from 'shared/constants/messages';
-import axios from 'axios';
+import { IFrameHelper } from 'widget/helpers/utils';
+
 import { showBadgeOnFavicon } from './faviconHelper';
 
+export const initOnEvents = ['click', 'touchstart', 'keypress'];
 export const getAlertAudio = async () => {
-  window.playAudioAlert = () => {};
   const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
   const playsound = audioBuffer => {
     window.playAudioAlert = () => {
@@ -16,11 +17,14 @@ export const getAlertAudio = async () => {
   };
 
   try {
-    const response = await axios.get('/dashboard/audios/ding.mp3', {
+    const audioRequest = new Request('/dashboard/audios/ding.mp3');
-      responseType: 'arraybuffer',
-    });
 
-    audioCtx.decodeAudioData(response.data).then(playsound);
+    fetch(audioRequest)
+      .then(response => response.arrayBuffer())
+      .then(buffer => {
+        audioCtx.decodeAudioData(buffer).then(playsound);
+        return new Promise(res => res());
+      });
   } catch (error) {
     // error
   }
@@ -89,6 +93,7 @@ export const newMessageNotification = data => {
     currentUserId,
     assigneeId
   );
+
   if (playAudio && isNotificationEnabled) {
     window.playAudioAlert();
     showBadgeOnFavicon();
@@ -96,5 +101,7 @@ export const newMessageNotification = data => {
 };
 
 export const playNewMessageNotificationInWidget = () => {
-  window.playAudioAlert();
+  IFrameHelper.sendMessage({
+    event: 'playAudio',
+  });
 };