fixed margins on advanced mode UI and temporarily disabled youtube auth until youtube-dl fixes it

advanced mode inputs now get saved in cookies

fixed bug in UI where delete button was missing by making it more mobile-friendly

src/app/main/main.component.html

@@ -72,27 +72,27 @@
             <div class="container" style="padding-bottom: 20px;">
                 <div class="row">
                     <div class="col-12 col-sm-6">
-                        <mat-checkbox color="accent" [disabled]="current_download" (change)="customArgsEnabledChanged($event)" [(ngModel)]="customArgsEnabled" style="position: absolute; z-index: 999" [ngModelOptions]="{standalone: true}">Use custom args</mat-checkbox>
+                        <mat-checkbox color="accent" [disabled]="current_download" (change)="customArgsEnabledChanged($event)" [(ngModel)]="customArgsEnabled" style="z-index: 999" [ngModelOptions]="{standalone: true}">Use custom args</mat-checkbox>
-                        <mat-form-field color="accent" style="margin-bottom: 30px;" class="advanced-input">
+                        <mat-form-field color="accent" style="margin-bottom: 42px;" class="advanced-input">
                             <input [(ngModel)]="customArgs" [ngModelOptions]="{standalone: true}" [disabled]="!customArgsEnabled" matInput placeholder="Custom args">
                             <mat-hint>No need to include URL, just everything after.</mat-hint>
                         </mat-form-field>
                     </div>
                     <div class="col-12 col-sm-6">
-                        <mat-checkbox color="accent" [disabled]="current_download" (change)="customOutputEnabledChanged($event)" [(ngModel)]="customOutputEnabled" style="position: absolute; z-index: 999" [ngModelOptions]="{standalone: true}">Use custom output</mat-checkbox>
+                        <mat-checkbox color="accent" [disabled]="current_download" (change)="customOutputEnabledChanged($event)" [(ngModel)]="customOutputEnabled" style="z-index: 999" [ngModelOptions]="{standalone: true}">Use custom output</mat-checkbox>
                         <mat-form-field style="margin-bottom: 42px;" color="accent" class="advanced-input">
                             <input [(ngModel)]="customOutput" [ngModelOptions]="{standalone: true}" [disabled]="!customOutputEnabled" matInput placeholder="Custom output">
-                            <mat-hint><a target="_blank" href="https://github.com/ytdl-org/youtube-dl/blob/master/README.md#output-template">This link</a> will be helpful. Path is relative to the config download path.</mat-hint>
+                            <mat-hint><a target="_blank" href="https://github.com/ytdl-org/youtube-dl/blob/master/README.md#output-template">Documentation</a>. Path is relative to the config download path. Don't include extension.</mat-hint>
                         </mat-form-field>
                     </div>
-                    <div class="col-12 col-sm-6 mt-2">
+                    <div *ngIf="!youtubeAuthDisabledOverride" class="col-12 col-sm-6 mt-2">
-                        <mat-checkbox color="accent" [disabled]="current_download" (change)="youtubeAuthEnabledChanged($event)" [(ngModel)]="youtubeAuthEnabled" style="position: absolute; z-index: 999" [ngModelOptions]="{standalone: true}">Use authentication</mat-checkbox>
+                        <mat-checkbox color="accent" [disabled]="current_download" (change)="youtubeAuthEnabledChanged($event)" [(ngModel)]="youtubeAuthEnabled" style="z-index: 999" [ngModelOptions]="{standalone: true}">Use authentication</mat-checkbox>
                         <mat-form-field color="accent" class="advanced-input">
                             <input [(ngModel)]="youtubeUsername" [ngModelOptions]="{standalone: true}" [disabled]="!youtubeAuthEnabled" matInput placeholder="Username">
                         </mat-form-field>
                     </div>
