Merge branch 'developer' of https://bitbucket.org/equilibriumito/gabinete-digital into developer

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>
@@ -60,7 +60,7 @@
           <ion-label>{{msg.msg}}</ion-label>
           <div *ngIf="msg.attachments" class="message-attachments">
             <div *ngFor="let file of msg.attachments let i = index">
-              <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image">
+              <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image" (click)="imageSize(file.image_url)">
               <div>
                 <div>
                   <div class="file">
@@ -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,11 @@ 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';
+// import { SocialSharing } from '@ionic-native/social-sharing/ngx';
+//import { Share } from '@capacitor/share';
+
+const IMAGE_DIR = 'stored-images';
 
 @Component({
   selector: 'app-messages',
@@ -36,8 +41,9 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
 /*   @ViewChild('messageContainer') messageContainer: ElementRef; */
   @ViewChild('rectangle') private rectangle: ElementRef;
 
+  canvas: any
+  ctx: any
   loggedUser: any;
-
   message = '';
   messages:any;
   userPresence='';
@@ -83,7 +89,9 @@ 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,
+    // private socialSharing: SocialSharing
   ) {
     this.loggedUser = authService.ValidatedUserChat['data'];
     this.roomId = this.navParams.get('roomId');
@@ -101,6 +109,11 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
 
     this.loadFiles();
     VoiceRecorder.requestAudioRecordingPermission();
+    Filesystem.mkdir({
+      path: IMAGE_DIR,
+      directory: Directory.Data,
+      recursive: true
+    });
   }
 
   ngAfterViewInit() {
@@ -583,8 +596,95 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     });
   }
 
-  openPreview(){
+
+  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();
+  }
+
+
+  imageSize(img){
+    var canvas = document.createElement('canvas');
+    var ctx = canvas.getContext('2d');
+    canvas.width=300
+    canvas.height=234
+    ctx.drawImage(img.attachments[0].image_url, 0, 0, 300, 234);
+    document.body.appendChild(canvas);
+}
+
+getPicture(img){
+  var canvas = document.createElement('canvas');
+  var ctx = canvas.getContext('2d');
+  canvas.width=300
+  canvas.height=234
+  ctx.drawImage(img.attachments[0].image_url, 0, 0, 300, 234);
+  document.body.appendChild(canvas);
 
   }
 
+  // async ShareEmail(msg){
+  //   // Check if sharing via email is supported
+  //   await Share.share({
+  //     title:  msg.u.username,
+  //     text:  msg._updatedAt,
+  //     url: msg.attachments[0].image_url,
+  //     dialogTitle: 'Share with buddies',
+  //   });
+  // }
 }
+
+
+