145 files changed, 1675 insertions, 415 deletions

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 markdownService: MarkdownService,
-    private i18n: I18n
+    private instanceService: InstanceService
   ) {}
 
   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()
-        .pipe(
-          switchMap(about => {
-            return forkJoin([
-              this.instanceService.buildTranslatedLanguages(about),
-              this.instanceService.buildTranslatedCategories(about)
-            ]).pipe(map(([ languages, categories ]) => ({ about, languages, categories })))
-          })
-        ).subscribe(
-      async ({ about, languages, categories }) => {
-        this.languages = languages
-        this.categories = categories
-
-        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'))
-    )
+    const { about, languages, categories }: ResolverData = this.route.snapshot.data.instanceData
+
+    this.languages = languages
+    this.categories = categories
+
+    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)
   }
 
   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/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 }}
-
-          <button ngxClipboard [cbContent]="account.nameWithHostForced" (click)="activateCopiedMessage()"
-                  class="btn btn-outline-secondary btn-sm copy-button"
-          >
-            <span class="glyphicon glyphicon-copy"></span>
-          </button>
-
+          <div class="actor-name">
+            <span>{{ account.nameWithHost }}</span>
+            <button [cdkCopyToClipboard]="account.nameWithHostForced" (click)="activateCopiedMessage()"
+                    class="btn btn-outline-secondary btn-sm copy-button"
+            >
+              <span class="glyphicon glyphicon-copy"></span>
+            </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">
-      <a i18n routerLink="video-channels" routerLinkActive="active" class="title-page">Video channels</a>
-
-      <a i18n routerLink="videos" routerLinkActive="active" class="title-page">Videos</a>
+    <div class="links w-100">
+      <ng-template #linkTemplate let-item="item">
+        <a [routerLink]="item.routerLink" routerLinkActive="active" class="title-page">{{ item.label }}</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..4fea0e4ed 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">
-      Users
-    </a>
+    <ng-template #linkTemplate let-item="item">
+      <a [routerLink]="item.routerLink" routerLinkActive="active" class="title-page">{{ item.label }}</a>
+    </ng-template>
 
-    <a i18n *ngIf="hasServerFollowRight()" routerLink="/admin/follows" routerLinkActive="active" class="title-page">
-      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>
+    <list-overflow [items]="items" [itemTemplate]="linkTemplate"></list-overflow>
   </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 {
-  constructor (private auth: AuthService) {}
+export class AdminComponent implements OnInit {
+  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..b09614061 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
@@ -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,7 +53,7 @@
 
             <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>
@@ -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>
@@ -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>
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-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) {
-    this.searchSubject.next(search)
+  onSearchChange (event: Event) {
+    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 JOB_STATE_LOCAL_STORAGE_TYPE = 'jobs-list-type'
+  private static LOCAL_STORAGE_STATE = 'jobs-list-state'
+  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.JOB_STATE_LOCAL_STORAGE_TYPE, this.jobType)
+    peertubeLocalStorage.setItem(JobsComponent.LOCAL_STORAGE_STATE, this.jobState)
+    peertubeLocalStorage.setItem(JobsComponent.LOCAL_STORAGE_TYPE, this.jobType)
   }
 }
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-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-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 }}
-            <button ngxClipboard [cbContent]="videoChannel.nameWithHost" (click)="activateCopiedMessage()"
+          <div class="actor-name">
+            <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">
-            <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>
-          </div>
+        <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>
+          <my-subscribe-button #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button>
         </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">
-          <span i18n>Created by {{ videoChannel.ownerBy }}</span>
-          <img [src]="videoChannel.ownerAvatarUrl" alt="Owner account avatar" />
-        </a>
+        <div class="actor-lower">
+          <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">
+            <span i18n>Created by {{ videoChannel.ownerBy }}</span>
+            <img [src]="videoChannel.ownerAvatarUrl" alt="Owner account avatar" />
+          </a>
+        </div>
       </div>
     </div>
 
-    <div class="links">
-      <a i18n routerLink="videos" routerLinkActive="active" class="title-page">Videos</a>
-      <a i18n routerLink="video-playlists" routerLinkActive="active" class="title-page">Video playlists</a>
-      <a i18n routerLink="about" routerLinkActive="active" class="title-page">About</a>
+    <div class="links w-100">
+      <ng-template #linkTemplate let-item="item">
+        <a [routerLink]="item.routerLink" routerLinkActive="active" class="title-page">{{ item.label }}</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..0889ca854 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..f5a8dbd34 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -15,7 +15,7 @@
     </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>
 
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 51a7a3dd1..a7be8e1af 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: z(headerLeft);
     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('instanceConfigWarningModal', { static: false }) instanceConfigWarningModal: InstanceConfigWarningModalComponent
