Por: Juan Andrés Núñez
Juan Andrés Núñez - juanwmedia

Especialista en tecnologías Web. Me dedico a enseñar desarrollo Web moderno a cualquier persona (físicamente en clase y a través de Internet) desde una perspectiva holística: teniendo en cuenta las competencias técnicas necesarias, junto a las habilidades personales o soft skills. Tienes más información en mi Web.

  • 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"
    }
  );
}

Presentación


Firebase Auth


Cloud Firestore 🔥


Cloud Storage 🗄


Cloud Functions ☁


No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue