Converted input on the home page to textarea, maintaining same style but allowing an arbitrary number of urls to be entered

src/app/app.module.ts

@@ -30,6 +30,7 @@ import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { ClipboardModule } from '@angular/cdk/clipboard';
+import { TextFieldModule } from '@angular/cdk/text-field';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { AppComponent } from './app.component';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
@@ -175,6 +176,7 @@ export function isVisible({ event, element, scrollContainer, offset }: IsVisible
     MatChipsModule,
     DragDropModule,
     ClipboardModule,
+    TextFieldModule,
     NgxFileDropModule,
     AvatarModule,
     ContentLoaderModule,

src/app/main/main.component.css

@@ -151,4 +151,13 @@ mat-form-field.mat-form-field {
     .download-progress-bar {
         width: 125px;
     }
+}
+
+.url-input {
+    padding-right: 25px;
+    overflow-y: hidden;
+}
+
+.url-input::-webkit-scrollbar {
+    display: none;
 }

src/app/main/main.component.html

@@ -8,9 +8,9 @@
                         <div class="row">
                             <div [ngClass]="allowQualitySelect ? 'col-sm-9' : null" class="col-12">
                                 <mat-form-field color="accent" class="example-full-width">
-                                    <input style="padding-right: 25px;" matInput (keyup.enter)="downloadClicked()" (ngModelChange)="inputChanged($event)" [(ngModel)]="url" [placeholder]="'URL' + (youtubeSearchEnabled ? ' or search' : '')" type="url" name="url" #urlinput>
+                                    <textarea class="url-input" cdkTextareaAutosize cdkAutosizeMinRows="1" wrap="off" matInput (ngModelChange)="inputChanged($event)" [(ngModel)]="url" [placeholder]="'URL' + (youtubeSearchEnabled ? ' or search' : '')" type="url" name="url" #urlinput></textarea>
                                 </mat-form-field>
-                                <button type="button" class="input-clear-button" mat-icon-button (click)="clearInput()"><mat-icon>clear</mat-icon></button>
+                                <!--<button type="button" class="input-clear-button" mat-icon-button (click)="clearInput()"><mat-icon>clear</mat-icon></button>-->
                             </div>
                             <div *ngIf="allowQualitySelect" class="col-7 col-sm-3">
                                 <mat-form-field color="accent" style="display: inline-block; width: inherit; min-width: 120px;">
@@ -65,7 +65,7 @@
                         Only Audio
                     </ng-container>
                 </mat-checkbox>
-                <mat-checkbox *ngIf="allowAutoplay" (change)="autoplayChanged($event)" [(ngModel)]="autoplay" style="float: right; margin-top: -12px">
+                <mat-checkbox *ngIf="allowAutoplay" [disabled]="getURLArray(url).length > 1" (change)="autoplayChanged($event)" [(ngModel)]="autoplay" style="float: right; margin-top: -12px">
                     <ng-container i18n="Autoplay checkbox">
                         Autoplay
                     </ng-container>

src/app/main/main.component.ts

@@ -406,24 +406,28 @@ export class MainComponent implements OnInit {
 
     const selected_quality = this.selectedQuality;
     this.selectedQuality = '';
-
     this.downloadingfile = true;
-    this.postsService.downloadFile(this.url, type, (selected_quality === '' ? null : selected_quality),
-      customQualityConfiguration, customArgs, additionalArgs, customOutput, youtubeUsername, youtubePassword, cropFileSettings).subscribe(res => {
-        this.current_download = res['download'];
-        this.downloads.push(res['download']);
-        this.download_uids.push(res['download']['uid']);
-    }, () => { // can't access server
-      this.downloadingfile = false;
-      this.current_download = null;
-      this.postsService.openSnackBar('Download failed!', 'OK.');
-    });
 
-    if (!this.autoplay) {
-        const download_queued_message = $localize`Download for ${this.url}:url: has been queued!`;
-        this.postsService.openSnackBar(download_queued_message);
-        this.url = '';
+    const urls = this.getURLArray(this.url);
+    for (let i = 0; i < urls.length; i++) {
+      const url = urls[i];
+      this.postsService.downloadFile(url, type, (selected_quality === '' ? null : selected_quality),
+        customQualityConfiguration, customArgs, additionalArgs, customOutput, youtubeUsername, youtubePassword, cropFileSettings).subscribe(res => {
+          this.current_download = res['download'];
+          this.downloads.push(res['download']);
+          this.download_uids.push(res['download']['uid']);
+      }, () => { // can't access server
         this.downloadingfile = false;
+        this.current_download = null;
+        this.postsService.openSnackBar('Download failed!', 'OK.');
+      });
+
+      if (!this.autoplay && urls.length === 1) {
+          const download_queued_message = $localize`Download for ${url}:url: has been queued!`;
+          this.postsService.openSnackBar(download_queued_message);
+          this.url = '';
+          this.downloadingfile = false;
+      }
     }
   }
 
@@ -540,6 +544,13 @@ export class MainComponent implements OnInit {
 
   // checks if url is a valid URL
   ValidURL(str: string): boolean {
+    // mark multiple urls as valid but don't get additional info
+    const urls = this.getURLArray(str);
+    if (urls.length > 1) {
+      this.autoplay = false;
+      return true;
+    }
+    
     // tslint:disable-next-line: max-line-length
     const strRegex = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/;
     const re = new RegExp(strRegex);
@@ -587,6 +598,9 @@ export class MainComponent implements OnInit {
   }
 
   getSimulatedOutput(): void {
+    const urls = this.getURLArray(this.url);
+    if (urls.length > 1) return;
+
     // this function should be very similar to downloadClicked()
     const customArgs = (this.customArgsEnabled && this.replaceArgs ? this.customArgs : null);
     const additionalArgs = (this.customArgsEnabled && !this.replaceArgs ? this.customArgs : null);
@@ -807,4 +821,10 @@ export class MainComponent implements OnInit {
   reloadRecentVideos(): void {
     this.postsService.files_changed.next(true);
   }
+
+  getURLArray(url_str: string): Array<string> {
+    let lines = url_str.split('\n');
+    lines = lines.filter(line => line);
+    return lines;
+  }
 }