fix audio in device

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

@@ -11,7 +11,6 @@ import { SharedModule } from 'src/app/shared/shared.module';
 
 import { ChatPopoverPageModule } from '../../popover/chat-popover/chat-popover.module';
 import { NewEventPageModule } from '../../agenda/new-event/new-event.module';
-import { PdfViewerModule } from 'ng2-pdf-viewer';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import {MatMenuModule} from '@angular/material/menu';
 import { LettersAvatarModule } from "ngx-letters-avatar";
@@ -23,7 +22,6 @@ import { PipesModule } from 'src/app/pipes/pipes.module';
     FormsModule,
     IonicModule,
     FontAwesomeModule,
-    PdfViewerModule,
     ChatPopoverPageModule,
     GroupMessagesPageRoutingModule,
     MatMenuModule,

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

@@ -247,7 +247,7 @@
           </ion-fab-button>
         </ion-fab-list>
       </ion-fab>
-      <button *ngIf="recording || lastAudioRecorded || !allowTyping" class="btn-delete-recording btn-no-color" (click)="deleteRecording(lastAudioRecorded)">
+      <button *ngIf="recording || lastAudioRecorded || !allowTyping" class="btn-delete-recording btn-no-color" (click)="deleteRecording()">
         <fa-icon class="icon-size-27" icon="trash"></fa-icon>
       </button>
     </div>

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

