conflit soved after merge

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

@@ -60,66 +60,75 @@
         </div>
       </div>
 
-      <div *ngIf="msg.file && msg.delate == false">
-      <div class="message-item incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45" *ngIf="msg.t != 'r' && msg.t != 'ul' && msg.t != 'au' && msg.t != 'ru' && msg.file.type != 'application/meeting'" >
-        <div *ngIf="msg.file.type != 'application/meeting'">
-          <div class="message-item-options d-flex justify-content-end">
-            <fa-icon [matMenuTriggerFor]="beforeMenu" icon="chevron-down" class="message-options-icon cursor-pointer"></fa-icon>
-            <mat-menu #beforeMenu="matMenu" xPosition="before">
-              <button (click)="deleteMessage(msg._id)" class="menuButton">Apagar mensagem</button>
-            </mat-menu>
-          </div>
-          <div class="title">
-            <ion-label>{{msg.u.name}}</ion-label>
-            <span class="time">{{msg.duration}}</span>
-          </div>
-          <div class="message">
-            <div *ngIf="msg.attachments" class="message-attachments">
-              <div *ngFor="let file of msg.attachments">
-                <div *ngIf="msg.file.type == 'application/img'" (click)="openPreview(msg)">
-                  <img *ngIf="msg.attachments[0].image_url" src="{{msg.attachments[0].image_url}}" alt="image">
-                  <ion-icon *ngIf="msg.attachments[0].image_url == null" name="download-outline"></ion-icon>
-                </div>
-                <div *ngIf="msg.file.type != 'application/img'">
-                  <div *ngIf="msg.file.type != 'application/audio'" class="file add-attachment-bg-color">
-                      <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>
-                          <fa-icon *ngIf="msg.file.type == 'application/word'" icon="file-word" class="word-icon"></fa-icon>
-                          <fa-icon *ngIf="msg.file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'" icon="file-word" class="excel-icon"></fa-icon>
-                          <ion-icon *ngIf="msg.file.type == 'application/webtrix'" src="assets/icon/webtrix.svg"></ion-icon>
-                        </span>
-                        <ion-label class="file-title">{{file.title}}</ion-label>
+      <div *ngIf="msg.file">
+        <div class="message-item incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45" *ngIf="msg.t != 'r' && msg.t != 'ul' && msg.t != 'au' && msg.t != 'ru' && msg.file.type != 'application/meeting'" >
+          <div *ngIf="msg.file.type != 'application/meeting'">
+            <div class="message-item-options d-flex justify-content-end">
+              <fa-icon [matMenuTriggerFor]="beforeMenu" icon="chevron-down" class="message-options-icon cursor-pointer"></fa-icon>
+              <mat-menu #beforeMenu="matMenu" xPosition="before">
+                <button (click)="deleteMessage(msg._id)" class="menuButton">Apagar mensagem</button>
+              </mat-menu>
+            </div>
+            <div class="title">
+              <ion-label>{{msg.u.name}}</ion-label>
+              <span class="time">{{msg.duration}}</span>
+            </div>
+            <div class="message">
+              <div *ngIf="msg.attachments" class="message-attachments">
+                <div *ngFor="let file of msg.attachments">
+                  <div *ngIf="msg.file.type == 'application/img' && !msg.attachments[0].image_url">
+                    NOT UPLOADED
+                  </div>
+                  <div *ngIf="msg.file.type == 'application/img' &&
+                  msg.attachments[0].image_url" (click)="openPreview(msg)">
+                    <img *ngIf="msg.attachments[0].image_url" src="{{msg.attachments[0].image_url}}" alt="image">
+                    <ion-icon *ngIf="msg.attachments[0].image_url == null" name="download-outline"></ion-icon>
+                  </div>
+                  <div *ngIf="msg.file.type != 'application/img'">
+                    <div *ngIf="msg.file.type != 'application/audio'" class="file add-attachment-bg-color">
+                        <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>
+                            <fa-icon *ngIf="msg.file.type == 'application/word'" icon="file-word" class="word-icon"></fa-icon>
+                            <fa-icon *ngIf="msg.file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'" icon="file-word" class="excel-icon"></fa-icon>
+                            <ion-icon *ngIf="msg.file.type == 'application/webtrix'" src="assets/icon/webtrix.svg"></ion-icon>
+                          </span>
+                          <ion-label class="file-title">{{file.title}}</ion-label>
+                        </div>
                       </div>
