fix media preview for tablet and desktop

src/app/app-routing.module.ts

@@ -223,6 +223,10 @@ const routes = [
   {
     path: 'custom-image-cache',
     loadChildren: () => import('./services/file/custom-image-cache/custom-image-cache.module').then( m => m.CustomImageCachePageModule)
+  },
+  {
+    path: 'view-media',
+    loadChildren: () => import('./modals/view-media/view-media.module').then( m => m.ViewMediaPageModule)
   },
 
 

src/app/modals/view-media/view-media-routing.module.ts

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

src/app/modals/view-media/view-media.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ViewMediaPageRoutingModule } from './view-media-routing.module';
+
+import { ViewMediaPage } from './view-media.page';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    FontAwesomeModule,
+    ViewMediaPageRoutingModule
+  ],
+  declarations: [ViewMediaPage]
+})
+export class ViewMediaPageModule {}

src/app/modals/view-media/view-media.page.html

@@ -0,0 +1,22 @@
+<ion-header class="ion-no-border" translucent>
+  <div class="main-header d-flex align-items-center">
+    <div class= "left cursor-pointer" (click)="close()">
+      <button class="btn-no-color" (click)="close()">
+        <fa-icon icon="chevron-left" class="header-top-btn font-awesome-1 font-35"></fa-icon>
+      </button>
+    </div>
+    <div  class="middle-container">
+      <div class="middle">
+        <ion-label class="title">{{name}}<span class="font-15">, {{_updatedAt | date}}</span>
+        </ion-label>
+      </div>
+    </div>
+  </div>
+</ion-header>
+<ion-content fullscreen>
+  <div class="media d-flex align-items-center justify-center">
+    <div class="media-content w-100 d-flex align-items-center justify-center">
+      <img src="{{image}}"/>
+    </div>
+  </div>
+</ion-content>

src/app/modals/view-media/view-media.page.scss

@@ -0,0 +1,70 @@
+.main-header{
+  width: 100%; /* 400px */
+  height: 100%;
+  font-family: Roboto;
+  border-top-left-radius: 25px;
+  border-top-right-radius: 25px;
+  background-color: #fff;
+  overflow:hidden;
+  padding: 30px 20px 5px 20px;
+  color:#000;
+  transform: translate3d(0, 1px, 0);
+
+  .left{
+    width: fit-content;
+    float: left;
+    //font-size: 35px;
+    overflow: hidden;
+
+    .header-top-btn{
+      background: transparent;
+      font-size: 25px !important;
+      font-weight: 100 !important;
+      /* color: #0782c9; */
+      color: #42b9fe;
+    }
+  }
+
+  .middle-container{
+    overflow: auto;
+    width:calc(100% - 45px);
+    height: auto;
+
+    .middle{
+      padding: 0!important;
+      float: left;
+      width:calc(100% - 77px);
+      margin: 0px 0 0 10px;
+      display: flex;
+      align-items: center;
+
+      .title{
+        font-size: 25px;
+        white-space: nowrap;
+        overflow: hidden !important;
+        text-overflow: ellipsis !important;
+        float: left;
+      }
+    }
+  }
+}
+
+.media {
+  background-color: #ebebeb;
+  padding: 10px !important;
+  height: 100% !important;
+  overflow: auto !important;
+
+  .media-content{
+    height: 100% !important;
+    overflow: auto !important;
+    img{
+      width: fit-content !important;
+      height: 100% !important;
+    }
+  }
+}
+
+
+
+

src/app/modals/view-media/view-media.page.spec.ts

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

src/app/modals/view-media/view-media.page.ts

@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { ModalController, NavParams } from '@ionic/angular';
+
+@Component({
+  selector: 'app-view-media',
+  templateUrl: './view-media.page.html',
+  styleUrls: ['./view-media.page.scss'],
+})
+export class ViewMediaPage implements OnInit {
+
+  image: any;
+  name: string
+  _updatedAt: string
+
+  constructor(
+    private modalController: ModalController,
+    private navParams:NavParams,
+  ) {
+    this.image = this.navParams.get('image')
+    this.name = this.navParams.get('username')
+    this._updatedAt = this.navParams.get('_updatedAt')
+  }
+
+  ngOnInit() {
+  }
+
+  close(){
+    this.modalController.dismiss()
+  }
+}

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

