This commit is contained in:
Peter Maquiran
2024-01-29 17:25:05 +01:00
19 changed files with 706 additions and 445 deletions
@@ -14,12 +14,17 @@ import { FileValidatorService } from "src/app/services/file/file-validator.servi
import { MiddlewareServiceService } from "src/app/shared/API/middleware/middleware-service.service";
import { LakefsRepositoryService } from '../../repository/lakefs/lakefs-repository.service';
import { ok, err, Result } from 'neverthrow';
import { ObjectMergeNotification, SocketConnectionMCRService } from "src/app/services/socket-connection-mcr.service"
import { CMAPIService } from '../../repository/CMAPI/cmapi.service';
import { environment } from 'src/environments/environment';
import { CaptureError, CaptureImageOptions, MediaCapture, MediaFile } from '@awesome-cordova-plugins/media-capture/ngx';
import { Filesystem, Directory, Encoding, FilesystemDirectory } from '@capacitor/filesystem';
import { Platform } from '@ionic/angular';
import { Capacitor } from '@capacitor/core';
enum ActionType {
enum ActionType {
newRapid = "1",
new = "2",
edit = "3"
@@ -62,6 +67,8 @@ export class NewPublicationPage implements OnInit {
seletedContent: PublicationAttachmentEntity[] = []
displayLimit = 4;
filesSizeSum = 0;
photoOrVideo: boolean = false;
video: any;
publicationFormMV = new PublicationFormMV()
@@ -78,7 +85,10 @@ export class NewPublicationPage implements OnInit {
private MiddlewareServiceService: MiddlewareServiceService,
private LakefsRepositoryService: LakefsRepositoryService,
private SocketConnectionMCRService: SocketConnectionMCRService,
private CMAPIService: CMAPIService
private CMAPIService: CMAPIService,
private mediaCapture: MediaCapture,
private httpErrorHandle: HttpErrorHandle,
private platform: Platform,
) {
this.publicationTitle = 'Nova Publicação';
@@ -136,9 +146,9 @@ export class NewPublicationPage implements OnInit {
OriginalFileName: res.OriginalFileName,
FileExtension: res.FileExtension,
}
console.log('edit',this.publication)
console.log('edit', this.publication)
this.pub = this.publication;
this.seletedContent = this.publication.Files.map( e => {
this.seletedContent = this.publication.Files.map(e => {
return new PublicationAttachmentEntity(
{
base64: e.FileBase64,
@@ -175,12 +185,14 @@ export class NewPublicationPage implements OnInit {
800, // maxHeight
0.9 // quality
).then((picture) => {
this.photoOrVideo = false;
let fileObject = {
FileBase64: picture,
FileExtension: this.removeTextBeforeSlash('jpeg','/')
FileExtension: this.removeTextBeforeSlash('jpeg', '/'),
OriginalFileName: 'imagem'
}
const FileExtension = this.removeTextBeforeSlash('jpeg','/')
const FileExtension = this.removeTextBeforeSlash('jpeg', '/')
const newAttachment = new PublicationAttachmentEntity(
{
@@ -196,9 +208,9 @@ export class NewPublicationPage implements OnInit {
this.seletedContent.push(newAttachment)
});
/* } else {
this.toastService._badRequest("Imagem inválida")
} */
/* } else {
this.toastService._badRequest("Imagem inválida")
} */
}
async laodPicture() {
@@ -221,10 +233,11 @@ export class NewPublicationPage implements OnInit {
).then((picture) => {
let fileObject = {
FileBase64: picture,
FileExtension: this.removeTextBeforeSlash('jpeg','/')
FileExtension: this.removeTextBeforeSlash('jpeg', '/'),
OriginalFileName: 'image'
}
const FileExtension = this.removeTextBeforeSlash('jpeg','/')
const FileExtension = this.removeTextBeforeSlash('jpeg', '/')
const newAttachment = new PublicationAttachmentEntity(
{
@@ -248,36 +261,56 @@ export class NewPublicationPage implements OnInit {
multiple: true,
});
console.log(result)
result.files.forEach(async blobFile => {
if(this.checkFileType.checkFileType(blobFile.mimeType) == 'image' || this.checkFileType.checkFileType(blobFile.mimeType) == 'video') {
console.log(blobFile)
if (this.checkFileType.checkFileType(blobFile.mimeType) == 'image' || this.checkFileType.checkFileType(blobFile.mimeType) == 'video') {
/* console.log('converte new way',this.getBase64(blobFile)) */
/* const blob = await fetch(
Capacitor.convertFileSrc(blobFile.path)
).then(r => r.blob()); */
/* console.log(await blob.arrayBuffer());
console.log("base64 :data:video/mp4;base64,",this.arrayBufferToBase64(await blob.arrayBuffer())) */
this.convertBlobToBase64(blobFile.blob).then((value) => {
console.log(value)
this.filesSizeSum = this.filesSizeSum + blobFile.size
if(this.fileSizeToMB(this.filesSizeSum) <= 20) {
if (this.fileSizeToMB(this.filesSizeSum) <= 20) {
const FileExtension = this.removeTextBeforeSlash(blobFile.mimeType,'/')
const FileExtension = this.removeTextBeforeSlash(blobFile.mimeType, '/')
const file = new File([blobFile.blob], blobFile.name);
const file = new File([blobFile.blob], blobFile.name);
const newAttachment = new PublicationAttachmentEntity(
{
base64: value,
extension: FileExtension,
blobFile: file,
FileType: this.checkFileType.checkFileType(FileExtension)
}
)
const newAttachment = new PublicationAttachmentEntity(
{
base64: value,
extension: FileExtension,
blobFile: file,
FileType: this.checkFileType.checkFileType(FileExtension)
}
)
newAttachment.needUpload()
newAttachment.needUpload()
this.seletedContent.push(newAttachment)
this.filecontent = true;
} else {
if(this.seletedContent.length === 0)
this.filesSizeSum = 0
this.seletedContent.push(newAttachment)
console.log(this.seletedContent)
this.filecontent = true;
} else {
if (this.seletedContent.length === 0)
this.filesSizeSum = 0
this.httpErroHandle.validationMessagge('filessize');
}
this.httpErroHandle.validationMessagge('filessize');
}
}).catch((erro) => {
console.log(erro)
})
} else {
this.httpErroHandle.validationMessagge('filetype');
@@ -285,6 +318,9 @@ export class NewPublicationPage implements OnInit {
});
/* this.capturedImage = 'data:image/jpeg;base64,' +capturedImage.base64String;
this.capturedImageTitle = 'foto';
@@ -308,6 +344,49 @@ export class NewPublicationPage implements OnInit {
};
async loadVideoTablet() {
const result = await FilePicker.pickMedia
({
multiple: true,
});
console.log(result.files)
result.files.forEach(element => {
this.filesSizeSum = this.filesSizeSum + element.size
if (this.fileSizeToMB(this.filesSizeSum) <= 20) {
if (this.checkFileType.checkFileType(element.mimeType) == 'image' || this.checkFileType.checkFileType(element.mimeType) == 'video') {
let resultUrl = decodeURIComponent(element.path);
try {
Filesystem.readFile({ path: resultUrl })
.then(async (content) => {
console.log(result)
console.log('load video tablet base64',content)
this.filecontent = true;
let fileObject = new PublicationAttachmentEntity ({
base64: content.data,
extension: this.removeTextBeforeSlash(element.mimeType, '/'),
OriginalFileName: 'video',
FileType: this.checkFileType.checkFileType( this.removeTextBeforeSlash(element.mimeType, '/'))
})
this.seletedContent.push(fileObject)
})
.catch((err) => console.error(err));
} catch (error) {
console.log('upload video error: ', error)
}
}
} else {
if (this.seletedContent.length === 0)
this.filesSizeSum = 0
this.httpErrorHandle.validationMessagge('filessize')
}
});
};
runValidation() {
this.validateFrom = true
@@ -340,8 +419,7 @@ export class NewPublicationPage implements OnInit {
}
if(this.seletedContent.length == 0) {
if (this.seletedContent.length == 0) {
const newAttachment = new PublicationAttachmentEntity(
{
@@ -390,7 +468,7 @@ export class NewPublicationPage implements OnInit {
}
this.publication.Files = this.publication.Files.map( e => ({
this.publication.Files = this.publication.Files.map(e => ({
FileBase64: e.FileBase64,
FileExtension: e.FileExtension,
OriginalFileName: 'foto'
@@ -451,7 +529,7 @@ export class NewPublicationPage implements OnInit {
console.log("this.publication.Files", this.publication.Files)
}
this.publication.Files = this.publication.Files.map( e => ({
this.publication.Files = this.publication.Files.map(e => ({
FileBase64: e.FileBase64,
FileExtension: e.FileExtension,
OriginalFileName: 'foto'
@@ -563,6 +641,7 @@ export class NewPublicationPage implements OnInit {
}
convertBlobToBase64(blob: Blob) {
console.log('Convert blob ',blob)
return new Promise((resolve, reject) => {
const reader = new FileReader;
reader.onerror = reject;
@@ -570,10 +649,19 @@ export class NewPublicationPage implements OnInit {
resolve(reader.result)
}
reader.readAsDataURL(blob)
})
},)
}
removeTextBeforeSlash(inputString,mark) {
getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
removeTextBeforeSlash(inputString, mark) {
if (inputString.includes(mark)) {
const parts = inputString.split(mark);
return parts.length > 1 ? parts[1] : inputString;
@@ -652,57 +740,195 @@ export class NewPublicationPage implements OnInit {
/* async compressVideoBase64(base64String: string, maxWidth: number, maxHeight: number, quality: number): Promise<string> {
return new Promise(async (resolve, reject) => {
try {
// Decode the base64 video string to an ArrayBuffer
const videoBuffer = this.base64ToArrayBuffer(this.removeTextBeforeSlash(base64String,','));
/* async compressVideoBase64(base64String: string, maxWidth: number, maxHeight: number, quality: number): Promise<string> {
return new Promise(async (resolve, reject) => {
try {
// Decode the base64 video string to an ArrayBuffer
const videoBuffer = this.base64ToArrayBuffer(this.removeTextBeforeSlash(base64String,','));
// Create a Blob from the ArrayBuffer
const videoBlob = new Blob([videoBuffer], { type: 'video/mp4' });
// Create a Blob from the ArrayBuffer
const videoBlob = new Blob([videoBuffer], { type: 'video/mp4' });
// Create an object URL from the Blob
const videoObjectUrl = URL.createObjectURL(videoBlob);
// Create an object URL from the Blob
const videoObjectUrl = URL.createObjectURL(videoBlob);
// Create a video element
const video = document.createElement('video');
// Create a video element
const video = document.createElement('video');
// Create a source element and set its type attribute
const source = document.createElement('source');
source.type = 'video/mp4';
// Create a source element and set its type attribute
const source = document.createElement('source');
source.type = 'video/mp4';
// Set the source URL
source.src = videoObjectUrl;
// Set the source URL
source.src = videoObjectUrl;
// Append the source element to the video element
video.appendChild(source);
// Append the source element to the video element
video.appendChild(source);
// Wait for the video to load
video.addEventListener('loadedmetadata', async () => {
const canvas = document.createElement('canvas');
let newWidth = video.videoWidth;
let newHeight = video.videoHeight;
// Wait for the video to load
video.addEventListener('loadedmetadata', async () => {
const canvas = document.createElement('canvas');
let newWidth = video.videoWidth;
let newHeight = video.videoHeight;
if (newWidth > maxWidth) {
newHeight *= maxWidth / newWidth;
newWidth = maxWidth;
}
if (newWidth > maxWidth) {
newHeight *= maxWidth / newWidth;
newWidth = maxWidth;
}
if (newHeight > maxHeight) {
newWidth *= maxHeight / newHeight;
newHeight = maxHeight;
}
if (newHeight > maxHeight) {
newWidth *= maxHeight / newHeight;
newHeight = maxHeight;
}
canvas.width = newWidth;
canvas.height = newHeight;
canvas.width = newWidth;
canvas.height = newHeight;
const context = canvas.getContext('2d');
const context = canvas.getContext('2d');
// Create a function to draw each video frame onto the canvas
const drawFrame = () => {
// Create a function to draw each video frame onto the canvas
const drawFrame = () => {
context?.drawImage(video, 0, 0, newWidth, newHeight);
// Convert the canvas to a Blob with the correct MIME type
canvas.toBlob(async (blob) => {
if (blob) {
// Read the Blob as an ArrayBuffer
const compressedVideoBuffer = await this.readBlobAsArrayBuffer(blob);
// Convert the ArrayBuffer back to base64
const compressedBase64 = this.arrayBufferToBase64(compressedVideoBuffer);
resolve(compressedBase64);
} else {
reject('Error creating compressed video blob.');
}
}, 'video/mp4', quality);
// Request the next video frame
requestAnimationFrame(drawFrame);
};
// Start drawing frames
drawFrame();
// Start playing the video
video.play();
});
} catch (error) {
reject(error);
}
});
} */
/* async compressVideoBase64(base64String: string, maxWidth: number, maxHeight: number, quality: number): Promise<string> {
return new Promise(async (resolve, reject) => {
try {
// Decode the base64 video string to an ArrayBuffer
const videoBuffer = this.base64ToArrayBuffer(this.removeTextBeforeSlash(base64String,','));
// Create a Blob from the ArrayBuffer
const videoBlob = new Blob([videoBuffer], { type: 'video/mp4' });
// Create an object URL from the Blob
const videoObjectUrl = URL.createObjectURL(videoBlob);
// Create a video element
const video = document.createElement('video');
video.src = videoObjectUrl;
// Wait for the video to load metadata
video.addEventListener('loadedmetadata', async () => {
const canvas = document.createElement('canvas');
let newWidth = video.videoWidth;
let newHeight = video.videoHeight;
if (newWidth > maxWidth) {
newHeight *= maxWidth / newWidth;
newWidth = maxWidth;
}
if (newHeight > maxHeight) {
newWidth *= maxHeight / newHeight;
newHeight = maxHeight;
}
canvas.width = newWidth;
canvas.height = newHeight;
const context = canvas.getContext('2d');
context?.drawImage(video, 0, 0, newWidth, newHeight);
// Convert the canvas to a Blob with the correct MIME type
canvas.toBlob(async (blob) => {
if (blob) {
// Read the Blob as an ArrayBuffer
const compressedVideoBuffer = await this.readBlobAsArrayBuffer(blob);
// Convert the ArrayBuffer back to base64
const compressedBase64 = this.arrayBufferToBase64(compressedVideoBuffer);
resolve(compressedBase64);
} else {
reject('Error creating compressed video blob.');
}
}, 'video/mp4', quality);
});
} catch (error) {
reject(error);
}
});
} */
/* async compressVideoBase64(base64String: string, maxWidth: number, maxHeight: number, quality: number): Promise<string> {
return new Promise(async (resolve, reject) => {
try {
// Decode the base64 video string to an ArrayBuffer
const trimmedBase64 = base64String.trim();
console.log(this.removeTextBeforeSlash(trimmedBase64,','))
const videoBuffer = this.base64ToArrayBuffer(this.removeTextBeforeSlash(trimmedBase64,','));
// Create a Blob from the ArrayBuffer
const videoBlob = new Blob([videoBuffer], { type: 'video/mp4' });
// Create an object URL from the Blob
const videoObjectUrl = URL.createObjectURL(videoBlob);
// Create a video element
const video = document.createElement('video');
video.src = videoObjectUrl;
// Wait for the video to load metadata
video.addEventListener('loadedmetadata', async () => {
const canvas = document.createElement('canvas');
let newWidth = video.videoWidth;
let newHeight = video.videoHeight;
if (newWidth > maxWidth) {
newHeight *= maxWidth / newWidth;
newWidth = maxWidth;
}
if (newHeight > maxHeight) {
newWidth *= maxHeight / newHeight;
newHeight = maxHeight;
}
canvas.width = newWidth;
canvas.height = newHeight;
const context = canvas.getContext('2d');
context?.drawImage(video, 0, 0, newWidth, newHeight);
// Convert the canvas to a Blob with the correct MIME type
// Convert the canvas to a Blob
canvas.toBlob(async (blob) => {
if (blob) {
// Read the Blob as an ArrayBuffer
@@ -717,151 +943,13 @@ export class NewPublicationPage implements OnInit {
}
}, 'video/mp4', quality);
// Request the next video frame
requestAnimationFrame(drawFrame);
};
});
// Start drawing frames
drawFrame();
// Start playing the video
video.play();
});
} catch (error) {
reject(error);
}
});
} */
/* async compressVideoBase64(base64String: string, maxWidth: number, maxHeight: number, quality: number): Promise<string> {
return new Promise(async (resolve, reject) => {
try {
// Decode the base64 video string to an ArrayBuffer
const videoBuffer = this.base64ToArrayBuffer(this.removeTextBeforeSlash(base64String,','));
// Create a Blob from the ArrayBuffer
const videoBlob = new Blob([videoBuffer], { type: 'video/mp4' });
// Create an object URL from the Blob
const videoObjectUrl = URL.createObjectURL(videoBlob);
// Create a video element
const video = document.createElement('video');
video.src = videoObjectUrl;
// Wait for the video to load metadata
video.addEventListener('loadedmetadata', async () => {
const canvas = document.createElement('canvas');
let newWidth = video.videoWidth;
let newHeight = video.videoHeight;
if (newWidth > maxWidth) {
newHeight *= maxWidth / newWidth;
newWidth = maxWidth;
}
if (newHeight > maxHeight) {
newWidth *= maxHeight / newHeight;
newHeight = maxHeight;
}
canvas.width = newWidth;
canvas.height = newHeight;
const context = canvas.getContext('2d');
context?.drawImage(video, 0, 0, newWidth, newHeight);
// Convert the canvas to a Blob with the correct MIME type
canvas.toBlob(async (blob) => {
if (blob) {
// Read the Blob as an ArrayBuffer
const compressedVideoBuffer = await this.readBlobAsArrayBuffer(blob);
// Convert the ArrayBuffer back to base64
const compressedBase64 = this.arrayBufferToBase64(compressedVideoBuffer);
resolve(compressedBase64);
} else {
reject('Error creating compressed video blob.');
}
}, 'video/mp4', quality);
});
} catch (error) {
reject(error);
}
});
} */
/* async compressVideoBase64(base64String: string, maxWidth: number, maxHeight: number, quality: number): Promise<string> {
return new Promise(async (resolve, reject) => {
try {
// Decode the base64 video string to an ArrayBuffer
const trimmedBase64 = base64String.trim();
console.log(this.removeTextBeforeSlash(trimmedBase64,','))
const videoBuffer = this.base64ToArrayBuffer(this.removeTextBeforeSlash(trimmedBase64,','));
// Create a Blob from the ArrayBuffer
const videoBlob = new Blob([videoBuffer], { type: 'video/mp4' });
// Create an object URL from the Blob
const videoObjectUrl = URL.createObjectURL(videoBlob);
// Create a video element
const video = document.createElement('video');
video.src = videoObjectUrl;
// Wait for the video to load metadata
video.addEventListener('loadedmetadata', async () => {
const canvas = document.createElement('canvas');
let newWidth = video.videoWidth;
let newHeight = video.videoHeight;
if (newWidth > maxWidth) {
newHeight *= maxWidth / newWidth;
newWidth = maxWidth;
}
if (newHeight > maxHeight) {
newWidth *= maxHeight / newHeight;
newHeight = maxHeight;
}
canvas.width = newWidth;
canvas.height = newHeight;
const context = canvas.getContext('2d');
context?.drawImage(video, 0, 0, newWidth, newHeight);
// Convert the canvas to a Blob
canvas.toBlob(async (blob) => {
if (blob) {
// Read the Blob as an ArrayBuffer
const compressedVideoBuffer = await this.readBlobAsArrayBuffer(blob);
// Convert the ArrayBuffer back to base64
const compressedBase64 = this.arrayBufferToBase64(compressedVideoBuffer);
resolve(compressedBase64);
} else {
reject('Error creating compressed video blob.');
}
}, 'video/mp4', quality);
});
} catch (error) {
reject(error);
}
});
} */
} catch (error) {
reject(error);
}
});
} */
private base64ToArrayBuffer(base64: string): ArrayBuffer {
const binaryString = window.atob(base64);
@@ -922,8 +1010,65 @@ export class NewPublicationPage implements OnInit {
}
}
chossePhotoOrVideo() {
this.photoOrVideo = !this.photoOrVideo
}
async startVideoRecording() {
try {
let options: CaptureImageOptions = { limit: 1 }
const data: any = await this.mediaCapture.captureVideo(options)
this.video = data[0];
console.log(data)
data.forEach(async element => {
this.filesSizeSum = this.filesSizeSum + element.size
if (this.fileSizeToMB(this.filesSizeSum) <= 20) {
const savedFile = await Filesystem.copy({
from: element.fullPath, // directory prop removed, Capacitor parses filename for us
to: "video.mp4",
toDirectory: FilesystemDirectory.Data
});
console.log(savedFile.uri)
Filesystem.readFile({ path: savedFile.uri })
.then(async (content) => {
this.filecontent = true;
console.log('',content)
let fileObject = new PublicationAttachmentEntity({
base64: content.data,
extension: 'mp4',
OriginalFileName: 'record',
FileType: 'video'
}
)
this.seletedContent.push(fileObject)
})
.catch((err) => console.error(err));
} else {
if (this.seletedContent.length === 0)
this.filesSizeSum = 0
this.httpErrorHandle.validationMessagge('filessize')
}
});
} catch (error) {
console.log('record video error: ', error)
}
}
checkTableDivice() {
if (!this.platform.is('desktop'))
return true;
}
checkDesktop() {
if (this.platform.is('desktop'))
return true;
}
}
class UploadFileUseCase {
CMAPIService: CMAPIService = window["CMAPIAPIRepository"]