+                      <div (click)="audioPreview(msg)" class="audio-contentainer" *ngIf="msg.file.type == 'application/audio' && !file.title_link">
+                        <ion-item class="add-attachment-bg-color" shape="round" lines="none" type="button">
+                          <ion-icon name="mic-outline" class="file-icon"></ion-icon>
+                          <ion-label>{{file.title}}</ion-label>
+                          <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="icon-download" src="assets/icon/theme/default/icons-download.svg" slot="end"></ion-icon>
+                          <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="icon-download" src="assets/icon/theme/gov/icons-download.svg" slot="end"></ion-icon>
+                        </ion-item>
+                      </div>
+                      <div class="audio-contentainer" *ngIf="msg.file.type == 'application/audio' && file.title_link">
+                        <audio [src]="file.title_link|safehtml" preload="metadata" controls controlsList="nodownload noplaybackrate"></audio>
+                      </div>
+                      <div class="file-details-optional add-attachment-bg-color">
+                        <ion-label *ngIf="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.file.type != 'application/audio'">{{msg.displayType}}</span>
+                        </ion-label>
                     </div>
-                    <div class="audio-contentainer" *ngIf="msg.file.type == 'application/audio'">
-                      <audio [src]="file.title_link|safehtml" preload="metadata" controls controlsList="nodownload noplaybackrate"></audio>
-                    </div>
-                    <div class="file-details-optional add-attachment-bg-color">
-                      <ion-label *ngIf="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.file.type != 'application/audio'">{{msg.displayType}}</span>
-                      </ion-label>
                   </div>
                 </div>
               </div>
+              {{last ? scrollToBottom() : ''}}
             </div>
-            {{last ? scrollToBottom() : ''}}
           </div>
         </div>
+        <div *ngIf="msg.file.type == 'application/meeting'" class="info-meeting">
+          <ion-label class="info-meeting-small">{{msg.u.name}} criou esta reunião</ion-label><br />
+          <button (click)="goToEvent(msg.file.id)" class="btn-no-color info-meeting-normal"><ion-label class="info-meeting-normal">{{msg.file.subject}}</ion-label></button><br />
+          <ion-label class="info-meeting-medium"><ion-icon name="calendar-outline"></ion-icon> De {{showDateDuration(msg.file.start_date)}} a {{showDateDuration(msg.file.end_date)}}</ion-label><br />
+          <ion-label class="info-meeting-medium"><ion-icon></ion-icon><ion-icon name="location-outline"></ion-icon> {{msg.file.venue}}</ion-label><br />
+        </div>
       </div>
-      <div *ngIf="msg.file.type == 'application/meeting'" class="info-meeting">
-        <ion-label class="info-meeting-small">{{msg.u.name}} criou esta reunião</ion-label><br />
-        <button (click)="goToEvent(msg.file.id)" class="btn-no-color info-meeting-normal"><ion-label class="info-meeting-normal">{{msg.file.subject}}</ion-label></button><br />
-        <ion-label class="info-meeting-medium"><ion-icon name="calendar-outline"></ion-icon> De {{showDateDuration(msg.file.start_date)}} a {{showDateDuration(msg.file.end_date)}}</ion-label><br />
-        <ion-label class="info-meeting-medium"><ion-icon></ion-icon><ion-icon name="location-outline"></ion-icon> {{msg.file.venue}}</ion-label><br />
-      </div>
-      </div>
-      <div *ngIf="msg.file && msg.delate == true">
-        Apagou a mensagem
-      </div>
-      
+
 
       <div *ngIf="msg.t == 'r'" class="info-text">
         <ion-label>Alterou o nome do grupo para "{{msg.msg.split('-').join(' ')}}"</ion-label><br />
@@ -208,9 +217,9 @@
           <ion-fab-button title="Nova Reunião" (click)="bookMeeting()" color="light">
             <ion-icon name="calendar"></ion-icon>
           </ion-fab-button>
-          <ion-fab-button title="Adicionar Documento" (click)="addFile()" color="light">
+          <!-- <ion-fab-button title="Adicionar Documento" (click)="addFile()" color="light">
             <ion-icon name="document"></ion-icon>
-          </ion-fab-button>
+          </ion-fab-button> -->
           <ion-fab-button title="Anexar Fotografia" (click)="addImage()" color="light">
             <ion-icon name="image"></ion-icon>
           </ion-fab-button>

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

