add audio to web conversation

src/app/shared/chat/group-messages/group-messages.page.ts

@@ -33,6 +33,8 @@ import { element } from 'protractor';
 import { FileType } from 'src/app/models/fileType';
 import { ToastService } from 'src/app/services/toast.service';
 import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
+import { VoiceRecorder, VoiceRecorderPlugin, RecordingData, GenericResponse, CurrentRecordingStatus } from 'capacitor-voice-recorder';
+import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
 
 /*
 import * as pdfjsLib from 'pdfjs-dist';
@@ -85,7 +87,16 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
 
   pdfurl = "http://www.africau.edu/images/default/sample.pdf";
   downloadFile: any;
-  showAvatar = false
+  showAvatar = false;
+
+  recording = false;
+  allowTyping = true;
+  storedFileNames = [];
+  lastAudioRecorded = '';
+  audioRecorded:any = "";
+  audioDownloaded:any = "";
+  durationDisplay = '';
+  duration = 0;
 
   constructor(
     public wsChatMethodsService: WsChatMethodsService,
@@ -146,6 +157,8 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
     }, 1000);
     this.getChatMembers();
     //this.getMessageDB();
+    VoiceRecorder.requestAudioRecordingPermission();
+    this.loadFiles();
 
   }
 
@@ -229,6 +242,89 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
     this.currentPosition = scroll;
   }
 
+  calculateDuration() {
+    if (!this.recording) {
+      this.duration = 0;
+      this.durationDisplay = '';
+      return;
+    }
+    this.duration += 1;
+    const minutes = Math.floor(this.duration / 60);
+    const seconds = (this.duration % 60).toString().padStart(2, '0');
+    this.durationDisplay = `${minutes}:${seconds}`;
+
+    setTimeout(() => {
+      this.calculateDuration();
+    }, 1000)
+  }
+
+  async getFile(fileName?:any){
+    const audioFile = await Filesystem.readFile({
+      path: fileName,
+      directory: Directory.Data
+    })
+    const base64sound = audioFile.data;
+    const base64Response = await fetch(`data:audio/ogg;base64,${base64sound}`);
+    this.audioRecorded = base64Response.url;
+  }
+
+  async loadFiles() {
+    Filesystem.readdir({
+      path: '',
+      directory: Directory.Data
+    }).then(result => {
+      console.log(result);
+      this.storedFileNames = result.files.reverse();
+      this.lastAudioRecorded = this.storedFileNames[0];
+      this.getFile(this.lastAudioRecorded);
+    })
+  }
+
+  startRecording() {
+    console.log('Recording');
+
+    if (this.recording) {
+      return;
+    }
+    this.recording = true;
+    VoiceRecorder.startRecording();
+    this.calculateDuration();
+  }
+
+  stopRecording() {
+    this.allowTyping = false;
+    console.log('Stop');
+    if (!this.recording) {
+      return;
+    }
+    this.recording = false;
+    VoiceRecorder.stopRecording().then(async (result: RecordingData) => {
+      this.recording = false;
+      if (result.value && result.value.recordDataBase64) {
+        const recordData = result.value.recordDataBase64;
+        const fileName = new Date().getTime() + ".wav";
+        await Filesystem.writeFile({
+          path: fileName,
+          directory: Directory.Data,
+          data: recordData,
+        })
+      }
+    })
+    setTimeout(async () => {
+      this.loadFiles();
+    }, 500);
+  }
+
+  async deleteRecording(fileName){
+    await Filesystem.deleteFile({
+      directory: Directory.Data,
+      path: fileName
+    });
+    this.allowTyping = true;
+    this.lastAudioRecorded = '';
+    this.loadFiles();
+  }
+
   ngOnDestroy() {
     window.removeEventListener('scroll', this.scrollChangeCallback, true);
   }
@@ -311,6 +407,38 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
     this.wsChatMethodsService.getGroupRoom(this.roomId).send({})
   }
 
+  async sendAudio(fileName) {
+    const roomId = this.roomId
+    const audioFile = await Filesystem.readFile({
+      path: fileName,
+      directory: Directory.Data
+    })
+    const base64sound = audioFile.data;
+    const base64Response = await fetch(`data:audio/aac;base64,${base64sound}`);
+    const blob = await  base64Response.blob();
+
+    const formData = new FormData();
+    formData.append("blobFile", blob);
+
+    this.wsChatMethodsService.getGroupRoom(roomId).send({
+      file: {
+        "type": "aplication/audio",
+        /* "guid": '', */
+      },
+      attachments: [{
+        "title": fileName ,
+        "title_link": `data:audio/aac;base64,${base64sound}`,
+        "title_link_download": true,
+        "type": "file"
+      }],
+      temporaryData: formData
+    })
+
+    this.allowTyping = true;
+    this.lastAudioRecorded = '';
+
+  }
+
   deleteMessage(msgId: string) {
     const room = this.wsChatMethodsService.getGroupRoom(this.roomId)
     this.alertService.confirmDeleteMessage(msgId, room);
@@ -842,10 +970,10 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
           if (msg.file.type == "application/img") {
             this.downloadFile = 'data:image/jpeg;base64,' + btoa(new Uint8Array(event.body).reduce((data, byte) => data + String.fromCharCode(byte), ''));
           } else if (msg.file.type === 'application/pdf') {
-            
+
             this.downloadFile = event.body;
           }
-  
+
           msg.attachments[0] = {
             image_url: this.downloadFile,
             name: msg.attachments[0].name,