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>
+
+<!--  <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)
-
-
-    });
 
   }
 
@@ -268,15 +242,15 @@ export class NewPublicationPage implements OnInit {
         this.filesSizeSum = this.filesSizeSum + element.size
         // element.size
         try {
-        if (this.platform.is('ios')) {
+          if (this.platform.is('ios')) {
-          this.recordevideoIos(element.fullPath, element)
+            this.recordevideoIos(element.fullPath, element)
-        } else {
+          } else {
-          this.recordVideoAndroid(element.fullPath, element)
+            this.recordVideoAndroid(element.fullPath, element)
-        }
+          }
 
-      } catch (e) {
+        } catch (e) {
-        console.error('Unable to write file', e);
+          console.error('Unable to write file', e);
-      }
+        }
 
 
       });
@@ -286,36 +260,36 @@ 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
       if (this.fileSizeToMB(this.filesSizeSum) <= 20) {
         console.log('pass size verificartion')
         if (this.checkFileType.checkFileType(element.mimeType) == 'video' && this.platform.is('ios')) {
-           let resultUrl = decodeURIComponent(element.path); console.log('pass type verification ', resultUrl)
+          let resultUrl = decodeURIComponent(element.path); console.log('pass type verification ', resultUrl)
-           try {
+          try {
             this.recordevideoIos(resultUrl, element)
           } catch (error) {
             console.log('upload video error: ', error)
           }
         } else if (this.checkFileType.checkFileType(element.mimeType) == 'image' || this.checkFileType.checkFileType(element.mimeType) == 'video') {
           let resultUrl = decodeURIComponent(element.path);
-           console.log('pass type verification ', resultUrl)
+          console.log('pass type verification ', resultUrl)
-            try {
+          try {
-              this.loadVideoAndroid(resultUrl,element)
+            this.loadVideoAndroid(resultUrl, element)
-            } catch (error) {
+          } catch (error) {
-              console.log('upload video error: ', error)
+            console.log('upload video error: ', error)
-            }
           }
-        } else {
-          if (this.PublicationFromMvService.form.Files.length === 0)
-            this.filesSizeSum = 0
-
-          this.httpErrorHandle.validationMessagge('filessize')
         }
-      });
+      } else {
-     };
+        if (this.PublicationFromMvService.form.Files.length === 0)
+          this.filesSizeSum = 0
+
+        this.httpErrorHandle.validationMessagge('filessize')
+      }
+    });
+  };
 
 
   chossePhotoOrVideo() {
@@ -676,37 +650,37 @@ 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) => {
+          .then(async (content) => {
-          this.filecontent = true;
+            this.filecontent = true;
 
-          const file = new File([element.blob], element.name);
+            const file = new File([element.blob], element.name);
 
-          const newAttachment = new PublicationAttachmentEntity(
+            const newAttachment = new PublicationAttachmentEntity(
-            {
+              {
-              base64: 'data:video/mp4;base64,' + content.data,
+                base64: 'data:video/mp4;base64,' + content.data,
-              extension: 'mp4',
+                extension: 'mp4',
-              blobFile: file,
+                blobFile: file,
-              FileType: this.checkFileType.checkFileType('mp4') as any,
+                FileType: this.checkFileType.checkFileType('mp4') as any,
-              OriginalFileName: 'load video'
+                OriginalFileName: 'load video'
-            }
+              }
-          )
+            )
 
-          this.PublicationFromMvService.form.Files.push(newAttachment)
+            this.PublicationFromMvService.form.Files.push(newAttachment)
 
-          const deleteSecretFile = async () => {
+            const deleteSecretFile = async () => {
-            await Filesystem.deleteFile({
+              await Filesystem.deleteFile({
-              path: `${stringGerada}.mp4`,
+                path: `${stringGerada}.mp4`,
-              directory: Directory.Cache,
+                directory: Directory.Cache,
-            });
+              });
-          };
+            };
-          await deleteSecretFile().then((value) => {
+            await deleteSecretFile().then((value) => {
-            console.log('delete file',value)
+              console.log('delete file', value)
+            })
           })
-        })
+          .catch((erro) => console.error('read converted video erro ', erro));
-        .catch((erro) => console.error('read converted video erro ', erro));
       });
 
 
