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', +};