save, work in progress!

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

@@ -12,6 +12,7 @@ import { BtnModalDismissPage } from 'src/app/shared/btn-modal-dismiss/btn-modal-
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { MatMenuModule } from '@angular/material/menu';
 import { LettersAvatarModule } from "ngx-letters-avatar";
+import { PipesModule } from 'src/app/pipes/pipes.module';
 
 @NgModule({
   imports: [
@@ -21,7 +22,8 @@ import { LettersAvatarModule } from "ngx-letters-avatar";
     FontAwesomeModule,
     MessagesPageRoutingModule,
     MatMenuModule,
-    LettersAvatarModule
+    LettersAvatarModule,
+    PipesModule,
   ],
   declarations: [MessagesPage]
 })

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

@@ -87,7 +87,7 @@
                 <ion-icon *ngIf="msg.attachments[0].image_url == null" name="download-outline"></ion-icon>
               </div>
               <div *ngIf="msg.file.type != 'application/img'">
-                  <div class="file">
+                  <div class="file" *ngIf="msg.file.type != 'aplication/audio'">
                     <div (click)="docIndex(i); viewDocument(msg, file.title_link)" class="file-details add-ellipsis cursor-pointer" *ngIf="msg.file">
                       <span *ngIf="msg.file.type">
                         <fa-icon *ngIf="msg.file.type == 'application/pdf'" icon="file-pdf" class="pdf-icon"></fa-icon>
@@ -98,11 +98,14 @@
                       <ion-label class="file-title">{{file.title}}</ion-label>
                     </div>
                   </div>
+                  <div class="file" *ngIf="msg.file.type == 'aplication/audio'">
+                    <audio [src]="file.title_link|safehtml" class="d-flex width-100 mt-10 mb-10" controls controlsList="nodownload noplaybackrate"></audio>
+                  </div>
                   <div class="file-details-optional">
                     <ion-label *ngIf="msg.file && msg.file != ''">
                       <span *ngIf="file.description">{{file.description}}</span>
                       <span *ngIf="file.description && msg.file.type != 'application/webtrix'"> • </span>
-                      <span *ngIf="msg.file.type != 'application/webtrix'">{{msg.displayType}}</span>
+                      <span *ngIf="msg.file.type != 'application/webtrix' && msg.file.type != 'aplication/audio'">{{msg.displayType}}</span>
                     </ion-label>
                   </div>
               </div>
@@ -180,18 +183,16 @@
   <button hidden (click)="startRecording()">Start Recording</button>
   <button hidden (click)="stopRecording()">Stop Recording</button>
 
-  <audio *ngIf="audioRecorded" controls [src]="audioRecorded">
-  </audio>
-
-  <audio controls>
+  <!-- <audio controls controlsList="nodownload noplaybackrate">
     <source src="assets/audio/Audiorecord.mp3" type="audio/ogg">
     <source src="assets/audio/Audiorecord.mp3" type="audio/mpeg">
   Your browser does not support the audio element.
-  </audio>
+  </audio> -->
 
-  <div class="width-100">
+  <div class="width-100 pl-20 pr-20">
     <span *ngIf="!lastAudioRecorded">{{durationDisplay}}</span>
-    <span *ngIf="lastAudioRecorded" (click)="playFile(lastAudioRecorded)">{{lastAudioRecorded}}</span>
+    <audio [src]="audioRecorded" class="d-flex width-100 mt-10 mb-10" *ngIf="lastAudioRecorded" controls controlsList="nodownload noplaybackrate"></audio>
+    <span hidden *ngIf="lastAudioRecorded" (click)="playFile(lastAudioRecorded)">{{lastAudioRecorded}}</span>
   </div>
 
   <div class="container width-100 d-flex">

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

@@ -228,7 +228,6 @@
    justify-content: center;
    justify-content: space-evenly;
    align-items: center;