@@ -726,26 +700,26 @@ export class NewPublicationPage implements OnInit {
       console.log(savedFile.uri)
       Filesystem.readFile({ path: savedFile.uri })
 
-      .then(async (content) => {
+        .then(async (content) => {
 
-        this.filecontent = true;
+          this.filecontent = true;
 
-        const file = new File([element.blob], element.name);
+          const file = new File([element.blob], element.name);
-        window['a'] = element
+          window['a'] = element
-        const newAttachment = new PublicationAttachmentEntity(
+          const newAttachment = new PublicationAttachmentEntity(
-          {
+            {
-            base64: 'data:video/mp4;base64,' + content.data,
+              base64: 'data:video/mp4;base64,' + content.data,
-            extension:  'mp4',
+              extension: 'mp4',
-            blobFile: file,
+              blobFile: file,
-            FileType: this.checkFileType.checkFileType( 'mp4') as any,
+              FileType: this.checkFileType.checkFileType('mp4') as any,
-            OriginalFileName: 'load video'
+              OriginalFileName: 'load video'
-          }
+            }
-        )
+          )
-        this.PublicationFromMvService.form.Files.push(newAttachment)
+          this.PublicationFromMvService.form.Files.push(newAttachment)
 
 
-      })
+        })
-      .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)
@@ -759,41 +733,42 @@ export class NewPublicationPage implements OnInit {
   loadVideoAndroid(resultUrl, element) {
     Filesystem.readFile({ path: resultUrl })
 
-    .then(async (content) => {
+      .then(async (content) => {
 
-      this.filecontent = true;
+        this.filecontent = true;
 
-      if (this.removeTextBeforeSlash(element.mimeType, '/') == "mp4") {
+        if (this.removeTextBeforeSlash(element.mimeType, '/') == "mp4") {
 
-        const newAttachment = new PublicationAttachmentEntity(
+          const newAttachment = new PublicationAttachmentEntity(
-          {
+            {
-            base64: content.data,
+              base64: content.data,
-            extension:  this.removeTextBeforeSlash(element.mimeType, '/'),
+              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'
+              OriginalFileName: 'load video'
-          }
+            }
-        )
+          )
 
-        newAttachment.needUpload()
+          newAttachment.needUpload()
-        this.PublicationFromMvService.form.Files.push(newAttachment)
+          this.PublicationFromMvService.form.Files.push(newAttachment)
 
-      } else {
+        } else {
+          this.capturedImage = 'data:image/jpeg;base64,' + content.data;
+          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,
+              OriginalFileName: 'image'
+            }
+          )
 
-        const newAttachment = new PublicationAttachmentEntity(
+          this.PublicationFromMvService.form.Files.push(newAttachment) */
-          {
+        }
-            base64: 'data:image/jpeg;base64,' + content.data,
-            extension:  this.removeTextBeforeSlash(element.mimeType, '/'),
-            FileType: this.checkFileType.checkFileType( this.removeTextBeforeSlash(element.mimeType, '/')) as any,
-            OriginalFileName: 'image'
-          }
-        )
-
-        this.PublicationFromMvService.form.Files.push(newAttachment)
-      }
 
 
-    })
+      })
-    .catch((err) => console.error(err));
+      .catch((err) => console.error(err));
 
   }
 
@@ -860,21 +835,21 @@ export class NewPublicationPage implements OnInit {
               newAttachment.needUpload()
 
               this.PublicationFromMvService.form.Files.push(newAttachment)
-            fileObject ={};
+              fileObject = {};
-            const deleteSecretFile = async () => {
+              const deleteSecretFile = async () => {
-              await Filesystem.deleteFile({
+                await Filesystem.deleteFile({
-                path: `${filename}.mp4`,
+                  path: `${filename}.mp4`,
-                directory: Directory.Cache,
+                  directory: Directory.Cache,
-              });
+                });
-            };
+              };
-            deleteSecretFile().then((value) => {
+              deleteSecretFile().then((value) => {
-              console.log('delete file',value)
+                console.log('delete file', value)
-              fileObject ={};
+                fileObject = {};
-            })
+              })
-            .catch((erro) => console.error('read converted video erro ', erro));
+                .catch((erro) => console.error('read converted video erro ', erro));
-        });
+            });
 
-      });
+        });
 
       }
     } catch (error) {
@@ -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();
+  }
+
 }