Fix memory leak when many videos are queued.

Previously angular was re-rendering the entire queue whenever any downloads changed their state. The websocket provides progress updates at a high frequency, which combined with a long download queue can quickly cause hundreds of thousands of dom nodes to be created. This results in a spike in memory usage which may persist for some time depending on browser behaviour.

Adding a trackBy function resolves the issue by telling angular which row relates to a particular download.

ui/src/app/app.component.ts

@@ -7,6 +7,7 @@ import { map, Observable, of } from 'rxjs';
 import { Download, DownloadsService, Status } from './downloads.service';
 import { MasterCheckboxComponent } from './master-checkbox.component';
 import { Formats, Format, Quality } from './formats';
+import {KeyValue} from "@angular/common";
 
 @Component({
   selector: 'app-root',
@@ -207,4 +208,8 @@ export class AppComponent implements AfterViewInit {
 
     return baseDir + encodeURIComponent(download.filename);
   }
+
+  identifyDownloadRow(index: number, row: KeyValue<string, Download>) {
+    return row.key;
+  }
 }