-
- -
- +
+
+
+ +
+
+
+
+
+
+ Video quality +
+ +
+
+
+
+
+ Format +
+ +
+
+
+ +
-
diff --git a/ui/src/app/app.component.sass b/ui/src/app/app.component.sass index 99e1a37..2cc0ede 100644 --- a/ui/src/app/app.component.sass +++ b/ui/src/app/app.component.sass @@ -2,8 +2,12 @@ max-width: 720px margin: 4rem auto +.add-url-component + margin: 0.5rem auto + button.add-url - min-width: 7rem + zmin-width: 7rem + width: 100% $metube-section-color-bg: rgba(0,0,0,.07) diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts index 8b668c6..55f7e6e 100644 --- a/ui/src/app/app.component.ts +++ b/ui/src/app/app.component.ts @@ -1,6 +1,7 @@ import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core'; import { faTrashAlt, faCheckCircle, faTimesCircle } from '@fortawesome/free-regular-svg-icons'; import { faRedoAlt } from '@fortawesome/free-solid-svg-icons'; +import { CookieService } from 'ngx-cookie-service'; import { DownloadsService, Status } from './downloads.service'; import { MasterCheckboxComponent } from './master-checkbox.component'; @@ -20,7 +21,12 @@ export class AppComponent implements AfterViewInit { {id: "480p", text: "480p"}, {id: "audio", text: "Audio only"} ]; - quality: string = "best"; + quality: string; + formats: Array = [ + {id: "any", text: "Any"}, + {id: "mp4", text: "MP4"} + ]; + format: string; addInProgress = false; @ViewChild('queueMasterCheckbox') queueMasterCheckbox: MasterCheckboxComponent; @@ -35,7 +41,9 @@ export class AppComponent implements AfterViewInit { faTimesCircle = faTimesCircle; faRedoAlt = faRedoAlt; - constructor(public downloads: DownloadsService) { + constructor(public downloads: DownloadsService, private cookieService: CookieService) { + this.quality = cookieService.get('metube_quality') || 'best'; + this.format = cookieService.get('metube_format') || 'any'; } ngAfterViewInit() { @@ -62,6 +70,14 @@ export class AppComponent implements AfterViewInit { return 1; } + qualityChanged() { + this.cookieService.set('metube_quality', this.quality, { expires: 3650 }); + } + + formatChanged() { + this.cookieService.set('metube_format', this.format, { expires: 3650 }); + } + queueSelectionChanged(checked: number) { this.queueDelSelected.nativeElement.disabled = checked == 0; } @@ -70,12 +86,13 @@ export class AppComponent implements AfterViewInit { this.doneDelSelected.nativeElement.disabled = checked == 0; } - addDownload(url?: string, quality?: string) { + addDownload(url?: string, quality?: string, format?: string) { url = url ?? this.addUrl quality = quality ?? this.quality + format = format ?? this.format this.addInProgress = true; - this.downloads.add(url, quality).subscribe((status: Status) => { + this.downloads.add(url, quality, format).subscribe((status: Status) => { if (status.status === 'error') { alert(`Error adding URL: ${status.msg}`); } else { @@ -85,8 +102,8 @@ export class AppComponent implements AfterViewInit { }); } - retryDownload(key: string, quality:string){ - this.addDownload(key, quality); + retryDownload(key: string, quality: string, format: string) { + this.addDownload(key, quality, format); this.downloads.delById('done', [key]).subscribe(); } diff --git a/ui/src/app/app.module.ts b/ui/src/app/app.module.ts index 5f70069..0452ae7 100644 --- a/ui/src/app/app.module.ts +++ b/ui/src/app/app.module.ts @@ -4,6 +4,7 @@ import { FormsModule } from '@angular/forms'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { HttpClientModule } from '@angular/common/http'; import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'; +import { CookieService } from 'ngx-cookie-service'; import { AppComponent } from './app.component'; import { EtaPipe, SpeedPipe } from './downloads.pipe'; @@ -25,7 +26,7 @@ import { MeTubeSocket } from './metube-socket'; HttpClientModule, FontAwesomeModule ], - providers: [MeTubeSocket], + providers: [CookieService, MeTubeSocket], bootstrap: [AppComponent] }) export class AppModule { } diff --git a/ui/src/app/downloads.service.ts b/ui/src/app/downloads.service.ts index 5fd3b5a..e0db252 100644 --- a/ui/src/app/downloads.service.ts +++ b/ui/src/app/downloads.service.ts @@ -80,8 +80,8 @@ export class DownloadsService { return of({status: 'error', msg: msg}) } - public add(url: string, quality: string) { - return this.http.post('add', {url: url, quality: quality}).pipe( + public add(url: string, quality: string, format: string) { + return this.http.post('add', {url: url, quality: quality, format: format}).pipe( catchError(this.handleHTTPError) ); } -- cgit