123 files changed, 1627 insertions, 1508 deletions
diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.ts b/client/src/app/+about/about-instance/contact-admin-modal.component.ts
index 215e281bb..11e442f6b 100644
--- a/client/src/app/+about/about-instance/contact-admin-modal.component.ts
+++ b/client/src/app/+about/about-instance/contact-admin-modal.component.ts
@@ -1,6 +1,12 @@
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { Notifier, ServerService } from '@app/core'
-import { FormReactive, FormValidatorService, InstanceValidatorsService } from '@app/shared/shared-forms'
+import {
+  BODY_VALIDATOR,
+  FROM_EMAIL_VALIDATOR,
+  FROM_NAME_VALIDATOR,
+  SUBJECT_VALIDATOR
+} from '@app/shared/form-validators/instance-validators'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { InstanceService } from '@app/shared/shared-instance'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
@@ -22,7 +28,6 @@ export class ContactAdminModalComponent extends FormReactive implements OnInit {
  constructor (
    protected formValidatorService: FormValidatorService,
    private modalService: NgbModal,
-    private instanceValidatorsService: InstanceValidatorsService,
    private instanceService: InstanceService,
    private serverService: ServerService,
    private notifier: Notifier
@@ -40,10 +45,10 @@ export class ContactAdminModalComponent extends FormReactive implements OnInit {
        .subscribe(config => this.serverConfig = config)
    this.buildForm({
-      fromName: this.instanceValidatorsService.FROM_NAME,
+      fromName: FROM_NAME_VALIDATOR,
-      fromEmail: this.instanceValidatorsService.FROM_EMAIL,
+      fromEmail: FROM_EMAIL_VALIDATOR,
-      subject: this.instanceValidatorsService.SUBJECT,
+      subject: SUBJECT_VALIDATOR,
-      body: this.instanceValidatorsService.BODY
+      body: BODY_VALIDATOR
    })
  }
diff --git a/client/src/app/+about/about-routing.module.ts b/client/src/app/+about/about-routing.module.ts
index 91ccb846f..828b2884c 100644
--- a/client/src/app/+about/about-routing.module.ts
+++ b/client/src/app/+about/about-routing.module.ts
@@ -23,7 +23,7 @@ const aboutRoutes: Routes = [
        component: AboutInstanceComponent,
        data: {
          meta: {
-            title: 'About this instance'
+            title: $localize`About this instance`
          }
        },
        resolve: {
@@ -35,7 +35,7 @@ const aboutRoutes: Routes = [
        component: AboutPeertubeComponent,
        data: {
          meta: {
-            title: 'About PeerTube'
+            title: $localize`About PeerTube`
          }
        }
      },
@@ -44,7 +44,7 @@ const aboutRoutes: Routes = [
        component: AboutFollowsComponent,
        data: {
          meta: {
-            title: 'About follows'
+            title: $localize`About follows`
          }
        }
      }
diff --git a/client/src/app/+accounts/accounts-routing.module.ts b/client/src/app/+accounts/accounts-routing.module.ts
index 45b24eb55..d2ca784b0 100644
--- a/client/src/app/+accounts/accounts-routing.module.ts
+++ b/client/src/app/+accounts/accounts-routing.module.ts
@@ -26,7 +26,7 @@ const accountsRoutes: Routes = [
        component: AccountVideosComponent,
        data: {
          meta: {
-            title: 'Account videos'
+            title: $localize`Account videos`
          },
          reuse: {
            enabled: true,
@@ -39,7 +39,7 @@ const accountsRoutes: Routes = [
        component: AccountVideoChannelsComponent,
        data: {
          meta: {
-            title: 'Account video channels'
+            title: $localize`Account video channels`
          }
        }
      },
@@ -48,7 +48,7 @@ const accountsRoutes: Routes = [
        component: AccountAboutComponent,
        data: {
          meta: {
-            title: 'About account'
+            title: $localize`About account`
          }
        }
      }
diff --git a/client/src/app/+admin/config/config.routes.ts b/client/src/app/+admin/config/config.routes.ts
index 7c1a1a166..1b76b29cc 100644
--- a/client/src/app/+admin/config/config.routes.ts
+++ b/client/src/app/+admin/config/config.routes.ts
@@ -23,7 +23,7 @@ export const ConfigRoutes: Routes = [
        component: EditCustomConfigComponent,
        data: {
          meta: {
-            title: 'Edit custom configuration'
+            title: $localize`Edit custom configuration`
          }
        }
      }
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
index 3a60b144f..78e9dd5e5 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
@@ -5,12 +5,19 @@ import { ConfigService } from '@app/+admin/config/shared/config.service'
 import { Notifier } from '@app/core'
 import { ServerService } from '@app/core/server/server.service'
 import {
-  CustomConfigValidatorsService,
+  ADMIN_EMAIL_VALIDATOR,
-  FormReactive,
+  CACHE_CAPTIONS_SIZE_VALIDATOR,
-  FormValidatorService,
+  CACHE_PREVIEWS_SIZE_VALIDATOR,
-  SelectOptionsItem,
+  INDEX_URL_VALIDATOR,
-  UserValidatorsService
+  INSTANCE_NAME_VALIDATOR,
-} from '@app/shared/shared-forms'
+  INSTANCE_SHORT_DESCRIPTION_VALIDATOR,
+  SEARCH_INDEX_URL_VALIDATOR,
+  SERVICES_TWITTER_USERNAME_VALIDATOR,
+  SIGNUP_LIMIT_VALIDATOR,
+  TRANSCODING_THREADS_VALIDATOR
+} from '@app/shared/form-validators/custom-config-validators'
+import { USER_VIDEO_QUOTA_DAILY_VALIDATOR, USER_VIDEO_QUOTA_VALIDATOR } from '@app/shared/form-validators/user-validators'
+import { FormReactive, FormValidatorService, SelectOptionsItem } from '@app/shared/shared-forms'
 import { NgbNav } from '@ng-bootstrap/ng-bootstrap'
 import { CustomConfig, ServerConfig } from '@shared/models'
@@ -37,8 +44,6 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit, A
  constructor (
    private viewportScroller: ViewportScroller,
    protected formValidatorService: FormValidatorService,
-    private customConfigValidatorsService: CustomConfigValidatorsService,
-    private userValidatorsService: UserValidatorsService,
    private notifier: Notifier,
    private configService: ConfigService,
    private serverService: ServerService
@@ -110,8 +115,8 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit, A
    const formGroupData: { [key in keyof CustomConfig ]: any } = {
      instance: {
-        name: this.customConfigValidatorsService.INSTANCE_NAME,
+        name: INSTANCE_NAME_VALIDATOR,
-        shortDescription: this.customConfigValidatorsService.INSTANCE_SHORT_DESCRIPTION,
+        shortDescription: INSTANCE_SHORT_DESCRIPTION_VALIDATOR,
        description: null,
        isNSFW: false,
@@ -143,21 +148,21 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit, A
      },
      services: {
        twitter: {
-          username: this.customConfigValidatorsService.SERVICES_TWITTER_USERNAME,
+          username: SERVICES_TWITTER_USERNAME_VALIDATOR,
          whitelisted: null
        }
      },
      cache: {
        previews: {
-          size: this.customConfigValidatorsService.CACHE_PREVIEWS_SIZE
+          size: CACHE_PREVIEWS_SIZE_VALIDATOR
        },
        captions: {
-          size: this.customConfigValidatorsService.CACHE_CAPTIONS_SIZE
+          size: CACHE_CAPTIONS_SIZE_VALIDATOR
        }
      },
      signup: {
        enabled: null,
-        limit: this.customConfigValidatorsService.SIGNUP_LIMIT,
+        limit: SIGNUP_LIMIT_VALIDATOR,
        requiresEmailVerification: null
      },
      import: {
@@ -171,18 +176,18 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit, A
        }
      },
      admin: {
-        email: this.customConfigValidatorsService.ADMIN_EMAIL
+        email: ADMIN_EMAIL_VALIDATOR
      },
      contactForm: {
        enabled: null
      },
      user: {
-        videoQuota: this.userValidatorsService.USER_VIDEO_QUOTA,
+        videoQuota: USER_VIDEO_QUOTA_VALIDATOR,
-        videoQuotaDaily: this.userValidatorsService.USER_VIDEO_QUOTA_DAILY
+        videoQuotaDaily: USER_VIDEO_QUOTA_DAILY_VALIDATOR
      },
      transcoding: {
        enabled: null,
-        threads: this.customConfigValidatorsService.TRANSCODING_THREADS,
+        threads: TRANSCODING_THREADS_VALIDATOR,
        allowAdditionalExtensions: null,
        allowAudioFiles: null,
        resolutions: {},
@@ -213,7 +218,7 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit, A
          },
          autoFollowIndex: {
            enabled: null,
-            indexUrl: this.customConfigValidatorsService.INDEX_URL
+            indexUrl: INDEX_URL_VALIDATOR
          }
        }
      },
@@ -230,7 +235,7 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit, A
        },
        searchIndex: {
          enabled: null,
-          url: this.customConfigValidatorsService.SEARCH_INDEX_URL,
+          url: SEARCH_INDEX_URL_VALIDATOR,
          disableLocalSearch: null,
          isDefaultSearch: null
        }
diff --git a/client/src/app/+admin/follows/follows.routes.ts b/client/src/app/+admin/follows/follows.routes.ts
index 817074536..cd70daf77 100644
--- a/client/src/app/+admin/follows/follows.routes.ts
+++ b/client/src/app/+admin/follows/follows.routes.ts
@@ -25,7 +25,7 @@ export const FollowsRoutes: Routes = [
        component: FollowingListComponent,
        data: {
          meta: {
-            title: 'Following list'
+            title: $localize`Following list`
          }
        }
      },
@@ -34,7 +34,7 @@ export const FollowsRoutes: Routes = [
        component: FollowersListComponent,
        data: {
          meta: {
-            title: 'Followers list'
+            title: $localize`Followers list`
          }
        }
      },
diff --git a/client/src/app/+admin/moderation/moderation.routes.ts b/client/src/app/+admin/moderation/moderation.routes.ts
index 8a31a54dc..b60dd5334 100644
--- a/client/src/app/+admin/moderation/moderation.routes.ts
+++ b/client/src/app/+admin/moderation/moderation.routes.ts
@@ -33,7 +33,7 @@ export const ModerationRoutes: Routes = [
        data: {
          userRight: UserRight.MANAGE_ABUSES,
          meta: {
-            title: 'Reports'
+            title: $localize`Reports`
          }
        }
      },
@@ -64,7 +64,7 @@ export const ModerationRoutes: Routes = [
        data: {
          userRight: UserRight.MANAGE_VIDEO_BLACKLIST,
          meta: {
-            title: 'Videos blocked'
+            title: $localize`Videos blocked`
          }
        }
      },
@@ -75,7 +75,7 @@ export const ModerationRoutes: Routes = [
        data: {
          userRight: UserRight.MANAGE_ACCOUNTS_BLOCKLIST,
          meta: {
-            title: 'Muted accounts'
+            title: $localize`Muted accounts`
          }
        }
      },
@@ -86,7 +86,7 @@ export const ModerationRoutes: Routes = [
        data: {
          userRight: UserRight.MANAGE_SERVERS_BLOCKLIST,
          meta: {
-            title: 'Muted instances'
+            title: $localize`Muted instances`
          }
        }
      }
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>
+      <my-dynamic-form-field [form]="form" [setting]="setting" [formErrors]="formErrors"></my-dynamic-form-field>
-      <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>
    <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/+admin/plugins/plugin-show-installed/plugin-show-installed.component.ts b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.ts
index a33f01691..1acaf9674 100644
--- a/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.ts
+++ b/client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.ts
@@ -3,7 +3,8 @@ import { map, switchMap } from 'rxjs/operators'
 import { Component, OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { Notifier } from '@app/core'
-import { BuildFormArgument, FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { BuildFormArgument } from '@app/shared/form-validators'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { PeerTubePlugin, RegisterServerSettingOptions } from '@shared/models'
 import { PluginApiService } from '../shared/plugin-api.service'
diff --git a/client/src/app/+admin/plugins/plugins.routes.ts b/client/src/app/+admin/plugins/plugins.routes.ts
index 4bef27be3..4cf55dda2 100644
--- a/client/src/app/+admin/plugins/plugins.routes.ts
+++ b/client/src/app/+admin/plugins/plugins.routes.ts
@@ -25,7 +25,7 @@ export const PluginsRoutes: Routes = [
        component: PluginListInstalledComponent,
        data: {
          meta: {
-            title: 'List installed plugins'
+            title: $localize`List installed plugins`
          }
        }
      },
@@ -34,7 +34,7 @@ export const PluginsRoutes: Routes = [
        component: PluginSearchComponent,
        data: {
          meta: {
-            title: 'Search plugins'
+            title: $localize`Search plugins`
          }
        }
      },
@@ -43,7 +43,7 @@ export const PluginsRoutes: Routes = [
        component: PluginShowInstalledComponent,
        data: {
          meta: {
-            title: 'Show plugin'
+            title: $localize`Show plugin`
          }
        }
      }
diff --git a/client/src/app/+admin/system/system.routes.ts b/client/src/app/+admin/system/system.routes.ts
index 0e8d98519..72ab6705a 100644
--- a/client/src/app/+admin/system/system.routes.ts
+++ b/client/src/app/+admin/system/system.routes.ts
@@ -10,8 +10,6 @@ export const SystemRoutes: Routes = [
  {
    path: 'system',
    component: SystemComponent,
-    data: {
-    },
    children: [
      {
        path: '',
@@ -25,7 +23,7 @@ export const SystemRoutes: Routes = [
        data: {
          meta: {
            userRight: UserRight.MANAGE_JOBS,
-            title: 'Jobs'
+            title: $localize`Jobs`
          }
        }
      },
@@ -36,7 +34,7 @@ export const SystemRoutes: Routes = [
        data: {
          meta: {
            userRight: UserRight.MANAGE_LOGS,
-            title: 'Logs'
+            title: $localize`Logs`
          }
        }
      },
@@ -47,7 +45,7 @@ export const SystemRoutes: Routes = [
        data: {
          meta: {
            userRight: UserRight.MANAGE_DEBUG,
-            title: 'Debug'
+            title: $localize`Debug`
          }
        }
      }
diff --git a/client/src/app/+admin/users/user-edit/user-create.component.ts b/client/src/app/+admin/users/user-edit/user-create.component.ts
index 36d71a927..d0aac1cb9 100644
--- a/client/src/app/+admin/users/user-edit/user-create.component.ts
+++ b/client/src/app/+admin/users/user-edit/user-create.component.ts
@@ -2,7 +2,17 @@ import { Component, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { ConfigService } from '@app/+admin/config/shared/config.service'
 import { AuthService, Notifier, ScreenService, ServerService, UserService } from '@app/core'
-import { FormValidatorService, UserValidatorsService } from '@app/shared/shared-forms'
+import {
+  USER_CHANNEL_NAME_VALIDATOR,
+  USER_EMAIL_VALIDATOR,
+  USER_PASSWORD_OPTIONAL_VALIDATOR,
+  USER_PASSWORD_VALIDATOR,
+  USER_ROLE_VALIDATOR,
+  USER_USERNAME_VALIDATOR,
+  USER_VIDEO_QUOTA_DAILY_VALIDATOR,
+  USER_VIDEO_QUOTA_VALIDATOR
+} from '@app/shared/form-validators/user-validators'
+import { FormValidatorService } from '@app/shared/shared-forms'
 import { UserCreate, UserRole } from '@shared/models'
 import { UserEdit } from './user-edit'
@@ -20,7 +30,6 @@ export class UserCreateComponent extends UserEdit implements OnInit {
    protected configService: ConfigService,
    protected screenService: ScreenService,
    protected auth: AuthService,
-    private userValidatorsService: UserValidatorsService,
    private route: ActivatedRoute,
    private router: Router,
    private notifier: Notifier,
@@ -41,13 +50,13 @@ export class UserCreateComponent extends UserEdit implements OnInit {
    }
    this.buildForm({
-      username: this.userValidatorsService.USER_USERNAME,
+      username: USER_USERNAME_VALIDATOR,
-      channelName: this.userValidatorsService.USER_CHANNEL_NAME,
+      channelName: USER_CHANNEL_NAME_VALIDATOR,
-      email: this.userValidatorsService.USER_EMAIL,
+      email: USER_EMAIL_VALIDATOR,
-      password: this.isPasswordOptional() ? this.userValidatorsService.USER_PASSWORD_OPTIONAL : this.userValidatorsService.USER_PASSWORD,
+      password: this.isPasswordOptional() ? USER_PASSWORD_OPTIONAL_VALIDATOR : USER_PASSWORD_VALIDATOR,
-      role: this.userValidatorsService.USER_ROLE,
+      role: USER_ROLE_VALIDATOR,
-      videoQuota: this.userValidatorsService.USER_VIDEO_QUOTA,
+      videoQuota: USER_VIDEO_QUOTA_VALIDATOR,
-      videoQuotaDaily: this.userValidatorsService.USER_VIDEO_QUOTA_DAILY,
+      videoQuotaDaily: USER_VIDEO_QUOTA_DAILY_VALIDATOR,
      byPassAutoBlock: null
    }, defaultValues)
  }
diff --git a/client/src/app/+admin/users/user-edit/user-password.component.ts b/client/src/app/+admin/users/user-edit/user-password.component.ts
index 25f13495a..05d52b17f 100644
--- a/client/src/app/+admin/users/user-edit/user-password.component.ts
+++ b/client/src/app/+admin/users/user-edit/user-password.component.ts
@@ -1,6 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core'
 import { Notifier, UserService } from '@app/core'
-import { FormReactive, FormValidatorService, UserValidatorsService } from '@app/shared/shared-forms'
+import { USER_PASSWORD_VALIDATOR } from '@app/shared/form-validators/user-validators'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { UserUpdate } from '@shared/models'
 @Component({
@@ -17,7 +18,6 @@ export class UserPasswordComponent extends FormReactive implements OnInit {
  constructor (
    protected formValidatorService: FormValidatorService,
-    private userValidatorsService: UserValidatorsService,
    private notifier: Notifier,
    private userService: UserService
    ) {
@@ -26,7 +26,7 @@ export class UserPasswordComponent extends FormReactive implements OnInit {
  ngOnInit () {
    this.buildForm({
-      password: this.userValidatorsService.USER_PASSWORD
+      password: USER_PASSWORD_VALIDATOR
    })
  }
diff --git a/client/src/app/+admin/users/user-edit/user-update.component.ts b/client/src/app/+admin/users/user-edit/user-update.component.ts
index 55bc7290e..e16f66a2b 100644
--- a/client/src/app/+admin/users/user-edit/user-update.component.ts
+++ b/client/src/app/+admin/users/user-edit/user-update.component.ts
@@ -3,7 +3,13 @@ import { Component, OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { ConfigService } from '@app/+admin/config/shared/config.service'
 import { AuthService, Notifier, ScreenService, ServerService, User, UserService } from '@app/core'
-import { FormValidatorService, UserValidatorsService } from '@app/shared/shared-forms'
+import {
+  USER_EMAIL_VALIDATOR,
+  USER_ROLE_VALIDATOR,
+  USER_VIDEO_QUOTA_DAILY_VALIDATOR,
+  USER_VIDEO_QUOTA_VALIDATOR
+} from '@app/shared/form-validators/user-validators'
+import { FormValidatorService } from '@app/shared/shared-forms'
 import { User as UserType, UserAdminFlag, UserRole, UserUpdate } from '@shared/models'
 import { UserEdit } from './user-edit'
@@ -23,7 +29,6 @@ export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy {
    protected configService: ConfigService,
    protected screenService: ScreenService,
    protected auth: AuthService,
-    private userValidatorsService: UserValidatorsService,
    private route: ActivatedRoute,
    private router: Router,
    private notifier: Notifier,
@@ -44,10 +49,10 @@ export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy {
    }
    this.buildForm({
-      email: this.userValidatorsService.USER_EMAIL,
+      email: USER_EMAIL_VALIDATOR,
-      role: this.userValidatorsService.USER_ROLE,
+      role: USER_ROLE_VALIDATOR,
-      videoQuota: this.userValidatorsService.USER_VIDEO_QUOTA,
+      videoQuota: USER_VIDEO_QUOTA_VALIDATOR,
-      videoQuotaDaily: this.userValidatorsService.USER_VIDEO_QUOTA_DAILY,
+      videoQuotaDaily: USER_VIDEO_QUOTA_DAILY_VALIDATOR,
      byPassAutoBlock: null
    }, defaultValues)
diff --git a/client/src/app/+admin/users/users.routes.ts b/client/src/app/+admin/users/users.routes.ts
index 6560f0260..5183498d6 100644
--- a/client/src/app/+admin/users/users.routes.ts
+++ b/client/src/app/+admin/users/users.routes.ts
@@ -24,7 +24,7 @@ export const UsersRoutes: Routes = [
        component: UserListComponent,
        data: {
          meta: {
-            title: 'Users list'
+            title: $localize`Users list`
          }
        }
      },
@@ -33,7 +33,7 @@ export const UsersRoutes: Routes = [
        component: UserCreateComponent,
        data: {
          meta: {
-            title: 'Create a user'
+            title: $localize`Create a user`
          }
        },
        resolve: {
@@ -45,7 +45,7 @@ export const UsersRoutes: Routes = [
        component: UserUpdateComponent,
        data: {
          meta: {
-            title: 'Update a user'
+            title: $localize`Update a user`
          }
        }
      }
diff --git a/client/src/app/+login/login-routing.module.ts b/client/src/app/+login/login-routing.module.ts
index aad55eac8..258ddc5c1 100644
--- a/client/src/app/+login/login-routing.module.ts
+++ b/client/src/app/+login/login-routing.module.ts
@@ -11,7 +11,7 @@ const loginRoutes: Routes = [
    canActivate: [ MetaGuard ],
    data: {
      meta: {
-        title: 'Login'
+        title: $localize`Login`
      }
    },
    resolve: {
diff --git a/client/src/app/+login/login.component.ts b/client/src/app/+login/login.component.ts
index e9336172e..351750453 100644
--- a/client/src/app/+login/login.component.ts
+++ b/client/src/app/+login/login.component.ts
@@ -3,7 +3,8 @@ import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angula
 import { ActivatedRoute } from '@angular/router'
 import { AuthService, Notifier, RedirectService, UserService } from '@app/core'
 import { HooksService } from '@app/core/plugins/hooks.service'
-import { FormReactive, FormValidatorService, LoginValidatorsService } from '@app/shared/shared-forms'
+import { LOGIN_PASSWORD_VALIDATOR, LOGIN_USERNAME_VALIDATOR } from '@app/shared/form-validators/login-validators'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
 import { RegisteredExternalAuthConfig, ServerConfig } from '@shared/models'
@@ -31,7 +32,6 @@ export class LoginComponent extends FormReactive implements OnInit, AfterViewIni
    protected formValidatorService: FormValidatorService,
    private route: ActivatedRoute,
    private modalService: NgbModal,
-    private loginValidatorsService: LoginValidatorsService,
    private authService: AuthService,
    private userService: UserService,
    private redirectService: RedirectService,
@@ -65,8 +65,8 @@ export class LoginComponent extends FormReactive implements OnInit, AfterViewIni
    }
    this.buildForm({
-      username: this.loginValidatorsService.LOGIN_USERNAME,
+      username: LOGIN_USERNAME_VALIDATOR,
-      password: this.loginValidatorsService.LOGIN_PASSWORD
+      password: LOGIN_PASSWORD_VALIDATOR
    })
  }
diff --git a/client/src/app/+my-account/+my-account-video-channels/my-account-video-channel-create.component.ts b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channel-create.component.ts
index 5c438c3bf..e2ea87fb8 100644
--- a/client/src/app/+my-account/+my-account-video-channels/my-account-video-channel-create.component.ts
+++ b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channel-create.component.ts
@@ -1,7 +1,13 @@
 import { Component, OnInit } from '@angular/core'
 import { Router } from '@angular/router'
 import { AuthService, Notifier } from '@app/core'
-import { FormValidatorService, VideoChannelValidatorsService } from '@app/shared/shared-forms'
+import {
+  VIDEO_CHANNEL_DESCRIPTION_VALIDATOR,
+  VIDEO_CHANNEL_DISPLAY_NAME_VALIDATOR,
+  VIDEO_CHANNEL_NAME_VALIDATOR,
+  VIDEO_CHANNEL_SUPPORT_VALIDATOR
+} from '@app/shared/form-validators/video-channel-validators'
+import { FormValidatorService } from '@app/shared/shared-forms'
 import { VideoChannelService } from '@app/shared/shared-main'
 import { VideoChannelCreate } from '@shared/models'
 import { MyAccountVideoChannelEdit } from './my-account-video-channel-edit'
@@ -17,7 +23,6 @@ export class MyAccountVideoChannelCreateComponent extends MyAccountVideoChannelE
  constructor (
    protected formValidatorService: FormValidatorService,
    private authService: AuthService,
-    private videoChannelValidatorsService: VideoChannelValidatorsService,
    private notifier: Notifier,
    private router: Router,
    private videoChannelService: VideoChannelService
@@ -31,10 +36,10 @@ export class MyAccountVideoChannelCreateComponent extends MyAccountVideoChannelE
  ngOnInit () {
    this.buildForm({
-      name: this.videoChannelValidatorsService.VIDEO_CHANNEL_NAME,
+      name: VIDEO_CHANNEL_NAME_VALIDATOR,
-      'display-name': this.videoChannelValidatorsService.VIDEO_CHANNEL_DISPLAY_NAME,
+      'display-name': VIDEO_CHANNEL_DISPLAY_NAME_VALIDATOR,
-      description: this.videoChannelValidatorsService.VIDEO_CHANNEL_DESCRIPTION,
+      description: VIDEO_CHANNEL_DESCRIPTION_VALIDATOR,
-      support: this.videoChannelValidatorsService.VIDEO_CHANNEL_SUPPORT
+      support: VIDEO_CHANNEL_SUPPORT_VALIDATOR
    })
  }
diff --git a/client/src/app/+my-account/+my-account-video-channels/my-account-video-channel-update.component.ts b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channel-update.component.ts
index 485521dcc..01659b8da 100644
--- a/client/src/app/+my-account/+my-account-video-channels/my-account-video-channel-update.component.ts
+++ b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channel-update.component.ts
@@ -2,7 +2,12 @@ import { Subscription } from 'rxjs'
 import { Component, OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, Notifier, ServerService } from '@app/core'
-import { FormValidatorService, VideoChannelValidatorsService } from '@app/shared/shared-forms'
+import {
+  VIDEO_CHANNEL_DESCRIPTION_VALIDATOR,
+  VIDEO_CHANNEL_DISPLAY_NAME_VALIDATOR,
+  VIDEO_CHANNEL_SUPPORT_VALIDATOR
+} from '@app/shared/form-validators/video-channel-validators'
+import { FormValidatorService } from '@app/shared/shared-forms'
 import { VideoChannel, VideoChannelService } from '@app/shared/shared-main'
 import { ServerConfig, VideoChannelUpdate } from '@shared/models'
 import { MyAccountVideoChannelEdit } from './my-account-video-channel-edit'
@@ -23,7 +28,6 @@ export class MyAccountVideoChannelUpdateComponent extends MyAccountVideoChannelE
  constructor (
    protected formValidatorService: FormValidatorService,
    private authService: AuthService,
-    private videoChannelValidatorsService: VideoChannelValidatorsService,
    private notifier: Notifier,
    private router: Router,
    private route: ActivatedRoute,
@@ -39,9 +43,9 @@ export class MyAccountVideoChannelUpdateComponent extends MyAccountVideoChannelE
        .subscribe(config => this.serverConfig = config)
    this.buildForm({
-      'display-name': this.videoChannelValidatorsService.VIDEO_CHANNEL_DISPLAY_NAME,
+      'display-name': VIDEO_CHANNEL_DISPLAY_NAME_VALIDATOR,
-      description: this.videoChannelValidatorsService.VIDEO_CHANNEL_DESCRIPTION,
+      description: VIDEO_CHANNEL_DESCRIPTION_VALIDATOR,
-      support: this.videoChannelValidatorsService.VIDEO_CHANNEL_SUPPORT,
+      support: VIDEO_CHANNEL_SUPPORT_VALIDATOR,
      bulkVideosSupportUpdate: null
    })
diff --git a/client/src/app/+my-account/+my-account-video-channels/my-account-video-channels-routing.module.ts b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channels-routing.module.ts
index 94037e18f..3aa3e360f 100644
--- a/client/src/app/+my-account/+my-account-video-channels/my-account-video-channels-routing.module.ts
+++ b/client/src/app/+my-account/+my-account-video-channels/my-account-video-channels-routing.module.ts
@@ -10,7 +10,7 @@ const myAccountVideoChannelsRoutes: Routes = [
    component: MyAccountVideoChannelsComponent,
    data: {
      meta: {
-        title: 'Account video channels'
+        title: $localize`Account video channels`
      }
    }
  },
@@ -19,7 +19,7 @@ const myAccountVideoChannelsRoutes: Routes = [
    component: MyAccountVideoChannelCreateComponent,
    data: {
      meta: {
-        title: 'Create new video channel'
+        title: $localize`Create new video channel`
      }
    }
  },
@@ -28,7 +28,7 @@ const myAccountVideoChannelsRoutes: Routes = [
    component: MyAccountVideoChannelUpdateComponent,
    data: {
      meta: {
-        title: 'Update video channel'
+        title: $localize`Update video channel`
      }
    }
  }
diff --git a/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.ts b/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.ts
index 3bfffe2da..4c4436755 100644
--- a/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.ts
+++ b/client/src/app/+my-account/my-account-ownership/my-account-accept-ownership/my-account-accept-ownership.component.ts
@@ -1,6 +1,7 @@
 import { Component, ElementRef, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'
 import { AuthService, Notifier } from '@app/core'
-import { FormReactive, FormValidatorService, VideoAcceptOwnershipValidatorsService } from '@app/shared/shared-forms'
+import { OWNERSHIP_CHANGE_CHANNEL_VALIDATOR } from '@app/shared/form-validators/video-ownership-change-validators'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { VideoChannelService, VideoOwnershipService } from '@app/shared/shared-main'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { VideoChangeOwnership, VideoChannel } from '@shared/models'
@@ -23,7 +24,6 @@ export class MyAccountAcceptOwnershipComponent extends FormReactive implements O
  constructor (
    protected formValidatorService: FormValidatorService,
-    private videoChangeOwnershipValidatorsService: VideoAcceptOwnershipValidatorsService,
    private videoOwnershipService: VideoOwnershipService,
    private notifier: Notifier,
    private authService: AuthService,
@@ -40,7 +40,7 @@ export class MyAccountAcceptOwnershipComponent extends FormReactive implements O
      .subscribe(videoChannels => this.videoChannels = videoChannels.data)
    this.buildForm({
-      channel: this.videoChangeOwnershipValidatorsService.CHANNEL
+      channel: OWNERSHIP_CHANGE_CHANNEL_VALIDATOR
    })
  }
diff --git a/client/src/app/+my-account/my-account-routing.module.ts b/client/src/app/+my-account/my-account-routing.module.ts
index 48237e133..0bcb38ef5 100644
--- a/client/src/app/+my-account/my-account-routing.module.ts
+++ b/client/src/app/+my-account/my-account-routing.module.ts
@@ -34,7 +34,7 @@ const myAccountRoutes: Routes = [
        component: MyAccountSettingsComponent,
        data: {
          meta: {
-            title: 'Account settings'
+            title: $localize`Account settings`
          }
        }
      },
@@ -52,7 +52,7 @@ const myAccountRoutes: Routes = [
        component: MyAccountVideoPlaylistsComponent,
        data: {
          meta: {
-            title: 'Account playlists'
+            title: $localize`Account playlists`
          }
        }
      },
@@ -61,7 +61,7 @@ const myAccountRoutes: Routes = [
        component: MyAccountVideoPlaylistCreateComponent,
        data: {
          meta: {
-            title: 'Create new playlist'
+            title: $localize`Create new playlist`
          }
        }
      },
@@ -70,7 +70,7 @@ const myAccountRoutes: Routes = [
        component: MyAccountVideoPlaylistElementsComponent,
        data: {
          meta: {
-            title: 'Playlist elements'
+            title: $localize`Playlist elements`
          }
        }
      },
@@ -79,7 +79,7 @@ const myAccountRoutes: Routes = [
        component: MyAccountVideoPlaylistUpdateComponent,
        data: {
          meta: {
-            title: 'Update playlist'
+            title: $localize`Update playlist`
          }
        }
      },
@@ -89,7 +89,7 @@ const myAccountRoutes: Routes = [
        component: MyAccountVideosComponent,
        data: {
          meta: {
-            title: 'Account videos'
+            title: $localize`Account videos`
          },
          reuse: {
            enabled: true,
@@ -102,7 +102,7 @@ const myAccountRoutes: Routes = [
        component: MyAccountVideoImportsComponent,
        data: {
          meta: {
-            title: 'Account video imports'
+            title: $localize`Account video imports`
          }
        }
      },
@@ -111,7 +111,7 @@ const myAccountRoutes: Routes = [
        component: MyAccountSubscriptionsComponent,
        data: {
          meta: {
-            title: 'Account subscriptions'
+            title: $localize`Account subscriptions`
          }
        }
      },
@@ -120,7 +120,7 @@ const myAccountRoutes: Routes = [
        component: MyAccountOwnershipComponent,
        data: {
          meta: {
-            title: 'Ownership changes'
+            title: $localize`Ownership changes`
          }
        }
      },
@@ -129,7 +129,7 @@ const myAccountRoutes: Routes = [
        component: MyAccountBlocklistComponent,
        data: {
          meta: {
-            title: 'Muted accounts'
+            title: $localize`Muted accounts`
          }
        }
      },
@@ -138,7 +138,7 @@ const myAccountRoutes: Routes = [
        component: MyAccountServerBlocklistComponent,
        data: {
          meta: {
-            title: 'Muted servers'
+            title: $localize`Muted servers`
          }
        }
      },
@@ -147,7 +147,7 @@ const myAccountRoutes: Routes = [
        component: MyAccountHistoryComponent,
        data: {
          meta: {
-            title: 'Videos history'
+            title: $localize`Videos history`
          },
          reuse: {
            enabled: true,
@@ -160,7 +160,7 @@ const myAccountRoutes: Routes = [
        component: MyAccountNotificationsComponent,
        data: {
          meta: {
-            title: 'Notifications'
+            title: $localize`Notifications`
          }
        }
      },
@@ -169,7 +169,7 @@ const myAccountRoutes: Routes = [
        component: MyAccountAbusesListComponent,
        data: {
          meta: {
-            title: 'My abuse reports'
+            title: $localize`My abuse reports`
          }
        }
      }
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.ts b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.ts
index 396936ef3..b2b7849c2 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.ts
@@ -2,7 +2,8 @@ import { forkJoin } from 'rxjs'
 import { tap } from 'rxjs/operators'
 import { Component, OnInit } from '@angular/core'
 import { AuthService, ServerService, UserService } from '@app/core'
-import { FormReactive, FormValidatorService, UserValidatorsService } from '@app/shared/shared-forms'
+import { USER_EMAIL_VALIDATOR, USER_PASSWORD_VALIDATOR } from '@app/shared/form-validators/user-validators'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { User } from '@shared/models'
 @Component({
@@ -17,18 +18,17 @@ export class MyAccountChangeEmailComponent extends FormReactive implements OnIni
  constructor (
    protected formValidatorService: FormValidatorService,
-    private userValidatorsService: UserValidatorsService,
    private authService: AuthService,
    private userService: UserService,
    private serverService: ServerService
-    ) {
+  ) {
    super()
  }
  ngOnInit () {
    this.buildForm({
-      'new-email': this.userValidatorsService.USER_EMAIL,
+      'new-email': USER_EMAIL_VALIDATOR,
-      'password': this.userValidatorsService.USER_PASSWORD
+      'password': USER_PASSWORD_VALIDATOR
    })
    this.user = this.authService.getUser()
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts
index 91fe4ec72..ba68bab32 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts
@@ -1,7 +1,8 @@
 import { filter } from 'rxjs/operators'
 import { Component, OnInit } from '@angular/core'
 import { AuthService, Notifier, UserService } from '@app/core'
-import { FormReactive, FormValidatorService, UserValidatorsService } from '@app/shared/shared-forms'
+import { USER_CONFIRM_PASSWORD_VALIDATOR, USER_PASSWORD_VALIDATOR } from '@app/shared/form-validators/user-validators'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { User } from '@shared/models'
 @Component({
@@ -15,7 +16,6 @@ export class MyAccountChangePasswordComponent extends FormReactive implements On
  constructor (
    protected formValidatorService: FormValidatorService,
-    private userValidatorsService: UserValidatorsService,
    private notifier: Notifier,
    private authService: AuthService,
    private userService: UserService
@@ -25,9 +25,9 @@ export class MyAccountChangePasswordComponent extends FormReactive implements On
  ngOnInit () {
    this.buildForm({
-      'current-password': this.userValidatorsService.USER_PASSWORD,
+      'current-password': USER_PASSWORD_VALIDATOR,
-      'new-password': this.userValidatorsService.USER_PASSWORD,
+      'new-password': USER_PASSWORD_VALIDATOR,
-      'new-confirmed-password': this.userValidatorsService.USER_CONFIRM_PASSWORD
+      'new-confirmed-password': USER_CONFIRM_PASSWORD_VALIDATOR
    })
    this.user = this.authService.getUser()
diff --git a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.ts b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.ts
index ed0984bf7..000a2c0ac 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.ts
@@ -1,7 +1,8 @@
 import { Subject } from 'rxjs'
 import { Component, Input, OnInit } from '@angular/core'
 import { Notifier, User, UserService } from '@app/core'
-import { FormReactive, FormValidatorService, UserValidatorsService } from '@app/shared/shared-forms'
+import { USER_DESCRIPTION_VALIDATOR, USER_DISPLAY_NAME_REQUIRED_VALIDATOR } from '@app/shared/form-validators/user-validators'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 @Component({
  selector: 'my-account-profile',
@@ -16,17 +17,16 @@ export class MyAccountProfileComponent extends FormReactive implements OnInit {
  constructor (
    protected formValidatorService: FormValidatorService,
-    private userValidatorsService: UserValidatorsService,
    private notifier: Notifier,
    private userService: UserService
-    ) {
+  ) {
    super()
  }
  ngOnInit () {
    this.buildForm({
-      'display-name': this.userValidatorsService.USER_DISPLAY_NAME_REQUIRED,
+      'display-name': USER_DISPLAY_NAME_REQUIRED_VALIDATOR,
-      description: this.userValidatorsService.USER_DESCRIPTION
+      description: USER_DESCRIPTION_VALIDATOR
    })
    this.userInformationLoaded.subscribe(() => {
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-create.component.ts b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-create.component.ts
index 5427dc3a0..7a80aaa92 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-create.component.ts
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-create.component.ts
@@ -2,7 +2,14 @@ import { Component, OnInit } from '@angular/core'
 import { Router } from '@angular/router'
 import { AuthService, Notifier, ServerService } from '@app/core'
 import { populateAsyncUserVideoChannels } from '@app/helpers'
-import { FormValidatorService, VideoPlaylistValidatorsService } from '@app/shared/shared-forms'
+import {
+  setPlaylistChannelValidator,
+  VIDEO_PLAYLIST_CHANNEL_ID_VALIDATOR,
+  VIDEO_PLAYLIST_DESCRIPTION_VALIDATOR,
+  VIDEO_PLAYLIST_DISPLAY_NAME_VALIDATOR,
+  VIDEO_PLAYLIST_PRIVACY_VALIDATOR
+} from '@app/shared/form-validators/video-playlist-validators'
+import { FormValidatorService } from '@app/shared/shared-forms'
 import { VideoPlaylistService } from '@app/shared/shared-video-playlist'
 import { VideoPlaylistCreate } from '@shared/models/videos/playlist/video-playlist-create.model'
 import { VideoPlaylistPrivacy } from '@shared/models/videos/playlist/video-playlist-privacy.model'
@@ -19,7 +26,6 @@ export class MyAccountVideoPlaylistCreateComponent extends MyAccountVideoPlaylis
  constructor (
    protected formValidatorService: FormValidatorService,
    private authService: AuthService,
-    private videoPlaylistValidatorsService: VideoPlaylistValidatorsService,
    private notifier: Notifier,
    private router: Router,
    private videoPlaylistService: VideoPlaylistService,
@@ -30,15 +36,15 @@ export class MyAccountVideoPlaylistCreateComponent extends MyAccountVideoPlaylis
  ngOnInit () {
    this.buildForm({
-      displayName: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DISPLAY_NAME,
+      displayName: VIDEO_PLAYLIST_DISPLAY_NAME_VALIDATOR,
-      privacy: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_PRIVACY,
+      privacy: VIDEO_PLAYLIST_PRIVACY_VALIDATOR,
-      description: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DESCRIPTION,
+      description: VIDEO_PLAYLIST_DESCRIPTION_VALIDATOR,
-      videoChannelId: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_CHANNEL_ID,
+      videoChannelId: VIDEO_PLAYLIST_CHANNEL_ID_VALIDATOR,
      thumbnailfile: null
    })
    this.form.get('privacy').valueChanges.subscribe(privacy => {
-      this.videoPlaylistValidatorsService.setChannelValidator(this.form.get('videoChannelId'), privacy)
+      setPlaylistChannelValidator(this.form.get('videoChannelId'), privacy)
    })
    populateAsyncUserVideoChannels(this.authService, this.userVideoChannels)
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss
index 3204167ff..de7e1993f 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component.scss
@@ -65,12 +65,19 @@
    padding-top: 20px;
    margin-left: calc(#{var(--expanded-horizontal-margin-content)} * -1);
  }
-}
-@media not all and (hover: hover) and (pointer: fine) {
+  .playlist-elements {
-  .video {
+    padding: 0 !important;
-    .more {
+  }
-      opacity: 1;
+  ::ng-deep my-video-playlist-element-miniature {
+    .video {
+      padding: 5px !important;
+    }
+    .position {
+      margin-right: 5px !important;
    }
  }
 }
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-update.component.ts b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-update.component.ts
index 149d0d94f..fefc6d607 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-update.component.ts
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-update.component.ts
@@ -4,7 +4,14 @@ import { Component, OnDestroy, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { AuthService, Notifier, ServerService } from '@app/core'
 import { populateAsyncUserVideoChannels } from '@app/helpers'
-import { FormValidatorService, VideoPlaylistValidatorsService } from '@app/shared/shared-forms'
+import {
+  setPlaylistChannelValidator,
+  VIDEO_PLAYLIST_CHANNEL_ID_VALIDATOR,
+  VIDEO_PLAYLIST_DESCRIPTION_VALIDATOR,
+  VIDEO_PLAYLIST_DISPLAY_NAME_VALIDATOR,
+  VIDEO_PLAYLIST_PRIVACY_VALIDATOR
+} from '@app/shared/form-validators/video-playlist-validators'
+import { FormValidatorService } from '@app/shared/shared-forms'
 import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist'
 import { VideoPlaylistUpdate } from '@shared/models'
 import { MyAccountVideoPlaylistEdit } from './my-account-video-playlist-edit'
@@ -23,7 +30,6 @@ export class MyAccountVideoPlaylistUpdateComponent extends MyAccountVideoPlaylis
  constructor (
    protected formValidatorService: FormValidatorService,
    private authService: AuthService,
-    private videoPlaylistValidatorsService: VideoPlaylistValidatorsService,
    private notifier: Notifier,
    private router: Router,
    private route: ActivatedRoute,
@@ -35,15 +41,15 @@ export class MyAccountVideoPlaylistUpdateComponent extends MyAccountVideoPlaylis
  ngOnInit () {
    this.buildForm({
-      displayName: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DISPLAY_NAME,
+      displayName: VIDEO_PLAYLIST_DISPLAY_NAME_VALIDATOR,
-      privacy: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_PRIVACY,
+      privacy: VIDEO_PLAYLIST_PRIVACY_VALIDATOR,
-      description: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DESCRIPTION,
+      description: VIDEO_PLAYLIST_DESCRIPTION_VALIDATOR,
-      videoChannelId: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_CHANNEL_ID,
+      videoChannelId: VIDEO_PLAYLIST_CHANNEL_ID_VALIDATOR,
      thumbnailfile: null
    })
    this.form.get('privacy').valueChanges.subscribe(privacy => {
-      this.videoPlaylistValidatorsService.setChannelValidator(this.form.get('videoChannelId'), privacy)
+      setPlaylistChannelValidator(this.form.get('videoChannelId'), privacy)
    })
    populateAsyncUserVideoChannels(this.authService, this.userVideoChannels)
diff --git a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts
index edd691694..84237dee1 100644
--- a/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts
+++ b/client/src/app/+my-account/my-account-videos/video-change-ownership/video-change-ownership.component.ts
@@ -1,6 +1,7 @@
 import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'
 import { Notifier, UserService } from '@app/core'
-import { FormReactive, FormValidatorService, VideoChangeOwnershipValidatorsService } from '@app/shared/shared-forms'
+import { OWNERSHIP_CHANGE_USERNAME_VALIDATOR } from '@app/shared/form-validators/video-ownership-change-validators'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { Video, VideoOwnershipService } from '@app/shared/shared-main'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
@@ -20,7 +21,6 @@ export class VideoChangeOwnershipComponent extends FormReactive implements OnIni
  constructor (
    protected formValidatorService: FormValidatorService,
-    private videoChangeOwnershipValidatorsService: VideoChangeOwnershipValidatorsService,
    private videoOwnershipService: VideoOwnershipService,
    private notifier: Notifier,
    private userService: UserService,
@@ -31,7 +31,7 @@ export class VideoChangeOwnershipComponent extends FormReactive implements OnIni
  ngOnInit () {
    this.buildForm({
-      username: this.videoChangeOwnershipValidatorsService.USERNAME
+      username: OWNERSHIP_CHANGE_USERNAME_VALIDATOR
    })
    this.usernamePropositions = []
  }
diff --git a/client/src/app/+page-not-found/page-not-found-routing.module.ts b/client/src/app/+page-not-found/page-not-found-routing.module.ts
index e3407099d..11399fbfd 100644
--- a/client/src/app/+page-not-found/page-not-found-routing.module.ts
+++ b/client/src/app/+page-not-found/page-not-found-routing.module.ts
@@ -10,7 +10,7 @@ const pageNotFoundRoutes: Routes = [
    canActivate: [ MetaGuard ],
    data: {
      meta: {
-        title: 'Not found'
+        title: $localize`Not found`
      }
    }
  }
diff --git a/client/src/app/+reset-password/reset-password-routing.module.ts b/client/src/app/+reset-password/reset-password-routing.module.ts
index 31bc08709..7f1ba2f68 100644
--- a/client/src/app/+reset-password/reset-password-routing.module.ts
+++ b/client/src/app/+reset-password/reset-password-routing.module.ts
@@ -10,7 +10,7 @@ const resetPasswordRoutes: Routes = [
    canActivate: [ MetaGuard ],
    data: {
      meta: {
-        title: 'Reset password'
+        title: `Reset password`
      }
    }
  }
diff --git a/client/src/app/+reset-password/reset-password.component.ts b/client/src/app/+reset-password/reset-password.component.ts
index 16e4f4090..ce9144170 100644
--- a/client/src/app/+reset-password/reset-password.component.ts
+++ b/client/src/app/+reset-password/reset-password.component.ts
@@ -1,7 +1,9 @@
 import { Component, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { Notifier, UserService } from '@app/core'
-import { FormReactive, FormValidatorService, ResetPasswordValidatorsService, UserValidatorsService } from '@app/shared/shared-forms'
+import { RESET_PASSWORD_CONFIRM_VALIDATOR } from '@app/shared/form-validators/reset-password-validators'
+import { USER_PASSWORD_VALIDATOR } from '@app/shared/form-validators/user-validators'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 @Component({
  selector: 'my-login',
@@ -15,8 +17,6 @@ export class ResetPasswordComponent extends FormReactive implements OnInit {
  constructor (
    protected formValidatorService: FormValidatorService,
-    private resetPasswordValidatorsService: ResetPasswordValidatorsService,
-    private userValidatorsService: UserValidatorsService,
    private userService: UserService,
    private notifier: Notifier,
    private router: Router,
@@ -27,8 +27,8 @@ export class ResetPasswordComponent extends FormReactive implements OnInit {
  ngOnInit () {
    this.buildForm({
-      password: this.userValidatorsService.USER_PASSWORD,
+      password: USER_PASSWORD_VALIDATOR,
-      'password-confirm': this.resetPasswordValidatorsService.RESET_PASSWORD_CONFIRM
+      'password-confirm': RESET_PASSWORD_CONFIRM_VALIDATOR
    })
    this.userId = this.route.snapshot.queryParams['userId']
diff --git a/client/src/app/+search/search-routing.module.ts b/client/src/app/+search/search-routing.module.ts
index 14a0d0a13..e5d7d1ede 100644
--- a/client/src/app/+search/search-routing.module.ts
+++ b/client/src/app/+search/search-routing.module.ts
@@ -12,7 +12,7 @@ const searchRoutes: Routes = [
    canActivate: [ MetaGuard ],
    data: {
      meta: {
-        title: 'Search'
+        title: $localize`Search`
      }
    }
  },
diff --git a/client/src/app/+signup/+register/register-routing.module.ts b/client/src/app/+signup/+register/register-routing.module.ts
index 0deed8a9b..61a2fa42d 100644
--- a/client/src/app/+signup/+register/register-routing.module.ts
+++ b/client/src/app/+signup/+register/register-routing.module.ts
@@ -11,7 +11,7 @@ const registerRoutes: Routes = [
    canActivate: [ MetaGuard, UnloggedGuard ],
    data: {
      meta: {
-        title: 'Register'
+        title: $localize`Register`
      }
    },
    resolve: {
diff --git a/client/src/app/+signup/+register/register-step-channel.component.ts b/client/src/app/+signup/+register/register-step-channel.component.ts
index 8a0120840..d965a7865 100644
--- a/client/src/app/+signup/+register/register-step-channel.component.ts
+++ b/client/src/app/+signup/+register/register-step-channel.component.ts
@@ -3,7 +3,8 @@ import { pairwise } from 'rxjs/operators'
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
 import { FormGroup } from '@angular/forms'
 import { UserService } from '@app/core'
-import { FormReactive, FormValidatorService, VideoChannelValidatorsService } from '@app/shared/shared-forms'
+import { VIDEO_CHANNEL_DISPLAY_NAME_VALIDATOR, VIDEO_CHANNEL_NAME_VALIDATOR } from '@app/shared/form-validators/video-channel-validators'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 @Component({
  selector: 'my-register-step-channel',
@@ -16,8 +17,7 @@ export class RegisterStepChannelComponent extends FormReactive implements OnInit
  constructor (
    protected formValidatorService: FormValidatorService,
-    private userService: UserService,
+    private userService: UserService
-    private videoChannelValidatorsService: VideoChannelValidatorsService
  ) {
    super()
  }
@@ -28,8 +28,8 @@ export class RegisterStepChannelComponent extends FormReactive implements OnInit
  ngOnInit () {
    this.buildForm({
-      displayName: this.videoChannelValidatorsService.VIDEO_CHANNEL_DISPLAY_NAME,
+      displayName: VIDEO_CHANNEL_DISPLAY_NAME_VALIDATOR,
-      name: this.videoChannelValidatorsService.VIDEO_CHANNEL_NAME
+      name: VIDEO_CHANNEL_NAME_VALIDATOR
    })
    setTimeout(() => this.formBuilt.emit(this.form))
diff --git a/client/src/app/+signup/+register/register-step-user.component.ts b/client/src/app/+signup/+register/register-step-user.component.ts
index 3d9ab8b6b..65536568b 100644
--- a/client/src/app/+signup/+register/register-step-user.component.ts
+++ b/client/src/app/+signup/+register/register-step-user.component.ts
@@ -3,7 +3,14 @@ import { pairwise } from 'rxjs/operators'
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
 import { FormGroup } from '@angular/forms'
 import { UserService } from '@app/core'
-import { FormReactive, FormValidatorService, UserValidatorsService } from '@app/shared/shared-forms'
+import {
+  USER_DISPLAY_NAME_REQUIRED_VALIDATOR,
+  USER_EMAIL_VALIDATOR,
+  USER_PASSWORD_VALIDATOR,
+  USER_TERMS_VALIDATOR,
+  USER_USERNAME_VALIDATOR
+} from '@app/shared/form-validators/user-validators'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 @Component({
  selector: 'my-register-step-user',
@@ -19,8 +26,7 @@ export class RegisterStepUserComponent extends FormReactive implements OnInit {
  constructor (
    protected formValidatorService: FormValidatorService,
-    private userService: UserService,
+    private userService: UserService
-    private userValidatorsService: UserValidatorsService
  ) {
    super()
  }
@@ -31,11 +37,11 @@ export class RegisterStepUserComponent extends FormReactive implements OnInit {
  ngOnInit () {
    this.buildForm({
-      displayName: this.userValidatorsService.USER_DISPLAY_NAME_REQUIRED,
+      displayName: USER_DISPLAY_NAME_REQUIRED_VALIDATOR,
-      username: this.userValidatorsService.USER_USERNAME,
+      username: USER_USERNAME_VALIDATOR,
-      password: this.userValidatorsService.USER_PASSWORD,
+      password: USER_PASSWORD_VALIDATOR,
-      email: this.userValidatorsService.USER_EMAIL,
+      email: USER_EMAIL_VALIDATOR,
-      terms: this.userValidatorsService.USER_TERMS
+      terms: USER_TERMS_VALIDATOR
    })
    setTimeout(() => this.formBuilt.emit(this.form))
diff --git a/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.ts b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.ts
index b26581d2b..830dd9962 100644
--- a/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.ts
+++ b/client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core'
 import { Notifier, RedirectService, ServerService, UserService } from '@app/core'
-import { FormReactive, FormValidatorService, UserValidatorsService } from '@app/shared/shared-forms'
+import { USER_EMAIL_VALIDATOR } from '@app/shared/form-validators/user-validators'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { ServerConfig } from '@shared/models'
 @Component({
@@ -14,7 +15,6 @@ export class VerifyAccountAskSendEmailComponent extends FormReactive implements
  constructor (
    protected formValidatorService: FormValidatorService,
-    private userValidatorsService: UserValidatorsService,
    private userService: UserService,
    private serverService: ServerService,
    private notifier: Notifier,
@@ -33,7 +33,7 @@ export class VerifyAccountAskSendEmailComponent extends FormReactive implements
        .subscribe(config => this.serverConfig = config)
    this.buildForm({
-      'verify-email-email': this.userValidatorsService.USER_EMAIL
+      'verify-email-email': USER_EMAIL_VALIDATOR
    })
  }
diff --git a/client/src/app/+signup/+verify-account/verify-account-routing.module.ts b/client/src/app/+signup/+verify-account/verify-account-routing.module.ts
index 16d5fe0d0..c9ac67e4c 100644
--- a/client/src/app/+signup/+verify-account/verify-account-routing.module.ts
+++ b/client/src/app/+signup/+verify-account/verify-account-routing.module.ts
@@ -14,7 +14,7 @@ const verifyAccountRoutes: Routes = [
        component: VerifyAccountEmailComponent,
        data: {
          meta: {
-            title: 'Verify account email'
+            title: $localize`Verify account email`
          }
        }
      },
@@ -23,7 +23,7 @@ const verifyAccountRoutes: Routes = [
        component: VerifyAccountAskSendEmailComponent,
        data: {
          meta: {
-            title: 'Verify account ask send email'
+            title: $localize`Verify account ask send email`
          }
        }
      }
diff --git a/client/src/app/+video-channels/video-channels-routing.module.ts b/client/src/app/+video-channels/video-channels-routing.module.ts
index e79e6a680..f8c32f14e 100644
--- a/client/src/app/+video-channels/video-channels-routing.module.ts
+++ b/client/src/app/+video-channels/video-channels-routing.module.ts
@@ -22,7 +22,7 @@ const videoChannelsRoutes: Routes = [
        component: VideoChannelVideosComponent,
        data: {
          meta: {
-            title: 'Video channel videos'
+            title: $localize`Video channel videos`
          },
          reuse: {
            enabled: true,
@@ -35,7 +35,7 @@ const videoChannelsRoutes: Routes = [
        component: VideoChannelPlaylistsComponent,
        data: {
          meta: {
-            title: 'Video channel playlists'
+            title: $localize`Video channel playlists`
          }
        }
      },
@@ -44,7 +44,7 @@ const videoChannelsRoutes: Routes = [
        component: VideoChannelAboutComponent,
        data: {
          meta: {
-            title: 'About video channel'
+            title: $localize`About video channel`
          }
        }
      }
diff --git a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.ts b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.ts
index a90d04ce8..e48d16527 100644
--- a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.ts
+++ b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.ts
@@ -1,6 +1,7 @@
 import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
 import { ServerService } from '@app/core'
-import { FormReactive, FormValidatorService, VideoCaptionsValidatorsService } from '@app/shared/shared-forms'
+import { VIDEO_CAPTION_FILE_VALIDATOR, VIDEO_CAPTION_LANGUAGE_VALIDATOR } from '@app/shared/form-validators/video-captions-validators'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { VideoCaptionEdit } from '@app/shared/shared-main'
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
 import { ServerConfig, VideoConstant } from '@shared/models'
@@ -27,8 +28,7 @@ export class VideoCaptionAddModalComponent extends FormReactive implements OnIni
  constructor (
    protected formValidatorService: FormValidatorService,
    private modalService: NgbModal,
-    private serverService: ServerService,
+    private serverService: ServerService
-    private videoCaptionsValidatorsService: VideoCaptionsValidatorsService
  ) {
    super()
  }
@@ -46,8 +46,8 @@ export class VideoCaptionAddModalComponent extends FormReactive implements OnIni
        .subscribe(languages => this.videoCaptionLanguages = languages)
    this.buildForm({
-      language: this.videoCaptionsValidatorsService.VIDEO_CAPTION_LANGUAGE,
+      language: VIDEO_CAPTION_LANGUAGE_VALIDATOR,
-      captionfile: this.videoCaptionsValidatorsService.VIDEO_CAPTION_FILE
+      captionfile: VIDEO_CAPTION_FILE_VALIDATOR
    })
  }
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 050b6d931..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,13 +1,27 @@
 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 { FormReactiveValidationMessages, FormValidatorService, SelectChannelItem, VideoValidatorsService } from '@app/shared/shared-forms'
+import {
+  VIDEO_CATEGORY_VALIDATOR,
+  VIDEO_CHANNEL_VALIDATOR,
+  VIDEO_DESCRIPTION_VALIDATOR,
+  VIDEO_LANGUAGE_VALIDATOR,
+  VIDEO_LICENCE_VALIDATOR,
+  VIDEO_NAME_VALIDATOR,
+  VIDEO_ORIGINALLY_PUBLISHED_AT_VALIDATOR,
+  VIDEO_PRIVACY_VALIDATOR,
+  VIDEO_SCHEDULE_PUBLICATION_AT_VALIDATOR,
+  VIDEO_SUPPORT_VALIDATOR,
+  VIDEO_TAGS_ARRAY_VALIDATOR
+} from '@app/shared/form-validators/video-validators'
+import { FormReactiveValidationMessages, FormValidatorService, SelectChannelItem } from '@app/shared/shared-forms'
 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'
@@ -26,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
@@ -40,6 +57,8 @@ export class VideoEditComponent implements OnInit, OnDestroy {
  tagValidators: ValidatorFn[]
  tagValidatorsMessages: { [ name: string ]: string }
+  pluginDataFormGroup: FormGroup
  schedulePublicationEnabled = false
  calendarLocale: any = {}
@@ -51,18 +70,24 @@ export class VideoEditComponent implements OnInit, OnDestroy {
  serverConfig: ServerConfig
+  pluginFields: {
+    commonOptions: RegisterClientFormFieldOptions
+    videoFormOptions: RegisterClientVideoFieldOptions
+  }[] = []
  private schedulerInterval: any
  private firstPatchDone = false
  private initialVideoCaptions: string[] = []
  constructor (
    private formValidatorService: FormValidatorService,
-    private videoValidatorsService: VideoValidatorsService,
    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()
@@ -84,22 +109,22 @@ export class VideoEditComponent implements OnInit, OnDestroy {
      tags: []
    }
    const obj: any = {
-      name: this.videoValidatorsService.VIDEO_NAME,
+      name: VIDEO_NAME_VALIDATOR,
-      privacy: this.videoValidatorsService.VIDEO_PRIVACY,
+      privacy: VIDEO_PRIVACY_VALIDATOR,
-      channelId: this.videoValidatorsService.VIDEO_CHANNEL,
+      channelId: VIDEO_CHANNEL_VALIDATOR,
      nsfw: null,
      commentsEnabled: null,
      downloadEnabled: null,
      waitTranscoding: null,
-      category: this.videoValidatorsService.VIDEO_CATEGORY,
+      category: VIDEO_CATEGORY_VALIDATOR,
-      licence: this.videoValidatorsService.VIDEO_LICENCE,
+      licence: VIDEO_LICENCE_VALIDATOR,
-      language: this.videoValidatorsService.VIDEO_LANGUAGE,
+      language: VIDEO_LANGUAGE_VALIDATOR,
-      description: this.videoValidatorsService.VIDEO_DESCRIPTION,
+      description: VIDEO_DESCRIPTION_VALIDATOR,
-      tags: this.videoValidatorsService.VIDEO_TAGS_ARRAY,
+      tags: VIDEO_TAGS_ARRAY_VALIDATOR,
      previewfile: null,
-      support: this.videoValidatorsService.VIDEO_SUPPORT,
+      support: VIDEO_SUPPORT_VALIDATOR,
-      schedulePublicationAt: this.videoValidatorsService.VIDEO_SCHEDULE_PUBLICATION_AT,
+      schedulePublicationAt: VIDEO_SCHEDULE_PUBLICATION_AT_VALIDATOR,
-      originallyPublishedAt: this.videoValidatorsService.VIDEO_ORIGINALLY_PUBLISHED_AT
+      originallyPublishedAt: VIDEO_ORIGINALLY_PUBLISHED_AT_VALIDATOR
    }
    this.formValidatorService.updateForm(
@@ -124,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)
+          .map(l => {
-            ? { ...l, group: $localize`Instance languages`, groupOrder: 0 }
+            return res.about.instance.languages.includes(l.id)
-            : { ...l, group: $localize`All languages`, groupOrder: 1 })
+              ? { ...l, group: $localize`Instance languages`, groupOrder: 0 }
+              : { ...l, group: $localize`All languages`, groupOrder: 1 }
+          })
          .sort((a, b) => a.groupOrder - b.groupOrder)
      })
@@ -161,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 () {
@@ -211,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 8db37a293..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
@@ -14,7 +14,7 @@
      <my-help>
        <ng-template ptTemplate="customHtml">
          <ng-container i18n>
-            You can import any torrent file that points to a mp4 file.
+            You can import any torrent file that points to a media file.
            You should make sure you have diffusion rights over the content it points to, otherwise it could cause legal trouble to yourself and your instance.
          </ng-container>
        </ng-template>
@@ -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 9b5cc3361..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
@@ -9,7 +9,7 @@
        <ng-template ptTemplate="customHtml">
          <ng-container i18n>
            You can import any URL <a href='https://rg3.github.io/youtube-dl/supportedsites.html' target='_blank' rel='noopener noreferrer'>supported by youtube-dl</a>
-            or URL that points to a raw MP4 file.
+            or URL that points to a media file.
            You should make sure you have diffusion rights over the content it points to, otherwise it could cause legal trouble to yourself and your instance.
          </ng-container>
        </ng-template>
@@ -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/+videos/+video-watch/comment/video-comment-add.component.ts b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts
index fa20ec3b9..c1d0032cc 100644
--- a/client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts
+++ b/client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts
@@ -2,7 +2,8 @@ import { Observable } from 'rxjs'
 import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core'
 import { Router } from '@angular/router'
 import { Notifier, User } from '@app/core'
-import { FormReactive, FormValidatorService, VideoCommentValidatorsService } from '@app/shared/shared-forms'
+import { VIDEO_COMMENT_TEXT_VALIDATOR } from '@app/shared/form-validators/video-comment-validators'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { Video } from '@app/shared/shared-main'
 import { VideoComment, VideoCommentService } from '@app/shared/shared-video-comment'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
@@ -33,7 +34,6 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
  constructor (
    protected formValidatorService: FormValidatorService,
-    private videoCommentValidatorsService: VideoCommentValidatorsService,
    private notifier: Notifier,
    private videoCommentService: VideoCommentService,
    private modalService: NgbModal,
@@ -50,7 +50,7 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
  ngOnInit () {
    this.buildForm({
-      text: this.videoCommentValidatorsService.VIDEO_COMMENT_TEXT
+      text: VIDEO_COMMENT_TEXT_VALIDATOR
    })
    if (this.user) {
diff --git a/client/src/app/+videos/+video-watch/video-watch-playlist.component.html b/client/src/app/+videos/+video-watch/video-watch-playlist.component.html
index 246ef83cf..c270142a3 100644
--- a/client/src/app/+videos/+video-watch/video-watch-playlist.component.html
+++ b/client/src/app/+videos/+video-watch/video-watch-playlist.component.html
@@ -1,4 +1,7 @@
-<div *ngIf="playlist && video" class="playlist" myInfiniteScroller [autoInit]="true" [onItself]="true" (nearOfBottom)="onPlaylistVideosNearOfBottom()">
+<div
+  *ngIf="playlist && currentPlaylistPosition" class="playlist"
+  myInfiniteScroller [autoInit]="true" [onItself]="true" (nearOfBottom)="onPlaylistVideosNearOfBottom()"
+>
  <div class="playlist-info">
    <div class="playlist-display-name">
      {{ playlist.displayName }}
@@ -36,7 +39,7 @@
    </div>
  </div>
-  <div *ngFor="let playlistElement of playlistElements">
+  <div *ngFor="let playlistElement of playlistElements" [ngClass]="'element-' + playlistElement.position">
    <my-video-playlist-element-miniature
      [playlistElement]="playlistElement" [playlist]="playlist" [owned]="isPlaylistOwned()" (elementRemoved)="onElementRemoved($event)"
      [playing]="currentPlaylistPosition === playlistElement.position" [accountLink]="false" [position]="playlistElement.position"
diff --git a/client/src/app/+videos/+video-watch/video-watch-playlist.component.ts b/client/src/app/+videos/+video-watch/video-watch-playlist.component.ts
index c60ca4671..d76d0bbd2 100644
--- a/client/src/app/+videos/+video-watch/video-watch-playlist.component.ts
+++ b/client/src/app/+videos/+video-watch/video-watch-playlist.component.ts
@@ -1,9 +1,10 @@
-import { Component, Input } from '@angular/core'
+import { Component, EventEmitter, Input, Output } from '@angular/core'
 import { Router } from '@angular/router'
 import { AuthService, ComponentPagination, LocalStorageService, Notifier, SessionStorageService, UserService } from '@app/core'
 import { VideoPlaylist, VideoPlaylistElement, VideoPlaylistService } from '@app/shared/shared-video-playlist'
 import { peertubeLocalStorage, peertubeSessionStorage } from '@root-helpers/peertube-web-storage'
-import { VideoDetails, VideoPlaylistPrivacy } from '@shared/models'
+import { VideoPlaylistPrivacy } from '@shared/models'
 @Component({
  selector: 'my-video-watch-playlist',
@@ -14,9 +15,10 @@ export class VideoWatchPlaylistComponent {
  static LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST = 'auto_play_video_playlist'
  static SESSION_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST = 'loop_playlist'
-  @Input() video: VideoDetails
  @Input() playlist: VideoPlaylist
+  @Output() videoFound = new EventEmitter<string>()
  playlistElements: VideoPlaylistElement[] = []
  playlistPagination: ComponentPagination = {
    currentPage: 1,
@@ -29,7 +31,8 @@ export class VideoWatchPlaylistComponent {
  loopPlaylist: boolean
  loopPlaylistSwitchText = ''
  noPlaylistVideos = false
-  currentPlaylistPosition = 1
+  currentPlaylistPosition: number
  constructor (
    private userService: UserService,
@@ -44,6 +47,7 @@ export class VideoWatchPlaylistComponent {
    this.autoPlayNextVideoPlaylist = this.auth.isLoggedIn()
      ? this.auth.getUser().autoPlayNextVideoPlaylist
      : this.localStorageService.getItem(VideoWatchPlaylistComponent.LOCAL_STORAGE_AUTO_PLAY_NEXT_VIDEO_PLAYLIST) !== 'false'
    this.setAutoPlayNextVideoPlaylistSwitchText()
    // defaults to false
@@ -51,12 +55,12 @@ export class VideoWatchPlaylistComponent {
    this.setLoopPlaylistSwitchText()
  }
-  onPlaylistVideosNearOfBottom () {
+  onPlaylistVideosNearOfBottom (position?: number) {
    // Last page
    if (this.playlistPagination.totalItems <= (this.playlistPagination.currentPage * this.playlistPagination.itemsPerPage)) return
    this.playlistPagination.currentPage += 1
-    this.loadPlaylistElements(this.playlist,false)
+    this.loadPlaylistElements(this.playlist, false, position)
  }
  onElementRemoved (playlistElement: VideoPlaylistElement) {
@@ -83,26 +87,26 @@ export class VideoWatchPlaylistComponent {
    return this.playlist.privacy.id === VideoPlaylistPrivacy.PUBLIC
  }
-  loadPlaylistElements (playlist: VideoPlaylist, redirectToFirst = false) {
+  loadPlaylistElements (playlist: VideoPlaylist, redirectToFirst = false, position?: number) {
    this.videoPlaylist.getPlaylistVideos(playlist.uuid, this.playlistPagination)
        .subscribe(({ total, data }) => {
          this.playlistElements = this.playlistElements.concat(data)
          this.playlistPagination.totalItems = total
-          const firstAvailableVideos = this.playlistElements.find(e => !!e.video)
+          const firstAvailableVideo = this.playlistElements.find(e => !!e.video)
-          if (!firstAvailableVideos) {
+          if (!firstAvailableVideo) {
            this.noPlaylistVideos = true
            return
          }
-          this.updatePlaylistIndex(this.video)
+          if (position) this.updatePlaylistIndex(position)
          if (redirectToFirst) {
            const extras = {
              queryParams: {
-                start: firstAvailableVideos.startTimestamp,
+                start: firstAvailableVideo.startTimestamp,
-                stop: firstAvailableVideos.stopTimestamp,
+                stop: firstAvailableVideo.stopTimestamp,
-                videoId: firstAvailableVideos.video.uuid
+                playlistPosition: firstAvailableVideo.position
              },
              replaceUrl: true
            }
@@ -111,18 +115,26 @@ export class VideoWatchPlaylistComponent {
        })
  }
-  updatePlaylistIndex (video: VideoDetails) {
+  updatePlaylistIndex (position: number) {
-    if (this.playlistElements.length === 0 || !video) return
+    if (this.playlistElements.length === 0 || !position) return
    for (const playlistElement of this.playlistElements) {
-      if (playlistElement.video && playlistElement.video.id === video.id) {
+      // >= if the previous videos were not valid
+      if (playlistElement.video && playlistElement.position >= position) {
        this.currentPlaylistPosition = playlistElement.position
+        this.videoFound.emit(playlistElement.video.uuid)
+        setTimeout(() => {
+          document.querySelector('.element-' + this.currentPlaylistPosition).scrollIntoView(false)
+        }, 0)
        return
      }
    }
    // Load more videos to find our video
-    this.onPlaylistVideosNearOfBottom()
+    this.onPlaylistVideosNearOfBottom(position)
  }
  findNextPlaylistVideo (position = this.currentPlaylistPosition): VideoPlaylistElement {
@@ -147,9 +159,10 @@ export class VideoWatchPlaylistComponent {
  navigateToNextPlaylistVideo () {
    const next = this.findNextPlaylistVideo(this.currentPlaylistPosition + 1)
    if (!next) return
    const start = next.startTimestamp
    const stop = next.stopTimestamp
-    this.router.navigate([],{ queryParams: { videoId: next.video.uuid, start, stop } })
+    this.router.navigate([],{ queryParams: { playlistPosition: next.position, start, stop } })
  }
  switchAutoPlayNextVideoPlaylist () {
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.html b/client/src/app/+videos/+video-watch/video-watch.component.html
index 4279437d2..076c6205f 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.html
+++ b/client/src/app/+videos/+video-watch/video-watch.component.html
@@ -11,7 +11,8 @@
    <my-video-watch-playlist
      #videoWatchPlaylist
-      [video]="video" [playlist]="playlist" class="playlist"
+      [playlist]="playlist" class="playlist"
+      (videoFound)="onPlaylistVideoFound($event)"
    ></my-video-watch-playlist>
  </div>
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.ts b/client/src/app/+videos/+video-watch/video-watch.component.ts
index fb89bf6cd..1b2820810 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.component.ts
@@ -53,6 +53,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
  video: VideoDetails = null
  videoCaptions: VideoCaption[] = []
+  playlistPosition: number
  playlist: VideoPlaylist = null
  completeDescriptionShown = false
@@ -140,9 +141,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
      if (playlistId) this.loadPlaylist(playlistId)
    })
-    this.queryParamsSub = this.route.queryParams.subscribe(async queryParams => {
+    this.queryParamsSub = this.route.queryParams.subscribe(queryParams => {
-      const videoId = queryParams[ 'videoId' ]
+      this.playlistPosition = queryParams[ 'playlistPosition' ]
-      if (videoId) this.loadVideo(videoId)
+      this.videoWatchPlaylist.updatePlaylistIndex(this.playlistPosition)
      const start = queryParams[ 'start' ]
      if (this.player && start) this.player.currentTime(parseInt(start, 10))
@@ -335,6 +336,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
    return genericChannelDisplayName.includes(this.video.channel.displayName)
  }
+  onPlaylistVideoFound (videoId: string) {
+    this.loadVideo(videoId)
+  }
  private loadVideo (videoId: string) {
    // Video did not change
    if (this.video && this.video.uuid === videoId) return
@@ -362,6 +367,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
        const queryParams = this.route.snapshot.queryParams
        const urlOptions = {
+          resume: queryParams.resume,
          startTime: queryParams.start,
          stopTime: queryParams.stop,
@@ -390,8 +397,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
      .subscribe(playlist => {
        this.playlist = playlist
-        const videoId = this.route.snapshot.queryParams['videoId']
+        this.videoWatchPlaylist.loadPlaylistElements(playlist, !this.playlistPosition, this.playlistPosition)
-        this.videoWatchPlaylist.loadPlaylistElements(playlist, !videoId)
      })
  }
@@ -456,8 +462,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
    this.remoteServerDown = false
    this.currentTime = undefined
-    this.videoWatchPlaylist.updatePlaylistIndex(video)
    if (this.isVideoBlur(this.video)) {
      const res = await this.confirmService.confirm(
        $localize`This video contains mature or explicit content. Are you sure you want to watch it?`,
@@ -544,7 +548,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
        this.zone.run(() => this.theaterEnabled = enabled)
      })
-      this.hooks.runAction('action:video-watch.player.loaded', 'video-watch', { player: this.player })
+      this.hooks.runAction('action:video-watch.player.loaded', 'video-watch', { player: this.player, videojs, video: this.video })
    })
    this.setVideoDescriptionHTML()
@@ -657,16 +661,14 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
      const byUrl = urlOptions.startTime !== undefined
      const byHistory = video.userHistory && (!this.playlist || urlOptions.resume !== undefined)
-      if (byUrl) {
+      if (byUrl) return timeToInt(urlOptions.startTime)
-        return timeToInt(urlOptions.startTime)
+      if (byHistory) return video.userHistory.currentTime
-      } else if (byHistory) {
-        return video.userHistory.currentTime
+      return 0
-      } else {
-        return 0
-      }
    }
    let startTime = getStartTime()
    // If we are at the end of the video, reset the timer
    if (video.duration - startTime <= 1) startTime = 0
diff --git a/client/src/app/+videos/videos-routing.module.ts b/client/src/app/+videos/videos-routing.module.ts
index e0e877fc6..cf5f0b2e8 100644
--- a/client/src/app/+videos/videos-routing.module.ts
+++ b/client/src/app/+videos/videos-routing.module.ts
@@ -20,7 +20,7 @@ const videosRoutes: Routes = [
        component: VideoOverviewComponent,
        data: {
          meta: {
-            title: 'Discover videos'
+            title: $localize`Discover videos`
          }
        }
      },
@@ -29,7 +29,7 @@ const videosRoutes: Routes = [
        component: VideoTrendingComponent,
        data: {
          meta: {
-            title: 'Trending videos'
+            title: $localize`Trending videos`
          },
          reuse: {
            enabled: true,
@@ -42,7 +42,7 @@ const videosRoutes: Routes = [
        component: VideoMostLikedComponent,
        data: {
          meta: {
-            title: 'Most liked videos'
+            title: $localize`Most liked videos`
          },
          reuse: {
            enabled: true,
@@ -55,7 +55,7 @@ const videosRoutes: Routes = [
        component: VideoRecentlyAddedComponent,
        data: {
          meta: {
-            title: 'Recently added videos'
+            title: $localize`Recently added videos`
          },
          reuse: {
            enabled: true,
@@ -68,7 +68,7 @@ const videosRoutes: Routes = [
        component: VideoUserSubscriptionsComponent,
        data: {
          meta: {
-            title: 'Subscriptions'
+            title: $localize`Subscriptions`
          },
          reuse: {
            enabled: true,
@@ -81,7 +81,7 @@ const videosRoutes: Routes = [
        component: VideoLocalComponent,
        data: {
          meta: {
-            title: 'Local videos'
+            title: $localize`Local videos`
          },
          reuse: {
            enabled: true,
@@ -94,7 +94,7 @@ const videosRoutes: Routes = [
        loadChildren: () => import('@app/+videos/+video-edit/video-add.module').then(m => m.VideoAddModule),
        data: {
          meta: {
-            title: 'Upload a video'
+            title: $localize`Upload a video`
          }
        }
      },
@@ -103,7 +103,7 @@ const videosRoutes: Routes = [
        loadChildren: () => import('@app/+videos/+video-edit/video-update.module').then(m => m.VideoUpdateModule),
        data: {
          meta: {
-            title: 'Edit a video'
+            title: $localize`Edit a video`
          }
        }
      },
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index 5b0439e6b..edec3216e 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -180,7 +180,7 @@ export class AppComponent implements OnInit, AfterViewInit {
    eventsObs.pipe(
      filter((e: Event): e is GuardsCheckStart => e instanceof GuardsCheckStart),
-      filter(() => this.screenService.isInSmallView() || !!this.screenService.isInTouchScreen())
+      filter(() => this.screenService.isInSmallView() || this.screenService.isInTouchScreen())
    ).subscribe(() => this.menu.setMenuDisplay(false)) // User clicked on a link in the menu, change the page
  }
diff --git a/client/src/app/core/auth/auth-user.model.ts b/client/src/app/core/auth/auth-user.model.ts
index 34efa24fc..f10b37e5a 100644
--- a/client/src/app/core/auth/auth-user.model.ts
+++ b/client/src/app/core/auth/auth-user.model.ts
@@ -25,11 +25,13 @@ export class AuthUser extends User implements ServerMyUserModel {
  canSeeVideosLink = true
  static load () {
-    const userInfo = getUserInfoFromLocalStorage()
+    const tokens = Tokens.load()
+    if (!tokens) return null
+    const userInfo = getUserInfoFromLocalStorage()
    if (!userInfo) return null
-    return new AuthUser(userInfo, Tokens.load())
+    return new AuthUser(userInfo, tokens)
  }
  static flush () {
diff --git a/client/src/app/core/menu/menu.service.ts b/client/src/app/core/menu/menu.service.ts
index 671ee3e4f..9c0433bca 100644
--- a/client/src/app/core/menu/menu.service.ts
+++ b/client/src/app/core/menu/menu.service.ts
@@ -28,15 +28,16 @@ export class MenuService {
  setMenuDisplay (display: boolean) {
    this.isMenuDisplayed = display
+    if (!this.screenService.isInTouchScreen()) return
    // On touch screens, lock body scroll and display content overlay when memu is opened
-    if (this.screenService.isInTouchScreen()) {
+    if (this.isMenuDisplayed) {
-      if (this.isMenuDisplayed) {
+      document.body.classList.add('menu-open')
-        document.body.classList.add('menu-open')
+      this.screenService.onFingerSwipe('left', () => { this.setMenuDisplay(false) })
-        this.screenService.onFingerSwipe('left', () => { this.setMenuDisplay(false) })
+      return
-      } else {
-        document.body.classList.remove('menu-open')
-      }
    }
+    document.body.classList.remove('menu-open')
  }
  onResize () {
@@ -45,9 +46,7 @@ export class MenuService {
  private handleWindowResize () {
    // On touch screens, do not handle window resize event since opened menu is handled with a content overlay
-    if (this.screenService.isInTouchScreen()) {
+    if (this.screenService.isInTouchScreen()) return
-      return
-    }
    fromEvent(window, 'resize')
      .pipe(debounceTime(200))
diff --git a/client/src/app/core/plugins/plugin.service.ts b/client/src/app/core/plugins/plugin.service.ts
index dc115c0e1..4e44a1865 100644
--- a/client/src/app/core/plugins/plugin.service.ts
+++ b/client/src/app/core/plugins/plugin.service.ts
@@ -7,38 +7,22 @@ import { Notifier } from '@app/core/notification'
 import { MarkdownService } from '@app/core/renderer'
 import { RestExtractor } from '@app/core/rest'
 import { ServerService } from '@app/core/server/server.service'
-import { getDevLocale, importModule, isOnDevLocale } from '@app/helpers'
+import { getDevLocale, isOnDevLocale } from '@app/helpers'
 import { CustomModalComponent } from '@app/modal/custom-modal.component'
+import { FormFields, Hooks, loadPlugin, PluginInfo, runHook } from '@root-helpers/plugins'
 import { getCompleteLocale, isDefaultLocale, peertubeTranslate } from '@shared/core-utils/i18n'
-import { getHookType, internalRunHook } from '@shared/core-utils/plugins/hooks'
 import {
  ClientHook,
  ClientHookName,
-  clientHookObject,
-  ClientScript,
  PluginClientScope,
  PluginTranslation,
  PluginType,
  PublicServerSetting,
-  RegisterClientHookOptions,
  ServerConfigPlugin
 } from '@shared/models'
 import { environment } from '../../../environments/environment'
-import { ClientScript as ClientScriptModule } from '../../../types/client-script.model'
 import { RegisterClientHelpers } from '../../../types/register-client-option.model'
-interface HookStructValue extends RegisterClientHookOptions {
-  plugin: ServerConfigPlugin
-  clientScript: ClientScript
-}
-type PluginInfo = {
-  plugin: ServerConfigPlugin
-  clientScript: ClientScript
-  pluginType: PluginType
-  isTheme: boolean
-}
 @Injectable()
 export class PluginService implements ClientHook {
  private static BASE_PLUGIN_API_URL = environment.apiUrl + '/api/v1/plugins'
@@ -51,7 +35,9 @@ export class PluginService implements ClientHook {
    search: new ReplaySubject<boolean>(1),
    'video-watch': new ReplaySubject<boolean>(1),
    signup: new ReplaySubject<boolean>(1),
-    login: new ReplaySubject<boolean>(1)
+    login: new ReplaySubject<boolean>(1),
+    'video-edit': new ReplaySubject<boolean>(1),
+    embed: new ReplaySubject<boolean>(1)
  }
  translationsObservable: Observable<PluginTranslation>
@@ -64,7 +50,10 @@ export class PluginService implements ClientHook {
  private loadedScopes: PluginClientScope[] = []
  private loadingScopes: { [id in PluginClientScope]?: boolean } = {}
-  private hooks: { [ name: string ]: HookStructValue[] } = {}
+  private hooks: Hooks = {}
+  private formFields: FormFields = {
+    video: []
+  }
  constructor (
    private authService: AuthService,
@@ -120,7 +109,7 @@ export class PluginService implements ClientHook {
        this.scopes[scope].push({
          plugin,
          clientScript: {
-            script: environment.apiUrl + `${pathPrefix}/${plugin.name}/${plugin.version}/client-scripts/${clientScript.script}`,
+            script: `${pathPrefix}/${plugin.name}/${plugin.version}/client-scripts/${clientScript.script}`,
            scopes: clientScript.scopes
          },
          pluginType: isTheme ? PluginType.THEME : PluginType.PLUGIN,
@@ -184,20 +173,8 @@ export class PluginService implements ClientHook {
  }
  runHook <T> (hookName: ClientHookName, result?: T, params?: any): Promise<T> {
-    return this.zone.runOutsideAngular(async () => {
+    return this.zone.runOutsideAngular(() => {
-      if (!this.hooks[ hookName ]) return result
+      return runHook(this.hooks, hookName, result, params)
-      const hookType = getHookType(hookName)
-      for (const hook of this.hooks[ hookName ]) {
-        console.log('Running hook %s of plugin %s.', hookName, hook.plugin.name)
-        result = await internalRunHook(hook.handler, hookType, result, params, err => {
-          console.error('Cannot run hook %s of script %s of plugin %s.', hookName, hook.clientScript.script, hook.plugin.name, err)
-        })
-      }
-      return result
    })
  }
@@ -215,35 +192,18 @@ export class PluginService implements ClientHook {
      : PluginType.THEME
  }
-  private loadPlugin (pluginInfo: PluginInfo) {
+  getRegisteredVideoFormFields (type: 'import-url' | 'import-torrent' | 'upload' | 'update') {
-    const { plugin, clientScript } = pluginInfo
+    return this.formFields.video.filter(f => f.videoFormOptions.type === type)
+  }
-    const registerHook = (options: RegisterClientHookOptions) => {
-      if (clientHookObject[options.target] !== true) {
-        console.error('Unknown hook %s of plugin %s. Skipping.', options.target, plugin.name)
-        return
-      }
-      if (!this.hooks[options.target]) this.hooks[options.target] = []
-      this.hooks[options.target].push({
-        plugin,
-        clientScript,
-        target: options.target,
-        handler: options.handler,
-        priority: options.priority || 0
-      })
-    }
-    const peertubeHelpers = this.buildPeerTubeHelpers(pluginInfo)
-    console.log('Loading script %s of plugin %s.', clientScript.script, plugin.name)
+  private loadPlugin (pluginInfo: PluginInfo) {
    return this.zone.runOutsideAngular(() => {
-      return importModule(clientScript.script)
+      return loadPlugin({
-        .then((script: ClientScriptModule) => script.register({ registerHook, peertubeHelpers }))
+        hooks: this.hooks,
-        .then(() => this.sortHooksByPriority())
+        formFields: this.formFields,
-        .catch(err => console.error('Cannot import or register plugin %s.', pluginInfo.plugin.name, err))
+        pluginInfo,
+        peertubeHelpersFactory: pluginInfo => this.buildPeerTubeHelpers(pluginInfo)
+      })
    })
  }
@@ -253,14 +213,6 @@ export class PluginService implements ClientHook {
    }
  }
-  private sortHooksByPriority () {
-    for (const hookName of Object.keys(this.hooks)) {
-      this.hooks[hookName].sort((a, b) => {
-        return b.priority - a.priority
-      })
-    }
-  }
  private buildPeerTubeHelpers (pluginInfo: PluginInfo): RegisterClientHelpers {
    const { plugin } = pluginInfo
    const npmName = this.nameToNpmName(pluginInfo.plugin.name, pluginInfo.pluginType)
diff --git a/client/src/app/core/wrappers/screen.service.ts b/client/src/app/core/wrappers/screen.service.ts
index 88cf662b3..a085e5bdc 100644
--- a/client/src/app/core/wrappers/screen.service.ts
+++ b/client/src/app/core/wrappers/screen.service.ts
@@ -30,7 +30,7 @@ export class ScreenService {
  }
  isInTouchScreen () {
-    return 'ontouchstart' in window || navigator.msMaxTouchPoints
+    return !!('ontouchstart' in window || navigator.msMaxTouchPoints)
  }
  getNumberOfAvailableMiniatures () {
diff --git a/client/src/app/helpers/utils.ts b/client/src/app/helpers/utils.ts
index d05541ca9..d9007dd77 100644
--- a/client/src/app/helpers/utils.ts
+++ b/client/src/app/helpers/utils.ts
@@ -148,41 +148,6 @@ function scrollToTop () {
  window.scroll(0, 0)
 }
-// Thanks: https://github.com/uupaa/dynamic-import-polyfill
-function importModule (path: string) {
-  return new Promise((resolve, reject) => {
-    const vector = '$importModule$' + Math.random().toString(32).slice(2)
-    const script = document.createElement('script')
-    const destructor = () => {
-      delete window[ vector ]
-      script.onerror = null
-      script.onload = null
-      script.remove()
-      URL.revokeObjectURL(script.src)
-      script.src = ''
-    }
-    script.defer = true
-    script.type = 'module'
-    script.onerror = () => {
-      reject(new Error(`Failed to import: ${path}`))
-      destructor()
-    }
-    script.onload = () => {
-      resolve(window[ vector ])
-      destructor()
-    }
-    const absURL = (environment.apiUrl || window.location.origin) + path
-    const loader = `import * as m from "${absURL}"; window.${vector} = m;` // export Module
-    const blob = new Blob([ loader ], { type: 'text/javascript' })
-    script.src = URL.createObjectURL(blob)
-    document.head.appendChild(script)
-  })
-}
 function isInViewport (el: HTMLElement) {
  const bounding = el.getBoundingClientRect()
  return (
@@ -216,7 +181,6 @@ export {
  getAbsoluteEmbedUrl,
  objectLineFeedToHtml,
  removeElementFromArray,
-  importModule,
  scrollToTop,
  isInViewport,
  isXPercentInViewport
diff --git a/client/src/app/shared/form-validators/abuse-validators.ts b/client/src/app/shared/form-validators/abuse-validators.ts
new file mode 100644
index 000000000..75bfacf01
--- /dev/null
+++ b/client/src/app/shared/form-validators/abuse-validators.ts
@@ -0,0 +1,29 @@
+import { Validators } from '@angular/forms'
+import { BuildFormValidator } from './form-validator.model'
+export const ABUSE_REASON_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [Validators.required, Validators.minLength(2), Validators.maxLength(3000)],
+  MESSAGES: {
+    'required': $localize`Report reason is required.`,
+    'minlength': $localize`Report reason must be at least 2 characters long.`,
+    'maxlength': $localize`Report reason cannot be more than 3000 characters long.`
+  }
+}
+export const ABUSE_MODERATION_COMMENT_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [Validators.required, Validators.minLength(2), Validators.maxLength(3000)],
+  MESSAGES: {
+    'required': $localize`Moderation comment is required.`,
+    'minlength': $localize`Moderation comment must be at least 2 characters long.`,
+    'maxlength': $localize`Moderation comment cannot be more than 3000 characters long.`
+  }
+}
+export const ABUSE_MESSAGE_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [Validators.required, Validators.minLength(2), Validators.maxLength(3000)],
+  MESSAGES: {
+    'required': $localize`Abuse message is required.`,
+    'minlength': $localize`Abuse message must be at least 2 characters long.`,
+    'maxlength': $localize`Abuse message cannot be more than 3000 characters long.`
+  }
+}
diff --git a/client/src/app/shared/form-validators/batch-domains-validators.ts b/client/src/app/shared/form-validators/batch-domains-validators.ts
new file mode 100644
index 000000000..423d1337f
--- /dev/null
+++ b/client/src/app/shared/form-validators/batch-domains-validators.ts
@@ -0,0 +1,60 @@
+import { AbstractControl, FormControl, ValidatorFn, Validators } from '@angular/forms'
+import { BuildFormValidator } from './form-validator.model'
+import { validateHost } from './host'
+export function getNotEmptyHosts (hosts: string) {
+  return hosts
+    .split('\n')
+    .filter((host: string) => host && host.length !== 0) // Eject empty hosts
+}
+const validDomains: ValidatorFn = (control: FormControl) => {
+  if (!control.value) return null
+  const newHostsErrors = []
+  const hosts = getNotEmptyHosts(control.value)
+  for (const host of hosts) {
+    if (validateHost(host) === false) {
+      newHostsErrors.push($localize`${host} is not valid`)
+    }
+  }
+  /* Is not valid. */
+  if (newHostsErrors.length !== 0) {
+    return {
+      'validDomains': {
+        reason: 'invalid',
+        value: newHostsErrors.join('. ') + '.'
+      }
+    }
+  }
+  /* Is valid. */
+  return null
+}
+const isHostsUnique: ValidatorFn = (control: AbstractControl) => {
+  if (!control.value) return null
+  const hosts = getNotEmptyHosts(control.value)
+  if (hosts.every((host: string) => hosts.indexOf(host) === hosts.lastIndexOf(host))) {
+    return null
+  } else {
+    return {
+      'uniqueDomains': {
+        reason: 'invalid'
+      }
+    }
+  }
+}
+export const DOMAINS_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [Validators.required, validDomains, isHostsUnique],
+  MESSAGES: {
+    'required': $localize`Domain is required.`,
+    'validDomains': $localize`Domains entered are invalid.`,
+    'uniqueDomains': $localize`Domains entered contain duplicates.`
+  }
+}
diff --git a/client/src/app/shared/form-validators/custom-config-validators.ts b/client/src/app/shared/form-validators/custom-config-validators.ts
new file mode 100644
index 000000000..41b3cbba9
--- /dev/null
+++ b/client/src/app/shared/form-validators/custom-config-validators.ts
@@ -0,0 +1,80 @@
+import { Validators } from '@angular/forms'
+import { BuildFormValidator } from './form-validator.model'
+export const INSTANCE_NAME_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [Validators.required],
+  MESSAGES: {
+    'required': $localize`Instance name is required.`
+  }
+}
+export const INSTANCE_SHORT_DESCRIPTION_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [Validators.max(250)],
+  MESSAGES: {
+    'max': $localize`Short description should not be longer than 250 characters.`
+  }
+}
+export const SERVICES_TWITTER_USERNAME_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [Validators.required],
+  MESSAGES: {
+    'required': $localize`Twitter username is required.`
+  }
+}
+export const CACHE_PREVIEWS_SIZE_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [Validators.required, Validators.min(1), Validators.pattern('[0-9]+')],
+  MESSAGES: {
+    'required': $localize`Previews cache size is required.`,
+    'min': $localize`Previews cache size must be greater than 1.`,
+    'pattern': $localize`Previews cache size must be a number.`
+  }
+}
+export const CACHE_CAPTIONS_SIZE_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [Validators.required, Validators.min(1), Validators.pattern('[0-9]+')],
+  MESSAGES: {
+    'required': $localize`Captions cache size is required.`,
+    'min': $localize`Captions cache size must be greater than 1.`,
+    'pattern': $localize`Captions cache size must be a number.`
+  }
+}
+export const SIGNUP_LIMIT_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [Validators.required, Validators.min(-1), Validators.pattern('-?[0-9]+')],
+  MESSAGES: {
+    'required': $localize`Signup limit is required.`,
+    'min': $localize`Signup limit must be greater than 1.`,
+    'pattern': $localize`Signup limit must be a number.`
+  }
+}
+export const ADMIN_EMAIL_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [Validators.required, Validators.email],
+  MESSAGES: {
+    'required': $localize`Admin email is required.`,
+    'email': $localize`Admin email must be valid.`
+  }
+}
+export const TRANSCODING_THREADS_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [Validators.required, Validators.min(0)],
+  MESSAGES: {
+    'required': $localize`Transcoding threads is required.`,
+    'min': $localize`Transcoding threads must be greater or equal to 0.`
+  }
+}
+export const INDEX_URL_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [Validators.pattern(/^https:\/\//)],
+  MESSAGES: {
+    'pattern': $localize`Index URL should be a URL`
+  }
+}
+export const SEARCH_INDEX_URL_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [Validators.pattern(/^https?:\/\//)],
+  MESSAGES: {
+    'pattern': $localize`Search index URL should be a URL`
+  }
+}
diff --git a/client/src/app/shared/form-validators/form-validator.model.ts b/client/src/app/shared/form-validators/form-validator.model.ts
new file mode 100644
index 000000000..248a3b1d3
--- /dev/null
+++ b/client/src/app/shared/form-validators/form-validator.model.ts
@@ -0,0 +1,14 @@
+import { ValidatorFn } from '@angular/forms'
+export type BuildFormValidator = {
+  VALIDATORS: ValidatorFn[],
+  MESSAGES: { [ name: string ]: string }
+}
+export type BuildFormArgument = {
+  [ id: string ]: BuildFormValidator | BuildFormArgument
+}
+export type BuildFormDefaultValues = {
+  [ name: string ]: string | string[] | BuildFormDefaultValues
+}
diff --git a/client/src/app/shared/shared-forms/form-validators/host.ts b/client/src/app/shared/form-validators/host.ts
index c18a35f9b..c18a35f9b 100644
--- a/client/src/app/shared/shared-forms/form-validators/host.ts
+++ b/client/src/app/shared/form-validators/host.ts
diff --git a/client/src/app/shared/form-validators/index.ts b/client/src/app/shared/form-validators/index.ts
new file mode 100644
index 000000000..f621f03a4
--- /dev/null
+++ b/client/src/app/shared/form-validators/index.ts
@@ -0,0 +1,17 @@
+export * from './form-validator.model'
+export * from './host'
+// Don't re export const variables because webpack 4 cannot do tree shaking with them
+// export * from './abuse-validators'
+// export * from './batch-domains-validators'
+// export * from './custom-config-validators'
+// export * from './instance-validators'
+// export * from './login-validators'
+// export * from './reset-password-validators'
+// export * from './user-validators'
+// export * from './video-block-validators'
+// export * from './video-captions-validators'
+// export * from './video-channel-validators'
+// export * from './video-comment-validators'
+// export * from './video-playlist-validators'
+// export * from './video-validators'
diff --git a/client/src/app/shared/form-validators/instance-validators.ts b/client/src/app/shared/form-validators/instance-validators.ts
new file mode 100644
index 000000000..a72e28ba0
--- /dev/null
+++ b/client/src/app/shared/form-validators/instance-validators.ts
@@ -0,0 +1,49 @@
+import { Validators } from '@angular/forms'
+import { BuildFormValidator } from './form-validator.model'
+export const FROM_EMAIL_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [Validators.required, Validators.email],
+  MESSAGES: {
+    'required': $localize`Email is required.`,
+    'email': $localize`Email must be valid.`
+  }
+}
+export const FROM_NAME_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [
+    Validators.required,
+    Validators.minLength(1),
+    Validators.maxLength(120)
+  ],
+  MESSAGES: {
+    'required': $localize`Your name is required.`,
+    'minlength': $localize`Your name must be at least 1 character long.`,
+    'maxlength': $localize`Your name cannot be more than 120 characters long.`
+  }
+}
+export const SUBJECT_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [
+    Validators.required,
+    Validators.minLength(1),
+    Validators.maxLength(120)
+  ],
+  MESSAGES: {
+    'required': $localize`A subject is required.`,
+    'minlength': $localize`The subject must be at least 1 character long.`,
+    'maxlength': $localize`The subject cannot be more than 120 characters long.`
+  }
+}
+export const BODY_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [
+    Validators.required,
+    Validators.minLength(3),
+    Validators.maxLength(5000)
+  ],
+  MESSAGES: {
+    'required': $localize`A message is required.`,
+    'minlength': $localize`The message must be at least 3 characters long.`,
+    'maxlength': $localize`The message cannot be more than 5000 characters long.`
+  }
+}
diff --git a/client/src/app/shared/form-validators/login-validators.ts b/client/src/app/shared/form-validators/login-validators.ts
new file mode 100644
index 000000000..1ceae1be3
--- /dev/null
+++ b/client/src/app/shared/form-validators/login-validators.ts
@@ -0,0 +1,20 @@
+import { Validators } from '@angular/forms'
+import { BuildFormValidator } from './form-validator.model'
+export const LOGIN_USERNAME_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [
+    Validators.required
+  ],
+  MESSAGES: {
+    'required': $localize`Username is required.`
+  }
+}
+export const LOGIN_PASSWORD_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [
+    Validators.required
+  ],
+  MESSAGES: {
+    'required': $localize`Password is required.`
+  }
+}
diff --git a/client/src/app/shared/form-validators/reset-password-validators.ts b/client/src/app/shared/form-validators/reset-password-validators.ts
new file mode 100644
index 000000000..b87f2eab9
--- /dev/null
+++ b/client/src/app/shared/form-validators/reset-password-validators.ts
@@ -0,0 +1,11 @@
+import { Validators } from '@angular/forms'
+import { BuildFormValidator } from './form-validator.model'
+export const RESET_PASSWORD_CONFIRM_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [
+    Validators.required
+  ],
+  MESSAGES: {
+    'required': $localize`Confirmation of the password is required.`
+  }
+}
diff --git a/client/src/app/shared/form-validators/user-validators.ts b/client/src/app/shared/form-validators/user-validators.ts
new file mode 100644
index 000000000..18199505c
--- /dev/null
+++ b/client/src/app/shared/form-validators/user-validators.ts
@@ -0,0 +1,144 @@
+import { Validators } from '@angular/forms'
+import { BuildFormValidator } from './form-validator.model'
+export const USER_USERNAME_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [
+    Validators.required,
+    Validators.minLength(1),
+    Validators.maxLength(50),
+    Validators.pattern(/^[a-z0-9][a-z0-9._]*$/)
+  ],
+  MESSAGES: {
+    'required': $localize`Username is required.`,
+    'minlength': $localize`Username must be at least 1 character long.`,
+    'maxlength': $localize`Username cannot be more than 50 characters long.`,
+    'pattern': $localize`Username should be lowercase alphanumeric; dots and underscores are allowed.`
+  }
+}
+export const USER_CHANNEL_NAME_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [
+    Validators.required,
+    Validators.minLength(1),
+    Validators.maxLength(50),
+    Validators.pattern(/^[a-z0-9][a-z0-9._]*$/)
+  ],
+  MESSAGES: {
+    'required': $localize`Channel name is required.`,
+    'minlength': $localize`Channel name must be at least 1 character long.`,
+    'maxlength': $localize`Channel name cannot be more than 50 characters long.`,
+    'pattern': $localize`Channel name should be lowercase alphanumeric; dots and underscores are allowed.`
+  }
+}
+export const USER_EMAIL_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [ Validators.required, Validators.email ],
+  MESSAGES: {
+    'required': $localize`Email is required.`,
+    'email': $localize`Email must be valid.`
+  }
+}
+export const USER_PASSWORD_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [
+    Validators.required,
+    Validators.minLength(6),
+    Validators.maxLength(255)
+  ],
+  MESSAGES: {
+    'required': $localize`Password is required.`,
+    'minlength': $localize`Password must be at least 6 characters long.`,
+    'maxlength': $localize`Password cannot be more than 255 characters long.`
+  }
+}
+export const USER_PASSWORD_OPTIONAL_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [
+    Validators.minLength(6),
+    Validators.maxLength(255)
+  ],
+  MESSAGES: {
+    'minlength': $localize`Password must be at least 6 characters long.`,
+    'maxlength': $localize`Password cannot be more than 255 characters long.`
+  }
+}
+export const USER_CONFIRM_PASSWORD_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [],
+  MESSAGES: {
+    'matchPassword': $localize`The new password and the confirmed password do not correspond.`
+  }
+}
+export const USER_VIDEO_QUOTA_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [ Validators.required, Validators.min(-1) ],
+  MESSAGES: {
+    'required': $localize`Video quota is required.`,
+    'min': $localize`Quota must be greater than -1.`
+  }
+}
+export const USER_VIDEO_QUOTA_DAILY_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [ Validators.required, Validators.min(-1) ],
+  MESSAGES: {
+    'required': $localize`Daily upload limit is required.`,
+    'min': $localize`Daily upload limit must be greater than -1.`
+  }
+}
+export const USER_ROLE_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [ Validators.required ],
+  MESSAGES: {
+    'required': $localize`User role is required.`
+  }
+}
+export const USER_DISPLAY_NAME_REQUIRED_VALIDATOR = buildDisplayNameValidator(true)
+export const USER_DESCRIPTION_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [
+    Validators.minLength(3),
+    Validators.maxLength(1000)
+  ],
+  MESSAGES: {
+    'minlength': $localize`Description must be at least 3 characters long.`,
+    'maxlength': $localize`Description cannot be more than 1000 characters long.`
+  }
+}
+export const USER_TERMS_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [
+    Validators.requiredTrue
+  ],
+  MESSAGES: {
+    'required': $localize`You must agree with the instance terms in order to register on it.`
+  }
+}
+export const USER_BAN_REASON_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [
+    Validators.minLength(3),
+    Validators.maxLength(250)
+  ],
+  MESSAGES: {
+    'minlength': $localize`Ban reason must be at least 3 characters long.`,
+    'maxlength': $localize`Ban reason cannot be more than 250 characters long.`
+  }
+}
+function buildDisplayNameValidator (required: boolean) {
+  const control = {
+    VALIDATORS: [
+      Validators.minLength(1),
+      Validators.maxLength(120)
+    ],
+    MESSAGES: {
+      'required': $localize`Display name is required.`,
+      'minlength': $localize`Display name must be at least 1 character long.`,
+      'maxlength': $localize`Display name cannot be more than 50 characters long.`
+    }
+  }
+  if (required) control.VALIDATORS.push(Validators.required)
+  return control
+}
diff --git a/client/src/app/shared/form-validators/video-block-validators.ts b/client/src/app/shared/form-validators/video-block-validators.ts
new file mode 100644
index 000000000..d3974aefe
--- /dev/null
+++ b/client/src/app/shared/form-validators/video-block-validators.ts
@@ -0,0 +1,10 @@
+import { Validators } from '@angular/forms'
+import { BuildFormValidator } from './form-validator.model'
+export const VIDEO_BLOCK_REASON_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [ Validators.minLength(2), Validators.maxLength(300) ],
+  MESSAGES: {
+    'minlength': $localize`Block reason must be at least 2 characters long.`,
+    'maxlength': $localize`Block reason cannot be more than 300 characters long.`
+  }
+}
diff --git a/client/src/app/shared/form-validators/video-captions-validators.ts b/client/src/app/shared/form-validators/video-captions-validators.ts
new file mode 100644
index 000000000..9742d2925
--- /dev/null
+++ b/client/src/app/shared/form-validators/video-captions-validators.ts
@@ -0,0 +1,16 @@
+import { Validators } from '@angular/forms'
+import { BuildFormValidator } from './form-validator.model'
+export const VIDEO_CAPTION_LANGUAGE_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [ Validators.required ],
+  MESSAGES: {
+    'required': $localize`Video caption language is required.`
+  }
+}
+export const VIDEO_CAPTION_FILE_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [ Validators.required ],
+  MESSAGES: {
+    'required': $localize`Video caption file is required.`
+  }
+}
diff --git a/client/src/app/shared/form-validators/video-channel-validators.ts b/client/src/app/shared/form-validators/video-channel-validators.ts
new file mode 100644
index 000000000..0daab22ce
--- /dev/null
+++ b/client/src/app/shared/form-validators/video-channel-validators.ts
@@ -0,0 +1,52 @@
+import { Validators } from '@angular/forms'
+import { BuildFormValidator } from './form-validator.model'
+export const VIDEO_CHANNEL_NAME_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [
+    Validators.required,
+    Validators.minLength(1),
+    Validators.maxLength(50),
+    Validators.pattern(/^[a-z0-9][a-z0-9._]*$/)
+  ],
+  MESSAGES: {
+    'required': $localize`Name is required.`,
+    'minlength': $localize`Name must be at least 1 character long.`,
+    'maxlength': $localize`Name cannot be more than 50 characters long.`,
+    'pattern': $localize`Name should be lowercase alphanumeric; dots and underscores are allowed.`
+  }
+}
+export const VIDEO_CHANNEL_DISPLAY_NAME_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [
+    Validators.required,
+    Validators.minLength(1),
+    Validators.maxLength(50)
+  ],
+  MESSAGES: {
+    'required': $localize`Display name is required.`,
+    'minlength': $localize`Display name must be at least 1 character long.`,
+    'maxlength': $localize`Display name cannot be more than 50 characters long.`
+  }
+}
+export const VIDEO_CHANNEL_DESCRIPTION_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [
+    Validators.minLength(3),
+    Validators.maxLength(1000)
+  ],
+  MESSAGES: {
+    'minlength': $localize`Description must be at least 3 characters long.`,
+    'maxlength': $localize`Description cannot be more than 1000 characters long.`
+  }
+}
+export const VIDEO_CHANNEL_SUPPORT_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [
+    Validators.minLength(3),
+    Validators.maxLength(1000)
+  ],
+  MESSAGES: {
+    'minlength': $localize`Support text must be at least 3 characters long.`,
+    'maxlength': $localize`Support text cannot be more than 1000 characters long`
+  }
+}
diff --git a/client/src/app/shared/form-validators/video-comment-validators.ts b/client/src/app/shared/form-validators/video-comment-validators.ts
new file mode 100644
index 000000000..c56564d34
--- /dev/null
+++ b/client/src/app/shared/form-validators/video-comment-validators.ts
@@ -0,0 +1,11 @@
+import { Validators } from '@angular/forms'
+import { BuildFormValidator } from './form-validator.model'
+export const VIDEO_COMMENT_TEXT_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [ Validators.required, Validators.minLength(1), Validators.maxLength(3000) ],
+  MESSAGES: {
+    'required': $localize`Comment is required.`,
+    'minlength': $localize`Comment must be at least 2 characters long.`,
+    'maxlength': $localize`Comment cannot be more than 3000 characters long.`
+  }
+}
diff --git a/client/src/app/shared/form-validators/video-ownership-change-validators.ts b/client/src/app/shared/form-validators/video-ownership-change-validators.ts
new file mode 100644
index 000000000..e1a2df8a6
--- /dev/null
+++ b/client/src/app/shared/form-validators/video-ownership-change-validators.ts
@@ -0,0 +1,25 @@
+import { AbstractControl, ValidationErrors, Validators } from '@angular/forms'
+import { BuildFormValidator } from './form-validator.model'
+export const OWNERSHIP_CHANGE_CHANNEL_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [ Validators.required ],
+  MESSAGES: {
+    'required': $localize`The channel is required.`
+  }
+}
+export const OWNERSHIP_CHANGE_USERNAME_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [ Validators.required, localAccountValidator ],
+  MESSAGES: {
+    'required': $localize`The username is required.`,
+    'localAccountOnly': $localize`You can only transfer ownership to a local account`
+  }
+}
+function localAccountValidator (control: AbstractControl): ValidationErrors {
+  if (control.value.includes('@')) {
+    return { 'localAccountOnly': true }
+  }
+  return null
+}
diff --git a/client/src/app/shared/form-validators/video-playlist-validators.ts b/client/src/app/shared/form-validators/video-playlist-validators.ts
new file mode 100644
index 000000000..7e3d29458
--- /dev/null
+++ b/client/src/app/shared/form-validators/video-playlist-validators.ts
@@ -0,0 +1,54 @@
+import { Validators, AbstractControl } from '@angular/forms'
+import { BuildFormValidator } from './form-validator.model'
+import { VideoPlaylistPrivacy } from '@shared/models'
+export const VIDEO_PLAYLIST_DISPLAY_NAME_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [
+    Validators.required,
+    Validators.minLength(1),
+    Validators.maxLength(120)
+  ],
+  MESSAGES: {
+    'required': $localize`Display name is required.`,
+    'minlength': $localize`Display name must be at least 1 character long.`,
+    'maxlength': $localize`Display name cannot be more than 120 characters long.`
+  }
+}
+export const VIDEO_PLAYLIST_PRIVACY_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [
+    Validators.required
+  ],
+  MESSAGES: {
+    'required': $localize`Privacy is required.`
+  }
+}
+export const VIDEO_PLAYLIST_DESCRIPTION_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [
+    Validators.minLength(3),
+    Validators.maxLength(1000)
+  ],
+  MESSAGES: {
+    'minlength': $localize`Description must be at least 3 characters long.`,
+    'maxlength': $localize`Description cannot be more than 1000 characters long.`
+  }
+}
+export const VIDEO_PLAYLIST_CHANNEL_ID_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [],
+  MESSAGES: {
+    'required': $localize`The channel is required when the playlist is public.`
+  }
+}
+export function setPlaylistChannelValidator (channelControl: AbstractControl, privacy: VideoPlaylistPrivacy) {
+  if (privacy.toString() === VideoPlaylistPrivacy.PUBLIC.toString()) {
+    channelControl.setValidators([Validators.required])
+  } else {
+    channelControl.setValidators(null)
+  }
+  channelControl.markAsDirty()
+  channelControl.updateValueAndValidity()
+}
diff --git a/client/src/app/shared/form-validators/video-validators.ts b/client/src/app/shared/form-validators/video-validators.ts
new file mode 100644
index 000000000..23f2391b2
--- /dev/null
+++ b/client/src/app/shared/form-validators/video-validators.ts
@@ -0,0 +1,101 @@
+import { AbstractControl, ValidationErrors, ValidatorFn, Validators } from '@angular/forms'
+import { BuildFormValidator } from './form-validator.model'
+export const VIDEO_NAME_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [ Validators.required, Validators.minLength(3), Validators.maxLength(120) ],
+  MESSAGES: {
+    'required': $localize`Video name is required.`,
+    'minlength': $localize`Video name must be at least 3 characters long.`,
+    'maxlength': $localize`Video name cannot be more than 120 characters long.`
+  }
+}
+export const VIDEO_PRIVACY_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [ Validators.required ],
+  MESSAGES: {
+    'required': $localize`Video privacy is required.`
+  }
+}
+export const VIDEO_CATEGORY_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [ ],
+  MESSAGES: {}
+}
+export const VIDEO_LICENCE_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [ ],
+  MESSAGES: {}
+}
+export const VIDEO_LANGUAGE_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [ ],
+  MESSAGES: {}
+}
+export const VIDEO_IMAGE_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [ ],
+  MESSAGES: {}
+}
+export const VIDEO_CHANNEL_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [ Validators.required ],
+  MESSAGES: {
+    'required': $localize`Video channel is required.`
+  }
+}
+export const VIDEO_DESCRIPTION_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [ Validators.minLength(3), Validators.maxLength(10000) ],
+  MESSAGES: {
+    'minlength': $localize`Video description must be at least 3 characters long.`,
+    'maxlength': $localize`Video description cannot be more than 10000 characters long.`
+  }
+}
+export const VIDEO_TAG_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [ Validators.minLength(2), Validators.maxLength(30) ],
+  MESSAGES: {
+    'minlength': $localize`A tag should be more than 2 characters long.`,
+    'maxlength': $localize`A tag should be less than 30 characters long.`
+  }
+}
+export const VIDEO_TAGS_ARRAY_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [ Validators.maxLength(5), arrayTagLengthValidator() ],
+  MESSAGES: {
+    'maxlength': $localize`A maximum of 5 tags can be used on a video.`,
+    'arrayTagLength': $localize`A tag should be more than 2, and less than 30 characters long.`
+  }
+}
+export const VIDEO_SUPPORT_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [ Validators.minLength(3), Validators.maxLength(1000) ],
+  MESSAGES: {
+    'minlength': $localize`Video support must be at least 3 characters long.`,
+    'maxlength': $localize`Video support cannot be more than 1000 characters long.`
+  }
+}
+export const VIDEO_SCHEDULE_PUBLICATION_AT_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [ ],
+  MESSAGES: {
+    'required': $localize`A date is required to schedule video update.`
+  }
+}
+export const VIDEO_ORIGINALLY_PUBLISHED_AT_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [ ],
+  MESSAGES: {}
+}
+function arrayTagLengthValidator (min = 2, max = 30): ValidatorFn {
+  return (control: AbstractControl): ValidationErrors => {
+    const array = control.value as Array<string>
+    if (array.every(e => e.length > min && e.length < max)) {
+      return null
+    }
+    return { 'arrayTagLength': true }
+  }
+}
diff --git a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.ts b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.ts
index 0c3c8ff48..9abb4c094 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.ts
+++ b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.ts
@@ -1,9 +1,10 @@
 import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
 import { AuthService, HtmlRendererService, Notifier } from '@app/core'
-import { AbuseValidatorsService, FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
 import { AbuseMessage, UserAbuse } from '@shared/models'
+import { ABUSE_MESSAGE_VALIDATOR } from '../form-validators/abuse-validators'
 import { AbuseService } from '../shared-moderation'
 @Component({
@@ -28,7 +29,6 @@ export class AbuseMessageModalComponent extends FormReactive implements OnInit {
  constructor (
    protected formValidatorService: FormValidatorService,
-    private abuseValidatorsService: AbuseValidatorsService,
    private modalService: NgbModal,
    private htmlRenderer: HtmlRendererService,
    private auth: AuthService,
@@ -40,7 +40,7 @@ export class AbuseMessageModalComponent extends FormReactive implements OnInit {
  ngOnInit () {
    this.buildForm({
-      message: this.abuseValidatorsService.ABUSE_MESSAGE
+      message: ABUSE_MESSAGE_VALIDATOR
    })
  }
diff --git a/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.ts b/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.ts
index fad7f888d..876aeea8a 100644
--- a/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.ts
+++ b/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.ts
@@ -1,10 +1,11 @@
 import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'
 import { Notifier } from '@app/core'
-import { AbuseValidatorsService, FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { AbuseService } from '@app/shared/shared-moderation'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
 import { AdminAbuse } from '@shared/models'
+import { ABUSE_MODERATION_COMMENT_VALIDATOR } from '../form-validators/abuse-validators'
 @Component({
  selector: 'my-moderation-comment-modal',
@@ -22,15 +23,14 @@ export class ModerationCommentModalComponent extends FormReactive implements OnI
    protected formValidatorService: FormValidatorService,
    private modalService: NgbModal,
    private notifier: Notifier,
-    private abuseService: AbuseService,
+    private abuseService: AbuseService
-    private abuseValidatorsService: AbuseValidatorsService
  ) {
    super()
  }
  ngOnInit () {
    this.buildForm({
-      moderationComment: this.abuseValidatorsService.ABUSE_MODERATION_COMMENT
+      moderationComment: ABUSE_MODERATION_COMMENT_VALIDATOR
    })
  }
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..17b4a134f
--- /dev/null
+++ b/client/src/app/shared/shared-forms/dynamic-form-field.component.html
@@ -0,0 +1,37 @@
+<div [formGroup]="form">
+  <label *ngIf="setting.type !== 'input-checkbox'" [attr.for]="setting.name" [innerHTML]="setting.label"></label>
+  <div *ngIf="setting.descriptionHTML" class="label-small-info" [innerHTML]="setting.descriptionHTML"></div>
+  <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..89193ed85
--- /dev/null
+++ b/client/src/app/shared/shared-forms/dynamic-form-field.component.scss
@@ -0,0 +1,24 @@
+@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);
+}
+.label-small-info {
+  font-style: italic;
+  margin-bottom: 10px;
+  font-size: 13px;
+}
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/form-reactive.ts b/client/src/app/shared/shared-forms/form-reactive.ts
index caa31d831..adf6cb894 100644
--- a/client/src/app/shared/shared-forms/form-reactive.ts
+++ b/client/src/app/shared/shared-forms/form-reactive.ts
@@ -1,5 +1,6 @@
 import { FormGroup } from '@angular/forms'
-import { BuildFormArgument, BuildFormDefaultValues, FormValidatorService } from './form-validators'
+import { BuildFormArgument, BuildFormDefaultValues } from '../form-validators/form-validator.model'
+import { FormValidatorService } from './form-validator.service'
 export type FormReactiveErrors = { [ id: string ]: string | FormReactiveErrors }
 export type FormReactiveValidationMessages = {
diff --git a/client/src/app/shared/shared-forms/form-validators/form-validator.service.ts b/client/src/app/shared/shared-forms/form-validator.service.ts
index dec7d8d9a..41c8b76bd 100644
--- a/client/src/app/shared/shared-forms/form-validators/form-validator.service.ts
+++ b/client/src/app/shared/shared-forms/form-validator.service.ts
@@ -1,17 +1,7 @@
-import { FormBuilder, FormControl, FormGroup, ValidatorFn } from '@angular/forms'
 import { Injectable } from '@angular/core'
-import { FormReactiveErrors, FormReactiveValidationMessages } from '../form-reactive'
+import { FormBuilder, FormControl, FormGroup, ValidatorFn } from '@angular/forms'
+import { BuildFormArgument, BuildFormDefaultValues } from '../form-validators/form-validator.model'
-export type BuildFormValidator = {
+import { FormReactiveErrors, FormReactiveValidationMessages } from './form-reactive'
-  VALIDATORS: ValidatorFn[],
-  MESSAGES: { [ name: string ]: string }
-}
-export type BuildFormArgument = {
-  [ id: string ]: BuildFormValidator | BuildFormArgument
-}
-export type BuildFormDefaultValues = {
-  [ name: string ]: string | string[] | BuildFormDefaultValues
-}
 @Injectable()
 export class FormValidatorService {
diff --git a/client/src/app/shared/shared-forms/form-validators/abuse-validators.service.ts b/client/src/app/shared/shared-forms/form-validators/abuse-validators.service.ts
deleted file mode 100644
index 56d30d6f9..000000000
--- a/client/src/app/shared/shared-forms/form-validators/abuse-validators.service.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Injectable } from '@angular/core'
-import { Validators } from '@angular/forms'
-import { BuildFormValidator } from './form-validator.service'
-@Injectable()
-export class AbuseValidatorsService {
-  readonly ABUSE_REASON: BuildFormValidator
-  readonly ABUSE_MODERATION_COMMENT: BuildFormValidator
-  readonly ABUSE_MESSAGE: BuildFormValidator
-  constructor () {
-    this.ABUSE_REASON = {
-      VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(3000) ],
-      MESSAGES: {
-        'required': $localize`Report reason is required.`,
-        'minlength': $localize`Report reason must be at least 2 characters long.`,
-        'maxlength': $localize`Report reason cannot be more than 3000 characters long.`
-      }
-    }
-    this.ABUSE_MODERATION_COMMENT = {
-      VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(3000) ],
-      MESSAGES: {
-        'required': $localize`Moderation comment is required.`,
-        'minlength': $localize`Moderation comment must be at least 2 characters long.`,
-        'maxlength': $localize`Moderation comment cannot be more than 3000 characters long.`
-      }
-    }
-    this.ABUSE_MESSAGE = {
-      VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(3000) ],
-      MESSAGES: {
-        'required': $localize`Abuse message is required.`,
-        'minlength': $localize`Abuse message must be at least 2 characters long.`,
-        'maxlength': $localize`Abuse message cannot be more than 3000 characters long.`
-      }
-    }
-  }
-}
diff --git a/client/src/app/shared/shared-forms/form-validators/batch-domains-validators.service.ts b/client/src/app/shared/shared-forms/form-validators/batch-domains-validators.service.ts
deleted file mode 100644
index 6c7da833f..000000000
--- a/client/src/app/shared/shared-forms/form-validators/batch-domains-validators.service.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import { Injectable } from '@angular/core'
-import { ValidatorFn, Validators } from '@angular/forms'
-import { BuildFormValidator } from './form-validator.service'
-import { validateHost } from './host'
-@Injectable()
-export class BatchDomainsValidatorsService {
-  readonly DOMAINS: BuildFormValidator
-  constructor () {
-    this.DOMAINS = {
-      VALIDATORS: [ Validators.required, this.validDomains, this.isHostsUnique ],
-      MESSAGES: {
-        'required': $localize`Domain is required.`,
-        'validDomains': $localize`Domains entered are invalid.`,
-        'uniqueDomains': $localize`Domains entered contain duplicates.`
-      }
-    }
-  }
-  getNotEmptyHosts (hosts: string) {
-    return hosts
-      .split('\n')
-      .filter((host: string) => host && host.length !== 0) // Eject empty hosts
-  }
-  private validDomains: ValidatorFn = (control) => {
-    if (!control.value) return null
-    const newHostsErrors = []
-    const hosts = this.getNotEmptyHosts(control.value)
-    for (const host of hosts) {
-      if (validateHost(host) === false) {
-        newHostsErrors.push($localize`${host} is not valid`)
-      }
-    }
-    /* Is not valid. */
-    if (newHostsErrors.length !== 0) {
-      return {
-        'validDomains': {
-          reason: 'invalid',
-          value: newHostsErrors.join('. ') + '.'
-        }
-      }
-    }
-    /* Is valid. */
-    return null
-  }
-  private isHostsUnique: ValidatorFn = (control) => {
-    if (!control.value) return null
-    const hosts = this.getNotEmptyHosts(control.value)
-    if (hosts.every((host: string) => hosts.indexOf(host) === hosts.lastIndexOf(host))) {
-      return null
-    } else {
-      return {
-        'uniqueDomains': {
-          reason: 'invalid'
-        }
-      }
-    }
-  }
-}
diff --git a/client/src/app/shared/shared-forms/form-validators/custom-config-validators.service.ts b/client/src/app/shared/shared-forms/form-validators/custom-config-validators.service.ts
deleted file mode 100644
index 862ff5470..000000000
--- a/client/src/app/shared/shared-forms/form-validators/custom-config-validators.service.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-import { Injectable } from '@angular/core'
-import { Validators } from '@angular/forms'
-import { BuildFormValidator } from './form-validator.service'
-@Injectable()
-export class CustomConfigValidatorsService {
-  readonly INSTANCE_NAME: BuildFormValidator
-  readonly INSTANCE_SHORT_DESCRIPTION: BuildFormValidator
-  readonly SERVICES_TWITTER_USERNAME: BuildFormValidator
-  readonly CACHE_PREVIEWS_SIZE: BuildFormValidator
-  readonly CACHE_CAPTIONS_SIZE: BuildFormValidator
-  readonly SIGNUP_LIMIT: BuildFormValidator
-  readonly ADMIN_EMAIL: BuildFormValidator
-  readonly TRANSCODING_THREADS: BuildFormValidator
-  readonly INDEX_URL: BuildFormValidator
-  readonly SEARCH_INDEX_URL: BuildFormValidator
-  constructor () {
-    this.INSTANCE_NAME = {
-      VALIDATORS: [ Validators.required ],
-      MESSAGES: {
-        'required': $localize`Instance name is required.`
-      }
-    }
-    this.INSTANCE_SHORT_DESCRIPTION = {
-      VALIDATORS: [ Validators.max(250) ],
-      MESSAGES: {
-        'max': $localize`Short description should not be longer than 250 characters.`
-      }
-    }
-    this.SERVICES_TWITTER_USERNAME = {
-      VALIDATORS: [ Validators.required ],
-      MESSAGES: {
-        'required': $localize`Twitter username is required.`
-      }
-    }
-    this.CACHE_PREVIEWS_SIZE = {
-      VALIDATORS: [ Validators.required, Validators.min(1), Validators.pattern('[0-9]+') ],
-      MESSAGES: {
-        'required': $localize`Previews cache size is required.`,
-        'min': $localize`Previews cache size must be greater than 1.`,
-        'pattern': $localize`Previews cache size must be a number.`
-      }
-    }
-    this.CACHE_CAPTIONS_SIZE = {
-      VALIDATORS: [ Validators.required, Validators.min(1), Validators.pattern('[0-9]+') ],
-      MESSAGES: {
-        'required': $localize`Captions cache size is required.`,
-        'min': $localize`Captions cache size must be greater than 1.`,
-        'pattern': $localize`Captions cache size must be a number.`
-      }
-    }
-    this.SIGNUP_LIMIT = {
-      VALIDATORS: [ Validators.required, Validators.min(-1), Validators.pattern('-?[0-9]+') ],
-      MESSAGES: {
-        'required': $localize`Signup limit is required.`,
-        'min': $localize`Signup limit must be greater than 1.`,
-        'pattern': $localize`Signup limit must be a number.`
-      }
-    }
-    this.ADMIN_EMAIL = {
-      VALIDATORS: [ Validators.required, Validators.email ],
-      MESSAGES: {
-        'required': $localize`Admin email is required.`,
-        'email': $localize`Admin email must be valid.`
-      }
-    }
-    this.TRANSCODING_THREADS = {
-      VALIDATORS: [ Validators.required, Validators.min(0) ],
-      MESSAGES: {
-        'required': $localize`Transcoding threads is required.`,
-        'min': $localize`Transcoding threads must be greater or equal to 0.`
-      }
-    }
-    this.INDEX_URL = {
-      VALIDATORS: [ Validators.pattern(/^https:\/\//) ],
-      MESSAGES: {
-        'pattern': $localize`Index URL should be a URL`
-      }
-    }
-    this.SEARCH_INDEX_URL = {
-      VALIDATORS: [ Validators.pattern(/^https?:\/\//) ],
-      MESSAGES: {
-        'pattern': $localize`Search index URL should be a URL`
-      }
-    }
-  }
-}
diff --git a/client/src/app/shared/shared-forms/form-validators/index.ts b/client/src/app/shared/shared-forms/form-validators/index.ts
deleted file mode 100644
index b06a326ff..000000000
--- a/client/src/app/shared/shared-forms/form-validators/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export * from './abuse-validators.service'
-export * from './batch-domains-validators.service'
-export * from './custom-config-validators.service'
-export * from './form-validator.service'
-export * from './host'
-export * from './instance-validators.service'
-export * from './login-validators.service'
-export * from './reset-password-validators.service'
-export * from './user-validators.service'
-export * from './video-accept-ownership-validators.service'
-export * from './video-block-validators.service'
-export * from './video-captions-validators.service'
-export * from './video-change-ownership-validators.service'
-export * from './video-channel-validators.service'
-export * from './video-comment-validators.service'
-export * from './video-playlist-validators.service'
-export * from './video-validators.service'
diff --git a/client/src/app/shared/shared-forms/form-validators/instance-validators.service.ts b/client/src/app/shared/shared-forms/form-validators/instance-validators.service.ts
deleted file mode 100644
index 3628f0b60..000000000
--- a/client/src/app/shared/shared-forms/form-validators/instance-validators.service.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { Injectable } from '@angular/core'
-import { Validators } from '@angular/forms'
-import { BuildFormValidator } from './form-validator.service'
-@Injectable()
-export class InstanceValidatorsService {
-  readonly FROM_EMAIL: BuildFormValidator
-  readonly FROM_NAME: BuildFormValidator
-  readonly SUBJECT: BuildFormValidator
-  readonly BODY: BuildFormValidator
-  constructor () {
-    this.FROM_EMAIL = {
-      VALIDATORS: [ Validators.required, Validators.email ],
-      MESSAGES: {
-        'required': $localize`Email is required.`,
-        'email': $localize`Email must be valid.`
-      }
-    }
-    this.FROM_NAME = {
-      VALIDATORS: [
-        Validators.required,
-        Validators.minLength(1),
-        Validators.maxLength(120)
-      ],
-      MESSAGES: {
-        'required': $localize`Your name is required.`,
-        'minlength': $localize`Your name must be at least 1 character long.`,
-        'maxlength': $localize`Your name cannot be more than 120 characters long.`
-      }
-    }
-    this.SUBJECT = {
-      VALIDATORS: [
-        Validators.required,
-        Validators.minLength(1),
-        Validators.maxLength(120)
-      ],
-      MESSAGES: {
-        'required': $localize`A subject is required.`,
-        'minlength': $localize`The subject must be at least 1 character long.`,
-        'maxlength': $localize`The subject cannot be more than 120 characters long.`
-      }
-    }
-    this.BODY = {
-      VALIDATORS: [
-        Validators.required,
-        Validators.minLength(3),
-        Validators.maxLength(5000)
-      ],
-      MESSAGES: {
-        'required': $localize`A message is required.`,
-        'minlength': $localize`The message must be at least 3 characters long.`,
-        'maxlength': $localize`The message cannot be more than 5000 characters long.`
-      }
-    }
-  }
-}
diff --git a/client/src/app/shared/shared-forms/form-validators/login-validators.service.ts b/client/src/app/shared/shared-forms/form-validators/login-validators.service.ts
deleted file mode 100644
index 67ea11f20..000000000
--- a/client/src/app/shared/shared-forms/form-validators/login-validators.service.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Injectable } from '@angular/core'
-import { Validators } from '@angular/forms'
-import { BuildFormValidator } from './form-validator.service'
-@Injectable()
-export class LoginValidatorsService {
-  readonly LOGIN_USERNAME: BuildFormValidator
-  readonly LOGIN_PASSWORD: BuildFormValidator
-  constructor () {
-    this.LOGIN_USERNAME = {
-      VALIDATORS: [
-        Validators.required
-      ],
-      MESSAGES: {
-        'required': $localize`Username is required.`
-      }
-    }
-    this.LOGIN_PASSWORD = {
-      VALIDATORS: [
-        Validators.required
-      ],
-      MESSAGES: {
-        'required': $localize`Password is required.`
-      }
-    }
-  }
-}
diff --git a/client/src/app/shared/shared-forms/form-validators/reset-password-validators.service.ts b/client/src/app/shared/shared-forms/form-validators/reset-password-validators.service.ts
deleted file mode 100644
index 3d0b4dd64..000000000
--- a/client/src/app/shared/shared-forms/form-validators/reset-password-validators.service.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Injectable } from '@angular/core'
-import { Validators } from '@angular/forms'
-import { BuildFormValidator } from './form-validator.service'
-@Injectable()
-export class ResetPasswordValidatorsService {
-  readonly RESET_PASSWORD_CONFIRM: BuildFormValidator
-  constructor () {
-    this.RESET_PASSWORD_CONFIRM = {
-      VALIDATORS: [
-        Validators.required
-      ],
-      MESSAGES: {
-        'required': $localize`Confirmation of the password is required.`
-      }
-    }
-  }
-}
diff --git a/client/src/app/shared/shared-forms/form-validators/user-validators.service.ts b/client/src/app/shared/shared-forms/form-validators/user-validators.service.ts
deleted file mode 100644
index 312fc9b1e..000000000
--- a/client/src/app/shared/shared-forms/form-validators/user-validators.service.ts
+++ /dev/null
@@ -1,166 +0,0 @@
-import { Injectable } from '@angular/core'
-import { Validators } from '@angular/forms'
-import { BuildFormValidator } from './form-validator.service'
-@Injectable()
-export class UserValidatorsService {
-  readonly USER_USERNAME: BuildFormValidator
-  readonly USER_CHANNEL_NAME: BuildFormValidator
-  readonly USER_EMAIL: BuildFormValidator
-  readonly USER_PASSWORD: BuildFormValidator
-  readonly USER_PASSWORD_OPTIONAL: BuildFormValidator
-  readonly USER_CONFIRM_PASSWORD: BuildFormValidator
-  readonly USER_VIDEO_QUOTA: BuildFormValidator
-  readonly USER_VIDEO_QUOTA_DAILY: BuildFormValidator
-  readonly USER_ROLE: BuildFormValidator
-  readonly USER_DISPLAY_NAME_REQUIRED: BuildFormValidator
-  readonly USER_DESCRIPTION: BuildFormValidator
-  readonly USER_TERMS: BuildFormValidator
-  readonly USER_BAN_REASON: BuildFormValidator
-  constructor () {
-    this.USER_USERNAME = {
-      VALIDATORS: [
-        Validators.required,
-        Validators.minLength(1),
-        Validators.maxLength(50),
-        Validators.pattern(/^[a-z0-9][a-z0-9._]*$/)
-      ],
-      MESSAGES: {
-        'required': $localize`Username is required.`,
-        'minlength': $localize`Username must be at least 1 character long.`,
-        'maxlength': $localize`Username cannot be more than 50 characters long.`,
-        'pattern': $localize`Username should be lowercase alphanumeric; dots and underscores are allowed.`
-      }
-    }
-    this.USER_CHANNEL_NAME = {
-      VALIDATORS: [
-        Validators.required,
-        Validators.minLength(1),
-        Validators.maxLength(50),
-        Validators.pattern(/^[a-z0-9][a-z0-9._]*$/)
-      ],
-      MESSAGES: {
-        'required': $localize`Channel name is required.`,
-        'minlength': $localize`Channel name must be at least 1 character long.`,
-        'maxlength': $localize`Channel name cannot be more than 50 characters long.`,
-        'pattern': $localize`Channel name should be lowercase alphanumeric; dots and underscores are allowed.`
-      }
-    }
-    this.USER_EMAIL = {
-      VALIDATORS: [ Validators.required, Validators.email ],
-      MESSAGES: {
-        'required': $localize`Email is required.`,
-        'email': $localize`Email must be valid.`
-      }
-    }
-    this.USER_PASSWORD = {
-      VALIDATORS: [
-        Validators.required,
-        Validators.minLength(6),
-        Validators.maxLength(255)
-      ],
-      MESSAGES: {
-        'required': $localize`Password is required.`,
-        'minlength': $localize`Password must be at least 6 characters long.`,
-        'maxlength': $localize`Password cannot be more than 255 characters long.`
-      }
-    }
-    this.USER_PASSWORD_OPTIONAL = {
-      VALIDATORS: [
-        Validators.minLength(6),
-        Validators.maxLength(255)
-      ],
-      MESSAGES: {
-        'minlength': $localize`Password must be at least 6 characters long.`,
-        'maxlength': $localize`Password cannot be more than 255 characters long.`
-      }
-    }
-    this.USER_CONFIRM_PASSWORD = {
-      VALIDATORS: [],
-      MESSAGES: {
-        'matchPassword': $localize`The new password and the confirmed password do not correspond.`
-      }
-    }
-    this.USER_VIDEO_QUOTA = {
-      VALIDATORS: [ Validators.required, Validators.min(-1) ],
-      MESSAGES: {
-        'required': $localize`Video quota is required.`,
-        'min': $localize`Quota must be greater than -1.`
-      }
-    }
-    this.USER_VIDEO_QUOTA_DAILY = {
-      VALIDATORS: [ Validators.required, Validators.min(-1) ],
-      MESSAGES: {
-        'required': $localize`Daily upload limit is required.`,
-        'min': $localize`Daily upload limit must be greater than -1.`
-      }
-    }
-    this.USER_ROLE = {
-      VALIDATORS: [ Validators.required ],
-      MESSAGES: {
-        'required': $localize`User role is required.`
-      }
-    }
-    this.USER_DISPLAY_NAME_REQUIRED = this.getDisplayName(true)
-    this.USER_DESCRIPTION = {
-      VALIDATORS: [
-        Validators.minLength(3),
-        Validators.maxLength(1000)
-      ],
-      MESSAGES: {
-        'minlength': $localize`Description must be at least 3 characters long.`,
-        'maxlength': $localize`Description cannot be more than 1000 characters long.`
-      }
-    }
-    this.USER_TERMS = {
-      VALIDATORS: [
-        Validators.requiredTrue
-      ],
-      MESSAGES: {
-        'required': $localize`You must agree with the instance terms in order to register on it.`
-      }
-    }
-    this.USER_BAN_REASON = {
-      VALIDATORS: [
-        Validators.minLength(3),
-        Validators.maxLength(250)
-      ],
-      MESSAGES: {
-        'minlength': $localize`Ban reason must be at least 3 characters long.`,
-        'maxlength': $localize`Ban reason cannot be more than 250 characters long.`
-      }
-    }
-  }
-  private getDisplayName (required: boolean) {
-    const control = {
-      VALIDATORS: [
-        Validators.minLength(1),
-        Validators.maxLength(120)
-      ],
-      MESSAGES: {
-        'required': $localize`Display name is required.`,
-        'minlength': $localize`Display name must be at least 1 character long.`,
-        'maxlength': $localize`Display name cannot be more than 50 characters long.`
-      }
-    }
-    if (required) control.VALIDATORS.push(Validators.required)
-    return control
-  }
-}
diff --git a/client/src/app/shared/shared-forms/form-validators/video-accept-ownership-validators.service.ts b/client/src/app/shared/shared-forms/form-validators/video-accept-ownership-validators.service.ts
deleted file mode 100644
index aed9e9cdd..000000000
--- a/client/src/app/shared/shared-forms/form-validators/video-accept-ownership-validators.service.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Injectable } from '@angular/core'
-import { Validators } from '@angular/forms'
-import { BuildFormValidator } from './form-validator.service'
-@Injectable()
-export class VideoAcceptOwnershipValidatorsService {
-  readonly CHANNEL: BuildFormValidator
-  constructor () {
-    this.CHANNEL = {
-      VALIDATORS: [ Validators.required ],
-      MESSAGES: {
-        'required': $localize`The channel is required.`
-      }
-    }
-  }
-}
diff --git a/client/src/app/shared/shared-forms/form-validators/video-block-validators.service.ts b/client/src/app/shared/shared-forms/form-validators/video-block-validators.service.ts
deleted file mode 100644
index bce1880dc..000000000
--- a/client/src/app/shared/shared-forms/form-validators/video-block-validators.service.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Injectable } from '@angular/core'
-import { Validators } from '@angular/forms'
-import { BuildFormValidator } from './form-validator.service'
-@Injectable()
-export class VideoBlockValidatorsService {
-  readonly VIDEO_BLOCK_REASON: BuildFormValidator
-  constructor () {
-    this.VIDEO_BLOCK_REASON = {
-      VALIDATORS: [ Validators.minLength(2), Validators.maxLength(300) ],
-      MESSAGES: {
-        'minlength': $localize`Block reason must be at least 2 characters long.`,
-        'maxlength': $localize`Block reason cannot be more than 300 characters long.`
-      }
-    }
-  }
-}
diff --git a/client/src/app/shared/shared-forms/form-validators/video-captions-validators.service.ts b/client/src/app/shared/shared-forms/form-validators/video-captions-validators.service.ts
deleted file mode 100644
index 7e90264e5..000000000
--- a/client/src/app/shared/shared-forms/form-validators/video-captions-validators.service.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Injectable } from '@angular/core'
-import { Validators } from '@angular/forms'
-import { BuildFormValidator } from './form-validator.service'
-@Injectable()
-export class VideoCaptionsValidatorsService {
-  readonly VIDEO_CAPTION_LANGUAGE: BuildFormValidator
-  readonly VIDEO_CAPTION_FILE: BuildFormValidator
-  constructor () {
-    this.VIDEO_CAPTION_LANGUAGE = {
-      VALIDATORS: [ Validators.required ],
-      MESSAGES: {
-        'required': $localize`Video caption language is required.`
-      }
-    }
-    this.VIDEO_CAPTION_FILE = {
-      VALIDATORS: [ Validators.required ],
-      MESSAGES: {
-        'required': $localize`Video caption file is required.`
-      }
-    }
-  }
-}
diff --git a/client/src/app/shared/shared-forms/form-validators/video-change-ownership-validators.service.ts b/client/src/app/shared/shared-forms/form-validators/video-change-ownership-validators.service.ts
deleted file mode 100644
index 8c809a0d5..000000000
--- a/client/src/app/shared/shared-forms/form-validators/video-change-ownership-validators.service.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Injectable } from '@angular/core'
-import { AbstractControl, ValidationErrors, Validators } from '@angular/forms'
-import { BuildFormValidator } from './form-validator.service'
-@Injectable()
-export class VideoChangeOwnershipValidatorsService {
-  readonly USERNAME: BuildFormValidator
-  constructor () {
-    this.USERNAME = {
-      VALIDATORS: [ Validators.required, this.localAccountValidator ],
-      MESSAGES: {
-        'required': $localize`The username is required.`,
-        'localAccountOnly': $localize`You can only transfer ownership to a local account`
-      }
-    }
-  }
-  localAccountValidator (control: AbstractControl): ValidationErrors {
-    if (control.value.includes('@')) {
-      return { 'localAccountOnly': true }
-    }
-    return null
-  }
-}
diff --git a/client/src/app/shared/shared-forms/form-validators/video-channel-validators.service.ts b/client/src/app/shared/shared-forms/form-validators/video-channel-validators.service.ts
deleted file mode 100644
index 3e7444196..000000000
--- a/client/src/app/shared/shared-forms/form-validators/video-channel-validators.service.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { Injectable } from '@angular/core'
-import { Validators } from '@angular/forms'
-import { BuildFormValidator } from './form-validator.service'
-@Injectable()
-export class VideoChannelValidatorsService {
-  readonly VIDEO_CHANNEL_NAME: BuildFormValidator
-  readonly VIDEO_CHANNEL_DISPLAY_NAME: BuildFormValidator
-  readonly VIDEO_CHANNEL_DESCRIPTION: BuildFormValidator
-  readonly VIDEO_CHANNEL_SUPPORT: BuildFormValidator
-  constructor () {
-    this.VIDEO_CHANNEL_NAME = {
-      VALIDATORS: [
-        Validators.required,
-        Validators.minLength(1),
-        Validators.maxLength(50),
-        Validators.pattern(/^[a-z0-9][a-z0-9._]*$/)
-      ],
-      MESSAGES: {
-        'required': $localize`Name is required.`,
-        'minlength': $localize`Name must be at least 1 character long.`,
-        'maxlength': $localize`Name cannot be more than 50 characters long.`,
-        'pattern': $localize`Name should be lowercase alphanumeric; dots and underscores are allowed.`
-      }
-    }
-    this.VIDEO_CHANNEL_DISPLAY_NAME = {
-      VALIDATORS: [
-        Validators.required,
-        Validators.minLength(1),
-        Validators.maxLength(50)
-      ],
-      MESSAGES: {
-        'required': $localize`Display name is required.`,
-        'minlength': $localize`Display name must be at least 1 character long.`,
-        'maxlength': $localize`Display name cannot be more than 50 characters long.`
-      }
-    }
-    this.VIDEO_CHANNEL_DESCRIPTION = {
-      VALIDATORS: [
-        Validators.minLength(3),
-        Validators.maxLength(1000)
-      ],
-      MESSAGES: {
-        'minlength': $localize`Description must be at least 3 characters long.`,
-        'maxlength': $localize`Description cannot be more than 1000 characters long.`
-      }
-    }
-    this.VIDEO_CHANNEL_SUPPORT = {
-      VALIDATORS: [
-        Validators.minLength(3),
-        Validators.maxLength(1000)
-      ],
-      MESSAGES: {
-        'minlength': $localize`Support text must be at least 3 characters long.`,
-        'maxlength': $localize`Support text cannot be more than 1000 characters long`
-      }
-    }
-  }
-}
diff --git a/client/src/app/shared/shared-forms/form-validators/video-comment-validators.service.ts b/client/src/app/shared/shared-forms/form-validators/video-comment-validators.service.ts
deleted file mode 100644
index 18e7ae264..000000000
--- a/client/src/app/shared/shared-forms/form-validators/video-comment-validators.service.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Injectable } from '@angular/core'
-import { Validators } from '@angular/forms'
-import { BuildFormValidator } from './form-validator.service'
-@Injectable()
-export class VideoCommentValidatorsService {
-  readonly VIDEO_COMMENT_TEXT: BuildFormValidator
-  constructor () {
-    this.VIDEO_COMMENT_TEXT = {
-      VALIDATORS: [ Validators.required, Validators.minLength(1), Validators.maxLength(3000) ],
-      MESSAGES: {
-        'required': $localize`Comment is required.`,
-        'minlength': $localize`Comment must be at least 2 characters long.`,
-        'maxlength': $localize`Comment cannot be more than 3000 characters long.`
-      }
-    }
-  }
-}
diff --git a/client/src/app/shared/shared-forms/form-validators/video-playlist-validators.service.ts b/client/src/app/shared/shared-forms/form-validators/video-playlist-validators.service.ts
deleted file mode 100644
index 3b45a40fd..000000000
--- a/client/src/app/shared/shared-forms/form-validators/video-playlist-validators.service.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { Injectable } from '@angular/core'
-import { AbstractControl, Validators } from '@angular/forms'
-import { VideoPlaylistPrivacy } from '@shared/models'
-import { BuildFormValidator } from './form-validator.service'
-@Injectable()
-export class VideoPlaylistValidatorsService {
-  readonly VIDEO_PLAYLIST_DISPLAY_NAME: BuildFormValidator
-  readonly VIDEO_PLAYLIST_PRIVACY: BuildFormValidator
-  readonly VIDEO_PLAYLIST_DESCRIPTION: BuildFormValidator
-  readonly VIDEO_PLAYLIST_CHANNEL_ID: BuildFormValidator
-  constructor () {
-    this.VIDEO_PLAYLIST_DISPLAY_NAME = {
-      VALIDATORS: [
-        Validators.required,
-        Validators.minLength(1),
-        Validators.maxLength(120)
-      ],
-      MESSAGES: {
-        'required': $localize`Display name is required.`,
-        'minlength': $localize`Display name must be at least 1 character long.`,
-        'maxlength': $localize`Display name cannot be more than 120 characters long.`
-      }
-    }
-    this.VIDEO_PLAYLIST_PRIVACY = {
-      VALIDATORS: [
-        Validators.required
-      ],
-      MESSAGES: {
-        'required': $localize`Privacy is required.`
-      }
-    }
-    this.VIDEO_PLAYLIST_DESCRIPTION = {
-      VALIDATORS: [
-        Validators.minLength(3),
-        Validators.maxLength(1000)
-      ],
-      MESSAGES: {
-        'minlength': $localize`Description must be at least 3 characters long.`,
-        'maxlength': $localize`Description cannot be more than 1000 characters long.`
-      }
-    }
-    this.VIDEO_PLAYLIST_CHANNEL_ID = {
-      VALIDATORS: [ ],
-      MESSAGES: {
-        'required': $localize`The channel is required when the playlist is public.`
-      }
-    }
-  }
-  setChannelValidator (channelControl: AbstractControl, privacy: VideoPlaylistPrivacy) {
-    if (privacy.toString() === VideoPlaylistPrivacy.PUBLIC.toString()) {
-      channelControl.setValidators([ Validators.required ])
-    } else {
-      channelControl.setValidators(null)
-    }
-    channelControl.markAsDirty()
-    channelControl.updateValueAndValidity()
-  }
-}
diff --git a/client/src/app/shared/shared-forms/form-validators/video-validators.service.ts b/client/src/app/shared/shared-forms/form-validators/video-validators.service.ts
deleted file mode 100644
index 8119c1ae7..000000000
--- a/client/src/app/shared/shared-forms/form-validators/video-validators.service.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-import { Injectable } from '@angular/core'
-import { AbstractControl, ValidationErrors, ValidatorFn, Validators } from '@angular/forms'
-import { BuildFormValidator } from './form-validator.service'
-@Injectable()
-export class VideoValidatorsService {
-  readonly VIDEO_NAME: BuildFormValidator
-  readonly VIDEO_PRIVACY: BuildFormValidator
-  readonly VIDEO_CATEGORY: BuildFormValidator
-  readonly VIDEO_LICENCE: BuildFormValidator
-  readonly VIDEO_LANGUAGE: BuildFormValidator
-  readonly VIDEO_IMAGE: BuildFormValidator
-  readonly VIDEO_CHANNEL: BuildFormValidator
-  readonly VIDEO_DESCRIPTION: BuildFormValidator
-  readonly VIDEO_TAGS_ARRAY: BuildFormValidator
-  readonly VIDEO_TAG: BuildFormValidator
-  readonly VIDEO_SUPPORT: BuildFormValidator
-  readonly VIDEO_SCHEDULE_PUBLICATION_AT: BuildFormValidator
-  readonly VIDEO_ORIGINALLY_PUBLISHED_AT: BuildFormValidator
-  constructor () {
-    this.VIDEO_NAME = {
-      VALIDATORS: [ Validators.required, Validators.minLength(3), Validators.maxLength(120) ],
-      MESSAGES: {
-        'required': $localize`Video name is required.`,
-        'minlength': $localize`Video name must be at least 3 characters long.`,
-        'maxlength': $localize`Video name cannot be more than 120 characters long.`
-      }
-    }
-    this.VIDEO_PRIVACY = {
-      VALIDATORS: [ Validators.required ],
-      MESSAGES: {
-        'required': $localize`Video privacy is required.`
-      }
-    }
-    this.VIDEO_CATEGORY = {
-      VALIDATORS: [ ],
-      MESSAGES: {}
-    }
-    this.VIDEO_LICENCE = {
-      VALIDATORS: [ ],
-      MESSAGES: {}
-    }
-    this.VIDEO_LANGUAGE = {
-      VALIDATORS: [ ],
-      MESSAGES: {}
-    }
-    this.VIDEO_IMAGE = {
-      VALIDATORS: [ ],
-      MESSAGES: {}
-    }
-    this.VIDEO_CHANNEL = {
-      VALIDATORS: [ Validators.required ],
-      MESSAGES: {
-        'required': $localize`Video channel is required.`
-      }
-    }
-    this.VIDEO_DESCRIPTION = {
-      VALIDATORS: [ Validators.minLength(3), Validators.maxLength(10000) ],
-      MESSAGES: {
-        'minlength': $localize`Video description must be at least 3 characters long.`,
-        'maxlength': $localize`Video description cannot be more than 10000 characters long.`
-      }
-    }
-    this.VIDEO_TAG = {
-      VALIDATORS: [ Validators.minLength(2), Validators.maxLength(30) ],
-      MESSAGES: {
-        'minlength': $localize`A tag should be more than 2 characters long.`,
-        'maxlength': $localize`A tag should be less than 30 characters long.`
-      }
-    }
-    this.VIDEO_TAGS_ARRAY = {
-      VALIDATORS: [ Validators.maxLength(5), this.arrayTagLengthValidator() ],
-      MESSAGES: {
-        'maxlength': $localize`A maximum of 5 tags can be used on a video.`,
-        'arrayTagLength': $localize`A tag should be more than 2, and less than 30 characters long.`
-      }
-    }
-    this.VIDEO_SUPPORT = {
-      VALIDATORS: [ Validators.minLength(3), Validators.maxLength(1000) ],
-      MESSAGES: {
-        'minlength': $localize`Video support must be at least 3 characters long.`,
-        'maxlength': $localize`Video support cannot be more than 1000 characters long.`
-      }
-    }
-    this.VIDEO_SCHEDULE_PUBLICATION_AT = {
-      VALIDATORS: [ ],
-      MESSAGES: {
-        'required': $localize`A date is required to schedule video update.`
-      }
-    }
-    this.VIDEO_ORIGINALLY_PUBLISHED_AT = {
-      VALIDATORS: [ ],
-      MESSAGES: {}
-    }
-  }
-  arrayTagLengthValidator (min = 2, max = 30): ValidatorFn {
-    return (control: AbstractControl): ValidationErrors => {
-      const array = control.value as Array<string>
-      if (array.every(e => e.length > min && e.length < max)) {
-        return null
-      }
-      return { 'arrayTagLength': true }
-    }
-  }
-}
diff --git a/client/src/app/shared/shared-forms/index.ts b/client/src/app/shared/shared-forms/index.ts
index 747df65cf..b2c7fa9ba 100644
--- a/client/src/app/shared/shared-forms/index.ts
+++ b/client/src/app/shared/shared-forms/index.ts
@@ -1,4 +1,4 @@
-export * from './form-validators'
+export * from './form-validator.service'
 export * from './form-reactive'
 export * from './select'
 export * from './input-readonly-copy.component'
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 0e0ed5bab..a28988f87 100644
--- a/client/src/app/shared/shared-forms/shared-form.module.ts
+++ b/client/src/app/shared/shared-forms/shared-form.module.ts
@@ -1,37 +1,21 @@
-import { NgModule } from '@angular/core'
-import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { InputMaskModule } from 'primeng/inputmask'
 import { InputSwitchModule } from 'primeng/inputswitch'
+import { NgModule } from '@angular/core'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgSelectModule } from '@ng-select/ng-select'
-import { BatchDomainsValidatorsService } from '@app/shared/shared-forms/form-validators/batch-domains-validators.service'
 import { SharedGlobalIconModule } from '../shared-icons'
 import { SharedMainModule } from '../shared-main/shared-main.module'
-import {
+import { FormValidatorService } from './form-validator.service'
-  CustomConfigValidatorsService,
-  FormValidatorService,
-  InstanceValidatorsService,
-  LoginValidatorsService,
-  ResetPasswordValidatorsService,
-  UserValidatorsService,
-  AbuseValidatorsService,
-  VideoAcceptOwnershipValidatorsService,
-  VideoBlockValidatorsService,
-  VideoCaptionsValidatorsService,
-  VideoChangeOwnershipValidatorsService,
-  VideoChannelValidatorsService,
-  VideoCommentValidatorsService,
-  VideoPlaylistValidatorsService,
-  VideoValidatorsService
-} from './form-validators'
 import { InputReadonlyCopyComponent } from './input-readonly-copy.component'
 import { MarkdownTextareaComponent } from './markdown-textarea.component'
 import { PeertubeCheckboxComponent } from './peertube-checkbox.component'
 import { PreviewUploadComponent } from './preview-upload.component'
 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 { SelectChannelComponent, SelectCheckboxComponent, SelectOptionsComponent, SelectTagsComponent } from './select'
+import { DynamicFormFieldComponent } from './dynamic-form-field.component'
 @NgModule({
  imports: [
@@ -58,7 +42,9 @@ import { SelectChannelComponent, SelectCheckboxComponent, SelectOptionsComponent
    SelectChannelComponent,
    SelectOptionsComponent,
    SelectTagsComponent,
-    SelectCheckboxComponent
+    SelectCheckboxComponent,
+    DynamicFormFieldComponent
  ],
  exports: [
@@ -80,27 +66,13 @@ import { SelectChannelComponent, SelectCheckboxComponent, SelectOptionsComponent
    SelectChannelComponent,
    SelectOptionsComponent,
    SelectTagsComponent,
-    SelectCheckboxComponent
+    SelectCheckboxComponent,
+    DynamicFormFieldComponent
  ],
  providers: [
-    CustomConfigValidatorsService,
+    FormValidatorService
-    FormValidatorService,
-    LoginValidatorsService,
-    InstanceValidatorsService,
-    LoginValidatorsService,
-    ResetPasswordValidatorsService,
-    UserValidatorsService,
-    AbuseValidatorsService,
-    VideoAcceptOwnershipValidatorsService,
-    VideoBlockValidatorsService,
-    VideoCaptionsValidatorsService,
-    VideoChangeOwnershipValidatorsService,
-    VideoChannelValidatorsService,
-    VideoCommentValidatorsService,
-    VideoPlaylistValidatorsService,
-    VideoValidatorsService,
-    BatchDomainsValidatorsService
  ]
 })
 export class SharedFormModule { }
diff --git a/client/src/app/shared/shared-forms/timestamp-input.component.ts b/client/src/app/shared/shared-forms/timestamp-input.component.ts
index 8d67a96ac..0ffd03d02 100644
--- a/client/src/app/shared/shared-forms/timestamp-input.component.ts
+++ b/client/src/app/shared/shared-forms/timestamp-input.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, forwardRef, Input, OnInit } from '@angular/core'
+import { ChangeDetectorRef, Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 import { secondsToTime, timeToInt } from '../../../assets/player/utils'
@@ -19,6 +19,8 @@ export class TimestampInputComponent implements ControlValueAccessor, OnInit {
  @Input() timestamp: number
  @Input() disabled = false
+  @Output() inputBlur = new EventEmitter()
  timestampString: string
  constructor (private changeDetector: ChangeDetectorRef) {}
@@ -57,5 +59,7 @@ export class TimestampInputComponent implements ControlValueAccessor, OnInit {
      this.propagateChange(this.timestamp)
    }
+    this.inputBlur.emit()
  }
 }
diff --git a/client/src/app/shared/shared-main/angular/infinite-scroller.directive.ts b/client/src/app/shared/shared-main/angular/infinite-scroller.directive.ts
index f09c3d1fc..d2cf53227 100644
--- a/client/src/app/shared/shared-main/angular/infinite-scroller.directive.ts
+++ b/client/src/app/shared/shared-main/angular/infinite-scroller.directive.ts
@@ -1,6 +1,6 @@
+import { fromEvent, Observable, Subscription } from 'rxjs'
 import { distinctUntilChanged, filter, map, share, startWith, throttleTime } from 'rxjs/operators'
 import { AfterContentChecked, Directive, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core'
-import { fromEvent, Observable, Subscription } from 'rxjs'
 @Directive({
  selector: '[myInfiniteScroller]'
@@ -80,7 +80,9 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy, AfterConten
  }
  private getMaximumScroll () {
-    return this.container.scrollHeight - window.innerHeight
+    const elementHeight = this.onItself ? this.container.clientHeight : window.innerHeight
+    return this.container.scrollHeight - elementHeight
  }
  private hasScroll () {
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/app/shared/shared-moderation/batch-domains-modal.component.ts b/client/src/app/shared/shared-moderation/batch-domains-modal.component.ts
index 7193ccb1b..6edbb6023 100644
--- a/client/src/app/shared/shared-moderation/batch-domains-modal.component.ts
+++ b/client/src/app/shared/shared-moderation/batch-domains-modal.component.ts
@@ -1,7 +1,8 @@
 import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
-import { BatchDomainsValidatorsService, FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
+import { DOMAINS_VALIDATOR, getNotEmptyHosts } from '../form-validators/batch-domains-validators'
 @Component({
  selector: 'my-batch-domains-modal',
@@ -18,8 +19,7 @@ export class BatchDomainsModalComponent extends FormReactive implements OnInit {
  constructor (
    protected formValidatorService: FormValidatorService,
-    private modalService: NgbModal,
+    private modalService: NgbModal
-    private batchDomainsValidatorsService: BatchDomainsValidatorsService
  ) {
    super()
  }
@@ -28,7 +28,7 @@ export class BatchDomainsModalComponent extends FormReactive implements OnInit {
    if (!this.action) this.action = $localize`Process domains`
    this.buildForm({
-      domains: this.batchDomainsValidatorsService.DOMAINS
+      domains: DOMAINS_VALIDATOR
    })
  }
@@ -42,7 +42,7 @@ export class BatchDomainsModalComponent extends FormReactive implements OnInit {
  submit () {
    this.domains.emit(
-      this.batchDomainsValidatorsService.getNotEmptyHosts(this.form.controls['domains'].value)
+      getNotEmptyHosts(this.form.controls['domains'].value)
    )
    this.form.reset()
    this.hide()
diff --git a/client/src/app/shared/shared-moderation/report-modals/account-report.component.ts b/client/src/app/shared/shared-moderation/report-modals/account-report.component.ts
index 8ab2fe940..cc8875f77 100644
--- a/client/src/app/shared/shared-moderation/report-modals/account-report.component.ts
+++ b/client/src/app/shared/shared-moderation/report-modals/account-report.component.ts
@@ -1,7 +1,8 @@
 import { mapValues, pickBy } from 'lodash-es'
 import { Component, Input, OnInit, ViewChild } from '@angular/core'
 import { Notifier } from '@app/core'
-import { AbuseValidatorsService, FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { ABUSE_REASON_VALIDATOR } from '@app/shared/form-validators/abuse-validators'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { Account } from '@app/shared/shared-main'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
@@ -28,7 +29,6 @@ export class AccountReportComponent extends FormReactive implements OnInit {
  constructor (
    protected formValidatorService: FormValidatorService,
    private modalService: NgbModal,
-    private abuseValidatorsService: AbuseValidatorsService,
    private abuseService: AbuseService,
    private notifier: Notifier
  ) {
@@ -51,7 +51,7 @@ export class AccountReportComponent extends FormReactive implements OnInit {
    this.modalTitle = $localize`Report ${this.account.displayName}`
    this.buildForm({
-      reason: this.abuseValidatorsService.ABUSE_REASON,
+      reason: ABUSE_REASON_VALIDATOR,
      predefinedReasons: mapValues(abusePredefinedReasonsMap, r => null)
    })
diff --git a/client/src/app/shared/shared-moderation/report-modals/comment-report.component.ts b/client/src/app/shared/shared-moderation/report-modals/comment-report.component.ts
index d75f4d717..c7395c7b7 100644
--- a/client/src/app/shared/shared-moderation/report-modals/comment-report.component.ts
+++ b/client/src/app/shared/shared-moderation/report-modals/comment-report.component.ts
@@ -1,7 +1,8 @@
 import { mapValues, pickBy } from 'lodash-es'
 import { Component, Input, OnInit, ViewChild } from '@angular/core'
 import { Notifier } from '@app/core'
-import { AbuseValidatorsService, FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { ABUSE_REASON_VALIDATOR } from '@app/shared/form-validators/abuse-validators'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { VideoComment } from '@app/shared/shared-video-comment'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
@@ -28,7 +29,6 @@ export class CommentReportComponent extends FormReactive implements OnInit {
  constructor (
    protected formValidatorService: FormValidatorService,
    private modalService: NgbModal,
-    private abuseValidatorsService: AbuseValidatorsService,
    private abuseService: AbuseService,
    private notifier: Notifier
  ) {
@@ -51,7 +51,7 @@ export class CommentReportComponent extends FormReactive implements OnInit {
    this.modalTitle = $localize`Report comment`
    this.buildForm({
-      reason: this.abuseValidatorsService.ABUSE_REASON,
+      reason: ABUSE_REASON_VALIDATOR,
      predefinedReasons: mapValues(abusePredefinedReasonsMap, r => null)
    })
diff --git a/client/src/app/shared/shared-moderation/report-modals/video-report.component.ts b/client/src/app/shared/shared-moderation/report-modals/video-report.component.ts
index edff6d325..5b06c0bc7 100644
--- a/client/src/app/shared/shared-moderation/report-modals/video-report.component.ts
+++ b/client/src/app/shared/shared-moderation/report-modals/video-report.component.ts
@@ -3,7 +3,8 @@ import { buildVideoLink, buildVideoOrPlaylistEmbed } from 'src/assets/player/uti
 import { Component, Input, OnInit, ViewChild } from '@angular/core'
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
 import { Notifier } from '@app/core'
-import { AbuseValidatorsService, FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { ABUSE_REASON_VALIDATOR } from '@app/shared/form-validators/abuse-validators'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
 import { abusePredefinedReasonsMap } from '@shared/core-utils/abuse'
@@ -30,7 +31,6 @@ export class VideoReportComponent extends FormReactive implements OnInit {
  constructor (
    protected formValidatorService: FormValidatorService,
    private modalService: NgbModal,
-    private abuseValidatorsService: AbuseValidatorsService,
    private abuseService: AbuseService,
    private notifier: Notifier,
    private sanitizer: DomSanitizer
@@ -68,7 +68,7 @@ export class VideoReportComponent extends FormReactive implements OnInit {
  ngOnInit () {
    this.buildForm({
-      reason: this.abuseValidatorsService.ABUSE_REASON,
+      reason: ABUSE_REASON_VALIDATOR,
      predefinedReasons: mapValues(abusePredefinedReasonsMap, r => null),
      timestamp: {
        hasStart: null,
diff --git a/client/src/app/shared/shared-moderation/user-ban-modal.component.ts b/client/src/app/shared/shared-moderation/user-ban-modal.component.ts
index f9a0381c5..afc69a1b8 100644
--- a/client/src/app/shared/shared-moderation/user-ban-modal.component.ts
+++ b/client/src/app/shared/shared-moderation/user-ban-modal.component.ts
@@ -1,9 +1,10 @@
 import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'
 import { Notifier, UserService } from '@app/core'
-import { FormReactive, FormValidatorService, UserValidatorsService } from '@app/shared/shared-forms'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
 import { User } from '@shared/models'
+import { USER_BAN_REASON_VALIDATOR } from '../form-validators/user-validators'
 @Component({
  selector: 'my-user-ban-modal',
@@ -21,15 +22,14 @@ export class UserBanModalComponent extends FormReactive implements OnInit {
    protected formValidatorService: FormValidatorService,
    private modalService: NgbModal,
    private notifier: Notifier,
-    private userService: UserService,
+    private userService: UserService
-    private userValidatorsService: UserValidatorsService
  ) {
    super()
  }
  ngOnInit () {
    this.buildForm({
-      reason: this.userValidatorsService.USER_BAN_REASON
+      reason: USER_BAN_REASON_VALIDATOR
    })
  }
diff --git a/client/src/app/shared/shared-moderation/video-block.component.ts b/client/src/app/shared/shared-moderation/video-block.component.ts
index 2bef9efdd..fb47989dc 100644
--- a/client/src/app/shared/shared-moderation/video-block.component.ts
+++ b/client/src/app/shared/shared-moderation/video-block.component.ts
@@ -1,9 +1,10 @@
 import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
 import { Notifier } from '@app/core'
-import { FormReactive, FormValidatorService, VideoBlockValidatorsService } from '@app/shared/shared-forms'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { Video } from '@app/shared/shared-main'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
+import { VIDEO_BLOCK_REASON_VALIDATOR } from '../form-validators/video-block-validators'
 import { VideoBlockService } from './video-block.service'
 @Component({
@@ -25,7 +26,6 @@ export class VideoBlockComponent extends FormReactive implements OnInit {
  constructor (
    protected formValidatorService: FormValidatorService,
    private modalService: NgbModal,
-    private videoBlockValidatorsService: VideoBlockValidatorsService,
    private videoBlocklistService: VideoBlockService,
    private notifier: Notifier
  ) {
@@ -36,7 +36,7 @@ export class VideoBlockComponent extends FormReactive implements OnInit {
    const defaultValues = { unfederate: 'true' }
    this.buildForm({
-      reason: this.videoBlockValidatorsService.VIDEO_BLOCK_REASON,
+      reason: VIDEO_BLOCK_REASON_VALIDATOR,
      unfederate: null
    }, defaultValues)
  }
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.ts b/client/src/app/shared/shared-share-modal/video-share.component.ts
index 8d8e8a3a5..f57a50770 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.ts
+++ b/client/src/app/shared/shared-share-modal/video-share.component.ts
@@ -37,6 +37,7 @@ export class VideoShareComponent {
  @Input() video: VideoDetails = null
  @Input() videoCaptions: VideoCaption[] = []
  @Input() playlist: VideoPlaylist = null
+  @Input() playlistPosition: number = null
  activeVideoId: TabId = 'url'
  activePlaylistId: TabId = 'url'
@@ -45,8 +46,6 @@ export class VideoShareComponent {
  isAdvancedCustomizationCollapsed = true
  includeVideoInPlaylist = false
-  private playlistPosition: number = null
  constructor (private modalService: NgbModal) { }
  show (currentVideoTimestamp?: number, currentPlaylistPosition?: number) {
@@ -107,7 +106,7 @@ export class VideoShareComponent {
    if (!this.includeVideoInPlaylist) return base
-    return base + '?videoId=' + this.video.uuid
+    return base + '?playlistPosition=' + this.playlistPosition
  }
  notSecure () {
diff --git a/client/src/app/shared/shared-user-settings/user-video-settings.component.ts b/client/src/app/shared/shared-user-settings/user-video-settings.component.ts
index ab77f6f9c..2497e001c 100644
--- a/client/src/app/shared/shared-user-settings/user-video-settings.component.ts
+++ b/client/src/app/shared/shared-user-settings/user-video-settings.component.ts
@@ -95,27 +95,22 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit,
    const autoPlayVideo = this.form.value['autoPlayVideo']
    const autoPlayNextVideo = this.form.value['autoPlayNextVideo']
-    let videoLanguages: string[] = this.form.value['videoLanguages']
+    const videoLanguagesForm = this.form.value['videoLanguages']
-    if (Array.isArray(videoLanguages)) {
+    if (Array.isArray(videoLanguagesForm)) {
-      if (videoLanguages.length > 20) {
+      if (videoLanguagesForm.length > 20) {
        this.notifier.error($localize`Too many languages are enabled. Please enable them all or stay below 20 enabled languages.`)
        return
      }
-      if (videoLanguages.length === 0) {
+      if (videoLanguagesForm.length === 0) {
        this.notifier.error($localize`You need to enable at least 1 video language.`)
        return
      }
-      if (
-        videoLanguages.length === this.languageItems.length ||
-        (videoLanguages.length === 1 && videoLanguages[0] === this.allLanguagesGroup)
-      ) {
-        videoLanguages = null // null means "All"
-      }
    }
+    const videoLanguages = this.getVideoLanguages(videoLanguagesForm)
    let details: UserUpdateMe = {
      nsfwPolicy,
      webTorrentEnabled,
@@ -124,6 +119,10 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit,
      videoLanguages
    }
+    if (videoLanguages) {
+      details = Object.assign(details, videoLanguages)
+    }
    if (onlyKeys) details = pick(details, onlyKeys)
    if (this.authService.isLoggedIn()) {
@@ -141,4 +140,29 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit,
      if (this.notifyOnUpdate) this.notifier.success($localize`Display/Video settings updated.`)
    }
  }
+  private getVideoLanguages (videoLanguages: ItemSelectCheckboxValue[]) {
+    if (!Array.isArray(videoLanguages)) return undefined
+    // null means "All"
+    if (videoLanguages.length === this.languageItems.length) return null
+    if (videoLanguages.length === 1) {
+      const videoLanguage = videoLanguages[0]
+      if (typeof videoLanguage === 'string') {
+        if (videoLanguage === this.allLanguagesGroup) return null
+      } else {
+        if (videoLanguage.group === this.allLanguagesGroup) return null
+      }
+    }
+    return videoLanguages.map(l => {
+      if (typeof l === 'string') return l
+      if (l.group) return l.group
+      return l.id + ''
+    })
+  }
 }
diff --git a/client/src/app/shared/shared-user-subscription/remote-subscribe.component.ts b/client/src/app/shared/shared-user-subscription/remote-subscribe.component.ts
index 286ecac02..b46c91bf8 100644
--- a/client/src/app/shared/shared-user-subscription/remote-subscribe.component.ts
+++ b/client/src/app/shared/shared-user-subscription/remote-subscribe.component.ts
@@ -1,5 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core'
-import { FormReactive, FormValidatorService, UserValidatorsService } from '@app/shared/shared-forms'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { USER_EMAIL_VALIDATOR } from '../form-validators/user-validators'
 @Component({
  selector: 'my-remote-subscribe',
@@ -12,15 +13,14 @@ export class RemoteSubscribeComponent extends FormReactive implements OnInit {
  @Input() showHelp = false
  constructor (
-    protected formValidatorService: FormValidatorService,
+    protected formValidatorService: FormValidatorService
-    private userValidatorsService: UserValidatorsService
  ) {
    super()
  }
  ngOnInit () {
    this.buildForm({
-      text: this.userValidatorsService.USER_EMAIL
+      text: USER_EMAIL_VALIDATOR
    })
  }
diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html
index a40e0699e..37d5017cf 100644
--- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html
+++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.html
@@ -2,58 +2,60 @@
  <div class="header">
    <div class="first-row">
      <div i18n class="title">Save to</div>
-      <div class="options" (click)="displayOptions = !displayOptions">
-        <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
-        <span i18n>Options</span>
-      </div>
    </div>
+  </div>
-    <div class="options-row" *ngIf="displayOptions">
+  <div class="input-container">
-      <div>
+    <input type="text" placeholder="Search playlists" i18n-placeholder [(ngModel)]="videoPlaylistSearch" (ngModelChange)="onVideoPlaylistSearchChanged()" />
-        <my-peertube-checkbox
+  </div>
-          inputName="startAt" [(ngModel)]="timestampOptions.startTimestampEnabled"
-          i18n-labelText labelText="Start at"
-        ></my-peertube-checkbox>
-        <my-timestamp-input
-          [timestamp]="timestampOptions.startTimestamp"
-          [maxTimestamp]="video.duration"
-          [disabled]="!timestampOptions.startTimestampEnabled"
-          [(ngModel)]="timestampOptions.startTimestamp"
-        ></my-timestamp-input>
-      </div>
-      <div>
+  <div class="playlists">
+    <div
+      *ngFor="let playlist of videoPlaylists"
+      class="playlist dropdown-item" [ngClass]="{ 'has-optional-row': playlist.optionalRowDisplayed }"
+    >
+      <div class="primary-row">
        <my-peertube-checkbox
-          inputName="stopAt" [(ngModel)]="timestampOptions.stopTimestampEnabled"
+          [disabled]="isPresentMultipleTimes(playlist) || playlist.optionalRowDisplayed" [inputName]="getPrimaryInputName(playlist)"
-          i18n-labelText labelText="Stop at"
+          [ngModel]="isPrimaryCheckboxChecked(playlist)" [onPushWorkaround]="true"
+          (click)="toggleMainPlaylist($event, playlist)"
        ></my-peertube-checkbox>
-        <my-timestamp-input
+        <label class="display-name" (click)="toggleMainPlaylist($event, playlist)">
-          [timestamp]="timestampOptions.stopTimestamp"
+          {{ playlist.displayName }}
-          [maxTimestamp]="video.duration"
+        </label>
-          [disabled]="!timestampOptions.stopTimestampEnabled"
-          [(ngModel)]="timestampOptions.stopTimestamp"
+        <div class="optional-row-icon" *ngIf="isPrimaryCheckboxChecked(playlist)" (click)="toggleOptionalRow(playlist)">
-        ></my-timestamp-input>
+          <my-global-icon iconName="add" aria-hidden="true"></my-global-icon>
+        </div>
      </div>
-    </div>
-  </div>
-  <div class="input-container">
+      <div class="optional-rows" *ngIf="playlist.optionalRowDisplayed">
-    <input type="text" placeholder="Search playlists" i18n-placeholder [(ngModel)]="videoPlaylistSearch" (ngModelChange)="onVideoPlaylistSearchChanged()" />
+        <div class="labels">
-  </div>
+          <div i18n>Start at</div>
+          <div i18n>Stop at</div>
+        </div>
-  <div class="playlists">
+        <div *ngFor="let element of buildOptionalRowElements(playlist)">
-    <div class="playlist dropdown-item" *ngFor="let playlist of videoPlaylists" (click)="togglePlaylist($event, playlist)">
+          <my-peertube-checkbox
-      <my-peertube-checkbox [inputName]="'in-playlist-' + playlist.id" [(ngModel)]="playlist.inPlaylist" [onPushWorkaround]="true"></my-peertube-checkbox>
+            [inputName]="getOptionalInputName(playlist, element)"
+            [ngModel]="element.enabled" [onPushWorkaround]="true"
+            (click)="toggleOptionalPlaylist($event, playlist, element, startAt.timestamp, stopAt.timestamp)"
+          ></my-peertube-checkbox>
-      <div class="display-name">
+          <my-timestamp-input
-        {{ playlist.displayName }}
+            [maxTimestamp]="video.duration"
+            [(ngModel)]="element.startTimestamp"
+            (inputBlur)="onElementTimestampUpdate(playlist, element)"
+            #startAt
+          ></my-timestamp-input>
-        <div *ngIf="playlist.inPlaylist && (playlist.startTimestamp || playlist.stopTimestamp)" class="timestamp-info">
+          <my-timestamp-input
-          {{ formatTimestamp(playlist) }}
+            [maxTimestamp]="video.duration"
+            [(ngModel)]="element.stopTimestamp"
+            (inputBlur)="onElementTimestampUpdate(playlist, element)"
+            #stopAt
+          ></my-timestamp-input>
        </div>
      </div>
    </div>
diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
index 47baa997b..d2c8804e3 100644
--- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss
@@ -1,12 +1,20 @@
 @import '_variables';
 @import '_mixins';
+$optional-rows-checkbox-width: 34px;
+$timestamp-width: 50px;
+$timestamp-margin-right: 10px;
 .header,
 .dropdown-item,
 .input-container {
  padding: 8px 24px;
 }
+.dropdown-item:active {
+  color: inherit;
+}
 .header {
  min-width: 240px;
  margin-bottom: 10px;
@@ -20,31 +28,6 @@
      font-size: 18px;
      flex-grow: 1;
    }
-    .options {
-      display: flex;
-      align-items: center;
-      font-size: 14px;
-      cursor: pointer;
-      my-global-icon {
-        @include apply-svg-color(#333);
-        width: 16px;
-        height: 23px;
-        margin-right: 3px;
-      }
-    }
-  }
-  .options-row {
-    margin-top: 10px;
-    padding-left: 10px;
-    > div {
-      display: flex;
-      align-items: center;
-    }
  }
 }
@@ -54,8 +37,16 @@
 }
 .playlist {
-  display: inline-flex;
+  padding: 8px 10px 8px 24px;
-  cursor: pointer;
+  &.has-optional-row:hover {
+    background-color: inherit;
+  }
+}
+.primary-row,
+.optional-rows > div {
+  display: flex;
  my-peertube-checkbox {
    margin-right: 10px;
@@ -65,11 +56,58 @@
  .display-name {
    display: flex;
    align-items: flex-end;
+    flex-grow: 1;
+    margin: 0;
+    font-weight: $font-regular;
+    cursor: pointer;
+  }
+  .optional-row-icon {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    cursor: pointer;
+    my-global-icon {
+      @include apply-svg-color(#333);
+      width: 19px;
+      height: 19px;
+      margin-right: 0;
+    }
+  }
+  my-timestamp-input {
+    margin-right: $timestamp-margin-right;
+    ::ng-deep .ui-inputtext {
+      padding: 0;
+      width: $timestamp-width;
+    }
+  }
+}
+.optional-rows {
+  > div {
+    padding: 8px 5px 5px 10px;
+  }
+  my-peertube-checkbox {
+    display: block;
+    width: $optional-rows-checkbox-width;
+    margin-right: 0 !important;
+  }
+  .labels {
+    margin-left: $optional-rows-checkbox-width;
+    font-size: 13px;
+    color: pvar(--greyForegroundColor);
+    padding-top: 5px;
+    padding-bottom: 0;
-    .timestamp-info {
+    div {
-      font-size: 0.9em;
+      margin-right: $timestamp-margin-right;
-      color: pvar(--greyForegroundColor);
+      width: $timestamp-width;
-      margin-left: 5px;
    }
  }
 }
diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts
index 757ffa099..681e5becd 100644
--- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts
+++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.ts
@@ -3,21 +3,34 @@ import { Subject, Subscription } from 'rxjs'
 import { debounceTime, filter } from 'rxjs/operators'
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core'
 import { AuthService, DisableForReuseHook, Notifier } from '@app/core'
-import { FormReactive, FormValidatorService, VideoPlaylistValidatorsService } from '@app/shared/shared-forms'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
-import { Video, VideoExistInPlaylist, VideoPlaylistCreate, VideoPlaylistElementCreate, VideoPlaylistPrivacy } from '@shared/models'
+import {
+  Video,
+  VideoExistInPlaylist,
+  VideoPlaylistCreate,
+  VideoPlaylistElementCreate,
+  VideoPlaylistElementUpdate,
+  VideoPlaylistPrivacy
+} from '@shared/models'
 import { secondsToTime } from '../../../assets/player/utils'
+import { VIDEO_PLAYLIST_DISPLAY_NAME_VALIDATOR } from '../form-validators/video-playlist-validators'
 import { CachedPlaylist, VideoPlaylistService } from './video-playlist.service'
 const logger = debug('peertube:playlists:VideoAddToPlaylistComponent')
+type PlaylistElement = {
+  enabled: boolean
+  playlistElementId?: number
+  startTimestamp?: number
+  stopTimestamp?: number
+}
 type PlaylistSummary = {
  id: number
-  inPlaylist: boolean
  displayName: string
+  optionalRowDisplayed: boolean
-  playlistElementId?: number
+  elements: PlaylistElement[]
-  startTimestamp?: number
-  stopTimestamp?: number
 }
 @Component({
@@ -32,16 +45,11 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
  @Input() lazyLoad = false
  isNewPlaylistBlockOpened = false
  videoPlaylistSearch: string
  videoPlaylistSearchChanged = new Subject<string>()
  videoPlaylists: PlaylistSummary[] = []
-  timestampOptions: {
-    startTimestampEnabled: boolean
-    startTimestamp: number
-    stopTimestampEnabled: boolean
-    stopTimestamp: number
-  }
-  displayOptions = false
  private disabled = false
@@ -53,7 +61,6 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
    private authService: AuthService,
    private notifier: Notifier,
    private videoPlaylistService: VideoPlaylistService,
-    private videoPlaylistValidatorsService: VideoPlaylistValidatorsService,
    private cd: ChangeDetectorRef
  ) {
    super()
@@ -65,7 +72,7 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
  ngOnInit () {
    this.buildForm({
-      displayName: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DISPLAY_NAME
+      displayName: VIDEO_PLAYLIST_DISPLAY_NAME_VALIDATOR
    })
    this.videoPlaylistService.listenToMyAccountPlaylistsChange()
@@ -106,7 +113,6 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
    this.videoPlaylists = []
    this.videoPlaylistSearch = undefined
-    this.resetOptions(true)
    this.load()
    this.cd.markForCheck()
@@ -115,7 +121,7 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
  load () {
    logger('Loading component')
-    this.listenToPlaylistChanges()
+    this.listenToVideoPlaylistChange()
    this.videoPlaylistService.listMyPlaylistWithCache(this.user, this.videoPlaylistSearch)
        .subscribe(playlistsResult => {
@@ -128,7 +134,6 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
  openChange (opened: boolean) {
    if (opened === false) {
      this.isNewPlaylistBlockOpened = false
-      this.displayOptions = false
    }
  }
@@ -138,17 +143,49 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
    this.isNewPlaylistBlockOpened = true
  }
-  togglePlaylist (event: Event, playlist: PlaylistSummary) {
+  toggleMainPlaylist (e: Event, playlist: PlaylistSummary) {
-    event.preventDefault()
+    e.preventDefault()
+    if (this.isPresentMultipleTimes(playlist) || playlist.optionalRowDisplayed) return
-    if (playlist.inPlaylist === true) {
+    if (playlist.elements.length === 0) {
-      this.removeVideoFromPlaylist(playlist)
+      const element: PlaylistElement = {
+        enabled: true,
+        playlistElementId: undefined,
+        startTimestamp: 0,
+        stopTimestamp: this.video.duration
+      }
+      this.addVideoInPlaylist(playlist, element)
    } else {
-      this.addVideoInPlaylist(playlist)
+      this.removeVideoFromPlaylist(playlist, playlist.elements[0].playlistElementId)
+      playlist.elements = []
    }
-    playlist.inPlaylist = !playlist.inPlaylist
+    this.cd.markForCheck()
-    this.resetOptions()
+  }
+  toggleOptionalPlaylist (e: Event, playlist: PlaylistSummary, element: PlaylistElement, startTimestamp: number, stopTimestamp: number) {
+    e.preventDefault()
+    if (element.enabled) {
+      this.removeVideoFromPlaylist(playlist, element.playlistElementId)
+      element.enabled = false
+      // Hide optional rows pane when the user unchecked all the playlists
+      if (this.isPrimaryCheckboxChecked(playlist) === false) {
+        playlist.optionalRowDisplayed = false
+      }
+    } else {
+      const element: PlaylistElement = {
+        enabled: true,
+        playlistElementId: undefined,
+        startTimestamp,
+        stopTimestamp
+      }
+      this.addVideoInPlaylist(playlist, element)
+    }
    this.cd.markForCheck()
  }
@@ -172,34 +209,99 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
    )
  }
-  resetOptions (resetTimestamp = false) {
+  onVideoPlaylistSearchChanged () {
-    this.displayOptions = false
+    this.videoPlaylistSearchChanged.next()
+  }
-    this.timestampOptions = {} as any
+  isPrimaryCheckboxChecked (playlist: PlaylistSummary) {
-    this.timestampOptions.startTimestampEnabled = false
+    return playlist.elements.filter(e => e.enabled)
-    this.timestampOptions.stopTimestampEnabled = false
+                            .length !== 0
+  }
-    if (resetTimestamp) {
+  toggleOptionalRow (playlist: PlaylistSummary) {
-      this.timestampOptions.startTimestamp = 0
+    playlist.optionalRowDisplayed = !playlist.optionalRowDisplayed
-      this.timestampOptions.stopTimestamp = this.video.duration
-    }
+    this.cd.markForCheck()
  }
-  formatTimestamp (playlist: PlaylistSummary) {
+  getPrimaryInputName (playlist: PlaylistSummary) {
-    const start = playlist.startTimestamp ? secondsToTime(playlist.startTimestamp) : ''
+    return 'in-playlist-primary-' + playlist.id
-    const stop = playlist.stopTimestamp ? secondsToTime(playlist.stopTimestamp) : ''
+  }
-    return `(${start}-${stop})`
+  getOptionalInputName (playlist: PlaylistSummary, element?: PlaylistElement) {
+    const suffix = element
+      ? '-' + element.playlistElementId
+      : ''
+    return 'in-playlist-optional-' + playlist.id + suffix
  }
-  onVideoPlaylistSearchChanged () {
+  buildOptionalRowElements (playlist: PlaylistSummary) {
-    this.videoPlaylistSearchChanged.next()
+    const elements = playlist.elements
+    const lastElement = elements.length === 0
+      ? undefined
+      : elements[elements.length - 1]
+    // Build an empty last element
+    if (!lastElement || lastElement.enabled === true) {
+      elements.push({
+        enabled: false,
+        startTimestamp: 0,
+        stopTimestamp: this.video.duration
+      })
+    }
+    return elements
+  }
+  isPresentMultipleTimes (playlist: PlaylistSummary) {
+    return playlist.elements.filter(e => e.enabled === true).length > 1
+  }
+  onElementTimestampUpdate (playlist: PlaylistSummary, element: PlaylistElement) {
+    if (!element.playlistElementId || element.enabled === false) return
+    const body: VideoPlaylistElementUpdate = {
+      startTimestamp: element.startTimestamp,
+      stopTimestamp: element.stopTimestamp
+    }
+    this.videoPlaylistService.updateVideoOfPlaylist(playlist.id, element.playlistElementId, body, this.video.id)
+        .subscribe(
+          () => {
+            this.notifier.success($localize`Timestamps updated`)
+          },
+          err => {
+            this.notifier.error(err.message)
+          },
+          () => this.cd.markForCheck()
+        )
  }
-  private removeVideoFromPlaylist (playlist: PlaylistSummary) {
+  private isOptionalRowDisplayed (playlist: PlaylistSummary) {
-    if (!playlist.playlistElementId) return
+    const elements = playlist.elements.filter(e => e.enabled)
+    if (elements.length > 1) return true
-    this.videoPlaylistService.removeVideoFromPlaylist(playlist.id, playlist.playlistElementId, this.video.id)
+    if (elements.length === 1) {
+      const element = elements[0]
+      if (
+        (element.startTimestamp && element.startTimestamp !== 0) ||
+        (element.stopTimestamp && element.stopTimestamp !== this.video.duration)
+      ) {
+        return true
+      }
+    }
+    return false
+  }
+  private removeVideoFromPlaylist (playlist: PlaylistSummary, elementId: number) {
+    this.videoPlaylistService.removeVideoFromPlaylist(playlist.id, elementId, this.video.id)
        .subscribe(
          () => {
            this.notifier.success($localize`Video removed from ${playlist.displayName}`)
@@ -213,7 +315,7 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
        )
  }
-  private listenToPlaylistChanges () {
+  private listenToVideoPlaylistChange () {
    this.unsubscribePlaylistChanges()
    this.listenToPlaylistChangeSub = this.videoPlaylistService.listenToVideoPlaylistChange(this.video.id)
@@ -231,18 +333,30 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
  private rebuildPlaylists (existResult: VideoExistInPlaylist[]) {
    logger('Got existing results for %d.', this.video.id, existResult)
+    const oldPlaylists = this.videoPlaylists
    this.videoPlaylists = []
    for (const playlist of this.playlistsData) {
-      const existingPlaylist = existResult.find(p => p.playlistId === playlist.id)
+      const existingPlaylists = existResult.filter(p => p.playlistId === playlist.id)
-      this.videoPlaylists.push({
+      const playlistSummary = {
        id: playlist.id,
+        optionalRowDisplayed: false,
        displayName: playlist.displayName,
-        inPlaylist: !!existingPlaylist,
+        elements: existingPlaylists.map(e => ({
-        playlistElementId: existingPlaylist ? existingPlaylist.playlistElementId : undefined,
+          enabled: true,
-        startTimestamp: existingPlaylist ? existingPlaylist.startTimestamp : undefined,
+          playlistElementId: e.playlistElementId,
-        stopTimestamp: existingPlaylist ? existingPlaylist.stopTimestamp : undefined
+          startTimestamp: e.startTimestamp || 0,
-      })
+          stopTimestamp: e.stopTimestamp || this.video.duration
+        }))
+      }
+      const oldPlaylist = oldPlaylists.find(p => p.id === playlist.id)
+      playlistSummary.optionalRowDisplayed = oldPlaylist
+        ? oldPlaylist.optionalRowDisplayed
+        : this.isOptionalRowDisplayed(playlistSummary)
+      this.videoPlaylists.push(playlistSummary)
    }
    logger('Rebuilt playlist state for video %d.', this.video.id, this.videoPlaylists)
@@ -250,20 +364,22 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
    this.cd.markForCheck()
  }
-  private addVideoInPlaylist (playlist: PlaylistSummary) {
+  private addVideoInPlaylist (playlist: PlaylistSummary, element: PlaylistElement) {
    const body: VideoPlaylistElementCreate = { videoId: this.video.id }
-    if (this.timestampOptions.startTimestampEnabled) body.startTimestamp = this.timestampOptions.startTimestamp
+    if (element.startTimestamp) body.startTimestamp = element.startTimestamp
-    if (this.timestampOptions.stopTimestampEnabled) body.stopTimestamp = this.timestampOptions.stopTimestamp
+    if (element.stopTimestamp && element.stopTimestamp !== this.video.duration) body.stopTimestamp = element.stopTimestamp
    this.videoPlaylistService.addVideoInPlaylist(playlist.id, body)
      .subscribe(
-        () => {
+        res => {
          const message = body.startTimestamp || body.stopTimestamp
-            ? $localize`Video added in ${playlist.displayName} at timestamps ${this.formatTimestamp(playlist)}`
+            ? $localize`Video added in ${playlist.displayName} at timestamps ${this.formatTimestamp(element)}`
            : $localize`Video added in ${playlist.displayName}`
          this.notifier.success(message)
+          if (element) element.playlistElementId = res.videoPlaylistElement.id
        },
        err => {
@@ -273,4 +389,11 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit,
        () => this.cd.markForCheck()
      )
  }
+  private formatTimestamp (element: PlaylistElement) {
+    const start = element.startTimestamp ? secondsToTime(element.startTimestamp) : ''
+    const stop = element.stopTimestamp ? secondsToTime(element.stopTimestamp) : ''
+    return `(${start}-${stop})`
+  }
 }
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
index afd775b25..082a5d9b2 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
@@ -22,12 +22,16 @@ my-video-thumbnail,
 }
 .video {
-  display: flex;
+  display: grid;
-  align-items: center;
+  grid-template-columns: 1fr auto;
  background-color: pvar(--mainBackgroundColor);
  padding: 10px;
  border-bottom: 1px solid $separator-border-color;
+  .more {
+    display: flex;
+  }
  &:hover {
    background-color: rgba(0, 0, 0, 0.05);
@@ -164,6 +168,7 @@ my-video-thumbnail,
      my-edit-button {
        display: inline-flex;
        height: max-content;
+        margin: auto;
      }
    }
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.ts b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.ts
index 5879c4978..7c083ae26 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.ts
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.ts
@@ -78,7 +78,7 @@ export class VideoPlaylistElementMiniatureComponent implements OnInit {
    if (!this.playlistElement || !this.playlistElement.video) return {}
    return {
-      videoId: this.playlistElement.video.uuid,
+      playlistPosition: this.playlistElement.position,
      start: this.playlistElement.startTimestamp,
      stop: this.playlistElement.stopTimestamp,
      resume: true
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist.service.ts b/client/src/app/shared/shared-video-playlist/video-playlist.service.ts
index cc3d04b9e..1b87e0b2a 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist.service.ts
+++ b/client/src/app/shared/shared-video-playlist/video-playlist.service.ts
@@ -1,7 +1,7 @@
 import * as debug from 'debug'
 import { uniq } from 'lodash-es'
 import { asyncScheduler, merge, Observable, of, ReplaySubject, Subject } from 'rxjs'
-import { bufferTime, catchError, filter, map, observeOn, share, switchMap, tap } from 'rxjs/operators'
+import { bufferTime, catchError, filter, map, observeOn, share, switchMap, tap, distinctUntilChanged } from 'rxjs/operators'
 import { HttpClient, HttpParams } from '@angular/common/http'
 import { Injectable, NgZone } from '@angular/core'
 import { AuthUser, ComponentPaginationLight, RestExtractor, RestService, ServerService } from '@app/core'
@@ -53,6 +53,7 @@ export class VideoPlaylistService {
  ) {
    this.videoExistsInPlaylistObservable = merge(
      this.videoExistsInPlaylistNotifier.pipe(
+        distinctUntilChanged(),
        // We leave Angular zone so Protractor does not get stuck
        bufferTime(500, leaveZone(this.ngZone, asyncScheduler)),
        filter(videoIds => videoIds.length !== 0),
@@ -215,10 +216,13 @@ export class VideoPlaylistService {
                 map(this.restExtractor.extractDataBool),
                 tap(() => {
                   const existsResult = this.videoExistsCache[videoId]
-                   const elem = existsResult.find(e => e.playlistElementId === playlistElementId)
-                   elem.startTimestamp = body.startTimestamp
+                   if (existsResult) {
-                   elem.stopTimestamp = body.stopTimestamp
+                     const elem = existsResult.find(e => e.playlistElementId === playlistElementId)
+                     elem.startTimestamp = body.startTimestamp
+                     elem.stopTimestamp = body.stopTimestamp
+                   }
                   this.runPlaylistCheck(videoId)
                 }),
@@ -233,7 +237,11 @@ export class VideoPlaylistService {
                 tap(() => {
                   if (!videoId) return
-                   this.videoExistsCache[videoId] = this.videoExistsCache[videoId].filter(e => e.playlistElementId !== playlistElementId)
+                   if (this.videoExistsCache[videoId]) {
+                     this.videoExistsCache[videoId] = this.videoExistsCache[videoId]
+                       .filter(e => e.playlistElementId !== playlistElementId)
+                   }
                   this.runPlaylistCheck(videoId)
                 }),
                 catchError(err => this.restExtractor.handleError(err))