Add ability to set custom field to video form

21 files changed, 221 insertions, 66 deletions

diff --git a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.html b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.html
index f3fc429ff..cb2894568 100644
--- a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.html
+++ b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.html
@@ -7,38 +7,7 @@
 
   <form *ngIf="hasRegisteredSettings()" role="form" (ngSubmit)="formValidated()" [formGroup]="form">
     <div class="form-group" *ngFor="let setting of registeredSettings">
-      <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>
+      <my-dynamic-form-field [form]="form" [setting]="setting" [formErrors]="formErrors"></my-dynamic-form-field>
     </div>
 
     <input type="submit" i18n value="Update plugin settings" [disabled]="!form.valid">
diff --git a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss
index cc35aec57..5ab6e5f1b 100644
--- a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss
+++ b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss
@@ -5,22 +5,6 @@ h2 {
   margin-bottom: 20px;
 }
 
-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);
-}
-
 input[type=submit], button {
   @include peertube-button;
   @include orange-button;
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.html b/client/src/app/+videos/+video-edit/shared/video-edit.component.html
index ae3413e79..842997b20 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.html
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.html
@@ -265,6 +265,21 @@
       </ng-template>
     </ng-container>
 
+    <ng-container ngbNavItem *ngIf="pluginFields.length !== 0">
+      <a ngbNavLink i18n>Plugin settings</a>
+
+      <ng-template ngbNavContent>
+        <div class="row plugin-settings">
+
+          <div class="col-md-12 col-xl-8">
+            <div *ngFor="let pluginSetting of pluginFields" class="form-group">
+              <my-dynamic-form-field [form]="pluginDataFormGroup" [formErrors]="formErrors" [setting]="pluginSetting.commonOptions"></my-dynamic-form-field>
+            </div>
+          </div>
+
+        </div>
+      </ng-template>
+    </ng-container>
   </div>
 
   <div [ngbNavOutlet]="nav"></div>
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
index 9caf009c5..3082a4f72 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.scss
@@ -7,7 +7,8 @@
 @import 'variables';
 @import 'mixins';
 
-label {
+label,
+my-dynamic-form-field ::ng-deep label {
   font-weight: $font-regular;
   font-size: 100%;
 }
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.ts b/client/src/app/+videos/+video-edit/shared/video-edit.component.ts
index 92d06aa12..f04111e69 100644
--- a/client/src/app/+videos/+video-edit/shared/video-edit.component.ts
+++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.ts
@@ -1,8 +1,8 @@
 import { forkJoin } from 'rxjs'
 import { map } from 'rxjs/operators'
-import { Component, Input, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core'
+import { Component, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output, ViewChild } from '@angular/core'
 import { FormArray, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms'
-import { ServerService } from '@app/core'
+import { HooksService, PluginService, ServerService } from '@app/core'
 import { removeElementFromArray } from '@app/helpers'
 import {
   VIDEO_CATEGORY_VALIDATOR,
@@ -21,6 +21,7 @@ import { FormReactiveValidationMessages, FormValidatorService, SelectChannelItem
 import { InstanceService } from '@app/shared/shared-instance'
 import { VideoCaptionEdit, VideoEdit, VideoService } from '@app/shared/shared-main'
 import { ServerConfig, VideoConstant, VideoPrivacy } from '@shared/models'
+import { RegisterClientFormFieldOptions, RegisterClientVideoFieldOptions } from '@shared/models/plugins/register-client-form-field.model'
 import { I18nPrimengCalendarService } from './i18n-primeng-calendar.service'
 import { VideoCaptionAddModalComponent } from './video-caption-add-modal.component'
 
@@ -39,9 +40,12 @@ export class VideoEditComponent implements OnInit, OnDestroy {
   @Input() schedulePublicationPossible = true
   @Input() videoCaptions: (VideoCaptionEdit & { captionPath?: string })[] = []
   @Input() waitTranscodingEnabled = true
+  @Input() type: 'import-url' | 'import-torrent' | 'upload' | 'update'
 
   @ViewChild('videoCaptionAddModal', { static: true }) videoCaptionAddModal: VideoCaptionAddModalComponent
 
+  @Output() pluginFieldsAdded = new EventEmitter<void>()
+
   // So that it can be accessed in the template
   readonly SPECIAL_SCHEDULED_PRIVACY = VideoEdit.SPECIAL_SCHEDULED_PRIVACY
 
@@ -53,6 +57,8 @@ export class VideoEditComponent implements OnInit, OnDestroy {
   tagValidators: ValidatorFn[]
   tagValidatorsMessages: { [ name: string ]: string }
 
+  pluginDataFormGroup: FormGroup
+
   schedulePublicationEnabled = false
 
   calendarLocale: any = {}
@@ -64,6 +70,11 @@ export class VideoEditComponent implements OnInit, OnDestroy {
 
   serverConfig: ServerConfig
 
+  pluginFields: {
+    commonOptions: RegisterClientFormFieldOptions
+    videoFormOptions: RegisterClientVideoFieldOptions
+  }[] = []
+
   private schedulerInterval: any
   private firstPatchDone = false
   private initialVideoCaptions: string[] = []
@@ -72,9 +83,11 @@ export class VideoEditComponent implements OnInit, OnDestroy {
     private formValidatorService: FormValidatorService,
     private videoService: VideoService,
     private serverService: ServerService,
+    private pluginService: PluginService,
     private instanceService: InstanceService,
     private i18nPrimengCalendarService: I18nPrimengCalendarService,
-    private ngZone: NgZone
+    private ngZone: NgZone,
+    private hooks: HooksService
   ) {
     this.calendarLocale = this.i18nPrimengCalendarService.getCalendarLocale()
     this.calendarTimezone = this.i18nPrimengCalendarService.getTimezone()
@@ -136,19 +149,26 @@ export class VideoEditComponent implements OnInit, OnDestroy {
   ngOnInit () {
     this.updateForm()
 
+    this.pluginService.ensurePluginsAreLoaded('video-edit')
+      .then(() => this.updatePluginFields())
+
     this.serverService.getVideoCategories()
         .subscribe(res => this.videoCategories = res)
+
     this.serverService.getVideoLicences()
         .subscribe(res => this.videoLicences = res)
+
     forkJoin([
       this.instanceService.getAbout(),
       this.serverService.getVideoLanguages()
     ]).pipe(map(([ about, languages ]) => ({ about, languages })))
       .subscribe(res => {
         this.videoLanguages = res.languages
-          .map(l => res.about.instance.languages.includes(l.id)
-            ? { ...l, group: $localize`Instance languages`, groupOrder: 0 }
-            : { ...l, group: $localize`All languages`, groupOrder: 1 })
+          .map(l => {
+            return res.about.instance.languages.includes(l.id)
+              ? { ...l, group: $localize`Instance languages`, groupOrder: 0 }
+              : { ...l, group: $localize`All languages`, groupOrder: 1 }
+          })
           .sort((a, b) => a.groupOrder - b.groupOrder)
       })
 
@@ -173,6 +193,8 @@ export class VideoEditComponent implements OnInit, OnDestroy {
     this.ngZone.runOutsideAngular(() => {
       this.schedulerInterval = setInterval(() => this.minScheduledDate = new Date(), 1000 * 60) // Update every minute
     })
+
+    this.hooks.runAction('action:video-edit.init', 'video-edit', { type: this.type })
   }
 
   ngOnDestroy () {
@@ -223,6 +245,23 @@ export class VideoEditComponent implements OnInit, OnDestroy {
     })
   }
 
+  private updatePluginFields () {
+    this.pluginFields = this.pluginService.getRegisteredVideoFormFields(this.type)
+
+    if (this.pluginFields.length === 0) return
+
+    const obj: any = {}
+
+    for (const setting of this.pluginFields) {
+      obj[setting.commonOptions.name] = new FormControl(setting.commonOptions.default)
+    }
+
+    this.pluginDataFormGroup = new FormGroup(obj)
+    this.form.addControl('pluginData', this.pluginDataFormGroup)
+
+    this.pluginFieldsAdded.emit()
+  }
+
   private trackPrivacyChange () {
     // We will update the schedule input and the wait transcoding checkbox validators
     this.form.controls[ 'privacy' ]
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.html b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.html
index 825cb6df4..785514c76 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.html
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.html
@@ -58,6 +58,7 @@
   <my-video-edit
     [form]="form" [formErrors]="formErrors" [videoCaptions]="videoCaptions" [schedulePublicationPossible]="false"
     [validationMessages]="validationMessages" [userVideoChannels]="userVideoChannels"
+    type="import-torrent"
   ></my-video-edit>
 
   <div class="submit-container">
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.html b/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.html
index 2107dc9d0..3e4eb5fbc 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.html
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.html
@@ -54,6 +54,7 @@
   <my-video-edit
     [form]="form" [formErrors]="formErrors" [videoCaptions]="videoCaptions" [schedulePublicationPossible]="false"
     [validationMessages]="validationMessages" [userVideoChannels]="userVideoChannels"
+    type="import-url"
   ></my-video-edit>
 
   <div class="submit-container">
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.html b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.html
index ed697c25b..677fa1197 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.html
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.html
@@ -69,6 +69,7 @@
     [form]="form" [formErrors]="formErrors" [videoCaptions]="videoCaptions"
     [validationMessages]="validationMessages" [userVideoChannels]="userVideoChannels"
     [waitTranscodingEnabled]="waitTranscodingEnabled"
+    type="upload"
   ></my-video-edit>
 
   <div class="submit-container">
diff --git a/client/src/app/+videos/+video-edit/video-update.component.html b/client/src/app/+videos/+video-edit/video-update.component.html
index 6c1239395..b37596399 100644
--- a/client/src/app/+videos/+video-edit/video-update.component.html
+++ b/client/src/app/+videos/+video-edit/video-update.component.html
@@ -10,11 +10,12 @@
       [form]="form" [formErrors]="formErrors" [schedulePublicationPossible]="schedulePublicationPossible"
       [validationMessages]="validationMessages" [userVideoChannels]="userVideoChannels"
       [videoCaptions]="videoCaptions" [waitTranscodingEnabled]="waitTranscodingEnabled"
+      type="update" (pluginFieldsAdded)="hydratePluginFieldsFromVideo()"
     ></my-video-edit>
 
     <div class="submit-container">
       <my-button className="orange-button" i18n-label label="Update" icon="circle-tick"
-                 (click)="update()" (keydown.enter)="update()" 
+                 (click)="update()" (keydown.enter)="update()"
                  [disabled]="!form.valid || isUpdatingVideo === true"
       ></my-button>
     </div>
diff --git a/client/src/app/+videos/+video-edit/video-update.component.ts b/client/src/app/+videos/+video-edit/video-update.component.ts
index 2e1d0f89d..20438a2d3 100644
--- a/client/src/app/+videos/+video-edit/video-update.component.ts
+++ b/client/src/app/+videos/+video-edit/video-update.component.ts
@@ -126,6 +126,14 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
         )
   }
 
+  hydratePluginFieldsFromVideo () {
+    if (!this.video.pluginData) return
+
+    this.form.patchValue({
+      pluginData: this.video.pluginData
+    })
+  }
+
   private hydrateFormFromVideo () {
     this.form.patchValue(this.video.toFormPatch())
 
diff --git a/client/src/app/core/plugins/plugin.service.ts b/client/src/app/core/plugins/plugin.service.ts
index 871613b89..4e44a1865 100644
--- a/client/src/app/core/plugins/plugin.service.ts
+++ b/client/src/app/core/plugins/plugin.service.ts
@@ -9,7 +9,7 @@ import { RestExtractor } from '@app/core/rest'
 import { ServerService } from '@app/core/server/server.service'
 import { getDevLocale, isOnDevLocale } from '@app/helpers'
 import { CustomModalComponent } from '@app/modal/custom-modal.component'
-import { Hooks, loadPlugin, PluginInfo, runHook } from '@root-helpers/plugins'
+import { FormFields, Hooks, loadPlugin, PluginInfo, runHook } from '@root-helpers/plugins'
 import { getCompleteLocale, isDefaultLocale, peertubeTranslate } from '@shared/core-utils/i18n'
 import {
   ClientHook,
@@ -36,6 +36,7 @@ export class PluginService implements ClientHook {
     'video-watch': new ReplaySubject<boolean>(1),
     signup: new ReplaySubject<boolean>(1),
     login: new ReplaySubject<boolean>(1),
+    'video-edit': new ReplaySubject<boolean>(1),
     embed: new ReplaySubject<boolean>(1)
   }
 
@@ -50,6 +51,9 @@ export class PluginService implements ClientHook {
   private loadingScopes: { [id in PluginClientScope]?: boolean } = {}
 
   private hooks: Hooks = {}
+  private formFields: FormFields = {
+    video: []
+  }
 
   constructor (
     private authService: AuthService,
@@ -188,9 +192,18 @@ export class PluginService implements ClientHook {
       : PluginType.THEME
   }
 
+  getRegisteredVideoFormFields (type: 'import-url' | 'import-torrent' | 'upload' | 'update') {
+    return this.formFields.video.filter(f => f.videoFormOptions.type === type)
+  }
+
   private loadPlugin (pluginInfo: PluginInfo) {
     return this.zone.runOutsideAngular(() => {
-      return loadPlugin(this.hooks, pluginInfo, pluginInfo => this.buildPeerTubeHelpers(pluginInfo))
+      return loadPlugin({
+        hooks: this.hooks,
+        formFields: this.formFields,
+        pluginInfo,
+        peertubeHelpersFactory: pluginInfo => this.buildPeerTubeHelpers(pluginInfo)
+      })
     })
   }
 
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: [
diff --git a/client/src/app/shared/shared-main/video/video-edit.model.ts b/client/src/app/shared/shared-main/video/video-edit.model.ts
index 6a529e052..757b686c0 100644
--- a/client/src/app/shared/shared-main/video/video-edit.model.ts
+++ b/client/src/app/shared/shared-main/video/video-edit.model.ts
@@ -25,6 +25,8 @@ export class VideoEdit implements VideoUpdate {
   scheduleUpdate?: VideoScheduleUpdate
   originallyPublishedAt?: Date | string
 
+  pluginData?: any
+
   constructor (
     video?: Video & {
       tags: string[],
@@ -55,10 +57,12 @@ export class VideoEdit implements VideoUpdate {
 
       this.scheduleUpdate = video.scheduledUpdate
       this.originallyPublishedAt = video.originallyPublishedAt ? new Date(video.originallyPublishedAt) : null
+
+      this.pluginData = video.pluginData
     }
   }
 
-  patch (values: { [ id: string ]: string }) {
+  patch (values: { [ id: string ]: any }) {
     Object.keys(values).forEach((key) => {
       this[ key ] = values[ key ]
     })
diff --git a/client/src/app/shared/shared-main/video/video.model.ts b/client/src/app/shared/shared-main/video/video.model.ts
index 73f0198e2..0dca3da0d 100644
--- a/client/src/app/shared/shared-main/video/video.model.ts
+++ b/client/src/app/shared/shared-main/video/video.model.ts
@@ -84,6 +84,8 @@ export class Video implements VideoServerModel {
     currentTime: number
   }
 
+  pluginData?: any
+
   static buildClientUrl (videoUUID: string) {
     return '/videos/watch/' + videoUUID
   }
@@ -152,6 +154,8 @@ export class Video implements VideoServerModel {
 
     this.originInstanceHost = this.account.host
     this.originInstanceUrl = 'https://' + this.originInstanceHost
+
+    this.pluginData = hash.pluginData
   }
 
   isVideoNSFWForUser (user: User, serverConfig: ServerConfig) {
diff --git a/client/src/app/shared/shared-main/video/video.service.ts b/client/src/app/shared/shared-main/video/video.service.ts
index 48aff82b4..8a688c8ed 100644
--- a/client/src/app/shared/shared-main/video/video.service.ts
+++ b/client/src/app/shared/shared-main/video/video.service.ts
@@ -96,6 +96,7 @@ export class VideoService implements VideosProvider {
       downloadEnabled: video.downloadEnabled,
       thumbnailfile: video.thumbnailfile,
       previewfile: video.previewfile,
+      pluginData: video.pluginData,
       scheduleUpdate,
       originallyPublishedAt
     }
diff --git a/client/src/root-helpers/plugins.ts b/client/src/root-helpers/plugins.ts
index 011721761..4bc2c8eb2 100644
--- a/client/src/root-helpers/plugins.ts
+++ b/client/src/root-helpers/plugins.ts
@@ -1,6 +1,14 @@
-import { getHookType, internalRunHook } from '@shared/core-utils/plugins/hooks'
-import { ClientHookName, ClientScript, RegisterClientHookOptions, ServerConfigPlugin, PluginType, clientHookObject } from '../../../shared/models'
 import { RegisterClientHelpers } from 'src/types/register-client-option.model'
+import { getHookType, internalRunHook } from '@shared/core-utils/plugins/hooks'
+import { RegisterClientFormFieldOptions, RegisterClientVideoFieldOptions } from '@shared/models/plugins/register-client-form-field.model'
+import {
+  ClientHookName,
+  clientHookObject,
+  ClientScript,
+  PluginType,
+  RegisterClientHookOptions,
+  ServerConfigPlugin
+} from '../../../shared/models'
 import { ClientScript as ClientScriptModule } from '../types/client-script.model'
 import { importModule } from './utils'
 
@@ -18,6 +26,13 @@ type PluginInfo = {
   isTheme: boolean
 }
 
+type FormFields = {
+  video: {
+    commonOptions: RegisterClientFormFieldOptions
+    videoFormOptions: RegisterClientVideoFieldOptions
+  }[]
+}
+
 async function runHook<T> (hooks: Hooks, hookName: ClientHookName, result?: T, params?: any) {
   if (!hooks[hookName]) return result
 
@@ -34,7 +49,13 @@ async function runHook<T> (hooks: Hooks, hookName: ClientHookName, result?: T, p
   return result
 }
 
-function loadPlugin (hooks: Hooks, pluginInfo: PluginInfo, peertubeHelpersFactory: (pluginInfo: PluginInfo) => RegisterClientHelpers) {
+function loadPlugin (options: {
+  hooks: Hooks
+  pluginInfo: PluginInfo
+  peertubeHelpersFactory: (pluginInfo: PluginInfo) => RegisterClientHelpers
+  formFields?: FormFields
+}) {
+  const { hooks, pluginInfo, peertubeHelpersFactory, formFields } = options
   const { plugin, clientScript } = pluginInfo
 
   const registerHook = (options: RegisterClientHookOptions) => {
@@ -54,12 +75,23 @@ function loadPlugin (hooks: Hooks, pluginInfo: PluginInfo, peertubeHelpersFactor
     })
   }
 
+  const registerVideoField = (commonOptions: RegisterClientFormFieldOptions, videoFormOptions: RegisterClientVideoFieldOptions) => {
+    if (!formFields) {
+      throw new Error('Video field registration is not supported')
+    }
+
+    formFields.video.push({
+      commonOptions,
+      videoFormOptions
+    })
+  }
+
   const peertubeHelpers = peertubeHelpersFactory(pluginInfo)
 
   console.log('Loading script %s of plugin %s.', clientScript.script, plugin.name)
 
   return importModule(clientScript.script)
-    .then((script: ClientScriptModule) => script.register({ registerHook, peertubeHelpers }))
+    .then((script: ClientScriptModule) => script.register({ registerHook, registerVideoField, peertubeHelpers }))
     .then(() => sortHooksByPriority(hooks))
     .catch(err => console.error('Cannot import or register plugin %s.', pluginInfo.plugin.name, err))
 }
@@ -68,6 +100,7 @@ export {
   HookStructValue,
   Hooks,
   PluginInfo,
+  FormFields,
   loadPlugin,
   runHook
 }
diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts
index fe65794f7..c79471005 100644
--- a/client/src/standalone/videos/embed.ts
+++ b/client/src/standalone/videos/embed.ts
@@ -750,7 +750,11 @@ export class PeerTubeEmbed {
           isTheme: false
         }
 
-        await loadPlugin(this.peertubeHooks, pluginInfo, _ => this.buildPeerTubeHelpers(translations))
+        await loadPlugin({
+          hooks: this.peertubeHooks,
+          pluginInfo,
+          peertubeHelpersFactory: _ => this.buildPeerTubeHelpers(translations)
+        })
       }
     }
   }
diff --git a/client/src/types/register-client-option.model.ts b/client/src/types/register-client-option.model.ts
index dff00e9dd..e3c6d803d 100644
--- a/client/src/types/register-client-option.model.ts
+++ b/client/src/types/register-client-option.model.ts
@@ -1,8 +1,11 @@
+import { RegisterClientFormFieldOptions, RegisterClientVideoFieldOptions } from '@shared/models/plugins/register-client-form-field.model'
 import { RegisterClientHookOptions } from '@shared/models/plugins/register-client-hook.model'
 
 export type RegisterClientOptions = {
   registerHook: (options: RegisterClientHookOptions) => void
 
+  registerVideoField: (commonOptions: RegisterClientFormFieldOptions, videoFormOptions: RegisterClientVideoFieldOptions) => void
+
   peertubeHelpers: RegisterClientHelpers
 }