159 files changed, 1724 insertions, 463 deletions
diff --git a/client/src/app/+about/about-instance/about-instance.component.html b/client/src/app/+about/about-instance/about-instance.component.html
index fc5736aba..b712d0044 100644
--- a/client/src/app/+about/about-instance/about-instance.component.html
+++ b/client/src/app/+about/about-instance/about-instance.component.html
@@ -20,7 +20,7 @@
    </div>
    <div i18n class="middle-title" *ngIf="html.administrator || maintenanceLifetime || businessModel">
-      Administrators & sustainability
+      ADMINISTRATORS & SUSTAINABILITY
    </div>
    <div class="block administrator" *ngIf="html.administrator">
@@ -48,7 +48,7 @@
    </div>
    <div i18n class="middle-title" *ngIf="html.description">
-      Information
+      INFORMATION
    </div>
    <div class="block description">
@@ -58,7 +58,7 @@
    </div>
    <div i18n class="middle-title" *ngIf="html.moderationInformation || html.codeOfConduct || html.terms">
-      Moderation
+      MODERATION
    </div>
    <div class="block moderation-information" *ngIf="html.moderationInformation">
@@ -80,7 +80,7 @@
    </div>
    <div i18n class="middle-title" *ngIf="html.hardwareInformation">
-      Other information
+      OTHER INFORMATION
    </div>
    <div class="block hardware-information" *ngIf="html.hardwareInformation">
@@ -97,7 +97,7 @@
  <div class="col">
    <div i18n class="middle-title">
-      Statistics
+      STATISTICS
    </div>
    <my-instance-statistics></my-instance-statistics>
  </div>
diff --git a/client/src/app/+about/about-instance/about-instance.component.ts b/client/src/app/+about/about-instance/about-instance.component.ts
index 87beb13da..c8c156105 100644
--- a/client/src/app/+about/about-instance/about-instance.component.ts
+++ b/client/src/app/+about/about-instance/about-instance.component.ts
@@ -1,12 +1,10 @@
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { Notifier, ServerService } from '@app/core'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component'
 import { InstanceService } from '@app/shared/instance/instance.service'
-import { MarkdownService } from '@app/shared/renderer'
-import { forkJoin } from 'rxjs'
-import { map, switchMap } from 'rxjs/operators'
 import { ServerConfig } from '@shared/models'
