save, work in progress!

android/app/capacitor.build.gradle

@@ -25,6 +25,7 @@ dependencies {
     implementation project(':capacitor-storage')
     implementation project(':capacitor-voice-recorder')
     implementation "com.soundcloud.android:android-crop:1.0.0@aar"
+    implementation "com.android.support:support-v4:27.+"
     implementation "com.squareup.okhttp:okhttp-urlconnection:2+"
 }
 apply from: "../../node_modules/com-sarriaroman-photoviewer/src/android/photoviewer.gradle"

android/app/src/main/res/xml/config.xml

@@ -10,6 +10,10 @@
     <param name="android-package" value="me.rahul.plugins.sqlDB.sqlDB"/>
   </feature>
 
+  <feature name="FileOpener2">
+    <param name="android-package" value="io.github.pwlin.cordova.plugins.fileopener2.FileOpener2"/>
+  </feature>
+
   <feature name="FilePath">
     <param name="android-package" value="com.hiddentao.cordova.filepath.FilePath"/>
     <param name="onload" value="true"/>

src/app/app.module.ts

@@ -69,8 +69,6 @@ import {NgxImageCompressService} from 'ngx-image-compress';
 import { CustomImageCachePageRoutingModule } from './services/file/custom-image-cache/custom-image-cache-routing.module';
 import { IonicImageLoaderComponent, IonicImageLoaderModule } from 'ionic-image-loader-v5';
 
-import { FileOpener } from '@ionic-native/file-opener/ngx';
-
 /* import { FCM } from '@ionic-native/fcm/ngx';
 import { FirebaseX } from '@ionic-native/firebase-x/ngx'; */
 //import { FCM } from 'cordova-plugin-fcm-with-dependecy-updated/ionic/ngx';
@@ -146,7 +144,6 @@ import { FirebaseX } from '@ionic-native/firebase-x/ngx'; */
     StreamingMedia,
     PhotoViewer,
     NgxImageCompressService,
-    FileOpener
   ],
   bootstrap: [AppComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]

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 controls controlsList="nodownload noplaybackrate">
-  </audio>
-
-  <audio controls>
     <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
   }

src/app/pipes/pipes.module.ts

@@ -6,11 +6,12 @@ import { EventPipe } from './event.pipe';
 import { PublicationPipe } from './publication.pipe';
 import { ExpedienteTaskPipe } from './expediente-task.pipe';
 import { ParticipantsPipe } from './participants.pipe';
+import { SafehtmlPipe } from './safehtml.pipe';
 
 
 @NgModule({
-  declarations: [FilterPipe, SearchDocumentPipe, CustomTaskPipe, EventPipe, PublicationPipe, ExpedienteTaskPipe, ParticipantsPipe],
+  declarations: [FilterPipe, SearchDocumentPipe, CustomTaskPipe, EventPipe, PublicationPipe, ExpedienteTaskPipe, ParticipantsPipe, SafehtmlPipe],
-  exports: [FilterPipe],
+  exports: [FilterPipe, SafehtmlPipe],
   imports: []
 })
 export class PipesModule { }

src/app/pipes/safehtml.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { SafehtmlPipe } from './safehtml.pipe';
+
+describe('SafehtmlPipe', () => {
+  it('create an instance', () => {
+    const pipe = new SafehtmlPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/pipes/safehtml.pipe.ts

@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Pipe({
+  name: 'safehtml'
+})
+export class SafehtmlPipe implements PipeTransform {
+  constructor(private sanitiser: DomSanitizer){}
+
+  transform(html): unknown {
+    return this.sanitiser.bypassSecurityTrustResourceUrl(html);
+  }
+
+}

src/app/services/chat/room.service.ts

@@ -515,7 +515,7 @@ export class RoomService {
 
     const found = this.messages.find((MessageService) => {
       if (MessageService._id == message._id) {
-        if(this.hasLoadHistory) console.log(`${MessageService._id} == ${message._id}`)
+        if(this.hasLoadHistory) /* console.log(`${MessageService._id} == ${message._id}`) */
         return true
       } else {
         return false

src/plugin/player.js

@@ -0,0 +1,19 @@
+{
+  class AudioPlayer extends HTMLElement{
+    constructor(){
+      super()
+
+      this.attachShadow({ mode: 'open' });
+      this.render();
+    }
+
+    render(){
+      this.shadowRoot.innerHTML = `
+      <audio *ngIf="audioRecorded" controls src="assets/audio/Audiorecord.mp3"></audio>
+      `;
+    }
+
+
+  }
+  customElements.define('audio-player', AudioPlayer)
+}