show download totals at the top; debounce download speeds. closes #613

ui/src/app/app.component.html

@@ -4,6 +4,28 @@
       <img src="assets/icons/android-chrome-192x192.png" alt="MeTube Logo" height="32" class="me-2">
       MeTube
     </a>
+    <div class="download-metrics">
+      <div class="metric" *ngIf="activeDownloads > 0">
+        <fa-icon [icon]="faDownload" class="text-primary"></fa-icon>
+        <span>{{activeDownloads}} downloading</span>
+      </div>
+      <div class="metric" *ngIf="queuedDownloads > 0">
+        <fa-icon [icon]="faClock" class="text-warning"></fa-icon>
+        <span>{{queuedDownloads}} queued</span>
+      </div>
+      <div class="metric" *ngIf="completedDownloads > 0">
+        <fa-icon [icon]="faCheck" class="text-success"></fa-icon>
+        <span>{{completedDownloads}} completed</span>
+      </div>
+      <div class="metric" *ngIf="failedDownloads > 0">
+        <fa-icon [icon]="faTimesCircle" class="text-danger"></fa-icon>
+        <span>{{failedDownloads}} failed</span>
+      </div>
+      <div class="metric" *ngIf="(totalSpeed | speed) !== ''">
+        <fa-icon [icon]="faTachometerAlt" class="text-info"></fa-icon>
+        <span>{{totalSpeed | speed }}</span>
+      </div>
+    </div>
     <!--
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsDefault" aria-controls="navbarsDefault" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>

ui/src/app/app.component.sass

@@ -182,3 +182,22 @@ td
 
       i
         font-size: 1rem
+
+.download-metrics
+  display: flex
+  align-items: center
+  gap: 16px
+  margin-left: 24px
+
+  .metric
+    display: flex
+    align-items: center
+    gap: 6px
+    font-size: 0.9rem
+    color: #adb5bd
+
+    fa-icon
+      font-size: 1rem
+
+    span
+      white-space: nowrap

ui/src/app/app.component.ts

@@ -1,7 +1,7 @@
 import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { faTrashAlt, faCheckCircle, faTimesCircle, IconDefinition } from '@fortawesome/free-regular-svg-icons';
-import { faRedoAlt, faSun, faMoon, faCircleHalfStroke, faCheck, faExternalLinkAlt, faDownload, faFileImport, faFileExport, faCopy } from '@fortawesome/free-solid-svg-icons';
+import { faRedoAlt, faSun, faMoon, faCircleHalfStroke, faCheck, faExternalLinkAlt, faDownload, faFileImport, faFileExport, faCopy, faClock, faTachometerAlt } from '@fortawesome/free-solid-svg-icons';
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
 import { CookieService } from 'ngx-cookie-service';
 import { map, Observable, of, distinctUntilChanged } from 'rxjs';