-   border: 1px solid red;
  }
 
  .chat-icon-options{

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

@@ -40,7 +40,7 @@ import { SearchPage } from 'src/app/pages/search/search.page';
 import { Storage } from '@ionic/storage';
 import { FileToBase64Service } from 'src/app/services/file/file-to-base64.service';
 import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
-import { FileOpener } from '@ionic-native/file-opener/ngx';
+import { DomSanitizer } from '@angular/platform-browser';
 /* import {Plugins} from '@capacitor/core';
 
  const { Filesystem } = Plugins; */
@@ -88,6 +88,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
   storedFileNames = [];
   lastAudioRecorded = '';
   audioRecorded:any = "";
+  audioDownloaded:any = "";
   durationDisplay = '';
   duration = 0;
   @ViewChild('recordbtn', { read: ElementRef }) recordBtn: ElementRef;
@@ -119,7 +120,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     private processesService: ProcessesService,
     private storage: Storage,
     private fileToBase64Service: FileToBase64Service,
-    private fileOpener: FileOpener,
+    private sanitiser: DomSanitizer,
   ) {
     this.loggedUser = authService.ValidatedUserChat['data'];
     this.roomId = this.navParams.get('roomId');
@@ -131,6 +132,8 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
       }
     };
 
+    console.log(this.wsChatMethodsService.getDmRoom(this.roomId).loadHistory({}));
+
     this.wsChatMethodsService.getDmRoom(this.roomId).loadHistory({})
     this.wsChatMethodsService.getDmRoom(this.roomId).scrollDown = this.scrollToBottomClicked
     this.wsChatMethodsService.openRoom(this.roomId)
@@ -203,6 +206,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
       console.log(result);
       this.storedFileNames = result.files.reverse();
       this.lastAudioRecorded = this.storedFileNames[0];
+      this.getFile(this.lastAudioRecorded);
     })
   }
 
@@ -261,7 +265,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     console.log(audioFile);
     const base64sound = audioFile.data;
 
-    //this.audioRecorded = `data:audio/aac;base64,${base64sound}`;
+    this.audioRecorded = `data:audio/aac;base64,${base64sound}`;
 
     console.log(this.audioRecorded);
 
@@ -269,12 +273,10 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
 
     const audioRef = new Audio(`data:audio/aac;base64,${base64sound}`)
     //this.audioRecorded = audioRef;
-    //console.log(audioRef);
+    console.log(audioRef);
     audioRef.oncanplaythrough = () => audioRef.play();
     audioRef.load();
 
-    //this.getFile(fileName);
-
   }
 
   async getFile(fileName?:any){
@@ -298,6 +300,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
 
   }
 
+
   handlePress(id?: string) {
     this.selectedMsgId = id;
     this.showMessageOptions = true;
@@ -425,6 +428,8 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     //Converting base64 to blob
     const base64 = await fetch(base64sound);
     const base64Response = await fetch(`data:audio/aac;base64,${base64sound}`);
+    console.log(base64Response);
+
     const blob = await  base64Response.blob();
 
     console.log(blob);
@@ -434,19 +439,20 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
 
     this.wsChatMethodsService.getDmRoom(roomId).send({
       file: {
-        "type": "audio/aac",
+        "type": "aplication/audio",
         /* "guid": '', */
       },
       attachments: [{
         "title": fileName ,
-        "title_link": base64Response.url,
+        "title_link": `data:audio/aac;base64,${base64sound}`,
         "title_link_download": true,
         "type": "file"
       }],
       temporaryData: formData
     })
 
-    alert('OK')
+    this.allowTyping = true;
+    this.lastAudioRecorded = '';
 
   }
 
@@ -498,6 +504,13 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     }
   }
 
+  /* playSound(url?:any){
+    alert('here')
+    console.log(url);
+    //this.audioDownloaded = this.sanitiser.bypassSecurityTrustResourceUrl(url);
+    this.audioDownloaded = url;
+  } */
+
   docIndex(index: number) {
     this.dicIndex = index
   }