aboutsummaryrefslogtreecommitdiff
path: root/ui/src
diff options
context:
space:
mode:
Diffstat (limited to 'ui/src')
-rw-r--r--ui/src/app/app.component.html3
-rw-r--r--ui/src/app/app.component.sass5
-rw-r--r--ui/src/app/app.component.ts39
-rw-r--r--ui/src/app/app.module.ts4
-rw-r--r--ui/src/app/downloads.service.ts11
-rw-r--r--ui/src/styles.sass3
6 files changed, 39 insertions, 26 deletions
diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html
index 8af200c..23dccce 100644
--- a/ui/src/app/app.component.html
+++ b/ui/src/app/app.component.html
@@ -58,8 +58,7 @@
<div ngbDropdownMenu aria-labelledby="advancedButton" class="dropdown-menu dropdown-menu-end folder-dropdown-menu">
<div class="input-group">
<span class="input-group-text">Download Folder</span>
- <select class="form-select" name="folder" #folderSelect [(ngModel)]="folder" (change)="folderChanged()" [disabled]="addInProgress || downloads.loading">
- </select>
+ <ng-select [items]="customDirs$ | async" placeholder="Default" [addTag]="allowCustomDir()" addTagText="Create directory" [ngStyle]="{'flex-grow':'1'}" bindLabel="folder" [(ngModel)]="folder" [disabled]="addInProgress || downloads.loading"></ng-select>
</div>
</div>
</div>
diff --git a/ui/src/app/app.component.sass b/ui/src/app/app.component.sass
index d95fc0d..0f98556 100644
--- a/ui/src/app/app.component.sass
+++ b/ui/src/app/app.component.sass
@@ -18,6 +18,11 @@ button.add-url
.folder-dropdown-menu
width: 500px
+.folder-dropdown-menu .input-group
+ display: flex
+ padding-left: 5px
+ padding-right: 5px
+
$metube-section-color-bg: rgba(0,0,0,.07)
.metube-section-header
diff --git a/ui/src/app/app.component.ts b/ui/src/app/app.component.ts
index 052e182..e716395 100644
--- a/ui/src/app/app.component.ts
+++ b/ui/src/app/app.component.ts
@@ -1,15 +1,13 @@
-import { Component, ViewChild, ElementRef, AfterViewInit, ChangeDetectorRef } from '@angular/core';
+import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { faTrashAlt, faCheckCircle, faTimesCircle } from '@fortawesome/free-regular-svg-icons';
import { faRedoAlt, faSun, faMoon, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
import { CookieService } from 'ngx-cookie-service';
+import { map, Observable, of } from 'rxjs';
import { DownloadsService, Status } from './downloads.service';
import { MasterCheckboxComponent } from './master-checkbox.component';
import { Formats, Format, Quality } from './formats';
-// jQuery is loaded in angular.json for selectize
-declare var $: any;
-
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
@@ -22,9 +20,9 @@ export class AppComponent implements AfterViewInit {
quality: string;
format: string;
folder: string;
- customDirs: string[] = [];
addInProgress = false;
darkMode: boolean;
+ customDirs$: Observable<string[]>;
@ViewChild('queueMasterCheckbox') queueMasterCheckbox: MasterCheckboxComponent;
@ViewChild('queueDelSelected') queueDelSelected: ElementRef;
@@ -32,7 +30,6 @@ export class AppComponent implements AfterViewInit {
@ViewChild('doneDelSelected') doneDelSelected: ElementRef;
@ViewChild('doneClearCompleted') doneClearCompleted: ElementRef;
@ViewChild('doneClearFailed') doneClearFailed: ElementRef;
- @ViewChild('folderSelect') folderSelect: ElementRef;
faTrashAlt = faTrashAlt;
faCheckCircle = faCheckCircle;
@@ -50,14 +47,11 @@ export class AppComponent implements AfterViewInit {
this.setupTheme(cookieService)
}
- ngAfterViewInit() {
- // Trigger folderSelect to update
- this.downloads.customDirsChanged.subscribe((dirs: string[]) => {
- console.log("customDirsChanged:", dirs);
- $(this.folderSelect.nativeElement).selectize({options: dirs});
- this.customDirs = dirs;
- });
+ ngOnInit() {
+ this.customDirs$ = this.getMatchingCustomDir();
+ }
+ ngAfterViewInit() {
this.downloads.queueChanged.subscribe(() => {
this.queueMasterCheckbox.selectionChanged();
});
@@ -86,11 +80,24 @@ export class AppComponent implements AfterViewInit {
}
showAdvanced() {
- return this.downloads.configuration['CUSTOM_DIR'] == 'true';
+ return this.downloads.configuration['CUSTOM_DIRS'] == 'true';
}
- folderChanged() {
- console.log("folder changed", this.folder);
+ allowCustomDir() {
+ return this.downloads.configuration['CREATE_DIRS'] == 'true';
+ }
+
+ getMatchingCustomDir() : Observable<string[]> {
+ return this.downloads.customDirs.asObservable().pipe(map((output) => {
+ // Keep logic consistent with app/ytdl.py
+ if (this.quality != 'audio' && this.format != 'mp3') {
+ console.debug("download_dir", output["download_dir"])
+ return output["download_dir"];
+ } else {
+ console.debug("audio_download_dir", output["audio_download_dir"])
+ return output["audio_download_dir"];
+ }
+ }));
}
setupTheme(cookieService) {
diff --git a/ui/src/app/app.module.ts b/ui/src/app/app.module.ts
index 6ad5978..8eddbca 100644
--- a/ui/src/app/app.module.ts
+++ b/ui/src/app/app.module.ts
@@ -10,6 +10,7 @@ import { AppComponent } from './app.component';
import { EtaPipe, SpeedPipe, EncodeURIComponent } from './downloads.pipe';
import { MasterCheckboxComponent, SlaveCheckboxComponent } from './master-checkbox.component';
import { MeTubeSocket } from './metube-socket';
+import { NgSelectModule } from '@ng-select/ng-select';
@NgModule({
declarations: [
@@ -25,7 +26,8 @@ import { MeTubeSocket } from './metube-socket';
FormsModule,
NgbModule,
HttpClientModule,
- FontAwesomeModule
+ FontAwesomeModule,
+ NgSelectModule
],
providers: [CookieService, MeTubeSocket],
bootstrap: [AppComponent]
diff --git a/ui/src/app/downloads.service.ts b/ui/src/app/downloads.service.ts
index 42ffe6d..1fd75e3 100644
--- a/ui/src/app/downloads.service.ts
+++ b/ui/src/app/downloads.service.ts
@@ -1,6 +1,6 @@
import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
-import { of, Subject } from 'rxjs';
+import { Observable, of, Subject } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { MeTubeSocket } from './metube-socket';
@@ -33,7 +33,7 @@ export class DownloadsService {
done = new Map<string, Download>();
queueChanged = new Subject();
doneChanged = new Subject();
- customDirsChanged = new Subject<string[]>();
+ customDirs = new Subject<Map<string, string[]>>();
configuration = {};
constructor(private http: HttpClient, private socket: MeTubeSocket) {
@@ -81,11 +81,10 @@ export class DownloadsService {
console.debug("got configuration:", data);
this.configuration = data;
});
- socket.fromEvent('custom_directories').subscribe((strdata: string) => {
+ socket.fromEvent('custom_dirs').subscribe((strdata: string) => {
let data = JSON.parse(strdata);
- console.debug("got custom_directories:", data);
- let customDirectories = data["directories"];
- this.customDirsChanged.next(customDirectories);
+ console.debug("got custom_dirs:", data);
+ this.customDirs.next(data);
});
}
diff --git a/ui/src/styles.sass b/ui/src/styles.sass
index 68bef4f..4ce00cc 100644
--- a/ui/src/styles.sass
+++ b/ui/src/styles.sass
@@ -1,4 +1,5 @@
/* You can add global styles to this file, and also import other style files */
/* Importing Bootstrap SCSS file. */
-@import '~bootstrap/scss/bootstrap' \ No newline at end of file
+@import '~bootstrap/scss/bootstrap'
+@import '~@ng-select/ng-select/themes/default.theme.css' \ No newline at end of file
bgstack15