imageWorkaround

src/app/app-routing.module.ts

@@ -211,6 +211,10 @@ const routes = [
   {
     path: 'group-icons',
     loadChildren: () => import('./modals/group-icons/group-icons.module').then( m => m.GroupIconsPageModule)
+  },
+  {
+    path: 'video-allowed',
+    loadChildren: () => import('./modals/video-allowed/video-allowed.module').then( m => m.VideoAllowedPageModule)
   },
 
 

src/app/modals/group-icons/group-icons.page.html

@@ -4,33 +4,11 @@
     </ion-card-header>
     <ion-card-content > 
      <ion-row>
-        <ion-col size="3" class="ion-text-center">
-          <ion-button (click)="removerIcone()" fill="clear" color="light">
-            <!-- <ion-icon name="remove" slot="start"></ion-icon> -->
-            <ion-icon class="redla" name="trash-outline"></ion-icon>
-          </ion-button>
-        </ion-col>
-        <ion-col size="3" class="ion-text-center">
-          <ion-button (click)="openGaleria()" fill="clear" color="light">
-            <!-- <ion-icon name="remove" slot="start"></ion-icon> -->
-            <ion-icon class="redla" name="flower-outline"></ion-icon>
-          </ion-button>
-        </ion-col>
-        <ion-col size="3" class="ion-text-center">
-          <ion-button (click)="OpenCamera()" fill="clear" color="light">
-           
-            <ion-icon  class="redla" name="camera-outline"></ion-icon>
-          
-          </ion-button>
-        </ion-col>
-        <ion-col size="3" class="ion-text-center">
-          <ion-button (click)="pesquizarWeb()" fill="clear" color="light">
-            <ion-icon class="redla" name="search-outline"></ion-icon>
-          
-
-          </ion-button>
-        </ion-col>
+       <ion-item>Iniciar Video Chamada?</ion-item>
       </ion-row>
+      <ion-row>
+        <ion-item>Iniciar Video Chamada?</ion-item>
+       </ion-row>
     </ion-card-content>
   </ion-card>
 

src/app/modals/preview-camera/preview-camera.page.html

@@ -28,9 +28,10 @@
 <ion-footer color="light">
   <ion-row>
     <ion-col size="3" class="ion-text-center">
-      <ion-button (click)="zoom(false)" fill="clear" color="light">
+      <ion-button (click)="close()" fill="clear" color="light">
         <!-- <ion-icon name="remove" slot="start"></ion-icon> -->
-        <ion-icon class="redla" name="chatbox-outline"></ion-icon>
+        
+        <ion-icon  name="chatbox"></ion-icon>
       </ion-button>
     </ion-col>
     <ion-col size="3" class="ion-text-center">
@@ -41,15 +42,15 @@
       </ion-button>
     </ion-col>
     <ion-col size="3" class="ion-text-center">
-      <ion-button (click)="close()" fill="clear" color="light">
+      <ion-button (click)="getIconGallery()" fill="clear" color="light">
        
-        <ion-icon class="redla" name="close-circle-outline"></ion-icon>
+        <ion-icon  name="videocam"></ion-icon>
       
       </ion-button>
     </ion-col>
     <ion-col size="3" class="ion-text-center">
       <ion-button (click)="zoom(true)" fill="clear" color="light">
-        <ion-icon class="redla" name="alert-circle-outline"></ion-icon>
+        <ion-icon class="redla" name="alert-circle"></ion-icon> 
       
       </ion-button>
     </ion-col>

src/app/modals/preview-camera/preview-camera.page.scss

@@ -8,8 +8,9 @@ ion-slides {
 
 .redla{
 
-    color: rgb(255, 38, 0);
-    // background-color: rgb(255, 72, 0);
+    color: rgb(250, 248, 248);
+    background-color: rgb(255, 187, 0);
+    border-radius: 120px;
 }
 
 .cardconteudo {
@@ -25,4 +26,28 @@ float: right;
 }
 .center{
     clear: both;
-    }
+    }
+
+
+ circle-xmark-solid{
+
+    // position: relative;
+    width: 512px;
+    height: 515px;
+    position: absolute;
+    left: 0%;
+    right: 0%;
+    top: 0%;
+    bottom: 0%;
+
+    background: #FCD13A;
+
+
+ }
+
+
+
+
+
+/* Vector */
+

src/app/modals/preview-camera/preview-camera.page.ts

@@ -76,8 +76,11 @@ async getIconGallery(){
             });
     modal.present();
   }
+
+  openChat(){
+
+    
+  }
 }
 
 
-
-

src/app/modals/video-allowed/video-allowed-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { VideoAllowedPage } from './video-allowed.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: VideoAllowedPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class VideoAllowedPageRoutingModule {}

src/app/modals/video-allowed/video-allowed.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { VideoAllowedPageRoutingModule } from './video-allowed-routing.module';
+
+import { VideoAllowedPage } from './video-allowed.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    VideoAllowedPageRoutingModule
+  ],
+  declarations: [VideoAllowedPage]
+})
+export class VideoAllowedPageModule {}

src/app/modals/video-allowed/video-allowed.page.html

@@ -0,0 +1,9 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>videoAllowed</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+</ion-content>

