save

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

@@ -175,21 +175,22 @@
   </div>
 
   <ion-list>
-    <ion-item *ngFor="let audio of storedFileNames">
-      <span (click)="playFile(audio)">{{audio}}</span>
-    </ion-item>
-    <!-- <ion-item (click)="playFile(storedFileNames)">
-      {{storedFileNames}}
-    </ion-item>
-    <ion-item (click)="playFile(storedFileNames)">
-      {{storedFileNames}}
+    <span (click)="playFile(lastAudioRecorded)">{{lastAudioRecorded}}</span>
+    <ion-button *ngIf="lastAudioRecorded" slot="end" (click)="deleteRecording(lastAudioRecorded)" fill="clear" color="danger">
+      <ion-icon name="trash-outline" slot="icon-only"></ion-icon>
+    </ion-button>
+    <!-- <ion-item *ngFor="let audio of storedFileNames" (click)="playFile(audio)">
+      {{audio}}
+      <ion-button slot="end" (click)="deleteRecording(audio)" fill="clear" color="danger">
+        <ion-icon name="trash-outline" slot="icon-only"></ion-icon>
+      </ion-button>
     </ion-item> -->
   </ion-list>
   <!-- <audio controls>
     <source src="https://www.tabularium.pt/file-upload/5g6DkyMC4MHcuaDyp/Audio%20record.mp3" type="audio/mpeg">
   </audio> -->
-  <button (click)="startRecording()">Start Recording</button>
-  <button (click)="stopRecording()">Stop Recording</button>
+  <button hidden (click)="startRecording()">Start Recording</button>
+  <button hidden (click)="stopRecording()">Stop Recording</button>
   <div class="container width-100 d-flex">
     <div>
 

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

@@ -44,9 +44,6 @@ import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
 
  const { Filesystem } = Plugins; */
 
-
-const IMAGE_DIR = 'stored-images';
-
 @Component({
   selector: 'app-messages',
   templateUrl: './messages.page.html',
@@ -87,6 +84,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
 
   recording = false;
   storedFileNames = [];
+  lastAudioRecorded = '';
   durationDisplay = '';
   duration = 0;
   @ViewChild('recordbtn', { read: ElementRef }) recordBtn: ElementRef;
@@ -143,15 +141,14 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     this.wsChatMethodsService.getUserOfRoom(this.roomId).then((value) => {
       console.log('MEMBER', value)
     })
-
     this.loadFiles();
     VoiceRecorder.requestAudioRecordingPermission();
     this.getChatMembers();
-    Filesystem.mkdir({
+    /* Filesystem.mkdir({
       path: IMAGE_DIR,
       directory: Directory.Data,
       recursive: true
-    });
+    }); */
   }
 
   ngAfterViewInit() {
@@ -170,6 +167,9 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
       onEnd: ev => {
         Haptics.impact({ style: ImpactStyle.Light })
         this.stopRecording();
+        setTimeout(() => {
+          this.loadFiles();
+        }, 500);
       }
     }, true);
     longpress.enable();
@@ -197,10 +197,8 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
       directory: Directory.Data
     }).then(result => {
       console.log(result);
-      this.storedFileNames = result.files;
-      /* const temp: any[] = result.files.reverse();
-      this.storedFileNames = temp[0];
-      console.log(this.storedFileNames); */
+      this.storedFileNames = result.files.reverse();
+      this.lastAudioRecorded = this.storedFileNames[0];
     })
   }
 
@@ -234,7 +232,15 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
         })
       }
     })
+  }
 
+  async deleteRecording(fileName){
+    await Filesystem.deleteFile({
+      directory: Directory.Data,
+      path: fileName
+    });
+    this.lastAudioRecorded = '';
+    this.loadFiles();
   }
 
   async playFile(fileName?: any) {