changes and changes

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

@@ -32,15 +32,25 @@
 
         <div class="d-flex justify-content-between">
           <div class="d-flex">
-            <ion-thumbnail slot="start">
+            <ion-thumbnail *ngFor="let seleted of seletedContent.slice(0, displayLimit), let i = index" lot="start">
 
-              <ion-img *ngIf="fileType == 'image/jpeg'" [(ngModel)]="capturedImage" name="image" ngDefaultControl [src]="capturedImage" (click)="imageSize(capturedImage)" ></ion-img>
+              <ion-img *ngIf="checkFileType.checkFileType(seleted.fileType) == 'image'" [(ngModel)]="capturedImage"
+                name="image" ngDefaultControl [src]="'data:image/jpg;base64,' + seleted.base64"
+                (click)="imageSize(capturedImage)"></ion-img>
 
-              <video *ngIf="fileType == 'video'" width="70" height="70" controls="controls" preload="metadata" autoplay="autoplay" webkit-playsinline="webkit-playsinline">
-                <source type="video/mp4" [src]="capturedVideo">
+              <video *ngIf="checkFileType.checkFileType(seleted.fileType)  == 'video'" width="70" height="70"
+                controls="controls" preload="metadata" autoplay="autoplay" webkit-playsinline="webkit-playsinline">
+                <source type="video/mp4" [src]="'data:video/mp4;base64,' + capturedVideo">
               </video>
 
             </ion-thumbnail>
+            <!-- Display the blurred image and count if there are more images -->
+            <ion-thumbnail *ngIf="seletedContent.length > displayLimit" lot="start">
+              <ion-img [src]="'data:image/jpg;base64,' + seletedContent[displayLimit - 1].base64"
+                style="filter: blur(5px);"></ion-img>
+              
+                <p>mais {{ seletedContent.length - displayLimit }}</p>
+            </ion-thumbnail>
             <ion-label class="pl-10">
               <p>{{capturedImageTitle}}</p>
               <p hidden>size</p>
@@ -87,8 +97,8 @@
         <button id="container-multiselect" class="multiselect-button" (click)="takePicture()">Fotografia</button>
         <button id="container-multiselect" class="multiselect-button" (click)="startVideoRecording()">Video</button>
       </div>
-      
-     <!--  <div *ngIf="photoOrVideo" class="ion-item-container-no-border">
+
+      <!--  <div *ngIf="photoOrVideo" class="ion-item-container-no-border">
         <ion-label (click)="takePicture()">
           <div class="attach-icon">
             <ion-icon *ngIf="ThemeService.currentTheme == 'default' "

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

@@ -66,9 +66,28 @@ ion-toolbar{
   border-radius: 3px;
   width: 40%;
   border: groove;
+  color: #000;
   background-color: white;
 }
 
