add limit to files on publication

src/app/shared/publication/new-publication/new-publication.page.ts

@@ -53,6 +53,7 @@ export class NewPublicationPage implements OnInit {
   captureContent: any;
   seletedContent: any[] = []
   displayLimit = 4;
+  filesSizeSum = 0;
 
   constructor(
     public photoService: PhotoService,
@@ -156,7 +157,7 @@ export class NewPublicationPage implements OnInit {
     ).then((picture) => {
       let fileObject = {
         FileBase64: picture,
-        FileExtension: this.removeTextBeforeSlash('jpeg')
+        FileExtension: this.removeTextBeforeSlash('jpeg','/')
       }
       this.seletedContent.push(fileObject)
     });
@@ -185,7 +186,7 @@ export class NewPublicationPage implements OnInit {
     ).then((picture) => {
       let fileObject = {
         FileBase64: picture,
-        FileExtension: this.removeTextBeforeSlash('jpeg')
+        FileExtension: this.removeTextBeforeSlash('jpeg','/')
       }
       this.seletedContent.push(fileObject)
     });
@@ -198,18 +199,28 @@ export class NewPublicationPage implements OnInit {
       ({
         multiple: true,
       });
+
+    
+      
+
     result.files.forEach(async element => {
+      console.log(element)
       if(this.checkFileType.checkFileType(element.mimeType) == 'image' || this.checkFileType.checkFileType(element.mimeType) == 'video') {
         this.convertBlobToBase64(element.blob).then((value) => {
-
-          console.log(element.mimeType)
+          this.filesSizeSum = this.filesSizeSum + element.size 
+         if(this.fileSizeToMB(this.filesSizeSum) <= 20) {
           let fileObject = {
             FileBase64: value,
-            FileExtension: this.removeTextBeforeSlash(element.mimeType)
+            FileExtension: this.removeTextBeforeSlash(element.mimeType,'/')
           }
           this.seletedContent.push(fileObject)
           this.filecontent = true;
-  
+         } else {
+          if(this.seletedContent.length === 0)
+          this.filesSizeSum = 0
+
+          this.httpErroHandle.validationMessagge('filessize');
+         }
         })
       } else {
         this.httpErroHandle.validationMessagge('filetype');
@@ -471,14 +482,330 @@ export class NewPublicationPage implements OnInit {
     })
   }
 
-  removeTextBeforeSlash(inputString) {
-    if (inputString.includes('/')) {
-      const parts = inputString.split('/');
+  removeTextBeforeSlash(inputString,mark) {
+    if (inputString.includes(mark)) {
+      const parts = inputString.split(mark);
       return parts.length > 1 ? parts[1] : inputString;
     } else {
       return inputString;
     }
   }
 
+  async compressVideoBase64(base64String: string, maxWidth: number, maxHeight: number, quality: number): Promise<string> {
+    console.log(base64String)
+    return new Promise(async (resolve, reject) => {
+      try {
+        // Decode the base64 video string to an ArrayBuffer
+        const trimmedBase64 = base64String.trim();
+        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');
+  
+          // Start continuous rendering
+          function render() {
+            context?.drawImage(video, 0, 0, newWidth, newHeight);
+            requestAnimationFrame(render);
+          }
+  
+          render();
+  
+          // 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', 0.5);
+        });
+      } 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');
+  
+        // 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;
+  
+        // 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;
+  
+          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');
+  
+          // 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
+          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);
+      }
+    });
+  } */
+  
+  private base64ToArrayBuffer(base64: string): ArrayBuffer {
+    const binaryString = window.atob(base64);
+    const len = binaryString.length;
+    const bytes = new Uint8Array(len);
+    for (let i = 0; i < len; ++i) {
+      bytes[i] = binaryString.charCodeAt(i);
+    }
+    return bytes.buffer;
+  }
+  
+  private async readBlobAsArrayBuffer(blob: Blob): Promise<ArrayBuffer> {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        if (reader.result instanceof ArrayBuffer) {
+          resolve(reader.result);
+        } else {
+          reject('Error reading blob as ArrayBuffer.');
+        }
+      };
+      reader.readAsArrayBuffer(blob);
+    });
+  }
+  
+  private arrayBufferToBase64(buffer: ArrayBuffer): string {
+    const binary = String.fromCharCode(...new Uint8Array(buffer));
+    return btoa(binary);
+  }
+  
+
+  fileSizeToMB(sizeInBytes) {
+    var sizeInMB = (sizeInBytes / (1024 * 1024)).toFixed(2);
+    console.log(sizeInMB + 'MB');
+    return parseInt(sizeInMB)
+  }
 
 }