add quality selection

ui/src/app/app.component.html

@@ -19,11 +19,14 @@
     <div class="input-group add-url-box">
       <input type="text" class="form-control" placeholder="Video or playlist URL" name="addUrl" [(ngModel)]="addUrl" [disabled]="addInProgress || downloads.loading">
       <div class="input-group-append">
-        <button class="btn btn-primary" type="submit" (click)="addDownload()" [disabled]="addInProgress || downloads.loading">
-          <span class="spinner-border spinner-border-sm" role="status" id="add-spinner" *ngIf="addInProgress"></span>
-          {{ addInProgress ? "Adding..." : "Add" }}
-        </button>
+        <select class="custom-select" name="quality" [(ngModel)]="quality" [disabled]="addInProgress || downloads.loading">
+          <option *ngFor="let q of qualities" [ngValue]="q.id">{{ q.text }}</option>
+        </select>
       </div>
+      <button class="btn btn-primary add-url" type="submit" (click)="addDownload()" [disabled]="addInProgress || downloads.loading">
+        <span class="spinner-border spinner-border-sm" role="status" id="add-spinner" *ngIf="addInProgress"></span>
+        {{ addInProgress ? "Adding..." : "Add" }}
+      </button>
     </div>
   </form>
 

ui/src/app/app.component.sass

@@ -2,6 +2,9 @@
     max-width: 720px
     margin: 4rem auto
 
+button.add-url
+    min-width: 7rem
+
 $metube-section-color-bg: rgba(0,0,0,.07)
 
 .metube-section-header

ui/src/app/app.component.ts

@@ -11,6 +11,13 @@ import { MasterCheckboxComponent } from './master-checkbox.component';
 })
 export class AppComponent implements AfterViewInit {
   addUrl: string;
+  qualities: Array<Object> = [
+    {id: "best", text: "Best"},
+    {id: "1080p", text: "1080p"},
+    {id: "720p", text: "720p"},
+    {id: "480p", text: "480p"}
+  ];
+  quality: string = "best";
   addInProgress = false;
   
   @ViewChild('queueMasterCheckbox', {static: false}) queueMasterCheckbox: MasterCheckboxComponent;
@@ -61,7 +68,7 @@ export class AppComponent implements AfterViewInit {
 
   addDownload() {
     this.addInProgress = true;
-    this.downloads.add(this.addUrl).subscribe((status: Status) => {
+    this.downloads.add(this.addUrl, this.quality).subscribe((status: Status) => {
       if (status.status === 'error') {
         alert(`Error adding URL: ${status.msg}`);
       } else {

ui/src/app/downloads.service.ts

@@ -79,8 +79,8 @@ export class DownloadsService {
     return of({status: 'error', msg: msg})
   }
 
-  public add(url: string) {
-    return this.http.post<Status>('add', {url: url}).pipe(
+  public add(url: string, quality: string) {
+    return this.http.post<Status>('add', {url: url, quality: quality}).pipe(
       catchError(this.handleHTTPError)
     );
   }