+  @ViewChild('welcomeModal') welcomeModal: WelcomeModalComponent
+  @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
-        if (isOnDevLocale()) {
-          locale = buildFileLocale(getDevLocale())
-          return require(`raw-loader!../locale/angular.${locale}.xlf`)
-        }
-
-        // Default locale, nothing to translate
+                // 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
-  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>
+<my-search-typeahead class="w-100 d-flex justify-content-end"></my-search-typeahead>
 
 <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 {
-  @include peertube-input-text($search-input-width);
-  padding-left: 10px;
+my-search-typeahead {
   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, 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'
+import { Component } from '@angular/core'
 
 @Component({
   selector: 'my-header',
@@ -12,54 +6,4 @@ import { I18n } from '@ngx-translate/i18n-polyfill'
   styleUrls: [ './header.component.scss' ]
 })
 
-export class HeaderComponent implements OnInit {
-  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 }))
-               )
-  }
-}
+export class HeaderComponent {}
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..e36809060
--- /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..a55e78326
--- /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: 35;
+  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..372601fa8
--- /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 () {
+    const query = this.route.snapshot.queryParams
+    if (query['search']) this.search = query['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/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..91422df77 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>
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 2963d4d19..cb5f90723 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.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 () {
-    if (this.actions.length !== 0 && Array.isArray(this.actions[0])) return this.actions
+  getActions (): DropdownAction<T>[][] {
+    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 {
-    @include apply-svg-color(#fff)
-  }
+.orange-button {
+  @include peertube-button;
+  @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..51a56d414 100644
--- a/client/src/app/shared/instance/instance-features-table.component.html
+++ b/client/src/app/shared/instance/instance-features-table.component.html
@@ -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 i18n: I18n
+    private serverService: ServerService
   ) {
   }
 
   ngOnInit () {
-    this.getStats()
-      .subscribe(
-        res => {
-          this.serverStats = res
-        }
-      )
-  }
-
-  getStats () {
-    return this.http
-      .get<ServerStats>(InstanceStatisticsComponent.BASE_STATS_URL)
+    this.serverService.getServerStats()
+        .subscribe(res => this.serverStats = res)
   }
 }
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
-    // But this break our hovering system
+    // We have to set body for the container to avoid scroll overflow on mobile view
     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..e26100aca
--- /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: 0;
+}
+
+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 { SortMeta } from 'primeng/components/common/sortmeta'
+import { LazyLoadEvent, SortMeta } from 'primeng/api'
 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) {
-    this.searchStream.next(search)
+  onSearch (event: Event) {
+    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-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('playlistAdd', { static: false }) playlistAdd: VideoAddToPlaylistComponent
+  @ViewChild('playlistDropdown') playlistDropdown: NgbDropdown
+  @ViewChild('playlistAdd') playlistAdd: VideoAddToPlaylistComponent
 
-  @ViewChild('videoDownloadModal', { static: false }) videoDownloadModal: VideoDownloadComponent
-  @ViewChild('videoReportModal', { static: false }) videoReportModal: VideoReportComponent
-  @ViewChild('videoBlacklistModal', { static: false }) videoBlacklistModal: VideoBlacklistComponent
+  @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent
+  @ViewChild('videoReportModal') videoReportModal: VideoReportComponent
+  @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..1dfb3eec7 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
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('videoImportUrl', { static: false }) videoImportUrl: VideoImportUrlComponent
-  @ViewChild('videoImportTorrent', { static: false }) videoImportTorrent: VideoImportTorrentComponent
+  @ViewChild('videoUpload') videoUpload: VideoUploadComponent
+  @ViewChild('videoImportUrl') videoImportUrl: VideoImportUrlComponent
+  @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) {
-    if (!tree) return tree
+  private extractVideoCommentTree (tree: VideoCommentThreadTreeServerModel) {
+    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.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..a382777f5 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/client/src/app/videos/+video-watch/video-watch.component.html
@@ -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.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('videoSupportModal', { static: false }) videoSupportModal: VideoSupportComponent
-  @ViewChild('subscribeButton', { static: false }) subscribeButton: SubscribeButtonComponent
+  @ViewChild('videoShareModal') videoShareModal: VideoShareComponent
+  @ViewChild('videoSupportModal') videoSupportModal: VideoSupportComponent
+  @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent
 
   player: any
   playerElement: HTMLVideoElement