@@ -35,6 +35,7 @@ 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 { DomSanitizer } from '@angular/platform-browser';
 
 /*
 import * as pdfjsLib from 'pdfjs-dist';
@@ -119,6 +120,7 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
 
     private CameraService: CameraService,
     private toastService: ToastService,
+    private sanitiser: DomSanitizer,
 
   ) {
     console.log('OnCONSTRUCTOR');
@@ -145,7 +147,7 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
       this.showAvatar = true
     }, 50)
 
-    this.deleteRecording(this.lastAudioRecorded);
+    this.deleteRecording();
 
   }
 
@@ -160,7 +162,7 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
     this.getChatMembers();
     //this.getMessageDB();
     VoiceRecorder.requestAudioRecordingPermission();
-    this.deleteRecording(this.lastAudioRecorded);
+    this.deleteRecording();
     this.loadFiles();
 
   }
@@ -272,15 +274,20 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
   }
 
   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);
+
+    this.storage.get('fileName').then((fileName) => {
+      this.lastAudioRecorded = fileName;
     })
+
+    this.storage.get('recordData').then((recordData) => {
+      console.log(recordData);
+      if(recordData.value.recordDataBase64.includes('data:audio')){
+        this.audioRecorded = this.sanitiser.bypassSecurityTrustResourceUrl(recordData.value.recordDataBase64);
+      }
+      else{
+        this.audioRecorded = this.sanitiser.bypassSecurityTrustResourceUrl(`data:${recordData.value.mimeType};base64,${recordData.value.recordDataBase64}`);
+      }
+    });
   }
 
   startRecording() {
@@ -295,6 +302,7 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
   }
 
   stopRecording() {
+    this.deleteRecording();
     this.allowTyping = false;
     console.log('Stop');
     if (!this.recording) {
@@ -302,27 +310,28 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
     }
     this.recording = false;
     VoiceRecorder.stopRecording().then(async (result: RecordingData) => {
+      console.log(result);
       this.recording = false;
       if (result.value && result.value.recordDataBase64) {
         const recordData = result.value.recordDataBase64;
+        //console.log(recordData);
         const fileName = new Date().getTime() + ".wav";
-        await Filesystem.writeFile({
-          path: fileName,
-          directory: Directory.Data,
-          data: recordData,
+        //Save file
+        this.storage.set('fileName',fileName);
+        this.storage.set('recordData',result).then(() => {
+          console.log('Audio recorded saved');
         })
       }
     })
     setTimeout(async () => {
       this.loadFiles();
-    }, 500);
+    }, 1000);
   }
 
-  async deleteRecording(fileName){
-    await Filesystem.deleteFile({
-      directory: Directory.Data,
-      path: fileName
-    });
+  async deleteRecording(){
+    this.storage.remove('fileName');
+    this.storage.remove('recordData');
+
     this.allowTyping = true;
     this.lastAudioRecorded = '';
     this.loadFiles();
@@ -332,8 +341,6 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
     window.removeEventListener('scroll', this.scrollChangeCallback, true);
   }
 
-
-
   async getChatMembers() {
     //return await this.chatService.getMembers(roomId).toPromise();
     this.chatService.getAllUsers().subscribe(res => {
@@ -411,13 +418,20 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
   }
 
   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}`);
+    this.storage.get('recordData').then((recordData) => {
+      console.log(recordData);
+      if(recordData.value.recordDataBase64.includes('data:audio')){
+        this.audioRecorded = recordData.value.recordDataBase64;
+      }
+      else{
+        this.audioRecorded = `data:${recordData.value.mimeType};base64,${recordData.value.recordDataBase64}`;
+      }
+    });
+
+    //Converting base64 to blob
+    const base64Response = await fetch(this.audioRecorded);
     const blob = await  base64Response.blob();
 
     const formData = new FormData();
@@ -430,15 +444,13 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
       },
       attachments: [{
         "title": fileName ,
-        "title_link": `data:audio/aac;base64,${base64sound}`,
+        "title_link": this.audioRecorded,
         "title_link_download": true,
         "type": "file"
       }],
       temporaryData: formData
     })
-
-    this.allowTyping = true;
-    this.lastAudioRecorded = '';
+    this.deleteRecording();
 
   }
 

src/app/shared/chat/messages/messages.module.ts

@@ -12,7 +12,6 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { MatButtonModule } from '@angular/material/button';
 import {MatMenuModule} from '@angular/material/menu';
 import { LettersAvatarModule } from "ngx-letters-avatar";
-import { PdfViewerModule } from 'ng2-pdf-viewer';
 import { PipesModule } from 'src/app/pipes/pipes.module';
 
 @NgModule({
@@ -25,7 +24,6 @@ import { PipesModule } from 'src/app/pipes/pipes.module';
     MatButtonModule,
     MatMenuModule,
     LettersAvatarModule,
-    PdfViewerModule,
     PipesModule,
 
   ],

src/app/shared/chat/messages/messages.page.html

@@ -241,7 +241,7 @@
           </ion-fab-button>
         </ion-fab-list>
       </ion-fab>
-      <button *ngIf="recording || lastAudioRecorded || !allowTyping" class="btn-no-color" (click)="deleteRecording(lastAudioRecorded)">
+      <button *ngIf="recording || lastAudioRecorded || !allowTyping" class="btn-no-color" (click)="deleteRecording()">
         <fa-icon class="icon-size-27" icon="trash"></fa-icon>
       </button>
     </div>

src/app/shared/chat/messages/messages.page.scss

@@ -328,4 +328,4 @@ display: block;
 
 .typing ngx-letters-avatar {
   padding-right: 5px;
-}
+}

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

@@ -35,6 +35,7 @@ import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
 import { DocumentViewer, DocumentViewerOptions } from '@ionic-native/document-viewer';
 import { VoiceRecorder, VoiceRecorderPlugin, RecordingData, GenericResponse, CurrentRecordingStatus } from 'capacitor-voice-recorder';
 import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
+import { DomSanitizer } from '@angular/platform-browser';
 
 const IMAGE_DIR = 'stored-images';
 @Component({
@@ -117,6 +118,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     private CameraService: CameraService,
     private processesService: ProcessesService,
     private fileToBase64Service: FileToBase64Service,
+    private sanitiser: DomSanitizer,
   ) {
 
     this.loggedUser = authService.ValidatedUserChat['data'];
@@ -140,7 +142,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
       this.showAvatar = true
     }, 150)
 
-    this.deleteRecording(this.lastAudioRecorded)
+    this.deleteRecording()
 
   }
 
@@ -149,7 +151,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
 
     this.getChatMembers();
     VoiceRecorder.requestAudioRecordingPermission();
-    this.deleteRecording(this.lastAudioRecorded);
+    this.deleteRecording();
     this.loadFiles();
   }
 
@@ -250,15 +252,20 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
   }
 
   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);
+
+    this.storage.get('fileName').then((fileName) => {
+      this.lastAudioRecorded = fileName;
     })
+
+    this.storage.get('recordData').then((recordData) => {
+      console.log(recordData);
+      if(recordData.value.recordDataBase64.includes('data:audio')){
+        this.audioRecorded = this.sanitiser.bypassSecurityTrustResourceUrl(recordData.value.recordDataBase64);
+      }
+      else{
+        this.audioRecorded = this.sanitiser.bypassSecurityTrustResourceUrl(`data:${recordData.value.mimeType};base64,${recordData.value.recordDataBase64}`);
+      }
+    });
   }
 
   startRecording() {
@@ -273,6 +280,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
   }
 
   stopRecording() {
+    this.deleteRecording();
     this.allowTyping = false;
     console.log('Stop');
     if (!this.recording) {
@@ -280,27 +288,28 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     }
     this.recording = false;
     VoiceRecorder.stopRecording().then(async (result: RecordingData) => {
+      console.log(result);
       this.recording = false;
       if (result.value && result.value.recordDataBase64) {
         const recordData = result.value.recordDataBase64;
+        //console.log(recordData);
         const fileName = new Date().getTime() + ".wav";
-        await Filesystem.writeFile({
-          path: fileName,
-          directory: Directory.Data,
-          data: recordData,
+        //Save file
+        this.storage.set('fileName',fileName);
+        this.storage.set('recordData',result).then(() => {
+          console.log('Audio recorded saved');
         })
       }
     })
     setTimeout(async () => {
       this.loadFiles();
-    }, 500);
+    }, 1000);
   }
 
-  async deleteRecording(fileName){
-    await Filesystem.deleteFile({
-      directory: Directory.Data,
-      path: fileName
-    });
+  async deleteRecording(){
+    this.storage.remove('fileName');
+    this.storage.remove('recordData');
+
     this.allowTyping = true;
     this.lastAudioRecorded = '';
     this.loadFiles();
@@ -348,13 +357,20 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
   }
 
   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}`);
+    this.storage.get('recordData').then((recordData) => {
+      console.log(recordData);
+      if(recordData.value.recordDataBase64.includes('data:audio')){
+        this.audioRecorded = recordData.value.recordDataBase64;
+      }
+      else{
+        this.audioRecorded = `data:${recordData.value.mimeType};base64,${recordData.value.recordDataBase64}`;
+      }
+    });
+
+    //Converting base64 to blob
+    const base64Response = await fetch(this.audioRecorded);
     const blob = await  base64Response.blob();
 
     const formData = new FormData();
@@ -367,15 +383,13 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
       },
       attachments: [{
         "title": fileName ,
-        "title_link": `data:audio/aac;base64,${base64sound}`,
+        "title_link": this.audioRecorded,
         "title_link_download": true,
         "type": "file"
       }],
       temporaryData: formData
     })
-
-    this.allowTyping = true;
-    this.lastAudioRecorded = '';
+    this.deleteRecording();
 
   }