@@ -43,6 +43,13 @@ export class AppComponent implements AfterViewInit {
   metubeVersion: string | null = null;
   isAdvancedOpen = false;
 
+  // Download metrics
+  activeDownloads = 0;
+  queuedDownloads = 0;
+  completedDownloads = 0;
+  failedDownloads = 0;
+  totalSpeed = 0;
+
   @ViewChild('queueMasterCheckbox') queueMasterCheckbox: MasterCheckboxComponent;
   @ViewChild('queueDelSelected') queueDelSelected: ElementRef;
   @ViewChild('queueDownloadSelected') queueDownloadSelected: ElementRef;
@@ -67,6 +74,8 @@ export class AppComponent implements AfterViewInit {
   faFileExport = faFileExport;
   faCopy = faCopy;
   faGithub = faGithub;
+  faClock = faClock;
+  faTachometerAlt = faTachometerAlt;
 
   constructor(public downloads: DownloadsService, private cookieService: CookieService, private http: HttpClient) {
     this.format = cookieService.get('metube_format') || 'any';
@@ -76,6 +85,18 @@ export class AppComponent implements AfterViewInit {
     this.autoStart = cookieService.get('metube_auto_start') !== 'false';
 
     this.activeTheme = this.getPreferredTheme(cookieService);
+
+    // Subscribe to download updates
+    this.downloads.queueChanged.subscribe(() => {
+      this.updateMetrics();
+    });
+    this.downloads.doneChanged.subscribe(() => {
+      this.updateMetrics();
+    });
+    // Subscribe to real-time updates
+    this.downloads.updated.subscribe(() => {
+      this.updateMetrics();
+    });
   }
 
   ngOnInit() {
@@ -468,4 +489,17 @@ export class AppComponent implements AfterViewInit {
   toggleAdvanced() {
     this.isAdvancedOpen = !this.isAdvancedOpen;
   }
+
+  private updateMetrics() {
+    this.activeDownloads = Array.from(this.downloads.queue.values()).filter(d => d.status === 'downloading' || d.status === 'preparing').length;
+    this.queuedDownloads = Array.from(this.downloads.queue.values()).filter(d => d.status === 'pending').length;
+    this.completedDownloads = Array.from(this.downloads.done.values()).filter(d => d.status === 'finished').length;
+    this.failedDownloads = Array.from(this.downloads.done.values()).filter(d => d.status === 'error').length;
+    
+    // Calculate total speed from downloading items
+    const downloadingItems = Array.from(this.downloads.queue.values())
+      .filter(d => d.status === 'downloading');
+    
+    this.totalSpeed = downloadingItems.reduce((total, item) => total + (item.speed || 0), 0);
+  }
 }

ui/src/app/downloads.pipe.ts

@@ -1,4 +1,7 @@
 import { Pipe, PipeTransform } from '@angular/core';
+import { SpeedService } from './speed.service';
+import { BehaviorSubject } from 'rxjs';
+import { throttleTime } from 'rxjs/operators';
 
 @Pipe({
     name: 'eta',
@@ -23,18 +26,43 @@ export class EtaPipe implements PipeTransform {
 
 @Pipe({
     name: 'speed',
-    standalone: false
+    standalone: false,
+    pure: false // Make the pipe impure so it can handle async updates
 })
 export class SpeedPipe implements PipeTransform {
-  transform(value: number, ...args: any[]): any {
-    if (value === null) {
-      return null;
+  private speedSubject = new BehaviorSubject<number>(0);
+  private formattedSpeed: string = '';
+
+  constructor(private speedService: SpeedService) {
+    // 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(value) / Math.log(k));
-    return parseFloat((value / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+      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, ...args: any[]): any {
+    // 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;
   }
 }
 

ui/src/app/downloads.service.ts

@@ -40,6 +40,7 @@ export class DownloadsService {
   doneChanged = new Subject();
   customDirsChanged = new Subject();
   configurationChanged = new Subject();
+  updated = new Subject();
 
   configuration = {};
   customDirs = {};
@@ -66,6 +67,7 @@ export class DownloadsService {
       data.checked = dl.checked;
       data.deleting = dl.deleting;
       this.queue.set(data.url, data);
+      this.updated.next(null);
     });
     socket.fromEvent('completed').subscribe((strdata: string) => {
       let data: Download = JSON.parse(strdata);

ui/src/app/speed.service.ts

@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable, interval } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SpeedService {
+  private speedBuffer = new BehaviorSubject<number[]>([]);
+  private readonly BUFFER_SIZE = 10; // Keep last 10 measurements (1 second at 100ms intervals)
+
+  // Observable that emits the mean speed every second
+  public meanSpeed$: Observable<number>;
+
+  constructor() {
+    // Calculate mean speed every second
+    this.meanSpeed$ = interval(1000).pipe(
+      map(() => {
+        const speeds = this.speedBuffer.value;
+        if (speeds.length === 0) return 0;
+        return speeds.reduce((sum, speed) => sum + speed, 0) / speeds.length;
+      })
+    );
+  }
+
+  // Add a new speed measurement
+  public addSpeedMeasurement(speed: number) {
+    const currentBuffer = this.speedBuffer.value;
+    const newBuffer = [...currentBuffer, speed].slice(-this.BUFFER_SIZE);
+    this.speedBuffer.next(newBuffer);
+  }
+
+  // Get the current mean speed
+  public getCurrentMeanSpeed(): number {
+    const speeds = this.speedBuffer.value;
+    if (speeds.length === 0) return 0;
+    return speeds.reduce((sum, speed) => sum + speed, 0) / speeds.length;
+  }
+}