-                    <div class="col-12 col-sm-6 mt-2">
+                    <div *ngIf="!youtubeAuthDisabledOverride" class="col-12 col-sm-6 mt-2">
-                        <mat-form-field color="accent" class="advanced-input">
+                        <mat-form-field style="margin-top: 31px;" color="accent" class="advanced-input">
                             <input [(ngModel)]="youtubePassword" type="password" [ngModelOptions]="{standalone: true}" [disabled]="!youtubeAuthEnabled" matInput placeholder="Password">
                         </mat-form-field>
                     </div>

src/app/main/main.component.ts

@@ -41,6 +41,8 @@ export interface Download {
   styleUrls: ['./main.component.css']
 })
 export class MainComponent implements OnInit {
+  youtubeAuthDisabledOverride = true;
+
   iOS = false;
 
   determinateProgress = false;
@@ -82,7 +84,7 @@ export class MainComponent implements OnInit {
 
   mp3s: any[] = [];
   mp4s: any[] = [];
-  files_cols = (window.innerWidth <= 450) ? 2 : 4;
+  files_cols = null;
   playlists = {'audio': [], 'video': []};
   playlist_thumbnails = {};
   downloading_content = {'audio': {}, 'video': {}};
@@ -247,6 +249,15 @@ export class MainComponent implements OnInit {
         if (localStorage.getItem('youtubeAuthEnabled') !== null) {
           this.youtubeAuthEnabled = localStorage.getItem('youtubeAuthEnabled') === 'true';
         }
+
+        // set advanced inputs
+        const customArgs = localStorage.getItem('customArgs');
+        const customOutput = localStorage.getItem('customOutput');
+        const youtubeUsername = localStorage.getItem('youtubeUsername');
+
+        if (customArgs && customArgs !== 'null') { this.customArgs = customArgs };
+        if (customOutput && customOutput !== 'null') { this.customOutput = customOutput };
+        if (youtubeUsername && youtubeUsername !== 'null') { this.youtubeUsername = youtubeUsername };
       }
 
       if (this.autoStartDownload) {
@@ -263,6 +274,7 @@ export class MainComponent implements OnInit {
   ngOnInit() {
     this.iOS = this.platform.IOS;
 
+    // get checkboxes
     if (localStorage.getItem('audioOnly') !== null) {
       this.audioOnly = localStorage.getItem('audioOnly') === 'true';
     }
@@ -279,6 +291,8 @@ export class MainComponent implements OnInit {
       // set auto start flag to true
       this.autoStartDownload = true;
     }
+
+    this.setCols();
   }
 
   // file manager stuff
@@ -336,6 +350,18 @@ export class MainComponent implements OnInit {
     });
   }
 
+  public setCols() {
+    if (window.innerWidth <= 350) {
+      this.files_cols = 1;
+    } else if (window.innerWidth <= 500) {
+      this.files_cols = 2;
+    } else if (window.innerWidth <= 750) {
+      this.files_cols = 3
+    } else {
+      this.files_cols = 4;
+    }
+  }
+
   public goToFile(name, isAudio) {
     if (isAudio) {
       this.downloadHelperMp3(name, false, false);
@@ -498,6 +524,19 @@ export class MainComponent implements OnInit {
       const youtubeUsername = (this.youtubeAuthEnabled && this.youtubeUsername ? this.youtubeUsername : null);
       const youtubePassword = (this.youtubeAuthEnabled && this.youtubePassword ? this.youtubePassword : null);
 
+      // set advanced inputs
+      if (this.allowAdvancedDownload) {
+        if (customArgs) {
+          localStorage.setItem('customArgs', customArgs);
+        }
+        if (customOutput) {
+          localStorage.setItem('customOutput', customOutput);
+        }
+        if (youtubeUsername) {
+          localStorage.setItem('youtubeUsername', youtubeUsername);
+        }
+      }
+
       if (this.audioOnly) {
         // create download object
         const new_download: Download = {
@@ -776,7 +815,7 @@ export class MainComponent implements OnInit {
   }
 
   onResize(event) {
-    this.files_cols = (event.target.innerWidth <= 450) ? 2 : 4;
+    this.setCols();
   }
 
   videoModeChanged(new_val) {