diff --git a/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue b/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue index 132408dc209e..aa566fd4db34 100644 --- a/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue +++ b/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue @@ -33,6 +33,21 @@ import { convertWavToMp3 } from './utils/mp3ConversionUtils'; WaveSurfer.microphone = MicrophonePlugin; +const RECORDER_CONFIG = { + [AUDIO_FORMATS.WAV]: { + audioMimeType: 'audio/wav', + audioWorkerURL: waveWorker, + }, + [AUDIO_FORMATS.MP3]: { + audioMimeType: 'audio/wav', + audioWorkerURL: waveWorker, + }, + [AUDIO_FORMATS.OGG]: { + audioMimeType: 'audio/ogg', + audioWorkerURL: encoderWorker, + }, +}; + export default { name: 'WootAudioRecorder', mixins: [alertMixin], @@ -94,14 +109,7 @@ export default { audioSampleRate: 48000, audioBitRate: 128, audioEngine: 'opus-recorder', - ...(this.audioRecordFormat === AUDIO_FORMATS.WAV && { - audioMimeType: 'audio/wav', - audioWorkerURL: waveWorker, - }), - ...(this.audioRecordFormat === AUDIO_FORMATS.OGG && { - audioMimeType: 'audio/ogg', - audioWorkerURL: encoderWorker, - }), + ...RECORDER_CONFIG[this.audioRecordFormat], }, }, }, @@ -139,7 +147,11 @@ export default { methods: { deviceReady() { if (this.player.record().engine instanceof OpusRecorderEngine) { - if (this.audioRecordFormat === AUDIO_FORMATS.WAV) { + if ( + [AUDIO_FORMATS.WAV, AUDIO_FORMATS.MP3].includes( + this.audioRecordFormat + ) + ) { this.player.record().engine.audioType = 'audio/wav'; } } @@ -154,13 +166,12 @@ export default { async finishRecord() { let recordedContent = this.player.recordedData; let fileName = this.player.recordedData.name; - if (this.isAWhatsAppChannel) { + let type = this.player.recordedData.type; + if (this.audioRecordFormat === AUDIO_FORMATS.MP3) { recordedContent = await convertWavToMp3(this.player.recordedData); fileName = `${getUuid()}.mp3`; + type = AUDIO_FORMATS.MP3; } - const type = !this.isAWhatsAppChannel - ? this.player.recordedData.type - : 'audio/mp3'; const file = new File([recordedContent], fileName, { type }); this.fireRecorderBlob(file); }, diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue index 83d31d11f2f8..42fa74ec7ba0 100644 --- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue +++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue @@ -53,7 +53,6 @@ v-if="showAudioRecorderEditor" ref="audioRecorderInput" :audio-record-format="audioRecordFormat" - :is-a-whats-app-channel="isAWhatsAppChannel" @state-recorder-progress-changed="onStateProgressRecorderChanged" @state-recorder-changed="onStateRecorderChanged" @finish-record="onFinishRecorder" @@ -502,7 +501,10 @@ export default { return `draft-${this.conversationIdByRoute}-${this.replyType}`; }, audioRecordFormat() { - if (this.isAPIInbox || this.isATelegramChannel) { + if (this.isAWhatsAppChannel || this.isATelegramChannel) { + return AUDIO_FORMATS.MP3; + } + if (this.isAPIInbox) { return AUDIO_FORMATS.OGG; } return AUDIO_FORMATS.WAV; @@ -1250,6 +1252,7 @@ export default { } } } + .send-button { @apply mb-0; } @@ -1274,6 +1277,7 @@ export default { .emoji-dialog--rtl { @apply left-[unset] -right-80; + &::before { transform: rotate(90deg); filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.08)); diff --git a/app/javascript/shared/constants/messages.js b/app/javascript/shared/constants/messages.js index b3ef11e1bba9..9451f83d31b1 100644 --- a/app/javascript/shared/constants/messages.js +++ b/app/javascript/shared/constants/messages.js @@ -98,6 +98,7 @@ export const CSAT_RATINGS = [ export const AUDIO_FORMATS = { WEBM: 'audio/webm', OGG: 'audio/ogg', + MP3: 'audio/mp3', WAV: 'audio/wav', };