save

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

@@ -44,7 +44,7 @@
       <ion-label>A conversa original mantêm-se como chat individual</ion-label>
     </div>
 
-    <div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of messages; let last = last" (click)="openPreview(msg)">
+    <div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of messages; let last = last">
       <div class="message-item incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45" *ngIf="msg.t != 'r' && msg.t != 'ul' && msg.t != 'ru'" >
         <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>
@@ -60,7 +60,9 @@
           <ion-label>{{msg.msg}}</ion-label>
           <div *ngIf="msg.attachments" class="message-attachments">
             <div *ngFor="let file of msg.attachments">
-              <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image">
+              <div (click)="openPreview(msg)">
+                <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image">
+              </div>
               <div>
                 <div>
                   <div class="file">

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

@@ -20,6 +20,7 @@ import { FileService } from 'src/app/services/functions/file.service';
 import { ViewDocumentPage } from 'src/app/modals/view-document/view-document.page';
 import { ThemeService } from 'src/app/services/theme.service'
 import { PreviewCameraPage } from 'src/app/modals/preview-camera/preview-camera.page';
+import { ViewMediaPage } from 'src/app/modals/view-media/view-media.page';
 
 /*
 import * as pdfjsLib from 'pdfjs-dist';
@@ -769,7 +770,7 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
     }
   }
 
-  
+
   sliderOpts = {
     zoom: false,
     slidesPerView: 1.5,
@@ -778,7 +779,7 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
   };
   zoomActive = false;
 zoomScale = 1;
- 
+
 sliderZoomOpts = {
   allowSlidePrev: false,
   allowSlideNext: false,
@@ -786,44 +787,44 @@ sliderZoomOpts = {
     maxRatio: 5
   },
   on: {
-    zoomChange: (scale, imageEl, slideEl) => {        
+    zoomChange: (scale, imageEl, slideEl) => {
       this.zoomActive = true;
       this.zoomScale = scale/5;
-      this.changeDetectorRef.detectChanges();         
+      this.changeDetectorRef.detectChanges();
     }
   }
 }
- 
+
 async touchEnd(zoomslides: IonSlides, card) {
   // Zoom back to normal
   const slider = await zoomslides.getSwiper();
   const zoom = slider.zoom;
   zoom.out();
- 
+
   // Card back to normal
   card.el.style['z-index'] = 9;
- 
+
   this.zoomActive = false;
   this.changeDetectorRef.detectChanges();
 }
- 
+
 touchStart(card) {
   // Make card appear above backdrop
   card.el.style['z-index'] = 11;
 }
 
-  async openPreview(img) {
-    const modal = await this.modalController.create({
-      component:  PreviewCameraPage,
-      cssClass: 'transparent-modal',
-      componentProps: {
-        image: img.attachments[0].image_url,
-        username: img.u.username,
-        _updatedAt: img._updatedAt
-      }
-    });
-    modal.present();
-  }
+async openPreview(msg) {
+  const modal = await this.modalController.create({
+    component:  ViewMediaPage,
+    cssClass: 'modal modal-desktop',
+    componentProps: {
+      image: msg.attachments[0].image_url,
+      username: msg.u.name,
+      _updatedAt: msg._updatedAt,
+    }
+  });
+  modal.present();
+}
 
 }