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)
+          if (msg.file.type == "application/img") {
-          /* const modal = await this.modalController.create({
+            const modal = await this.modalController.create({
               component: ViewMediaPage,
               cssClass: 'modal modal-desktop',
               componentProps: {
-              image: str,
+                image: msg.attachments[0].image_url,
                 type: msg.file.type,
                 username: msg.u.name,
                 _updatedAt: msg._updatedAt
               }
             });
-          modal.present(); */
+            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

@@ -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';
@@ -132,6 +135,8 @@ 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');
@@ -943,27 +948,27 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
   }
 
   openFile(pdfString, filename, type) {
-    // const blob = this.b64toBlob(pdfString, type)
+    const blob = this.b64toBlob(pdfString, type)
-    // let pathFile = ''
+    let pathFile = ''
-    // const fileName = filename
+    const fileName = filename
-    // const contentFile = blob
+    const contentFile = blob
-    // if (this.platform.is('ios')) {
+    if (this.platform.is('ios')) {
-    //   pathFile = this.file.documentsDirectory
+      pathFile = this.file.documentsDirectory
-    // } else {
+    } else {
-    //   pathFile = this.file.externalRootDirectory
+      pathFile = this.file.externalRootDirectory
-    // }
+    }
-    // 
+    
-    // 
+    
-    // 
+    
-    // this.file
+    this.file
-    //   .writeFile(pathFile, fileName, contentFile, { replace: true })
+      .writeFile(pathFile, fileName, contentFile, { replace: true })
-    //   .then(success => {
+      .then(success => {
-    //     this.fileOpener
+        this.fileOpener
-    //       .open(pathFile + fileName, type)
+          .open(pathFile + fileName, type)
-    //       .then(() => 
+          .then(() => console.log())
-    //       .catch(e => 
+          .catch(e => console.error(e))
-    //   })
+      })
-    //   .catch(e => 
+      .catch(e => console.error(e))
   }
 
   downloadFileFromBrowser(fileName: string, data: any): void {
@@ -992,22 +997,39 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
 
         if (this.platform.is('desktop') || this.platform.is('mobileweb')) {
 
-          this.downloadFileFromBrowser(msg.attachments[0].name, str)
+          if (msg.file.type == "application/img") {
-          /* const modal = await this.modalController.create({
+            const modal = await this.modalController.create({
               component: ViewMediaPage,
               cssClass: 'modal modal-desktop',
               componentProps: {
-              image: str,
+                image: msg.attachments[0].image_url,
                 type: msg.file.type,
                 username: msg.u.name,
                 _updatedAt: msg._updatedAt
               }
             });
-          modal.present(); */
+            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);
           }
+        }
 
       }
     }

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);
-        }
 
-        /* const modal = await this.modalController.create({
+          if (msg.file.type == "application/img") {
+            const modal = await this.modalController.create({
               component: ViewMediaPage,
               cssClass: 'modal modal-desktop',
               componentProps: {
-            image: str,
+                image: msg.attachments[0].image_url,
                 type: msg.file.type,
                 username: msg.u.name,
                 _updatedAt: msg._updatedAt
               }
             });
-        modal.present(); */
+            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);
+          }
+        }
+
       }
     }
 

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';
@@ -1022,45 +1023,50 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
 
       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')) {
+
+          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 (this.platform.is('tablet')) {
+          }
+
+        } 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);
           }
-
-
-
-
         }
 
       }
+    }
 
   }