aboutsummaryrefslogtreecommitdiff
path: root/ui/src
diff options
context:
space:
mode:
Diffstat (limited to 'ui/src')
-rw-r--r--ui/src/app/app.component.html43
-rw-r--r--ui/src/app/app.component.sass6
-rw-r--r--ui/src/app/app.component.ts29
-rw-r--r--ui/src/app/app.module.ts3
-rw-r--r--ui/src/app/downloads.service.ts4
5 files changed, 65 insertions, 20 deletions
diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html
index 2ec41dd..20a78b4 100644
--- a/ui/src/app/app.component.html
+++ b/ui/src/app/app.component.html
@@ -16,17 +16,40 @@
<main role="main" class="container">
<form #f="ngForm">
- <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">
- <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 class="container add-url-box">
+ <div class="row">
+ <div class="col add-url-component input-group">
+ <input type="text" class="form-control" placeholder="Video or playlist URL" name="addUrl" [(ngModel)]="addUrl" [disabled]="addInProgress || downloads.loading">
+ </div>
+ </div>
+ <div class="row">
+ <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>
+ </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>
+ </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>
+ </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>
+ </div>
+ </div>
+ <div class="col-md-3 add-url-component">
+ <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>
</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>
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<Object> = [
+ {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<Status>('add', {url: url, quality: quality}).pipe(
+ public add(url: string, quality: string, format: string) {
+ return this.http.post<Status>('add', {url: url, quality: quality, format: format}).pipe(
catchError(this.handleHTTPError)
);
}
bgstack15