- Primero necesitaremos un nuevo modal que permita grabar y revisar el audio a adjuntar en el mensaje. Lo llamaremos
RecordModalComponent
.
- Ahora debemos ajustar acción
uploadMessageFile
para dar cabida al audio.
async uploadMessageFile({ rootGetters }, { roomID, file, type }) {
...
const ext = type === "photo" ? "jpg" : "wav";
const uploadPhoto = () => {
let fileName = `rooms/${roomID}/messages/${userUID}-${timestamp}.${ext}`;
return storage.ref(fileName).put(file);
};
...
}
- Acto seguido debemos añador botón, método y propiedad audio en el modelo de
ViewRoom
.
async recordAudio() {
try {
this.audio = await this.$store.dispatch("utils/requestConfirmation", {
props: {
message: "Record your voice 🎤"
},
component: "RecordModal"
});
} catch (error) {
this.$toast.error(error.message);
}
},
- Por último podemos completar el método createMessage con el nuevo posible audio.
if (this.audio) {
this.audioURL = await this.$store.dispatch(
"messages/uploadMessageFile",
{
roomID: this.id,
file: this.audio,
type: "audio"
}
);
}