added croppe to new publications on mobile

src/app/modals/crop-image/crop-image.page.html

@@ -6,9 +6,9 @@
 
 <ion-content>
 
- <!--  <div style="height: 100%; width: 100%;">
+  <div style="height: 100%; width: 100%;">
     <image-cropper
-    [imageBase64]="this.capturedImage"
+    [imageBase64]="this.base64ToCroppe"
     [maintainAspectRatio]="true"
     [aspectRatio]="1 / 1"
     format="jpeg"
@@ -17,6 +17,27 @@
     (imageLoaded)="imageLoaded($event)"
     (loadImageFailed)="loadImageFailed()"
   ></image-cropper>
+  </div>
+
+<!--  <div>
+  <button (click)="save()">Salvar</button>
+  <button (click)="cancel()">Cancelar</button>
  </div> -->
 
+ <ion-footer class="ion-no-border">
+  <ion-toolbar class="footer-toolbar">
+    <ion-buttons slot="start">
+      <button class="btn-ok" fill="clear" color="#fff" (click)="save()">
+        <ion-label>Gravar</ion-label>
+      </button>
+    </ion-buttons>
+    <ion-buttons slot="end">
+      <button class="btn-cancel" fill="clear" color="#061b52" (click)="cancel()">
+        <ion-label>Cancelar</ion-label>
+      </button>
+    </ion-buttons>
+
+  </ion-toolbar>
+</ion-footer>
+
 </ion-content>

src/app/modals/crop-image/crop-image.page.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+import { NavParams } from '@ionic/angular';
 import { ImageCroppedEvent, ImageCropperComponent } from 'ngx-image-cropper';
 
 @Component({
@@ -12,10 +14,18 @@ export class CropImagePage implements OnInit {
   croppedImage: any = '';
   @ViewChild('cropper') cropper: ImageCropperComponent;
   capturedImage: any = "";
+  base64ToCroppe = "";
 
-  constructor() { }
+  constructor(
+    private navParams: NavParams,
+    private modalController: ModalController,
+  ) { 
+    this.base64ToCroppe = this.navParams.get('base64ToCroppe')
+    console.log('To cropp',this.base64ToCroppe)
+  }
 
   ngOnInit() {
+    console.log('To cropp',this.base64ToCroppe)
   }
 
   fileChangeEvent(event: any): void {
@@ -28,19 +38,23 @@ export class CropImagePage implements OnInit {
   console.log('Croped image 22',this.croppedImage)
   // event.blob can be used to upload the cropped image
   }
-/*   cropperReady() {
+
-    if(this.croppedImage != '')
+  imageLoaded($event){
-    var fileObject = {
+
-      FileBase64: this.croppedImage,
-      FileExtension: 'jpeg',
-      OriginalFileName: 'image',
-      FileSize: this.fileSizeToMB(this.croppedImage.length)
-    }
-    this.seletedContent.push(fileObject)
-      return true
   }
+
   loadImageFailed() {
-    // show message
+    console.log('cropp iage faile')
-  } */
+  }
+
+  save() {
+    this.modalController.dismiss({
+      base64ToCroppe: this.croppedImage
+    });
+  }
+
+  cancel() {
+    this.modalController.dismiss()
+  }
 
 }

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

@@ -37,6 +37,7 @@ import { VideoconvertService } from 'src/app/services/videoconvert.service'
 import { PublicationAttachmentEntity } from 'src/app/shared/publication/upload/upload-streaming.service';
 import { PublicationFromMvService } from "src/app/shared/publication/upload/publication-from-mv.service"
 import { File } from '../../../models/chatMethod';
+import { CropImagePage } from 'src/app/modals/crop-image/crop-image.page';
 
 const config = {
   quality: 0.5,
@@ -160,7 +161,7 @@ export class NewPublicationPage implements OnInit {
         )
       })
 
-      for(const files of newFiles) {
+      for (const files of newFiles) {
         this.PublicationFromMvService.form.Files.push(files)
       }
     }
@@ -203,36 +204,9 @@ export class NewPublicationPage implements OnInit {
       resultType: CameraResultType.Base64,
       source: CameraSource.Camera
     });
-
-    console.log(capturedImage)
-
-
     this.capturedImage = 'data:image/jpeg;base64,' + capturedImage.base64String;
     this.capturedImageTitle = 'foto';
-
+    this.showCroppModal();
-    const compressedImage = await this.compressImageBase64(
-      this.capturedImage,
-      800, // maxWidth
-      800, // maxHeight
-      0.9  // quality
-    ).then((picture) => {
-      console.log('take picture', this.removeTextBeforeSlash(picture, ','),)
-      this.filecontent = true;
-      this.photoOrVideo = false;
-
-      const newAttachment = new PublicationAttachmentEntity(
-        {
-          base64: this.removeTextBeforeSlash(picture, ','),
-          extension: capturedImage.format,
-          OriginalFileName: "image",
-          FileType: 'image'
-        }
-      )
-
-      this.PublicationFromMvService.form.Files.push(newAttachment)
-
-
-    });
 
   }
 
