fix publication preview

src/app/pages/publications/new-publication/new-publication.page.html

@@ -40,7 +40,7 @@
 
               <video *ngIf="checkFileType.checkFileType(seleted.FileExtension)  == 'video'" width="70" height="70"
                 controls="controls" preload="metadata" autoplay="autoplay" webkit-playsinline="webkit-playsinline">
-                <source type="video/mp4" [src]="'data:video/mp4;base64,' + seleted.FileBase64">
+                <source type="video/mp4" [src]="seleted.FileBase64">
               </video>
 
             </ion-thumbnail>

src/app/pages/publications/view-publications/publication-detail/publication-detail.page.html

@@ -31,7 +31,7 @@
 
               <video *ngIf="checkFileType.checkFileType(files.FileExtension ) == 'video'" class="post-video" controls="controls" preload="metadata"
                 webkit-playsinline="webkit-playsinline" (play)="StopvideoService.registerVideoWithEvent($event)" >
-                <source src="{{'data:video/mp4;base64,' + files.FileBase64}}" type="video/mp4">
+                <source [src]="files.FileBase64" type="video/mp4">
               </video>
 
             </div>

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

@@ -53,7 +53,7 @@
 
                   <video #videoElement [appVisibility]="onVisibilityChange" *ngIf="checkFileType.checkFileType(files.FileExtension ) == 'video'" class="post-video" controls="controls" preload="metadata"
                     webkit-playsinline="webkit-playsinline" (play)="stopvideoService.registerVideoWithEvent($event)" (click)="preventVideoPlay($event)">
-                    <source src="{{'data:video/mp4;base64,' + files.FileBase64}}" type="video/mp4">
+                    <source [src]="files.FileBase64" type="video/mp4">
                   </video>
 
                 </div>

src/app/services/http/http-service.service.ts

@@ -1,8 +1,6 @@
-import { HttpContext, HttpHeaders, HttpParams } from '@angular/common/http';
+import { HttpHeaders, HttpParams } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { tap, shareReplay, catchError } from "rxjs/operators";
-import { Observable, of } from "rxjs";
 
 @Injectable({
   providedIn: 'root'
@@ -15,9 +13,8 @@ export class HttpServiceService {
     return this.http.put<T>(url, body, options as any)
   }
 
-
+  post<T>(url: string, body, option = null) {
-  post<T>(url: string, body: any | null, options: Options) {
+    return this.http.post<T>(url, body, option)
-    return this.http.post<T>(url, body, options as any)
   }
 
   get<T>(url: string, options: Options) {
@@ -26,7 +23,6 @@ export class HttpServiceService {
 
 }
 
-
 interface Options {
   headers?: HttpHeaders
   params?: HttpParams

src/app/shared/API/middleware/interface.d.ts

@@ -152,6 +152,11 @@ interface CreateOrganizer {
   IsRequired: boolean;
   UserType: string;
 }
+
+
+export interface IuploadFileLK {
+  path: string
+}
 // ================================================ PUT =============================================
 
 

src/app/shared/API/middleware/middleware-service.service.ts

@@ -2,8 +2,8 @@ import { Injectable } from '@angular/core';
 import { environment } from 'src/environments/environment';
 import { HttpServiceService } from 'src/app/services/http/http-service.service';
 import { Observable} from 'rxjs';
-import { CreateEvent, EditEvent, EventDetailsDTO, EventsDTO, refreshTokenDTO } from "./interface";
+import { CreateEvent, EditEvent, EventDetailsDTO, EventsDTO, IuploadFileLK, refreshTokenDTO } from "./interface";
-import { HttpHeaders, HttpParams } from '@angular/common/http';
+import { HttpClient, HttpEvent, HttpHeaders, HttpParams } from '@angular/common/http';
 import { DetectCalendars, makeHeaderForCalendar } from '../../utils/utils';
 import { z } from "zod";
 import { ok, err } from 'neverthrow';
@@ -18,6 +18,7 @@ export class MiddlewareServiceService {
 
   constructor(
     private HttpServiceService: HttpServiceService,
+    private http: HttpClient,
   ) {
     window["MiddlewareServiceService"] = this
   }
@@ -152,6 +153,6 @@ export class MiddlewareServiceService {
       headers: headers
     };
 
-    return this.HttpServiceService.post(`${geturl}`, formData, options);
+    return this.http.post<IuploadFileLK>(`${geturl}`, formData, options)
   }
 }

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

@@ -13,7 +13,7 @@ import { checkFileTypeService } from 'src/app/services/checkFileType.service';
 import { FileValidatorService } from "src/app/services/file/file-validator.service"
 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';
 
 enum  ActionType  {
   newRapid = "1",
@@ -174,6 +174,8 @@ export class NewPublicationPage implements OnInit {
         }
       )
 
+      newAttachment.needUpload()
+
       this.seletedContent.push(newAttachment)
 
     });
@@ -216,6 +218,7 @@ export class NewPublicationPage implements OnInit {
         }
       )
 
+      newAttachment.needUpload();
       this.seletedContent.push(newAttachment)
     });
 
