From 784dc2f735930c043dcb7a731000b828e71b6b93 Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Mon, 14 Aug 2023 11:39:36 +0100
Subject: [PATCH] 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.html | 4 ++--
 ui/src/app/app.component.ts   | 5 +++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html
index a9a604b..31716b4 100644
--- a/ui/src/app/app.component.html
+++ b/ui/src/app/app.component.html
@@ -94,7 +94,7 @@
       </tr>
     </thead>
     <tbody>
-      <tr *ngFor="let download of downloads.queue | keyvalue: asIsOrder" [class.disabled]='download.value.deleting'>
+      <tr *ngFor="let download of downloads.queue | keyvalue: asIsOrder; trackBy: identifyDownloadRow" [class.disabled]='download.value.deleting'>
         <td>
           <app-slave-checkbox [id]="download.key" [master]="queueMasterCheckbox" [checkable]="download.value"></app-slave-checkbox>
         </td>
@@ -127,7 +127,7 @@
       </tr>
     </thead>
     <tbody>
-      <tr *ngFor="let download of downloads.done | keyvalue: asIsOrder" [class.disabled]='download.value.deleting'>
+      <tr *ngFor="let download of downloads.done | keyvalue: asIsOrder; trackBy: identifyDownloadRow" [class.disabled]='download.value.deleting'>
         <td>
           <app-slave-checkbox [id]="download.key" [master]="doneMasterCheckbox" [checkable]="download.value"></app-slave-checkbox>
         </td>
diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts
index 1824052..a71d76e 100644
--- a/ui/src/app/app.component.ts
+++ b/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;
+  }
 }