diff --git a/src/app/modals/crop-image/crop-image.page.html b/src/app/modals/crop-image/crop-image.page.html index 1475b18c6..bf56cd320 100644 --- a/src/app/modals/crop-image/crop-image.page.html +++ b/src/app/modals/crop-image/crop-image.page.html @@ -6,9 +6,9 @@ - + + + + + + + + + + + + + + + diff --git a/src/app/modals/crop-image/crop-image.page.ts b/src/app/modals/crop-image/crop-image.page.ts index d9b290049..e748cadaa 100644 --- a/src/app/modals/crop-image/crop-image.page.ts +++ b/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 != '') - var fileObject = { - FileBase64: this.croppedImage, - FileExtension: 'jpeg', - OriginalFileName: 'image', - FileSize: this.fileSizeToMB(this.croppedImage.length) - } - this.seletedContent.push(fileObject) - return true + + imageLoaded($event){ + } + loadImageFailed() { - // show message - } */ + console.log('cropp iage faile') + } + + save() { + this.modalController.dismiss({ + base64ToCroppe: this.croppedImage + }); + } + + cancel() { + this.modalController.dismiss() + } } diff --git a/src/app/pages/publications/new-publication/new-publication.page.ts b/src/app/pages/publications/new-publication/new-publication.page.ts index 661693ddb..bc823ac54 100644 --- a/src/app/pages/publications/new-publication/new-publication.page.ts +++ b/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'; - - 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) - - - }); + this.showCroppModal(); } @@ -268,15 +242,15 @@ export class NewPublicationPage implements OnInit { this.filesSizeSum = this.filesSizeSum + element.size // element.size try { - if (this.platform.is('ios')) { - this.recordevideoIos(element.fullPath, element) - } else { - this.recordVideoAndroid(element.fullPath, element) - } + if (this.platform.is('ios')) { + this.recordevideoIos(element.fullPath, element) + } else { + this.recordVideoAndroid(element.fullPath, element) + } - } catch (e) { - console.error('Unable to write file', e); - } + } catch (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) - try { + let resultUrl = decodeURIComponent(element.path); console.log('pass type verification ', resultUrl) + 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) - try { - this.loadVideoAndroid(resultUrl,element) - } catch (error) { - console.log('upload video error: ', error) - } + console.log('pass type verification ', resultUrl) + try { + this.loadVideoAndroid(resultUrl, element) + } catch (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 () => { - await Filesystem.readFile({ path: `${directory.uri}${stringGerada}.mp4`}) + this.videoconvertService.convertVideo(fullPath, directory.uri, stringGerada, 'mp4').then(async () => { + await Filesystem.readFile({ path: `${directory.uri}${stringGerada}.mp4` }) - .then(async (content) => { - this.filecontent = true; + .then(async (content) => { + this.filecontent = true; - const file = new File([element.blob], element.name); + const file = new File([element.blob], element.name); - const newAttachment = new PublicationAttachmentEntity( - { - base64: 'data:video/mp4;base64,' + content.data, - extension: 'mp4', - blobFile: file, - FileType: this.checkFileType.checkFileType('mp4') as any, - OriginalFileName: 'load video' - } - ) + const newAttachment = new PublicationAttachmentEntity( + { + base64: 'data:video/mp4;base64,' + content.data, + extension: 'mp4', + blobFile: file, + FileType: this.checkFileType.checkFileType('mp4') as any, + OriginalFileName: 'load video' + } + ) - this.PublicationFromMvService.form.Files.push(newAttachment) + this.PublicationFromMvService.form.Files.push(newAttachment) - const deleteSecretFile = async () => { - await Filesystem.deleteFile({ - path: `${stringGerada}.mp4`, - directory: Directory.Cache, - }); - }; - await deleteSecretFile().then((value) => { - console.log('delete file',value) + const deleteSecretFile = async () => { + await Filesystem.deleteFile({ + path: `${stringGerada}.mp4`, + directory: Directory.Cache, + }); + }; + await deleteSecretFile().then((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); - window['a'] = element - const newAttachment = new PublicationAttachmentEntity( - { - base64: 'data:video/mp4;base64,' + content.data, - extension: 'mp4', - blobFile: file, - FileType: this.checkFileType.checkFileType( 'mp4') as any, - OriginalFileName: 'load video' - } - ) - this.PublicationFromMvService.form.Files.push(newAttachment) + const file = new File([element.blob], element.name); + window['a'] = element + const newAttachment = new PublicationAttachmentEntity( + { + base64: 'data:video/mp4;base64,' + content.data, + extension: 'mp4', + blobFile: file, + FileType: this.checkFileType.checkFileType('mp4') as any, + OriginalFileName: 'load video' + } + ) + 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( - { - base64: content.data, - extension: this.removeTextBeforeSlash(element.mimeType, '/'), - FileType: this.checkFileType.checkFileType( this.removeTextBeforeSlash(element.mimeType, '/')) as any, - OriginalFileName: 'load video' - } - ) + const newAttachment = new PublicationAttachmentEntity( + { + base64: content.data, + extension: this.removeTextBeforeSlash(element.mimeType, '/'), + FileType: this.checkFileType.checkFileType(this.removeTextBeforeSlash(element.mimeType, '/')) as any, + OriginalFileName: 'load video' + } + ) - newAttachment.needUpload() - this.PublicationFromMvService.form.Files.push(newAttachment) + newAttachment.needUpload() + 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( - { - 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) - } + 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 ={}; - const deleteSecretFile = async () => { - await Filesystem.deleteFile({ - path: `${filename}.mp4`, - directory: Directory.Cache, - }); - }; - deleteSecretFile().then((value) => { - console.log('delete file',value) - fileObject ={}; - }) - .catch((erro) => console.error('read converted video erro ', erro)); - }); + fileObject = {}; + const deleteSecretFile = async () => { + await Filesystem.deleteFile({ + path: `${filename}.mp4`, + directory: Directory.Cache, + }); + }; + deleteSecretFile().then((value) => { + console.log('delete file', value) + fileObject = {}; + }) + .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(); + } + }