mirrors/metube
1
0
Fork 0
mirror of https://github.com/alexta69/metube.git synced 2025-04-04 04:37:39 +03:00
Code Issues Projects Releases Packages Wiki Activity

Fix memory leak when many videos are queued.

Browse source 
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.
This commit is contained in:
James Lyne 2023-08-14 11:39:36 +01:00
parent 262e296783
commit 784dc2f735
2 changed files with 7 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

4
ui/src/app/app.component.html
View file

@ -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>

5
ui/src/app/app.component.ts
View file

@ -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;
}
}