src/app/modals/video-allowed/video-allowed.page.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { VideoAllowedPage } from './video-allowed.page';
+
+describe('VideoAllowedPage', () => {
+  let component: VideoAllowedPage;
+  let fixture: ComponentFixture<VideoAllowedPage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ VideoAllowedPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(VideoAllowedPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modals/video-allowed/video-allowed.page.ts

@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-video-allowed',
+  templateUrl: './video-allowed.page.html',
+  styleUrls: ['./video-allowed.page.scss'],
+})
+export class VideoAllowedPage implements OnInit {
+  modalController: any;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  dismiss() {
+    // using the injected ModalController this page
+    // can "dismiss" itself and optionally pass back data
+    this.modalController.dismiss({
+      'dismissed': true
+    });
+  }
+}
+
+

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

@@ -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">

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

@@ -642,11 +642,22 @@ touchStart(card) {
       componentProps: {
         image: msg.attachments[0].image_url,
         username: msg.u.username,
-        _updatedAt: msg._updatedAt
+        _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);
+}
 }
 
 

src/app/pages/publications/new-publication/new-publication.page.html

@@ -29,7 +29,7 @@
         <ion-item lines="none">
           <ion-thumbnail slot="start">
           
-              <ion-img [(ngModel)]="capturedImage" name="image" ngDefaultControl [src]="photo" (click)="openPreview(photo)" ></ion-img>
+              <ion-img [(ngModel)]="capturedImage" name="image" ngDefaultControl [src]="capturedImage" (click)="imageSize(capturedImage)" ></ion-img>
               <ion-row>
                 <ion-col>
                   <img src="" #imageElement/>

src/app/pages/publications/new-publication/new-publication.page.ts

@@ -116,6 +116,15 @@ export class NewPublicationPage implements OnInit {
 
   }
 
+  imageSize(image){
+      var canvas = document.createElement('canvas');
+      var ctx = canvas.getContext('2d');
+      canvas.width=300
+      canvas.height=234
+      ctx.drawImage(image, 0, 0, 300, 234);
+      document.body.appendChild(canvas);
+  }
+
   convertBlobToBase64 = (blob: Blob) => new Promise((resolve, reject) => {
     const reader = new FileReader;
     reader.onerror = reject;
@@ -379,7 +388,6 @@ export class NewPublicationPage implements OnInit {
 
 
 
-
   async selectImage() {
     const image = await Camera.getPhoto({
       quality: 50,
@@ -393,6 +401,8 @@ export class NewPublicationPage implements OnInit {
     }
   }
 
+  
+
   // Create a new file from a capture image
   async saveImage(photo: Photo) {
     const base64Data = await this.readAsBase64(photo);
@@ -475,4 +485,9 @@ export class NewPublicationPage implements OnInit {
     this.capturedImage = this.images[0].data
     //}
   }
+
+  
+
+  
+
 }

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">
+    <div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of messages; let last = last" (click)="openPreview(msg)">
       <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>

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

@@ -1,5 +1,5 @@
-import { Component, OnChanges, OnInit, Input, SimpleChanges, Output, EventEmitter, ViewChild, ElementRef, AfterViewChecked, AfterViewInit, OnDestroy} from '@angular/core';
-import { ActionSheetController, AnimationController, MenuController, ModalController, PopoverController } from '@ionic/angular';
+import { Component, OnChanges, OnInit, Input, SimpleChanges,ChangeDetectorRef,Output, EventEmitter, ViewChild, ElementRef, AfterViewChecked, AfterViewInit, OnDestroy} from '@angular/core';
+import { ActionSheetController, AnimationController, IonSlides, MenuController, ModalController, PopoverController } from '@ionic/angular';
 import { AlertService } from 'src/app/services/alert.service';
 import { AuthService } from 'src/app/services/auth.service';
 import { ChatService } from 'src/app/services/chat.service';
@@ -19,6 +19,7 @@ import { ProcessesService } from 'src/app/services/processes.service';
 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 * as pdfjsLib from 'pdfjs-dist';
@@ -86,7 +87,8 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
     private fileToBase64Service: FileToBase64Service,
     private processesService: ProcessesService,
     private fileService: FileService,
-    public ThemeService: ThemeService
+    public ThemeService: ThemeService,
+    private changeDetectorRef: ChangeDetectorRef
   ) {
     this.loggedUserChat = authService.ValidatedUserChat['data'];
     this.isGroupCreated = true;
@@ -767,7 +769,61 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
     }
   }
 
+  
+  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(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();
+  }
 
 }
 

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

@@ -37,7 +37,7 @@
     </ion-refresher-content>
   </ion-refresher>
   <div class="messages" #scrollMe>
-    <div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of chatMessageStore.message[roomId]; let last = last">
+    <div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of chatMessageStore.message[roomId]; let last = last" (click)="openPreview(msg)">
       <div class='message-item incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45'>
         <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>

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

@@ -1,5 +1,5 @@
-import { AfterViewChecked, AfterViewInit, Component, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
-import { AnimationController, GestureController, ModalController, PopoverController } from '@ionic/angular';
+import { AfterViewChecked, AfterViewInit, Component, ElementRef,ChangeDetectorRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
+import { AnimationController, GestureController, IonSlides, ModalController, PopoverController } from '@ionic/angular';
 import { AlertService } from 'src/app/services/alert.service';
 import { AuthService } from 'src/app/services/auth.service';
 import { ChatService } from 'src/app/services/chat.service';
@@ -16,6 +16,7 @@ import { FileService } from 'src/app/services/functions/file.service';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 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';
 
 @Component({
   selector: 'app-messages',
@@ -71,7 +72,8 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     private fileService: FileService,
     private gestureController: GestureController,
     private http:HttpClient,
-    public ThemeService: ThemeService
+    public ThemeService: ThemeService,
+    private changeDetectorRef: ChangeDetectorRef
   ) {
     this.loggedUser = authService.ValidatedUserChat['data'];
 
@@ -553,7 +555,61 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     this.serverLongPull();
 
   });
+  }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();
+  }
+}
+
+
+