@@ -60,7 +60,9 @@
           <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" (click)="imageSize(file.image_url)">
+              <div (click)="openPreview(msg)">
+                <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image">
+              </div>
               <div>
                 <div>
                   <div class="file">
@@ -138,7 +140,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>

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

@@ -24,6 +24,7 @@ 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 { ViewMediaPage } from 'src/app/modals/view-media/view-media.page';
 
 const IMAGE_DIR = 'stored-images';
 
@@ -639,15 +640,13 @@ touchStart(card) {
 
   async openPreview(msg) {
     const modal = await this.modalController.create({
-      component:  PreviewCameraPage,
+      component:  ViewMediaPage,
       cssClass: 'modal modal-desktop',
       componentProps: {
         image: msg.attachments[0].image_url,
         username: msg.u.name,
         _updatedAt: msg._updatedAt,
       }
-
-
     });
     modal.present();
   }

src/app/pages/publications/view-publications/view-publications.page.scss

@@ -45,8 +45,6 @@
     width: 100%; /* 400px */
     height: 100%;
     font-family: Roboto;
-    border-top-left-radius: 25px;
-    border-top-right-radius: 25px;
     background-color: #fff;
     overflow:hidden;
     padding: 25px 20px 0px 20px;
@@ -96,9 +94,11 @@
     /* padding: 0!important; */
     float: left;
     margin: 2.5px 0 0 5px;
+    color: #000 !important;
   }
   .title{
     font-size: 25px;
+    color: #000 !important;
   }
 
   .actions-icon{
@@ -126,7 +126,7 @@
   }
   .post-img{
       width: 100%;
-      height: 400px;
+      //height: 400px;
       margin: 0 auto;
       border-radius: 0px!important;
       overflow: hidden;

src/app/pages/publications/view-publications/view-publications.page.ts

@@ -116,17 +116,12 @@ export class ViewPublicationsPage implements OnInit {
   }
 
   getPublicationDetail() {
-
-    setTimeout(() => {
-
-      let allActions = this.publicationEventFolderStorage.list.concat(this.publicationTravelFolderService.list)
-      this.item = allActions.find((e) => e.ProcessId == this.folderId);
-      this.publicationDitails = this.item
-      console.log('item', this.item)
-
-    }, 100);
-
+    this.publications.GetPresidentialAction(this.folderId).subscribe(res=>{
+      console.log(res);
+      this.item = res;
+    });
   }
+
 // goes to fork
   // getPublicationsIds() {
 
@@ -177,14 +172,14 @@ export class ViewPublicationsPage implements OnInit {
       this.showLoader = false;
 
       /*  this.publicationList = new Array();
- 
+
        res.forEach(element => {
          console.log('getPublications', element)
          let item: Publication = this.publicationPipe.itemList(element)
          this.publicationList.push(item);
        });
        this.sqliteservice.updateactions(this.folderId, JSON.stringify(this.publicationList));
- 
+
        this.publicationListStorage.add(folderId, this.publicationList)
        this.getpublication = this.publicationList; */
     });
@@ -232,8 +227,8 @@ export class ViewPublicationsPage implements OnInit {
     forkJoin([
       this.getPublicationsIds(),
       this.getPublications(),
-      
-      
+
+
     ]).subscribe(allResults =>{
       this.publicationList = allResults[2]
     })

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

@@ -53,7 +53,10 @@
           <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" (click)="imageSize(file.image_url)"> -->
+                <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image">
+              </div>
                 <div>
                   <div class="file">
                     <!-- <canvas id="pdf_canvas"></canvas> -->

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

@@ -17,6 +17,7 @@ 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';
+import { ViewMediaPage } from 'src/app/modals/view-media/view-media.page';
 
 @Component({
   selector: 'app-messages',
@@ -608,8 +609,8 @@ touchStart(card) {
 
   async openPreview(msg) {
     const modal = await this.modalController.create({
-      component:  PreviewCameraPage,
-      cssClass: 'transparent-modal',
+      component:  ViewMediaPage,
+      cssClass: 'modal modal-desktop',
       componentProps: {
         image: msg.attachments[0].image_url,
         username: msg.u.username,