Propagate configuration on load via downloads socket

app/main.py

@@ -99,6 +99,7 @@ async def delete(request):
 @sio.event
 async def connect(sid, environ):
     await sio.emit('all', serializer.encode(dqueue.get()), to=sid)
+    await sio.emit('configuration', serializer.encode(config), to=sid)
 
 @routes.get(config.URL_PREFIX)
 def index(request):

ui/src/app/app.component.html

@@ -47,20 +47,19 @@
           </div>
         </div>
         <div class="col-md-3 add-url-component">
-          <div class="btn-group add-url-group">
+          <div class="btn-group add-url-group" ngbDropdown #advancedDropdown="ngbDropdown" display="dynamic" placement="bottom-end">
             <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>
-            <button class="btn btn-primary set-download-folder dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" type="button" (click)="clickFolderDropdown()" [disabled]="addInProgress || downloads.loading">
+            <button class="btn btn-primary dropdown-toggle dropdown-toggle-split" id="advancedButton" type="button" [disabled]="addInProgress || downloads.loading" ngbDropdownAnchor (focus)="advancedDropdown.open()" *ngIf="showAdvanced()">
-              <span class="sr-only">Set download folder</span>
+              <span class="sr-only">Advanced options</span>
             </button>
-            <div class="dropdown-menu show" *ngIf="showFolderDropdown">
+            <div ngbDropdownMenu aria-labelledby="advancedButton" class="dropdown-menu dropdown-menu-end folder-dropdown-menu">
-              <a class="dropdown-item" href="#">Action</a>
+              <div class="input-group">
-              <a class="dropdown-item" href="#">Another action</a>
+                <span class="input-group-text">Download Folder</span>
-              <a class="dropdown-item" href="#">Something else here</a>
+                <input type="text" class="form-select" name="folder" [(ngModel)]="folder" (change)="folderChanged()" [disabled]="addInProgress || downloads.loading" />
-              <div class="dropdown-divider"></div>
+              </div>
-              <a class="dropdown-item" href="#">Separated link</a>
             </div>
           </div>
         </div>

ui/src/app/app.component.ts

@@ -18,8 +18,8 @@ export class AppComponent implements AfterViewInit {
   qualities: Quality[];
   quality: string;
   format: string;
+  folder: string;
   addInProgress = false;
-  showFolderDropdown = false;
   darkMode: boolean;
 
   @ViewChild('queueMasterCheckbox') queueMasterCheckbox: MasterCheckboxComponent;
@@ -73,6 +73,14 @@ export class AppComponent implements AfterViewInit {
     this.cookieService.set('metube_quality', this.quality, { expires: 3650 });
   }
 
+  showAdvanced() {
+    return this.downloads.configuration['CUSTOM_DIR'] == 'true';
+  }
+
+  folderChanged() {
+    console.log("folder changed", this.folder);
+  }
+
   setupTheme(cookieService) {
     if (cookieService.check('metube_dark')) {
       this.darkMode = cookieService.get('metube_dark') === "true"
@@ -115,10 +123,6 @@ export class AppComponent implements AfterViewInit {
     this.quality = exists ? this.quality : 'best'
   }
 
-  clickFolderDropdown() {
-    this.showFolderDropdown = !this.showFolderDropdown;
-  }
-
   addDownload(url?: string, quality?: string, format?: string) {
     url = url ?? this.addUrl
     quality = quality ?? this.quality

ui/src/app/downloads.service.ts

@@ -33,6 +33,7 @@ export class DownloadsService {
   done = new Map<string, Download>();
   queueChanged = new Subject();
   doneChanged = new Subject();
+  configuration = {};
 
   constructor(private http: HttpClient, private socket: MeTubeSocket) {
     socket.fromEvent('all').subscribe((strdata: string) => {
@@ -74,6 +75,11 @@ export class DownloadsService {
       this.done.delete(data);
       this.doneChanged.next(null);
     });
+    socket.fromEvent('configuration').subscribe((strdata: string) => {
+      let data: string = JSON.parse(strdata);
+      console.debug("got configuration:", data);
+      this.configuration = data;
+    })
   }
 
   handleHTTPError(error: HttpErrorResponse) {