add preview media in publications

src/app/shared/publication/view-publications/publication-detail/publication-detail.page.html

@@ -25,8 +25,8 @@
       </ion-refresher-content>
     </ion-refresher>
     <div class="post-item px-20">
-      <div *ngIf="publication.FileBase64.length > 30" class="post-img">
-        <img src="{{publication.FileBase64}}" alt="image" tappable (click)="openPreview(publication.FileBase64)">
+      <div (click)="openPreview(publication)" *ngIf="publication.FileBase64.length > 30" class="post-img">
+        <img src="{{publication.FileBase64}}" alt="image" tappable>
       </div>
       <div *ngIf="publication.FileBase64.length < 30" class="post-img">
         <img src="/assets/icon/icon-no-image.svg" alt="image">

src/app/shared/publication/view-publications/publication-detail/publication-detail.page.ts

@@ -8,6 +8,7 @@ import { ToastService } from 'src/app/services/toast.service';
 import { BadRequestPage } from 'src/app/shared/popover/bad-request/bad-request.page';
 import { SuccessMessagePage } from 'src/app/shared/popover/success-message/success-message.page';
 import { ThemeService } from 'src/app/services/theme.service'
+import { ViewMediaPage } from 'src/app/modals/view-media/view-media.page';
 
 @Component({
   selector: 'app-publication-detail-shared',
@@ -32,7 +33,7 @@ export class PublicationDetailPage implements OnInit {
     private toastService: ToastService,
     public ThemeService: ThemeService
     ) {
-      
+
       /* this.folderId = this.navParams.get('folderIdId'); */
       this.publication = {
         DateIndex: null,
@@ -50,7 +51,7 @@ export class PublicationDetailPage implements OnInit {
 
   ngOnInit() {
     console.log(this.folderId);
-    
+
     /* console.log(this.publication.FileBase64); */
     this.getPublicationDetail();
   }
@@ -133,22 +134,26 @@ export class PublicationDetailPage implements OnInit {
 
   }
 
-  openPreview(imageUrl:string){
-    this.modalController.create({
-      component: ImageModalPage,
-      componentProps: {
-        imageUrl:imageUrl,
-      }
-    }).then(modal => modal.present());
-  }
-
   async goBack(){
 
     this.goBackToViewPublications.emit();
   }
 
+  async openPreview(item) {
+    const modal = await this.modalController.create({
+      component:  ViewMediaPage,
+      cssClass: 'modal modal-desktop',
+      componentProps: {
+        image: item.FileBase64,
+        username: item.Title,
+        _updatedAt: item.DatePublication
+      }
+    });
+    modal.present();
+  }
+
+
 
-