feat: improved file download

skyecodes · Jul 11, 2023 · 08dc0f6 · 08dc0f6
1 parent 617ab96
commit 08dc0f6
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 61 deletions.
diff --git a/src/app/common/storage.service.ts b/src/app/common/storage.service.ts
@@ -1,28 +1,14 @@
 import {Injectable} from '@angular/core';
-import {HttpClient} from "@angular/common/http";
 import {environment} from "../../environments/environment";
-import {tap} from "rxjs";
 
 @Injectable({
   providedIn: 'root'
 })
 export class StorageService {
 
-  constructor(private http: HttpClient) {
-  }
-
   download(fileId: string) {
-    return this.http.get(environment.apiUrl + '/storage/' + fileId, {
-      responseType: 'blob',
-      observe: 'response'
-    }).pipe(tap(response => {
-      let downloadUrl = window.URL.createObjectURL(response.body!);
-      let filename = response.headers.get('Content-Disposition')!.substring(22);
-      filename = filename.substring(0, filename.length - 1);
-      let link = document.createElement('a');
-      link.href = downloadUrl;
-      link.download = filename;
-      link.click();
-    }));
+    let link = document.createElement('a');
+    link.href = environment.apiUrl + '/storage/' + fileId;
+    link.click();
   }
 }
diff --git a/src/app/converter/converter.component.ts b/src/app/converter/converter.component.ts
@@ -32,6 +32,7 @@ export class ConverterComponent {
   matcher = new CustomErrorStateMatcher();
   progressMode: ProgressSpinnerMode = 'indeterminate';
   progressValue: number = 0;
+  isCompleted: boolean = false;
 
   constructor(private converterService: ConverterService, private storageService: StorageService, private snackBar: MatSnackBar) {
     this.resetFile();
@@ -79,10 +80,10 @@ export class ConverterComponent {
   }
 
   getProgressText() {
-    if (this.progressValue == 0) {
-      return 'Preparing...';
-    } else if (this.progressValue == 100) {
+    if (this.isCompleted) {
       return 'Finalizing...';
+    } else if (this.progressValue == 0) {
+      return 'Preparing...';
     } else {
       return 'Processing ' + this.progressValue.toFixed() + '%';
     }
@@ -104,13 +105,18 @@ export class ConverterComponent {
   private handleProgress(processId: string) {
     this.converterService.getProgress(processId).subscribe({
       next: response => {
-        console.log(response);
-        if (!response.fileId) {
+        this.isCompleted = response.isCompleted;
+        if (!this.isCompleted) {
           this.progressMode = 'determinate';
           this.progressValue = response.progress;
         } else {
-          this.converterService.closeEventSource();
-          this.download(response.fileId);
+          this.progressMode = 'indeterminate';
+          this.progressValue = 0;
+          if (!!response.fileId) {
+            this.converterService.closeEventSource();
+            this.storageService.download(response.fileId);
+            this.resetProgress();
+          }
         }
       },
       error: err => {
@@ -127,27 +133,12 @@ export class ConverterComponent {
         this.resetProgress();
       }
     })
-
-  }
-
-  private download(fileId: string) {
-    this.storageService.download(fileId).subscribe({
-      next: () => {
-        this.resetProgress();
-      },
-      error: () => {
-        this.snackBar.open('An error occurred while downloading the file.', 'CLOSE', {
-          panelClass: 'snackbar-error'
-        });
-        this.resetProgress();
-      }
-    });
   }
 
   private resetProgress() {
     this.processing = false;
     this.progressMode = 'indeterminate';
     this.progressValue = 0;
-    //this.format.markAsPristine();
+    this.isCompleted = false;
   }
 }
diff --git a/src/app/downloader/downloader.component.ts b/src/app/downloader/downloader.component.ts
@@ -28,15 +28,16 @@ export class DownloaderComponent {
   matcher = new CustomErrorStateMatcher();
   progressMode: ProgressSpinnerMode = 'indeterminate';
   progressValue: number = 0;
+  isCompleted: boolean = false;
 
   constructor(private downloaderService: DownloaderService, private storageService: StorageService, private snackBar: MatSnackBar) {
   }
 
   getProgressText() {
-    if (this.progressValue == 0) {
-      return 'Preparing...';
-    } else if (this.progressValue == 100) {
+    if (this.isCompleted) {
       return 'Finalizing...';
+    } else if (this.progressValue == 0) {
+      return 'Preparing...';
     } else {
       return 'Processing ' + this.progressValue.toFixed() + '%';
     }
@@ -59,13 +60,18 @@ export class DownloaderComponent {
   private handleProgress(processId: string) {
     this.downloaderService.getProgress(processId).subscribe({
       next: response => {
-        console.log(response);
-        if (!response.fileId) {
+        this.isCompleted = response.isCompleted;
+        if (!this.isCompleted) {
           this.progressMode = 'determinate';
           this.progressValue = response.progress;
         } else {
-          this.downloaderService.closeEventSource();
-          this.download(response.fileId);
+          this.progressMode = 'indeterminate';
+          this.progressValue = 0;
+          if (!!response.fileId) {
+            this.downloaderService.closeEventSource();
+            this.storageService.download(response.fileId);
+            this.resetProgress();
+          }
         }
       },
       error: err => {
@@ -86,24 +92,11 @@ export class DownloaderComponent {
 
   }
 
-  private download(fileId: string) {
-    this.storageService.download(fileId).subscribe({
-      next: () => {
-        this.resetProgress();
-      },
-      error: () => {
-        this.snackBar.open('An error occurred while downloading the file.', 'CLOSE', {
-          panelClass: 'snackbar-error'
-        });
-        this.resetProgress();
-      }
-    });
-  }
-
   private resetProgress() {
     this.processing = false;
     this.progressMode = 'indeterminate';
     this.progressValue = 0;
+    this.isCompleted = false;
     this.form.markAsPristine();
   }
 }