+.blur-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.7); /* Adjust the opacity as needed */
+}
+
+.blur-overlay p {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+}
+
 .container button:last-child {
   --border-radius: 50px;
   width: 40%;

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

@@ -29,7 +29,7 @@ import { CaptureError, CaptureImageOptions, MediaCapture, MediaFile } from '@awe
 import { Capacitor } from '@capacitor/core';
 import { File } from '@ionic-native/file/ngx';
 import { Media } from '@ionic-native/media/ngx';
-
+import { checkFileTypeService } from 'src/app/services/checkFileType.service';
 const config = {
   quality: 0.5,
   maxWidth: 800,
@@ -111,6 +111,9 @@ export class NewPublicationPage implements OnInit {
   photoOrVideo: boolean = false;
   fileType = "";
   filecontent: boolean;
+  seletedContent: any[] = []
+  // Set a limit for the number of images to display
+  displayLimit = 4;
 
   constructor(
     private modalController: ModalController,
@@ -126,7 +129,8 @@ export class NewPublicationPage implements OnInit {
     public PublicationFolderService: PublicationFolderService,
     private RouteService: RouteService,
     public FileService: FileService,
-    private mediaCapture: MediaCapture
+    private mediaCapture: MediaCapture,
+    public checkFileType: checkFileTypeService
   ) {
 
     this.publicationType = this.navParams.get('publicationType');
@@ -142,7 +146,27 @@ export class NewPublicationPage implements OnInit {
   ngOnInit() {
     if (this.intent) {
       this.filecontent = true
-      this.capturedImage = 'data:image/jpeg;base64,' + this.intent;
+      console.log(this.intent)
+      if (this.checkFileType.checkFileType(this.intent.type) == 'image') {
+        this.fileType = 'image'
+        let resultUrl = decodeURIComponent(this.intent.url);
+        Filesystem.readFile({ path: resultUrl }).then(async (content) => {
+          this.capturedImage = 'data:image/jpeg;base64,' + content.data;
+          console.log(this.capturedImage)
+        })
+      } else if (this.checkFileType.checkFileType(this.intent.type) == 'video') {
+        this.fileType = 'video'
+        let resultUrl = decodeURIComponent(this.intent.url);
+        Filesystem.readFile({ path: resultUrl }).then(async (content) => {
+          this.capturedVideo = "data:video/mp4;base64," + content.data;
+          console.log(this.capturedVideo)
+        })
+
+      } else {
+        this.httpErrorHandle.validationMessagge('filetype');
+      }
+
+
     }
 
     this.setTitle();
@@ -171,7 +195,7 @@ export class NewPublicationPage implements OnInit {
 
     this.capturedImage = 'data:image/jpeg;base64,' + capturedImage.base64String;
     this.capturedImageTitle = 'foto';
-    this.fileType = "image/jpeg"
+    this.fileType = "image"
 
     const compressedImage = await this.compressImageBase64(
       this.capturedImage,
@@ -211,7 +235,7 @@ export class NewPublicationPage implements OnInit {
 
   async startVideoRecording() {
     try {
-      let options: CaptureImageOptions = { limit: 1 }
+      let options: CaptureImageOptions = { limit: 5 }
       const data = await this.mediaCapture.captureVideo(options)
       this.video = data[0];
       console.log(data)
@@ -269,21 +293,31 @@ export class NewPublicationPage implements OnInit {
       ({
         multiple: true,
       });
-    let resultUrl = decodeURIComponent(result.files[0].path);
-    this.fileType = result.files[0].mimeType
-    Filesystem.readFile({ path: resultUrl })
+    result.files.forEach(element => {
 
-      .then(async (content) => {
-        console.log(result)
-        console.log(content)
-        this.filecontent = true;
-        if (this.fileType == "video/mp4") {
-          this.capturedVideo = "data:video/mp4;base64," + content.data;
-        } else if (this.fileType == "image/jpg") {
-          this.capturedVideo = "data:image/jpg;base64," + content.data;
-        }
-      })
-      .catch((err) => console.error(err));
+      let resultUrl = decodeURIComponent(element.path);
+      this.fileType = element.mimeType
+      Filesystem.readFile({ path: resultUrl })
+
+        .then(async (content) => {
+          console.log(result)
+          console.log(content)
+          this.filecontent = true;
+          let fileObject = {
+            base64: content.data,
+            fileType: this.fileType
+          }
+          this.seletedContent.push(fileObject)
+
+          if (this.fileType == "video") {
+            this.capturedVideo = "data:video/mp4;base64," + content.data;
+          } else if (this.fileType == "image") {
+            this.capturedVideo = "data:image/jpg;base64," + content.data;
+          }
+        })
+        .catch((err) => console.error(err));
+
+    });
   };
 
 

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

@@ -208,7 +208,8 @@ export class ViewPublicationsPage implements OnInit {
   }
 
   async loadPublication(publicationId, folderId) {
-    let Publication = await this.publications.GetPublicationById(publicationId).toPromise();
+    let Publication = await this.publications.GetPublicationWithArrayOfFilesById(publicationId).toPromise();
+    console.log('Publications with array of file: ', Publication)
     let publicationDetails: Publication = this.publicationPipe.itemList(Publication)
 
     const findIndex = this.publicationFindIndex(publicationId, folderId)