From c9cae01cb47213de9394055bbabbffd525c7859a Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Mon, 5 Dec 2022 12:30:56 +0530
Subject: [PATCH] fix: Support audio in safari browser (#5943)

---
 .../widgets/WootWriter/AudioRecorder.vue      | 34 +++++++++++++++----
 .../widgets/WootWriter/ReplyBottomPanel.vue   |  9 ++++-
 app/javascript/shared/constants/messages.js   |  5 +++
 3 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue b/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue
index 893bdcf3a..9c53d4a1a 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue
@@ -23,6 +23,7 @@ import 'videojs-wavesurfer/dist/videojs.wavesurfer.js';
 import 'videojs-record/dist/videojs.record.js';
 import 'videojs-record/dist/plugins/videojs.record.opus-recorder.js';
 import { format, addSeconds } from 'date-fns';
+import { AUDIO_FORMATS } from 'shared/constants/messages';
 
 WaveSurfer.microphone = MicrophonePlugin;
 
@@ -70,13 +71,26 @@ export default {
           record: {
             audio: true,
             video: false,
-            displayMilliseconds: false,
-            maxLength: 300,
-            audioEngine: 'opus-recorder',
-            audioWorkerURL: encoderWorker,
-            audioChannels: 1,
-            audioSampleRate: 48000,
-            audioBitRate: 128,
+            ...(this.audioRecordFormat === AUDIO_FORMATS.WEBM && {
+              monitorGain: 0,
+              recordingGain: 1,
+              numberOfChannels: 1,
+              encoderSampleRate: 16000,
+              originalSampleRateOverride: 16000,
+              streamPages: true,
+              maxFramesPerPage: 1,
+              encoderFrameSize: 1,
+              encoderPath: 'opus-recorder/dist/waveWorker.min.js',
+            }),
+            ...(this.audioRecordFormat === AUDIO_FORMATS.OGG && {
+              displayMilliseconds: false,
+              maxLength: 300,
+              audioEngine: 'opus-recorder',
+              audioWorkerURL: encoderWorker,
+              audioChannels: 1,
+              audioSampleRate: 48000,
+              audioBitRate: 128,
+            }),
           },
         },
       },
@@ -86,6 +100,12 @@ export default {
     isRecording() {
       return this.player && this.player.record().isRecording();
     },
+    audioRecordFormat() {
+      if (this.isAWebWidgetInbox) {
+        return AUDIO_FORMATS.WEBM;
+      }
+      return AUDIO_FORMATS.OGG;
+    },
   },
   mounted() {
     window.Recorder = Recorder;
diff --git a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
index a8c26201e..bd67011e5 100644
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
@@ -232,11 +232,18 @@ export default {
       return this.showFileUpload || this.isNote;
     },
     showAudioRecorderButton() {
+      // Disable audio recorder for safari browser as recording is not supported
+      const isSafari = /^((?!chrome|android|crios|fxios).)*safari/i.test(
+        navigator.userAgent
+      );
+
       return (
         this.isFeatureEnabledonAccount(
           this.accountId,
           FEATURE_FLAGS.VOICE_RECORDER
-        ) && this.showAudioRecorder
+        ) &&
+        this.showAudioRecorder &&
+        !isSafari
       );
     },
     showAudioPlayStopButton() {
diff --git a/app/javascript/shared/constants/messages.js b/app/javascript/shared/constants/messages.js
index e189a19a8..70235ce0e 100644
--- a/app/javascript/shared/constants/messages.js
+++ b/app/javascript/shared/constants/messages.js
@@ -72,3 +72,8 @@ export const CSAT_RATINGS = [
     color: '#44CE4B',
   },
 ];
+
+export const AUDIO_FORMATS = {
+  WEBM: 'audio/webm',
+  OGG: 'audio/ogg',
+};