Add ability to set custom field to video form

4 files changed, 75 insertions, 2 deletions

diff --git a/client/src/app/shared/shared-forms/dynamic-form-field.component.html b/client/src/app/shared/shared-forms/dynamic-form-field.component.html
new file mode 100644
index 000000000..c111ea7df
--- /dev/null
+++ b/client/src/app/shared/shared-forms/dynamic-form-field.component.html
@@ -0,0 +1,35 @@
+<div [formGroup]="form">
+  <label *ngIf="setting.type !== 'input-checkbox'" [attr.for]="setting.name" [innerHTML]="setting.label"></label>
+
+  <input *ngIf="setting.type === 'input'" type="text" [id]="setting.name" [formControlName]="setting.name" />
+
+  <textarea *ngIf="setting.type === 'input-textarea'" type="text" [id]="setting.name" [formControlName]="setting.name"></textarea>
+
+  <my-help *ngIf="setting.type === 'markdown-text'" helpType="markdownText"></my-help>
+
+  <my-help *ngIf="setting.type === 'markdown-enhanced'" helpType="markdownEnhanced"></my-help>
+
+  <my-markdown-textarea
+    *ngIf="setting.type === 'markdown-text'"
+    markdownType="text" [id]="setting.name" [formControlName]="setting.name" textareaWidth="500px"
+    [classes]="{ 'input-error': formErrors['settings.name'] }"
+  ></my-markdown-textarea>
+
+  <my-markdown-textarea
+    *ngIf="setting.type === 'markdown-enhanced'"
+    markdownType="enhanced" [id]="setting.name" [formControlName]="setting.name" textareaWidth="500px"
+    [classes]="{ 'input-error': formErrors['settings.name'] }"
+  ></my-markdown-textarea>
+
+  <my-peertube-checkbox
+    *ngIf="setting.type === 'input-checkbox'"
+    [id]="setting.name"
+    [formControlName]="setting.name"
+    [labelInnerHTML]="setting.label"
+  ></my-peertube-checkbox>
+
+  <div *ngIf="formErrors[setting.name]" class="form-error">
+    {{ formErrors[setting.name] }}
+  </div>
+
+</div>
diff --git a/client/src/app/shared/shared-forms/dynamic-form-field.component.scss b/client/src/app/shared/shared-forms/dynamic-form-field.component.scss
new file mode 100644
index 000000000..70b3cf6c3
--- /dev/null
+++ b/client/src/app/shared/shared-forms/dynamic-form-field.component.scss
@@ -0,0 +1,18 @@
+@import '_variables';
+@import '_mixins';
+
+input:not([type=submit]) {
+  @include peertube-input-text(340px);
+
+  display: block;
+}
+
+textarea {
+  @include peertube-textarea(340px, 200px);
+
+  display: block;
+}
+
+.peertube-select-container {
+  @include peertube-select-container(340px);
+}
diff --git a/client/src/app/shared/shared-forms/dynamic-form-field.component.ts b/client/src/app/shared/shared-forms/dynamic-form-field.component.ts
new file mode 100644
index 000000000..b63890797
--- /dev/null
+++ b/client/src/app/shared/shared-forms/dynamic-form-field.component.ts
@@ -0,0 +1,15 @@
+import { Component, Input } from '@angular/core'
+import { FormGroup } from '@angular/forms'
+import { RegisterClientFormFieldOptions } from '@shared/models'
+
+@Component({
+  selector: 'my-dynamic-form-field',
+  templateUrl: './dynamic-form-field.component.html',
+  styleUrls: [ './dynamic-form-field.component.scss' ]
+})
+
+export class DynamicFormFieldComponent {
+  @Input() form: FormGroup
+  @Input() formErrors: any
+  @Input() setting: RegisterClientFormFieldOptions
+}
diff --git a/client/src/app/shared/shared-forms/shared-form.module.ts b/client/src/app/shared/shared-forms/shared-form.module.ts
index 1946ac21f..a28988f87 100644
--- a/client/src/app/shared/shared-forms/shared-form.module.ts
+++ b/client/src/app/shared/shared-forms/shared-form.module.ts
@@ -15,6 +15,7 @@ import { ReactiveFileComponent } from './reactive-file.component'
 import { SelectChannelComponent, SelectCheckboxComponent, SelectOptionsComponent, SelectTagsComponent } from './select'
 import { TextareaAutoResizeDirective } from './textarea-autoresize.directive'
 import { TimestampInputComponent } from './timestamp-input.component'
+import { DynamicFormFieldComponent } from './dynamic-form-field.component'
 
 @NgModule({
   imports: [
@@ -41,7 +42,9 @@ import { TimestampInputComponent } from './timestamp-input.component'
     SelectChannelComponent,
     SelectOptionsComponent,
     SelectTagsComponent,
-    SelectCheckboxComponent
+    SelectCheckboxComponent,
+
+    DynamicFormFieldComponent
   ],
 
   exports: [
@@ -63,7 +66,9 @@ import { TimestampInputComponent } from './timestamp-input.component'
     SelectChannelComponent,
     SelectOptionsComponent,
     SelectTagsComponent,
-    SelectCheckboxComponent
+    SelectCheckboxComponent,
+
+    DynamicFormFieldComponent
   ],
 
   providers: [