Merge branch 'feature/viewer-attachment' of bitbucket.org:equilibriumito/gabinete-digital-fo into feature/viewer-attachment

package-lock.json

@@ -51,6 +51,8 @@
         "@capacitor/storage": "^1.2.5",
         "@capawesome/capacitor-file-picker": "^5.3.0",
         "@capawesome/capacitor-screen-orientation": "^5.0.1",
+        "@ffmpeg/ffmpeg": "^0.12.10",
+        "@ffmpeg/util": "^0.12.1",
         "@fortawesome/angular-fontawesome": "^0.9.0",
         "@fortawesome/fontawesome-free": "^5.15.3",
         "@fortawesome/fontawesome-svg-core": "^1.2.35",
@@ -4329,6 +4331,33 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/@ffmpeg/ffmpeg": {
+      "version": "0.12.10",
+      "resolved": "https://registry.npmjs.org/@ffmpeg/ffmpeg/-/ffmpeg-0.12.10.tgz",
+      "integrity": "sha512-lVtk8PW8e+NUzGZhPTWj2P1J4/NyuCrbDD3O9IGpSeLYtUZKBqZO8CNj1WYGghep/MXoM8e1qVY1GztTkf8YYQ==",
+      "dependencies": {
+        "@ffmpeg/types": "^0.12.2"
+      },
+      "engines": {
+        "node": ">=18.x"
+      }
+    },
+    "node_modules/@ffmpeg/types": {
+      "version": "0.12.2",
+      "resolved": "https://registry.npmjs.org/@ffmpeg/types/-/types-0.12.2.tgz",
+      "integrity": "sha512-NJtxwPoLb60/z1Klv0ueshguWQ/7mNm106qdHkB4HL49LXszjhjCCiL+ldHJGQ9ai2Igx0s4F24ghigy//ERdA==",
+      "engines": {
+        "node": ">=16.x"
+      }
+    },
+    "node_modules/@ffmpeg/util": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/@ffmpeg/util/-/util-0.12.1.tgz",
+      "integrity": "sha512-10jjfAKWaDyb8+nAkijcsi9wgz/y26LOc1NKJradNMyCIl6usQcBbhkjX5qhALrSBcOy6TOeksunTYa+a03qNQ==",
+      "engines": {
+        "node": ">=18.x"
+      }
+    },
     "node_modules/@firebase/analytics": {
       "version": "0.6.18",
       "resolved": "https://registry.npmjs.org/@firebase/analytics/-/analytics-0.6.18.tgz",
@@ -46791,6 +46820,24 @@
       "integrity": "sha512-Fxt+AfXgjMoin2maPIYzFZnQjAXjAL0PHscM5pRTtatFqB+vZxAM9tLp2Optnuw3QOQC40jTNeGYFOMvyf7v9g==",
       "dev": true
     },
