Added quality choice based on format

ui/src/app/app.component.html

@@ -26,20 +26,20 @@
         <div class="col-md-5 add-url-component">
           <div class="input-group">
             <div class="input-group-prepend">
-              <span class="input-group-text">Video quality</span>
+              <span class="input-group-text">Format</span>
             </div>
-            <select class="custom-select" name="quality" [(ngModel)]="quality" (change)="qualityChanged()" [disabled]="addInProgress || downloads.loading">
-              <option *ngFor="let q of qualities" [ngValue]="q.id">{{ q.text }}</option>
+            <select class="custom-select" name="format" [(ngModel)]="format" (change)="formatChanged()" [disabled]="addInProgress || downloads.loading">
+              <option *ngFor="let f of formats" [ngValue]="f.id">{{ f.text }}</option>
             </select>
           </div>
         </div>
         <div class="col-md-4 add-url-component">
           <div class="input-group">
             <div class="input-group-prepend">
-              <span class="input-group-text">Format</span>
+              <span class="input-group-text">Quality</span>
             </div>
-            <select class="custom-select" name="format" [(ngModel)]="format" (change)="formatChanged()" [disabled]="addInProgress || downloads.loading">
-              <option *ngFor="let f of formats" [ngValue]="f.id">{{ f.text }}</option>
+            <select class="custom-select" name="quality" [(ngModel)]="quality" (change)="qualityChanged()" [disabled]="addInProgress || downloads.loading">
+              <option *ngFor="let q of qualities" [ngValue]="q.id">{{ q.text }}</option>
             </select>
           </div>
         </div>

ui/src/app/app.component.ts

@@ -5,6 +5,7 @@ import { CookieService } from 'ngx-cookie-service';
 
 import { DownloadsService, Status } from './downloads.service';
 import { MasterCheckboxComponent } from './master-checkbox.component';
+import { Formats, Format, Quality } from './formats';
 
 @Component({
   selector: 'app-root',
@@ -13,20 +14,9 @@ import { MasterCheckboxComponent } from './master-checkbox.component';
 })
 export class AppComponent implements AfterViewInit {
   addUrl: string;
-  qualities: Array<Object> = [
-    {id: "best", text: "Best"},
-    {id: "1440p", text: "1440p"},
-    {id: "1080p", text: "1080p"},
-    {id: "720p", text: "720p"},
-    {id: "480p", text: "480p"},
-    {id: "audio", text: "Audio only"}
-  ];
+  formats: Format[] = Formats;
+  qualities: Quality[];
   quality: string;
-  formats: Array<Object> = [
-    {id: "any", text: "Any"},
-    {id: "mp4", text: "MP4"},
-    {id: "mp3", text: "MP3"}
-  ];
   format: string;
   addInProgress = false;
 
@@ -45,6 +35,8 @@ export class AppComponent implements AfterViewInit {
   constructor(public downloads: DownloadsService, private cookieService: CookieService) {
     this.quality = cookieService.get('metube_quality') || 'best';
     this.format = cookieService.get('metube_format') || 'any';
+    // Needs to be set or qualities won't automatically be set
+    this.setQualities()
   }
 
   ngAfterViewInit() {
@@ -77,6 +69,8 @@ export class AppComponent implements AfterViewInit {
 
   formatChanged() {
     this.cookieService.set('metube_format', this.format, { expires: 3650 });
+    // Updates to use qualities available
+    this.setQualities()
   }
 
   queueSelectionChanged(checked: number) {
@@ -87,6 +81,11 @@ export class AppComponent implements AfterViewInit {
     this.doneDelSelected.nativeElement.disabled = checked == 0;
   }
 
+  setQualities() {
+    // qualities for specific format
+    this.qualities = this.formats.find(el => el.id == this.format).qualities
+  }
+
   addDownload(url?: string, quality?: string, format?: string) {
     url = url ?? this.addUrl
     quality = quality ?? this.quality

ui/src/app/formats.ts

@@ -0,0 +1,39 @@
+export interface Format {
+  id: string;
+  text: string;
+  qualities: Quality[];
+}
+
+export interface Quality {
+  id: string;
+  text: string;
+}
+
+export const Formats: Format[] = [
+  {
+    id: 'any',
+    text: 'Any',
+    qualities: [{ id: 'best', text: 'Best' }],
+  },
+  {
+    id: 'mp4',
+    text: 'MP4',
+    qualities: [
+      { id: 'best', text: 'Best' },
+      { id: '1440', text: '1440p' },
+      { id: '1080', text: '1080p' },
+      { id: '720', text: '720p' },
+      { id: '480', text: '480p' },
+    ],
+  },
+  {
+    id: 'mp3',
+    text: 'MP3',
+    qualities: [
+      { id: 'best', text: 'Best' },
+      { id: '128', text: '128 kbps' },
+      { id: '192', text: '192 kbps' },
+      { id: '320', text: '320 kbps' },
+    ],
+  },
+];