@@ -274,20 +274,23 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
   }
 
   async loadFiles() {
+    try {
+      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}`);
+        }
+      });
+    } catch (error) {}
 
-    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() {
@@ -417,41 +420,64 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
     this.wsChatMethodsService.getGroupRoom(this.roomId).send({})
   }
 
-  async sendAudio(fileName) {
+  base64toBlob(base64Data, contentType) {
+    contentType = contentType || '';
+    var sliceSize = 1024;
+    var byteCharacters = atob(base64Data);
+    var bytesLength = byteCharacters.length;
+    var slicesCount = Math.ceil(bytesLength / sliceSize);
+    var byteArrays = new Array(slicesCount);
 
+    for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
+        var begin = sliceIndex * sliceSize;
+        var end = Math.min(begin + sliceSize, bytesLength);
+
+        var bytes = new Array(end - begin);
+        for (var offset = begin, i = 0; offset < end; ++i, ++offset) {
+            bytes[i] = byteCharacters[offset].charCodeAt(0);
+        }
+        byteArrays[sliceIndex] = new Uint8Array(bytes);
+    }
+    return new Blob(byteArrays, { type: contentType });
+}
+
+  async sendAudio(fileName) {
     const roomId = this.roomId
+    let audioFile;
     this.storage.get('recordData').then((recordData) => {
       console.log(recordData);
-      if(recordData.value.recordDataBase64.includes('data:audio')){
-        this.audioRecorded = recordData.value.recordDataBase64;
+      audioFile = recordData;
+      if(recordData?.value?.recordDataBase64.includes('data:audio')){
+        this.audioRecorded = recordData?.value?.recordDataBase64;
       }
       else{
-        this.audioRecorded = `data:${recordData.value.mimeType};base64,${recordData.value.recordDataBase64}`;
+        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 encodedData = btoa(this.audioRecorded);
+    const blob =  this.base64toBlob(encodedData, recordData.value.mimeType)
+    console.log(blob)
     const formData = new FormData();
     formData.append("blobFile", blob);
 
     this.wsChatMethodsService.getGroupRoom(roomId).send({
       file: {
         "type": "application/audio",
-        /* "guid": '', */
+        "msDuration":audioFile.value.msDuration,
+        "mimeType":audioFile.value.mimeType,
       },
       attachments: [{
         "title": fileName ,
-        "title_link": this.audioRecorded,
         "title_link_download": true,
-        "type": "file"
+        "type": "audio"
       }],
       temporaryData: formData
     })
-    this.deleteRecording();
 
+  });
+    this.deleteRecording();
   }
 
   deleteMessage(msgId: string) {
@@ -971,41 +997,7 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
 
 
   downloadFileMsg(msg: MessageService) {
-    console.log('FILE TYPE', msg.file.type)
-    this.downloadFile = "";
-    if (msg.file.type == "application/img") {
-      this.AttachmentsService.downloadFile(msg.file.guid).subscribe(async (event) => {
-        console.log('FILE TYPE 22', msg.file.guid)
-        var name = msg.file.guid;
-
-        if (event.type === HttpEventType.DownloadProgress) {
-          //this.downloadProgess = Math.round((100 * event.loaded) / event.total);
-          console.log('FILE TYPE 33', msg.file.type)
-        } else if (event.type === HttpEventType.Response) {
-          if (msg.file.type == "application/img") {
-            this.downloadFile = 'data:image/jpeg;base64,' + btoa(new Uint8Array(event.body).reduce((data, byte) => data + String.fromCharCode(byte), ''));
-          } else if (msg.file.type === 'application/pdf') {
-
-            this.downloadFile = event.body;
-          }
-
-          msg.attachments[0] = {
-            image_url: this.downloadFile,
-            name: msg.attachments[0].name,
-            title: msg.attachments[0].title,
-            title_link_download: msg.attachments[0].title_link_download,
-            ts: msg.attachments[0].ts
-          }
-
-          await this.storage.set(msg.file.guid, this.downloadFile).then(() => {
-            console.log('IMAGE SAVED')
-          });
-        }
-
-      });
-
-    }
-
+    msg.downloadFileMsg()
   }
 
   async openPreview(msg) {
@@ -1029,5 +1021,12 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
 
   }
 
+  async audioPreview(msg) {
+    console.log(msg);
+    if (!msg.attachments[0].title_link || msg.attachments[0].title_link === null || msg.attachments[0].title_link === '') {
+      this.downloadFileMsg(msg)
+    } else {}
+  }
+
 }
 

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

@@ -35,7 +35,7 @@
   </ion-refresher>
   <div class="messages" #scrollMe>
     <div class="messages-list-item-wrapper container-width-100"
-      *ngFor="let msg of  wsChatMethodsService.getDmRoom(roomId).messages; let last = last">
+      *ngFor="let msg of  wsChatMethodsService.getDmRoom(roomId).messages; index as i; let last = last">
       <div class='message-item incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45' *ngIf="msg.msg !=''">
         <div class="message-item-options d-flex justify-content-end">
           <fa-icon [matMenuTriggerFor]="beforeMenu" icon="chevron-down" class="message-options-icon cursor-pointer">
@@ -49,12 +49,12 @@
           <span class="time">{{msg.duration}}</span>
         </div>
         <div class="d-flex justify-space-between">
-          
-          <ion-label *ngIf="msg.delate == false" class="flex-0">{{msg.msg}}</ion-label> 
+
+          <ion-label *ngIf="msg.delate == false" class="flex-0">{{msg.msg}} </ion-label>
           <ion-label *ngIf="msg.delate == true" class="flex-0">Apagou a mensagem</ion-label>
 
           <ion-label class="float-status-all float-status" >
-            
+
             <ion-icon *ngIf="msg.messageSend == false" src="assets/images/clock-regular.svg"></ion-icon>
             <ion-icon *ngIf="msg.messageSend == true && msg.received.length == 0" src="assets/images/check-solid.svg"></ion-icon>
             <ion-icon *ngIf="msg.messageSend && msg.received.length >= 1 && msg.viewed.length == 0" src="assets/images/check-double-solid.svg"></ion-icon>
@@ -84,7 +84,6 @@
                 <div *ngIf="msg.file.type == 'application/img'" (click)="openPreview(msg)" dfsdvsvs>
                   <img src={{msg.attachments[0].image_url}} alt="image">
                   <ion-label class="float-status-all float-status" >
-            
                     <ion-icon *ngIf="msg.messageSend == false" src="assets/images/clock-regular.svg"></ion-icon>
                     <ion-icon *ngIf="msg.messageSend == true && msg.received.length == 0" src="assets/images/check-solid.svg"></ion-icon>
                     <ion-icon *ngIf="msg.messageSend && msg.received.length >= 1 && msg.viewed.length == 0" src="assets/images/check-double-solid.svg"></ion-icon>
@@ -109,7 +108,15 @@
                       <ion-label class="file-title">{{file.title}}</ion-label>
                     </div>
                   </div>
-                  <div class="audio-contentainer" *ngIf="msg.file.type == 'application/audio'">
+                  <div (click)="audioPreview(msg)" class="audio-contentainer" *ngIf="msg.file.type == 'application/audio' && !file.title_link">
+                    <ion-item class="add-attachment-bg-color" shape="round" lines="none" type="button">
+                      <ion-icon name="mic-outline" class="file-icon"></ion-icon>
+                      <ion-label>{{file.title}}</ion-label>
+                      <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="icon-download" src="assets/icon/theme/default/icons-download.svg" slot="end"></ion-icon>
+                      <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="icon-download" src="assets/icon/theme/gov/icons-download.svg" slot="end"></ion-icon>
+                    </ion-item>
+                  </div>
+                  <div class="audio-contentainer" *ngIf="msg.file.type == 'application/audio' && file.title_link">
                     <audio [src]="file.title_link|safehtml" preload="metadata" class="flex-grow-1" controls controlsList="nodownload noplaybackrate"></audio>
                   </div>
                   <div class="file-details-optional add-attachment-bg-color">
@@ -119,7 +126,7 @@
                       <span *ngIf="msg.file.type != 'application/webtrix' && msg.file.type != 'application/audio'">{{msg.displayType}}</span>
                     </ion-label>
                     <ion-label class="float-status-all float-status" >
-            
+
                       <ion-icon *ngIf="msg.messageSend == false" src="assets/images/clock-regular.svg"></ion-icon>
                       <ion-icon *ngIf="msg.messageSend == true && msg.received.length == 0" src="assets/images/check-solid.svg"></ion-icon>
                       <ion-icon *ngIf="msg.messageSend && msg.received.length >= 1 && msg.viewed.length == 0" src="assets/images/check-double-solid.svg"></ion-icon>
@@ -133,28 +140,30 @@
           </div>
         </div>
         <div class="info-meeting" *ngIf="msg.file.type == 'application/meeting'">
-          <ion-label class="info-meeting-small">{{msg.u.name}} criou esta reunião</ion-label><br />
-          <button (click)="goToEvent(msg.file.id)" class="btn-no-color info-meeting-normal">
+
+          <ion-label *ngIf="msg.delate == true" class="info-meeting-small">Apagou a mensagem</ion-label><br />
+
+
+          <ion-label *ngIf="msg.delate == false" class="info-meeting-small">{{msg.u.name}} criou esta reunião</ion-label><br />
+          <button *ngIf="msg.delate == false" (click)="goToEvent(msg.file.id)" class="btn-no-color info-meeting-normal">
             <ion-label class="info-meeting-normal">{{msg.file.subject}}</ion-label>
           </button><br />
-          <ion-label class="info-meeting-medium">
+          <ion-label *ngIf="msg.delate == false" class="info-meeting-medium">
             <ion-icon name="calendar-outline"></ion-icon> De {{showDateDuration(msg.file.start_date)}} a
             {{showDateDuration(msg.file.end_date)}}
           </ion-label><br />
-          <ion-label class="info-meeting-medium">
+          <ion-label *ngIf="msg.delate == false" class="info-meeting-medium">
             <ion-icon></ion-icon>
             <ion-icon name="location-outline"></ion-icon> {{msg.file.venue}}
           </ion-label><br />
         </div>
       </div>
 
-      <div *ngIf="msg.file && msg.delate == true">
-        Apagou a mensagem
-      </div>
+
 
     </div>
   </div>
-  
+
   <ion-fab horizontal="end" vertical="bottom" slot="fixed">
     <ion-fab-button *ngIf="scrollToBottomBtn" (click)="scrollToBottomClicked()" color="light" size="small">
       <ion-icon name="chevron-down"></ion-icon>
@@ -165,7 +174,7 @@
 
 
 <ion-footer (click)="wsChatMethodsService.getDmRoom(roomId).sendReadMessage()">
-  
+
   <div class="typing" *ngIf="wsChatMethodsService.getDmRoom(roomId).otherUserType == true" >
     <ngx-letters-avatar *ngIf="showAvatar"
     [avatarName]=  "wsChatMethodsService.getDmRoom(roomId).name"
@@ -189,9 +198,9 @@
           <ion-fab-button title="Nova Reunião" (click)="bookMeeting()" color="light">
             <ion-icon name="calendar"></ion-icon>
           </ion-fab-button>
-          <ion-fab-button title="Adicionar Documento" (click)="addFile()" color="light">
+          <!-- <ion-fab-button title="Adicionar Documento" (click)="addFile()" color="light">
             <ion-icon name="document"></ion-icon>
-          </ion-fab-button>
+          </ion-fab-button> -->
           <ion-fab-button title="Anexar Fotografia" (click)="addImage()" color="light">
             <ion-icon name="image"></ion-icon>
           </ion-fab-button>

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

@@ -227,6 +227,13 @@
     margin-top: 4px;
   }
 
+  .chat-icon-download{
+    font-size: 95px;
+    margin: 0 auto;
+    margin-top: 4px;
+    border: 1px solid red;
+  }
+
    .type-message{
     display: flex;
     border: 1px solid #ebebeb;
@@ -329,3 +336,8 @@ display: block;
 .typing ngx-letters-avatar {
   padding-right: 5px;
 }
+
+.div-do-audio{
+  border: 1px solid red !important;
+  overflow: auto;
+}

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

@@ -25,7 +25,6 @@ import { WsChatMethodsService } from 'src/app/services/chat/ws-chat-methods.serv
 import { WsChatService } from 'src/app/services/chat/ws-chat.service'
 import { MessageService } from 'src/app/services/chat/message.service';
 import { AttachmentsService } from 'src/app/services/attachments.service';
-
 import { CameraService } from 'src/app/services/camera.service';
 import { FileType } from 'src/app/models/fileType';
 import { SearchPage } from 'src/app/pages/search/search.page';
@@ -250,10 +249,22 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
   }
 
   async loadFiles() {
+    try {
+      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}`);
+        }
+      });
+    } catch (error) { }
 
