feat(frontend): modernize Angular app

ui/src/app/pipes/eta.pipe.ts

@@ -0,0 +1,21 @@
+import { Pipe, PipeTransform } from "@angular/core";
+
+@Pipe({
+    name: 'eta',
+})
+export class EtaPipe implements PipeTransform {
+  transform(value: number): string | null {
+    if (value === null) {
+      return null;
+    }
+    if (value < 60) {
+      return `${Math.round(value)}s`;
+    }
+    if (value < 3600) {
+      return `${Math.floor(value/60)}m ${Math.round(value%60)}s`;
+    }
+    const hours = Math.floor(value/3600)
+    const minutes = value % 3600
+    return `${hours}h ${Math.floor(minutes/60)}m ${Math.round(minutes%60)}s`;
+  }
+}

ui/src/app/pipes/file-size.pipe.ts

@@ -0,0 +1,16 @@
+import { Pipe, PipeTransform } from "@angular/core";
+
+@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]}`;
+  }
+}

ui/src/app/pipes/index.ts

@@ -0,0 +1,3 @@
+export { EtaPipe } from './eta.pipe';
+export { SpeedPipe } from './speed.pipe';
+export { FileSizePipe } from './file-size.pipe';

ui/src/app/pipes/speed.pipe.ts

@@ -0,0 +1,43 @@
+import { Pipe, PipeTransform } from "@angular/core";
+import { BehaviorSubject, throttleTime } from "rxjs";
+
+@Pipe({
+    name: 'speed',
+    pure: false // Make the pipe impure so it can handle async updates
+})
+export class SpeedPipe implements PipeTransform {
+  private speedSubject = new BehaviorSubject<number>(0);
+  private formattedSpeed = '';
+
+  constructor() {
+    // Throttle updates to once per second
+    this.speedSubject.pipe(
+      throttleTime(1000)
+    ).subscribe(speed => {
+      // If speed is invalid or 0, return empty string
+      if (speed === null || speed === undefined || isNaN(speed) || speed <= 0) {
+        this.formattedSpeed = '';
+        return;
+      }
+      
+      const k = 1024;
+      const dm = 2;
+      const sizes = ['B/s', 'KB/s', 'MB/s', 'GB/s', 'TB/s', 'PB/s', 'EB/s', 'ZB/s', 'YB/s'];
+      const i = Math.floor(Math.log(speed) / Math.log(k));
+      this.formattedSpeed = parseFloat((speed / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+    });
+  }
+
+  transform(value: number): string {
+    // If speed is invalid or 0, return empty string
+    if (value === null || value === undefined || isNaN(value) || value <= 0) {
+      return '';
+    }
+    
+    // Update the speed subject
+    this.speedSubject.next(value);
+    
+    // Return the last formatted speed
+    return this.formattedSpeed;
+  }
+}