Merge pull request #384 from vkartk/feature/add-file-size

Implement File Size Display on Downloads Page - Resolves #322

app/ytdl.py

@@ -39,6 +39,7 @@ class DownloadInfo:
         self.custom_name_prefix = custom_name_prefix
         self.msg = self.percent = self.speed = self.eta = None
         self.status = "pending"
+        self.size = None
         self.timestamp = time.time_ns()
         self.error = error
 
@@ -138,7 +139,9 @@ class Download:
                 return
             self.tmpfilename = status.get('tmpfilename')
             if 'filename' in status:
-                self.info.filename = os.path.relpath(status.get('filename'), self.download_dir)
+                fileName = status.get('filename')
+                self.info.filename = os.path.relpath(fileName, self.download_dir)
+                self.info.size = os.path.getsize(fileName) if os.path.exists(fileName) else None
 
                 # Set correct file extension for thumbnails
                 if(self.info.format == 'thumbnail'):

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>

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

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 (isNaN(value) || 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]}`;
+  }
+}