save

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

@@ -16,6 +16,7 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { ImageCropperModule } from 'ngx-image-cropper';
 import { AngularCropperjsModule } from 'angular-cropperjs';
 import { LettersAvatarModule } from "ngx-letters-avatar";
+import { PipesModule } from 'src/app/pipes/pipes.module';
 
 @NgModule({
   imports: [
@@ -26,7 +27,8 @@ import { LettersAvatarModule } from "ngx-letters-avatar";
     GroupMessagesPageRoutingModule,
     ChatPopoverPageModule,
     BtnModalDismissPageModule,
-    LettersAvatarModule
+    LettersAvatarModule,
+    PipesModule,
     /* ImageCropperModule,
     AngularCropperjsModule */
 

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

@@ -106,7 +106,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 add-attachment-bg-color" *ngIf="msg.file.type != 'aplication/audio'">
                     <div (click)="openPreview(msg)" 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>
@@ -117,11 +117,14 @@
                       <ion-label class="file-title">{{file.title}}</ion-label>
                     </div>
                   </div>
-                  <div class="file-details-optional">
-                    <ion-label *ngIf="msg.file">
+                  <div *ngIf="msg.file.type == 'aplication/audio'">
+                    <audio [src]="file.title_link|safehtml" preload="metadata" class="d-flex width-100" controls controlsList="nodownload noplaybackrate"></audio>
+                  </div>
+                  <div class="file-details-optional add-attachment-bg-color">
+                    <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>
@@ -190,32 +193,47 @@
   <div class="typing" >
     <ngx-letters-avatar
     [avatarName]=  "wsChatMethodsService.getGroupRoom(roomId).name"
-    [width]="30" 
+    [width]="30"
     [circular]="true"
     fontFamily="Roboto"></ngx-letters-avatar>
     {{ wsChatMethodsService.getGroupRoom(roomId).userThatIsTyping }} está a escrever...
   </div>
+
+  <div class="width-100 pl-20 pr-20">
+    <span *ngIf="!lastAudioRecorded">{{durationDisplay}}</span>
+    <audio [src]="audioRecorded" class="d-flex width-100 mt-10 mb-10" *ngIf="lastAudioRecorded" controls controlsList="nodownload noplaybackrate"></audio>
+  </div>
+
   <div class="container width-100 d-flex">
     <div>
-      <button class="btn-no-color" (click)="openChatOptions()">
+      <button *ngIf="!recording && !lastAudioRecorded && allowTyping" class="btn-no-color" (click)="openChatOptions()">
         <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)">
+        <fa-icon class="icon-size-27" icon="trash"></fa-icon>
+      </button>
     </div>
     <div class="message-box width-80">
-      <ion-item class="ion-no-padding type-message" lines="none">
-        <ion-textarea autocomplete="on" autocorrect="on" spellcheck="true" clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="wsChatMethodsService.getGroupRoom(roomId).message" (ionChange)="wsChatMethodsService.getGroupRoom(roomId).sendTyping()"></ion-textarea>
-        <button hidden class="btn-no-color">
-          <ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
+      <div *ngIf="!recording && !lastAudioRecorded" class="type-message">
+        <ion-textarea *ngIf="allowTyping" autocomplete="on" autocorrect="on" spellcheck="true" clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="wsChatMethodsService.getGroupRoom(roomId).message" (ionChange)="wsChatMethodsService.getGroupRoom(roomId).sendTyping()"></ion-textarea>
+      </div>
+      <div *ngIf="recording" class="d-flex align-items-center justify-content-center">
+        <button (click)="stopRecording()" class="btn-no-color d-flex align-items-center justify-content-center">
+        <ion-icon class="icon-size-45" name="stop-circle-outline" color="danger"></ion-icon>
         </button>
-      </ion-item>
+      </div>
     </div>
     <div>
+      <button #recordbtn *ngIf="!wsChatMethodsService.getGroupRoom(roomId).message && !lastAudioRecorded" (click)="startRecording()" class="btn-no-color">
+        <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send" src="assets/icon/theme/default/icons-chat-record-audio.svg"></ion-icon>
+        <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-record-audio.svg"></ion-icon>
+      </button>
       <button *ngIf="wsChatMethodsService.getGroupRoom(roomId).message" class="btn-no-color" (click)="sendMessage()">
         <ion-icon *ngIf="ThemeService.currentTheme == 'default' "  class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
         <ion-icon *ngIf="ThemeService.currentTheme == 'gov' "  class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
       </button>
-      <button *ngIf="!wsChatMethodsService.getGroupRoom(roomId).message" class="btn-no-color">
+      <button *ngIf="!wsChatMethodsService.getGroupRoom(roomId).message && lastAudioRecorded" class="btn-no-color" (click)="sendAudio(lastAudioRecorded)">
         <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
         <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
       </button>

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

@@ -177,7 +177,7 @@
     -webkit-overflow-scrolling: touch;
 
     .messages-list-item-wrapper{
-      overflow: auto;
+      overflow: hidden;
     }
     .messages-list-item-wrapper-active{
       background: #e6f6ff75 !important;
@@ -358,4 +358,4 @@
 
 .typing ngx-letters-avatar {
   padding-right: 5px;
-}
+}

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

@@ -32,6 +32,8 @@ import { Storage } from '@ionic/storage';
 import { CameraService } from 'src/app/services/camera.service';
 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';
 
 @Component({
   selector: 'app-group-messages',
@@ -74,6 +76,15 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
 
   @ViewChild('scrollMe') private myScrollContainer: ElementRef;
 
+  recording = false;
+  allowTyping = true;
+  storedFileNames = [];
+  lastAudioRecorded = '';
+  audioRecorded:any = "";
+  audioDownloaded:any = "";
+  durationDisplay = '';
+  duration = 0;
+
   constructor(
     private menu: MenuController,
     private modalController: ModalController,
@@ -132,6 +143,8 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
     this.wsChatMethodsService.getUserOfRoom(this.roomId).then((value) => {
       console.log('MEMBER', value)
     })
+    VoiceRecorder.requestAudioRecordingPermission();
+    this.loadFiles();
   }
 
   setStatus(status: string) {
@@ -197,6 +210,99 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
     this.currentPosition = scroll;
   }
 
+  calculateDuration() {
+    if (!this.recording) {
+      this.duration = 0;
+      this.durationDisplay = '';
+      return;
+    }
+    this.duration += 1;
+    const minutes = Math.floor(this.duration / 60);
+    const seconds = (this.duration % 60).toString().padStart(2, '0');
+    this.durationDisplay = `${minutes}:${seconds}`;
+
+    setTimeout(() => {
+      this.calculateDuration();
+    }, 1000)
+  }
+
+  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);
+
+  }
+
+  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);
+    })
+  }
+
+  startRecording() {
+    console.log('Recording');
+
+    if (this.recording) {
+      return;
+    }
+    this.recording = true;
+    VoiceRecorder.startRecording();
+    this.calculateDuration();
+  }
+
+  stopRecording() {
+    this.allowTyping = false;
+    console.log('Stop');
+    if (!this.recording) {
+      return;
+    }
+    this.recording = false;
+    VoiceRecorder.stopRecording().then(async (result: RecordingData) => {
+      this.recording = false;
+      if (result.value && result.value.recordDataBase64) {
+        const recordData = result.value.recordDataBase64;
+        const fileName = new Date().getTime() + ".wav";
+        await Filesystem.writeFile({
+          path: fileName,
+          directory: Directory.Data,
+          data: recordData,
+        })
+      }
+    })
+    setTimeout(async () => {
+      this.loadFiles();
+    }, 500);
+  }
+
+  async deleteRecording(fileName){
+    await Filesystem.deleteFile({
+      directory: Directory.Data,
+      path: fileName
+    });
+    this.allowTyping = true;
+    this.lastAudioRecorded = '';
+    this.loadFiles();
+  }
 
   async goToEvent(eventId: any) {
     let classs;
@@ -311,13 +417,43 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
     return i;
   }
 
