Git pull made

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

@@ -50,8 +50,8 @@
   </ion-refresher> -->
   <div (click)="handleClick()" class="messages" #scrollMe>
     <div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of chatMessageStore.message[roomId]; let last = last"
-    [class.messages-list-item-wrapper-active]="msg._id == selectedMsgId">
-      <div (press)="handlePress(msg._id)" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}'>
+    [class.messages-list-item-wrapper-active]="msg._id == selectedMsgId"  >
+      <div (press)="handlePress(msg._id)" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}' (click)="openPreview(msg)">
         <div class="title">
           <ion-label>{{msg.u.name}}</ion-label>
           <span class="time">{{showDateDuration(msg._updatedAt)}}</span>
@@ -138,6 +138,7 @@
   <button (click)="stopRecording()">Stop Recording</button> -->
   <div class="container width-100 d-flex">
     <div>
+    
       <button 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>
@@ -163,4 +164,5 @@
       </button>
     </div>
   </div>
+
 </ion-footer>

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

@@ -1,6 +1,6 @@
-import { AfterViewChecked, AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { AfterViewChecked, AfterViewInit, ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router'
-import { GestureController, Gesture, ModalController, NavParams, PopoverController } from '@ionic/angular';
+import { GestureController, Gesture, ModalController, NavParams, PopoverController, IonSlides } from '@ionic/angular';
 import { map } from 'rxjs/operators';
 import { ViewDocumentPage } from 'src/app/modals/view-document/view-document.page';
 import { EventPerson } from 'src/app/models/eventperson.model';
@@ -23,6 +23,7 @@ import { ThemeService } from 'src/app/services/theme.service'
 import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
 import { VoiceRecorder, VoiceRecorderPlugin, RecordingData, GenericResponse, CurrentRecordingStatus } from 'capacitor-voice-recorder';
 import { Haptics, ImpactStyle } from '@capacitor/haptics';
+import { PreviewCameraPage } from 'src/app/modals/preview-camera/preview-camera.page';
 
 const IMAGE_DIR = 'stored-images';
 
@@ -85,7 +86,8 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     private fileService: FileService,
     private gestureController: GestureController,
     private processes: ProcessesService,
-    public ThemeService: ThemeService
+    public ThemeService: ThemeService,
+    private changeDetectorRef: ChangeDetectorRef
   ) {
     this.loggedUser = authService.ValidatedUserChat['data'];
     this.roomId = this.navParams.get('roomId');
@@ -590,4 +592,62 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     });
   }
 
+  
+  sliderOpts = {
+    zoom: false,
+    slidesPerView: 1.5,
+    spaceBetween: 20,
+    centeredSlides: true
+  };
+  zoomActive = false;
+zoomScale = 1;
+ 
+sliderZoomOpts = {
+  allowSlidePrev: false,
+  allowSlideNext: false,
+  zoom: {
+    maxRatio: 5
+  },
+  on: {
+    zoomChange: (scale, imageEl, slideEl) => {        
+      this.zoomActive = true;
+      this.zoomScale = scale/5;
+      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(msg) {
+    const modal = await this.modalController.create({
+      component:  PreviewCameraPage,
+      cssClass: 'transparent-modal',
+      componentProps: {
+        image: msg.attachments[0].image_url,
+        username: msg.u.username,
+        _updatedAt: msg._updatedAt
+      }
+    });
+    modal.present();
+  }
+}
+
+
+