+import { ActivatedRoute } from '@angular/router'
+import { ResolverData } from './about-instance.resolver'
 @Component({
  selector: 'my-about-instance',
@@ -37,11 +35,10 @@ export class AboutInstanceComponent implements OnInit {
  serverConfig: ServerConfig
  constructor (
+    private route: ActivatedRoute,
    private notifier: Notifier,
    private serverService: ServerService,
-    private instanceService: InstanceService,
+    private instanceService: InstanceService
-    private markdownService: MarkdownService,
-    private i18n: I18n
  ) {}
  get instanceName () {
@@ -56,35 +53,23 @@ export class AboutInstanceComponent implements OnInit {
    return this.serverConfig.instance.isNSFW
  }
-  ngOnInit () {
+  async ngOnInit () {
    this.serverConfig = this.serverService.getTmpConfig()
    this.serverService.getConfig()
        .subscribe(config => this.serverConfig = config)
-    this.instanceService.getAbout()
+    const { about, languages, categories }: ResolverData = this.route.snapshot.data.instanceData
-        .pipe(
-          switchMap(about => {
+    this.languages = languages
-            return forkJoin([
+    this.categories = categories
-              this.instanceService.buildTranslatedLanguages(about),
-              this.instanceService.buildTranslatedCategories(about)
+    this.shortDescription = about.instance.shortDescription
-            ]).pipe(map(([ languages, categories ]) => ({ about, languages, categories })))
-          })
+    this.creationReason = about.instance.creationReason
-        ).subscribe(
+    this.maintenanceLifetime = about.instance.maintenanceLifetime
-      async ({ about, languages, categories }) => {
+    this.businessModel = about.instance.businessModel
-        this.languages = languages
-        this.categories = categories
+    this.html = await this.instanceService.buildHtml(about)
-        this.shortDescription = about.instance.shortDescription
-        this.creationReason = about.instance.creationReason
-        this.maintenanceLifetime = about.instance.maintenanceLifetime
-        this.businessModel = about.instance.businessModel
-        this.html = await this.instanceService.buildHtml(about)
-      },
-      () => this.notifier.error(this.i18n('Cannot get about information from server'))
-    )
  }
  openContactModal () {
diff --git a/client/src/app/+about/about-instance/about-instance.resolver.ts b/client/src/app/+about/about-instance/about-instance.resolver.ts
new file mode 100644
index 000000000..94c6abe5a
--- /dev/null
+++ b/client/src/app/+about/about-instance/about-instance.resolver.ts
@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core'
+import { ActivatedRouteSnapshot, Resolve } from '@angular/router'
+import { map, switchMap } from 'rxjs/operators'
+import { forkJoin } from 'rxjs'
+import { InstanceService } from '@app/shared/instance/instance.service'
+import { About } from '@shared/models/server'
+export type ResolverData = { about: About, languages: string[], categories: string[] }
+@Injectable()
+export class AboutInstanceResolver implements Resolve<any> {
+  constructor (
+    private instanceService: InstanceService
+  ) {}
+  resolve (route: ActivatedRouteSnapshot) {
+    return this.instanceService.getAbout()
+               .pipe(
+                 switchMap(about => {
+                   return forkJoin([
+                     this.instanceService.buildTranslatedLanguages(about),
+                     this.instanceService.buildTranslatedCategories(about)
+                   ]).pipe(map(([ languages, categories ]) => ({ about, languages, categories })))
+                 })
+               )
+  }
+}
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 2ed41e741..d5e146b82 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
@@ -51,7 +51,7 @@ export class ContactAdminModalComponent extends FormReactive implements OnInit {
  }
  show () {
-    this.openedModal = this.modalService.open(this.modal, { keyboard: false })
+    this.openedModal = this.modalService.open(this.modal, { centered: true, keyboard: false })
  }
  hide () {
diff --git a/client/src/app/+about/about-routing.module.ts b/client/src/app/+about/about-routing.module.ts
index 33e5070cb..91ccb846f 100644
--- a/client/src/app/+about/about-routing.module.ts
+++ b/client/src/app/+about/about-routing.module.ts
@@ -5,6 +5,7 @@ import { AboutComponent } from './about.component'
 import { AboutInstanceComponent } from '@app/+about/about-instance/about-instance.component'
 import { AboutPeertubeComponent } from '@app/+about/about-peertube/about-peertube.component'
 import { AboutFollowsComponent } from '@app/+about/about-follows/about-follows.component'
+import { AboutInstanceResolver } from '@app/+about/about-instance/about-instance.resolver'
 const aboutRoutes: Routes = [
  {
@@ -24,6 +25,9 @@ const aboutRoutes: Routes = [
          meta: {
            title: 'About this instance'
          }
+        },
+        resolve: {
+          instanceData: AboutInstanceResolver
        }
      },
      {
diff --git a/client/src/app/+about/about.module.ts b/client/src/app/+about/about.module.ts
index 14bf76e55..84d697540 100644
--- a/client/src/app/+about/about.module.ts
+++ b/client/src/app/+about/about.module.ts
@@ -7,6 +7,7 @@ import { AboutPeertubeComponent } from '@app/+about/about-peertube/about-peertub
 import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component'
 import { AboutFollowsComponent } from '@app/+about/about-follows/about-follows.component'
 import { AboutPeertubeContributorsComponent } from '@app/+about/about-peertube/about-peertube-contributors.component'
+import { AboutInstanceResolver } from '@app/+about/about-instance/about-instance.resolver'
 @NgModule({
  imports: [
@@ -28,6 +29,7 @@ import { AboutPeertubeContributorsComponent } from '@app/+about/about-peertube/a
  ],
  providers: [
+    AboutInstanceResolver
  ]
 })
 export class AboutModule { }
diff --git a/client/src/app/+accounts/account-about/account-about.component.html b/client/src/app/+accounts/account-about/account-about.component.html
index f857e5a52..3ae11b49c 100644
--- a/client/src/app/+accounts/account-about/account-about.component.html
+++ b/client/src/app/+accounts/account-about/account-about.component.html
@@ -1,11 +1,11 @@
 <div *ngIf="account" class="row">
  <div class="block col-md-6 col-sm-12">
-    <div i18n class="small-title">Description</div>
+    <div i18n class="small-title">DESCRIPTION</div>
    <div class="content" [innerHtml]="getAccountDescription()"></div>
  </div>
  <div class="block col-md-6 col-sm-12">
-    <div i18n class="small-title">Stats</div>
+    <div i18n class="small-title">STATS</div>
    <div i18n class="content">Joined {{ account.createdAt | date }}</div>
  </div>
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
index 781156840..8f1ff21a5 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html
@@ -25,7 +25,7 @@
      </div>
      <a *ngIf="getVideosOf(videoChannel).length !== 0" class="show-more" i18n [routerLink]="getVideoChannelLink(videoChannel)">
-        Show this channel
+        SHOW THIS CHANNEL
      </a>
    </div>
  </div>
diff --git a/client/src/app/+accounts/accounts.component.html b/client/src/app/+accounts/accounts.component.html
index 85f7dd30c..6a76393b9 100644
--- a/client/src/app/+accounts/accounts.component.html
+++ b/client/src/app/+accounts/accounts.component.html
@@ -7,14 +7,13 @@
      <div class="actor-info">
        <div class="actor-names">
          <div class="actor-display-name">{{ account.displayName }}</div>
-          <div class="actor-name">{{ account.nameWithHost }}
+          <div class="actor-name">
+            <span>{{ account.nameWithHost }}</span>
-          <button ngxClipboard [cbContent]="account.nameWithHostForced" (click)="activateCopiedMessage()"
+            <button [cdkCopyToClipboard]="account.nameWithHostForced" (click)="activateCopiedMessage()"
-                  class="btn btn-outline-secondary btn-sm copy-button"
+                    class="btn btn-outline-secondary btn-sm copy-button"
-          >
+            >
-            <span class="glyphicon glyphicon-copy"></span>
+              <span class="glyphicon glyphicon-copy"></span>
-          </button>
+            </button>
          </div>
          <span *ngIf="accountUser?.blocked" [ngbTooltip]="accountUser.blockedReason" class="badge badge-danger" i18n>Banned</span>
          <span *ngIf="account.mutedByUser" class="badge badge-danger" i18n>Muted</span>
@@ -38,12 +37,12 @@
      </div>
    </div>
-    <div class="links">
+    <div class="links w-100">
-      <a i18n routerLink="video-channels" routerLinkActive="active" class="title-page">Video channels</a>
+      <ng-template #linkTemplate let-item="item">
+        <a [routerLink]="item.routerLink" routerLinkActive="active" class="title-page">{{ item.label }}</a>
-      <a i18n routerLink="videos" routerLinkActive="active" class="title-page">Videos</a>
+      </ng-template>
-      <a i18n routerLink="about" routerLinkActive="active" class="title-page">About</a>
+      <list-overflow [items]="links" [itemTemplate]="linkTemplate"></list-overflow>
    </div>
  </div>
diff --git a/client/src/app/+accounts/accounts.component.ts b/client/src/app/+accounts/accounts.component.ts
index ad611f221..061eb953a 100644
--- a/client/src/app/+accounts/accounts.component.ts
+++ b/client/src/app/+accounts/accounts.component.ts
@@ -10,6 +10,7 @@ import { User, UserRight } from '../../../../shared'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { VideoChannelService } from '@app/shared/video-channel/video-channel.service'
 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
+import { ListOverflowItem } from '@app/shared/misc/list-overflow.component'
 @Component({
  templateUrl: './accounts.component.html',
@@ -19,6 +20,7 @@ export class AccountsComponent implements OnInit, OnDestroy {
  account: Account
  accountUser: User
  videoChannels: VideoChannel[] = []
+  links: ListOverflowItem[] = []
  isAccountManageable = false
  accountFollowerTitle = ''
@@ -70,6 +72,12 @@ export class AccountsComponent implements OnInit, OnDestroy {
                          err => this.notifier.error(err.message)
                        )
+    this.links = [
+      { label: this.i18n('VIDEO CHANNELS'), routerLink: 'video-channels' },
+      { label: this.i18n('VIDEOS'), routerLink: 'videos' },
+      { label: this.i18n('ABOUT'), routerLink: 'about' }
+    ]
  }
  ngOnDestroy () {
@@ -96,7 +104,7 @@ export class AccountsComponent implements OnInit, OnDestroy {
  }
  subscribersDisplayFor (count: number) {
-    return this.i18n(`{count, plural, =1 {1 subscriber} other {${count} subscribers}}`, { count })
+    return this.i18n('{count, plural, =1 {1 subscriber} other {{{count}} subscribers}}', { count })
  }
  private getUserIfNeeded (account: Account) {
diff --git a/client/src/app/+admin/admin.component.html b/client/src/app/+admin/admin.component.html
index 9a3d90c18..6c98fe453 100644
--- a/client/src/app/+admin/admin.component.html
+++ b/client/src/app/+admin/admin.component.html
@@ -1,28 +1,10 @@
 <div class="row">
  <div class="sub-menu">
-    <a i18n *ngIf="hasUsersRight()" routerLink="/admin/users" routerLinkActive="active" class="title-page">
+    <ng-template #linkTemplate let-item="item">
-      Users
+      <a [routerLink]="item.routerLink" routerLinkActive="active" class="title-page">{{ item.label }}</a>
-    </a>
+    </ng-template>
-    <a i18n *ngIf="hasServerFollowRight()" routerLink="/admin/follows" routerLinkActive="active" class="title-page">
+    <list-overflow [items]="items" [itemTemplate]="linkTemplate"></list-overflow>
-      Manage follows
-    </a>
-    <a i18n *ngIf="hasVideoAbusesRight() || hasVideoBlacklistRight()" routerLink="/admin/moderation" routerLinkActive="active" class="title-page">
-      Moderation
-    </a>
-    <a i18n *ngIf="hasConfigRight()" routerLink="/admin/config" routerLinkActive="active" class="title-page">
-      Configuration
-    </a>
-    <a i18n *ngIf="hasPluginsRight()" routerLink="/admin/plugins" routerLinkActive="active" class="title-page">
-      Plugins/Themes
-    </a>
-    <a i18n *ngIf="hasJobsRight() || hasLogsRight() || hasDebugRight()" routerLink="/admin/system" routerLinkActive="active" class="title-page">
-      System
-    </a>
  </div>
  <div class="margin-content">
diff --git a/client/src/app/+admin/admin.component.ts b/client/src/app/+admin/admin.component.ts
index b23999d40..9662522dc 100644
--- a/client/src/app/+admin/admin.component.ts
+++ b/client/src/app/+admin/admin.component.ts
@@ -1,12 +1,28 @@
-import { Component } from '@angular/core'
+import { Component, OnInit } from '@angular/core'
 import { UserRight } from '../../../../shared'
 import { AuthService } from '../core/auth/auth.service'
+import { ListOverflowItem } from '@app/shared/misc/list-overflow.component'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 @Component({
  templateUrl: './admin.component.html'
 })
-export class AdminComponent {
+export class AdminComponent implements OnInit {
-  constructor (private auth: AuthService) {}
+  items: ListOverflowItem[] = []
+  constructor (
+    private auth: AuthService,
+    private i18n: I18n
+  ) {}
+  ngOnInit () {
+    if (this.hasUsersRight()) this.items.push({ label: this.i18n('Users'), routerLink: '/admin/users' })
+    if (this.hasServerFollowRight()) this.items.push({ label: this.i18n('Follows & redundancies'), routerLink: '/admin/follows' })
+    if (this.hasVideoAbusesRight() || this.hasVideoBlacklistRight()) this.items.push({ label: this.i18n('Moderation'), routerLink: '/admin/moderation' })
+    if (this.hasConfigRight()) this.items.push({ label: this.i18n('Configuration'), routerLink: '/admin/config' })
+    if (this.hasPluginsRight()) this.items.push({ label: this.i18n('Plugins/Themes'), routerLink: '/admin/plugins' })
+    if (this.hasJobsRight() || this.hasLogsRight() || this.hasDebugRight()) this.items.push({ label: this.i18n('System'), routerLink: '/admin/system' })
+  }
  hasUsersRight () {
    return this.auth.getUser().hasRight(UserRight.MANAGE_USERS)
diff --git a/client/src/app/+admin/admin.module.ts b/client/src/app/+admin/admin.module.ts
index 9c56b5750..fdbe70314 100644
--- a/client/src/app/+admin/admin.module.ts
+++ b/client/src/app/+admin/admin.module.ts
@@ -5,7 +5,7 @@ import { TableModule } from 'primeng/table'
 import { SharedModule } from '../shared'
 import { AdminRoutingModule } from './admin-routing.module'
 import { AdminComponent } from './admin.component'
-import { FollowersListComponent, FollowingAddComponent, FollowsComponent } from './follows'
+import { FollowersListComponent, FollowingAddComponent, FollowsComponent, VideoRedundanciesListComponent } from './follows'
 import { FollowingListComponent } from './follows/following-list/following-list.component'
 import { UserCreateComponent, UserListComponent, UserPasswordComponent, UsersComponent, UserUpdateComponent } from './users'
 import {
@@ -16,7 +16,6 @@ import {
 } from './moderation'
 import { ModerationComponent } from '@app/+admin/moderation/moderation.component'
 import { RedundancyCheckboxComponent } from '@app/+admin/follows/shared/redundancy-checkbox.component'
-import { RedundancyService } from '@app/+admin/follows/shared/redundancy.service'
 import { InstanceAccountBlocklistComponent, InstanceServerBlocklistComponent } from '@app/+admin/moderation/instance-blocklist'
 import { JobsComponent } from '@app/+admin/system/jobs/jobs.component'
 import { JobService, LogsComponent, LogsService, SystemComponent } from '@app/+admin/system'
@@ -27,13 +26,18 @@ import { PluginSearchComponent } from '@app/+admin/plugins/plugin-search/plugin-
 import { PluginShowInstalledComponent } from '@app/+admin/plugins/plugin-show-installed/plugin-show-installed.component'
 import { SelectButtonModule } from 'primeng/selectbutton'
 import { PluginApiService } from '@app/+admin/plugins/shared/plugin-api.service'
+import { VideoRedundancyInformationComponent } from '@app/+admin/follows/video-redundancies-list/video-redundancy-information.component'
+import { ChartModule } from 'primeng/chart'
 @NgModule({
  imports: [
    AdminRoutingModule,
+    SharedModule,
    TableModule,
    SelectButtonModule,
-    SharedModule
+    ChartModule
  ],
  declarations: [
@@ -44,6 +48,8 @@ import { PluginApiService } from '@app/+admin/plugins/shared/plugin-api.service'
    FollowersListComponent,
    FollowingListComponent,
    RedundancyCheckboxComponent,
+    VideoRedundanciesListComponent,
+    VideoRedundancyInformationComponent,
    UsersComponent,
    UserCreateComponent,
@@ -78,7 +84,6 @@ import { PluginApiService } from '@app/+admin/plugins/shared/plugin-api.service'
  ],
  providers: [
-    RedundancyService,
    JobService,
    LogsService,
    DebugService,
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
index 915d60090..2cf0e5fd9 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
@@ -7,7 +7,7 @@
        <ng-container formGroupName="instance">
-          <div i18n class="inner-form-title">Instance</div>
+          <div i18n class="inner-form-title">INSTANCE</div>
          <div class="form-group">
            <label i18n for="instanceName">Name</label>
@@ -41,7 +41,7 @@
            <div>
              <p-multiSelect
-                inputId="instanceCategories" [options]="categoryItems" formControlName="categories" showToggleAll="false"
+                inputId="instanceCategories" [options]="categoryItems" formControlName="categories" [showToggleAll]="false"
                [defaultLabel]="getDefaultCategoryLabel()" [selectedItemsLabel]="getSelectedCategoryLabel()"
                emptyFilterMessage="No results found" i18n-emptyFilterMessage
              ></p-multiSelect>
@@ -53,14 +53,14 @@
            <div>
              <p-multiSelect
-                inputId="instanceLanguages" [options]="languageItems" formControlName="languages" showToggleAll="false"
+                inputId="instanceLanguages" [options]="languageItems" formControlName="languages" [showToggleAll]="false"
                [defaultLabel]="getDefaultLanguageLabel()" [selectedItemsLabel]="getSelectedLanguageLabel()"
                emptyFilterMessage="No results found" i18n-emptyFilterMessage
              ></p-multiSelect>
            </div>
          </div>
-          <div i18n class="inner-form-title">Moderation & NSFW</div>
+          <div i18n class="inner-form-title">MODERATION & NSFW</div>
          <div class="form-group">
            <my-peertube-checkbox inputName="instanceIsNSFW" formControlName="isNSFW">
@@ -127,7 +127,7 @@
            <div *ngIf="formErrors.instance.moderationInformation" class="form-error">{{ formErrors.instance.moderationInformation }}</div>
          </div>
-          <div i18n class="inner-form-title">You and your instance</div>
+          <div i18n class="inner-form-title">YOU AND YOUR INSTANCE</div>
          <div class="form-group">
            <label i18n for="instanceAdministrator">Who is behind the instance?</label>
@@ -174,7 +174,7 @@
            <div *ngIf="formErrors.instance.businessModel" class="form-error">{{ formErrors.instance.businessModel }}</div>
          </div>
-          <div i18n class="inner-form-title">Other information</div>
+          <div i18n class="inner-form-title">OTHER INFORMATION</div>
          <div class="form-group">
            <label i18n for="instanceHardwareInformation">What server/hardware does the instance run on?</label>
@@ -195,7 +195,7 @@
    <ngb-tab i18n-title title="Basic configuration">
      <ng-template ngbTabContent>
-        <div i18n class="inner-form-title">Theme & Default route</div>
+        <div i18n class="inner-form-title">THEME AND DEFAULT ROUTE</div>
        <ng-container formGroupName="theme">
          <div class="form-group">
@@ -226,7 +226,7 @@
          <div *ngIf="formErrors.instance.defaultClientRoute" class="form-error">{{ formErrors.instance.defaultClientRoute }}</div>
        </div>
-        <div i18n class="inner-form-title">Signup</div>
+        <div i18n class="inner-form-title">SIGNUP</div>
        <ng-container formGroupName="signup">
          <div class="form-group">
@@ -234,6 +234,9 @@
              inputName="signupEnabled" formControlName="enabled"
              i18n-labelText labelText="Signup enabled"
            >
+              <ng-container ngProjectAs="description">
+                <span i18n>⚠️ This functionality requires a lot of attention and extra moderation.</span>
+              </ng-container>
              <ng-container ngProjectAs="extra">
                <my-peertube-checkbox [ngClass]="{ 'disabled-checkbox-extra': !isSignupEnabled() }"
                  inputName="signupRequiresEmailVerification" formControlName="requiresEmailVerification"
@@ -243,10 +246,11 @@
                <div [ngClass]="{ 'disabled-checkbox-extra': !isSignupEnabled() }" class="mt-3">
                  <label i18n for="signupLimit">Signup limit</label>
                  <input
-                    type="text" id="signupLimit"
+                    type="number" min="-1" id="signupLimit"
                    formControlName="limit" [ngClass]="{ 'input-error': formErrors['signup.limit'] }"
                  >
                  <div *ngIf="formErrors.signup.limit" class="form-error">{{ formErrors.signup.limit }}</div>
+                  <small *ngIf="form.value['signup']['limit'] === -1" class="text-muted">Signup won't be limited to a fixed number of users.</small>
                </div>
              </ng-container>
            </my-peertube-checkbox>
@@ -254,7 +258,7 @@
        </ng-container>
-        <div i18n class="inner-form-title">Users</div>
+        <div i18n class="inner-form-title">USERS</div>
        <ng-container formGroupName="user">
          <div class="form-group">
@@ -283,7 +287,7 @@
        </ng-container>
-        <div i18n class="inner-form-title">Import</div>
+        <div i18n class="inner-form-title">IMPORT</div>
        <ng-container formGroupName="import">
          <ng-container formGroupName="videos">
@@ -306,7 +310,7 @@
        </ng-container>
-        <div i18n class="inner-form-title">Auto-blacklist</div>
+        <div i18n class="inner-form-title">AUTO-BLACKLIST</div>
        <ng-container formGroupName="autoBlacklist">
          <ng-container formGroupName="videos">
@@ -318,7 +322,7 @@
                  i18n-labelText labelText="Blacklist new videos automatically"
                >
                <ng-container ngProjectAs="description">
-                  <span i18n>Videos of regular users will stay private until a moderator reviews them. Can be overriden per user.</span>
+                  <span i18n>Unless a user is marked as trusted, their videos will stay private until a moderator reviews them.</span>
                </ng-container>
              </my-peertube-checkbox>
              </div>
@@ -328,7 +332,7 @@
        </ng-container>
-        <div i18n class="inner-form-title">Instance followers</div>
+        <div i18n class="inner-form-title">INSTANCE FOLLOWERS</div>
        <ng-container formGroupName="followers">
          <ng-container formGroupName="instance">
@@ -349,7 +353,7 @@
          </ng-container>
        </ng-container>
-        <div i18n class="inner-form-title">Instance followings</div>
+        <div i18n class="inner-form-title">INSTANCE FOLLOWINGS</div>
        <ng-container formGroupName="followings">
          <ng-container formGroupName="instance">
@@ -395,7 +399,7 @@
        </ng-container>
-        <div i18n class="inner-form-title">Administrator</div>
+        <div i18n class="inner-form-title">ADMINISTRATORS</div>
        <div class="form-group" formGroupName="admin">
          <label i18n for="adminEmail">Admin email</label>
@@ -418,7 +422,7 @@
    <ngb-tab i18n-title title="Services">
      <ng-template ngbTabContent>
-        <div i18n class="inner-form-title">Twitter</div>
+        <div i18n class="inner-form-title">TWITTER</div>
        <ng-container formGroupName="services">
          <ng-container formGroupName="twitter">
@@ -466,7 +470,7 @@
    <ngb-tab i18n-title title="Advanced configuration">
      <ng-template ngbTabContent>
-        <div i18n class="inner-form-title">Transcoding</div>
+        <div i18n class="inner-form-title">TRANSCODING</div>
        <ng-container formGroupName="transcoding">
          <div class="form-group">
@@ -579,7 +583,7 @@
        </ng-container>
        <div class="inner-form-title">
-          <ng-container i18n>Cache</ng-container>
+          <ng-container i18n>CACHE</ng-container>
          <my-help>
            <ng-template ptTemplate="customHtml">
@@ -608,7 +612,7 @@
          </div>
        </ng-container>
-        <div i18n class="inner-form-title">Customizations</div>
+        <div i18n class="inner-form-title">CUSTOMIZATIONS</div>
        <ng-container formGroupName="instance">
          <ng-container formGroupName="customizations">
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
index 60d608028..dd70f1c06 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
@@ -10,6 +10,11 @@ input[type=text] {
  display: block;
 }
+input[type=number] {
+  @include peertube-input-text(315px);
+  display: block;
+}
 input[type=checkbox] {
  @include peertube-checkbox(1px);
 }
diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.html b/client/src/app/+admin/follows/followers-list/followers-list.component.html
index 6b5f3b450..c532b5f32 100644
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.html
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.html
@@ -6,7 +6,7 @@
    <div class="caption">
      <input
        type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
-        (keyup)="onSearch($event.target.value)"
+        (keyup)="onSearch($event)"
      >
    </div>
  </ng-template>
diff --git a/client/src/app/+admin/follows/following-add/following-add.component.scss b/client/src/app/+admin/follows/following-add/following-add.component.scss
index 1baddc95f..df104c14e 100644
--- a/client/src/app/+admin/follows/following-add/following-add.component.scss
+++ b/client/src/app/+admin/follows/following-add/following-add.component.scss
@@ -7,7 +7,7 @@ textarea {
 .form-control {
  &, &:focus {
-    background-color: var(--inputColor);
+    background-color: var(--inputBackgroundColor);
    color: var(--mainForegroundColor);
  }
 }
diff --git a/client/src/app/+admin/follows/following-list/following-list.component.html b/client/src/app/+admin/follows/following-list/following-list.component.html
index 5a252eda9..01aba0c11 100644
--- a/client/src/app/+admin/follows/following-list/following-list.component.html
+++ b/client/src/app/+admin/follows/following-list/following-list.component.html
@@ -7,7 +7,7 @@
      <div>
        <input
          type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
-          (keyup)="onSearch($event.target.value)"
+          (keyup)="onSearch($event)"
        >
      </div>
    </div>
diff --git a/client/src/app/+admin/follows/follows.component.html b/client/src/app/+admin/follows/follows.component.html
index 21d477132..46581daf9 100644
--- a/client/src/app/+admin/follows/follows.component.html
+++ b/client/src/app/+admin/follows/follows.component.html
@@ -1,5 +1,5 @@
 <div class="admin-sub-header">
-  <div i18n class="form-sub-title">Manage follows</div>
+  <div i18n class="form-sub-title">Follows & redundancies</div>
  <div class="admin-sub-nav">
    <a i18n routerLink="following-list" routerLinkActive="active">Following</a>
@@ -7,7 +7,9 @@
    <a i18n routerLink="following-add" routerLinkActive="active">Follow</a>
    <a i18n routerLink="followers-list" routerLinkActive="active">Followers</a>
+    <a i18n routerLink="video-redundancies-list" routerLinkActive="active">Video redundancies</a>
  </div>
 </div>
-<router-outlet></router-outlet>
-\ No newline at end of file
+<router-outlet></router-outlet>
diff --git a/client/src/app/+admin/follows/follows.routes.ts b/client/src/app/+admin/follows/follows.routes.ts
index e84c79e82..298733eb0 100644
--- a/client/src/app/+admin/follows/follows.routes.ts
+++ b/client/src/app/+admin/follows/follows.routes.ts
@@ -6,6 +6,7 @@ import { FollowingAddComponent } from './following-add'
 import { FollowersListComponent } from './followers-list'
 import { UserRight } from '../../../../../shared'
 import { FollowingListComponent } from './following-list/following-list.component'
+import { VideoRedundanciesListComponent } from '@app/+admin/follows/video-redundancies-list'
 export const FollowsRoutes: Routes = [
  {
@@ -47,6 +48,10 @@ export const FollowsRoutes: Routes = [
            title: 'Add follow'
          }
        }
+      },
+      {
+        path: 'video-redundancies-list',
+        component: VideoRedundanciesListComponent
      }
    ]
  }
diff --git a/client/src/app/+admin/follows/index.ts b/client/src/app/+admin/follows/index.ts
index e94f33710..4fcb35cb1 100644
--- a/client/src/app/+admin/follows/index.ts
+++ b/client/src/app/+admin/follows/index.ts
@@ -1,5 +1,6 @@
 export * from './following-add'
 export * from './followers-list'
 export * from './following-list'
+export * from './video-redundancies-list'
 export * from './follows.component'
 export * from './follows.routes'
diff --git a/client/src/app/+admin/follows/shared/redundancy-checkbox.component.ts b/client/src/app/+admin/follows/shared/redundancy-checkbox.component.ts
index fa1da26bf..9d7883d97 100644
--- a/client/src/app/+admin/follows/shared/redundancy-checkbox.component.ts
+++ b/client/src/app/+admin/follows/shared/redundancy-checkbox.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input } from '@angular/core'
 import { Notifier } from '@app/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { RedundancyService } from '@app/+admin/follows/shared/redundancy.service'
+import { RedundancyService } from '@app/shared/video/redundancy.service'
 @Component({
  selector: 'my-redundancy-checkbox',
diff --git a/client/src/app/+admin/follows/shared/redundancy.service.ts b/client/src/app/+admin/follows/shared/redundancy.service.ts
deleted file mode 100644
index 87ae01c04..000000000
--- a/client/src/app/+admin/follows/shared/redundancy.service.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { catchError, map } from 'rxjs/operators'
-import { HttpClient } from '@angular/common/http'
-import { Injectable } from '@angular/core'
-import { RestExtractor } from '@app/shared'
-import { environment } from '../../../../environments/environment'
-@Injectable()
-export class RedundancyService {
-  static BASE_USER_SUBSCRIPTIONS_URL = environment.apiUrl + '/api/v1/server/redundancy'
-  constructor (
-    private authHttp: HttpClient,
-    private restExtractor: RestExtractor
-  ) { }
-  updateRedundancy (host: string, redundancyAllowed: boolean) {
-    const url = RedundancyService.BASE_USER_SUBSCRIPTIONS_URL + '/' + host
-    const body = { redundancyAllowed }
-    return this.authHttp.put(url, body)
-               .pipe(
-                 map(this.restExtractor.extractDataBool),
-                 catchError(err => this.restExtractor.handleError(err))
-               )
-  }
-}
diff --git a/client/src/app/+admin/follows/video-redundancies-list/index.ts b/client/src/app/+admin/follows/video-redundancies-list/index.ts
new file mode 100644
index 000000000..6a7c7f483
--- /dev/null
+++ b/client/src/app/+admin/follows/video-redundancies-list/index.ts
@@ -0,0 +1 @@
+export * from './video-redundancies-list.component'
diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html
new file mode 100644
index 000000000..80c66ec60
--- /dev/null
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html
@@ -0,0 +1,82 @@
+<div class="admin-sub-header">
+  <div i18n class="form-sub-title">Video redundancies list</div>
+  <div class="select-filter-block">
+    <label for="displayType" i18n>Display</label>
+    <div class="peertube-select-container">
+      <select id="displayType" name="displayType" [(ngModel)]="displayType" (ngModelChange)="onDisplayTypeChanged()">
+        <option value="my-videos">My videos duplicated by remote instances</option>
+        <option value="remote-videos">Remote videos duplicated by my instance</option>
+      </select>
+    </div>
+  </div>
+</div>
+<p-table
+  [value]="videoRedundancies" [lazy]="true" [paginator]="true" [totalRecords]="totalRecords" [rows]="rowsPerPage"
+  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id"
+>
+  <ng-template pTemplate="header">
+    <tr>
+      <th i18n *ngIf="isDisplayingRemoteVideos()">Strategy</th>
+      <th i18n pSortableColumn="name">Video name <p-sortIcon field="name"></p-sortIcon></th>
+      <th i18n>Video URL</th>
+      <th i18n *ngIf="isDisplayingRemoteVideos()">Total size</th>
+      <th></th>
+    </tr>
+  </ng-template>
+  <ng-template pTemplate="body" let-redundancy>
+    <tr class="expander" [pRowToggler]="redundancy">
+      <td *ngIf="isDisplayingRemoteVideos()">{{ getRedundancyStrategy(redundancy) }}</td>
+      <td>{{ redundancy.name }}</td>
+      <td>
+        <a target="_blank" rel="noopener noreferrer" [href]="redundancy.url">{{ redundancy.url }}</a>
+      </td>
+      <td *ngIf="isDisplayingRemoteVideos()">{{ getTotalSize(redundancy) | bytes: 1 }}</td>
+      <td class="action-cell">
+        <my-delete-button (click)="removeRedundancy(redundancy)"></my-delete-button>
+      </td>
+    </tr>
+  </ng-template>
+  <ng-template pTemplate="rowexpansion" let-redundancy>
+    <tr>
+      <td colspan="2">
+        <div *ngFor="let file of redundancy.redundancies.files" class="expansion-block">
+          <my-video-redundancy-information [redundancyElement]="file"></my-video-redundancy-information>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <td colspan="2">
+        <div *ngFor="let playlist of redundancy.redundancies.streamingPlaylists">
+          <my-video-redundancy-information [redundancyElement]="playlist"></my-video-redundancy-information>
+        </div>
+      </td>
+    </tr>
+  </ng-template>
+</p-table>
+<div class="redundancies-charts" *ngIf="isDisplayingRemoteVideos()">
+  <div class="form-sub-title" i18n>Enabled strategies stats</div>
+  <div class="chart-blocks">
+    <div *ngIf="noRedundancies" i18n class="no-results">
+      No redundancy strategy is enabled on your instance.
+    </div>
+    <div class="chart-block" *ngFor="let r of redundanciesGraphsData">
+      <p-chart type="pie" [data]="r.graphData" [options]="r.options" width="300px" height="300px"></p-chart>
+    </div>
+  </div>
+</div>
diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss
new file mode 100644
index 000000000..05018c281
--- /dev/null
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss
@@ -0,0 +1,37 @@
+@import '_variables';
+@import '_mixins';
+.expansion-block {
+  margin-bottom: 20px;
+}
+.admin-sub-header {
+  align-items: flex-end;
+  .select-filter-block {
+    &:not(:last-child) {
+      margin-right: 10px;
+    }
+    label {
+      margin-bottom: 2px;
+    }
+    .peertube-select-container {
+      @include peertube-select-container(auto);
+    }
+  }
+}
+.redundancies-charts {
+  margin-top: 50px;
+  .chart-blocks {
+    display: flex;
+    justify-content: center;
+    .chart-block {
+      margin: 0 20px;
+    }
+  }
+}
diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
new file mode 100644
index 000000000..4b41d1d86
--- /dev/null
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.ts
@@ -0,0 +1,178 @@
+import { Component, OnInit } from '@angular/core'
+import { Notifier, ServerService } from '@app/core'
+import { SortMeta } from 'primeng/api'
+import { ConfirmService } from '../../../core/confirm/confirm.service'
+import { RestPagination, RestTable } from '../../../shared'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { VideoRedundanciesTarget, VideoRedundancy } from '@shared/models'
+import { peertubeLocalStorage } from '@app/shared/misc/peertube-web-storage'
+import { VideosRedundancyStats } from '@shared/models/server'
+import { BytesPipe } from 'ngx-pipes'
+import { RedundancyService } from '@app/shared/video/redundancy.service'
+@Component({
+  selector: 'my-video-redundancies-list',
+  templateUrl: './video-redundancies-list.component.html',
+  styleUrls: [ './video-redundancies-list.component.scss' ]
+})
+export class VideoRedundanciesListComponent extends RestTable implements OnInit {
+  private static LOCAL_STORAGE_DISPLAY_TYPE = 'video-redundancies-list-display-type'
+  videoRedundancies: VideoRedundancy[] = []
+  totalRecords = 0
+  rowsPerPage = 10
+  sort: SortMeta = { field: 'name', order: 1 }
+  pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
+  displayType: VideoRedundanciesTarget = 'my-videos'
+  redundanciesGraphsData: { stats: VideosRedundancyStats, graphData: object, options: object }[] = []
+  noRedundancies = false
+  private bytesPipe: BytesPipe
+  constructor (
+    private notifier: Notifier,
+    private confirmService: ConfirmService,
+    private redundancyService: RedundancyService,
+    private serverService: ServerService,
+    private i18n: I18n
+  ) {
+    super()
+    this.bytesPipe = new BytesPipe()
+  }
+  ngOnInit () {
+    this.loadSelectLocalStorage()
+    this.initialize()
+    this.serverService.getServerStats()
+        .subscribe(res => {
+          const redundancies = res.videosRedundancy
+          if (redundancies.length === 0) this.noRedundancies = true
+          for (const r of redundancies) {
+            this.buildPieData(r)
+          }
+        })
+  }
+  isDisplayingRemoteVideos () {
+    return this.displayType === 'remote-videos'
+  }
+  getTotalSize (redundancy: VideoRedundancy) {
+    return redundancy.redundancies.files.reduce((a, b) => a + b.size, 0) +
+      redundancy.redundancies.streamingPlaylists.reduce((a, b) => a + b.size, 0)
+  }
+  onDisplayTypeChanged () {
+    this.pagination.start = 0
+    this.saveSelectLocalStorage()
+    this.loadData()
+  }
+  getRedundancyStrategy (redundancy: VideoRedundancy) {
+    if (redundancy.redundancies.files.length !== 0) return redundancy.redundancies.files[0].strategy
+    if (redundancy.redundancies.streamingPlaylists.length !== 0) return redundancy.redundancies.streamingPlaylists[0].strategy
+    return ''
+  }
+  buildPieData (stats: VideosRedundancyStats) {
+    const totalSize = stats.totalSize
+      ? stats.totalSize - stats.totalUsed
+      : stats.totalUsed
+    if (totalSize === 0) return
+    this.redundanciesGraphsData.push({
+      stats,
+      graphData: {
+        labels: [ this.i18n('Used'), this.i18n('Available') ],
+        datasets: [
+          {
+            data: [ stats.totalUsed, totalSize ],
+            backgroundColor: [
+              '#FF6384',
+              '#36A2EB'
+            ],
+            hoverBackgroundColor: [
+              '#FF6384',
+              '#36A2EB'
+            ]
+          }
+        ]
+      },
+      options: {
+        title: {
+          display: true,
+          text: stats.strategy
+        },
+        tooltips: {
+          callbacks: {
+            label: (tooltipItem: any, data: any) => {
+              const dataset = data.datasets[tooltipItem.datasetIndex]
+              let label = data.labels[tooltipItem.index]
+              if (label) label += ': '
+              else label = ''
+              label += this.bytesPipe.transform(dataset.data[tooltipItem.index], 1)
+              return label
+            }
+          }
+        }
+      }
+    })
+  }
+  async removeRedundancy (redundancy: VideoRedundancy) {
+    const message = this.i18n('Do you really want to remove this video redundancy?')
+    const res = await this.confirmService.confirm(message, this.i18n('Remove redundancy'))
+    if (res === false) return
+    this.redundancyService.removeVideoRedundancies(redundancy)
+      .subscribe(
+        () => {
+          this.notifier.success(this.i18n('Video redundancies removed!'))
+          this.loadData()
+        },
+        err => this.notifier.error(err.message)
+      )
+  }
+  protected loadData () {
+    const options = {
+      pagination: this.pagination,
+      sort: this.sort,
+      target: this.displayType
+    }
+    this.redundancyService.listVideoRedundancies(options)
+                      .subscribe(
+                        resultList => {
+                          this.videoRedundancies = resultList.data
+                          this.totalRecords = resultList.total
+                        },
+                        err => this.notifier.error(err.message)
+                      )
+  }
+  private loadSelectLocalStorage () {
+    const displayType = peertubeLocalStorage.getItem(VideoRedundanciesListComponent.LOCAL_STORAGE_DISPLAY_TYPE)
+    if (displayType) this.displayType = displayType as VideoRedundanciesTarget
+  }
+  private saveSelectLocalStorage () {
+    peertubeLocalStorage.setItem(VideoRedundanciesListComponent.LOCAL_STORAGE_DISPLAY_TYPE, this.displayType)
+  }
+}
diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancy-information.component.html b/client/src/app/+admin/follows/video-redundancies-list/video-redundancy-information.component.html
new file mode 100644
index 000000000..a379520e3
--- /dev/null
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancy-information.component.html
@@ -0,0 +1,24 @@
+<div>
+  <span class="label">Url</span>
+  <a target="_blank" rel="noopener noreferrer" [href]="redundancyElement.fileUrl">{{ redundancyElement.fileUrl }}</a>
+</div>
+<div>
+  <span class="label">Created on</span>
+  <span>{{ redundancyElement.createdAt | date: 'medium' }}</span>
+</div>
+<div>
+  <span class="label">Expires on</span>
+  <span>{{ redundancyElement.expiresOn | date: 'medium' }}</span>
+</div>
+<div>
+  <span class="label">Size</span>
+  <span>{{ redundancyElement.size | bytes: 1 }}</span>
+</div>
+<div *ngIf="redundancyElement.strategy">
+  <span class="label">Strategy</span>
+  <span>{{ redundancyElement.strategy }}</span>
+</div>
diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancy-information.component.scss b/client/src/app/+admin/follows/video-redundancies-list/video-redundancy-information.component.scss
new file mode 100644
index 000000000..6b09fbb01
--- /dev/null
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancy-information.component.scss
@@ -0,0 +1,8 @@
+@import '_variables';
+@import '_mixins';
+.label {
+  display: inline-block;
+  min-width: 100px;
+  font-weight: $font-semibold;
+}
diff --git a/client/src/app/+admin/follows/video-redundancies-list/video-redundancy-information.component.ts b/client/src/app/+admin/follows/video-redundancies-list/video-redundancy-information.component.ts
new file mode 100644
index 000000000..6f3090c08
--- /dev/null
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancy-information.component.ts
@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core'
+import { FileRedundancyInformation, StreamingPlaylistRedundancyInformation } from '@shared/models'
+@Component({
+  selector: 'my-video-redundancy-information',
+  templateUrl: './video-redundancy-information.component.html',
+  styleUrls: [ './video-redundancy-information.component.scss' ]
+})
+export class VideoRedundancyInformationComponent {
+  @Input() redundancyElement: FileRedundancyInformation | StreamingPlaylistRedundancyInformation
+}
diff --git a/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.ts b/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.ts
index 032bf745a..03e3379e6 100644
--- a/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.ts
+++ b/client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core'
 import { Notifier } from '@app/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { RestPagination, RestTable } from '@app/shared'
-import { SortMeta } from 'primeng/components/common/sortmeta'
+import { SortMeta } from 'primeng/api'
 import { AccountBlock, BlocklistService } from '@app/shared/blocklist'
 @Component({
diff --git a/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.ts b/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.ts
index db3dfcd1c..d92a4f195 100644
--- a/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.ts
+++ b/client/src/app/+admin/moderation/instance-blocklist/instance-server-blocklist.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core'
 import { Notifier } from '@app/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { RestPagination, RestTable } from '@app/shared'
-import { SortMeta } from 'primeng/components/common/sortmeta'
+import { SortMeta } from 'primeng/api'
 import { BlocklistService } from '@app/shared/blocklist'
 import { ServerBlock } from '../../../../../../shared'
diff --git a/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.ts b/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.ts
index f8a5ef8cb..29f90194b 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.ts
+++ b/client/src/app/+admin/moderation/video-abuse-list/moderation-comment-modal.component.ts
@@ -38,7 +38,7 @@ export class ModerationCommentModalComponent extends FormReactive implements OnI
  openModal (abuseToComment: VideoAbuse) {
    this.abuseToComment = abuseToComment
-    this.openedModal = this.modalService.open(this.modal)
+    this.openedModal = this.modalService.open(this.modal, { centered: true })
    this.form.patchValue({
      moderationComment: this.abuseToComment.moderationComment
diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts
index 778f18d3d..51114e087 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts
+++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { Account } from '../../../shared/account/account.model'
 import { Notifier } from '@app/core'
-import { SortMeta } from 'primeng/components/common/sortmeta'
+import { SortMeta } from 'primeng/api'
 import { VideoAbuse, VideoAbuseState } from '../../../../../../shared'
 import { RestPagination, RestTable, VideoAbuseService } from '../../../shared'
 import { I18n } from '@ngx-translate/i18n-polyfill'
diff --git a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts
index 5876f658b..a215714b8 100644
--- a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts
+++ b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core'
-import { SortMeta } from 'primeng/components/common/sortmeta'
+import { SortMeta } from 'primeng/api'
 import { Notifier, ServerService } from '@app/core'
 import { ConfirmService } from '../../../core'
 import { RestPagination, RestTable, VideoBlacklistService } from '../../../shared'
diff --git a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
index 4526aaf66..1a177de72 100644
--- a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
+++ b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
@@ -10,7 +10,7 @@
  <div class="card plugin" *ngFor="let plugin of plugins">
    <div class="card-body">
      <div class="first-row">
-        <a class="plugin-name" [routerLink]="getShowRouterLink(plugin)" title="Show plugin settings">{{ plugin.name }}</a>
+        <a class="plugin-name" [routerLink]="getShowRouterLink(plugin)" i18n-title title="Show plugin settings">{{ plugin.name }}</a>
        <span class="plugin-version">{{ plugin.version }}</span>
      </div>
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
index 6ec6301b1..5f18028c9 100644
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
@@ -3,7 +3,7 @@
 </div>
 <div class="search-bar">
-  <input type="text" (input)="onSearchChange($event.target.value)" i18n-placeholder placeholder="Search..."/>
+  <input type="text" (input)="onSearchChange($event)" i18n-placeholder placeholder="Search..."/>
 </div>
 <div class="alert alert-info" i18n *ngIf="pluginInstalled">
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts
index e08ded3f1..dc59e759b 100644
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.ts
@@ -70,8 +70,10 @@ export class PluginSearchComponent implements OnInit {
    this.reloadPlugins()
  }
-  onSearchChange (search: string) {
+  onSearchChange (event: Event) {
-    this.searchSubject.next(search)
+    const target = event.target as HTMLInputElement
+    this.searchSubject.next(target.value)
  }
  reloadPlugins () {
diff --git a/client/src/app/+admin/system/jobs/jobs.component.ts b/client/src/app/+admin/system/jobs/jobs.component.ts
index 20c8ea71a..bc40452cf 100644
--- a/client/src/app/+admin/system/jobs/jobs.component.ts
+++ b/client/src/app/+admin/system/jobs/jobs.component.ts
@@ -16,8 +16,8 @@ import { JobTypeClient } from '../../../../types/job-type-client.type'
  styleUrls: [ './jobs.component.scss' ]
 })
 export class JobsComponent extends RestTable implements OnInit {
-  private static JOB_STATE_LOCAL_STORAGE_STATE = 'jobs-list-state'
+  private static LOCAL_STORAGE_STATE = 'jobs-list-state'
-  private static JOB_STATE_LOCAL_STORAGE_TYPE = 'jobs-list-type'
+  private static LOCAL_STORAGE_TYPE = 'jobs-list-type'
  jobState: JobStateClient = 'waiting'
  jobStates: JobStateClient[] = [ 'active', 'completed', 'failed', 'waiting', 'delayed' ]
@@ -34,7 +34,8 @@ export class JobsComponent extends RestTable implements OnInit {
    'video-file-import',
    'video-import',
    'videos-views',
-    'activitypub-refresher'
+    'activitypub-refresher',
+    'video-redundancy'
  ]
  jobs: Job[] = []
@@ -77,15 +78,15 @@ export class JobsComponent extends RestTable implements OnInit {
  }
  private loadJobStateAndType () {
-    const state = peertubeLocalStorage.getItem(JobsComponent.JOB_STATE_LOCAL_STORAGE_STATE)
+    const state = peertubeLocalStorage.getItem(JobsComponent.LOCAL_STORAGE_STATE)
    if (state) this.jobState = state as JobState
-    const type = peertubeLocalStorage.getItem(JobsComponent.JOB_STATE_LOCAL_STORAGE_TYPE)
+    const type = peertubeLocalStorage.getItem(JobsComponent.LOCAL_STORAGE_TYPE)
    if (type) this.jobType = type as JobType
  }
  private saveJobStateAndType () {
-    peertubeLocalStorage.setItem(JobsComponent.JOB_STATE_LOCAL_STORAGE_STATE, this.jobState)
+    peertubeLocalStorage.setItem(JobsComponent.LOCAL_STORAGE_STATE, this.jobState)
-    peertubeLocalStorage.setItem(JobsComponent.JOB_STATE_LOCAL_STORAGE_TYPE, this.jobType)
+    peertubeLocalStorage.setItem(JobsComponent.LOCAL_STORAGE_TYPE, this.jobType)
  }
 }
diff --git a/client/src/app/+admin/system/logs/logs.component.html b/client/src/app/+admin/system/logs/logs.component.html
index ddad1314f..37f833020 100644
--- a/client/src/app/+admin/system/logs/logs.component.html
+++ b/client/src/app/+admin/system/logs/logs.component.html
@@ -21,7 +21,7 @@
 </div>
 <div class="logs">
-  <div *ngIf="loading">Loading...</div>
+  <div *ngIf="loading" i18n>Loading...</div>
  <div #logsElement>
    <div *ngFor="let log of logs" class="log-row" [ngClass]="{ error: log.level === 'error', warn: log.level === 'warn' }">
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 e726ec4d7..1769c0de0 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
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core'
-import { Router } from '@angular/router'
+import { Router, ActivatedRoute } from '@angular/router'
 import { AuthService, Notifier, ServerService } from '@app/core'
 import { UserCreate, UserRole } from '../../../../../../shared'
 import { UserEdit } from './user-edit'
@@ -23,6 +23,7 @@ export class UserCreateComponent extends UserEdit implements OnInit {
    protected configService: ConfigService,
    protected auth: AuthService,
    private userValidatorsService: UserValidatorsService,
+    private route: ActivatedRoute,
    private router: Router,
    private notifier: Notifier,
    private userService: UserService,
@@ -45,7 +46,7 @@ export class UserCreateComponent extends UserEdit implements OnInit {
    this.buildForm({
      username: this.userValidatorsService.USER_USERNAME,
      email: this.userValidatorsService.USER_EMAIL,
-      password: this.userValidatorsService.USER_PASSWORD,
+      password: this.isPasswordOptional() ? this.userValidatorsService.USER_PASSWORD_OPTIONAL : this.userValidatorsService.USER_PASSWORD,
      role: this.userValidatorsService.USER_ROLE,
      videoQuota: this.userValidatorsService.USER_VIDEO_QUOTA,
      videoQuotaDaily: this.userValidatorsService.USER_VIDEO_QUOTA_DAILY,
@@ -78,6 +79,11 @@ export class UserCreateComponent extends UserEdit implements OnInit {
    return true
  }
+  isPasswordOptional () {
+    const serverConfig = this.route.snapshot.data.serverConfig
+    return serverConfig.email.enabled
+  }
  getFormButtonTitle () {
    return this.i18n('Create user')
  }
diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.html b/client/src/app/+admin/users/user-edit/user-edit.component.html
index 4ff4d0d12..2aca5ddca 100644
--- a/client/src/app/+admin/users/user-edit/user-edit.component.html
+++ b/client/src/app/+admin/users/user-edit/user-edit.component.html
@@ -29,6 +29,13 @@
  <div class="form-group" *ngIf="isCreation()">
    <label i18n for="password">Password</label>
+    <my-help *ngIf="isPasswordOptional()">
+      <ng-template ptTemplate="customHtml">
+        <ng-container i18n>
+          If you leave the password empty, an email will be sent to the user.
+        </ng-container>
+      </ng-template>
+    </my-help>
    <input
      type="password" id="password" autocomplete="new-password"
      formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
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 d1682a99d..1ab2e9dbf 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
@@ -92,6 +92,10 @@ export class UserUpdateComponent extends UserEdit implements OnInit, OnDestroy {
    return false
  }
+  isPasswordOptional () {
+    return false
+  }
  getFormButtonTitle () {
    return this.i18n('Update user')
  }
diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html
index ca05bac19..249883efc 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/users/user-list/user-list.component.html
@@ -25,7 +25,7 @@
      <div>
        <input
          type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
-          (keyup)="onSearch($event.target.value)"
+          (keyup)="onSearch($event)"
        >
      </div>
    </div>
diff --git a/client/src/app/+admin/users/user-list/user-list.component.ts b/client/src/app/+admin/users/user-list/user-list.component.ts
index 7c5e8eaa4..6e9a1feda 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.ts
+++ b/client/src/app/+admin/users/user-list/user-list.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { AuthService, Notifier } from '@app/core'
-import { SortMeta } from 'primeng/components/common/sortmeta'
+import { SortMeta } from 'primeng/api'
 import { ConfirmService, ServerService } from '../../../core'
 import { RestPagination, RestTable, UserService } from '../../../shared'
 import { I18n } from '@ngx-translate/i18n-polyfill'
diff --git a/client/src/app/+admin/users/users.routes.ts b/client/src/app/+admin/users/users.routes.ts
index 8b3791bd3..2d4f9305e 100644
--- a/client/src/app/+admin/users/users.routes.ts
+++ b/client/src/app/+admin/users/users.routes.ts
@@ -5,6 +5,7 @@ import { UserRight } from '../../../../../shared'
 import { UsersComponent } from './users.component'
 import { UserCreateComponent, UserUpdateComponent } from './user-edit'
 import { UserListComponent } from './user-list'
+import { ServerConfigResolver } from '@app/core/routing/server-config-resolver.service'
 export const UsersRoutes: Routes = [
  {
@@ -36,6 +37,9 @@ export const UsersRoutes: Routes = [
          meta: {
            title: 'Create a user'
          }
+        },
+        resolve: {
+          serverConfig: ServerConfigResolver
        }
      },
      {
diff --git a/client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.ts b/client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.ts
index e3025dec4..15b58e45c 100644
--- a/client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.ts
+++ b/client/src/app/+my-account/my-account-blocklist/my-account-blocklist.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core'
 import { Notifier } from '@app/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { RestPagination, RestTable } from '@app/shared'
-import { SortMeta } from 'primeng/components/common/sortmeta'
+import { SortMeta } from 'primeng/api'
 import { AccountBlock, BlocklistService } from '@app/shared/blocklist'
 @Component({
diff --git a/client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.ts b/client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.ts
index 4c5cc28b8..e735d4ab7 100644
--- a/client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.ts
+++ b/client/src/app/+my-account/my-account-blocklist/my-account-server-blocklist.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core'
 import { Notifier } from '@app/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { RestPagination, RestTable } from '@app/shared'
-import { SortMeta } from 'primeng/components/common/sortmeta'
+import { SortMeta } from 'primeng/api'
 import { ServerBlock } from '../../../../../shared'
 import { BlocklistService } from '@app/shared/blocklist'
diff --git a/client/src/app/+my-account/my-account-history/my-account-history.component.html b/client/src/app/+my-account/my-account-history/my-account-history.component.html
index 4c361cec3..56d63f299 100644
--- a/client/src/app/+my-account/my-account-history/my-account-history.component.html
+++ b/client/src/app/+my-account/my-account-history/my-account-history.component.html
@@ -11,7 +11,7 @@
 </div>
-<div class="no-history" i18n *ngIf="pagination.totalItems === 0">You don't have videos history yet.</div>
+<div class="no-history" i18n *ngIf="pagination.totalItems === 0">You don't have any video history yet.</div>
 <div myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true" [dataObservable]="onDataSubject.asObservable()" class="videos">
  <div class="video" *ngFor="let video of videos">
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 6df929ec9..d5682914e 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
@@ -53,7 +53,7 @@ export class MyAccountAcceptOwnershipComponent extends FormReactive implements O
  show (videoChangeOwnership: VideoChangeOwnership) {
    this.videoChangeOwnership = videoChangeOwnership
    this.modalService
-      .open(this.modal)
+      .open(this.modal, { centered: true })
      .result
      .then(() => this.acceptOwnership())
      .catch(() => this.videoChangeOwnership = undefined)
diff --git a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts
index aeeb0e5a7..cd8065800 100644
--- a/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts
+++ b/client/src/app/+my-account/my-account-ownership/my-account-ownership.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { Notifier } from '@app/core'
 import { RestPagination, RestTable } from '@app/shared'
-import { SortMeta } from 'primeng/components/common/sortmeta'
+import { SortMeta } from 'primeng/api'
 import { VideoChangeOwnership } from '../../../../../shared'
 import { VideoOwnershipService } from '@app/shared/video-ownership'
 import { Account } from '@app/shared/account/account.model'
diff --git a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html
index 17d8cde06..51a672734 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-video-settings/my-account-video-settings.component.html
@@ -28,7 +28,7 @@
    <div>
      <p-multiSelect
-        inputId="videoLanguages" [options]="languageItems" formControlName="videoLanguages" showToggleAll="true"
+        inputId="videoLanguages" [options]="languageItems" formControlName="videoLanguages" [showToggleAll]="true"
        [defaultLabel]="getDefaultVideoLanguageLabel()" [selectedItemsLabel]="getSelectedVideoLanguageLabel()"
        emptyFilterMessage="No results found" i18n-emptyFilterMessage
      ></p-multiSelect>
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.ts b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.ts
index 7479442d1..355cb4f55 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.ts
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channel-edit.ts
@@ -9,7 +9,7 @@ export abstract class MyAccountVideoChannelEdit extends FormReactive {
  abstract isCreation (): boolean
  abstract getFormButtonTitle (): string
-  // FIXME: We need this method so angular does not complain in the child template
+  // We need this method so angular does not complain in child template that doesn't need this
  onAvatarChange (formData: FormData) { /* empty */ }
  // Should be implemented by the child
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss
index 20582e478..db0c7f94f 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss
@@ -58,7 +58,7 @@
  margin: 20px 0 50px;
 }
-@media screen and (max-width: 800px) {
+@media screen and (max-width: $small-view) {
  .video-channels-header {
    text-align: center;
  }
diff --git a/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.ts b/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.ts
index 21a10c8ff..74c42bb4f 100644
--- a/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.ts
+++ b/client/src/app/+my-account/my-account-video-imports/my-account-video-imports.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core'
 import { RestPagination, RestTable } from '@app/shared'
-import { SortMeta } from 'primeng/components/common/sortmeta'
+import { SortMeta } from 'primeng/api'
 import { Notifier } from '@app/core'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { VideoImport, VideoImportState } from '../../../../../shared/models/videos'
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss
index 4e4156b22..aed3302ba 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss
@@ -43,7 +43,7 @@
  }
 }
-@media screen and (max-width: 800px) {
+@media screen and (max-width: $small-view) {
  .video-playlists-header {
    text-align: center;
  }
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 36d1ea091..f4e2b5955 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
@@ -43,7 +43,7 @@ export class VideoChangeOwnershipComponent extends FormReactive implements OnIni
  show (video: Video) {
    this.video = video
    this.modalService
-      .open(this.modal)
+      .open(this.modal, { centered: true })
      .result
      .then(() => this.changeOwnership())
      .catch((_) => _) // Called when closing (cancel) the modal without validating, do nothing
diff --git a/client/src/app/+my-account/shared/actor-avatar-info.component.ts b/client/src/app/+my-account/shared/actor-avatar-info.component.ts
index 101dfa556..8e034bb82 100644
--- a/client/src/app/+my-account/shared/actor-avatar-info.component.ts
+++ b/client/src/app/+my-account/shared/actor-avatar-info.component.ts
@@ -11,7 +11,7 @@ import { ServerConfig } from '@shared/models'
  styleUrls: [ './actor-avatar-info.component.scss' ]
 })
 export class ActorAvatarInfoComponent implements OnInit {
-  @ViewChild('avatarfileInput', { static: false }) avatarfileInput: ElementRef<HTMLInputElement>
+  @ViewChild('avatarfileInput') avatarfileInput: ElementRef<HTMLInputElement>
  @Input() actor: VideoChannel | Account
diff --git a/client/src/app/+signup/+register/register-step-channel.component.html b/client/src/app/+signup/+register/register-step-channel.component.html
index 88ff6e3ff..170c2964e 100644
--- a/client/src/app/+signup/+register/register-step-channel.component.html
+++ b/client/src/app/+signup/+register/register-step-channel.component.html
@@ -40,7 +40,7 @@
    </div>
    <div class="name-information" i18n>
-      The channel name is a unique identifier of your channel on this instance. It's like an address mail, so other people can find your channel.
+      The channel name is a unique identifier of your channel on this and all the other instances. It's as unique as an email address, which makes it easy for other people to interact with it.
    </div>
    <div *ngIf="formErrors.name" class="form-error">
diff --git a/client/src/app/+signup/+register/register-step-user.component.html b/client/src/app/+signup/+register/register-step-user.component.html
index a2a657660..6bac4e4a4 100644
--- a/client/src/app/+signup/+register/register-step-user.component.html
+++ b/client/src/app/+signup/+register/register-step-user.component.html
@@ -29,7 +29,7 @@
    </div>
    <div class="name-information" i18n>
-      The username is a unique identifier of your account on this instance. It's like an address mail, so other people can find you.
+      The username is a unique identifier of your account on this and all the other instances. It's as unique as an email address, which makes it easy for other people to interact with it.
    </div>
    <div *ngIf="formErrors.username" class="form-error">
diff --git a/client/src/app/+signup/+register/register.component.scss b/client/src/app/+signup/+register/register.component.scss
index 2f62dd59d..e135b5cb4 100644
--- a/client/src/app/+signup/+register/register.component.scss
+++ b/client/src/app/+signup/+register/register.component.scss
@@ -44,7 +44,7 @@
      }
    }
-    @media screen and (max-width: 500px) {
+    @media screen and (max-width: $mobile-view) {
      width: auto;
    }
  }
diff --git a/client/src/app/+video-channels/video-channel-about/video-channel-about.component.html b/client/src/app/+video-channels/video-channel-about/video-channel-about.component.html
index 9655668d7..c02213ebb 100644
--- a/client/src/app/+video-channels/video-channel-about/video-channel-about.component.html
+++ b/client/src/app/+video-channels/video-channel-about/video-channel-about.component.html
@@ -1,19 +1,19 @@
 <div *ngIf="videoChannel" class="row">
  <div class="description col-md-6 col-sm-12">
    <div class="block">
-      <div i18n class="small-title">Description</div>
+      <div i18n class="small-title">DESCRIPTION</div>
      <div class="content" [innerHtml]="getVideoChannelDescription()"></div>
    </div>
    <div class="block" *ngIf="supportHTML">
-      <div i18n class="small-title">Support this channel</div>
+      <div i18n class="small-title">SUPPORT THIS CHANNEL</div>
      <div class="content" [innerHtml]="supportHTML"></div>
    </div>
  </div>
  <div class="stats col-md-6 col-sm-12">
    <div class="block">
-      <div i18n class="small-title">Stats</div>
+      <div i18n class="small-title">STATS</div>
      <div i18n class="content">Created {{ videoChannel.createdAt | date }}</div>
    </div>
  </div>
diff --git a/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts b/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
index f4fe14662..f32a892a4 100644
--- a/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
+++ b/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
@@ -72,7 +72,7 @@ export class VideoChannelVideosComponent extends AbstractVideoList implements On
               .getVideoChannelVideos(this.videoChannel, newPagination, this.sort)
               .pipe(
                 tap(({ total }) => {
-                   this.titlePage = this.i18n(`{total, plural, =1 {Published 1 video} other {Published ${total} videos}}`, { total })
+                   this.titlePage = this.i18n(`{total, plural, =1 {Published 1 video} other {Published {{total}} videos}}`, { total })
                 })
               )
  }
diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html
index f0bb083ca..1087de113 100644
--- a/client/src/app/+video-channels/video-channels.component.html
+++ b/client/src/app/+video-channels/video-channels.component.html
@@ -7,32 +7,38 @@
      <div class="actor-info">
        <div class="actor-names">
          <div class="actor-display-name">{{ videoChannel.displayName }}</div>
-          <div class="actor-name">{{ videoChannel.nameWithHost }}
+          <div class="actor-name">
-            <button ngxClipboard [cbContent]="videoChannel.nameWithHost" (click)="activateCopiedMessage()"
+            <span>{{ videoChannel.nameWithHost }}</span>
+            <button [cdkCopyToClipboard]="videoChannel.nameWithHost" (click)="activateCopiedMessage()"
                    class="btn btn-outline-secondary btn-sm copy-button"
            >
              <span class="glyphicon glyphicon-copy"></span>
            </button>
          </div>
+        </div>
-          <div class="right-buttons">
+        <div class="right-buttons">
-            <a *ngIf="isChannelManageable" [routerLink]="[ '/my-account/video-channels/update', videoChannel.nameWithHost ]" class="btn btn-outline-tertiary mr-2" i18n>Manage</a>
+          <a *ngIf="isChannelManageable" [routerLink]="[ '/my-account/video-channels/update', videoChannel.nameWithHost ]" class="btn btn-outline-tertiary mr-2" i18n>Manage</a>
-            <my-subscribe-button #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button>
+          <my-subscribe-button #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button>
-          </div>
        </div>
-        <div class="actor-followers" i18n>{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}</div>
-        <a [routerLink]="[ '/accounts', videoChannel.ownerBy ]" i18n-title title="Go the owner account page" class="actor-owner">
+        <div class="actor-lower">
-          <span i18n>Created by {{ videoChannel.ownerBy }}</span>
+          <div class="actor-followers" i18n>{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}</div>
-          <img [src]="videoChannel.ownerAvatarUrl" alt="Owner account avatar" />
+  
-        </a>
+          <a [routerLink]="[ '/accounts', videoChannel.ownerBy ]" i18n-title title="Go the owner account page" class="actor-owner">
+            <span i18n>Created by {{ videoChannel.ownerBy }}</span>
+            <img [src]="videoChannel.ownerAvatarUrl" alt="Owner account avatar" />
+          </a>
+        </div>
      </div>
    </div>
-    <div class="links">
+    <div class="links w-100">
-      <a i18n routerLink="videos" routerLinkActive="active" class="title-page">Videos</a>
+      <ng-template #linkTemplate let-item="item">
-      <a i18n routerLink="video-playlists" routerLinkActive="active" class="title-page">Video playlists</a>
+        <a [routerLink]="item.routerLink" routerLinkActive="active" class="title-page">{{ item.label }}</a>
-      <a i18n routerLink="about" routerLinkActive="active" class="title-page">About</a>
+      </ng-template>
+      <list-overflow [items]="links" [itemTemplate]="linkTemplate"></list-overflow>
    </div>
  </div>
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss
index 50b69e7ac..6470629f8 100644
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -8,6 +8,21 @@
    width: 100%;
  }
+  .actor-info {
+    display: grid !important;
+    grid-template-columns: 1fr auto;
+    grid-template-rows: 1fr auto / 1fr auto;
+    grid-template-areas: "name buttons" "lower buttons";
+    @media screen and (max-width: #{map-get($grid-breakpoints, lg)}) {
+      grid-template-areas: "name name" "lower buttons";
+    }
+  }
+  .actor-names {
+    grid-area: name;
+  }
  .actor-name {
    flex-grow: 1;
@@ -25,6 +40,9 @@
  margin-left: auto;
  margin-top: 20px;
+  grid-row: buttons-start / span buttons-end;
+  grid-column: buttons-start;
  a {
    @include peertube-button-outline;
    line-height: 1.8;
@@ -33,4 +51,4 @@
  my-subscribe-button {
    height: min-content;
  }
-}
-\ No newline at end of file
+}
diff --git a/client/src/app/+video-channels/video-channels.component.ts b/client/src/app/+video-channels/video-channels.component.ts
index 7b335b13f..00b9938d9 100644
--- a/client/src/app/+video-channels/video-channels.component.ts
+++ b/client/src/app/+video-channels/video-channels.component.ts
@@ -9,16 +9,18 @@ import { AuthService, Notifier } from '@app/core'
 import { Hotkey, HotkeysService } from 'angular2-hotkeys'
 import { SubscribeButtonComponent } from '@app/shared/user-subscription/subscribe-button.component'
 import { I18n } from '@ngx-translate/i18n-polyfill'
+import { ListOverflowItem } from '@app/shared/misc/list-overflow.component'
 @Component({
  templateUrl: './video-channels.component.html',
  styleUrls: [ './video-channels.component.scss' ]
 })
 export class VideoChannelsComponent implements OnInit, OnDestroy {
-  @ViewChild('subscribeButton', { static: false }) subscribeButton: SubscribeButtonComponent
+  @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent
  videoChannel: VideoChannel
  hotkeys: Hotkey[]
+  links: ListOverflowItem[] = []
  isChannelManageable = false
  private routeSub: Subscription
@@ -62,6 +64,12 @@ export class VideoChannelsComponent implements OnInit, OnDestroy {
      }, undefined, this.i18n('Subscribe to the account'))
    ]
    if (this.isUserLoggedIn()) this.hotkeysService.add(this.hotkeys)
+    this.links = [
+      { label: this.i18n('VIDEOS'), routerLink: 'videos' },
+      { label: this.i18n('VIDEO PLAYLISTS'), routerLink: 'video-playlists' },
+      { label: this.i18n('ABOUT'), routerLink: 'about' }
+    ]
  }
  ngOnDestroy () {
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index 2660c5377..7743124d4 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -8,14 +8,14 @@
    <div class="top-left-block" [ngClass]="{ 'border-bottom': isMenuDisplayed === false }">
      <span class="icon icon-menu" (click)="toggleMenu()"></span>
-      <a class="peertube-title" [routerLink]="defaultRoute" title="Homepage">
+      <a class="peertube-title" [routerLink]="defaultRoute" title="Homepage" i18n-title>
        <span class="icon icon-logo"></span>
        <span class="instance-name">{{ instanceName }}</span>
      </a>
    </div>
    <div class="header-right" [ngClass]="{ 'border-bottom': isMenuDisplayed === false }">
-      <my-header></my-header>
+      <my-header class="w-100 d-flex justify-content-end"></my-header>
    </div>
  </div>
@@ -29,8 +29,8 @@
      </div>
      <footer class="row">
-        <a href="https://joinpeertube.org" title="PeerTube website" target="_blank" rel="noopener noreferrer" i18n>Powered by PeerTube</a>&nbsp;-&nbsp;
+        <a href="https://joinpeertube.org" title="PeerTube website" target="_blank" rel="noopener noreferrer" i18n-title>Powered by PeerTube</a>&nbsp;-&nbsp;
-        <a href="https://github.com/Chocobozzz/PeerTube/blob/develop/LICENSE" title="PeerTube license" target="_blank" rel="noopener noreferrer">CopyLeft 2015-2020</a>
+        <a href="https://github.com/Chocobozzz/PeerTube/blob/develop/LICENSE" title="PeerTube license" target="_blank" rel="noopener noreferrer" i18n-title>CopyLeft 2015-2020</a>
      </footer>
    </div>
  </div>
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 51a7a3dd1..d9dace16b 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -16,12 +16,12 @@
  top: 0;
  width: 100%;
  background-color: var(--mainBackgroundColor);
-  z-index: 1000;
+  z-index: z(header);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
  display: flex;
  .top-left-block {
-    z-index: 1001;
+    z-index: 1;
    height: $header-height;
    display: flex;
    align-items: center;
@@ -61,7 +61,7 @@
      }
    }
-    @media screen and (max-width: 500px) {
+    @media screen and (max-width: $mobile-view) {
      width: 70px;
      .peertube-title {
diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index 03eb83cb8..59966243b 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -25,8 +25,8 @@ import { InstanceService } from '@app/shared/instance/instance.service'
  styleUrls: [ './app.component.scss' ]
 })
 export class AppComponent implements OnInit {
-  @ViewChild('welcomeModal', { static: false }) welcomeModal: WelcomeModalComponent
+  @ViewChild('welcomeModal') welcomeModal: WelcomeModalComponent
-  @ViewChild('instanceConfigWarningModal', { static: false }) instanceConfigWarningModal: InstanceConfigWarningModalComponent
+  @ViewChild('instanceConfigWarningModal') instanceConfigWarningModal: InstanceConfigWarningModalComponent
  isMenuDisplayed = true
  isMenuChangedByUser = false
diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts
index dda705811..9e220a383 100644
--- a/client/src/app/app.module.ts
+++ b/client/src/app/app.module.ts
@@ -4,22 +4,21 @@ import { ServerService } from '@app/core'
 import { ResetPasswordModule } from '@app/reset-password'
 import { MetaLoader, MetaModule, MetaStaticLoader, PageTitlePositioning } from '@ngx-meta/core'
-import { ClipboardModule } from 'ngx-clipboard'
 import 'focus-visible'
 import { AppRoutingModule } from './app-routing.module'
 import { AppComponent } from './app.component'
 import { CoreModule } from './core'
-import { HeaderComponent } from './header'
+import { HeaderComponent, SearchTypeaheadComponent, SuggestionsComponent, SuggestionComponent } from './header'
 import { LoginModule } from './login'
 import { AvatarNotificationComponent, LanguageChooserComponent, MenuComponent } from './menu'
 import { SharedModule } from './shared'
 import { VideosModule } from './videos'
-import { buildFileLocale, getCompleteLocale, isDefaultLocale } from '../../../shared/models/i18n'
-import { getDevLocale, isOnDevLocale } from '@app/shared/i18n/i18n-utils'
 import { SearchModule } from '@app/search'
 import { WelcomeModalComponent } from '@app/modal/welcome-modal.component'
 import { InstanceConfigWarningModalComponent } from '@app/modal/instance-config-warning-modal.component'
+import { buildFileLocale, getCompleteLocale, isDefaultLocale } from '@shared/models'
+import { APP_BASE_HREF } from '@angular/common'
 export function metaFactory (serverService: ServerService): MetaLoader {
  return new MetaStaticLoader({
@@ -42,14 +41,15 @@ export function metaFactory (serverService: ServerService): MetaLoader {
    LanguageChooserComponent,
    AvatarNotificationComponent,
    HeaderComponent,
+    SearchTypeaheadComponent,
+    SuggestionsComponent,
+    SuggestionComponent,
    WelcomeModalComponent,
    InstanceConfigWarningModalComponent
  ],
  imports: [
    BrowserModule,
-    // FIXME: https://github.com/maxisam/ngx-clipboard/issues/133
-    ClipboardModule,
    CoreModule,
    SharedModule,
@@ -69,17 +69,17 @@ export function metaFactory (serverService: ServerService): MetaLoader {
    AppRoutingModule // Put it after all the module because it has the 404 route
  ],
  providers: [
    {
+      provide: APP_BASE_HREF,
+      useValue: '/'
+    },
+    {
      provide: TRANSLATIONS,
      useFactory: (locale: string) => {
-        // On dev mode, test localization
+                // Default locale, nothing to translate
-        if (isOnDevLocale()) {
-          locale = buildFileLocale(getDevLocale())
-          return require(`raw-loader!../locale/angular.${locale}.xlf`)
-        }
-        // Default locale, nothing to translate
        const completeLocale = getCompleteLocale(locale)
        if (isDefaultLocale(completeLocale)) return ''
diff --git a/client/src/app/core/hotkeys/hotkeys.component.scss b/client/src/app/core/hotkeys/hotkeys.component.scss
index 3aa0b6252..a970260c9 100644
--- a/client/src/app/core/hotkeys/hotkeys.component.scss
+++ b/client/src/app/core/hotkeys/hotkeys.component.scss
@@ -1,3 +1,6 @@
+@import '_variables';
+@import '_mixins';
 .cfp-hotkeys-container {
  display: flex !important;
  align-items: center;
@@ -23,7 +26,7 @@
 }
 .cfp-hotkeys-container.fade.in {
-  z-index: 10002;
+  z-index: z(hotkeys);
  visibility: visible;
  opacity: 1;
 }
@@ -91,7 +94,7 @@
  cursor: pointer;
 }
-@media all and (max-width: 500px) {
+@media all and (max-width: $mobile-view) {
  .cfp-hotkeys {
    font-size: 0.8em;
  }
diff --git a/client/src/app/core/routing/custom-reuse-strategy.ts b/client/src/app/core/routing/custom-reuse-strategy.ts
index a9f61acec..c0f9f04e0 100644
--- a/client/src/app/core/routing/custom-reuse-strategy.ts
+++ b/client/src/app/core/routing/custom-reuse-strategy.ts
@@ -1,5 +1,7 @@
 import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from '@angular/router'
+import { Injectable } from '@angular/core'
+@Injectable()
 export class CustomReuseStrategy implements RouteReuseStrategy {
  storedRouteHandles = new Map<string, DetachedRouteHandle>()
  recentlyUsed: string
@@ -76,6 +78,6 @@ export class CustomReuseStrategy implements RouteReuseStrategy {
  }
  private isReuseEnabled (route: ActivatedRouteSnapshot) {
-    return route.data.reuse && route.data.reuse.enabled && route.queryParams['a-state']
+    return route.data.reuse && route.data.reuse.enabled && route.queryParams[ 'a-state' ]
  }
 }
diff --git a/client/src/app/core/routing/preload-selected-modules-list.ts b/client/src/app/core/routing/preload-selected-modules-list.ts
index 3bca60317..64af68225 100644
--- a/client/src/app/core/routing/preload-selected-modules-list.ts
+++ b/client/src/app/core/routing/preload-selected-modules-list.ts
@@ -1,7 +1,9 @@
-import { Observable, timer as observableTimer, of as ofObservable } from 'rxjs'
+import { Observable, of as ofObservable, timer as observableTimer } from 'rxjs'
 import { switchMap } from 'rxjs/operators'
 import { PreloadingStrategy, Route } from '@angular/router'
+import { Injectable } from '@angular/core'
+@Injectable()
 export class PreloadSelectedModulesList implements PreloadingStrategy {
  preload (route: Route, load: Function): Observable<any> {
    if (!route.data || !route.data.preload) return ofObservable(null)
diff --git a/client/src/app/core/server/server.service.ts b/client/src/app/core/server/server.service.ts
index 3997ce6db..e015d0e14 100644
--- a/client/src/app/core/server/server.service.ts
+++ b/client/src/app/core/server/server.service.ts
@@ -9,6 +9,7 @@ import { VideoConstant } from '../../../../../shared/models/videos'
 import { isDefaultLocale, peertubeTranslate } from '../../../../../shared/models/i18n'
 import { getDevLocale, isOnDevLocale } from '@app/shared/i18n/i18n-utils'
 import { sortBy } from '@app/shared/misc/utils'
+import { ServerStats } from '@shared/models/server'
 @Injectable()
 export class ServerService {
@@ -16,6 +17,8 @@ export class ServerService {
  private static BASE_VIDEO_URL = environment.apiUrl + '/api/v1/videos/'
  private static BASE_VIDEO_PLAYLIST_URL = environment.apiUrl + '/api/v1/video-playlists/'
  private static BASE_LOCALE_URL = environment.apiUrl + '/client/locales/'
+  private static BASE_STATS_URL = environment.apiUrl + '/api/v1/server/stats'
  private static CONFIG_LOCAL_STORAGE_KEY = 'server-config'
  configReloaded = new Subject<void>()
@@ -44,6 +47,12 @@ export class ServerService {
        css: ''
      }
    },
+    search: {
+      remoteUri: {
+        users: true,
+        anonymous: false
+      }
+    },
    plugin: {
      registered: []
    },
@@ -238,6 +247,10 @@ export class ServerService {
    return this.localeObservable.pipe(first())
  }
+  getServerStats () {
+    return this.http.get<ServerStats>(ServerService.BASE_STATS_URL)
+  }
  private loadAttributeEnum <T extends string | number> (
    baseUrl: string,
    attributeName: 'categories' | 'licences' | 'languages' | 'privacies',
diff --git a/client/src/app/header/header.component.html b/client/src/app/header/header.component.html
index 4fd18f9bd..49e219187 100644
--- a/client/src/app/header/header.component.html
+++ b/client/src/app/header/header.component.html
@@ -1,8 +1,4 @@
-<input
+<my-search-typeahead class="w-100 d-flex justify-content-end"></my-search-typeahead>
-  type="text" id="search-video" name="search-video" [attr.aria-label]="ariaLabelTextForSearch" i18n-placeholder placeholder="Search videos, channels…"
-  [(ngModel)]="searchValue" (keyup.enter)="doSearch()"
->
-<span (click)="doSearch()" class="icon icon-search"></span>
 <a class="upload-button" routerLink="/videos/upload">
  <my-global-icon iconName="upload"></my-global-icon>
diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss
index 2bbde74bc..91b390773 100644
--- a/client/src/app/header/header.component.scss
+++ b/client/src/app/header/header.component.scss
@@ -1,51 +1,8 @@
 @import '_variables';
 @import '_mixins';
-#search-video {
+my-search-typeahead {
-  @include peertube-input-text($search-input-width);
-  padding-left: 10px;
  margin-right: 15px;
-  padding-right: 40px; // For the search icon
-  font-size: 14px;
-  transition: box-shadow .3s ease;
-  /* light border style */
-  border: 1px solid var(--mainBackgroundColor);
-  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 20px 0px;
-  &:focus {
-    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 20px 0px;
-  }
-  &::placeholder {
-    color: var(--inputPlaceholderColor);
-  }
-  &:focus::placeholder {
-    opacity: 0 !important;
-  }
-  @media screen and (max-width: 800px) {
-    width: calc(100% - 150px);
-  }
-  @media screen and (max-width: 600px) {
-    width: calc(100% - 70px);
-  }
-}
-.icon.icon-search {
-  @include icon(25px);
-  height: 21px;
-  background-color: var(--mainForegroundColor);
-  mask: url('../../assets/images/header/search.svg') no-repeat 50% 50%;
-  // yolo
-  position: absolute;
-  margin-left: -50px;
-  margin-top: 5px;
 }
 .upload-button {
@@ -56,10 +13,6 @@
  color: var(--mainBackgroundColor) !important;
  margin-right: 25px;
-  @media screen and (max-width: 800px) {
-    margin-right: 0;
-  }
  @media screen and (max-width: 600px) {
    margin-right: 10px;
    padding: 0 10px;
diff --git a/client/src/app/header/header.component.ts b/client/src/app/header/header.component.ts
index 92a7eded6..cce76b0d1 100644
--- a/client/src/app/header/header.component.ts
+++ b/client/src/app/header/header.component.ts
@@ -1,10 +1,4 @@
-import { filter, first, map, tap } from 'rxjs/operators'
+import { Component } from '@angular/core'
-import { Component, OnInit } from '@angular/core'
-import { ActivatedRoute, NavigationEnd, Params, Router } from '@angular/router'
-import { getParameterByName } from '../shared/misc/utils'
-import { AuthService, Notifier, ServerService } from '@app/core'
-import { of } from 'rxjs'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 @Component({
  selector: 'my-header',
@@ -12,54 +6,4 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
  styleUrls: [ './header.component.scss' ]
 })
-export class HeaderComponent implements OnInit {
+export class HeaderComponent {}
-  searchValue = ''
-  ariaLabelTextForSearch = ''
-  constructor (
-    private router: Router,
-    private route: ActivatedRoute,
-    private auth: AuthService,
-    private serverService: ServerService,
-    private authService: AuthService,
-    private notifier: Notifier,
-    private i18n: I18n
-  ) {}
-  ngOnInit () {
-    this.ariaLabelTextForSearch = this.i18n('Search videos, channels')
-    this.router.events
-        .pipe(
-          filter(e => e instanceof NavigationEnd),
-          map(() => getParameterByName('search', window.location.href))
-        )
-        .subscribe(searchQuery => this.searchValue = searchQuery || '')
-  }
-  doSearch () {
-    const queryParams: Params = {}
-    if (window.location.pathname === '/search' && this.route.snapshot.queryParams) {
-      Object.assign(queryParams, this.route.snapshot.queryParams)
-    }
-    Object.assign(queryParams, { search: this.searchValue })
-    const o = this.auth.isLoggedIn()
-      ? this.loadUserLanguagesIfNeeded(queryParams)
-      : of(true)
-    o.subscribe(() => this.router.navigate([ '/search' ], { queryParams }))
-  }
-  private loadUserLanguagesIfNeeded (queryParams: any) {
-    if (queryParams && queryParams.languageOneOf) return of(queryParams)
-    return this.auth.userInformationLoaded
-               .pipe(
-                 first(),
-                 tap(() => Object.assign(queryParams, { languageOneOf: this.auth.getUser().videoLanguages }))
-               )
-  }
-}
diff --git a/client/src/app/header/index.ts b/client/src/app/header/index.ts
index d98d2d00a..a882d4d1f 100644
--- a/client/src/app/header/index.ts
+++ b/client/src/app/header/index.ts
@@ -1 +1,4 @@
 export * from './header.component'
+export * from './search-typeahead.component'
+export * from './suggestions.component'
+export * from './suggestion.component'
diff --git a/client/src/app/header/search-typeahead.component.html b/client/src/app/header/search-typeahead.component.html
new file mode 100644
index 000000000..949defed6
--- /dev/null
+++ b/client/src/app/header/search-typeahead.component.html
@@ -0,0 +1,53 @@
+<div class="d-inline-flex position-relative" id="typeahead-container">
+  <input
+    type="text" id="search-video" name="search-video" #searchVideo i18n-placeholder placeholder="Search videos, channels…"
+    [(ngModel)]="search" (ngModelChange)="onSearchChange()" (keyup)="handleKeyUp($event)"
+  >
+  <span class="icon icon-search" (click)="doSearch()"></span>
+  <div class="position-absolute jump-to-suggestions">
+    <!-- suggestions -->
+    <my-suggestions *ngIf="search && newSearch" [results]="results" [highlight]="search" (init)="initKeyboardEventsManager($event)"></my-suggestions>
+    <!-- suggestion help, not shown until one of the suggestions is selected and specific to that suggestion -->
+    <div *ngIf="showHelp" id="typeahead-help" class="overflow-hidden">
+      <ng-container *ngIf="activeResult.type === 'search-global'">
+        <div class="d-flex justify-content-between">
+          <label class="small-title" i18n>GLOBAL SEARCH</label>
+          <div class="advanced-search-status text-muted">
+            <span *ngIf="serverConfig" class="mr-1" i18n>using {{ serverConfig.followings.instance.autoFollowIndex.indexUrl }}</span>
+            <i class="glyphicon glyphicon-globe"></i>
+          </div>
+        </div>
+        <div class="text-muted" i18n>Results will be augmented with those of a third-party index. Only data necessary to make the query will be sent.</div>
+      </ng-container>
+    </div>
+    <!-- search instructions, when search input is empty -->
+    <div *ngIf="areInstructionsDisplayed" id="typeahead-instructions" class="overflow-hidden">
+      <div class="d-flex justify-content-between">
+        <label class="small-title" i18n>ADVANCED SEARCH</label>
+        <div class="advanced-search-status c-help">
+          <span [ngClass]="canSearchAnyURI ? 'text-success' : 'text-muted'" i18n-title title="Determines whether you can resolve any distant content, or if this instance only allows doing so for instances it follows.">
+            <span *ngIf="canSearchAnyURI" class="mr-1" i18n>any instance</span>
+            <span *ngIf="!canSearchAnyURI" class="mr-1" i18n>only followed instances</span>
+            <i [ngClass]="canSearchAnyURI ? 'glyphicon glyphicon-ok-sign' : 'glyphicon glyphicon-exclamation-sign'"></i>
+          </span>
+        </div>
+      </div>
+      <ul>
+        <li>
+          <em>@username@domain</em> <span class="flex-auto text-muted" i18n>account or channel</span>
+        </li>
+        <li>
+          <em>URL</em> <span class="text-muted" i18n>account or channel</span>
+        </li>
+        <li>
+          <em>UUID</em> <span class="text-muted" i18n>video</span>
+        </li>
+      </ul>
+      <span class="text-muted" i18n>Any other text will return matching video, channel or account names.</span>
+    </div>
+  </div>
+</div>
diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss
new file mode 100644
index 000000000..33b88825f
--- /dev/null
+++ b/client/src/app/header/search-typeahead.component.scss
@@ -0,0 +1,145 @@
+@import '_mixins';
+@import '_variables';
+@import '_bootstrap-variables';
+@import '~bootstrap/scss/mixins/_breakpoints';
+#search-video {
+  @include peertube-input-text($search-input-width);
+  padding-left: 10px;
+  padding-right: 40px; // For the search icon
+  font-size: 14px;
+  &::placeholder {
+    color: var(--inputPlaceholderColor);
+  }
+}
+.icon.icon-search {
+  @include icon(25px);
+  height: 21px;
+  background-color: var(--mainForegroundColor);
+  mask: url('../../assets/images/header/search.svg') no-repeat 50% 50%;
+  // yolo
+  position: absolute;
+  margin-left: -35px;
+  margin-top: 5px;
+}
+.jump-to-suggestions {
+  top: 100%;
+  left: 0;
+  z-index: z(typeahead);
+  width: 100%;
+}
+#typeahead-help,
+#typeahead-instructions,
+my-suggestions ::ng-deep ul {
+  border: 1px solid var(--mainBackgroundColor);
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+  background: var(--mainBackgroundColor);
+  transition: .3s ease;
+  transition-property: box-shadow;
+}
+#typeahead-help,
+#typeahead-instructions {
+  margin-top: 10px;
+  width: 100%;
+  padding: .5rem 1rem;
+  white-space: normal;
+  ul {
+    list-style: none;
+    padding: 0;
+    margin-bottom: .5rem;
+    em {
+      font-weight: 600;
+      margin-right: 0.2rem;
+      font-style: normal;
+    }
+  }
+}
+#typeahead-container {
+  input {
+    border: 1px solid var(--mainBackgroundColor) !important;
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 20px 0px;
+    flex-grow: 1;
+    transition: box-shadow .3s ease, width .2s ease;
+  }
+  @media screen and (min-width: $mobile-view) {
+    margin-left: 10px;
+  }
+  @media screen and (max-width: $small-view) {
+    flex: 1;
+    input {
+      width: unset;
+    }
+  }
+  span {
+    right: 10px;
+  }
+  & > div:last-child {
+    // we have to switch the display and not the opacity, 
+    // to avoid clashing with the rest of the interface.
+    display: none;
+  }
+  &:focus,
+  ::ng-deep &:focus-within {
+    & > div:last-child {
+      @media screen and (min-width: $mobile-view) {
+        display: initial !important;
+      }
+      
+      #typeahead-help,
+      #typeahead-instructions,
+      my-suggestions ::ng-deep ul {
+        box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 20px -5px;
+      }
+    }
+    ::ng-deep input {
+      box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 20px 0px;
+      border-end-start-radius: 0;
+      border-end-end-radius: 0;
+      @include media-breakpoint-up(lg) {
+        width: 500px;
+      }
+    }
+  }
+}
+.glyphicon {
+  top: 3px;
+}
+.advanced-search-status {
+  height: max-content;
+  cursor: default;
+  &.c-help {
+    cursor: help;
+  }
+}
+.small-title {
+  @include in-content-small-title;
+  margin-bottom: .5rem;
+}
+::ng-deep my-suggestion {
+  width: 100%;
+}
diff --git a/client/src/app/header/search-typeahead.component.ts b/client/src/app/header/search-typeahead.component.ts
new file mode 100644
index 000000000..396a875c8
--- /dev/null
+++ b/client/src/app/header/search-typeahead.component.ts
@@ -0,0 +1,178 @@
+import { Component, ElementRef, OnDestroy, OnInit, QueryList, ViewChild } from '@angular/core'
+import { ActivatedRoute, Params, Router } from '@angular/router'
+import { AuthService, ServerService } from '@app/core'
+import { first, tap } from 'rxjs/operators'
+import { ListKeyManager } from '@angular/cdk/a11y'
+import { Result, SuggestionComponent } from './suggestion.component'
+import { of } from 'rxjs'
+import { ServerConfig } from '@shared/models'
+@Component({
+  selector: 'my-search-typeahead',
+  templateUrl: './search-typeahead.component.html',
+  styleUrls: [ './search-typeahead.component.scss' ]
+})
+export class SearchTypeaheadComponent implements OnInit, OnDestroy {
+  @ViewChild('searchVideo', { static: true }) searchInput: ElementRef<HTMLInputElement>
+  hasChannel = false
+  inChannel = false
+  newSearch = true
+  search = ''
+  serverConfig: ServerConfig
+  inThisChannelText: string
+  keyboardEventsManager: ListKeyManager<SuggestionComponent>
+  results: Result[] = []
+  constructor (
+    private authService: AuthService,
+    private router: Router,
+    private route: ActivatedRoute,
+    private serverService: ServerService
+  ) {}
+  ngOnInit () {
+    this.route.queryParams
+      .pipe(first(params => params.search !== undefined && params.search !== null))
+      .subscribe(params => this.search = params.search)
+    this.serverService.getConfig()
+      .subscribe(config => this.serverConfig = config)
+  }
+  ngOnDestroy () {
+    if (this.keyboardEventsManager) this.keyboardEventsManager.change.unsubscribe()
+  }
+  get activeResult () {
+    return this.keyboardEventsManager?.activeItem?.result
+  }
+  get areInstructionsDisplayed () {
+    return !this.search
+  }
+  get showHelp () {
+    return this.search && this.newSearch && this.activeResult?.type === 'search-global'
+  }
+  get canSearchAnyURI () {
+    if (!this.serverConfig) return false
+    return this.authService.isLoggedIn()
+      ? this.serverConfig.search.remoteUri.users
+      : this.serverConfig.search.remoteUri.anonymous
+  }
+  onSearchChange () {
+    this.computeResults()
+  }
+  computeResults () {
+    this.newSearch = true
+    let results: Result[] = []
+    if (this.search) {
+      results = [
+        /* Channel search is still unimplemented. Uncomment when it is.
+        {
+          text: this.search,
+          type: 'search-channel'
+        },
+        */
+        {
+          text: this.search,
+          type: 'search-instance',
+          default: true
+        },
+        /* Global search is still unimplemented. Uncomment when it is.
+        {
+          text: this.search,
+          type: 'search-global'
+        },
+        */
+        ...results
+      ]
+    }
+    this.results = results.filter(
+      (result: Result) => {
+        // if we're not in a channel or one of its videos/playlits, show all channel-related results
+        if (!(this.hasChannel || this.inChannel)) return !result.type.includes('channel')
+        // if we're in a channel, show all channel-related results except for the channel redirection itself
+        if (this.inChannel) return result.type !== 'channel'
+        // all other result types are kept
+        return true
+      }
+    )
+  }
+  setEventItems (event: { items: QueryList<SuggestionComponent>, index?: number }) {
+    event.items.forEach(e => {
+      if (this.keyboardEventsManager.activeItem && this.keyboardEventsManager.activeItem === e) {
+        this.keyboardEventsManager.activeItem.active = true
+      } else {
+        e.active = false
+      }
+    })
+  }
+  initKeyboardEventsManager (event: { items: QueryList<SuggestionComponent>, index?: number }) {
+    if (this.keyboardEventsManager) this.keyboardEventsManager.change.unsubscribe()
+    this.keyboardEventsManager = new ListKeyManager(event.items)
+    if (event.index !== undefined) {
+      this.keyboardEventsManager.setActiveItem(event.index)
+    } else {
+      this.keyboardEventsManager.setFirstItemActive()
+    }
+    this.keyboardEventsManager.change.subscribe(
+      _ => this.setEventItems(event)
+    )
+  }
+  handleKeyUp (event: KeyboardEvent) {
+    event.stopImmediatePropagation()
+    if (!this.keyboardEventsManager) return
+    switch (event.key) {
+      case 'ArrowDown':
+      case 'ArrowUp':
+        this.keyboardEventsManager.onKeydown(event)
+        break
+      case 'Enter':
+        this.newSearch = false
+        this.doSearch()
+        break
+    }
+  }
+  doSearch () {
+    const queryParams: Params = {}
+    if (window.location.pathname === '/search' && this.route.snapshot.queryParams) {
+      Object.assign(queryParams, this.route.snapshot.queryParams)
+    }
+    Object.assign(queryParams, { search: this.search })
+    const o = this.authService.isLoggedIn()
+      ? this.loadUserLanguagesIfNeeded(queryParams)
+      : of(true)
+    o.subscribe(() => this.router.navigate([ '/search' ], { queryParams }))
+  }
+  private loadUserLanguagesIfNeeded (queryParams: any) {
+    if (queryParams && queryParams.languageOneOf) return of(queryParams)
+    return this.authService.userInformationLoaded
+               .pipe(
+                 first(),
+                 tap(() => Object.assign(queryParams, { languageOneOf: this.authService.getUser().videoLanguages }))
+               )
+  }
+}
diff --git a/client/src/app/header/suggestion.component.html b/client/src/app/header/suggestion.component.html
new file mode 100644
index 000000000..d7ae3450a
--- /dev/null
+++ b/client/src/app/header/suggestion.component.html
@@ -0,0 +1,22 @@
+<a tabindex="-1" class="d-flex flex-auto flex-items-center p-2" [class.focus-visible]="active">
+  <div class="flex-shrink-0 mr-2 text-center">
+    <my-global-icon *ngIf="result.type !== 'channel'" iconName="search"></my-global-icon>
+    <my-global-icon *ngIf="result.type === 'channel'" iconName="folder"></my-global-icon>
+  </div>
+  <img class="avatar mr-2 flex-shrink-0 d-none" alt="" aria-label="Team" src="" width="28" height="28">
+  <div class="flex-auto overflow-hidden text-left no-wrap css-truncate css-truncate-target" [attr.aria-label]="result.text" [innerHTML]="result.text | highlight : highlight"></div>
+  <div *ngIf="result.type !== 'channel' && result.type !== 'suggestion'" class="border rounded flex-shrink-0 px-1 bg-gray text-gray-light ml-1 f6">
+    <span *ngIf="result.type === 'search-channel'" i18n>In this channel</span>
+    <span *ngIf="result.type === 'search-instance'" i18n>In this instance</span>
+    <span *ngIf="result.type === 'search-global'" i18n>In the vidiverse</span>
+    <span *ngIf="result.type === 'search-any'" aria-hidden="true" class="d-inline-block ml-1 v-align-middle">↵</span>
+  </div>
+  <div *ngIf="result.type === 'channel'" aria-hidden="true" class="border rounded flex-shrink-0 px-1 bg-gray text-gray-light ml-1 f6 d-on-nav-focus" i18n>
+    Jump to channel
+    <span class="d-inline-block ml-1 v-align-middle">↵</span>
+  </div>
+</a>
+\ No newline at end of file
diff --git a/client/src/app/header/suggestion.component.scss b/client/src/app/header/suggestion.component.scss
new file mode 100644
index 000000000..1de2f43bd
--- /dev/null
+++ b/client/src/app/header/suggestion.component.scss
@@ -0,0 +1,32 @@
+@import '_mixins';
+a {
+  @include disable-default-a-behaviour;
+  width: 100%;
+  &, &:hover {
+    color: var(--mainForegroundColor);
+    &.focus-visible {
+      background-color: var(--mainHoverColor);
+      color: var(--mainBackgroundColor);
+    }
+  }
+}
+.bg-gray {
+  background-color: var(--mainBackgroundColor);
+}
+.text-gray-light {
+  color: var(--mainForegroundColor);
+}
+my-global-icon {
+  width: 17px;
+  position: relative;
+  top: -2px;
+  margin: 5px;
+  @include apply-svg-color(var(--mainForegroundColor));
+}
diff --git a/client/src/app/header/suggestion.component.ts b/client/src/app/header/suggestion.component.ts
new file mode 100644
index 000000000..69641b511
--- /dev/null
+++ b/client/src/app/header/suggestion.component.ts
@@ -0,0 +1,37 @@
+import { Input, Component, Output, EventEmitter, OnInit, ChangeDetectionStrategy } from '@angular/core'
+import { RouterLink } from '@angular/router'
+import { ListKeyManagerOption } from '@angular/cdk/a11y'
+export type Result = {
+  text: string
+  type: 'channel' | 'suggestion' | 'search-channel' | 'search-instance' | 'search-global' | 'search-any'
+  routerLink?: RouterLink,
+  default?: boolean
+}
+@Component({
+  selector: 'my-suggestion',
+  templateUrl: './suggestion.component.html',
+  styleUrls: [ './suggestion.component.scss' ],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SuggestionComponent implements OnInit, ListKeyManagerOption {
+  @Input() result: Result
+  @Input() highlight: string
+  @Output() selected = new EventEmitter()
+  disabled = false
+  active = false
+  getLabel () {
+    return this.result.text
+  }
+  ngOnInit () {
+    if (this.result.default) this.active = true
+  }
+  selectItem () {
+    this.selected.emit(this.result)
+  }
+}
diff --git a/client/src/app/header/suggestions.component.html b/client/src/app/header/suggestions.component.html
new file mode 100644
index 000000000..8d017d78d
--- /dev/null
+++ b/client/src/app/header/suggestions.component.html
@@ -0,0 +1,6 @@
+<ul role="listbox" class="p-0 m-0">
+  <li *ngFor="let result of results; let i = index" class="d-flex flex-justify-start flex-items-center p-0 f5"
+      role="option" aria-selected="true" (mouseenter)="hoverItem(i)">
+    <my-suggestion [result]="result" [highlight]="highlight"></my-suggestion>
+  </li>
+</ul>
+\ No newline at end of file
diff --git a/client/src/app/header/suggestions.component.ts b/client/src/app/header/suggestions.component.ts
new file mode 100644
index 000000000..ee3ef73c2
--- /dev/null
+++ b/client/src/app/header/suggestions.component.ts
@@ -0,0 +1,24 @@
+import { Input, QueryList, Component, Output, AfterViewInit, EventEmitter, ViewChildren, ChangeDetectionStrategy } from '@angular/core'
+import { SuggestionComponent } from './suggestion.component'
+@Component({
+  selector: 'my-suggestions',
+  templateUrl: './suggestions.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SuggestionsComponent implements AfterViewInit {
+  @Input() results: any[]
+  @Input() highlight: string
+  @ViewChildren(SuggestionComponent) listItems: QueryList<SuggestionComponent>
+  @Output() init = new EventEmitter()
+  ngAfterViewInit () {
+    this.listItems.changes.subscribe(
+      _ => this.init.emit({ items: this.listItems })
+    )
+  }
+  hoverItem (index: number) {
+    this.init.emit({ items: this.listItems, index: index })
+  }
+}
diff --git a/client/src/app/login/login.component.html b/client/src/app/login/login.component.html
index 0b0bacff0..38b59a1eb 100644
--- a/client/src/app/login/login.component.html
+++ b/client/src/app/login/login.component.html
@@ -47,7 +47,7 @@
          type="password" name="password" id="password" i18n-placeholder placeholder="Password" required tabindex="2" autocomplete="current-password"
          formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
        >
-        <a i18n class="forgot-password-button" (click)="openForgotPasswordModal()" title="Click here to reset your password">I forgot my password</a>
+        <a i18n-title class="forgot-password-button" (click)="openForgotPasswordModal()" title="Click here to reset your password">I forgot my password</a>
      </div>
      <div *ngIf="formErrors.password" class="form-error">
        {{ formErrors.password }}
diff --git a/client/src/app/menu/avatar-notification.component.html b/client/src/app/menu/avatar-notification.component.html
index 7975afba5..df2a102a3 100644
--- a/client/src/app/menu/avatar-notification.component.html
+++ b/client/src/app/menu/avatar-notification.component.html
@@ -30,7 +30,7 @@
    </div>
    <my-user-notifications
-      [ignoreLoadingBar]="true" [infiniteScroll]="false" itemsPerPage="10"
+      [ignoreLoadingBar]="true" [infiniteScroll]="false" [itemsPerPage]="10"
      [markAllAsReadSubject]="markAllAsReadSubject" (notificationsLoaded)="onNotificationLoaded()"
    ></my-user-notifications>
diff --git a/client/src/app/menu/avatar-notification.component.ts b/client/src/app/menu/avatar-notification.component.ts
index 989a11849..c447f031c 100644
--- a/client/src/app/menu/avatar-notification.component.ts
+++ b/client/src/app/menu/avatar-notification.component.ts
@@ -6,7 +6,6 @@ import { Notifier, UserNotificationSocket } from '@app/core'
 import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
 import { NavigationEnd, Router } from '@angular/router'
 import { filter } from 'rxjs/operators'
-import { UserNotificationsComponent } from '@app/shared'
 @Component({
  selector: 'my-avatar-notification',
diff --git a/client/src/app/menu/language-chooser.component.ts b/client/src/app/menu/language-chooser.component.ts
index 4a6e4c75a..43f622dfb 100644
--- a/client/src/app/menu/language-chooser.component.ts
+++ b/client/src/app/menu/language-chooser.component.ts
@@ -21,7 +21,7 @@ export class LanguageChooserComponent {
  }
  show () {
-    this.modalService.open(this.modal)
+    this.modalService.open(this.modal, { centered: true })
  }
  buildLanguageLink (lang: { id: string }) {
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
index 675fb597d..790a8af00 100644
--- a/client/src/app/menu/menu.component.html
+++ b/client/src/app/menu/menu.component.html
@@ -8,10 +8,10 @@
          <a *ngIf="user.account" [routerLink]="[ '/accounts', user.account.nameWithHost ]" class="logged-in-display-name">{{ user.account?.displayName }}</a>
          <a *ngIf="!user.account" routerLink="/my-account/settings" class="logged-in-display-name">{{ user.account?.displayName }}</a>
-          <div ngxClipboard [cbContent]="user.account?.nameWithHost" class="logged-in-username">{{ user.username }}</div>
+          <div class="logged-in-username">{{ user.username }}</div>
        </div>
-        <div class="logged-in-more" ngbDropdown placement="bottom-right auto">
+        <div class="logged-in-more" ngbDropdown placement="bottom-right auto" container="body">
          <my-global-icon iconName="more-vertical" ngbDropdownToggle role="button"></my-global-icon>
          <div ngbDropdownMenu>
@@ -48,7 +48,7 @@
      </div>
      <div *ngIf="isLoggedIn" class="panel-block">
-        <div i18n class="block-title">My library</div>
+        <div i18n class="block-title">MY LIBRARY</div>
        <a routerLink="/my-account/videos" routerLinkActive="active">
          <my-global-icon iconName="videos"></my-global-icon>
@@ -73,7 +73,7 @@
      </div>
      <div class="panel-block">
-        <div i18n class="block-title">Videos</div>
+        <div i18n class="block-title">VIDEOS</div>
        <a routerLink="/videos/overview" routerLinkActive="active">
          <my-global-icon iconName="globe"></my-global-icon>
@@ -102,7 +102,7 @@
      </div>
      <div class="panel-block">
-        <div class="block-title" i18n>More</div>
+        <div class="block-title" i18n>MORE</div>
        <a *ngIf="userHasAdminAccess" [routerLink]="getFirstAdminRouteAvailable()" routerLinkActive="active">
          <my-global-icon iconName="administration"></my-global-icon>
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index b05173751..40c9a2b25 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -6,7 +6,8 @@
  height: calc(100vh - #{$header-height});
  padding: 0;
  width: $menu-width;
-  z-index: 10000;
+  z-index: z(menu);
+  scrollbar-color: var(--actionButtonColor) var(--menuBackgroundColor);
 }
 menu {
diff --git a/client/src/app/modal/instance-config-warning-modal.component.html b/client/src/app/modal/instance-config-warning-modal.component.html
index 93391c0a8..e303104c5 100644
--- a/client/src/app/modal/instance-config-warning-modal.component.html
+++ b/client/src/app/modal/instance-config-warning-modal.component.html
@@ -21,7 +21,7 @@
      <li i18n *ngIf="!about.instance.terms">Instance terms</li>
    </ul>
-    <p>
+    <p i18n>
      Please consider to configure these fields to help people to choose <strong>the appropriate instance</strong>.
      Without them, your instance may not be referenced on <a target="_blank" rel="noopener noreferrer" href="https://joinpeertube.org">JoinPeerTube website</a>.
    </p>
diff --git a/client/src/app/modal/instance-config-warning-modal.component.ts b/client/src/app/modal/instance-config-warning-modal.component.ts
index 742a7dd41..5e1433548 100644
--- a/client/src/app/modal/instance-config-warning-modal.component.ts
+++ b/client/src/app/modal/instance-config-warning-modal.component.ts
@@ -24,7 +24,7 @@ export class InstanceConfigWarningModalComponent {
  show (about: About) {
    this.about = about
-    const ref = this.modalService.open(this.modal)
+    const ref = this.modalService.open(this.modal, { centered: true })
    ref.result.finally(() => {
      if (this.stopDisplayModal === true) this.doNotOpenAgain()
diff --git a/client/src/app/modal/welcome-modal.component.ts b/client/src/app/modal/welcome-modal.component.ts
index 19a147b85..e022776e3 100644
--- a/client/src/app/modal/welcome-modal.component.ts
+++ b/client/src/app/modal/welcome-modal.component.ts
@@ -18,7 +18,8 @@ export class WelcomeModalComponent {
  ) { }
  show () {
-    this.modalService.open(this.modal,{
+    this.modalService.open(this.modal, {
+      centered: true,
      backdrop: 'static',
      keyboard: false,
      size: 'lg'
diff --git a/client/src/app/search/search-filters.component.html b/client/src/app/search/search-filters.component.html
index 07fb2c048..60680c7bd 100644
--- a/client/src/app/search/search-filters.component.html
+++ b/client/src/app/search/search-filters.component.html
@@ -103,7 +103,7 @@
        </button>
        <div class="peertube-select-container">
          <select id="category" name="category" [(ngModel)]="advancedSearch.categoryOneOf">
-            <option [value]="undefined" i18n>Any or no category set</option>
+            <option [value]="undefined" i18n>Display all categories</option>
            <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
          </select>
        </div>
@@ -116,7 +116,7 @@
        </button>
        <div class="peertube-select-container">
          <select id="licence" name="licence" [(ngModel)]="advancedSearch.licenceOneOf">
-            <option [value]="undefined" i18n>Any or no license set</option>
+            <option [value]="undefined" i18n>Display all licenses</option>
            <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
          </select>
        </div>
@@ -129,7 +129,7 @@
        </button>
        <div class="peertube-select-container">
          <select id="language" name="language" [(ngModel)]="advancedSearch.languageOneOf">
-            <option [value]="undefined" i18n>Any or no language set</option>
+            <option [value]="undefined" i18n>Display all languages</option>
            <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
          </select>
        </div>
@@ -146,7 +146,7 @@
          [(ngModel)]="advancedSearch.tagsAllOf" name="tagsAllOf" id="tagsAllOf"
          [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
          i18n-placeholder placeholder="+ Tag" i18n-secondaryPlaceholder secondaryPlaceholder="Enter a tag"
-          maxItems="5" modelAsStrings="true"
+          [maxItems]="5" [modelAsStrings]="true"
        ></tag-input>
      </div>
@@ -159,7 +159,7 @@
          [(ngModel)]="advancedSearch.tagsOneOf" name="tagsOneOf" id="tagsOneOf"
          [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
          i18n-placeholder placeholder="+ Tag" i18n-secondaryPlaceholder secondaryPlaceholder="Enter a tag"
-          maxItems="5" modelAsStrings="true"
+          [maxItems]="5" [modelAsStrings]="true"
        ></tag-input>
      </div>
    </div>
diff --git a/client/src/app/search/search.component.ts b/client/src/app/search/search.component.ts
index dfd8d8823..075994dd3 100644
--- a/client/src/app/search/search.component.ts
+++ b/client/src/app/search/search.component.ts
@@ -141,7 +141,8 @@ export class SearchComponent implements OnInit, OnDestroy {
    return this.advancedSearch.size()
  }
-  removeVideoFromArray (video: Video) {
+  // Add VideoChannel for typings, but the template already checks "video" argument is a video
+  removeVideoFromArray (video: Video | VideoChannel) {
    this.results = this.results.filter(r => !this.isVideo(r) || r.id !== video.id)
  }
diff --git a/client/src/app/shared/angular/highlight.pipe.ts b/client/src/app/shared/angular/highlight.pipe.ts
new file mode 100644
index 000000000..fb6042280
--- /dev/null
+++ b/client/src/app/shared/angular/highlight.pipe.ts
@@ -0,0 +1,54 @@
+import { PipeTransform, Pipe } from '@angular/core'
+import { SafeHtml } from '@angular/platform-browser'
+// Thanks https://gist.github.com/adamrecsko/0f28f474eca63e0279455476cc11eca7#gistcomment-2917369
+@Pipe({ name: 'highlight' })
+export class HighlightPipe implements PipeTransform {
+  /* use this for single match search */
+  static SINGLE_MATCH = 'Single-Match'
+  /* use this for single match search with a restriction that target should start with search string */
+  static SINGLE_AND_STARTS_WITH_MATCH = 'Single-And-StartsWith-Match'
+  /* use this for global search */
+  static MULTI_MATCH = 'Multi-Match'
+  // tslint:disable-next-line:no-empty
+  constructor () {}
+  transform (
+      contentString: string = null,
+      stringToHighlight: string = null,
+      option = 'Single-And-StartsWith-Match',
+      caseSensitive = false,
+      highlightStyleName = 'search-highlight'
+  ): SafeHtml {
+    if (stringToHighlight && contentString && option) {
+      let regex: any = ''
+      const caseFlag: string = !caseSensitive ? 'i' : ''
+      switch (option) {
+        case 'Single-Match': {
+          regex = new RegExp(stringToHighlight, caseFlag)
+          break
+        }
+        case 'Single-And-StartsWith-Match': {
+          regex = new RegExp('^' + stringToHighlight, caseFlag)
+          break
+        }
+        case 'Multi-Match': {
+          regex = new RegExp(stringToHighlight, 'g' + caseFlag)
+          break
+        }
+        default: {
+          // default will be a global case-insensitive match
+          regex = new RegExp(stringToHighlight, 'gi')
+        }
+      }
+      const replaced = contentString.replace(
+          regex,
+          (match) => `<span class="${highlightStyleName}">${match}</span>`
+      )
+      return replaced
+    } else {
+      return contentString
+    }
+  }
+}
diff --git a/client/src/app/shared/buttons/action-dropdown.component.ts b/client/src/app/shared/buttons/action-dropdown.component.ts
index a8b3ab16c..6649b092a 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.ts
+++ b/client/src/app/shared/buttons/action-dropdown.component.ts
@@ -34,10 +34,10 @@ export class ActionDropdownComponent<T> {
  @Input() label: string
  @Input() theme: DropdownTheme = 'grey'
-  getActions () {
+  getActions (): DropdownAction<T>[][] {
-    if (this.actions.length !== 0 && Array.isArray(this.actions[0])) return this.actions
+    if (this.actions.length !== 0 && Array.isArray(this.actions[0])) return this.actions as DropdownAction<T>[][]
-    return [ this.actions ]
+    return [ this.actions as DropdownAction<T>[] ]
  }
  areActionsDisplayed (actions: Array<DropdownAction<T> | DropdownAction<T>[]>, entry: T): boolean {
diff --git a/client/src/app/shared/buttons/button.component.scss b/client/src/app/shared/buttons/button.component.scss
index 2a8cfc748..3ccfefd7e 100644
--- a/client/src/app/shared/buttons/button.component.scss
+++ b/client/src/app/shared/buttons/button.component.scss
@@ -10,11 +10,26 @@ my-small-loader ::ng-deep .root {
 .action-button {
  @include peertube-button-link;
  @include button-with-icon(21px, 0, -2px);
+}
-  // FIXME: Firefox does not apply global .orange-button icon color
+.orange-button {
-  &.orange-button {
+  @include peertube-button;
-    @include apply-svg-color(#fff)
+  @include orange-button;
-  }
+}
+.orange-button-link {
+  @include peertube-button-link;
+  @include orange-button;
+}
+.grey-button {
+  @include peertube-button;
+  @include grey-button;
+}
+.grey-button-link {
+  @include peertube-button-link;
+  @include grey-button;
 }
 // In a table, try to minimize the space taken by this button
diff --git a/client/src/app/shared/buttons/edit-button.component.ts b/client/src/app/shared/buttons/edit-button.component.ts
index 1fe4f7b30..9cfe1a3bb 100644
--- a/client/src/app/shared/buttons/edit-button.component.ts
+++ b/client/src/app/shared/buttons/edit-button.component.ts
@@ -8,5 +8,5 @@ import { Component, Input } from '@angular/core'
 export class EditButtonComponent {
  @Input() label: string
-  @Input() routerLink: string[] = []
+  @Input() routerLink: string[] | string = []
 }
diff --git a/client/src/app/shared/forms/form-validators/custom-config-validators.service.ts b/client/src/app/shared/forms/form-validators/custom-config-validators.service.ts
index 767e3f026..d20754d11 100644
--- a/client/src/app/shared/forms/form-validators/custom-config-validators.service.ts
+++ b/client/src/app/shared/forms/form-validators/custom-config-validators.service.ts
@@ -56,7 +56,7 @@ export class CustomConfigValidatorsService {
    }
    this.SIGNUP_LIMIT = {
-      VALIDATORS: [ Validators.required, Validators.min(1), Validators.pattern('[0-9]+') ],
+      VALIDATORS: [ Validators.required, Validators.min(-1), Validators.pattern('-?[0-9]+') ],
      MESSAGES: {
        'required': this.i18n('Signup limit is required.'),
        'min': this.i18n('Signup limit must be greater than 1.'),
diff --git a/client/src/app/shared/forms/form-validators/user-validators.service.ts b/client/src/app/shared/forms/form-validators/user-validators.service.ts
index 4dff3e422..13b9228d4 100644
--- a/client/src/app/shared/forms/form-validators/user-validators.service.ts
+++ b/client/src/app/shared/forms/form-validators/user-validators.service.ts
@@ -8,6 +8,7 @@ export class UserValidatorsService {
  readonly USER_USERNAME: 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
@@ -56,6 +57,17 @@ export class UserValidatorsService {
      }
    }
+    this.USER_PASSWORD_OPTIONAL = {
+      VALIDATORS: [
+        Validators.minLength(6),
+        Validators.maxLength(255)
+      ],
+      MESSAGES: {
+        'minlength': this.i18n('Password must be at least 6 characters long.'),
+        'maxlength': this.i18n('Password cannot be more than 255 characters long.')
+      }
+    }
    this.USER_CONFIRM_PASSWORD = {
      VALIDATORS: [],
      MESSAGES: {
diff --git a/client/src/app/shared/forms/input-readonly-copy.component.html b/client/src/app/shared/forms/input-readonly-copy.component.html
index 27571b63f..b6a56ec44 100644
--- a/client/src/app/shared/forms/input-readonly-copy.component.html
+++ b/client/src/app/shared/forms/input-readonly-copy.component.html
@@ -2,7 +2,7 @@
  <input #urlInput (click)="urlInput.select()" type="text" class="form-control readonly" readonly [value]="value" />
  <div class="input-group-append">
-    <button [ngxClipboard]="urlInput" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
+    <button [cdkCopyToClipboard]="urlInput.value" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
      <span class="glyphicon glyphicon-copy"></span>
    </button>
  </div>
diff --git a/client/src/app/shared/forms/markdown-textarea.component.ts b/client/src/app/shared/forms/markdown-textarea.component.ts
index 19cd37573..cbcfdfe78 100644
--- a/client/src/app/shared/forms/markdown-textarea.component.ts
+++ b/client/src/app/shared/forms/markdown-textarea.component.ts
@@ -21,7 +21,7 @@ import { MarkdownService } from '@app/shared/renderer'
 export class MarkdownTextareaComponent implements ControlValueAccessor, OnInit {
  @Input() content = ''
-  @Input() classes: string[] = []
+  @Input() classes: string[] | { [klass: string]: any[] | any } = []
  @Input() textareaWidth = '100%'
  @Input() textareaHeight = '150px'
  @Input() previewColumn = false
diff --git a/client/src/app/shared/images/global-icon.component.ts b/client/src/app/shared/images/global-icon.component.ts
index 806aca347..b6e641228 100644
--- a/client/src/app/shared/images/global-icon.component.ts
+++ b/client/src/app/shared/images/global-icon.component.ts
@@ -1,6 +1,5 @@
 import { ChangeDetectionStrategy, Component, ElementRef, Input, OnInit } from '@angular/core'
 import { HooksService } from '@app/core/plugins/hooks.service'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 const icons = {
  'add': require('!!raw-loader?!../../../assets/images/global/add.svg'),
diff --git a/client/src/app/shared/images/preview-upload.component.ts b/client/src/app/shared/images/preview-upload.component.ts
index f56f5b1f8..85a2173e9 100644
--- a/client/src/app/shared/images/preview-upload.component.ts
+++ b/client/src/app/shared/images/preview-upload.component.ts
@@ -26,7 +26,7 @@ export class PreviewUploadComponent implements OnInit, ControlValueAccessor {
  allowedExtensionsMessage = ''
  private serverConfig: ServerConfig
-  private file: File
+  private file: Blob
  constructor (
    private sanitizer: DomSanitizer,
@@ -49,7 +49,7 @@ export class PreviewUploadComponent implements OnInit, ControlValueAccessor {
    this.allowedExtensionsMessage = this.videoImageExtensions.join(', ')
  }
-  onFileChanged (file: File) {
+  onFileChanged (file: Blob) {
    this.file = file
    this.propagateChange(this.file)
diff --git a/client/src/app/shared/instance/instance-features-table.component.html b/client/src/app/shared/instance/instance-features-table.component.html
index fd8b3354f..99b854d13 100644
--- a/client/src/app/shared/instance/instance-features-table.component.html
+++ b/client/src/app/shared/instance/instance-features-table.component.html
@@ -37,8 +37,8 @@
    <tr>
      <td i18n class="sub-label">Video uploads</td>
      <td>
-        <span *ngIf="serverConfig.autoBlacklist.videos.ofUsers.enabled">Requires manual validation by moderators</span>
+        <span i18n *ngIf="serverConfig.autoBlacklist.videos.ofUsers.enabled">Requires manual validation by moderators</span>
-        <span *ngIf="!serverConfig.autoBlacklist.videos.ofUsers.enabled">Automatically published</span>
+        <span i18n *ngIf="!serverConfig.autoBlacklist.videos.ofUsers.enabled">Automatically published</span>
      </td>
    </tr>
@@ -91,5 +91,16 @@
        <my-feature-boolean [value]="serverConfig.tracker.enabled"></my-feature-boolean>
      </td>
    </tr>
+    <tr>
+      <td i18n class="label" colspan="2">Search</td>
+    </tr>
+    <tr>
+      <td i18n class="sub-label">Users can resolve distant content</td>
+      <td>
+        <my-feature-boolean [value]="serverConfig.search.remoteUri.users"></my-feature-boolean>
+      </td>
+    </tr>
  </table>
 </div>
diff --git a/client/src/app/shared/instance/instance-statistics.component.ts b/client/src/app/shared/instance/instance-statistics.component.ts
index 8ec728f05..40aa8a4c0 100644
--- a/client/src/app/shared/instance/instance-statistics.component.ts
+++ b/client/src/app/shared/instance/instance-statistics.component.ts
@@ -1,9 +1,6 @@
-import { map } from 'rxjs/operators'
-import { HttpClient } from '@angular/common/http'
 import { Component, OnInit } from '@angular/core'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ServerStats } from '@shared/models/server'
-import { environment } from '../../../environments/environment'
+import { ServerService } from '@app/core'
 @Component({
  selector: 'my-instance-statistics',
@@ -11,27 +8,15 @@ import { environment } from '../../../environments/environment'
  styleUrls: [ './instance-statistics.component.scss' ]
 })
 export class InstanceStatisticsComponent implements OnInit {
-  private static BASE_STATS_URL = environment.apiUrl + '/api/v1/server/stats'
  serverStats: ServerStats = null
  constructor (
-    private http: HttpClient,
+    private serverService: ServerService
-    private i18n: I18n
  ) {
  }
  ngOnInit () {
-    this.getStats()
+    this.serverService.getServerStats()
-      .subscribe(
+        .subscribe(res => this.serverStats = res)
-        res => {
-          this.serverStats = res
-        }
-      )
-  }
-  getStats () {
-    return this.http
-      .get<ServerStats>(InstanceStatisticsComponent.BASE_STATS_URL)
  }
 }
diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.ts b/client/src/app/shared/menu/top-menu-dropdown.component.ts
index 5ccdafb54..24a083654 100644
--- a/client/src/app/shared/menu/top-menu-dropdown.component.ts
+++ b/client/src/app/shared/menu/top-menu-dropdown.component.ts
@@ -49,8 +49,7 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
      e => e.children && e.children.some(c => !!c.iconName)
    )
-    // FIXME: We have to set body for the container to avoid because of scroll overflow on mobile view
+    // We have to set body for the container to avoid scroll overflow on mobile view
-    // But this break our hovering system
    if (this.screen.isInMobileView()) {
      this.container = 'body'
    }
diff --git a/client/src/app/shared/misc/list-overflow.component.html b/client/src/app/shared/misc/list-overflow.component.html
new file mode 100644
index 000000000..986572801
--- /dev/null
+++ b/client/src/app/shared/misc/list-overflow.component.html
@@ -0,0 +1,35 @@
+<div #itemsParent class="d-flex align-items-center text-nowrap w-100 list-overflow-parent">
+  <span [id]="getId(id)" #itemsRendered *ngFor="let item of items; index as id">
+    <ng-container *ngTemplateOutlet="itemTemplate; context: {item: item}"></ng-container>
+  </span>
+  
+  <ng-container *ngIf="isMenuDisplayed()">
+    <button *ngIf="isInMobileView" class="btn btn-outline-secondary btn-sm list-overflow-menu" (click)="toggleModal()">
+      <span class="glyphicon glyphicon-chevron-down"></span>
+    </button>
+  
+    <div *ngIf="!isInMobileView" class="list-overflow-menu" ngbDropdown container="body" #dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)" (mouseenter)="openDropdownOnHover(dropdown)">
+      <button class="btn btn-outline-secondary btn-sm" [ngClass]="{ routeActive: active }"
+        ngbDropdownAnchor (click)="dropdownAnchorClicked(dropdown)" role="button"
+      >
+        <span class="glyphicon glyphicon-chevron-down"></span>
+      </button>
+  
+      <div ngbDropdownMenu>
+        <a *ngFor="let item of items | slice:showItemsUntilIndexExcluded:items.length"
+          [routerLink]="item.routerLink" routerLinkActive="active" class="dropdown-item">
+          {{ item.label }}
+        </a>
+      </div>
+    </div>
+  </ng-container>
+</div >
+<ng-template #modal let-close="close" let-dismiss="dismiss">
+  <div class="modal-body">
+    <a *ngFor="let item of items | slice:showItemsUntilIndexExcluded:items.length"
+       [routerLink]="item.routerLink" routerLinkActive="active" (click)="dismissOtherModals()">
+       {{ item.label }}
+    </a>
+  </div>
+</ng-template>
diff --git a/client/src/app/shared/misc/list-overflow.component.scss b/client/src/app/shared/misc/list-overflow.component.scss
new file mode 100644
index 000000000..1e5fe4c10
--- /dev/null
+++ b/client/src/app/shared/misc/list-overflow.component.scss
@@ -0,0 +1,61 @@
+@import '_mixins';
+:host {
+  width: 100%;
+}
+.list-overflow-parent {
+  overflow: hidden;
+}
+.list-overflow-menu {
+  position: absolute;
+  right: 25px;
+}
+button {
+  width: 30px;
+  border: none;
+  &::after {
+    display: none;
+  }
+  &.routeActive {
+    &::after {
+      display: inherit;
+      border: 2px solid var(--mainColor);
+      position: relative;
+      right: 95%;
+      top: 50%;
+    }
+  }
+}
+::ng-deep .dropdown-menu {
+  margin-top: 0 !important;
+  position: static;
+  right: auto;
+  bottom: auto
+}
+.modal-body {
+  a {
+    @include disable-default-a-behaviour;
+    color: currentColor;
+    box-sizing: border-box;
+    display: block;
+    font-size: 1.2rem;
+    padding: 9px 12px;
+    text-align: initial;
+    text-transform: unset;
+    width: 100%;
+    &.active {
+      color: var(--mainBackgroundColor) !important;
+      background-color: var(--mainHoverColor);
+      opacity: .9;
+    }
+  }
+}
diff --git a/client/src/app/shared/misc/list-overflow.component.ts b/client/src/app/shared/misc/list-overflow.component.ts
new file mode 100644
index 000000000..c493ab795
--- /dev/null
+++ b/client/src/app/shared/misc/list-overflow.component.ts
@@ -0,0 +1,119 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  HostListener,
+  Input,
+  QueryList,
+  TemplateRef,
+  ViewChild,
+  ViewChildren
+} from '@angular/core'
+import { NgbDropdown, NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { lowerFirst, uniqueId } from 'lodash-es'
+import { ScreenService } from './screen.service'
+import { take } from 'rxjs/operators'
+export interface ListOverflowItem {
+  label: string
+  routerLink: string | any[]
+}
+@Component({
+  selector: 'list-overflow',
+  templateUrl: './list-overflow.component.html',
+  styleUrls: [ './list-overflow.component.scss' ],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ListOverflowComponent<T extends ListOverflowItem> implements AfterViewInit {
+  @ViewChild('modal', { static: true }) modal: ElementRef
+  @ViewChild('itemsParent', { static: true }) parent: ElementRef<HTMLDivElement>
+  @ViewChildren('itemsRendered') itemsRendered: QueryList<ElementRef>
+  @Input() items: T[]
+  @Input() itemTemplate: TemplateRef<{item: T}>
+  showItemsUntilIndexExcluded: number
+  active = false
+  isInTouchScreen = false
+  isInMobileView = false
+  private openedOnHover = false
+  constructor (
+    private cdr: ChangeDetectorRef,
+    private modalService: NgbModal,
+    private screenService: ScreenService
+  ) {}
+  ngAfterViewInit () {
+    setTimeout(() => this.onWindowResize(), 0)
+  }
+  isMenuDisplayed () {
+    return !!this.showItemsUntilIndexExcluded
+  }
+  @HostListener('window:resize', ['$event'])
+  onWindowResize () {
+    this.isInTouchScreen = !!this.screenService.isInTouchScreen()
+    this.isInMobileView = !!this.screenService.isInMobileView()
+    const parentWidth = this.parent.nativeElement.getBoundingClientRect().width
+    let showItemsUntilIndexExcluded: number
+    let accWidth = 0
+    for (const [index, el] of this.itemsRendered.toArray().entries()) {
+      accWidth += el.nativeElement.getBoundingClientRect().width
+      if (showItemsUntilIndexExcluded === undefined) {
+        showItemsUntilIndexExcluded = (parentWidth < accWidth) ? index : undefined
+      }
+      const e = document.getElementById(this.getId(index))
+      const shouldBeVisible = showItemsUntilIndexExcluded ? index < showItemsUntilIndexExcluded : true
+      e.style.visibility = shouldBeVisible ? 'inherit' : 'hidden'
+    }
+    this.showItemsUntilIndexExcluded = showItemsUntilIndexExcluded
+    this.cdr.markForCheck()
+  }
+  openDropdownOnHover (dropdown: NgbDropdown) {
+    this.openedOnHover = true
+    dropdown.open()
+    // Menu was closed
+    dropdown.openChange
+            .pipe(take(1))
+            .subscribe(() => this.openedOnHover = false)
+  }
+  dropdownAnchorClicked (dropdown: NgbDropdown) {
+    if (this.openedOnHover) {
+      this.openedOnHover = false
+      return
+    }
+    return dropdown.toggle()
+  }
+  closeDropdownIfHovered (dropdown: NgbDropdown) {
+    if (this.openedOnHover === false) return
+    dropdown.close()
+    this.openedOnHover = false
+  }
+  toggleModal () {
+    this.modalService.open(this.modal, { centered: true })
+  }
+  dismissOtherModals () {
+    this.modalService.dismissAll()
+  }
+  getId (id: number | string = uniqueId()): string {
+    return lowerFirst(this.constructor.name) + '_' + id
+  }
+}
diff --git a/client/src/app/shared/moderation/user-ban-modal.component.ts b/client/src/app/shared/moderation/user-ban-modal.component.ts
index cf0e1577a..1647e3691 100644
--- a/client/src/app/shared/moderation/user-ban-modal.component.ts
+++ b/client/src/app/shared/moderation/user-ban-modal.component.ts
@@ -39,7 +39,7 @@ export class UserBanModalComponent extends FormReactive implements OnInit {
  openModal (user: User | User[]) {
    this.usersToBan = user
-    this.openedModal = this.modalService.open(this.modal)
+    this.openedModal = this.modalService.open(this.modal, { centered: true })
  }
  hide () {
diff --git a/client/src/app/shared/moderation/user-moderation-dropdown.component.ts b/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
index 11d8588f4..9197556b0 100644
--- a/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
+++ b/client/src/app/shared/moderation/user-moderation-dropdown.component.ts
@@ -14,7 +14,7 @@ import { ServerConfig } from '@shared/models'
  templateUrl: './user-moderation-dropdown.component.html'
 })
 export class UserModerationDropdownComponent implements OnInit, OnChanges {
-  @ViewChild('userBanModal', { static: false }) userBanModal: UserBanModalComponent
+  @ViewChild('userBanModal') userBanModal: UserBanModalComponent
  @Input() user: User
  @Input() account: Account
diff --git a/client/src/app/shared/renderer/markdown.service.ts b/client/src/app/shared/renderer/markdown.service.ts
index 0d3fde537..f0c87326f 100644
--- a/client/src/app/shared/renderer/markdown.service.ts
+++ b/client/src/app/shared/renderer/markdown.service.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core'
-import { MarkdownIt } from 'markdown-it'
 import { buildVideoLink } from '../../../assets/player/utils'
 import { HtmlRendererService } from '@app/shared/renderer/html-renderer.service'
+import * as MarkdownIt from 'markdown-it'
 type MarkdownParsers = {
  textMarkdownIt: MarkdownIt
@@ -100,7 +100,7 @@ export class MarkdownService {
  }
  private async createMarkdownIt (config: MarkdownConfig) {
-    // FIXME: import('...') returns a struct module, containing a "default" field corresponding to our sanitizeHtml function
+    // FIXME: import('...') returns a struct module, containing a "default" field
    const MarkdownItClass: typeof import ('markdown-it') = (await import('markdown-it') as any).default
    const markdownIt = new MarkdownItClass('zero', { linkify: true, breaks: true, html: config.html })
diff --git a/client/src/app/shared/rest/rest-table.ts b/client/src/app/shared/rest/rest-table.ts
index c180346af..a33e99e25 100644
--- a/client/src/app/shared/rest/rest-table.ts
+++ b/client/src/app/shared/rest/rest-table.ts
@@ -1,6 +1,5 @@
 import { peertubeLocalStorage } from '@app/shared/misc/peertube-web-storage'
-import { LazyLoadEvent } from 'primeng/components/common/lazyloadevent'
+import { LazyLoadEvent, SortMeta } from 'primeng/api'
-import { SortMeta } from 'primeng/components/common/sortmeta'
 import { RestPagination } from './rest-pagination'
 import { Subject } from 'rxjs'
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators'
@@ -66,8 +65,9 @@ export abstract class RestTable {
      })
  }
-  onSearch (search: string) {
+  onSearch (event: Event) {
-    this.searchStream.next(search)
+    const target = event.target as HTMLInputElement
+    this.searchStream.next(target.value)
  }
  protected abstract loadData (): void
diff --git a/client/src/app/shared/rest/rest.service.ts b/client/src/app/shared/rest/rest.service.ts
index 16bb6d82c..5bd2b5e43 100644
--- a/client/src/app/shared/rest/rest.service.ts
+++ b/client/src/app/shared/rest/rest.service.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core'
 import { HttpParams } from '@angular/common/http'
-import { SortMeta } from 'primeng/components/common/sortmeta'
+import { SortMeta } from 'primeng/api'
 import { ComponentPagination, ComponentPaginationLight } from './component-pagination.model'
 import { RestPagination } from './rest-pagination'
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index b2eb13f73..30b3ba0c1 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -5,9 +5,10 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { RouterModule } from '@angular/router'
 import { MarkdownTextareaComponent } from '@app/shared/forms/markdown-textarea.component'
 import { HelpComponent } from '@app/shared/misc/help.component'
+import { ListOverflowComponent } from '@app/shared/misc/list-overflow.component'
 import { InfiniteScrollerDirective } from '@app/shared/video/infinite-scroller.directive'
 import { BytesPipe, KeysPipe, NgPipesModule } from 'ngx-pipes'
-import { SharedModule as PrimeSharedModule } from 'primeng/components/common/shared'
+import { SharedModule as PrimeSharedModule } from 'primeng/api'
 import { AUTH_INTERCEPTOR_PROVIDER } from './auth'
 import { ButtonComponent } from './buttons/button.component'
 import { DeleteButtonComponent } from './buttons/delete-button.component'
@@ -88,16 +89,18 @@ import { NumberFormatterPipe } from '@app/shared/angular/number-formatter.pipe'
 import { VideoDurationPipe } from '@app/shared/angular/video-duration-formatter.pipe'
 import { ObjectLengthPipe } from '@app/shared/angular/object-length.pipe'
 import { FromNowPipe } from '@app/shared/angular/from-now.pipe'
+import { HighlightPipe } from '@app/shared/angular/highlight.pipe'
 import { PeerTubeTemplateDirective } from '@app/shared/angular/peertube-template.directive'
 import { VideoActionsDropdownComponent } from '@app/shared/video/video-actions-dropdown.component'
 import { VideoBlacklistComponent } from '@app/shared/video/modals/video-blacklist.component'
 import { VideoDownloadComponent } from '@app/shared/video/modals/video-download.component'
 import { VideoReportComponent } from '@app/shared/video/modals/video-report.component'
-import { ClipboardModule } from 'ngx-clipboard'
 import { FollowService } from '@app/shared/instance/follow.service'
 import { MultiSelectModule } from 'primeng/multiselect'
 import { FeatureBooleanComponent } from '@app/shared/instance/feature-boolean.component'
 import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-copy.component'
+import { RedundancyService } from '@app/shared/video/redundancy.service'
+import { ClipboardModule } from '@angular/cdk/clipboard'
 @NgModule({
  imports: [
@@ -147,6 +150,7 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop
    NumberFormatterPipe,
    ObjectLengthPipe,
    FromNowPipe,
+    HighlightPipe,
    PeerTubeTemplateDirective,
    VideoDurationPipe,
@@ -155,6 +159,7 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop
    InfiniteScrollerDirective,
    TextareaAutoResizeDirective,
    HelpComponent,
+    ListOverflowComponent,
    ReactiveFileComponent,
    PeertubeCheckboxComponent,
@@ -226,6 +231,7 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop
    InfiniteScrollerDirective,
    TextareaAutoResizeDirective,
    HelpComponent,
+    ListOverflowComponent,
    InputReadonlyCopyComponent,
    ReactiveFileComponent,
@@ -250,6 +256,7 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop
    NumberFormatterPipe,
    ObjectLengthPipe,
    FromNowPipe,
+    HighlightPipe,
    PeerTubeTemplateDirective,
    VideoDurationPipe
  ],
@@ -300,6 +307,7 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop
    UserNotificationService,
    FollowService,
+    RedundancyService,
    I18n
  ]
diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.html b/client/src/app/shared/user-subscription/subscribe-button.component.html
index f08c88f3c..85b3d1fdb 100644
--- a/client/src/app/shared/user-subscription/subscribe-button.component.html
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.html
@@ -55,7 +55,7 @@
      </button>
      <button class="dropdown-item dropdown-item-neutral" i18n>Subscribe with a Mastodon account:</button>
-      <my-remote-subscribe showHelp="true" [uri]="uri"></my-remote-subscribe>
+      <my-remote-subscribe [showHelp]="true" [uri]="uri"></my-remote-subscribe>
      <div class="dropdown-divider"></div>
diff --git a/client/src/app/shared/video-abuse/video-abuse.service.ts b/client/src/app/shared/video-abuse/video-abuse.service.ts
index b0b59ea0c..61a328575 100644
--- a/client/src/app/shared/video-abuse/video-abuse.service.ts
+++ b/client/src/app/shared/video-abuse/video-abuse.service.ts
@@ -1,7 +1,7 @@
 import { catchError, map } from 'rxjs/operators'
 import { HttpClient, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
-import { SortMeta } from 'primeng/components/common/sortmeta'
+import { SortMeta } from 'primeng/api'
 import { Observable } from 'rxjs'
 import { ResultList, VideoAbuse, VideoAbuseUpdate } from '../../../../../shared'
 import { environment } from '../../../environments/environment'
diff --git a/client/src/app/shared/video-blacklist/video-blacklist.service.ts b/client/src/app/shared/video-blacklist/video-blacklist.service.ts
index 491fa698b..116177c4a 100644
--- a/client/src/app/shared/video-blacklist/video-blacklist.service.ts
+++ b/client/src/app/shared/video-blacklist/video-blacklist.service.ts
@@ -1,7 +1,7 @@
 import { catchError, map, concatMap, toArray } from 'rxjs/operators'
 import { HttpClient, HttpParams } from '@angular/common/http'
 import { Injectable } from '@angular/core'
-import { SortMeta } from 'primeng/components/common/sortmeta'
+import { SortMeta } from 'primeng/api'
 import { from as observableFrom, Observable } from 'rxjs'
 import { VideoBlacklist, VideoBlacklistType, ResultList } from '../../../../../shared'
 import { Video } from '../video/video.model'
diff --git a/client/src/app/shared/video-import/video-import.service.ts b/client/src/app/shared/video-import/video-import.service.ts
index 3e3fb7dfb..afd9e3fb5 100644
--- a/client/src/app/shared/video-import/video-import.service.ts
+++ b/client/src/app/shared/video-import/video-import.service.ts
@@ -9,7 +9,7 @@ import { VideoImportCreate, VideoUpdate } from '../../../../../shared/models/vid
 import { objectToFormData } from '@app/shared/misc/utils'
 import { ResultList } from '../../../../../shared/models/result-list.model'
 import { UserService } from '@app/shared/users/user.service'
-import { SortMeta } from 'primeng/components/common/sortmeta'
+import { SortMeta } from 'primeng/api'
 import { RestPagination } from '@app/shared/rest'
 import { ServerService } from '@app/core'
diff --git a/client/src/app/shared/video-ownership/video-ownership.service.ts b/client/src/app/shared/video-ownership/video-ownership.service.ts
index aa9e4839a..b95d5b792 100644
--- a/client/src/app/shared/video-ownership/video-ownership.service.ts
+++ b/client/src/app/shared/video-ownership/video-ownership.service.ts
@@ -5,7 +5,7 @@ import { environment } from '../../../environments/environment'
 import { RestExtractor, RestService } from '../rest'
 import { VideoChangeOwnershipCreate } from '../../../../../shared/models/videos'
 import { Observable } from 'rxjs/index'
-import { SortMeta } from 'primeng/components/common/sortmeta'
+import { SortMeta } from 'primeng/api'
 import { ResultList, VideoChangeOwnership } from '../../../../../shared'
 import { RestPagination } from '@app/shared/rest'
 import { VideoChangeOwnershipAccept } from '../../../../../shared/models/videos/video-change-ownership-accept.model'
diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.html b/client/src/app/shared/video-playlist/video-add-to-playlist.component.html
index 6e0989227..58108584b 100644
--- a/client/src/app/shared/video-playlist/video-add-to-playlist.component.html
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.html
@@ -62,7 +62,7 @@
  <div class="new-playlist-button dropdown-item" (click)="openCreateBlock($event)" [hidden]="isNewPlaylistBlockOpened">
    <my-global-icon iconName="add"></my-global-icon>
-    Create a private playlist
+    <span i18n>Create a private playlist</span>
  </div>
  <form class="new-playlist-block dropdown-item" *ngIf="isNewPlaylistBlockOpened" (ngSubmit)="createPlaylist()" [formGroup]="form">
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
index 4864581b5..a2c0724cd 100644
--- a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
+++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.ts
@@ -18,7 +18,7 @@ import { VideoPlaylistElement } from '@app/shared/video-playlist/video-playlist-
  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class VideoPlaylistElementMiniatureComponent implements OnInit {
-  @ViewChild('moreDropdown', { static: false }) moreDropdown: NgbDropdown
+  @ViewChild('moreDropdown') moreDropdown: NgbDropdown
  @Input() playlist: VideoPlaylist
  @Input() playlistElement: VideoPlaylistElement
diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts
index c2fe6f754..2f5f82aa3 100644
--- a/client/src/app/shared/video/abstract-video-list.ts
+++ b/client/src/app/shared/video/abstract-video-list.ts
@@ -14,6 +14,7 @@ import { DisableForReuseHook } from '@app/core/routing/disable-for-reuse-hook'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { isLastMonth, isLastWeek, isToday, isYesterday } from '@shared/core-utils/miscs/date'
 import { ServerConfig } from '@shared/models'
+import { GlobalIconName } from '@app/shared/images/global-icon.component'
 enum GroupDate {
  UNKNOWN = 0,
@@ -61,7 +62,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor
  actions: {
    routerLink: string
-    iconName: string
+    iconName: GlobalIconName
    label: string
  }[] = []
diff --git a/client/src/app/shared/video/infinite-scroller.directive.ts b/client/src/app/shared/video/infinite-scroller.directive.ts
index 9f613c5fa..f09c3d1fc 100644
--- a/client/src/app/shared/video/infinite-scroller.directive.ts
+++ b/client/src/app/shared/video/infinite-scroller.directive.ts
@@ -1,4 +1,4 @@
-import { distinctUntilChanged, filter, map, share, startWith, tap, throttleTime } from 'rxjs/operators'
+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'
@@ -53,7 +53,7 @@ export class InfiniteScrollerDirective implements OnInit, OnDestroy, AfterConten
    const scrollableElement = this.onItself ? this.container : window
    const scrollObservable = fromEvent(scrollableElement, 'scroll')
      .pipe(
-        startWith(null as string), // FIXME: typings
+        startWith(true),
        throttleTime(200, undefined, throttleOptions),
        map(() => this.getScrollInfo()),
        distinctUntilChanged((o1, o2) => o1.current === o2.current),
diff --git a/client/src/app/shared/video/modals/video-blacklist.component.ts b/client/src/app/shared/video/modals/video-blacklist.component.ts
index f0c70a365..6ef9c250b 100644
--- a/client/src/app/shared/video/modals/video-blacklist.component.ts
+++ b/client/src/app/shared/video/modals/video-blacklist.component.ts
@@ -1,12 +1,12 @@
 import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
 import { Notifier, RedirectService } from '@app/core'
 import { VideoBlacklistService } from '../../../shared/video-blacklist'
-import { VideoDetails } from '../../../shared/video/video-details.model'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
 import { FormReactive, VideoBlacklistValidatorsService } from '@app/shared/forms'
+import { Video } from '@app/shared/video/video.model'
 @Component({
  selector: 'my-video-blacklist',
@@ -14,7 +14,7 @@ import { FormReactive, VideoBlacklistValidatorsService } from '@app/shared/forms
  styleUrls: [ './video-blacklist.component.scss' ]
 })
 export class VideoBlacklistComponent extends FormReactive implements OnInit {
-  @Input() video: VideoDetails = null
+  @Input() video: Video = null
  @ViewChild('modal', { static: true }) modal: NgbModal
@@ -46,7 +46,7 @@ export class VideoBlacklistComponent extends FormReactive implements OnInit {
  }
  show () {
-    this.openedModal = this.modalService.open(this.modal, { keyboard: false })
+    this.openedModal = this.modalService.open(this.modal, { centered: true, keyboard: false })
  }
  hide () {
diff --git a/client/src/app/shared/video/modals/video-download.component.html b/client/src/app/shared/video/modals/video-download.component.html
index 8cca985b1..976da03f3 100644
--- a/client/src/app/shared/video/modals/video-download.component.html
+++ b/client/src/app/shared/video/modals/video-download.component.html
@@ -23,13 +23,15 @@
          <select *ngIf="type === 'video'" [(ngModel)]="resolutionId">
            <option *ngFor="let file of getVideoFiles()" [value]="file.resolution.id">{{ file.resolution.label }}</option>
          </select>
          <select *ngIf="type === 'subtitles'" [(ngModel)]="subtitleLanguageId">
            <option *ngFor="let caption of videoCaptions" [value]="caption.language.id">{{ caption.language.label }}</option>
          </select>
        </div>
        <input #urlInput (click)="urlInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="getLink()" />
        <div class="input-group-append">
-          <button [ngxClipboard]="urlInput" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
+          <button [cdkCopyToClipboard]="urlInput.value" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary">
            <span class="glyphicon glyphicon-copy"></span>
          </button>
        </div>
diff --git a/client/src/app/shared/video/modals/video-download.component.ts b/client/src/app/shared/video/modals/video-download.component.ts
index c1ceca263..6909c4279 100644
--- a/client/src/app/shared/video/modals/video-download.component.ts
+++ b/client/src/app/shared/video/modals/video-download.component.ts
@@ -48,7 +48,7 @@ export class VideoDownloadComponent {
    this.video = video
    this.videoCaptions = videoCaptions && videoCaptions.length ? videoCaptions : undefined
-    this.activeModal = this.modalService.open(this.modal)
+    this.activeModal = this.modalService.open(this.modal, { centered: true })
    this.resolutionId = this.getVideoFiles()[0].resolution.id
    if (this.videoCaptions) this.subtitleLanguageId = this.videoCaptions[0].language.id
diff --git a/client/src/app/shared/video/modals/video-report.component.ts b/client/src/app/shared/video/modals/video-report.component.ts
index 1d368ff17..988fa03d4 100644
--- a/client/src/app/shared/video/modals/video-report.component.ts
+++ b/client/src/app/shared/video/modals/video-report.component.ts
@@ -1,13 +1,13 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core'
 import { Notifier } from '@app/core'
 import { FormReactive } from '../../../shared/forms'
-import { VideoDetails } from '../../../shared/video/video-details.model'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
 import { VideoAbuseValidatorsService } from '@app/shared/forms/form-validators/video-abuse-validators.service'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
 import { VideoAbuseService } from '@app/shared/video-abuse'
+import { Video } from '@app/shared/video/video.model'
 @Component({
  selector: 'my-video-report',
@@ -15,7 +15,7 @@ import { VideoAbuseService } from '@app/shared/video-abuse'
  styleUrls: [ './video-report.component.scss' ]
 })
 export class VideoReportComponent extends FormReactive implements OnInit {
-  @Input() video: VideoDetails = null
+  @Input() video: Video = null
  @ViewChild('modal', { static: true }) modal: NgbModal
@@ -53,7 +53,7 @@ export class VideoReportComponent extends FormReactive implements OnInit {
  }
  show () {
-    this.openedModal = this.modalService.open(this.modal, { keyboard: false })
+    this.openedModal = this.modalService.open(this.modal, { centered: true, keyboard: false })
  }
  hide () {
diff --git a/client/src/app/shared/video/redundancy.service.ts b/client/src/app/shared/video/redundancy.service.ts
new file mode 100644
index 000000000..fb918d73b
--- /dev/null
+++ b/client/src/app/shared/video/redundancy.service.ts
@@ -0,0 +1,73 @@
+import { catchError, map, toArray } from 'rxjs/operators'
+import { HttpClient, HttpParams } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { RestExtractor, RestPagination, RestService } from '@app/shared/rest'
+import { SortMeta } from 'primeng/api'
+import { ResultList, Video, VideoRedundanciesTarget, VideoRedundancy } from '@shared/models'
+import { concat, Observable } from 'rxjs'
+import { environment } from '../../../environments/environment'
+@Injectable()
+export class RedundancyService {
+  static BASE_REDUNDANCY_URL = environment.apiUrl + '/api/v1/server/redundancy'
+  constructor (
+    private authHttp: HttpClient,
+    private restService: RestService,
+    private restExtractor: RestExtractor
+  ) { }
+  updateRedundancy (host: string, redundancyAllowed: boolean) {
+    const url = RedundancyService.BASE_REDUNDANCY_URL + '/' + host
+    const body = { redundancyAllowed }
+    return this.authHttp.put(url, body)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+  listVideoRedundancies (options: {
+    pagination: RestPagination,
+    sort: SortMeta,
+    target?: VideoRedundanciesTarget
+  }): Observable<ResultList<VideoRedundancy>> {
+    const { pagination, sort, target } = options
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, pagination, sort)
+    if (target) params = params.append('target', target)
+    return this.authHttp.get<ResultList<VideoRedundancy>>(RedundancyService.BASE_REDUNDANCY_URL + '/videos', { params })
+               .pipe(
+                 catchError(res => this.restExtractor.handleError(res))
+               )
+  }
+  addVideoRedundancy (video: Video) {
+    return this.authHttp.post(RedundancyService.BASE_REDUNDANCY_URL + '/videos', { videoId: video.id })
+      .pipe(
+        catchError(res => this.restExtractor.handleError(res))
+      )
+  }
+  removeVideoRedundancies (redundancy: VideoRedundancy) {
+    const observables = redundancy.redundancies.streamingPlaylists.map(r => r.id)
+      .concat(redundancy.redundancies.files.map(r => r.id))
+      .map(id => this.removeRedundancy(id))
+    return concat(...observables)
+      .pipe(toArray())
+  }
+  private removeRedundancy (redundancyId: number) {
+    return this.authHttp.delete(RedundancyService.BASE_REDUNDANCY_URL + '/videos/' + redundancyId)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(res => this.restExtractor.handleError(res))
+               )
+  }
+}
diff --git a/client/src/app/shared/video/video-actions-dropdown.component.ts b/client/src/app/shared/video/video-actions-dropdown.component.ts
index afdeab18d..69f45346e 100644
--- a/client/src/app/shared/video/video-actions-dropdown.component.ts
+++ b/client/src/app/shared/video/video-actions-dropdown.component.ts
@@ -14,6 +14,7 @@ import { VideoBlacklistComponent } from '@app/shared/video/modals/video-blacklis
 import { VideoBlacklistService } from '@app/shared/video-blacklist'
 import { ScreenService } from '@app/shared/misc/screen.service'
 import { VideoCaption } from '@shared/models'
+import { RedundancyService } from '@app/shared/video/redundancy.service'
 export type VideoActionsDisplayType = {
  playlist?: boolean
@@ -22,6 +23,7 @@ export type VideoActionsDisplayType = {
  blacklist?: boolean
  delete?: boolean
  report?: boolean
+  duplicate?: boolean
 }
 @Component({
@@ -30,12 +32,12 @@ export type VideoActionsDisplayType = {
  styleUrls: [ './video-actions-dropdown.component.scss' ]
 })
 export class VideoActionsDropdownComponent implements OnChanges {
-  @ViewChild('playlistDropdown', { static: false }) playlistDropdown: NgbDropdown
+  @ViewChild('playlistDropdown') playlistDropdown: NgbDropdown
-  @ViewChild('playlistAdd', { static: false }) playlistAdd: VideoAddToPlaylistComponent
+  @ViewChild('playlistAdd') playlistAdd: VideoAddToPlaylistComponent
-  @ViewChild('videoDownloadModal', { static: false }) videoDownloadModal: VideoDownloadComponent
+  @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent
-  @ViewChild('videoReportModal', { static: false }) videoReportModal: VideoReportComponent
+  @ViewChild('videoReportModal') videoReportModal: VideoReportComponent
-  @ViewChild('videoBlacklistModal', { static: false }) videoBlacklistModal: VideoBlacklistComponent
+  @ViewChild('videoBlacklistModal') videoBlacklistModal: VideoBlacklistComponent
  @Input() video: Video | VideoDetails
  @Input() videoCaptions: VideoCaption[] = []
@@ -46,7 +48,8 @@ export class VideoActionsDropdownComponent implements OnChanges {
    update: true,
    blacklist: true,
    delete: true,
-    report: true
+    report: true,
+    duplicate: true
  }
  @Input() placement = 'left'
@@ -74,6 +77,7 @@ export class VideoActionsDropdownComponent implements OnChanges {
    private screenService: ScreenService,
    private videoService: VideoService,
    private blocklistService: BlocklistService,
+    private redundancyService: RedundancyService,
    private i18n: I18n
  ) { }
@@ -144,6 +148,10 @@ export class VideoActionsDropdownComponent implements OnChanges {
    return this.video && this.video instanceof VideoDetails && this.video.downloadEnabled
  }
+  canVideoBeDuplicated () {
+    return this.video.canBeDuplicatedBy(this.user)
+  }
  /* Action handlers */
  async unblacklistVideo () {
@@ -186,6 +194,18 @@ export class VideoActionsDropdownComponent implements OnChanges {
        )
  }
+  duplicateVideo () {
+    this.redundancyService.addVideoRedundancy(this.video)
+      .subscribe(
+        () => {
+          const message = this.i18n('This video will be duplicated by your instance.')
+          this.notifier.success(message)
+        },
+        err => this.notifier.error(err.message)
+      )
+  }
  onVideoBlacklisted () {
    this.videoBlacklisted.emit()
  }
@@ -234,6 +254,12 @@ export class VideoActionsDropdownComponent implements OnChanges {
          isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.blacklist && this.isVideoUnblacklistable()
        },
        {
+          label: this.i18n('Duplicate (redundancy)'),
+          handler: () => this.duplicateVideo(),
+          isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.duplicate && this.canVideoBeDuplicated(),
+          iconName: 'cloud-download'
+        },
+        {
          label: this.i18n('Delete'),
          handler: () => this.removeVideo(),
          isDisplayed: () => this.authService.isLoggedIn() && this.displayOptions.delete && this.isVideoRemovable(),
diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html
index 46c49c15b..819be6d48 100644
--- a/client/src/app/shared/video/video-miniature.component.html
+++ b/client/src/app/shared/video/video-miniature.component.html
@@ -50,7 +50,7 @@
    </div>
    <div class="video-actions">
-      <!-- FIXME: remove bottom placement when overflow is fixed in bootstrap dropdown -->
+      <!-- FIXME: remove bottom placement when overflow is fixed in bootstrap dropdown: https://github.com/ng-bootstrap/ng-bootstrap/issues/3495 -->
      <my-video-actions-dropdown
        *ngIf="showActions" [video]="video" [displayOptions]="videoActionsDisplayOptions" placement="bottom-left bottom-right left"
        (videoRemoved)="onVideoRemoved()" (videoBlacklisted)="onVideoBlacklisted()" (videoUnblacklisted)="onVideoUnblacklisted()"
diff --git a/client/src/app/shared/video/video-miniature.component.ts b/client/src/app/shared/video/video-miniature.component.ts
index 598a7a983..9d22e13fd 100644
--- a/client/src/app/shared/video/video-miniature.component.ts
+++ b/client/src/app/shared/video/video-miniature.component.ts
@@ -64,7 +64,8 @@ export class VideoMiniatureComponent implements OnInit {
    update: true,
    blacklist: true,
    delete: true,
-    report: true
+    report: true,
+    duplicate: false
  }
  showActions = false
  serverConfig: ServerConfig
@@ -199,7 +200,7 @@ export class VideoMiniatureComponent implements OnInit {
  }
  isWatchLaterPlaylistDisplayed () {
-    return this.inWatchLaterPlaylist !== undefined
+    return this.isUserLoggedIn() && this.inWatchLaterPlaylist !== undefined
  }
  private setUpBy () {
diff --git a/client/src/app/shared/video/video-thumbnail.component.scss b/client/src/app/shared/video/video-thumbnail.component.scss
index 573a64987..c13105e94 100644
--- a/client/src/app/shared/video/video-thumbnail.component.scss
+++ b/client/src/app/shared/video/video-thumbnail.component.scss
@@ -25,7 +25,7 @@
    border-radius: 3px;
    font-size: 12px;
    font-weight: $font-bold;
-    z-index: 1;
+    z-index: z(miniature);
  }
  .video-thumbnail-duration-overlay {
diff --git a/client/src/app/shared/video/video-thumbnail.component.ts b/client/src/app/shared/video/video-thumbnail.component.ts
index 2420ec715..111b4c8bb 100644
--- a/client/src/app/shared/video/video-thumbnail.component.ts
+++ b/client/src/app/shared/video/video-thumbnail.component.ts
@@ -12,7 +12,7 @@ export class VideoThumbnailComponent {
  @Input() video: Video
  @Input() nsfw = false
  @Input() routerLink: any[]
-  @Input() queryParams: any[]
+  @Input() queryParams: { [ p: string ]: any }
  @Input() displayWatchLaterPlaylist: boolean
  @Input() inWatchLaterPlaylist: boolean
diff --git a/client/src/app/shared/video/video.model.ts b/client/src/app/shared/video/video.model.ts
index fb98d5382..546518cca 100644
--- a/client/src/app/shared/video/video.model.ts
+++ b/client/src/app/shared/video/video.model.ts
@@ -42,6 +42,9 @@ export class Video implements VideoServerModel {
  dislikes: number
  nsfw: boolean
+  originInstanceUrl: string
+  originInstanceHost: string
  waitTranscoding?: boolean
  state?: VideoConstant<VideoState>
  scheduledUpdate?: VideoScheduleUpdate
@@ -86,22 +89,31 @@ export class Video implements VideoServerModel {
    this.waitTranscoding = hash.waitTranscoding
    this.state = hash.state
    this.description = hash.description
    this.duration = hash.duration
    this.durationLabel = durationToString(hash.duration)
    this.id = hash.id
    this.uuid = hash.uuid
    this.isLocal = hash.isLocal
    this.name = hash.name
    this.thumbnailPath = hash.thumbnailPath
    this.thumbnailUrl = absoluteAPIUrl + hash.thumbnailPath
    this.previewPath = hash.previewPath
    this.previewUrl = absoluteAPIUrl + hash.previewPath
    this.embedPath = hash.embedPath
    this.embedUrl = absoluteAPIUrl + hash.embedPath
    this.views = hash.views
    this.likes = hash.likes
    this.dislikes = hash.dislikes
    this.nsfw = hash.nsfw
    this.account = hash.account
    this.channel = hash.channel
@@ -124,6 +136,9 @@ export class Video implements VideoServerModel {
    this.blacklistedReason = hash.blacklistedReason
    this.userHistory = hash.userHistory
+    this.originInstanceHost = this.account.host
+    this.originInstanceUrl = 'https://' + this.originInstanceHost
  }
  isVideoNSFWForUser (user: User, serverConfig: ServerConfig) {
@@ -152,4 +167,8 @@ export class Video implements VideoServerModel {
  isUpdatableBy (user: AuthUser) {
    return user && this.isLocal === true && (this.account.name === user.username || user.hasRight(UserRight.UPDATE_ANY_VIDEO))
  }
+  canBeDuplicatedBy (user: AuthUser) {
+    return user && this.isLocal === false && user.hasRight(UserRight.MANAGE_VIDEOS_REDUNDANCIES)
+  }
 }
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 1a9bf5171..9856aac9e 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
@@ -56,7 +56,7 @@ export class VideoCaptionAddModalComponent extends FormReactive implements OnIni
  show () {
    this.closingModal = false
-    this.openedModal = this.modalService.open(this.modal, { keyboard: false })
+    this.openedModal = this.modalService.open(this.modal, { centered: true, keyboard: false })
  }
  hide () {
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 e40649d95..6d72e5765 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
@@ -29,7 +29,7 @@
              <tag-input
                [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
                i18n-placeholder placeholder="+ Tag" i18n-secondaryPlaceholder secondaryPlaceholder="Enter a new tag"
-                formControlName="tags" maxItems="5" modelAsStrings="true"
+                formControlName="tags" [maxItems]="5" [modelAsStrings]="true"
              ></tag-input>
            </div>
@@ -44,7 +44,7 @@
                </ng-template>
              </my-help>
-              <my-markdown-textarea truncate="250" formControlName="description" markdownVideo="true"></my-markdown-textarea>
+              <my-markdown-textarea [truncate]="250" formControlName="description" [markdownVideo]="true"></my-markdown-textarea>
              <div *ngIf="formErrors.description" class="form-error">
                {{ formErrors.description }}
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.module.ts b/client/src/app/videos/+video-edit/shared/video-edit.module.ts
index 39b6daa93..1357d607c 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.module.ts
+++ b/client/src/app/videos/+video-edit/shared/video-edit.module.ts
@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core'
 import { TagInputModule } from 'ngx-chips'
 import { SharedModule } from '../../../shared/'
 import { VideoEditComponent } from './video-edit.component'
-import { CalendarModule } from 'primeng/components/calendar/calendar'
+import { CalendarModule } from 'primeng/calendar'
 import { VideoCaptionAddModalComponent } from './video-caption-add-modal.component'
 @NgModule({
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts
index 74e1e755b..e47624dd6 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts
+++ b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts
@@ -25,7 +25,7 @@ import { scrollToTop } from '@app/shared/misc/utils'
 export class VideoImportTorrentComponent extends VideoSend implements OnInit, CanComponentDeactivate {
  @Output() firstStepDone = new EventEmitter<string>()
  @Output() firstStepError = new EventEmitter<void>()
-  @ViewChild('torrentfileInput', { static: false }) torrentfileInput: ElementRef<HTMLInputElement>
+  @ViewChild('torrentfileInput') torrentfileInput: ElementRef<HTMLInputElement>
  magnetUri = ''
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts
index aa87f9581..efdd284e8 100644
--- a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts
+++ b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts
@@ -27,7 +27,7 @@ import { scrollToTop } from '@app/shared/misc/utils'
 export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy, CanComponentDeactivate {
  @Output() firstStepDone = new EventEmitter<string>()
  @Output() firstStepError = new EventEmitter<void>()
-  @ViewChild('videofileInput', { static: false }) videofileInput: ElementRef<HTMLInputElement>
+  @ViewChild('videofileInput') videofileInput: ElementRef<HTMLInputElement>
  // So that it can be accessed in the template
  readonly SPECIAL_SCHEDULED_PRIVACY = VideoEdit.SPECIAL_SCHEDULED_PRIVACY
diff --git a/client/src/app/videos/+video-edit/video-add.component.ts b/client/src/app/videos/+video-edit/video-add.component.ts
index 401d8a08f..30ab08ea0 100644
--- a/client/src/app/videos/+video-edit/video-add.component.ts
+++ b/client/src/app/videos/+video-edit/video-add.component.ts
@@ -12,9 +12,9 @@ import { ServerConfig } from '@shared/models'
  styleUrls: [ './video-add.component.scss' ]
 })
 export class VideoAddComponent implements OnInit, CanComponentDeactivate {
-  @ViewChild('videoUpload', { static: false }) videoUpload: VideoUploadComponent
+  @ViewChild('videoUpload') videoUpload: VideoUploadComponent
-  @ViewChild('videoImportUrl', { static: false }) videoImportUrl: VideoImportUrlComponent
+  @ViewChild('videoImportUrl') videoImportUrl: VideoImportUrlComponent
-  @ViewChild('videoImportTorrent', { static: false }) videoImportTorrent: VideoImportTorrentComponent
+  @ViewChild('videoImportTorrent') videoImportTorrent: VideoImportTorrentComponent
  secondStepType: 'upload' | 'import-url' | 'import-torrent'
  videoName: string
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 1be96ad9e..a8c432653 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
@@ -25,7 +25,7 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit {
  @Input() parentComments: VideoComment[]
  @Input() focusOnInit = false
-  @Output() commentCreated = new EventEmitter<VideoCommentCreate>()
+  @Output() commentCreated = new EventEmitter<VideoComment>()
  @Output() cancel = new EventEmitter()
  @ViewChild('visitorModal', { static: true }) visitorModal: NgbModal
@@ -96,7 +96,7 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit {
    this.addingComment = true
    const commentCreate: VideoCommentCreate = this.form.value
-    let obs: Observable<any>
+    let obs: Observable<VideoComment>
    if (this.parentComment) {
      obs = this.addCommentReply(commentCreate)
diff --git a/client/src/app/videos/+video-watch/comment/video-comment-thread-tree.model.ts b/client/src/app/videos/+video-watch/comment/video-comment-thread-tree.model.ts
new file mode 100644
index 000000000..1566d7369
--- /dev/null
+++ b/client/src/app/videos/+video-watch/comment/video-comment-thread-tree.model.ts
@@ -0,0 +1,7 @@
+import { VideoCommentThreadTree as VideoCommentThreadTreeServerModel } from '../../../../../../shared/models/videos/video-comment.model'
+import { VideoComment } from '@app/videos/+video-watch/comment/video-comment.model'
+export class VideoCommentThreadTree implements VideoCommentThreadTreeServerModel {
+  comment: VideoComment
+  children: VideoCommentThreadTree[]
+}
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.ts b/client/src/app/videos/+video-watch/comment/video-comment.component.ts
index 61f9335d1..f7eca45fd 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment.component.ts
+++ b/client/src/app/videos/+video-watch/comment/video-comment.component.ts
@@ -1,6 +1,5 @@
 import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core'
 import { User, UserRight } from '../../../../../../shared/models/users'
-import { VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model'
 import { AuthService } from '@app/core/auth'
 import { AccountService } from '@app/shared/account/account.service'
 import { Video } from '@app/shared/video/video.model'
@@ -10,6 +9,7 @@ import { Account } from '@app/shared/account/account.model'
 import { Notifier } from '@app/core'
 import { UserService } from '@app/shared'
 import { Actor } from '@app/shared/actor/actor.model'
+import { VideoCommentThreadTree } from '@app/videos/+video-watch/comment/video-comment-thread-tree.model'
 @Component({
  selector: 'my-video-comment',
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.model.ts b/client/src/app/videos/+video-watch/comment/video-comment.model.ts
index aaeb0ea9c..171fc4acc 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment.model.ts
+++ b/client/src/app/videos/+video-watch/comment/video-comment.model.ts
@@ -1,5 +1,5 @@
 import { Account as AccountInterface } from '../../../../../../shared/models/actors'
-import { VideoComment as VideoCommentServerModel } from '../../../../../../shared/models/videos/video-comment.model'
+import { VideoComment as VideoCommentServerModel, VideoCommentCreate } from '../../../../../../shared/models/videos/video-comment.model'
 import { Actor } from '@app/shared/actor/actor.model'
 import { getAbsoluteAPIUrl } from '@app/shared/misc/utils'
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.service.ts b/client/src/app/videos/+video-watch/comment/video-comment.service.ts
index a81e5236a..0b0715390 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment.service.ts
+++ b/client/src/app/videos/+video-watch/comment/video-comment.service.ts
@@ -7,13 +7,14 @@ import { FeedFormat, ResultList } from '../../../../../../shared/models'
 import {
  VideoComment as VideoCommentServerModel,
  VideoCommentCreate,
-  VideoCommentThreadTree
+  VideoCommentThreadTree as VideoCommentThreadTreeServerModel
 } from '../../../../../../shared/models/videos/video-comment.model'
 import { environment } from '../../../../environments/environment'
 import { RestExtractor, RestService } from '../../../shared/rest'
 import { ComponentPaginationLight } from '../../../shared/rest/component-pagination.model'
 import { CommentSortField } from '../../../shared/video/sort-field.type'
 import { VideoComment } from './video-comment.model'
+import { VideoCommentThreadTree } from '@app/videos/+video-watch/comment/video-comment-thread-tree.model'
 @Injectable()
 export class VideoCommentService {
@@ -76,9 +77,9 @@ export class VideoCommentService {
    const url = `${VideoCommentService.BASE_VIDEO_URL + videoId}/comment-threads/${threadId}`
    return this.authHttp
-               .get(url)
+               .get<VideoCommentThreadTreeServerModel>(url)
               .pipe(
-                 map(tree => this.extractVideoCommentTree(tree as VideoCommentThreadTree)),
+                 map(tree => this.extractVideoCommentTree(tree)),
                 catchError(err => this.restExtractor.handleError(err))
               )
  }
@@ -138,12 +139,12 @@ export class VideoCommentService {
    return { data: comments, total: totalComments }
  }
-  private extractVideoCommentTree (tree: VideoCommentThreadTree) {
+  private extractVideoCommentTree (tree: VideoCommentThreadTreeServerModel) {
-    if (!tree) return tree
+    if (!tree) return tree as VideoCommentThreadTree
    tree.comment = new VideoComment(tree.comment)
    tree.children.forEach(c => this.extractVideoCommentTree(c))
-    return tree
+    return tree as VideoCommentThreadTree
  }
 }
diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.html b/client/src/app/videos/+video-watch/comment/video-comments.component.html
index 2bf52ab86..2ab2d4689 100644
--- a/client/src/app/videos/+video-watch/comment/video-comments.component.html
+++ b/client/src/app/videos/+video-watch/comment/video-comments.component.html
@@ -13,7 +13,7 @@
    <div ngbDropdown class="d-inline-block ml-4">
      <button class="btn btn-sm btn-outline-secondary" id="dropdownSortComments" ngbDropdownToggle i18n>
-        Sort by
+        SORT BY
      </button>
      <div ngbDropdownMenu aria-labelledby="dropdownSortComments">
        <button (click)="handleSortChange('-createdAt')" ngbDropdownItem i18n>Most recent first (default)</button>
diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.ts b/client/src/app/videos/+video-watch/comment/video-comments.component.ts
index 974c61d6c..750c09c47 100644
--- a/client/src/app/videos/+video-watch/comment/video-comments.component.ts
+++ b/client/src/app/videos/+video-watch/comment/video-comments.component.ts
@@ -1,8 +1,7 @@
-import { Component, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild, Output, EventEmitter } from '@angular/core'
+import { Component, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { ConfirmService, Notifier } from '@app/core'
 import { Subject, Subscription } from 'rxjs'
-import { VideoCommentThreadTree } from '../../../../../../shared/models/videos/video-comment.model'
 import { AuthService } from '../../../core/auth'
 import { ComponentPagination, hasMoreItems } from '../../../shared/rest/component-pagination.model'
 import { User } from '../../../shared/users'
@@ -13,6 +12,7 @@ import { VideoCommentService } from './video-comment.service'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { Syndication } from '@app/shared/video/syndication.model'
 import { HooksService } from '@app/core/plugins/hooks.service'
+import { VideoCommentThreadTree } from '@app/videos/+video-watch/comment/video-comment-thread-tree.model'
 @Component({
  selector: 'my-video-comments',
@@ -20,7 +20,7 @@ import { HooksService } from '@app/core/plugins/hooks.service'
  styleUrls: ['./video-comments.component.scss']
 })
 export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy {
-  @ViewChild('commentHighlightBlock', { static: false }) commentHighlightBlock: ElementRef
+  @ViewChild('commentHighlightBlock') commentHighlightBlock: ElementRef
  @Input() video: VideoDetails
  @Input() user: User
diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.html b/client/src/app/videos/+video-watch/modal/video-share.component.html
index 549a9f30e..593dd8529 100644
--- a/client/src/app/videos/+video-watch/modal/video-share.component.html
+++ b/client/src/app/videos/+video-watch/modal/video-share.component.html
@@ -42,7 +42,7 @@
        <ngb-tab i18n-title title="QR-Code" id="qrcode">
          <ng-template ngbTabContent>
            <div class="tab-content">
-              <qrcode [qrdata]="getVideoUrl()" size="256" level="Q"></qrcode>
+              <qrcode [qrdata]="getVideoUrl()" [size]="256" level="Q"></qrcode>
            </div>
          </ng-template>
        </ngb-tab>
diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.ts b/client/src/app/videos/+video-watch/modal/video-share.component.ts
index a2b38b3a0..5109bcd11 100644
--- a/client/src/app/videos/+video-watch/modal/video-share.component.ts
+++ b/client/src/app/videos/+video-watch/modal/video-share.component.ts
@@ -1,8 +1,6 @@
 import { Component, ElementRef, Input, ViewChild } from '@angular/core'
-import { Notifier } from '@app/core'
 import { VideoDetails } from '../../../shared/video/video-details.model'
 import { buildVideoEmbed, buildVideoLink } from '../../../../assets/player/utils'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { NgbModal, NgbTabChangeEvent } from '@ng-bootstrap/ng-bootstrap'
 import { VideoCaption } from '@shared/models'
 import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
@@ -74,7 +72,7 @@ export class VideoShareComponent {
      controls: true
    }
-    this.modalService.open(this.modal)
+    this.modalService.open(this.modal, { centered: true })
  }
  getVideoIframeCode () {
diff --git a/client/src/app/videos/+video-watch/modal/video-support.component.ts b/client/src/app/videos/+video-watch/modal/video-support.component.ts
index b56a51fbf..0058172f2 100644
--- a/client/src/app/videos/+video-watch/modal/video-support.component.ts
+++ b/client/src/app/videos/+video-watch/modal/video-support.component.ts
@@ -21,7 +21,7 @@ export class VideoSupportComponent {
  ) { }
  show () {
-    this.modalService.open(this.modal)
+    this.modalService.open(this.modal, { centered: true })
    this.markdownService.enhancedMarkdownToHTML(this.video.support)
      .then(r => this.videoHTMLSupport = r)
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 bc3a3ffdd..cfa0432ad 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -84,12 +84,12 @@
                    placement="bottom auto"
                  >
                    <my-global-icon iconName="support"></my-global-icon>
-                    <span class="icon-text" i18n>Support</span>
+                    <span class="icon-text" i18n>SUPPORT</span>
                  </div>
                  <div (click)="showShareModal()" class="action-button" role="button">
                    <my-global-icon iconName="share"></my-global-icon>
-                    <span class="icon-text" i18n>Share</span>
+                    <span class="icon-text" i18n>SHARE</span>
                  </div>
                  <div
@@ -100,7 +100,7 @@
                  >
                    <div class="action-button action-button-save" ngbDropdownToggle role="button">
                      <my-global-icon iconName="playlist-add"></my-global-icon>
-                      <span class="icon-text" i18n>Save</span>
+                      <span class="icon-text" i18n>SAVE</span>
                    </div>
                    <div ngbDropdownMenu>
@@ -188,6 +188,11 @@
          <span class="video-attribute-value">{{ video.privacy.label }}</span>
        </div>
+        <div *ngIf="video.isLocal === false" class="video-attribute">
+          <span i18n class="video-attribute-label">Origin instance</span>
+          <a class="video-attribute-value" target="_blank" rel="noopener noreferrer" [href]="video.originInstanceUrl">{{ video.originInstanceHost }}</a>
+        </div>
        <div *ngIf="!!video.originallyPublishedAt" class="video-attribute">
          <span i18n class="video-attribute-label">Originally published</span>
          <span class="video-attribute-value">{{ video.originallyPublishedAt | date: 'dd MMMM yyyy' }}</span>
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index c92f773e4..ae79c2ff6 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -462,6 +462,7 @@ my-video-comments {
 .privacy-concerns {
  position: fixed;
  bottom: 0;
+  z-index: z(privacymsg);
  padding: 5px 15px;
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 e09e44809..ee3deb5e9 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -47,9 +47,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
  private static LOCAL_STORAGE_PRIVACY_CONCERN_KEY = 'video-watch-privacy-concern'
  @ViewChild('videoWatchPlaylist', { static: true }) videoWatchPlaylist: VideoWatchPlaylistComponent
-  @ViewChild('videoShareModal', { static: false }) videoShareModal: VideoShareComponent
+  @ViewChild('videoShareModal') videoShareModal: VideoShareComponent
-  @ViewChild('videoSupportModal', { static: false }) videoSupportModal: VideoSupportComponent
+  @ViewChild('videoSupportModal') videoSupportModal: VideoSupportComponent
-  @ViewChild('subscribeButton', { static: false }) subscribeButton: SubscribeButtonComponent
+  @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent
  player: any
  playerElement: HTMLVideoElement
diff --git a/client/src/app/videos/recommendations/recommended-videos.component.html b/client/src/app/videos/recommendations/recommended-videos.component.html
index 476eca071..4548c7d80 100644
--- a/client/src/app/videos/recommendations/recommended-videos.component.html
+++ b/client/src/app/videos/recommendations/recommended-videos.component.html
@@ -7,7 +7,7 @@
      <div *ngIf="!playlist" class="title-page-autoplay"
        [ngbTooltip]="autoPlayNextVideoTooltip" placement="bottom-right auto"
      >
-        <span i18n>Autoplay</span>
+        <span i18n>AUTOPLAY</span>
        <p-inputSwitch [(ngModel)]="autoPlayNextVideo" (ngModelChange)="switchAutoPlayNextVideo()"></p-inputSwitch>
      </div>
    </div>