fix audio in device

src/app/app.module.ts

@@ -12,18 +12,15 @@ import { HttpClientModule } from '@angular/common/http';
 
 import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
 
-
 //import { File } from '@ionic-native/File/ngx';
 import { WebView } from '@ionic-native/ionic-webview/ngx';
 import { FilePath } from '@ionic-native/file-path/ngx';
 import { Camera } from '@ionic-native/camera/ngx';
 import { IonicStorageModule } from '@ionic/storage';
-//
 
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
-
 import { CalendarModule, DateAdapter } from 'angular-calendar';
 import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -35,10 +32,6 @@ import {MatDatepickerModule} from '@angular/material/datepicker';
 import {MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
 import { NgxMatDateFormats, NGX_MAT_DATE_FORMATS } from '@angular-material-components/datetime-picker';
 import { Network } from '@ionic-native/network/ngx';
-import { File } from '@ionic-native/file/ngx';
-
-
-
 import {
   NgxMatDatetimePickerModule,
   NgxMatNativeDateModule,
@@ -56,13 +49,14 @@ import { far } from '@fortawesome/free-regular-svg-icons'
 import { fab } from '@fortawesome/free-brands-svg-icons'
 
 import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';
-import { PdfViewerModule } from 'ng2-pdf-viewer';
 import { SQLite } from '@ionic-native/sqlite/ngx';
 import { CookieService } from 'ngx-cookie-service';
 
 import { ImagePicker } from '@ionic-native/image-picker/ngx';
 import { MediaCapture } from '@ionic-native/media-capture/ngx';
 import { Media } from '@ionic-native/media/ngx';
+import { File } from '@ionic-native/file/ngx';
+
 import { StreamingMedia } from '@ionic-native/streaming-media/ngx';
 import { PhotoViewer } from '@ionic-native/photo-viewer/ngx';
 import {NgxImageCompressService} from 'ngx-image-compress';
@@ -111,10 +105,8 @@ import { FirebaseX } from '@ionic-native/firebase-x/ngx'; */
     MatSelectModule,
     MatDialogModule,
     //
-    PdfViewerModule,
     HammerModule,
-    CustomImageCachePageRoutingModule
-
+    CustomImageCachePageRoutingModule,
 
     ],
   providers: [
@@ -126,7 +118,7 @@ import { FirebaseX } from '@ionic-native/firebase-x/ngx'; */
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
     InAppBrowser,
     Camera,
-    //File,
+    File,
     WebView,
     FilePath,
    /*  FCM,

src/app/modals/document-viewer/document-viewer.module.ts

@@ -7,7 +7,6 @@ import { IonicModule } from '@ionic/angular';
 import { DocumentViewerPageRoutingModule } from './document-viewer-routing.module';
 
 import { DocumentViewerPage } from './document-viewer.page';
-import { PdfViewerModule } from 'ng2-pdf-viewer';
 
 
 @NgModule({
@@ -17,7 +16,6 @@ import { PdfViewerModule } from 'ng2-pdf-viewer';
     IonicModule,
     DocumentViewerPageRoutingModule,
     //
-    PdfViewerModule
   ],
   declarations: [DocumentViewerPage]
 })

src/app/modals/view-media/view-media.module.ts

@@ -8,7 +8,6 @@ import { ViewMediaPageRoutingModule } from './view-media-routing.module';
 
 import { ViewMediaPage } from './view-media.page';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { PdfViewerModule } from 'ng2-pdf-viewer';
 
 @NgModule({
   imports: [
@@ -17,7 +16,6 @@ import { PdfViewerModule } from 'ng2-pdf-viewer';
     IonicModule,
     FontAwesomeModule,
     ViewMediaPageRoutingModule,
-    PdfViewerModule
   ],
   declarations: [ViewMediaPage]
 })

src/app/modals/view-media/view-media.page.html

@@ -24,13 +24,11 @@
               <img src="{{image}}">
             </div>
             <div *ngIf="type == 'application/pdf'">
-              <pdf-viewer [src]="image" [render-text]="true" [original-size]="false" [zoom]="0.5" style="display: block;">
-              </pdf-viewer>
             </div>
           </div>
         </ion-slide>
       </ion-slides>
-      
+
     </div>
   </div>
 </ion-content>

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

@@ -210,7 +210,7 @@
         <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-options" src="assets/images/icons-add.svg"></ion-icon>
         <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-options" src="assets/images/theme/gov/icons-add.svg"></ion-icon>
       </button>
-      <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/pages/chat/group-messages/group-messages.page.ts

@@ -34,6 +34,7 @@ import { SearchPage } from 'src/app/pages/search/search.page';
 import { ProcessesService } from 'src/app/services/processes.service';
 import { VoiceRecorder, VoiceRecorderPlugin, RecordingData, GenericResponse, CurrentRecordingStatus } from 'capacitor-voice-recorder';
 import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
+import { DomSanitizer } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-group-messages',
@@ -108,8 +109,8 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
     private AttachmentsService: AttachmentsService,
     private storage: Storage,
     private processesService: ProcessesService,
-
     private CameraService: CameraService,
+    private sanitiser: DomSanitizer,
   ) {
     this.loggedUserChat = authService.ValidatedUserChat['data'];
     this.isGroupCreated = true;
@@ -144,7 +145,7 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
       console.log('MEMBER', value)
     })
     VoiceRecorder.requestAudioRecordingPermission();
-    this.loadFiles();
+    //this.loadFiles();
   }
 
   setStatus(status: string) {
@@ -237,15 +238,20 @@ export class GroupMessagesPage implements OnInit, 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() {
@@ -260,6 +266,7 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
   }
 
   stopRecording() {
+    this.deleteRecording();
     this.allowTyping = false;
     console.log('Stop');
     if (!this.recording) {
@@ -267,27 +274,28 @@ export class GroupMessagesPage implements OnInit, 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();
@@ -363,7 +371,7 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
 
   close() {
     this.modalController.dismiss();
-    this.deleteRecording(this.lastAudioRecorded);
+    this.deleteRecording();
   }
 
   doRefresh(ev: any) {
@@ -412,13 +420,20 @@ export class GroupMessagesPage implements OnInit, 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();
@@ -431,15 +446,13 @@ export class GroupMessagesPage implements OnInit, 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();
 
   }
 

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

@@ -187,7 +187,7 @@
         <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-options" src="assets/images/icons-add.svg"></ion-icon>
         <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-options" src="assets/images/theme/gov/icons-add.svg"></ion-icon>
       </button>
-      <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/pages/chat/messages/messages.page.ts

@@ -149,7 +149,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     this.wsChatMethodsService.getUserOfRoom(this.roomId).then((value) => {
       console.log('MEMBER', value)
     })
-    this.loadFiles();
+    //this.loadFiles();
     VoiceRecorder.requestAudioRecordingPermission();
     this.getChatMembers();
     /* Filesystem.mkdir({
@@ -200,15 +200,20 @@ export class MessagesPage implements OnInit, 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() {
@@ -218,11 +223,14 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
       return;
     }
     this.recording = true;
-    VoiceRecorder.startRecording();
+    VoiceRecorder.startRecording()
+    .then((result: GenericResponse) => console.log(result.value))
+    .catch(error => console.log(error));
     this.calculateDuration();
   }
 
   stopRecording() {
+    this.deleteRecording();
     this.allowTyping = false;
     console.log('Stop');
     if (!this.recording) {
@@ -230,76 +238,33 @@ export class MessagesPage implements OnInit, 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);
-        //this.myAudio = 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();
   }
 
-  async playFile(fileName?: any) {
-    const audioFile = await Filesystem.readFile({
-      path: fileName,
-      directory: Directory.Data
-    })
-    console.log(audioFile);
-    const base64sound = audioFile.data;
-
-    this.audioRecorded = `data:audio/aac;base64,${base64sound}`;
-
-    console.log(this.audioRecorded);
-
-    //this.fileOpener.open('C:/Users/tiago.kayaya/Downloads/Audiorecord','audio/wav')
-
-    const audioRef = new Audio(`data:audio/aac;base64,${base64sound}`)
-    //this.audioRecorded = audioRef;
-    console.log(audioRef);
-    audioRef.oncanplaythrough = () => audioRef.play();
-    audioRef.load();
-
-  }
-
-  async getFile(fileName?:any){
-    const audioFile = await Filesystem.readFile({
-      path: fileName,
-      directory: Directory.Data
-    })
-    //console.log(audioFile);
-    const base64sound = audioFile.data;
-
-    //Converting base64 to blob
-    const base64 = await fetch(base64sound);
-    //console.log(base64);
-
-    const base64Response = await fetch(`data:audio/ogg;base64,${base64sound}`);
-    //console.log(base64Response);
-
-    this.audioRecorded = base64Response.url;
-
-    console.log(this.audioRecorded);
-
-  }
 
 
   handlePress(id?: string) {
@@ -324,7 +289,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
 
   close() {
     this.modalController.dismiss();
-    this.deleteRecording(this.lastAudioRecorded);
+    this.deleteRecording();
   }
 
   load() {
@@ -404,27 +369,20 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
   async sendAudio(fileName) {
 
     const roomId = this.roomId
-
-    const audioFile = await Filesystem.readFile({
-      path: fileName,
-      directory: Directory.Data
-    })
-    console.log(audioFile);
-    const base64sound = audioFile.data;
-
-    const audioRef = new Audio(`data:audio/aac;base64,${base64sound}`)
-
-    console.log(audioRef);
+    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 base64 = await fetch(base64sound);
-    const base64Response = await fetch(`data:audio/aac;base64,${base64sound}`);
-    console.log(base64Response);
-
+    const base64Response = await fetch(this.audioRecorded);
     const blob = await  base64Response.blob();
 
-    console.log(blob);
-
     const formData = new FormData();
     formData.append("blobFile", blob);
 
@@ -435,15 +393,13 @@ export class MessagesPage implements OnInit, 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();
 
   }
 

src/app/pages/events/events.module.ts

@@ -5,7 +5,6 @@ import { IonicModule } from '@ionic/angular';
 import { EventsPageRoutingModule } from './events-routing.module';
 import { EventsPage } from './events.page';
 import { HeaderPageModule } from 'src/app/shared/header/header.module';
-import { PdfViewerModule } from 'ng2-pdf-viewer';
 
 @NgModule({
   imports: [
@@ -15,7 +14,6 @@ import { PdfViewerModule } from 'ng2-pdf-viewer';
     EventsPageRoutingModule,
     HeaderPageModule,
     //
-    PdfViewerModule
   ],
   declarations: [EventsPage],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]

src/app/services/events/events.module.ts

@@ -5,7 +5,6 @@ import { IonicModule } from '@ionic/angular';
 import { EventsPageRoutingModule } from './events-routing.module';
 import { EventsPage } from './events.page';
 import { HeaderPageModule } from 'src/app/shared/header/header.module';
-import { PdfViewerModule } from 'ng2-pdf-viewer';
 
 @NgModule({
   imports: [
@@ -15,7 +14,6 @@ import { PdfViewerModule } from 'ng2-pdf-viewer';
     EventsPageRoutingModule,
     HeaderPageModule,
     //
-    PdfViewerModule
   ],
   declarations: [EventsPage],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]

src/app/services/events/events.page.html

@@ -113,9 +113,4 @@
       </div>
     </div>
 
-    <!-- <pdf-viewer [src]="pdfSrc"
-    [render-text]="true"
-    style="display: block;"
-  ></pdf-viewer> -->
-
 </ion-content>

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();
 
   }