3 files changed, 23 insertions, 30 deletions

diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html
index fda6033..039aab6 100644
--- a/ui/src/app/app.component.html
+++ b/ui/src/app/app.component.html
@@ -29,7 +29,7 @@
               <span class="input-group-text">Quality</span>
             </div>
             <select class="custom-select" name="quality" [(ngModel)]="quality" (change)="qualityChanged()" [disabled]="addInProgress || downloads.loading">
-              <option *ngFor="let q of qualities" [ngValue]="q">{{ q.text }}</option>
+              <option *ngFor="let q of qualities" [ngValue]="q.id">{{ q.text }}</option>
             </select>
           </div>
         </div>
diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts
index 0bab9d1..26ae3c5 100644
--- a/ui/src/app/app.component.ts
+++ b/ui/src/app/app.component.ts
@@ -5,7 +5,7 @@ import { CookieService } from 'ngx-cookie-service';
 
 import { DownloadsService, Status } from './downloads.service';
 import { MasterCheckboxComponent } from './master-checkbox.component';
-import { Formats, Format, Quality, getQualityById } from './formats';
+import { Formats, Format, Quality } from './formats';
 
 @Component({
   selector: 'app-root',
@@ -16,7 +16,7 @@ export class AppComponent implements AfterViewInit {
   addUrl: string;
   formats: Format[] = Formats;
   qualities: Quality[];
-  quality: Quality;
+  quality: string;
   format: string;
   addInProgress = false;
 
@@ -36,8 +36,7 @@ export class AppComponent implements AfterViewInit {
     this.format = cookieService.get('metube_format') || 'any';
     // Needs to be set or qualities won't automatically be set
     this.setQualities()
-    let qualityId = cookieService.get('metube_quality') || this.qualities[0].id
-    this.quality = getQualityById(this.formats, qualityId);
+    this.quality = cookieService.get('metube_quality') || 'best';
   }
 
   ngAfterViewInit() {
@@ -65,7 +64,7 @@ export class AppComponent implements AfterViewInit {
   }
 
   qualityChanged() {
-    this.cookieService.set('metube_quality', this.quality.id, { expires: 3650 });
+    this.cookieService.set('metube_quality', this.quality, { expires: 3650 });
   }
 
   formatChanged() {
@@ -85,12 +84,13 @@ export class AppComponent implements AfterViewInit {
   setQualities() {
     // qualities for specific format
     this.qualities = this.formats.find(el => el.id == this.format).qualities
-    this.quality = this.qualities.find(el => el.value === "best")
+    const exists = this.qualities.find(el => el.id === this.quality)
+    this.quality = exists ? this.quality : 'best'
   }
 
   addDownload(url?: string, quality?: string, format?: string) {
     url = url ?? this.addUrl
-    quality = quality ?? this.quality.value
+    quality = quality ?? this.quality
     format = format ?? this.format
 
     this.addInProgress = true;
diff --git a/ui/src/app/formats.ts b/ui/src/app/formats.ts
index f24b210..bb2fe07 100644
--- a/ui/src/app/formats.ts
+++ b/ui/src/app/formats.ts
@@ -7,7 +7,6 @@ export interface Format {
 export interface Quality {
   id: string;
   text: string;
-  value: string;
 }
 
 export const Formats: Format[] = [
@@ -15,39 +14,33 @@ export const Formats: Format[] = [
     id: 'any',
     text: 'Any',
     qualities: [
-      { id: '0', value: 'best', text: 'Best' },
-      { id: '1', value: '1440', text: '1440p' },
-      { id: '2', value: '1080', text: '1080p' },
-      { id: '3', value: '720', text: '720p' },
-      { id: '4', value: '480', text: '480p' },
-      { id: '5', value: 'audio', text: 'Audio Only' },
+      { id: 'best', text: 'Best' },
+      { id: '1440', text: '1440p' },
+      { id: '1080', text: '1080p' },
+      { id: '720', text: '720p' },
+      { id: '480', text: '480p' },
+      { id: 'audio', text: 'Audio Only' },
     ],
   },
   {
     id: 'mp4',
     text: 'MP4',
     qualities: [
-      { id: '6', value: 'best', text: 'Best' },
-      { id: '7', value: '1440', text: '1440p' },
-      { id: '8', value: '1080', text: '1080p' },
-      { id: '9', value: '720', text: '720p' },
-      { id: '10', value: '480', text: '480p' },
+      { 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: '11', value: 'best', text: 'Best' },
-      { id: '12', value: '128', text: '128 kbps' },
-      { id: '13', value: '192', text: '192 kbps' },
-      { id: '14', value: '320', text: '320 kbps' },
+      { id: 'best', text: 'Best' },
+      { id: '128', text: '128 kbps' },
+      { id: '192', text: '192 kbps' },
+      { id: '320', text: '320 kbps' },
     ],
   },
 ];
-
-export const getQualityById = (formats: Format[], id: string): Quality => {
-  return formats
-    .find((ql) => ql.qualities.find((el) => el.id === id))
-    .qualities.find((el) => el.id === id);
-};