-
-
-
   sendMessage() {
     this.wsChatMethodsService.getGroupRoom(this.roomId).send({})
   }
 
+  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}`);
+    const blob = await  base64Response.blob();
+
+    const formData = new FormData();
+    formData.append("blobFile", blob);
+
+    this.wsChatMethodsService.getGroupRoom(roomId).send({
+      file: {
+        "type": "aplication/audio",
+        /* "guid": '', */
+      },
+      attachments: [{
+        "title": fileName ,
+        "title_link": `data:audio/aac;base64,${base64sound}`,
+        "title_link_download": true,
+        "type": "file"
+      }],
+      temporaryData: formData
+    })
+
+    this.allowTyping = true;
+    this.lastAudioRecorded = '';
+
+  }
+
+
   async openOptions() {
     const modal = await this.popoverController.create({
       component: ChatPopoverPage,

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

@@ -176,23 +176,9 @@
     fontFamily="Roboto"></ngx-letters-avatar>
     está a escrever ...
   </div>
-
-  <!-- <audio controls>
-    <source src="https://www.tabularium.pt/file-upload/5g6DkyMC4MHcuaDyp/Audio%20record.mp3" type="audio/mpeg">
-  </audio> -->
-  <button hidden (click)="startRecording()">Start Recording</button>
-  <button hidden (click)="stopRecording()">Stop Recording</button>
-
-  <!-- <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> -->
-
   <div class="width-100 pl-20 pr-20">
     <span *ngIf="!lastAudioRecorded">{{durationDisplay}}</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">
@@ -208,10 +194,6 @@
     <div class="width-70 message-container">
       <div *ngIf="!recording && !lastAudioRecorded" class="type-message">
         <ion-textarea *ngIf="allowTyping" autocomplete="on" autocorrect="on" spellcheck="true" clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="wsChatMethodsService.getDmRoom(roomId).message" (ionChange)="wsChatMethodsService.getDmRoom(roomId).sendTyping()"></ion-textarea>
-        <!-- <ion-textarea hidden autocomplete="on" spellcheck="true" *ngIf="recording" clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="durationDisplay"></ion-textarea> -->
-        <!-- <button #recordbtn class="btn-no-color">
-          <ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
-        </button> -->
       </div>
       <div *ngIf="recording" class="d-flex align-items-center justify-content-center">
         <button (click)="stopRecording()" class="btn-no-color d-flex align-items-center justify-content-center">

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

@@ -234,7 +234,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
       if (result.value && result.value.recordDataBase64) {
         const recordData = result.value.recordDataBase64;
         //console.log(recordData);
-        this.myAudio = recordData;
+        //this.myAudio = recordData;
         const fileName = new Date().getTime() + ".wav";
         await Filesystem.writeFile({
           path: fileName,