Fill in download_dir or audio_download_dir on launch

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>

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

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) {

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]

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);
     });
   }
 

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'
+@import '~bootstrap/scss/bootstrap'
+@import '~@ng-select/ng-select/themes/default.theme.css'