add preview media in publications

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

@@ -23,7 +23,7 @@
       </div>
 
       <div class="post-item overflow-y-auto">
-        <div *ngIf="publication.FileBase64.length > 30" class="post-img">
+        <div (click)="openPreview(publication)" *ngIf="publication.FileBase64.length > 30" class="post-img">
           <img src="{{publication.FileBase64}}" alt="image" >
         </div>
         <div *ngIf="publication.FileBase64.length < 30" class="post-img">

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

@@ -8,6 +8,7 @@ import { ImageModalPage } from '../../gallery/image-modal/image-modal.page';
 import { NewPublicationPage } from '../../new-publication/new-publication.page';
 import { Location } from '@angular/common';
 import { ThemeService } from 'src/app/services/theme.service'
+import { ViewMediaPage } from 'src/app/modals/view-media/view-media.page';
 
 
 @Component({
@@ -122,7 +123,7 @@ export class PublicationDetailPage implements OnInit {
     }  finally {
       loader.remove()
     }
-    
+
 
   }
 
@@ -146,13 +147,17 @@ export class PublicationDetailPage implements OnInit {
     });
   }
 
-  openPreview(imageUrl:string){
-    this.modalController.create({
-      component: ImageModalPage,
+  async openPreview(item) {
+    const modal = await this.modalController.create({
+      component:  ViewMediaPage,
+      cssClass: 'modal modal-desktop',
       componentProps: {
-        imageUrl:imageUrl,
+        image: item.FileBase64,
+        username: item.Title,
+        _updatedAt: item.DatePublication
       }
-    }).then(modal => modal.present());
+    });
+    modal.present();
   }