Preview image on chat solved

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

@@ -31,6 +31,7 @@ import { MessageService } from 'src/app/services/chat/message.service';
 import { File } from '@awesome-cordova-plugins/file/ngx';
 import { FileOpener } from '@awesome-cordova-plugins/file-opener/ngx';
 import { SessionStore } from 'src/app/store/session.service';
+import { ViewMediaPage } from 'src/app/modals/view-media/view-media.page';
 
 @Component({
   selector: 'app-group-messages',
@@ -1054,7 +1055,7 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
     return blob;
   }
 
-  openFile(pdfString, filename) {
+  openFile(pdfString, filename, type) {
     const blob = this.b64toBlob(pdfString, 'application/pdf')
     let pathFile = ''
     const fileName = filename
@@ -1105,21 +1106,38 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
 
         if (this.platform.is('desktop') || this.platform.is('mobileweb')) {
 
-          this.downloadFileFromBrowser(msg.attachments[0].name, str)
-          /* const modal = await this.modalController.create({
-            component: ViewMediaPage,
-            cssClass: 'modal modal-desktop',
-            componentProps: {
-              image: str,
-              type: msg.file.type,
-              username: msg.u.name,
-              _updatedAt: msg._updatedAt
-            }
-          });
-          modal.present(); */
+          if (msg.file.type == "application/img") {
+            const modal = await this.modalController.create({
+              component: ViewMediaPage,
+              cssClass: 'modal modal-desktop',
+              componentProps: {
+                image: msg.attachments[0].image_url,
+                type: msg.file.type,
+                username: msg.u.name,
+                _updatedAt: msg._updatedAt
+              }
+            });
+            modal.present();
+          } else {
+            this.downloadFileFromBrowser(msg.attachments[0].name, str)
+          }
 
         } else {
-          this.openFile(str, msg.attachments[0].name);
+          if (msg.file.type == "application/img") {
+            const modal = await this.modalController.create({
+              component: ViewMediaPage,
+              cssClass: 'modal modal-desktop',
+              componentProps: {
+                image: msg.attachments[0].image_url,
+                type: msg.file.type,
+                username: msg.u.name,
+                _updatedAt: msg._updatedAt
+              }
+            });
+            modal.present();
+          } else {
+            this.openFile(str, msg.attachments[0].name, msg.file.type);
+          }
         }
       }
     }

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

@@ -19,7 +19,7 @@ import { ChatUserStorage } from 'src/app/store/chat/chat-user.service';
 import { environment } from 'src/environments/environment';
 import { ThemeService } from 'src/app/services/theme.service'
 
-import { VoiceRecorder, RecordingData, GenericResponse} from 'capacitor-voice-recorder';
+import { VoiceRecorder, RecordingData, GenericResponse } from 'capacitor-voice-recorder';
 import { Haptics, ImpactStyle } from '@capacitor/haptics';
 import { SqliteService } from 'src/app/services/sqlite.service';
 import { ViewEventPage } from 'src/app/modals/view-event/view-event.page';
@@ -37,6 +37,9 @@ import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
 import { DomSanitizer } from '@angular/platform-browser';
 import { SessionStore } from 'src/app/store/session.service';
 import { HttpErrorResponse } from '@angular/common/http';
+import { File } from '@awesome-cordova-plugins/file/ngx';
+import { ViewMediaPage } from 'src/app/modals/view-media/view-media.page';
+import { FileOpener } from '@awesome-cordova-plugins/file-opener/ngx';
 
 
 const IMAGE_DIR = 'stored-images';
@@ -100,7 +103,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
   downloadProgess: number;
   downloadLoader: boolean;
 
-  audioPermissionStatus: 'granted'| 'denied' | 'prompt' | null = null
+  audioPermissionStatus: 'granted' | 'denied' | 'prompt' | null = null
   sessionStore = SessionStore
 
   constructor(
@@ -132,10 +135,12 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     private sanitiser: DomSanitizer,
     private alertController: AlertController,
     // private document: DocumentViewer
+    private file: File,
+    private fileOpener: FileOpener,
   ) {
     this.loggedUser = authService.ValidatedUserChat['data'];
     this.roomId = this.navParams.get('roomId');
-    
+
 
     window.onresize = (event) => {
       if (window.innerWidth > 701) {
@@ -143,7 +148,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
       }
     }
 
-    
+
 
     this.wsChatMethodsService.getDmRoom(this.roomId).loadHistory({})
     this.wsChatMethodsService.getDmRoom(this.roomId).scrollDown = this.scrollToBottomClicked
@@ -159,9 +164,9 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
   ngOnInit() {
     this.chatService.refreshtoken();
     this.wsChatMethodsService.getUserOfRoom(this.roomId).then((value) => {
-      
+
     })
-    
+
     this.getChatMembers();
   }
 
@@ -210,11 +215,11 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
 
     try {
       this.storage.get('recordData').then((recordData) => {
-        
+
         if (recordData?.value?.recordDataBase64.includes('data:audio')) {
           this.audioRecorded = this.sanitiser.bypassSecurityTrustResourceUrl(recordData?.value?.recordDataBase64);
         }
-        else if(recordData?.value?.mimeType && recordData?.value?.recordDataBase64) {
+        else if (recordData?.value?.mimeType && recordData?.value?.recordDataBase64) {
           this.audioRecorded = this.sanitiser.bypassSecurityTrustResourceUrl(`data:${recordData.value.mimeType};base64,${recordData?.value?.recordDataBase64}`);
         }
       });
@@ -225,22 +230,22 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
 
   async startRecording() {
     VoiceRecorder.requestAudioRecordingPermission();
-    if(await VoiceRecorder.canDeviceVoiceRecord().then((result: GenericResponse) =>{return result.value})){
-      if(await VoiceRecorder.requestAudioRecordingPermission().then((result: GenericResponse) => {return result.value})){
+    if (await VoiceRecorder.canDeviceVoiceRecord().then((result: GenericResponse) => { return result.value })) {
+      if (await VoiceRecorder.requestAudioRecordingPermission().then((result: GenericResponse) => { return result.value })) {
         //if(await this.hasAudioRecordingPermission()){
-          if (this.recording) {
-            return;
-          }
-          this.recording = true;
-          VoiceRecorder.startRecording();
-          this.calculateDuration();
+        if (this.recording) {
+          return;
+        }
+        this.recording = true;
+        VoiceRecorder.startRecording();
+        this.calculateDuration();
         //}
       }
-      else{
+      else {
         this.toastService._badRequest('Para gravar uma mensagem de voz, permita o acesso do Gabinete Digital ao seu microfone.');
       }
     }
-    else{
+    else {
       this.toastService._badRequest('Este dispositivo não tem capacidade para gravação de áudio!');
     }
   }
@@ -248,13 +253,13 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
   stopRecording() {
     this.deleteRecording();
     this.allowTyping = false;
-    
+
     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;
@@ -263,7 +268,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
         //Save file
         this.storage.set('fileName', fileName);
         this.storage.set('recordData', result).then(() => {
-          
+
         })
       }
     })
@@ -348,7 +353,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     });
     await modal.present();
     modal.onDidDismiss().then((res) => {
-      
+
     });
   }
 
@@ -412,16 +417,16 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
       if (recordData?.value?.recordDataBase64.includes('data:audio')) {
         this.audioRecorded = recordData?.value?.recordDataBase64;
       }
-      else if(recordData?.value?.mimeType && recordData?.value?.recordDataBase64) {
+      else if (recordData?.value?.mimeType && recordData?.value?.recordDataBase64) {
         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)
-      
+
       const formData = new FormData();
       formData.append("blobFile", blob);
 
@@ -444,7 +449,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
   }
 
   viewDocument(file: any, url?: string) {
-    
+
     if (file.type == "application/webtrix") {
       this.openViewDocumentModal(file);
     }
@@ -595,7 +600,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
         IsRequired: "true",
       }
     });
-    
+
     this.popoverController.dismiss();
     if (window.innerWidth <= 1024) {
       const modal = await this.modalController.create({
@@ -629,7 +634,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     const blob = await base64.blob();
     const formData = new FormData();
     formData.append("blobFile", blob);
-    
+
 
     this.wsChatMethodsService.getDmRoom(roomId).send({
       file: {
@@ -709,7 +714,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
       resultType: CameraResultType.Base64,
       source: CameraSource.Photos
     });
-    
+
     //const imageData =  await this.fileToBase64Service.convert(file)
     //
 
@@ -746,17 +751,17 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
 
     const file: any = await this.fileService.getFileFromDevice(types);
 
-    
+
 
     if (file.type != "application/img" && file.type != "image/png" && file.type != "image/jpeg" && file.type != "image/gif") {
 
       const encodedData = btoa(JSON.stringify(await this.getBase64(file)));
       const blob = this.base64toBlob(encodedData, file.type)
-      
+
 
       const formData = new FormData();
       formData.append('blobFile', blob);
-      
+
 
       this.wsChatMethodsService.getDmRoom(roomId).send({
         file: {
@@ -772,7 +777,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
         temporaryData: formData
       });
     } else {
-      
+
     }
 
 
@@ -787,7 +792,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
         resolve(reader.result)
       };
       reader.onerror = function (error) {
-        
+
       };
     });
 
@@ -795,7 +800,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
 
   async openChatOptions(ev?: any) {
     const roomId = this.roomId
-    
+
 
     const popover = await this.popoverController.create({
       component: ChatOptionsPopoverPage,
@@ -810,7 +815,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     });
     await popover.present();
     popover.onDidDismiss().then(async (res) => {
-      
+
       if (res['data'] == 'meeting') {
         this.bookMeeting();
       }
@@ -837,11 +842,11 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     if (this.platform.is('desktop') || this.platform.is('mobileweb')) {
     } else {
       this.sqlservice.getAllChatMSG(roomId).then((msg: any) => {
-        
+
         let chatmsgArray = [];
         let array = []
         msg.forEach(element => {
-          
+
 
           let msgChat = {
             _id: element.Id,
@@ -861,7 +866,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
         });
 
 
-        
+
       })
     }
   }
@@ -943,27 +948,27 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
   }
 
   openFile(pdfString, filename, type) {
-    // const blob = this.b64toBlob(pdfString, type)
-    // let pathFile = ''
-    // const fileName = filename
-    // const contentFile = blob
-    // if (this.platform.is('ios')) {
-    //   pathFile = this.file.documentsDirectory
-    // } else {
-    //   pathFile = this.file.externalRootDirectory
-    // }
-    // 
-    // 
-    // 
-    // this.file
-    //   .writeFile(pathFile, fileName, contentFile, { replace: true })
-    //   .then(success => {
-    //     this.fileOpener
-    //       .open(pathFile + fileName, type)
-    //       .then(() => 
-    //       .catch(e => 
-    //   })
-    //   .catch(e => 
+    const blob = this.b64toBlob(pdfString, type)
+    let pathFile = ''
+    const fileName = filename
+    const contentFile = blob
+    if (this.platform.is('ios')) {
+      pathFile = this.file.documentsDirectory
+    } else {
+      pathFile = this.file.externalRootDirectory
+    }
+    
+    
+    
+    this.file
+      .writeFile(pathFile, fileName, contentFile, { replace: true })
+      .then(success => {
+        this.fileOpener
+          .open(pathFile + fileName, type)
+          .then(() => console.log())
+          .catch(e => console.error(e))
+      })
+      .catch(e => console.error(e))
   }
 
   downloadFileFromBrowser(fileName: string, data: any): void {
@@ -976,9 +981,9 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
 
 
   async openPreview(msg) {
-    
 
-    if(msg.file.type === "application/webtrix") {
+
+    if (msg.file.type === "application/webtrix") {
       this.viewDocument(msg.file, msg.attachments.image_url)
     } else {
 
@@ -992,21 +997,38 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
 
         if (this.platform.is('desktop') || this.platform.is('mobileweb')) {
 
-          this.downloadFileFromBrowser(msg.attachments[0].name, str)
-          /* const modal = await this.modalController.create({
-            component: ViewMediaPage,
-            cssClass: 'modal modal-desktop',
-            componentProps: {
-              image: str,
-              type: msg.file.type,
-              username: msg.u.name,
-              _updatedAt: msg._updatedAt
-            }
-          });
-          modal.present(); */
+          if (msg.file.type == "application/img") {
+            const modal = await this.modalController.create({
+              component: ViewMediaPage,
+              cssClass: 'modal modal-desktop',
+              componentProps: {
+                image: msg.attachments[0].image_url,
+                type: msg.file.type,
+                username: msg.u.name,
+                _updatedAt: msg._updatedAt
+              }
+            });
+            modal.present();
+          } else {
+            this.downloadFileFromBrowser(msg.attachments[0].name, str)
+          }
 
         } else {
-          this.openFile(str, msg.attachments[0].name, msg.file.type);
+          if (msg.file.type == "application/img") {
+            const modal = await this.modalController.create({
+              component: ViewMediaPage,
+              cssClass: 'modal modal-desktop',
+              componentProps: {
+                image: msg.attachments[0].image_url,
+                type: msg.file.type,
+                username: msg.u.name,
+                _updatedAt: msg._updatedAt
+              }
+            });
+            modal.present();
+          } else {
+            this.openFile(str, msg.attachments[0].name, msg.file.type);
+          }
         }
 
       }
@@ -1015,7 +1037,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
   }
 
   async audioPreview(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/group-messages/group-messages.page.ts

@@ -35,6 +35,7 @@ import { File } from '@awesome-cordova-plugins/file/ngx';
 import { FileOpener } from '@awesome-cordova-plugins/file-opener/ngx';
 import { SessionStore } from 'src/app/store/session.service';
 import { HttpErrorResponse } from '@angular/common/http';
+import { ViewMediaPage } from 'src/app/modals/view-media/view-media.page';
 
 
 /*
@@ -1102,35 +1103,55 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
 
   async openPreview(msg) {
 
+
     if (msg.file.type === "application/webtrix") {
       this.viewDocument(msg.file, msg.attachments.image_url)
     } else {
 
       if (!msg.attachments[0].image_url || msg.attachments[0].image_url === null || msg.attachments[0].image_url === '') {
         this.downloadFileMsg(msg)
+        //this.testDownlod(msg)
 
       } else {
-
         var str = msg.attachments[0].image_url;
         str = str.substring(1, ((str.length) - 1));
 
         if (this.platform.is('desktop') || this.platform.is('mobileweb')) {
-          this.downloadFileFromBrowser(msg.attachments[0].name, str)
-        } else if (this.platform.is('tablet')) {
-          this.openFile(str, msg.attachments[0].name, msg.file.type);
+
+          if (msg.file.type == "application/img") {
+            const modal = await this.modalController.create({
+              component: ViewMediaPage,
+              cssClass: 'modal modal-desktop',
+              componentProps: {
+                image: msg.attachments[0].image_url,
+                type: msg.file.type,
+                username: msg.u.name,
+                _updatedAt: msg._updatedAt
+              }
+            });
+            modal.present();
+          } else {
+            this.downloadFileFromBrowser(msg.attachments[0].name, str)
+          }
+
+        } else {
+          if (msg.file.type == "application/img") {
+            const modal = await this.modalController.create({
+              component: ViewMediaPage,
+              cssClass: 'modal modal-desktop',
+              componentProps: {
+                image: msg.attachments[0].image_url,
+                type: msg.file.type,
+                username: msg.u.name,
+                _updatedAt: msg._updatedAt
+              }
+            });
+            modal.present();
+          } else {
+            this.openFile(str, msg.attachments[0].name, msg.file.type);
+          }
         }
 
-        /* const modal = await this.modalController.create({
-          component: ViewMediaPage,
-          cssClass: 'modal modal-desktop',
-          componentProps: {
-            image: str,
-            type: msg.file.type,
-            username: msg.u.name,
-            _updatedAt: msg._updatedAt
-          }
-        });
-        modal.present(); */
       }
     }
 

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

@@ -34,6 +34,7 @@ import { SessionStore } from 'src/app/store/session.service';
 import { HttpErrorResponse } from '@angular/common/http';
 import { Howl } from 'howler';
 import { runInThisContext } from 'vm';
+import { ViewMediaPage } from 'src/app/modals/view-media/view-media.page';
 
 
 const IMAGE_DIR = 'stored-images';
@@ -1014,52 +1015,57 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
   }
 
   async openPreview(msg) {
-    
 
-    if(msg.file.type === "application/webtrix") {
+
+    if (msg.file.type === "application/webtrix") {
       this.viewDocument(msg.file, msg.attachments.image_url)
     } else {
 
       if (!msg.attachments[0].image_url || msg.attachments[0].image_url === null || msg.attachments[0].image_url === '') {
         this.downloadFileMsg(msg)
+        //this.testDownlod(msg)
 
-
-        /*  } else if (msg.file.type === "application/pdf") {
-
-
-           
-           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); */
-
-
-
-        //this.viewDocument(msg, msg.attachments.image_url)
       } else {
-
         var str = msg.attachments[0].image_url;
         str = str.substring(1, ((str.length) - 1));
 
         if (this.platform.is('desktop') || this.platform.is('mobileweb')) {
-          this.downloadFileFromBrowser(msg.attachments[0].name, str)
-        } else if (this.platform.is('tablet')) {
-          this.openFile(str, msg.attachments[0].name, msg.file.type);
+
+          if (msg.file.type == "application/img") {
+            const modal = await this.modalController.create({
+              component: ViewMediaPage,
+              cssClass: 'modal modal-desktop',
+              componentProps: {
+                image: msg.attachments[0].image_url,
+                type: msg.file.type,
+                username: msg.u.name,
+                _updatedAt: msg._updatedAt
+              }
+            });
+            modal.present();
+          } else {
+            this.downloadFileFromBrowser(msg.attachments[0].name, str)
+          }
+
+        } else {
+          if (msg.file.type == "application/img") {
+            const modal = await this.modalController.create({
+              component: ViewMediaPage,
+              cssClass: 'modal modal-desktop',
+              componentProps: {
+                image: msg.attachments[0].image_url,
+                type: msg.file.type,
+                username: msg.u.name,
+                _updatedAt: msg._updatedAt
+              }
+            });
+            modal.present();
+          } else {
+            this.openFile(str, msg.attachments[0].name, msg.file.type);
+          }
         }
 
-
-
-
       }
-
     }
 
   }