Clear completed button; reset overall progress after completed downloads

src/app/components/browse/status-bar/status-bar.component.html

@@ -31,7 +31,10 @@
 
   <div id="downloadsModal" class="ui modal">
     <i class="inside close icon"></i>
-    <div class="header">Downloads</div>
+    <div class="header">
+      <span>Downloads</span>
+      <div *ngIf="multipleCompleted" class="ui positive compact button" (click)="clearCompleted()">Clear completed</div>
+    </div>
     <div class="scrolling content">
       <app-downloads-modal></app-downloads-modal>
     </div>

src/app/components/browse/status-bar/status-bar.component.scss

@@ -6,4 +6,18 @@
 #bottomMenu {
   border-radius: 0px;
   border-width: 1px 0px 0px 0px;
+}
+
+#downloadsModal {
+  .header {
+    display: flex;
+
+    span {
+      flex-grow: 1;
+    }
+
+    .ui.positive.button {
+      margin-right: 30px;
+    }
+  }
 }

src/app/components/browse/status-bar/status-bar.component.ts

@@ -14,6 +14,7 @@ import { SelectionService } from '../../../core/services/selection.service'
 export class StatusBarComponent {
 
   resultCount = 0
+  multipleCompleted = false
   downloading = false
   error = false
   percent = 0
@@ -30,7 +31,8 @@ export class StatusBarComponent {
     downloadService.onDownloadUpdated(() => {
       setTimeout(() => { // Make sure this is the last callback executed to get the accurate downloadCount
         this.downloading = downloadService.downloadCount > 0
-        this.percent = downloadService.totalPercent
+        this.multipleCompleted = downloadService.completedCount > 1
+        this.percent = downloadService.totalDownloadingPercent
         this.error = downloadService.anyErrorsExist
         ref.detectChanges()
       }, 0)
@@ -105,4 +107,8 @@ export class StatusBarComponent {
       this.selectionService.deselectSong(chartGroup[0].songID)
     }
   }
+
+  clearCompleted() {
+    this.downloadService.cancelCompleted()
+  }
 }

src/app/core/services/download.service.ts

@@ -30,12 +30,20 @@ export class DownloadService {
     return this.downloads.length
   }
 
-  get totalPercent() {
+  get completedCount() {
+    return this.downloads.filter(download => download.type == 'done').length
+  }
+
+  get totalDownloadingPercent() {
     let total = 0
+    let count = 0
     for (const download of this.downloads) {
-      total += download.percent
+      if (!download.stale) {
+        total += download.percent
+        count++
+      }
     }
-    return total / this.downloads.length
+    return total / count
   }
 
   get anyErrorsExist() {
@@ -44,6 +52,9 @@ export class DownloadService {
 
   addDownload(versionID: number, newDownload: NewDownload) {
     if (!this.downloads.find(download => download.versionID == versionID)) { // Don't download something twice
+      if (this.downloads.every(download => download.type == 'done')) { // Reset overall progress bar if it finished
+        this.downloads.forEach(download => download.stale = true)
+      }
       this.electronService.sendIPC('download', { action: 'add', versionID, data: newDownload })
     }
   }
@@ -63,6 +74,14 @@ export class DownloadService {
     }
   }
 
+  cancelCompleted() {
+    for (const download of this.downloads) {
+      if (download.type == 'done') {
+        this.cancelDownload(download.versionID)
+      }
+    }
+  }
+
   retryDownload(versionID: number) {
     this.electronService.sendIPC('download', { action: 'retry', versionID })
   }

src/electron/shared/interfaces/download.interface.ts

@@ -29,7 +29,10 @@ export interface DownloadProgress {
   description: string
   percent: number
   type: ProgressType
+  /** If `description` contains a filepath that can be clicked */
   isLink: boolean
+  /** If the download should not appear in the total download progress */
+  stale?: boolean
 }
 
 export type ProgressType = 'good' | 'error' | 'cancel' | 'done'