Audio downloads now work with progress bar, but it requires file conversion at the end. It ends up being around the same speed as the regular method

src/app/components/downloads/downloads.component.html

@@ -7,7 +7,7 @@
                 </h4>
                 <div class="container">
                     <div class="row">
-                        <div *ngFor="let download of session_downloads.value | keyvalue; let i = index;" class="col-12 my-1">
+                        <div *ngFor="let download of session_downloads.value | keyvalue: sort_downloads; let i = index;" class="col-12 my-1">
                             <mat-card *ngIf="download.value" class="mat-elevation-z3">
                                 <app-download-item [download]="download.value" [queueNumber]="i+1" (cancelDownload)="clearDownload(session_downloads.key, download.value.uid)"></app-download-item>
                             </mat-card>

src/app/components/downloads/downloads.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChildren, QueryList, ElementRef } from '@angular/core';
+import { Component, OnInit, ViewChildren, QueryList, ElementRef, OnDestroy } from '@angular/core';
 import { PostsService } from 'app/posts.services';
 import { trigger, transition, animateChild, stagger, query, style, animate } from '@angular/animations';
 import { Router } from '@angular/router';
@@ -32,20 +32,26 @@ import { Router } from '@angular/router';
     ])
   ],
 })
-export class DownloadsComponent implements OnInit {
+export class DownloadsComponent implements OnInit, OnDestroy {
 
-  downloads_check_interval = 500;
+  downloads_check_interval = 1000;
   downloads = {};
+  interval_id = null;
 
   keys = Object.keys;
 
   valid_sessions_length = 0;
 
+  sort_downloads = (a, b) => {
+    const result = a.value.timestamp_start < b.value.timestamp_start;
+    return result;
+  }
+
   constructor(public postsService: PostsService, private router: Router) { }
 
   ngOnInit(): void {
     this.getCurrentDownloads();
-    setInterval(() => {
+    this.interval_id = setInterval(() => {
       this.getCurrentDownloads();
     }, this.downloads_check_interval);
 
@@ -58,6 +64,10 @@ export class DownloadsComponent implements OnInit {
     });
   }
 
+  ngOnDestroy() {
+    if (this.interval_id) { clearInterval(this.interval_id) }
+  }
+
   getCurrentDownloads() {
     this.postsService.getCurrentDownloads().subscribe(res => {
       if (res['downloads']) {

src/app/download-item/download-item.component.html

@@ -12,10 +12,30 @@
             <button style="margin-bottom: 2px;" (click)="cancelTheDownload()" mat-icon-button color="warn"><mat-icon fontSet="material-icons-outlined">cancel</mat-icon></button>
         </mat-grid-tile>
     </mat-grid-list>
-    <mat-expansion-panel class="ignore-margin" *ngIf="download.error">
+    <mat-expansion-panel *ngIf="download.timestamp_start" class="ignore-margin">
         <mat-expansion-panel-header>
-            Error
+            <div>
+                <ng-container i18n="Details">Details</ng-container>
+            </div>
+            <div style="width: 100%">
+                <div style="float: right">
+                    <mat-panel-description>{{download.timestamp_start | date:'medium'}}</mat-panel-description>
+                </div>
+            </div>
         </mat-expansion-panel-header>
-        {{download.error}}
+        <div *ngIf="download.error">
+            <strong>An error has occured:</strong>
+            <br/>
+            {{download.error}}
+        </div>
+        <div *ngIf="download.timestamp_start">
+            <strong>Download start: </strong>{{download.timestamp_start | date:'medium'}}
+        </div>
+        <div *ngIf="download.timestamp_end">
+            <strong>Download end: </strong> {{download.timestamp_end | date:'medium'}}
+        </div>
+        <div *ngIf="download.fileNames">
+            <strong>File path(s): </strong> {{download.fileNames.join(', ')}}
+        </div>
     </mat-expansion-panel>
 </div>

src/app/download-item/download-item.component.ts

@@ -16,6 +16,8 @@ export class DownloadItemComponent implements OnInit {
     complete: false,
     url: 'http://youtube.com/watch?v=17848rufj',
     downloading: true,
+    timestamp_start: null,
+    timestamp_end: null,
     is_playlist: false,
     error: false
   };

src/app/main/main.component.ts

@@ -36,6 +36,8 @@ export interface Download {
   error: boolean | string;
   fileNames?: string[];
   complete?: boolean;
+  timestamp_start?: number;
+  timestamp_end?: number;
 }
 
 @Component({