feat: cancel playlist adding mid-operation (closes #840)

ui/src/app/app.html

@@ -98,15 +98,17 @@
               name="addUrl"
               [(ngModel)]="addUrl"
               [disabled]="addInProgress || downloads.loading">
-            <button class="btn btn-primary btn-lg px-4"
-              type="submit"
-              (click)="addDownload()"
-              [disabled]="addInProgress || downloads.loading">
-              @if (addInProgress) {
-                <span class="spinner-border spinner-border-sm" role="status" id="add-spinner"></span>
-              }
-              {{ addInProgress ? "Adding..." : "Download" }}
-            </button>
+            @if (addInProgress) {
+              <button class="btn btn-danger btn-lg px-3" type="button" (click)="cancelAdding()">
+                <fa-icon [icon]="faTimesCircle" class="me-1" /> Cancel
+              </button>
+            } @else {
+              <button class="btn btn-primary btn-lg px-4" type="submit"
+                (click)="addDownload()"
+                [disabled]="downloads.loading">
+                Download
+              </button>
+            }
           </div>
         </div>
       </div>

ui/src/app/app.ts

@@ -433,6 +433,13 @@ export class App implements AfterViewInit, OnInit {
     });
   }
 
+  cancelAdding() {
+    this.downloads.cancelAdd().subscribe({
+      next: () => { this.addInProgress = false; },
+      error: () => { this.addInProgress = false; }
+    });
+  }
+
   downloadItemByKey(id: string) {
     this.downloads.startById([id]).subscribe();
   }

ui/src/app/services/downloads.service.ts

@@ -208,6 +208,9 @@ export class DownloadsService {
   public exportQueueUrls(): string[] {
     return Array.from(this.queue.values()).map(download => download.url);
   }
-  
-  
+  public cancelAdd() {
+    return this.http.post<any>('cancel-add', {}).pipe(
+      catchError(this.handleHTTPError)
+    );
+  }
 }