feat: Send audio longer than 10 seconds and Add Prop audio-record-format (#6108)

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue

@@ -10,11 +10,11 @@ import 'videojs-record/dist/css/videojs.record.css';
 
 import videojs from 'video.js';
 
-import inboxMixin from '../../../../shared/mixins/inboxMixin';
 import alertMixin from '../../../../shared/mixins/alertMixin';
 
 import Recorder from 'opus-recorder';
 import encoderWorker from 'opus-recorder/dist/encoderWorker.min';
+import waveWorker from 'opus-recorder/dist/waveWorker.min';
 
 import WaveSurfer from 'wavesurfer.js';
 import MicrophonePlugin from 'wavesurfer.js/dist/plugin/wavesurfer.microphone.js';
@@ -29,14 +29,19 @@ WaveSurfer.microphone = MicrophonePlugin;
 
 export default {
   name: 'WootAudioRecorder',
-  mixins: [inboxMixin, alertMixin],
+  mixins: [alertMixin],
+  props: {
+    audioRecordFormat: {
+      type: String,
+      default: AUDIO_FORMATS.WEBM,
+    },
+  },
   data() {
     return {
       player: false,
       recordingDateStarted: new Date(0),
       initialTimeDuration: '00:00',
       recorderOptions: {
-        debug: true,
         controls: true,
         bigPlayButton: false,
         fluid: false,
@@ -71,6 +76,9 @@ export default {
           record: {
             audio: true,
             video: false,
+            maxLength: 900,
+            timeSlice: 1000,
+            maxFileSize: 15 * 1024 * 1024,
             ...(this.audioRecordFormat === AUDIO_FORMATS.WEBM && {
               monitorGain: 0,
               recordingGain: 1,
@@ -80,11 +88,10 @@ export default {
               streamPages: true,
               maxFramesPerPage: 1,
               encoderFrameSize: 1,
-              encoderPath: 'opus-recorder/dist/waveWorker.min.js',
+              encoderPath: waveWorker,
             }),
             ...(this.audioRecordFormat === AUDIO_FORMATS.OGG && {
               displayMilliseconds: false,
-              maxLength: 300,
               audioEngine: 'opus-recorder',
               audioWorkerURL: encoderWorker,
               audioChannels: 1,
@@ -100,12 +107,6 @@ 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;

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -37,6 +37,7 @@
       <woot-audio-recorder
         v-if="showAudioRecorderEditor"
         ref="audioRecorderInput"
+        :audio-record-format="audioRecordFormat"
         @state-recorder-progress-changed="onStateProgressRecorderChanged"
         @state-recorder-changed="onStateRecorderChanged"
         @finish-record="onFinishRecorder"
@@ -147,6 +148,7 @@ import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import {
   MAXIMUM_FILE_UPLOAD_SIZE,
   MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL,
+  AUDIO_FORMATS,
 } from 'shared/constants/messages';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 
@@ -462,6 +464,12 @@ export default {
     editorStateId() {
       return `draft-${this.conversationIdByRoute}-${this.replyType}`;
     },
+    audioRecordFormat() {
+      if (this.isAWebWidgetInbox) {
+        return AUDIO_FORMATS.WEBM;
+      }
+      return AUDIO_FORMATS.OGG;
+    },
   },
   watch: {
     currentChat(conversation) {

config/webpack/environment.js

@@ -6,7 +6,7 @@ const vue = require('./loaders/vue');
 environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin());
 environment.loaders.prepend('vue', vue);
 
-environment.loaders.append('opus', {
+environment.loaders.append('opus-ogg', {
   test: /encoderWorker\.min\.js$/,
   loader: 'file-loader',
   options: {
@@ -14,6 +14,14 @@ environment.loaders.append('opus', {
   },
 });
 
+environment.loaders.append('opus-wav', {
+  test: /waveWorker\.min\.js$/,
+  loader: 'file-loader',
+  options: {
+    name: '[name].[ext]',
+  },
+});
+
 environment.loaders.append('audio', {
   test: /\.(mp3)(\?.*)?$/,
   loader: 'url-loader',