-    this.storage.get('fileName').then((fileName) => {
-      this.lastAudioRecorded = fileName;
-    })
 
     this.storage.get('recordData').then((recordData) => {
       console.log(recordData);
@@ -267,7 +278,6 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
   }
 
   startRecording() {
-    console.log('Recording');
 
     if (this.recording) {
       return;
@@ -354,64 +364,49 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     this.wsChatMethodsService.getDmRoom(this.roomId).send({})
   }
 
-  async sendAudio(fileName) {
 
+  async sendAudio(fileName) {
     const roomId = this.roomId
     let audioFile;
     this.storage.get('recordData').then((recordData) => {
       console.log(recordData);
       audioFile = recordData;
+
       if (recordData.value.recordDataBase64.includes('data:audio')) {
         this.audioRecorded = recordData.value.recordDataBase64;
       }
-      else {
-        this.audioRecorded = `data:${recordData.value.mimeType};base64,${recordData.value.recordDataBase64}`;
+      else{
+        this.audioRecorded = `data:${recordData.value.mimeType};base64,${recordData?.value?.recordDataBase64}`;
       }
-    });
+        //Converting base64 to blob
+        const encodedData = btoa(this.audioRecorded);
+        const blob = this.base64toBlob(encodedData, recordData.value.mimeType)
+        console.log(blob)
+        const formData = new FormData();
+        formData.append("blobFile", blob);
 
-    //Converting base64 to blob
-    const base64Response = await fetch(this.audioRecorded);
-    const blob = await base64Response.blob();
+        this.wsChatMethodsService.getDmRoom(roomId).send({
+          file: {
+            "type": "application/audio",
+            "msDuration": audioFile.value.msDuration,
+            "mimeType": audioFile.value.mimeType,
+          },
+          attachments: [{
+            "title": fileName,
+            "title_link_download": true,
+            "type": "audio"
+          }],
+          temporaryData: formData
+        })
 
-    const formData = new FormData();
-    formData.append("blobFile", blob);
-
-    this.wsChatMethodsService.getDmRoom(roomId).send({
-      file: {
-        "type": "application/audio",
-        /* "guid": '', */
-        "msDuration": audioFile.value.msDuration,
-        "mimeType": audioFile.value.mimeType,
-      },
-      attachments: [{
-        "title": fileName,
-        "title_link": this.audioRecorded,
-        "title_link_download": true,
-        "type": "audio"
-      }],
-      temporaryData: formData
-    })
+      });
     this.deleteRecording();
-
   }
 
+
   deleteMessage(msgId: string, msg: MessageService) {
-
-    /*  msg.delateStatusFalse()
-     this.wsChatMethodsService.getDmRoom(this.roomId).sendDeleteRequest(msgId) */
-
-  }
-
-  async viewDocument(msg: any, url?: string) {
-    if (msg.file.type == "application/img") {
-      let response: any = await this.AttachmentsService.getFile(msg.file.guid).toPromise();
-      console.log(response);
-      alert(response);
-
-      //this.openPreview(msg);
-
-    }
-    else if (msg.file.type == "application/webtrix") {
+    this.wsChatMethodsService.getDmRoom(this.roomId).sendDeleteRequest(msgId)
+    if (msg.file.type == "application/webtrix") {
       this.openViewDocumentModal(msg.file);
     }
     else {
@@ -955,6 +950,13 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     DocumentViewer.viewDocument
   }
 
+  async audioPreview(msg) {
+    console.log(msg);
+    if (!msg.attachments[0].title_link || msg.attachments[0].title_link === null || msg.attachments[0].title_link === '') {
+      this.downloadFileMsg(msg)
+    } else { }
+  }
+
   async openPreview(msg) {
     console.log(msg);
 
@@ -962,22 +964,22 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
       this.downloadFileMsg(msg)
 
 
-   /*  } else if (msg.file.type === "application/pdf") {
-      
-
-      console.log(str);
-      const win = window.open("", "_blank");
-      let html = '';
-
-      html += '<html>';
-      html += '<body style="margin:0!important">';
-      html += '<iframe width="100%" height="100%" src="' + str + '" type="application/pdf" />';
-      html += '</body>';
-      html += '</html>';
-
-      setTimeout(() => {
-        win.document.write(html);
-      }, 0); */
+      /*  } else if (msg.file.type === "application/pdf") {
+         
+   
+         console.log(str);
+         const win = window.open("", "_blank");
+         let html = '';
+   
+         html += '<html>';
+         html += '<body style="margin:0!important">';
+         html += '<iframe width="100%" height="100%" src="' + str + '" type="application/pdf" />';
+         html += '</body>';
+         html += '</html>';
+   
+         setTimeout(() => {
+           win.document.write(html);
+         }, 0); */