From 9e8a943ec70fe31a1b7bb55ddf9f9084ddd0f245 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <webofnithin@gmail.com>
Date: Thu, 4 Mar 2021 19:24:03 +0530
Subject: [PATCH] feat: Add audio alert for incoming messages on dashboard
 (#1738)

Fixes: #1345
---
 .../dashboard/helper/actionCable.js           |   2 +
 .../dashboard/i18n/locale/en/settings.json    |   5 ++
 .../settings/profile/NotificationSettings.vue |  46 ++++++++++++-
 app/javascript/packs/application.js           |   3 +-
 .../shared/helpers/AudioNotificationHelper.js |  62 +++++++++++++++++-
 public/dashboard/audios/ding.mp3              | Bin 0 -> 2667 bytes
 6 files changed, 115 insertions(+), 3 deletions(-)
 create mode 100644 public/dashboard/audios/ding.mp3

diff --git a/app/javascript/dashboard/helper/actionCable.js b/app/javascript/dashboard/helper/actionCable.js
index 1fb9961dc..9bed8e7d5 100644
--- a/app/javascript/dashboard/helper/actionCable.js
+++ b/app/javascript/dashboard/helper/actionCable.js
@@ -1,5 +1,6 @@
 import AuthAPI from '../api/auth';
 import BaseActionCableConnector from '../../shared/helpers/BaseActionCableConnector';
+import { newMessageNotification } from 'shared/helpers/AudioNotificationHelper';
 
 class ActionCableConnector extends BaseActionCableConnector {
   constructor(app, pubsubToken) {
@@ -63,6 +64,7 @@ class ActionCableConnector extends BaseActionCableConnector {
   onLogout = () => AuthAPI.logout();
 
   onMessageCreated = data => {
+    newMessageNotification(data);
     this.app.$store.dispatch('addMessage', data);
   };
 
diff --git a/app/javascript/dashboard/i18n/locale/en/settings.json b/app/javascript/dashboard/i18n/locale/en/settings.json
index 6b42cf3f2..fd915fb0c 100644
--- a/app/javascript/dashboard/i18n/locale/en/settings.json
+++ b/app/javascript/dashboard/i18n/locale/en/settings.json
@@ -22,6 +22,11 @@
         "TITLE": "Access Token",
         "NOTE": "This token can be used if you are building an API based integration"
       },
+      "AUDIO_NOTIFICATIONS_SECTION": {
+        "TITLE": "Audio Notifications",
+        "NOTE": "Enable audio notifications in dashboard for new messages and conversations.",
+        "ENABLE_AUDIO": "Play audio notification when a new conversation is created or new messages arrives"
+      },
       "EMAIL_NOTIFICATIONS_SECTION": {
         "TITLE": "Email Notifications",
         "NOTE": "Update your email notification preferences here",
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationSettings.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationSettings.vue
index a2d6bf215..38bf2744e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationSettings.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/NotificationSettings.vue
@@ -1,5 +1,33 @@
 <template>
   <div>
+    <div class="profile--settings--row row">
+      <div class="columns small-3 ">
+        <h4 class="block-title">
+          {{ $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.TITLE') }}
+        </h4>
+        <p>
+          {{ $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.NOTE') }}
+        </p>
+      </div>
+      <div class="columns small-9">
+        <div>
+          <input
+            id="audio_enable_alert"
+            v-model="enableAudioAlerts"
+            class="notification--checkbox"
+            type="checkbox"
+            @input="handleAudioInput"
+          />
+          <label for="audio_enable_alert">
+            {{
+              $t(
+                'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.ENABLE_AUDIO'
+              )
+            }}
+          </label>
+        </div>
+      </div>
+    </div>
     <div class="profile--settings--row row">
       <div class="columns small-3 ">
         <h4 class="block-title">
@@ -185,6 +213,7 @@
 import { mapGetters } from 'vuex';
 import alertMixin from 'shared/mixins/alertMixin';
 import configMixin from 'shared/mixins/configMixin';
+import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import {
   hasPushPermissions,
   requestPushPermissions,
@@ -192,11 +221,12 @@ import {
 } from '../../../../helper/pushHelper';
 
 export default {
-  mixins: [alertMixin, configMixin],
+  mixins: [alertMixin, configMixin, uiSettingsMixin],
   data() {
     return {
       selectedEmailFlags: [],
       selectedPushFlags: [],
+      enableAudioAlerts: false,
       hasEnabledPushPermissions: false,
     };
   },
@@ -204,6 +234,7 @@ export default {
     ...mapGetters({
       emailFlags: 'userNotificationSettings/getSelectedEmailFlags',
       pushFlags: 'userNotificationSettings/getSelectedPushFlags',
+      uiSettings: 'getUISettings',
     }),
     isBrowserSafari() {
       if (window.browserConfig) {
@@ -219,6 +250,10 @@ export default {
     pushFlags(value) {
       this.selectedPushFlags = value;
     },
+    uiSettings(value) {
+      const { enable_audio_alerts: enableAudio = false } = value;
+      this.enableAudioAlerts = enableAudio;
+    },
   },
   mounted() {
     if (hasPushPermissions()) {
@@ -226,6 +261,8 @@ export default {
     }
 
     this.$store.dispatch('userNotificationSettings/get');
+    const { enable_audio_alerts: enableAudio = false } = this.uiSettings;
+    this.enableAudioAlerts = enableAudio;
   },
   methods: {
     onRegistrationSuccess() {
@@ -277,6 +314,13 @@ export default {
 
       this.updateNotificationSettings();
     },
+    handleAudioInput(e) {
+      this.enableAudioAlerts = e.target.checked;
+      this.updateUISettings({
+        enable_audio_alerts: this.enableAudioAlerts,
+      });
+      this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
+    },
     toggleInput(selected, current) {
       if (selected.includes(current)) {
         const newSelectedFlags = selected.filter(flag => flag !== current);
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 0d73e0357..b7abc18c2 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -20,6 +20,7 @@ import App from '../dashboard/App';
 import i18n from '../dashboard/i18n';
 import createAxios from '../dashboard/helper/APIHelper';
 import commonHelpers from '../dashboard/helper/commons';
+import { getAlertAudio } from '../shared/helpers/AudioNotificationHelper';
 import router from '../dashboard/routes';
 import store from '../dashboard/store';
 import vueActionCable from '../dashboard/helper/actionCable';
@@ -70,7 +71,6 @@ window.onload = () => {
   }).$mount('#app');
   vueActionCable.init();
 };
-
 window.addEventListener('load', () => {
   verifyServiceWorkerExistence(registration =>
     registration.pushManager.getSubscription().then(subscription => {
@@ -79,4 +79,5 @@ window.addEventListener('load', () => {
       }
     })
   );
+  getAlertAudio();
 });
diff --git a/app/javascript/shared/helpers/AudioNotificationHelper.js b/app/javascript/shared/helpers/AudioNotificationHelper.js
index ee9899bf4..3f8f77c4c 100644
--- a/app/javascript/shared/helpers/AudioNotificationHelper.js
+++ b/app/javascript/shared/helpers/AudioNotificationHelper.js
@@ -1,9 +1,69 @@
+import { MESSAGE_TYPE } from 'shared/constants/messages';
 const notificationAudio = require('shared/assets/audio/ding.mp3');
+import axios from 'axios';
 
 export const playNotificationAudio = () => {
   try {
     new Audio(notificationAudio).play();
   } catch (error) {
-    console.log(error);
+    // error
   }
 };
+
+export const getAlertAudio = async () => {
+  window.playAudioAlert = () => {};
+  const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+  const playsound = audioBuffer => {
+    window.playAudioAlert = () => {
+      const source = audioCtx.createBufferSource();
+      source.buffer = audioBuffer;
+      source.connect(audioCtx.destination);
+      source.loop = false;
+      source.start();
+    };
+  };
+
+  try {
+    const response = await axios.get('/dashboard/audios/ding.mp3', {
+      responseType: 'arraybuffer',
+    });
+
+    audioCtx.decodeAudioData(response.data).then(playsound);
+  } catch (error) {
+    // error
+  }
+};
+
+const shouldPlayAudio = data => {
+  const { conversation_id: currentConvId } = window.WOOT.$route.params;
+  const currentUserId = window.WOOT.$store.getters.getCurrentUserID;
+  const {
+    conversation_id: incomingConvId,
+    sender_id: senderId,
+    message_type: messageType,
+  } = data;
+  const isFromCurrentUser = currentUserId === senderId;
+
+  const playAudio =
+    currentConvId !== incomingConvId &&
+    !isFromCurrentUser &&
+    messageType === MESSAGE_TYPE.INCOMING;
+  return playAudio;
+};
+
+export const newMessageNotification = data => {
+  const {
+    enable_audio_alerts: enableAudioAlerts = false,
+  } = window.WOOT.$store.getters.getUISettings;
+  if (!enableAudioAlerts) return false;
+
+  if (document.hidden) {
+    window.playAudioAlert();
+  } else {
+    const playAudio = shouldPlayAudio(data);
+    if (playAudio) {
+      window.playAudioAlert();
+    }
+  }
+  return false;
+};
diff --git a/public/dashboard/audios/ding.mp3 b/public/dashboard/audios/ding.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..7c190424bef8b6ca18378bfeb47edbf3cee6edff
GIT binary patch
literal 2667
zcmeHIYgAKL7Ctw*33&klc?60YAfqTqZ$MEj3>OIq2!atIJX(Uh1q4NkN;<g-RC$Sk
zDj-w^9TclPEYuQlBp@niL=bV*MQLaqL6}xR5tWiVH`8gCf1JNvYu0>g?X~xJ?>^`3
zz0cbF_z9fJKnH$ExVMnd6hfR3CnQ85^m>;Dd-DlOC&Vi$W>0o{`W}2<5l7Jf3Q_XT
zM8d(45EuXk0^Ht%wD;le`+&a>#96@so`K%Zj(h}xmA}QehRY)-1p-K;i=$`^tNrcA
z|E$L6YXrbx3IHhv0FAf>!h~S=i<T(Z(i3y#M+`7tBOd<@Tpb$pdo92JtoKsMb@7g}
zDKOIVu#R$bD?YEi-_)VrJrJ?mS=s+r;l+y3CFioag{DN^NEk4Z;V*XTmXCO+*qdfH
z**vbFBiK*-HcuKLIsV4GdeLq_7r<Vs^TFS4imM90ptBbIezxhpa+{mgcG2g^$-?E<
z!uGkhRPY2enpZDNVm4r(JUx~6NbV@eavW&O&1gMcd#Fp($>nnFIMmH+p!3@_spab!
zsH$fJ7invy6oLeKzs0&ER4177nl3|CTm`?kn009dvzqAzY93lxbE%K~Wk&=xF^F%(
zzP<7E>sND++n0!nA=+wIh$Wc<VcoFU2}M{83XDNlS+&WeA80NUIDV{x8XQH1!2v~P
zc3^f>b~@gH2Sww!wqrKz@{V|$2Z8p3;V;9<s~@zMRH!Yy53C<EtTI3H%>26qr)gOc
zZ#%1VRG0Cu`1|t+>DigE%loCj^7-_T-KismL)oDc^`QKj@kCPgK0$UILLr?5SfjX&
zV`+7bO|v{9r;s59a}`C3^yvF$?1!lwnGaywjh-dhDc9eUp*}Y@e!jUnb0;J&I7+LG
zf&0-1hQ-a}nlZy&c_zA69l}PV!Nzgo)~r#^456woj+%Z`h|!upiY>&r(E1Q7(>=>?
z$3t9%#DZ)Qc0{>!o>{)lOe>uHa&DPPL7hSF)OB*t$L-Q7lBB_26w6rUOIw$*b|F%i
ziK{j-{jHnBP0og{$9BawzkC92&o*hDXN762Cg&nV#rbm|*nmiv1x1bfhlKkqjyvGE
z((f*A=E^rQBI&UclM*5H@U?Gso4o@&*~DLz_~o45<$rsDziJ@W0|=n0cTU~2g#ZQ&
z<reO@F5Mh1nb@T_T#euI&^Futd+{slMIN(KT&>s(W4;iPEl>e2eMw)2g37xTd+>~%
zRa`RF$0;TLOtZ<37O1-}_erI5Ma%JczVVM<QT(loLO(_H^;#GTC1TBpWt9dPVWs=j
zZe60@q~pb*q~IIJO#`G6`PVO)tJ$PH70;Rlsq8wt9RosPO?Um;VoS{ThNPY4mKUI^
zbYQu7O{Y~7Gj=Z>Gf}1Lvp$gdszgAJ?Qx)<fixLn1AM+eZXDCo#06?o1ehb2o~9zk
z@N~4tn+{_zM|#>}MoeZZES7|jMiqe!V81!YZ_(cT?T7;sK=-0+68MV^2ATbJNGOZU
z((w39$d-)$0}0cQr8lE&%qXX9yru57zb!Rm1qH6f+UR-U4aNqQENmQQ%23#s9PE|{
zs{t0TSCrTAus!3L*PubAi7Z*>3+mTLmZzFP@#rFCDQS?*)-S50V$D%ZHA97{k|+T%
zX1Xa7ZDR|E>Jl3pT(+!(5hfjlS>yx~N-O>Wb)iDt=3n<bKYfpU^gxTh=x**)&2a0t
zW{xh;CH_l({#x>t+c!(17v?7qzmR6|Oe8t-@9k_~;`nY;Bb&l{C1k|pZ7Ac_0%NTw
zx+^j*1`z}}Hh0F1Me*~3O1*`FW<Ht8Wg+*^R|Os{IC$=r`()$c1q++3J0Bm7595KY
zun$PlFCy2dYNi#kTV-cAC3D;a)^H_2VnOF&`7)86e50RwySTJaMm4qIm^h&jf?D07
z9SRvnoebRgT~l;^9*J|6?PZZK;~c|crYoZ>A=fHuNdp-wkf~R1S;;JGt$I{?o^!5w
z`mrdtpt|T!RZC#sCqAAl2T~5*zhYZMn;EEC`{pe}&Y;u{zQX;ZDW^s*F#RN7t~mRw
z;=?h|Fd1ek){upQr(bE&pmyxuc9)M<_PH~2Ml9-ETDE)_H4rYL8+6=nygg)I5GJqN
zHtsQ<WgV)#I``>MGdmG{peHWlWkQu@*-%$P1-<HWJ3frh<9MIc^&!b!zvByqM7~&h
z8d2|GzPR|a)XC7klvTs{FVc6~j4=QFLK#~g`Jm<6e?CtP4Mk;T<1_Q+G6$l67~&^1
zh)294o@<1n@RCGaTgP5D;(FrPQe0D!e)9JhciSHX-Hdw;7+drEw3%WquU2{DMm`ZX
Xq_qNo3xLNp48VU-X#YP}SAl;4dn@^{

literal 0
HcmV?d00001