@@ -229,23 +232,25 @@ export class NewPublicationPage implements OnInit {
       });
 
 
-    result.files.forEach(async element => {
+    result.files.forEach(async blobFile => {
-      if(this.checkFileType.checkFileType(element.mimeType) == 'image' || this.checkFileType.checkFileType(element.mimeType) == 'video') {
+      if(this.checkFileType.checkFileType(blobFile.mimeType) == 'image' || this.checkFileType.checkFileType(blobFile.mimeType) == 'video') {
-        this.convertBlobToBase64(element.blob).then((value) => {
+        this.convertBlobToBase64(blobFile.blob).then((value) => {
-          this.filesSizeSum = this.filesSizeSum + element.size
+          this.filesSizeSum = this.filesSizeSum + blobFile.size
          if(this.fileSizeToMB(this.filesSizeSum) <= 20) {
 
-          const FileExtension = this.removeTextBeforeSlash(element.mimeType,'/')
+          const FileExtension = this.removeTextBeforeSlash(blobFile.mimeType,'/')
 
           const newAttachment = new PublicationAttachmentEntity(
             {
               base64: value,
               extension: FileExtension,
-              blob: element.blob,
+              blobFile: blobFile,
               FileType: 'video'
             }
           )
 
+          newAttachment.needUpload()
+
           this.seletedContent.push(newAttachment)
           this.filecontent = true;
          } else {
@@ -406,8 +411,26 @@ export class NewPublicationPage implements OnInit {
           Files: this.seletedContent,
         }
 
-        this.publicationFormMV.setDataToFrom(this.publication)
+
-        this.publicationFormMV.uploadVideosFiles();
+        const loader = this.toastService.loading()
+
+        try {
+
+          await this.publications.CreatePublication(this.publication.ProcessId, this.publication).toPromise()
+          if (this.publicationTitle == '1') {
+
+          } else if (this.publicationTitle == '2') {
+            this.httpErroHandle.httpsSucessMessagge('Criar publicação')
+          } else if (this.publicationTitle == '3') {
+            this.httpErroHandle.httpsSucessMessagge('Editar publicação')
+          }
+
+          this.goBackToViewPublications.emit();
+        } catch (error) {
+          this.httpErroHandle.httpStatusHandle(error)
+        } finally {
+          loader.remove()
+        }
 
 
       } else {
@@ -834,101 +857,164 @@ export class NewPublicationPage implements OnInit {
 
 }
 
+// class UploadFileUseCase {
+//   LakefsRepositoryService:  LakefsRepositoryService = window["LakefsRepositoryService"]
+//   constructor() {}
+//   execute(attachment: PublicationAttachmentEntity) {
+
+//     const file: File = attachment.blob
+
+//     const chunkSize = 1024 * 100; // Adjust the chunk size as needed
+//     const fileSize = file.size;
+//     let uploadedSize = 0
+//     const totalChunks = Math.ceil(fileSize / chunkSize);
+//     let offset = 0;
+//     let i = 1;
+//     let j = 0;
+//     let path;
+
+//     function count () {
+//       j++
+//       return j
+//     }
+
+//     const readAndUploadChunk = async(index: number) => {
+//       return new Promise<void>((resolve, reject) => {
+//         const chunk = file.slice(offset, offset + chunkSize);
+//         const reader = new FileReader();
+
+//         reader.onload = async () => {
+//           const blob = new Blob([reader.result as ArrayBuffer]);
+//           const formData = new FormData();
+//           const file = new File([blob], "test.mp4", { type: blob.type });
+
+//           uploadedSize =+ file.size
+
+//           formData.append("blobFile", file);
+//           formData.append("length", totalChunks.toString());
+//           formData.append("index", index.toString());
+//           formData.append("path", path);
+
+//           try {
+//             const response = await this.LakefsRepositoryService.uploadFile(formData).toPromise()
+
+//             console.log({response})
+
+//             resolve()
+//           } catch (erro) {
+//             reject()
+//           }
+
+//         };
+
+//         reader.readAsArrayBuffer(chunk);
+//         offset += chunkSize;
+//       });
+//     }
+
+//     const  loop = async() => {
+
+//       for (let index = 2; index <= totalChunks; index++) {
+//         await readAndUploadChunk(index);
+//       }
+
+//     }
+
+//      const startUpload = async() => {
+//       const index = count();
+//       const chunk = file.slice(offset, offset + chunkSize);
+//       const reader = new FileReader();
+
+//       reader.onload = async () => {
+//         const blob = new Blob([reader.result as ArrayBuffer]);
+//         const formData = new FormData();
+//         const file = new File([blob], "test.mp4", { type: blob.type });
+//         uploadedSize =+ file.size
+//         formData.append("blobFile", file);
+//         formData.append("length", totalChunks.toString());
+//         formData.append("index", index.toString());
+
+
+//         const response: any = await this.LakefsRepositoryService.uploadFile(formData).toPromise()
+
+//         console.log({ response, index });
+//         if (index === 1) {
+//           path = response.path;
+//         }
+
+//         await loop();
+//       };
+
+//       reader.readAsArrayBuffer(chunk);
+//       offset += chunkSize;
+//     }
+
+//     startUpload();
+
+
+//   }
+// }
+
+
+
+
 class UploadFileUseCase {
   LakefsRepositoryService:  LakefsRepositoryService = window["LakefsRepositoryService"]
   constructor() {}
-  execute(attachment: PublicationAttachmentEntity) {
+  async execute(ChucksManager: ChucksManager): Promise<Result<ChucksManager, ChucksManager>> {
 
-    const file: File = attachment.blob
-
-    const chunkSize = 1024 * 100; // Adjust the chunk size as needed
-    const fileSize = file.size;
-    let uploadedSize = 0
-    const totalChunks = Math.ceil(fileSize / chunkSize);
-    let offset = 0;
-    let i = 1;
-    let j = 0;
     let path;
 
-    function count () {
+    function makeFrom({blobFile, index, path}) {
-      j++
+
-      return j
+      const formData = new FormData();
+
+      formData.append("blobFile", blobFile);
+      formData.append("length", ChucksManager.chunks.totalChunks.toString());
+      formData.append("index", index.toString());
+      formData.append("path", path);
+
+      return formData
     }
 
     const readAndUploadChunk = async(index: number) => {
-      return new Promise<void>((resolve, reject) => {
-        const chunk = file.slice(offset, offset + chunkSize);
-        const reader = new FileReader();
 
-        reader.onload = async () => {
+      const chunk = await ChucksManager.chunks.getChunks(index)
-          const blob = new Blob([reader.result as ArrayBuffer]);
+      const blob = new Blob([chunk]);
-          const formData = new FormData();
+      const blobFile = new File([blob], "test.mp4", { type: blob.type });
-          const file = new File([blob], "test.mp4", { type: blob.type });
 
-          uploadedSize =+ file.size
+      const form = makeFrom({blobFile, index, path})
 
-          formData.append("blobFile", file);
+      return await this.LakefsRepositoryService.uploadFile(form)
-          formData.append("length", totalChunks.toString());
-          formData.append("index", index.toString());
-          formData.append("path", path);
-
-          try {
-            const response = await this.LakefsRepositoryService.uploadFile(formData).toPromise()
-
-            console.log({response})
-
-            resolve()
-          } catch (erro) {
-            reject()
-          }
-
-        };
-
-        reader.readAsArrayBuffer(chunk);
-        offset += chunkSize;
-      });
     }
 
-    const  loop = async() => {
+    if(!ChucksManager.hasPath()) {
 
-      for (let index = 2; index <= totalChunks; index++) {
+      const initIndex = ChucksManager.uploadsCount + 1
-        await readAndUploadChunk(index);
+      const chuck = await ChucksManager.chunks.getChunks(initIndex)
+      const blob = new Blob([chuck]);
+      const blobFile = new File([blob], "test.mp4", { type: blob.type });
+      const form = makeFrom({blobFile, index: initIndex, path})
+
+      const uploadRequest = await this.LakefsRepositoryService.uploadFile(form)
+
+      if(uploadRequest.isOk()) {
+        path = uploadRequest.value.path
+      } else {
+        return err(ChucksManager)
       }
-
     }
 
-     const startUpload = async() => {
+    const indexContinuation = ChucksManager.uploadsCount + 1
-      const index = count();
+    for (let index = indexContinuation; index <= ChucksManager.chunks.totalChunks; index++) {
-      const chunk = file.slice(offset, offset + chunkSize);
+      const uploadRequest = await readAndUploadChunk(index)
-      const reader = new FileReader();
 
-      reader.onload = async () => {
+      if(uploadRequest.isErr()) {
-        const blob = new Blob([reader.result as ArrayBuffer]);
+        return err(ChucksManager)
-        const formData = new FormData();
+      }
-        const file = new File([blob], "test.mp4", { type: blob.type });
-        uploadedSize =+ file.size
-        formData.append("blobFile", file);
-        formData.append("length", totalChunks.toString());
-        formData.append("index", index.toString());
-
-
-        const response: any = await this.LakefsRepositoryService.uploadFile(formData).toPromise()
-
-        console.log({ response, index });
-        if (index === 1) {
-          path = response.path;
-        }
-
-        await loop();
-      };
-
-      reader.readAsArrayBuffer(chunk);
-      offset += chunkSize;
     }
 
-    startUpload();
+    return ok(ChucksManager)
-
-
   }
 }
 
@@ -937,12 +1023,14 @@ class PublicationAttachmentEntity {
   FileExtension: string
   FileType: 'image' | 'video'
   OriginalFileName: string
-  blob: any
+  blobFile: File
+  toUpload = false;
+  chucksManager : ChucksManager
 
-  constructor({base64, extension, blob = null, OriginalFileName = null, FileType}) {
+  constructor({base64, extension, blobFile = null, OriginalFileName = null, FileType}) {
     this.FileBase64 = base64;
     this.FileExtension = extension;
-    this.blob = blob
+    this.blobFile = blobFile
     this.OriginalFileName = OriginalFileName
     this.FileType = FileType
 
@@ -961,6 +1049,18 @@ class PublicationAttachmentEntity {
 
     }
   }
+
+  needUpload() {
+    this.toUpload = true
+  }
+
+  setChunkManger (chunks: Chunks) {
+    this.chucksManager = new ChucksManager({chunks})
+  }
+
+  get hasChunkManager() {
+    return this.chucksManager != null
+  }
 }
 
 interface IPublicationFormModelEntity  {
@@ -1004,17 +1104,25 @@ class PublicationFormMV {
 
   private async upload(PublicationAttachmentEntity: PublicationAttachmentEntity) {
 
-    console.log(PublicationAttachmentEntity)
+    const fileBlob = PublicationAttachmentEntity.blobFile;
-    this.UploadFileUseCase.execute(PublicationAttachmentEntity)
+    const fileChunks = new Chunks({chunkSize: 1024 })
+    fileChunks.setFile(fileBlob)
+
+    PublicationAttachmentEntity.setChunkManger(fileChunks)
+
+
+    const ChucksManagers = new ChucksManager({chunks: fileChunks})
+
+    this.UploadFileUseCase.execute(ChucksManagers)
   }
 
   uploadVideosFiles() {
 
     const videosFiles = this.getVideoFiles()
 
-    console.log(this.form)
+    const videosFilesToUploads = videosFiles.filter( e => e.toUpload == true)
 
-    for(const file of videosFiles) {
+    for(const file of videosFilesToUploads) {
       this.upload(file)
     }
   }
@@ -1022,5 +1130,75 @@ class PublicationFormMV {
 }
 
 
+class Chunks {
 
+  chunkSize: number
+  private file: File
 
+  constructor({chunkSize}) {
+    this.chunkSize = chunkSize
+  }
+
+  get totalChunks () {
+    return Math.ceil(this.file.size / this.chunkSize);
+  }
+
+  // Function to read a chunk of the file
+  readChunk(start: number, end: number): Promise<ArrayBuffer> {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        if (reader.result instanceof ArrayBuffer) {
+          resolve(reader.result);
+        } else {
+          reject(new Error("Failed to read chunk"));
+        }
+      };
+      reader.readAsArrayBuffer(this.file.slice(start, end));
+    });
+  }
+
+  setFile(file: File) {
+    this.file = file
+  }
+
+  async getChunks(i: number) {
+    i--
+    if(i < this.totalChunks) {
+      const start = i * this.chunkSize;
+      const end = Math.min(start + this.chunkSize, this.file.size);
+      const chunk = await this.readChunk(start, end);
+
+      return chunk
+    }
+  }
+
+}
+
+interface IUploadResponse {
+  result: Result<string, Error>
+  attemp: number
+}
+
+class ChucksManager {
+  chunks: Chunks
+  uploads: IUploadResponse[] = []
+  path: string =''
+
+  get uploadsCount() {
+    return this.uploads.length
+  }
+
+  uploadFunc: Function
+  constructor({chunks}) {
+    this.chunks = chunks
+  }
+
+  setPath(path: string) {
+    this.path = path
+  }
+
+  hasPath() {
+    return this.path != undefined
+  }
+}

src/app/shared/publication/view-publications/publication-detail/publication-detail.page.html

@@ -41,12 +41,13 @@
 
             <video *ngIf="checkFileType.checkFileType(files.FileExtension ) == 'video'" controls="controls" preload="metadata"
               webkit-playsinline="webkit-playsinline">
-              <source src="{{'data:video/mp4;base64,' + files.FileBase64}}" type="video/mp4">
+              <source [src]="files.FileBase64" type="video/mp4">
             </video>
 
           </div>
         </swiper-slide>
       </swiper-container>
+
       <!-- <div *ngIf="publication.FileBase64.length < 30" class="post-img">
         <img src="/assets/icon/icon-no-image.svg" alt="image">
       </div> -->

src/app/shared/publication/view-publications/view-publications.page.html

@@ -51,11 +51,14 @@
 
               <video [appVisibility]="onVisibilityChange" #myVideo #videoElement *ngIf="checkFileType.checkFileType(files.FileExtension ) == 'video'" class="post-video" controls="controls" preload="metadata"
                 webkit-playsinline="webkit-playsinline" class="videoPlayer"  (click)="preventVideoPlay($event)">
-                <source [src]="'data:video/mp4;base64,' + files.FileBase64" type="video/mp4" >
+                <source [src]="files.FileBase64" type="video/mp4" >
               </video>
 
+
             </div>
           </swiper-slide>
+
+
 <!--
           <div class="swiper-button-next"
           style="

src/app/shared/repository/lakefs/interface.d.ts

@@ -0,0 +1 @@
+export interface IUpload {}

src/app/shared/repository/lakefs/lakefs-repository.service.ts

@@ -1,5 +1,8 @@
 import { Injectable } from '@angular/core';
 import { MiddlewareServiceService } from "src/app/shared/API/middleware/middleware-service.service";
+import { ok, err, Result } from 'neverthrow';
+import { IuploadFileLK } from '../../API/middleware/interface';
+
 
 @Injectable({
   providedIn: 'root'
@@ -10,8 +13,14 @@ export class LakefsRepositoryService {
     window["LakefsRepositoryService"] = this
   }
 
+  async uploadFile(formData: FormData): Promise<Result<IuploadFileLK, false>> {
 
-  uploadFile(formData: FormData) {
+    try {
-    return this.MiddlewareServiceService.uploadFileLK(formData)
+      const result = await this.MiddlewareServiceService.uploadFileLK(formData).toPromise();
+
+      return ok(result)
+    } catch(error) {
+      return err(error)
+    }
   }
 }