+    "@ffmpeg/ffmpeg": {
+      "version": "0.12.10",
+      "resolved": "https://registry.npmjs.org/@ffmpeg/ffmpeg/-/ffmpeg-0.12.10.tgz",
+      "integrity": "sha512-lVtk8PW8e+NUzGZhPTWj2P1J4/NyuCrbDD3O9IGpSeLYtUZKBqZO8CNj1WYGghep/MXoM8e1qVY1GztTkf8YYQ==",
+      "requires": {
+        "@ffmpeg/types": "^0.12.2"
+      }
+    },
+    "@ffmpeg/types": {
+      "version": "0.12.2",
+      "resolved": "https://registry.npmjs.org/@ffmpeg/types/-/types-0.12.2.tgz",
+      "integrity": "sha512-NJtxwPoLb60/z1Klv0ueshguWQ/7mNm106qdHkB4HL49LXszjhjCCiL+ldHJGQ9ai2Igx0s4F24ghigy//ERdA=="
+    },
+    "@ffmpeg/util": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/@ffmpeg/util/-/util-0.12.1.tgz",
+      "integrity": "sha512-10jjfAKWaDyb8+nAkijcsi9wgz/y26LOc1NKJradNMyCIl6usQcBbhkjX5qhALrSBcOy6TOeksunTYa+a03qNQ=="
+    },
     "@firebase/analytics": {
       "version": "0.6.18",
       "resolved": "https://registry.npmjs.org/@firebase/analytics/-/analytics-0.6.18.tgz",

package.json

@@ -67,6 +67,8 @@
     "@capacitor/storage": "^1.2.5",
     "@capawesome/capacitor-file-picker": "^5.3.0",
     "@capawesome/capacitor-screen-orientation": "^5.0.1",
+    "@ffmpeg/ffmpeg": "^0.12.10",
+    "@ffmpeg/util": "^0.12.1",
     "@fortawesome/angular-fontawesome": "^0.9.0",
     "@fortawesome/fontawesome-free": "^5.15.3",
     "@fortawesome/fontawesome-svg-core": "^1.2.35",

src/app/app.module.ts

@@ -29,6 +29,7 @@ import { Network } from '@ionic-native/network/ngx';
 import { MultipleDocumentsPicker } from '@awesome-cordova-plugins/multiple-document-picker/ngx';
 import { DocumentViewer } from '@awesome-cordova-plugins/document-viewer/ngx';
 import { FFMpeg } from '@awesome-cordova-plugins/ffmpeg/ngx';
+import { FFmpeg } from '@ffmpeg/ffmpeg';
 
 
 
@@ -218,6 +219,7 @@ import { FirebaseX } from '@ionic-native/firebase-x/ngx'; */
     FileOpener,
     DocumentViewer,
     FFMpeg,
+    FFmpeg,
     { provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptorService, multi: true },
     chatTokenInterceptor,
     tokenInterceptor,

src/app/pages/publications/view-publications/view-publications.page.scss

@@ -164,6 +164,7 @@ video {
 }
 .post-content {
   margin: 0 auto;
+  margin-top: 20px;
   margin-bottom: 35px;
 }
 .post-title-time {

src/app/services/videoconvert.service.ts

@@ -1,5 +1,7 @@
 import { Injectable } from '@angular/core';
 import { FFMpeg } from '@awesome-cordova-plugins/ffmpeg/ngx';
+import { FFmpeg } from '@ffmpeg/ffmpeg';
+import { fetchFile, toBlobURL } from '@ffmpeg/util';
 
 @Injectable({
   providedIn: 'root'
@@ -7,15 +9,59 @@ import { FFMpeg } from '@awesome-cordova-plugins/ffmpeg/ngx';
 export class VideoconvertService {
 
   constructor(
-    private ffmpeg: FFMpeg
+    private ffmpeg: FFMpeg,
+    private ffmpegWeb: FFmpeg
   ) { }
 
-  async convertVideo(inputPath, outputPath,filename, formart) {
+  async convertVideo(inputPath, outputPath, filename, formart) {
-    const ffmpegCommand = `-i "${inputPath}" -c:v copy -c:a aac -strict experimental "${outputPath}${filename}.${formart}"`;
+    try {
+      const ffmpegCommand = `-i "${inputPath}" -c:v copy -c:a aac -strict experimental "${outputPath}${filename}.${formart}"`;
 
-    const result = await this.ffmpeg.exec(ffmpegCommand)
+      const result = await this.ffmpeg.exec(ffmpegCommand)
 
-    console.log('Convert returns ', `${outputPath}${filename}.${formart}`);
+      console.log('Convert returns ', `${outputPath}${filename}.${formart}`);
+    } catch (error) {
+      console.error('Error during conversion:', error);
+      throw error; // Re-throwing the error for handling in the component
+    }
+  }
+
+  async convertVideoWeb(inputPath, outputPath, filename, format) {
+    try {
+        console.log('Conversion started...');
+
+        const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.6/dist/umd';
+        const coreURL = await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript');
+        const wasmURL = await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm');
+
+        await this.ffmpegWeb.load();
+
+        const inputType = inputPath.type.split('/').pop();
+        console.log(inputType)
+        await this.ffmpegWeb.writeFile(`input.${inputType}`, await fetchFile(inputPath));
+
+        await this.ffmpegWeb.exec(['-i', `input.${inputType}`, 'output.mp4']);
+
+        const outputData: any = await this.ffmpegWeb.readFile('output.mp4');
+        const outputBlob = new Blob([outputData.buffer], { type: 'video/mp4' });
+        const outputFile = new File([outputBlob], `${filename}.mp4`, { type: 'video/mp4' });
+
+        console.log('Conversion completed.');
+        return outputFile;
+    } catch (error) {
+        console.error('Error during conversion:', error);
+        throw error;
+    }
+}
+
+
+  removeTextBeforeSlash(inputString, mark) {
+    if (inputString.includes(mark)) {
+      const parts = inputString.split(mark);
+      return parts.length > 1 ? parts[1] : inputString;
+    } else {
+      return inputString;
+    }
   }
 
 }

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

@@ -248,6 +248,9 @@ export class NewPublicationPage implements OnInit {
           console.log(erro)
         })
       } else if (this.checkFileType.checkFileType(blobFile.mimeType) == 'video'){
+
+        let convertedVideo = await this.videoconvertService.convertVideoWeb(blobFile.blob,"src/assets/videos/","output",'mp4')
+
         this.convertBlobToBase64(blobFile.blob).then((value: string) => {
 
           this.filesSizeSum = this.filesSizeSum + blobFile.size
@@ -259,7 +262,7 @@ export class NewPublicationPage implements OnInit {
             const newAttachment = new PublicationAttachmentEntity(
               {
                 base64: this.removeTextBeforeSlash(value, ','),
-                extension: FileExtension,
+                extension: 'mp4',
                 blobFile: file,
                 FileType: this.checkFileType.checkFileType(FileExtension) as any,
                 OriginalFileName: 'load video'

src/app/shared/swiper/swiper.page.html

@@ -5,7 +5,7 @@
 </ion-header> -->
 
 <ion-content>
-  <swiper-container #swipers [slidechange]="onSlideChange()" [navigation]="navigation">
+  <swiper-container #swipers [slidechange]="onSlideChange()" [navigation]="navigation" autoHeight="true">
     <swiper-slide *ngFor="let files of publicationList.Files let k = index">
       <div >
         <img  *ngIf="checkFileType.checkFileType(files.FileExtension ) == 'image'" class="post-img"