From ba712fc071398e615ead822c8bd81aad42a90c8f Mon Sep 17 00:00:00 2001 From: James Woglom Date: Tue, 30 Aug 2022 00:55:16 -0400 Subject: Fill in download_dir or audio_download_dir on launch --- ui/src/app/app.component.html | 3 +-- ui/src/app/app.component.sass | 5 +++++ ui/src/app/app.component.ts | 39 +++++++++++++++++++++++---------------- ui/src/app/app.module.ts | 4 +++- ui/src/app/downloads.service.ts | 11 +++++------ ui/src/styles.sass | 3 ++- 6 files changed, 39 insertions(+), 26 deletions(-) (limited to 'ui/src') 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 @@
Download Folder - +
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; @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 { + 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(); queueChanged = new Subject(); doneChanged = new Subject(); - customDirsChanged = new Subject(); + customDirs = new Subject>(); 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 -- cgit