From 3f4240a526fdebb0fe0805cc1a8818bc772175c0 Mon Sep 17 00:00:00 2001
From: vkartk <53650724+vkartk@users.noreply.github.com>
Date: Fri, 26 Jan 2024 09:39:39 +0530
Subject: [PATCH] Frontend: Implement file size display in Downloads interface
 (#322)

---
 ui/src/app/app.component.html |  3 +++
 ui/src/app/app.module.ts      |  3 ++-
 ui/src/app/downloads.pipe.ts  | 15 +++++++++++++++
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html
index e444fab..a47bb15 100644
--- a/ui/src/app/app.component.html
+++ b/ui/src/app/app.component.html
@@ -153,6 +153,7 @@
           <button type="button" class="btn btn-link text-decoration-none px-0 me-4" disabled #doneClearCompleted (click)="clearCompletedDownloads()"><fa-icon [icon]="faCheckCircle"></fa-icon>&nbsp; Clear completed</button>
           <button type="button" class="btn btn-link text-decoration-none px-0 me-4" disabled #doneClearFailed (click)="clearFailedDownloads()"><fa-icon [icon]="faTimesCircle"></fa-icon>&nbsp; Clear failed</button>
         </th>
+        <th scope="col" >File Size</th>
         <th scope="col" style="width: 2rem;"></th>
         <th scope="col" style="width: 2rem;"></th>
         <th scope="col" style="width: 2rem;"></th>
@@ -176,6 +177,8 @@
             <span *ngIf="download.value.error"><br>Error: {{download.value.error}}</span>
           </ng-template>
         </td>
+        <td>
+          <span *ngIf="download.value.size">{{ download.value.size | fileSize }}</span>
         <td>
           <button *ngIf="download.value.status == 'error'" type="button" class="btn btn-link" (click)="retryDownload(download.key, download.value)"><fa-icon [icon]="faRedoAlt"></fa-icon></button>
         </td>
diff --git a/ui/src/app/app.module.ts b/ui/src/app/app.module.ts
index 35e0621..e944c83 100644
--- a/ui/src/app/app.module.ts
+++ b/ui/src/app/app.module.ts
@@ -7,7 +7,7 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { CookieService } from 'ngx-cookie-service';
 
 import { AppComponent } from './app.component';
-import { EtaPipe, SpeedPipe, EncodeURIComponent } from './downloads.pipe';
+import { EtaPipe, SpeedPipe, EncodeURIComponent, FileSizePipe } from './downloads.pipe';
 import { MasterCheckboxComponent, SlaveCheckboxComponent } from './master-checkbox.component';
 import { MeTubeSocket } from './metube-socket';
 import { NgSelectModule } from '@ng-select/ng-select';
@@ -18,6 +18,7 @@ import { ServiceWorkerModule } from '@angular/service-worker';
     AppComponent,
     EtaPipe,
     SpeedPipe,
+    FileSizePipe,
     EncodeURIComponent,
     MasterCheckboxComponent,
     SlaveCheckboxComponent
diff --git a/ui/src/app/downloads.pipe.ts b/ui/src/app/downloads.pipe.ts
index 55223c3..0ad7b78 100644
--- a/ui/src/app/downloads.pipe.ts
+++ b/ui/src/app/downloads.pipe.ts
@@ -44,3 +44,18 @@ export class EncodeURIComponent implements PipeTransform {
     return encodeURIComponent(value);
   }
 }
+
+@Pipe({ 
+  name: 'fileSize' 
+})
+export class FileSizePipe implements PipeTransform {
+  transform(value: number): string {
+      if (value === 0) return '0 Bytes';
+
+      const units = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+      const unitIndex = Math.floor(Math.log(value) / Math.log(1000)); // Use 1000 for common units
+
+      const unitValue = value / Math.pow(1000, unitIndex);
+      return `${unitValue.toFixed(2)} ${units[unitIndex]}`;
+  }
+}
\ No newline at end of file