@@ -286,7 +260,7 @@ export class NewPublicationPage implements OnInit {
   }
 
   async loadVideo() {
-    const result = await FilePicker.pickMedia ({ multiple: true, });
+    const result = await FilePicker.pickMedia({ multiple: true, });
     console.log(result.files)
     result.files.forEach(async element => {
       this.filesSizeSum = this.filesSizeSum + element.size
@@ -303,7 +277,7 @@ export class NewPublicationPage implements OnInit {
           let resultUrl = decodeURIComponent(element.path);
           console.log('pass type verification ', resultUrl)
           try {
-              this.loadVideoAndroid(resultUrl,element)
+            this.loadVideoAndroid(resultUrl, element)
           } catch (error) {
             console.log('upload video error: ', error)
           }
@@ -676,8 +650,8 @@ export class NewPublicationPage implements OnInit {
 
       const stringGerada = this.gerarStringAleatoria();
 
-      this.videoconvertService.convertVideo(fullPath,directory.uri,stringGerada,'mp4').then(async () => {
+      this.videoconvertService.convertVideo(fullPath, directory.uri, stringGerada, 'mp4').then(async () => {
-        await Filesystem.readFile({ path: `${directory.uri}${stringGerada}.mp4`})
+        await Filesystem.readFile({ path: `${directory.uri}${stringGerada}.mp4` })
 
           .then(async (content) => {
             this.filecontent = true;
@@ -703,7 +677,7 @@ export class NewPublicationPage implements OnInit {
               });
             };
             await deleteSecretFile().then((value) => {
-            console.log('delete file',value)
+              console.log('delete file', value)
             })
           })
           .catch((erro) => console.error('read converted video erro ', erro));
@@ -737,7 +711,7 @@ export class NewPublicationPage implements OnInit {
               base64: 'data:video/mp4;base64,' + content.data,
               extension: 'mp4',
               blobFile: file,
-            FileType: this.checkFileType.checkFileType( 'mp4') as any,
+              FileType: this.checkFileType.checkFileType('mp4') as any,
               OriginalFileName: 'load video'
             }
           )
@@ -745,7 +719,7 @@ export class NewPublicationPage implements OnInit {
 
 
         })
-      .catch((error) => console.error('reade converted video erro ',error));
+        .catch((error) => console.error('reade converted video erro ', error));
 
     } catch (error) {
       console.log('record video android erro ', error)
@@ -769,7 +743,7 @@ export class NewPublicationPage implements OnInit {
             {
               base64: content.data,
               extension: this.removeTextBeforeSlash(element.mimeType, '/'),
-            FileType: this.checkFileType.checkFileType( this.removeTextBeforeSlash(element.mimeType, '/')) as any,
+              FileType: this.checkFileType.checkFileType(this.removeTextBeforeSlash(element.mimeType, '/')) as any,
               OriginalFileName: 'load video'
             }
           )
@@ -778,17 +752,18 @@ export class NewPublicationPage implements OnInit {
           this.PublicationFromMvService.form.Files.push(newAttachment)
 
         } else {
-
+          this.capturedImage = 'data:image/jpeg;base64,' + content.data;
-        const newAttachment = new PublicationAttachmentEntity(
+          this.showCroppModal()
+          /* const newAttachment = new PublicationAttachmentEntity(
             {
               base64: 'data:image/jpeg;base64,' + content.data,
               extension: this.removeTextBeforeSlash(element.mimeType, '/'),
-            FileType: this.checkFileType.checkFileType( this.removeTextBeforeSlash(element.mimeType, '/')) as any,
+              FileType: this.checkFileType.checkFileType(this.removeTextBeforeSlash(element.mimeType, '/')) as any,
               OriginalFileName: 'image'
             }
           )
 
-        this.PublicationFromMvService.form.Files.push(newAttachment)
+          this.PublicationFromMvService.form.Files.push(newAttachment) */
         }
 
 
@@ -860,7 +835,7 @@ export class NewPublicationPage implements OnInit {
               newAttachment.needUpload()
 
               this.PublicationFromMvService.form.Files.push(newAttachment)
-            fileObject ={};
+              fileObject = {};
               const deleteSecretFile = async () => {
                 await Filesystem.deleteFile({
                   path: `${filename}.mp4`,
@@ -868,8 +843,8 @@ export class NewPublicationPage implements OnInit {
                 });
               };
               deleteSecretFile().then((value) => {
-              console.log('delete file',value)
+                console.log('delete file', value)
-              fileObject ={};
+                fileObject = {};
               })
                 .catch((erro) => console.error('read converted video erro ', erro));
             });
@@ -915,5 +890,38 @@ export class NewPublicationPage implements OnInit {
 
   }
 
+  async showCroppModal() {
+    const modal = await this.modalController.create({
+      component: CropImagePage,
+      componentProps: {
+        base64ToCroppe: this.capturedImage
+      },
+      cssClass: 'modal modal-desktop'
+    });
+
+    modal.onDidDismiss().then((res) => {
+      if (res) {
+        this.capturedImage = res.data
+        this.filecontent = true;
+        this.photoOrVideo = false;
+
+        const newAttachment = new PublicationAttachmentEntity(
+          {
+            base64: res.data.base64ToCroppe,
+            extension: 'jpeg',
+            OriginalFileName: "image",
+            FileType: 'image'
+          }
+        )
+
+        this.PublicationFromMvService.form.Files.push(newAttachment)
+      }
+    }, (error) => {
+      console.log(error)
+    });
+
+    await modal.present();
+  }
+
 }