Arg modifier improvements: args are now shown as removable chips which can be directly typed as well (w/o using the adder)

src/app/app.module.ts

@@ -52,6 +52,7 @@ import { SubscriptionFileCardComponent } from './subscription/subscription-file-
 import { SubscriptionInfoDialogComponent } from './dialogs/subscription-info-dialog/subscription-info-dialog.component';
 import { SettingsComponent } from './settings/settings.component';
 import { CheckOrSetPinDialogComponent } from './dialogs/check-or-set-pin-dialog/check-or-set-pin-dialog.component';
+import {MatChipsModule} from '@angular/material/chips';
 
 import es from '@angular/common/locales/es';
 import { AboutDialogComponent } from './dialogs/about-dialog/about-dialog.component';
@@ -141,6 +142,7 @@ export function isVisible({ event, element, scrollContainer, offset }: IsVisible
     MatPaginatorModule,
     MatSortModule,
     MatTableModule,
+    MatChipsModule,
     DragDropModule,
     ClipboardModule,
     VgCoreModule,

src/app/dialogs/arg-modifier-dialog/arg-modifier-dialog.component.html

@@ -7,7 +7,18 @@
                 <mat-card class="mat-elevation-z6">
                     <h6 i18n="Simulated args title">Simulated new args</h6>
                     <mat-form-field style="width: 100%" color="accent">
-                        <textarea [disabled]="true" matInput>{{modified_args}}</textarea>
+                        <mat-chip-list class="example-chip" #chipList aria-label="Args array" cdkDropList cdkDropListDisabled
+                            cdkDropListOrientation="horizontal"
+                            (cdkDropListDropped)="drop($event)">
+                            <mat-chip *ngFor="let arg of args_array; let i = index;" [selectable]="selectable" [removable]="removable" (removed)="remove(i)" cdkDrag>
+                                {{arg}}
+                                <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
+                            </mat-chip>
+                        </mat-chip-list>
+                        <input style="width: 100%;" matInput [matChipInputFor]="chipList"
+                            [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+                            [matChipInputAddOnBlur]="addOnBlur"
+                            (matChipInputTokenEnd)="add($event)">
                     </mat-form-field>
                 </mat-card>
             </div>
@@ -63,6 +74,6 @@
 </mat-dialog-content>
 
 <mat-dialog-actions>
-    <button mat-button mat-dialog-close><ng-container i18n="Arg modifier cancel button">Cancel</ng-container></button>
+    <button mat-button [mat-dialog-close]="null"><ng-container i18n="Arg modifier cancel button">Cancel</ng-container></button>
     <button mat-button color="accent" [mat-dialog-close]="modified_args"><ng-container i18n="Arg modifier modify button">Modify</ng-container></button>
 </mat-dialog-actions>

src/app/dialogs/arg-modifier-dialog/arg-modifier-dialog.component.ts

@@ -1,5 +1,7 @@
-import { Component, OnInit, Inject, Pipe, PipeTransform, NgModule } from '@angular/core';
+import { Component, OnInit, Inject, Pipe, PipeTransform } from '@angular/core';
+import { COMMA, ENTER } from '@angular/cdk/keycodes';
 import { MAT_DIALOG_DATA, MatDialogRef, MatDialog } from '@angular/material/dialog';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { FormControl } from '@angular/forms';
 import { args, args_info } from './youtubedl_args';
 import { Observable } from 'rxjs';
@@ -38,6 +40,14 @@ export class ArgModifierDialogComponent implements OnInit {
   argsInfo = null;
   filteredOptions: Observable<any>;
 
+  // chip list
+  visible = true;
+  selectable = true;
+  removable = true;
+  addOnBlur = false;
+  args_array = null;
+  readonly separatorKeysCodes: number[] = [ENTER, COMMA];
+
   static forRoot() {
     return {
         ngModule: ArgModifierDialogComponent,
@@ -51,6 +61,7 @@ export class ArgModifierDialogComponent implements OnInit {
   ngOnInit(): void {
     if (this.data) {
       this.modified_args = this.data.initial_args;
+      this.generateArgsArray();
     }
 
     this.getAllPossibleArgs();
@@ -117,4 +128,35 @@ export class ArgModifierDialogComponent implements OnInit {
     this.stateCtrl.setValue(arg_key);
   }
 
+  // chip list functions
+
+  add(event) {
+    const input = event.input;
+    const arg = event.value;
+    this.args_array.push(arg);
+    if (this.modified_args.length > 0) {
+      this.modified_args += ',,'
+    }
+    this.modified_args += arg;
+    if (input) { input.value = ''; }
+  }
+
+  remove(arg_index) {
+    this.args_array.splice(arg_index, 1);
+    this.modified_args = this.args_array.join(',,');
+  }
+
+  generateArgsArray() {
+    if (this.modified_args.trim().length === 0) {
+      this.args_array = [];
+      return;
+    }
+    this.args_array = this.modified_args.split(',,');
+  }
+
+  drop(event: CdkDragDrop<any>) {
+    moveItemInArray(this.args_array, event.previousIndex, event.currentIndex);
+    this.modified_args = this.args_array.join(',,');
+  }
+
 }

src/app/main/main.component.ts

@@ -1131,8 +1131,8 @@ export class MainComponent implements OnInit {
       }
     });
     dialogRef.afterClosed().subscribe(new_args => {
-      if (new_args) {
+      if (new_args !== null) {
-       this.customArgs = new_args;
+        this.customArgs = new_args;
       }
     });
   }

src/app/settings/settings.component.ts

@@ -144,9 +144,9 @@ export class SettingsComponent implements OnInit {
      }
    });
    dialogRef.afterClosed().subscribe(new_args => {
-     if (new_args) {
+    if (new_args !== null) {
       this.new_config['Downloader']['custom_args'] = new_args;
-     }
+    }
    });
  }