75 files changed, 2059 insertions, 819 deletions
diff --git a/client/package.json b/client/package.json
index cd0a82aa4..66e8990f9 100644
--- a/client/package.json
+++ b/client/package.json
@@ -56,7 +56,6 @@
    "@ngx-loading-bar/router": "^4.2.0",
    "@ngx-meta/core": "^7.0.0",
    "@ngx-translate/i18n-polyfill": "^1.0.0",
-    "@streamroot/videojs-hlsjs-plugin": "^1.0.10",
    "@types/core-js": "^2.5.2",
    "@types/debug": "^4.1.5",
    "@types/hls.js": "^0.12.4",
@@ -65,11 +64,11 @@
    "@types/jschannel": "^1.0.0",
    "@types/linkifyjs": "^2.1.2",
    "@types/lodash-es": "^4.17.0",
-    "@types/markdown-it": "^0.0.5",
+    "@types/markdown-it": "^0.0.9",
    "@types/node": "^10.9.2",
    "@types/sanitize-html": "1.18.0",
    "@types/socket.io-client": "^1.4.32",
-    "@types/video.js": "^7.2.5",
+    "@types/video.js": "^7.3.3",
    "@types/webtorrent": "^0.107.0",
    "angular2-hotkeys": "^2.1.2",
    "angularx-qrcode": "1.6.4",
@@ -77,6 +76,7 @@
    "bootstrap": "^4.1.3",
    "buffer": "^5.1.0",
    "cache-chunk-store": "^3.0.0",
+    "chart.js": "^2.9.3",
    "codelyzer": "^5.0.1",
    "core-js": "^3.1.4",
    "css-loader": "^3.1.0",
@@ -132,6 +132,7 @@
    "videojs-dock": "^2.0.2",
    "videojs-hotkeys": "^0.2.21",
    "videostream": "~3.2.1",
+    "vtt.js": "^0.13.0",
    "webpack-bundle-analyzer": "^3.0.2",
    "webpack-cli": "^3.0.8",
    "webtorrent": "^0.107.16",
diff --git a/client/src/app/+about/about-instance/about-instance.component.ts b/client/src/app/+about/about-instance/about-instance.component.ts
index 87beb13da..c8c156105 100644
--- a/client/src/app/+about/about-instance/about-instance.component.ts
+++ b/client/src/app/+about/about-instance/about-instance.component.ts
@@ -1,12 +1,10 @@
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { Notifier, ServerService } from '@app/core'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component'
 import { InstanceService } from '@app/shared/instance/instance.service'
-import { MarkdownService } from '@app/shared/renderer'
-import { forkJoin } from 'rxjs'
-import { map, switchMap } from 'rxjs/operators'
 import { ServerConfig } from '@shared/models'
+import { ActivatedRoute } from '@angular/router'
+import { ResolverData } from './about-instance.resolver'
 @Component({
  selector: 'my-about-instance',
@@ -37,11 +35,10 @@ export class AboutInstanceComponent implements OnInit {
  serverConfig: ServerConfig
  constructor (
+    private route: ActivatedRoute,
    private notifier: Notifier,
    private serverService: ServerService,
-    private instanceService: InstanceService,
+    private instanceService: InstanceService
-    private markdownService: MarkdownService,
-    private i18n: I18n
  ) {}
  get instanceName () {
@@ -56,35 +53,23 @@ export class AboutInstanceComponent implements OnInit {
    return this.serverConfig.instance.isNSFW
  }
-  ngOnInit () {
+  async ngOnInit () {
    this.serverConfig = this.serverService.getTmpConfig()
    this.serverService.getConfig()
        .subscribe(config => this.serverConfig = config)
-    this.instanceService.getAbout()
+    const { about, languages, categories }: ResolverData = this.route.snapshot.data.instanceData
-        .pipe(
-          switchMap(about => {
+    this.languages = languages
-            return forkJoin([
+    this.categories = categories
-              this.instanceService.buildTranslatedLanguages(about),
-              this.instanceService.buildTranslatedCategories(about)
+    this.shortDescription = about.instance.shortDescription
-            ]).pipe(map(([ languages, categories ]) => ({ about, languages, categories })))
-          })
+    this.creationReason = about.instance.creationReason
-        ).subscribe(
+    this.maintenanceLifetime = about.instance.maintenanceLifetime
-      async ({ about, languages, categories }) => {
+    this.businessModel = about.instance.businessModel
-        this.languages = languages
-        this.categories = categories
+    this.html = await this.instanceService.buildHtml(about)
-        this.shortDescription = about.instance.shortDescription
-        this.creationReason = about.instance.creationReason
-        this.maintenanceLifetime = about.instance.maintenanceLifetime
-        this.businessModel = about.instance.businessModel
-        this.html = await this.instanceService.buildHtml(about)
-      },
-      () => this.notifier.error(this.i18n('Cannot get about information from server'))
-    )
  }
  openContactModal () {
diff --git a/client/src/app/+about/about-instance/about-instance.resolver.ts b/client/src/app/+about/about-instance/about-instance.resolver.ts
new file mode 100644
index 000000000..94c6abe5a
--- /dev/null
+++ b/client/src/app/+about/about-instance/about-instance.resolver.ts
@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core'
+import { ActivatedRouteSnapshot, Resolve } from '@angular/router'
+import { map, switchMap } from 'rxjs/operators'
+import { forkJoin } from 'rxjs'
+import { InstanceService } from '@app/shared/instance/instance.service'
+import { About } from '@shared/models/server'
+export type ResolverData = { about: About, languages: string[], categories: string[] }
+@Injectable()
+export class AboutInstanceResolver implements Resolve<any> {
+  constructor (
+    private instanceService: InstanceService
+  ) {}
+  resolve (route: ActivatedRouteSnapshot) {
+    return this.instanceService.getAbout()
+               .pipe(
+                 switchMap(about => {
+                   return forkJoin([
+                     this.instanceService.buildTranslatedLanguages(about),
+                     this.instanceService.buildTranslatedCategories(about)
+                   ]).pipe(map(([ languages, categories ]) => ({ about, languages, categories })))
+                 })
+               )
+  }
+}
diff --git a/client/src/app/+about/about-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/+admin/admin.component.html b/client/src/app/+admin/admin.component.html
index 9a3d90c18..0d06aaedc 100644
--- a/client/src/app/+admin/admin.component.html
+++ b/client/src/app/+admin/admin.component.html
@@ -5,7 +5,7 @@
    </a>
    <a i18n *ngIf="hasServerFollowRight()" routerLink="/admin/follows" routerLinkActive="active" class="title-page">
-      Manage follows
+      Follows & redundancies
    </a>
    <a i18n *ngIf="hasVideoAbusesRight() || hasVideoBlacklistRight()" routerLink="/admin/moderation" routerLinkActive="active" class="title-page">
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..d806ea355 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
@@ -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/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/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/system/jobs/jobs.component.ts b/client/src/app/+admin/system/jobs/jobs.component.ts
index 20c8ea71a..bc40452cf 100644
--- a/client/src/app/+admin/system/jobs/jobs.component.ts
+++ b/client/src/app/+admin/system/jobs/jobs.component.ts
@@ -16,8 +16,8 @@ import { JobTypeClient } from '../../../../types/job-type-client.type'
  styleUrls: [ './jobs.component.scss' ]
 })
 export class JobsComponent extends RestTable implements OnInit {
-  private static JOB_STATE_LOCAL_STORAGE_STATE = 'jobs-list-state'
+  private static LOCAL_STORAGE_STATE = 'jobs-list-state'
-  private static JOB_STATE_LOCAL_STORAGE_TYPE = 'jobs-list-type'
+  private static LOCAL_STORAGE_TYPE = 'jobs-list-type'
  jobState: JobStateClient = 'waiting'
  jobStates: JobStateClient[] = [ 'active', 'completed', 'failed', 'waiting', 'delayed' ]
@@ -34,7 +34,8 @@ export class JobsComponent extends RestTable implements OnInit {
    'video-file-import',
    'video-import',
    'videos-views',
-    'activitypub-refresher'
+    'activitypub-refresher',
+    'video-redundancy'
  ]
  jobs: Job[] = []
@@ -77,15 +78,15 @@ export class JobsComponent extends RestTable implements OnInit {
  }
  private loadJobStateAndType () {
-    const state = peertubeLocalStorage.getItem(JobsComponent.JOB_STATE_LOCAL_STORAGE_STATE)
+    const state = peertubeLocalStorage.getItem(JobsComponent.LOCAL_STORAGE_STATE)
    if (state) this.jobState = state as JobState
-    const type = peertubeLocalStorage.getItem(JobsComponent.JOB_STATE_LOCAL_STORAGE_TYPE)
+    const type = peertubeLocalStorage.getItem(JobsComponent.LOCAL_STORAGE_TYPE)
    if (type) this.jobType = type as JobType
  }
  private saveJobStateAndType () {
-    peertubeLocalStorage.setItem(JobsComponent.JOB_STATE_LOCAL_STORAGE_STATE, this.jobState)
+    peertubeLocalStorage.setItem(JobsComponent.LOCAL_STORAGE_STATE, this.jobState)
-    peertubeLocalStorage.setItem(JobsComponent.JOB_STATE_LOCAL_STORAGE_TYPE, this.jobType)
+    peertubeLocalStorage.setItem(JobsComponent.LOCAL_STORAGE_TYPE, this.jobType)
  }
 }
diff --git a/client/src/app/+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/+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/app.module.ts b/client/src/app/app.module.ts
index dda705811..62915ec54 100644
--- a/client/src/app/app.module.ts
+++ b/client/src/app/app.module.ts
@@ -48,8 +48,6 @@ export function metaFactory (serverService: ServerService): MetaLoader {
  ],
  imports: [
    BrowserModule,
-    // FIXME: https://github.com/maxisam/ngx-clipboard/issues/133
-    ClipboardModule,
    CoreModule,
    SharedModule,
diff --git a/client/src/app/core/server/server.service.ts b/client/src/app/core/server/server.service.ts
index cdcbcb528..1f6cfb596 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>()
@@ -235,6 +238,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/search/search-filters.component.html b/client/src/app/search/search-filters.component.html
index 07fb2c048..c275285d5 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>
diff --git a/client/src/app/shared/buttons/button.component.scss b/client/src/app/shared/buttons/button.component.scss
index 2a8cfc748..3ccfefd7e 100644
--- a/client/src/app/shared/buttons/button.component.scss
+++ b/client/src/app/shared/buttons/button.component.scss
@@ -10,11 +10,26 @@ my-small-loader ::ng-deep .root {
 .action-button {
  @include peertube-button-link;
  @include button-with-icon(21px, 0, -2px);
+}
-  // FIXME: Firefox does not apply global .orange-button icon color
+.orange-button {
-  &.orange-button {
+  @include peertube-button;
-    @include apply-svg-color(#fff)
+  @include orange-button;
-  }
+}
+.orange-button-link {
+  @include peertube-button-link;
+  @include orange-button;
+}
+.grey-button {
+  @include peertube-button;
+  @include grey-button;
+}
+.grey-button-link {
+  @include peertube-button-link;
+  @include grey-button;
 }
 // In a table, try to minimize the space taken by this button
diff --git a/client/src/app/shared/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/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/instance/instance-statistics.component.ts b/client/src/app/shared/instance/instance-statistics.component.ts
index 8ec728f05..40aa8a4c0 100644
--- a/client/src/app/shared/instance/instance-statistics.component.ts
+++ b/client/src/app/shared/instance/instance-statistics.component.ts
@@ -1,9 +1,6 @@
-import { map } from 'rxjs/operators'
-import { HttpClient } from '@angular/common/http'
 import { Component, OnInit } from '@angular/core'
-import { I18n } from '@ngx-translate/i18n-polyfill'
 import { ServerStats } from '@shared/models/server'
-import { environment } from '../../../environments/environment'
+import { ServerService } from '@app/core'
 @Component({
  selector: 'my-instance-statistics',
@@ -11,27 +8,15 @@ import { environment } from '../../../environments/environment'
  styleUrls: [ './instance-statistics.component.scss' ]
 })
 export class InstanceStatisticsComponent implements OnInit {
-  private static BASE_STATS_URL = environment.apiUrl + '/api/v1/server/stats'
  serverStats: ServerStats = null
  constructor (
-    private http: HttpClient,
+    private serverService: ServerService
-    private i18n: I18n
  ) {
  }
  ngOnInit () {
-    this.getStats()
+    this.serverService.getServerStats()
-      .subscribe(
+        .subscribe(res => this.serverStats = res)
-        res => {
-          this.serverStats = res
-        }
-      )
-  }
-  getStats () {
-    return this.http
-      .get<ServerStats>(InstanceStatisticsComponent.BASE_STATS_URL)
  }
 }
diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.ts b/client/src/app/shared/menu/top-menu-dropdown.component.ts
index 5ccdafb54..24a083654 100644
--- a/client/src/app/shared/menu/top-menu-dropdown.component.ts
+++ b/client/src/app/shared/menu/top-menu-dropdown.component.ts
@@ -49,8 +49,7 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy {
      e => e.children && e.children.some(c => !!c.iconName)
    )
-    // FIXME: We have to set body for the container to avoid because of scroll overflow on mobile view
+    // We have to set body for the container to avoid scroll overflow on mobile view
-    // But this break our hovering system
    if (this.screen.isInMobileView()) {
      this.container = 'body'
    }
diff --git a/client/src/app/shared/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/shared.module.ts b/client/src/app/shared/shared.module.ts
index b2eb13f73..d06d37d8c 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -98,6 +98,7 @@ 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'
 @NgModule({
  imports: [
@@ -300,6 +301,7 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop
    UserNotificationService,
    FollowService,
+    RedundancyService,
    I18n
  ]
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/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..390d74c52 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({
@@ -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.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-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/assets/player/bezels/bezels-plugin.ts b/client/src/assets/player/bezels/bezels-plugin.ts
index c2c251961..499177526 100644
--- a/client/src/assets/player/bezels/bezels-plugin.ts
+++ b/client/src/assets/player/bezels/bezels-plugin.ts
@@ -1,85 +1,12 @@
-// @ts-ignore
+import videojs, { VideoJsPlayer } from 'video.js'
-import * as videojs from 'video.js'
+import './pause-bezel'
-import { VideoJSComponentInterface } from '../peertube-videojs-typings'
-function getPauseBezel () {
+const Plugin = videojs.getPlugin('plugin')
-  return `
-  <div class="vjs-bezels-pause">
-    <div class="vjs-bezel" role="status" aria-label="Pause">
-      <div class="vjs-bezel-icon">
-        <svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%">
-          <use class="vjs-svg-shadow" xlink:href="#vjs-id-1"></use>
-          <path class="vjs-svg-fill" d="M 12,26 16,26 16,10 12,10 z M 21,26 25,26 25,10 21,10 z" id="vjs-id-1"></path>
-        </svg>
-      </div>
-    </div>
-  </div>
-  `
-}
-function getPlayBezel () {
-  return `
-  <div class="vjs-bezels-play">
-    <div class="vjs-bezel" role="status" aria-label="Play">
-      <div class="vjs-bezel-icon">
-        <svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%">
-          <use class="vjs-svg-shadow" xlink:href="#vjs-id-2"></use>
-          <path class="vjs-svg-fill" d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z" id="ytp-id-2"></path>
-        </svg>
-      </div>
-    </div>
-  </div>
-  `
-}
-// @ts-ignore-start
-const Component = videojs.getComponent('Component')
-class PauseBezel extends Component {
-  options_: any
-  container: HTMLBodyElement
-  constructor (player: videojs.Player, options: any) {
-    super(player, options)
-    this.options_ = options
-    player.on('pause', (_: any) => {
-      if (player.seeking() || player.ended()) return
-      this.container.innerHTML = getPauseBezel()
-      this.showBezel()
-    })
-    player.on('play', (_: any) => {
-      if (player.seeking()) return
-      this.container.innerHTML = getPlayBezel()
-      this.showBezel()
-    })
-  }
-  createEl () {
-    const container = super.createEl('div', {
-      className: 'vjs-bezels-content'
-    })
-    this.container = container
-    container.style.display = 'none'
-    return container
-  }
-  showBezel () {
-    this.container.style.display = 'inherit'
-    setTimeout(() => {
-      this.container.style.display = 'none'
-    }, 500) // matching the animation duration
-  }
-}
-// @ts-ignore-end
-videojs.registerComponent('PauseBezel', PauseBezel)
-const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin')
 class BezelsPlugin extends Plugin {
-  constructor (player: videojs.Player, options: any = {}) {
-    super(player, options)
+  constructor (player: VideoJsPlayer, options?: videojs.ComponentOptions) {
+    super(player)
    this.player.ready(() => {
      player.addClass('vjs-bezels')
@@ -90,4 +17,5 @@ class BezelsPlugin extends Plugin {
 }
 videojs.registerPlugin('bezels', BezelsPlugin)
 export { BezelsPlugin }
diff --git a/client/src/assets/player/bezels/pause-bezel.ts b/client/src/assets/player/bezels/pause-bezel.ts
new file mode 100644
index 000000000..98eb12099
--- /dev/null
+++ b/client/src/assets/player/bezels/pause-bezel.ts
@@ -0,0 +1,72 @@
+import videojs, { VideoJsPlayer } from 'video.js'
+function getPauseBezel () {
+  return `
+  <div class="vjs-bezels-pause">
+    <div class="vjs-bezel" role="status" aria-label="Pause">
+      <div class="vjs-bezel-icon">
+        <svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%">
+          <use class="vjs-svg-shadow" xlink:href="#vjs-id-1"></use>
+          <path class="vjs-svg-fill" d="M 12,26 16,26 16,10 12,10 z M 21,26 25,26 25,10 21,10 z" id="vjs-id-1"></path>
+        </svg>
+      </div>
+    </div>
+  </div>
+  `
+}
+function getPlayBezel () {
+  return `
+  <div class="vjs-bezels-play">
+    <div class="vjs-bezel" role="status" aria-label="Play">
+      <div class="vjs-bezel-icon">
+        <svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%">
+          <use class="vjs-svg-shadow" xlink:href="#vjs-id-2"></use>
+          <path class="vjs-svg-fill" d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z" id="ytp-id-2"></path>
+        </svg>
+      </div>
+    </div>
+  </div>
+  `
+}
+const Component = videojs.getComponent('Component')
+class PauseBezel extends Component {
+  container: HTMLDivElement
+  constructor (player: VideoJsPlayer, options?: videojs.ComponentOptions) {
+    super(player, options)
+    player.on('pause', (_: any) => {
+      if (player.seeking() || player.ended()) return
+      this.container.innerHTML = getPauseBezel()
+      this.showBezel()
+    })
+    player.on('play', (_: any) => {
+      if (player.seeking()) return
+      this.container.innerHTML = getPlayBezel()
+      this.showBezel()
+    })
+  }
+  createEl () {
+    this.container = super.createEl('div', {
+      className: 'vjs-bezels-content'
+    }) as HTMLDivElement
+    this.container.style.display = 'none'
+    return this.container
+  }
+  showBezel () {
+    this.container.style.display = 'inherit'
+    setTimeout(() => {
+      this.container.style.display = 'none'
+    }, 500) // matching the animation duration
+  }
+}
+videojs.registerComponent('PauseBezel', PauseBezel)
diff --git a/client/src/assets/player/p2p-media-loader/hls-plugin.ts b/client/src/assets/player/p2p-media-loader/hls-plugin.ts
new file mode 100644
index 000000000..d78e1ab90
--- /dev/null
+++ b/client/src/assets/player/p2p-media-loader/hls-plugin.ts
@@ -0,0 +1,626 @@
+// Thanks https://github.com/streamroot/videojs-hlsjs-plugin
+// We duplicated this plugin to choose the hls.js version we want, because streamroot only provide a bundled file
+import * as Hlsjs from 'hls.js'
+import videojs, { VideoJsPlayer } from 'video.js'
+import { HlsjsConfigHandlerOptions, QualityLevelRepresentation, QualityLevels, VideoJSTechHLS } from '../peertube-videojs-typings'
+type ErrorCounts = {
+  [ type: string ]: number
+}
+type Metadata = {
+  levels: Hlsjs.Level[]
+}
+const registerSourceHandler = function (vjs: typeof videojs) {
+  if (!Hlsjs.isSupported()) {
+    console.warn('Hls.js is not supported in this browser!')
+    return
+  }
+  const html5 = vjs.getTech('Html5')
+  if (!html5) {
+    console.error('Not supported version if video.js')
+    return
+  }
+  // FIXME: typings
+  (html5 as any).registerSourceHandler({
+    canHandleSource: function (source: videojs.Tech.SourceObject) {
+      const hlsTypeRE = /^application\/x-mpegURL|application\/vnd\.apple\.mpegurl$/i
+      const hlsExtRE = /\.m3u8/i
+      if (hlsTypeRE.test(source.type)) return 'probably'
+      if (hlsExtRE.test(source.src)) return 'maybe'
+      return ''
+    },
+    handleSource: function (source: videojs.Tech.SourceObject, tech: VideoJSTechHLS) {
+      if (tech.hlsProvider) {
+        tech.hlsProvider.dispose()
+      }
+      tech.hlsProvider = new Html5Hlsjs(vjs, source, tech)
+      return tech.hlsProvider
+    }
+  }, 0);
+  // FIXME: typings
+  (vjs as any).Html5Hlsjs = Html5Hlsjs
+}
+function hlsjsConfigHandler (this: VideoJsPlayer, options: HlsjsConfigHandlerOptions) {
+  const player = this
+  if (!options) return
+  if (!player.srOptions_) {
+    player.srOptions_ = {}
+  }
+  if (!player.srOptions_.hlsjsConfig) {
+    player.srOptions_.hlsjsConfig = options.hlsjsConfig
+  }
+  if (!player.srOptions_.captionConfig) {
+    player.srOptions_.captionConfig = options.captionConfig
+  }
+  if (options.levelLabelHandler && !player.srOptions_.levelLabelHandler) {
+    player.srOptions_.levelLabelHandler = options.levelLabelHandler
+  }
+}
+const registerConfigPlugin = function (vjs: typeof videojs) {
+  // Used in Brightcove since we don't pass options directly there
+  const registerVjsPlugin = vjs.registerPlugin || vjs.plugin
+  registerVjsPlugin('hlsjs', hlsjsConfigHandler)
+}
+class Html5Hlsjs {
+  private static readonly hooks: { [id: string]: Function[] } = {}
+  private readonly videoElement: HTMLVideoElement
+  private readonly errorCounts: ErrorCounts = {}
+  private readonly player: VideoJsPlayer
+  private readonly tech: videojs.Tech
+  private readonly source: videojs.Tech.SourceObject
+  private readonly vjs: typeof videojs
+  private hls: Hlsjs & { manualLevel?: number } // FIXME: typings
+  private hlsjsConfig: Partial<Hlsjs.Config & { cueHandler: any }> = null
+  private _duration: number = null
+  private metadata: Metadata = null
+  private isLive: boolean = null
+  private dvrDuration: number = null
+  private edgeMargin: number = null
+  private handlers: { [ id in 'play' | 'addtrack' | 'playing' | 'textTracksChange' | 'audioTracksChange' ]: EventListener } = {
+    play: null,
+    addtrack: null,
+    playing: null,
+    textTracksChange: null,
+    audioTracksChange: null
+  }
+  private uiTextTrackHandled = false
+  constructor (vjs: typeof videojs, source: videojs.Tech.SourceObject, tech: videojs.Tech) {
+    this.vjs = vjs
+    this.source = source
+    this.tech = tech;
+    (this.tech as any).name_ = 'Hlsjs'
+    this.videoElement = tech.el() as HTMLVideoElement
+    this.player = vjs((tech.options_ as any).playerId)
+    this.videoElement.addEventListener('error', event => {
+      let errorTxt: string
+      const mediaError = (event.currentTarget as HTMLVideoElement).error
+      switch (mediaError.code) {
+        case mediaError.MEDIA_ERR_ABORTED:
+          errorTxt = 'You aborted the video playback'
+          break
+        case mediaError.MEDIA_ERR_DECODE:
+          errorTxt = 'The video playback was aborted due to a corruption problem or because the video used features your browser did not support'
+          this._handleMediaError(mediaError)
+          break
+        case mediaError.MEDIA_ERR_NETWORK:
+          errorTxt = 'A network error caused the video download to fail part-way'
+          break
+        case mediaError.MEDIA_ERR_SRC_NOT_SUPPORTED:
+          errorTxt = 'The video could not be loaded, either because the server or network failed or because the format is not supported'
+          break
+        default:
+          errorTxt = mediaError.message
+      }
+      console.error('MEDIA_ERROR: ', errorTxt)
+    })
+    this.initialize()
+  }
+  duration () {
+    return this._duration || this.videoElement.duration || 0
+  }
+  seekable () {
+    if (this.hls.media) {
+      if (!this.isLive) {
+        return this.vjs.createTimeRanges(0, this.hls.media.duration)
+      }
+      // Video.js doesn't seem to like floating point timeranges
+      const startTime = Math.round(this.hls.media.duration - this.dvrDuration)
+      const endTime = Math.round(this.hls.media.duration - this.edgeMargin)
+      return this.vjs.createTimeRanges(startTime, endTime)
+    }
+    return this.vjs.createTimeRanges()
+  }
+  // See comment for `initialize` method.
+  dispose () {
+    this.videoElement.removeEventListener('play', this.handlers.play)
+    this.videoElement.textTracks.removeEventListener('addtrack', this.handlers.addtrack)
+    this.videoElement.removeEventListener('playing', this.handlers.playing)
+    this.player.textTracks().removeEventListener('change', this.handlers.textTracksChange)
+    this.uiTextTrackHandled = false
+    this.player.audioTracks().removeEventListener('change', this.handlers.audioTracksChange)
+    this.hls.destroy()
+  }
+  static addHook (type: string, callback: Function) {
+    Html5Hlsjs.hooks[ type ] = this.hooks[ type ] || []
+    Html5Hlsjs.hooks[ type ].push(callback)
+  }
+  static removeHook (type: string, callback: Function) {
+    if (Html5Hlsjs.hooks[ type ] === undefined) return false
+    const index = Html5Hlsjs.hooks[ type ].indexOf(callback)
+    if (index === -1) return false
+    Html5Hlsjs.hooks[ type ].splice(index, 1)
+    return true
+  }
+  private _executeHooksFor (type: string) {
+    if (Html5Hlsjs.hooks[ type ] === undefined) {
+      return
+    }
+    // ES3 and IE < 9
+    for (let i = 0; i < Html5Hlsjs.hooks[ type ].length; i++) {
+      Html5Hlsjs.hooks[ type ][ i ](this.player, this.hls)
+    }
+  }
+  private _handleMediaError (error: any) {
+    if (this.errorCounts[ Hlsjs.ErrorTypes.MEDIA_ERROR ] === 1) {
+      console.info('trying to recover media error')
+      this.hls.recoverMediaError()
+      return
+    }
+    if (this.errorCounts[ Hlsjs.ErrorTypes.MEDIA_ERROR ] === 2) {
+      console.info('2nd try to recover media error (by swapping audio codec')
+      this.hls.swapAudioCodec()
+      this.hls.recoverMediaError()
+      return
+    }
+    if (this.errorCounts[ Hlsjs.ErrorTypes.MEDIA_ERROR ] > 2) {
+      console.info('bubbling media error up to VIDEOJS')
+      this.tech.error = () => error
+      this.tech.trigger('error')
+      return
+    }
+  }
+  private _onError (_event: any, data: Hlsjs.errorData) {
+    const error: { message: string, code?: number } = {
+      message: `HLS.js error: ${data.type} - fatal: ${data.fatal} - ${data.details}`
+    }
+    console.error(error.message)
+    // increment/set error count
+    if (this.errorCounts[ data.type ]) this.errorCounts[ data.type ] += 1
+    else this.errorCounts[ data.type ] = 1
+    // Implement simple error handling based on hls.js documentation
+    // https://github.com/dailymotion/hls.js/blob/master/API.md#fifth-step-error-handling
+    if (data.fatal) {
+      switch (data.type) {
+        case Hlsjs.ErrorTypes.NETWORK_ERROR:
+          console.info('bubbling network error up to VIDEOJS')
+          error.code = 2
+          this.tech.error = () => error as any
+          this.tech.trigger('error')
+          break
+        case Hlsjs.ErrorTypes.MEDIA_ERROR:
+          error.code = 3
+          this._handleMediaError(error)
+          break
+        default:
+          // cannot recover
+          this.hls.destroy()
+          console.info('bubbling error up to VIDEOJS')
+          this.tech.error = () => error as any
+          this.tech.trigger('error')
+          break
+      }
+    }
+  }
+  private switchQuality (qualityId: number) {
+    this.hls.nextLevel = qualityId
+  }
+  private _levelLabel (level: Hlsjs.Level) {
+    if (this.player.srOptions_.levelLabelHandler) {
+      return this.player.srOptions_.levelLabelHandler(level)
+    }
+    if (level.height) return level.height + 'p'
+    if (level.width) return Math.round(level.width * 9 / 16) + 'p'
+    if (level.bitrate) return (level.bitrate / 1000) + 'kbps'
+    return 0
+  }
+  private _relayQualityChange (qualityLevels: QualityLevels) {
+    // Determine if it is "Auto" (all tracks enabled)
+    let isAuto = true
+    for (let i = 0; i < qualityLevels.length; i++) {
+      if (!qualityLevels[ i ]._enabled) {
+        isAuto = false
+        break
+      }
+    }
+    // Interact with ME
+    if (isAuto) {
+      this.hls.currentLevel = -1
+      return
+    }
+    // Find ID of highest enabled track
+    let selectedTrack: number
+    for (selectedTrack = qualityLevels.length - 1; selectedTrack >= 0; selectedTrack--) {
+      if (qualityLevels[ selectedTrack ]._enabled) {
+        break
+      }
+    }
+    this.hls.currentLevel = selectedTrack
+  }
+  private _handleQualityLevels () {
+    if (!this.metadata) return
+    const qualityLevels = this.player.qualityLevels && this.player.qualityLevels()
+    if (!qualityLevels) return
+    for (let i = 0; i < this.metadata.levels.length; i++) {
+      const details = this.metadata.levels[ i ]
+      const representation: QualityLevelRepresentation = {
+        id: i,
+        width: details.width,
+        height: details.height,
+        bandwidth: details.bitrate,
+        bitrate: details.bitrate,
+        _enabled: true
+      }
+      const self = this
+      representation.enabled = function (this: QualityLevels, level: number, toggle?: boolean) {
+        // Brightcove switcher works TextTracks-style (enable tracks that it wants to ABR on)
+        if (typeof toggle === 'boolean') {
+          this[ level ]._enabled = toggle
+          self._relayQualityChange(this)
+        }
+        return this[ level ]._enabled
+      }
+      qualityLevels.addQualityLevel(representation)
+    }
+  }
+  private _notifyVideoQualities () {
+    if (!this.metadata) return
+    const cleanTracklist = []
+    if (this.metadata.levels.length > 1) {
+      const autoLevel = {
+        id: -1,
+        label: 'auto',
+        selected: this.hls.manualLevel === -1
+      }
+      cleanTracklist.push(autoLevel)
+    }
+    this.metadata.levels.forEach((level, index) => {
+      // Don't write in level (shared reference with Hls.js)
+      const quality = {
+        id: index,
+        selected: index === this.hls.manualLevel,
+        label: this._levelLabel(level)
+      }
+      cleanTracklist.push(quality)
+    })
+    const payload = {
+      qualityData: { video: cleanTracklist },
+      qualitySwitchCallback: this.switchQuality.bind(this)
+    }
+    this.tech.trigger('loadedqualitydata', payload)
+    // Self-de-register so we don't raise the payload multiple times
+    this.videoElement.removeEventListener('playing', this.handlers.playing)
+  }
+  private _updateSelectedAudioTrack () {
+    const playerAudioTracks = this.tech.audioTracks()
+    for (let j = 0; j < playerAudioTracks.length; j++) {
+      // FIXME: typings
+      if ((playerAudioTracks[ j ] as any).enabled) {
+        this.hls.audioTrack = j
+        break
+      }
+    }
+  }
+  private _onAudioTracks () {
+    const hlsAudioTracks = this.hls.audioTracks as (AudioTrack & { name?: string, lang?: string })[] // FIXME typings
+    const playerAudioTracks = this.tech.audioTracks()
+    if (hlsAudioTracks.length > 1 && playerAudioTracks.length === 0) {
+      // Add Hls.js audio tracks if not added yet
+      for (let i = 0; i < hlsAudioTracks.length; i++) {
+        playerAudioTracks.addTrack(new this.vjs.AudioTrack({
+          id: i.toString(),
+          kind: 'alternative',
+          label: hlsAudioTracks[ i ].name || hlsAudioTracks[ i ].lang,
+          language: hlsAudioTracks[ i ].lang,
+          enabled: i === this.hls.audioTrack
+        }))
+      }
+      // Handle audio track change event
+      this.handlers.audioTracksChange = this._updateSelectedAudioTrack.bind(this)
+      playerAudioTracks.addEventListener('change', this.handlers.audioTracksChange)
+    }
+  }
+  private _getTextTrackLabel (textTrack: TextTrack) {
+    // Label here is readable label and is optional (used in the UI so if it is there it should be different)
+    return textTrack.label ? textTrack.label : textTrack.language
+  }
+  private _isSameTextTrack (track1: TextTrack, track2: TextTrack) {
+    return this._getTextTrackLabel(track1) === this._getTextTrackLabel(track2)
+      && track1.kind === track2.kind
+  }
+  private _updateSelectedTextTrack () {
+    const playerTextTracks = this.player.textTracks()
+    let activeTrack: TextTrack = null
+    for (let j = 0; j < playerTextTracks.length; j++) {
+      if (playerTextTracks[ j ].mode === 'showing') {
+        activeTrack = playerTextTracks[ j ]
+        break
+      }
+    }
+    const hlsjsTracks = this.videoElement.textTracks
+    for (let k = 0; k < hlsjsTracks.length; k++) {
+      if (hlsjsTracks[ k ].kind === 'subtitles' || hlsjsTracks[ k ].kind === 'captions') {
+        hlsjsTracks[ k ].mode = activeTrack && this._isSameTextTrack(hlsjsTracks[ k ], activeTrack)
+          ? 'showing'
+          : 'disabled'
+      }
+    }
+  }
+  private _startLoad () {
+    this.hls.startLoad(-1)
+    this.videoElement.removeEventListener('play', this.handlers.play)
+  }
+  private _oneLevelObjClone (obj: object) {
+    const result = {}
+    const objKeys = Object.keys(obj)
+    for (let i = 0; i < objKeys.length; i++) {
+      result[ objKeys[ i ] ] = obj[ objKeys[ i ] ]
+    }
+    return result
+  }
+  private _filterDisplayableTextTracks (textTracks: TextTrackList) {
+    const displayableTracks = []
+    // Filter out tracks that is displayable (captions or subtitles)
+    for (let idx = 0; idx < textTracks.length; idx++) {
+      if (textTracks[ idx ].kind === 'subtitles' || textTracks[ idx ].kind === 'captions') {
+        displayableTracks.push(textTracks[ idx ])
+      }
+    }
+    return displayableTracks
+  }
+  private _updateTextTrackList () {
+    const displayableTracks = this._filterDisplayableTextTracks(this.videoElement.textTracks)
+    const playerTextTracks = this.player.textTracks()
+    // Add stubs to make the caption switcher shows up
+    // Adding the Hls.js text track in will make us have double captions
+    for (let idx = 0; idx < displayableTracks.length; idx++) {
+      let isAdded = false
+      for (let jdx = 0; jdx < playerTextTracks.length; jdx++) {
+        if (this._isSameTextTrack(displayableTracks[ idx ], playerTextTracks[ jdx ])) {
+          isAdded = true
+          break
+        }
+      }
+      if (!isAdded) {
+        const hlsjsTextTrack = displayableTracks[ idx ]
+        this.player.addRemoteTextTrack({
+          kind: hlsjsTextTrack.kind as videojs.TextTrack.Kind,
+          label: this._getTextTrackLabel(hlsjsTextTrack),
+          language: hlsjsTextTrack.language,
+          srclang: hlsjsTextTrack.language
+        }, false)
+      }
+    }
+    // Handle UI switching
+    this._updateSelectedTextTrack()
+    if (!this.uiTextTrackHandled) {
+      this.handlers.textTracksChange = this._updateSelectedTextTrack.bind(this)
+      playerTextTracks.addEventListener('change', this.handlers.textTracksChange)
+      this.uiTextTrackHandled = true
+    }
+  }
+  private _onMetaData (_event: any, data: Hlsjs.manifestLoadedData) {
+    // This could arrive before 'loadedqualitydata' handlers is registered, remember it so we can raise it later
+    this.metadata = data as any
+    this._handleQualityLevels()
+  }
+  private _createCueHandler (captionConfig: any) {
+    return {
+      newCue: (track: any, startTime: number, endTime: number, captionScreen: { rows: any[] }) => {
+        let row: any
+        let cue: VTTCue
+        let text: string
+        const VTTCue = (window as any).VTTCue || (window as any).TextTrackCue
+        for (let r = 0; r < captionScreen.rows.length; r++) {
+          row = captionScreen.rows[ r ]
+          text = ''
+          if (!row.isEmpty()) {
+            for (let c = 0; c < row.chars.length; c++) {
+              text += row.chars[ c ].ucharj
+            }
+            cue = new VTTCue(startTime, endTime, text.trim())
+            // typeof null === 'object'
+            if (captionConfig != null && typeof captionConfig === 'object') {
+              // Copy client overridden property into the cue object
+              const configKeys = Object.keys(captionConfig)
+              for (let k = 0; k < configKeys.length; k++) {
+                cue[ configKeys[ k ] ] = captionConfig[ configKeys[ k ] ]
+              }
+            }
+            track.addCue(cue)
+            if (endTime === startTime) track.addCue(new VTTCue(endTime + 5, ''))
+          }
+        }
+      }
+    }
+  }
+  private _initHlsjs () {
+    const techOptions = this.tech.options_ as HlsjsConfigHandlerOptions
+    const srOptions_ = this.player.srOptions_
+    const hlsjsConfigRef = srOptions_ && srOptions_.hlsjsConfig || techOptions.hlsjsConfig
+    // Hls.js will write to the reference thus change the object for later streams
+    this.hlsjsConfig = hlsjsConfigRef ? this._oneLevelObjClone(hlsjsConfigRef) : {}
+    if ([ '', 'auto' ].includes(this.videoElement.preload) && !this.videoElement.autoplay && this.hlsjsConfig.autoStartLoad === undefined) {
+      this.hlsjsConfig.autoStartLoad = false
+    }
+    const captionConfig = srOptions_ && srOptions_.captionConfig || techOptions.captionConfig
+    if (captionConfig) {
+      this.hlsjsConfig.cueHandler = this._createCueHandler(captionConfig)
+    }
+    // If the user explicitly sets autoStartLoad to false, we're not going to enter the if block above
+    // That's why we have a separate if block here to set the 'play' listener
+    if (this.hlsjsConfig.autoStartLoad === false) {
+      this.handlers.play = this._startLoad.bind(this)
+      this.videoElement.addEventListener('play', this.handlers.play)
+    }
+    // _notifyVideoQualities sometimes runs before the quality picker event handler is registered -> no video switcher
+    this.handlers.playing = this._notifyVideoQualities.bind(this)
+    this.videoElement.addEventListener('playing', this.handlers.playing)
+    this.hls = new Hlsjs(this.hlsjsConfig)
+    this._executeHooksFor('beforeinitialize')
+    this.hls.on(Hlsjs.Events.ERROR, (event, data) => this._onError(event, data))
+    this.hls.on(Hlsjs.Events.AUDIO_TRACKS_UPDATED, () => this._onAudioTracks())
+    this.hls.on(Hlsjs.Events.MANIFEST_PARSED, (event, data) => this._onMetaData(event, data as any)) // FIXME: typings
+    this.hls.on(Hlsjs.Events.LEVEL_LOADED, (event, data) => {
+      // The DVR plugin will auto seek to "live edge" on start up
+      if (this.hlsjsConfig.liveSyncDuration) {
+        this.edgeMargin = this.hlsjsConfig.liveSyncDuration
+      } else if (this.hlsjsConfig.liveSyncDurationCount) {
+        this.edgeMargin = this.hlsjsConfig.liveSyncDurationCount * data.details.targetduration
+      }
+      this.isLive = data.details.live
+      this.dvrDuration = data.details.totalduration
+      this._duration = this.isLive ? Infinity : data.details.totalduration
+    })
+    this.hls.once(Hlsjs.Events.FRAG_LOADED, () => {
+      // Emit custom 'loadedmetadata' event for parity with `videojs-contrib-hls`
+      // Ref: https://github.com/videojs/videojs-contrib-hls#loadedmetadata
+      this.tech.trigger('loadedmetadata')
+    })
+    this.hls.attachMedia(this.videoElement)
+    this.handlers.addtrack = this._updateTextTrackList.bind(this)
+    this.videoElement.textTracks.addEventListener('addtrack', this.handlers.addtrack)
+    this.hls.loadSource(this.source.src)
+  }
+  private initialize () {
+    this._initHlsjs()
+  }
+}
+export {
+  Html5Hlsjs,
+  registerSourceHandler,
+  registerConfigPlugin
+}
diff --git a/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts b/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts
index c3f863f72..e86900faa 100644
--- a/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts
+++ b/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts
@@ -1,16 +1,15 @@
-// FIXME: something weird with our path definition in tsconfig and typings
+import videojs, { VideoJsPlayer } from 'video.js'
-// @ts-ignore
+import { P2PMediaLoaderPluginOptions, PlayerNetworkInfo } from '../peertube-videojs-typings'
-import * as videojs from 'video.js'
-import { P2PMediaLoaderPluginOptions, PlayerNetworkInfo, VideoJSComponentInterface } from '../peertube-videojs-typings'
 import { Engine, initHlsJsPlayer, initVideoJsContribHlsJsPlayer } from 'p2p-media-loader-hlsjs'
 import { Events, Segment } from 'p2p-media-loader-core'
 import { timeToInt } from '../utils'
+import { registerConfigPlugin, registerSourceHandler } from './hls-plugin'
+import * as Hlsjs from 'hls.js'
-// videojs-hlsjs-plugin needs videojs in window
+registerConfigPlugin(videojs)
-window['videojs'] = videojs
+registerSourceHandler(videojs)
-require('@streamroot/videojs-hlsjs-plugin')
-const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin')
+const Plugin = videojs.getPlugin('plugin')
 class P2pMediaLoaderPlugin extends Plugin {
  private readonly CONSTANTS = {
@@ -18,7 +17,7 @@ class P2pMediaLoaderPlugin extends Plugin {
  }
  private readonly options: P2PMediaLoaderPluginOptions
-  private hlsjs: any // Don't type hlsjs to not bundle the module
+  private hlsjs: Hlsjs
  private p2pEngine: Engine
  private statsP2PBytes = {
    pendingDownload: [] as number[],
@@ -37,12 +36,13 @@ class P2pMediaLoaderPlugin extends Plugin {
  private networkInfoInterval: any
-  constructor (player: videojs.Player, options: P2PMediaLoaderPluginOptions) {
+  constructor (player: VideoJsPlayer, options?: P2PMediaLoaderPluginOptions) {
-    super(player, options)
+    super(player)
    this.options = options
-    if (!videojs.Html5Hlsjs) {
+    // FIXME: typings https://github.com/Microsoft/TypeScript/issues/14080
+    if (!(videojs as any).Html5Hlsjs) {
      const message = 'HLS.js does not seem to be supported.'
      console.warn(message)
@@ -50,7 +50,8 @@ class P2pMediaLoaderPlugin extends Plugin {
      return
    }
-    videojs.Html5Hlsjs.addHook('beforeinitialize', (videojsPlayer: any, hlsjs: any) => {
+    // FIXME: typings https://github.com/Microsoft/TypeScript/issues/14080
+    (videojs as any).Html5Hlsjs.addHook('beforeinitialize', (videojsPlayer: any, hlsjs: any) => {
      this.hlsjs = hlsjs
    })
@@ -84,12 +85,11 @@ class P2pMediaLoaderPlugin extends Plugin {
  private initialize () {
    initHlsJsPlayer(this.hlsjs)
-    const tech = this.player.tech_
+    // FIXME: typings
-    this.p2pEngine = tech.options_.hlsjsConfig.loader.getEngine()
+    const options = this.player.tech(true).options_ as any
+    this.p2pEngine = options.hlsjsConfig.loader.getEngine()
-    // Avoid using constants to not import hls.hs
+    this.hlsjs.on(Hlsjs.Events.LEVEL_SWITCHING, (_: any, data: any) => {
-    // https://github.com/video-dev/hls.js/blob/master/src/events.js#L37
-    this.hlsjs.on('hlsLevelSwitching', (_: any, data: any) => {
      this.trigger('resolutionChange', { auto: this.hlsjs.autoLevelEnabled, resolutionId: data.height })
    })
diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts
index d9e02cd7d..dbf631a5e 100644
--- a/client/src/assets/player/peertube-player-manager.ts
+++ b/client/src/assets/player/peertube-player-manager.ts
@@ -1,21 +1,26 @@
 import { VideoFile } from '../../../../shared/models/videos'
-// @ts-ignore
+import videojs, { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js'
-import * as videojs from 'video.js'
 import 'videojs-hotkeys'
 import 'videojs-dock'
 import 'videojs-contextmenu-ui'
 import 'videojs-contrib-quality-levels'
+import './upnext/end-card'
 import './upnext/upnext-plugin'
 import './bezels/bezels-plugin'
 import './peertube-plugin'
 import './videojs-components/next-video-button'
+import './videojs-components/p2p-info-button'
 import './videojs-components/peertube-link-button'
+import './videojs-components/peertube-load-progress-bar'
 import './videojs-components/resolution-menu-button'
+import './videojs-components/resolution-menu-item'
+import './videojs-components/settings-dialog'
 import './videojs-components/settings-menu-button'
-import './videojs-components/p2p-info-button'
+import './videojs-components/settings-menu-item'
-import './videojs-components/peertube-load-progress-bar'
+import './videojs-components/settings-panel'
+import './videojs-components/settings-panel-child'
 import './videojs-components/theater-button'
-import { P2PMediaLoaderPluginOptions, UserWatching, VideoJSCaption, VideoJSPluginOptions, videojsUntyped } from './peertube-videojs-typings'
+import { P2PMediaLoaderPluginOptions, UserWatching, VideoJSCaption, VideoJSPluginOptions } from './peertube-videojs-typings'
 import { buildVideoEmbed, buildVideoLink, copyToClipboard, getRtcConfig } from './utils'
 import { isDefaultLocale } from '../../../../shared/models/i18n/i18n'
 import { segmentValidatorFactory } from './p2p-media-loader/segment-validator'
@@ -24,12 +29,17 @@ import { RedundancyUrlManager } from './p2p-media-loader/redundancy-url-manager'
 import { getStoredP2PEnabled } from './peertube-player-local-storage'
 import { TranslationsManager } from './translations-manager'
+// For VideoJS
+(window as any).WebVTT = require('vtt.js/lib/vtt.js').WebVTT;
 // Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
-videojsUntyped.getComponent('PlaybackRateMenuButton').prototype.controlText_ = 'Speed'
+(videojs.getComponent('PlaybackRateMenuButton') as any).prototype.controlText_ = 'Speed'
+const CaptionsButton = videojs.getComponent('CaptionsButton') as any
 // Change Captions to Subtitles/CC
-videojsUntyped.getComponent('CaptionsButton').prototype.controlText_ = 'Subtitles/CC'
+CaptionsButton.prototype.controlText_ = 'Subtitles/CC'
 // We just want to display 'Off' instead of 'captions off', keep a space so the variable == true (hacky I know)
-videojsUntyped.getComponent('CaptionsButton').prototype.label_ = ' '
+CaptionsButton.prototype.label_ = ' '
 export type PlayerMode = 'webtorrent' | 'p2p-media-loader'
@@ -92,9 +102,9 @@ export type PeertubePlayerManagerOptions = {
 export class PeertubePlayerManager {
  private static playerElementClassName: string
-  private static onPlayerChange: (player: any) => void
+  private static onPlayerChange: (player: VideoJsPlayer) => void
-  static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions, onPlayerChange: (player: any) => void) {
+  static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions, onPlayerChange: (player: VideoJsPlayer) => void) {
    let p2pMediaLoader: any
    this.onPlayerChange = onPlayerChange
@@ -114,12 +124,12 @@ export class PeertubePlayerManager {
    const self = this
    return new Promise(res => {
-      videojs(options.common.playerElement, videojsOptions, function (this: any) {
+      videojs(options.common.playerElement, videojsOptions, function (this: VideoJsPlayer) {
        const player = this
        let alreadyFallback = false
-        player.tech_.one('error', () => {
+        player.tech(true).one('error', () => {
          if (!alreadyFallback) self.maybeFallbackToWebTorrent(mode, player, options)
          alreadyFallback = true
        })
@@ -164,7 +174,7 @@ export class PeertubePlayerManager {
    const videojsOptions = this.getVideojsOptions(mode, options)
    const self = this
-    videojs(newVideoElement, videojsOptions, function (this: any) {
+    videojs(newVideoElement, videojsOptions, function (this: VideoJsPlayer) {
      const player = this
      self.addContextMenu(mode, player, options.common.embedUrl)
@@ -173,7 +183,11 @@ export class PeertubePlayerManager {
    })
  }
-  private static getVideojsOptions (mode: PlayerMode, options: PeertubePlayerManagerOptions, p2pMediaLoaderModule?: any) {
+  private static getVideojsOptions (
+    mode: PlayerMode,
+    options: PeertubePlayerManagerOptions,
+    p2pMediaLoaderModule?: any
+  ): VideoJsPlayerOptions {
    const commonOptions = options.common
    let autoplay = commonOptions.autoplay
@@ -197,9 +211,9 @@ export class PeertubePlayerManager {
    }
    if (mode === 'p2p-media-loader') {
-      const { streamrootHls } = PeertubePlayerManager.addP2PMediaLoaderOptions(plugins, options, p2pMediaLoaderModule)
+      const { hlsjs } = PeertubePlayerManager.addP2PMediaLoaderOptions(plugins, options, p2pMediaLoaderModule)
-      html5 = streamrootHls.html5
+      html5 = hlsjs.html5
    }
    if (mode === 'webtorrent') {
@@ -213,7 +227,7 @@ export class PeertubePlayerManager {
      html5,
      // We don't use text track settings for now
-      textTrackSettings: false,
+      textTrackSettings: false as any, // FIXME: typings
      controls: commonOptions.controls !== undefined ? commonOptions.controls : true,
      loop: commonOptions.loop !== undefined ? commonOptions.loop : false,
@@ -237,7 +251,7 @@ export class PeertubePlayerManager {
          peertubeLink: commonOptions.peertubeLink,
          theaterButton: commonOptions.theaterButton,
          nextVideo: commonOptions.nextVideo
-        })
+        }) as any // FIXME: typings
      }
    }
@@ -289,7 +303,7 @@ export class PeertubePlayerManager {
        swarmId: p2pMediaLoaderOptions.playlistUrl
      }
    }
-    const streamrootHls = {
+    const hlsjs = {
      levelLabelHandler: (level: { height: number, width: number }) => {
        const file = p2pMediaLoaderOptions.videoFiles.find(f => f.resolution.id === level.height)
@@ -308,7 +322,7 @@ export class PeertubePlayerManager {
      }
    }
-    const toAssign = { p2pMediaLoader, streamrootHls }
+    const toAssign = { p2pMediaLoader, hlsjs }
    Object.assign(plugins, toAssign)
    return toAssign
@@ -406,7 +420,7 @@ export class PeertubePlayerManager {
    return children
  }
-  private static addContextMenu (mode: PlayerMode, player: any, videoEmbedUrl: string) {
+  private static addContextMenu (mode: PlayerMode, player: VideoJsPlayer, videoEmbedUrl: string) {
    const content = [
      {
        label: player.localize('Copy the video URL'),
@@ -416,9 +430,8 @@ export class PeertubePlayerManager {
      },
      {
        label: player.localize('Copy the video URL at the current time'),
-        listener: function () {
+        listener: function (this: VideoJsPlayer) {
-          const player = this as videojs.Player
+          copyToClipboard(buildVideoLink({ startTime: this.currentTime() }))
-          copyToClipboard(buildVideoLink({ startTime: player.currentTime() }))
        }
      },
      {
@@ -432,9 +445,8 @@ export class PeertubePlayerManager {
    if (mode === 'webtorrent') {
      content.push({
        label: player.localize('Copy magnet URI'),
-        listener: function () {
+        listener: function (this: VideoJsPlayer) {
-          const player = this as videojs.Player
+          copyToClipboard(this.webtorrent().getCurrentVideoFile().magnetUri)
-          copyToClipboard(player.webtorrent().getCurrentVideoFile().magnetUri)
        }
      })
    }
@@ -472,7 +484,8 @@ export class PeertubePlayerManager {
              return event.key === '>'
            },
            handler: function (player: videojs.Player) {
-              player.playbackRate((player.playbackRate() + 0.1).toFixed(2))
+              const newValue = Math.min(player.playbackRate() + 0.1, 5)
+              player.playbackRate(parseFloat(newValue.toFixed(2)))
            }
          },
          decreasePlaybackRateKey: {
@@ -480,7 +493,8 @@ export class PeertubePlayerManager {
              return event.key === '<'
            },
            handler: function (player: videojs.Player) {
-              player.playbackRate((player.playbackRate() - 0.1).toFixed(2))
+              const newValue = Math.max(player.playbackRate() - 0.1, 0.10)
+              player.playbackRate(parseFloat(newValue.toFixed(2)))
            }
          },
          frameByFrame: {
diff --git a/client/src/assets/player/peertube-plugin.ts b/client/src/assets/player/peertube-plugin.ts
index 9824c43b5..19d104676 100644
--- a/client/src/assets/player/peertube-plugin.ts
+++ b/client/src/assets/player/peertube-plugin.ts
@@ -1,14 +1,10 @@
-// FIXME: something weird with our path definition in tsconfig and typings
+import videojs, { VideoJsPlayer } from 'video.js'
-// @ts-ignore
-import * as videojs from 'video.js'
 import './videojs-components/settings-menu-button'
 import {
  PeerTubePluginOptions,
  ResolutionUpdateData,
  UserWatching,
-  VideoJSCaption,
+  VideoJSCaption
-  VideoJSComponentInterface,
-  videojsUntyped
 } from './peertube-videojs-typings'
 import { isMobile, timeToInt } from './utils'
 import {
@@ -20,7 +16,8 @@ import {
  saveVolumeInStore
 } from './peertube-player-local-storage'
-const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin')
+const Plugin = videojs.getPlugin('plugin')
 class PeerTubePlugin extends Plugin {
  private readonly videoViewUrl: string
  private readonly videoDuration: number
@@ -28,7 +25,6 @@ class PeerTubePlugin extends Plugin {
    USER_WATCHING_VIDEO_INTERVAL: 5000 // Every 5 seconds, notify the user is watching the video
  }
-  private player: any
  private videoCaptions: VideoJSCaption[]
  private defaultSubtitle: string
@@ -40,8 +36,8 @@ class PeerTubePlugin extends Plugin {
  private mouseInControlBar = false
  private readonly savedInactivityTimeout: number
-  constructor (player: videojs.Player, options: PeerTubePluginOptions) {
+  constructor (player: VideoJsPlayer, options?: PeerTubePluginOptions) {
-    super(player, options)
+    super(player)
    this.videoViewUrl = options.videoViewUrl
    this.videoDuration = options.videoDuration
@@ -67,7 +63,7 @@ class PeerTubePlugin extends Plugin {
        this.player.p2pMediaLoader().on('resolutionChange', (_: any, d: any) => this.handleResolutionChange(d))
      }
-      this.player.tech_.on('loadedqualitydata', () => {
+      this.player.tech(true).on('loadedqualitydata', () => {
        setTimeout(() => {
          // Replay a resolution change, now we loaded all quality data
          if (this.lastResolutionChange) this.handleResolutionChange(this.lastResolutionChange)
@@ -102,7 +98,7 @@ class PeerTubePlugin extends Plugin {
      }
      this.player.textTracks().on('change', () => {
-        const showing = this.player.textTracks().tracks_.find((t: { kind: string, mode: string }) => {
+        const showing = this.player.textTracks().tracks_.find(t => {
          return t.kind === 'captions' && t.mode === 'showing'
        })
@@ -262,7 +258,7 @@ class PeerTubePlugin extends Plugin {
  // Thanks: https://github.com/videojs/video.js/issues/4460#issuecomment-312861657
  private initSmoothProgressBar () {
-    const SeekBar = videojsUntyped.getComponent('SeekBar')
+    const SeekBar = videojs.getComponent('SeekBar') as any
    SeekBar.prototype.getPercent = function getPercent () {
      // Allows for smooth scrubbing, when player can't keep up.
      // const time = (this.player_.scrubbing()) ?
diff --git a/client/src/assets/player/peertube-videojs-typings.ts b/client/src/assets/player/peertube-videojs-typings.ts
index aad4dbb4f..a4e4c580c 100644
--- a/client/src/assets/player/peertube-videojs-typings.ts
+++ b/client/src/assets/player/peertube-videojs-typings.ts
@@ -1,28 +1,81 @@
-// FIXME: something weird with our path definition in tsconfig and typings
-// @ts-ignore
-import * as videojs from 'video.js'
 import { PeerTubePlugin } from './peertube-plugin'
 import { WebTorrentPlugin } from './webtorrent/webtorrent-plugin'
 import { P2pMediaLoaderPlugin } from './p2p-media-loader/p2p-media-loader-plugin'
 import { PlayerMode } from './peertube-player-manager'
 import { RedundancyUrlManager } from './p2p-media-loader/redundancy-url-manager'
 import { VideoFile } from '@shared/models'
+import videojs from 'video.js'
+import { Config, Level } from 'hls.js'
+declare module 'video.js' {
+  export interface VideoJsPlayer {
+    srOptions_: HlsjsConfigHandlerOptions
+    theaterEnabled: boolean
+    // FIXME: add it to upstream typings
+    posterImage: {
+      show (): void
+      hide (): void
+    }
+    handleTechSeeked_ (): void
+    // Plugins
-declare namespace videojs {
-  interface Player {
    peertube (): PeerTubePlugin
    webtorrent (): WebTorrentPlugin
    p2pMediaLoader (): P2pMediaLoaderPlugin
+    contextmenuUI (options: any): any
+    bezels (): void
+    qualityLevels (): QualityLevels
+    textTracks (): TextTrackList & {
+      on: Function
+      tracks_: { kind: string, mode: string, language: string }[]
+    }
+    audioTracks (): AudioTrackList
+    dock (options: { title: string, description: string }): void
  }
 }
-interface VideoJSComponentInterface {
+export interface VideoJSTechHLS extends videojs.Tech {
-  _player: videojs.Player
+  hlsProvider: any // FIXME: typings
+}
+export interface HlsjsConfigHandlerOptions {
+  hlsjsConfig?: Config & { cueHandler: any }// FIXME: typings
+  captionConfig?: any // FIXME: typings
+  levelLabelHandler?: (level: Level) => string
+}
+type QualityLevelRepresentation = {
+  id: number
+  height: number
+  label?: string
+  width?: number
+  bandwidth?: number
+  bitrate?: number
-  new (player: videojs.Player, options?: any): any
+  enabled?: Function
+  _enabled: boolean
+}
+type QualityLevels = QualityLevelRepresentation[] & {
+  selectedIndex: number
+  selectedIndex_: number
-  registerComponent (name: string, obj: any): any
+  addQualityLevel (representation: QualityLevelRepresentation): void
 }
 type VideoJSCaption = {
@@ -78,9 +131,6 @@ type VideoJSPluginOptions = {
  p2pMediaLoader?: P2PMediaLoaderPluginOptions
 }
-// videojs typings don't have some method we need
-const videojsUntyped = videojs as any
 type LoadedQualityData = {
  qualitySwitchCallback: Function,
  qualityData: {
@@ -123,13 +173,13 @@ export {
  PlayerNetworkInfo,
  ResolutionUpdateData,
  AutoResolutionUpdateData,
-  VideoJSComponentInterface,
-  videojsUntyped,
  VideoJSCaption,
  UserWatching,
  PeerTubePluginOptions,
  WebtorrentPluginOptions,
  P2PMediaLoaderPluginOptions,
  VideoJSPluginOptions,
-  LoadedQualityData
+  LoadedQualityData,
+  QualityLevelRepresentation,
+  QualityLevels
 }
diff --git a/client/src/assets/player/upnext/end-card.ts b/client/src/assets/player/upnext/end-card.ts
new file mode 100644
index 000000000..d121a83a9
--- /dev/null
+++ b/client/src/assets/player/upnext/end-card.ts
@@ -0,0 +1,155 @@
+import videojs, { VideoJsPlayer } from 'video.js'
+function getMainTemplate (options: any) {
+  return `
+    <div class="vjs-upnext-top">
+      <span class="vjs-upnext-headtext">${options.headText}</span>
+      <div class="vjs-upnext-title"></div>
+    </div>
+    <div class="vjs-upnext-autoplay-icon">
+      <svg height="100%" version="1.1" viewbox="0 0 98 98" width="100%">
+        <circle class="vjs-upnext-svg-autoplay-circle" cx="49" cy="49" fill="#000" fill-opacity="0.8" r="48"></circle>
+        <circle class="vjs-upnext-svg-autoplay-ring" cx="-49" cy="49" fill-opacity="0" r="46.5" stroke="#FFFFFF" stroke-width="4" transform="rotate(-90)"></circle>
+        <polygon class="vjs-upnext-svg-autoplay-triangle" fill="#fff" points="32,27 72,49 32,71"></polygon></svg>
+    </div>
+    <span class="vjs-upnext-bottom">
+      <span class="vjs-upnext-cancel">
+        <button class="vjs-upnext-cancel-button" tabindex="0" aria-label="Cancel autoplay">${options.cancelText}</button>
+      </span>
+      <span class="vjs-upnext-suspended">${options.suspendedText}</span>
+    </span>
+  `
+}
+export interface EndCardOptions extends videojs.ComponentOptions {
+  next: Function,
+  getTitle: () => string
+  timeout: number
+  cancelText: string
+  headText: string
+  suspendedText: string
+  condition: () => boolean
+  suspended: () => boolean
+}
+const Component = videojs.getComponent('Component')
+class EndCard extends Component {
+  options_: EndCardOptions
+  dashOffsetTotal = 586
+  dashOffsetStart = 293
+  interval = 50
+  upNextEvents = new videojs.EventTarget()
+  ticks = 0
+  totalTicks: number
+  container: HTMLDivElement
+  title: HTMLElement
+  autoplayRing: HTMLElement
+  cancelButton: HTMLElement
+  suspendedMessage: HTMLElement
+  nextButton: HTMLElement
+  constructor (player: VideoJsPlayer, options: EndCardOptions) {
+    super(player, options)
+    this.totalTicks = this.options_.timeout / this.interval
+    player.on('ended', (_: any) => {
+      if (!this.options_.condition()) return
+      player.addClass('vjs-upnext--showing')
+      this.showCard((canceled: boolean) => {
+        player.removeClass('vjs-upnext--showing')
+        this.container.style.display = 'none'
+        if (!canceled) {
+          this.options_.next()
+        }
+      })
+    })
+    player.on('playing', () => {
+      this.upNextEvents.trigger('playing')
+    })
+  }
+  createEl () {
+    const container = super.createEl('div', {
+      className: 'vjs-upnext-content',
+      innerHTML: getMainTemplate(this.options_)
+    }) as HTMLDivElement
+    this.container = container
+    container.style.display = 'none'
+    this.autoplayRing = container.getElementsByClassName('vjs-upnext-svg-autoplay-ring')[0] as HTMLElement
+    this.title = container.getElementsByClassName('vjs-upnext-title')[0] as HTMLElement
+    this.cancelButton = container.getElementsByClassName('vjs-upnext-cancel-button')[0] as HTMLElement
+    this.suspendedMessage = container.getElementsByClassName('vjs-upnext-suspended')[0] as HTMLElement
+    this.nextButton = container.getElementsByClassName('vjs-upnext-autoplay-icon')[0] as HTMLElement
+    this.cancelButton.onclick = () => {
+      this.upNextEvents.trigger('cancel')
+    }
+    this.nextButton.onclick = () => {
+      this.upNextEvents.trigger('next')
+    }
+    return container
+  }
+  showCard (cb: Function) {
+    let timeout: any
+    this.autoplayRing.setAttribute('stroke-dasharray', '' + this.dashOffsetStart)
+    this.autoplayRing.setAttribute('stroke-dashoffset', '' + -this.dashOffsetStart)
+    this.title.innerHTML = this.options_.getTitle()
+    this.upNextEvents.one('cancel', () => {
+      clearTimeout(timeout)
+      cb(true)
+    })
+    this.upNextEvents.one('playing', () => {
+      clearTimeout(timeout)
+      cb(true)
+    })
+    this.upNextEvents.one('next', () => {
+      clearTimeout(timeout)
+      cb(false)
+    })
+    const goToPercent = (percent: number) => {
+      const newOffset = Math.max(-this.dashOffsetTotal, - this.dashOffsetStart - percent * this.dashOffsetTotal / 2 / 100)
+      this.autoplayRing.setAttribute('stroke-dashoffset', '' + newOffset)
+    }
+    const tick = () => {
+      goToPercent((this.ticks++) * 100 / this.totalTicks)
+    }
+    const update = () => {
+      if (this.options_.suspended()) {
+        this.suspendedMessage.innerText = this.options_.suspendedText
+        goToPercent(0)
+        this.ticks = 0
+        timeout = setTimeout(update.bind(this), 300) // checks once supsended can be a bit longer
+      } else if (this.ticks >= this.totalTicks) {
+        clearTimeout(timeout)
+        cb(false)
+      } else {
+        this.suspendedMessage.innerText = ''
+        tick()
+        timeout = setTimeout(update.bind(this), this.interval)
+      }
+    }
+    this.container.style.display = 'block'
+    timeout = setTimeout(update.bind(this), this.interval)
+  }
+}
+videojs.registerComponent('EndCard', EndCard)
diff --git a/client/src/assets/player/upnext/upnext-plugin.ts b/client/src/assets/player/upnext/upnext-plugin.ts
index a3747b25f..6512fec2c 100644
--- a/client/src/assets/player/upnext/upnext-plugin.ts
+++ b/client/src/assets/player/upnext/upnext-plugin.ts
@@ -1,154 +1,11 @@
-// @ts-ignore
+import videojs, { VideoJsPlayer } from 'video.js'
-import * as videojs from 'video.js'
+import { EndCardOptions } from './end-card'
-import { VideoJSComponentInterface } from '../peertube-videojs-typings'
-function getMainTemplate (options: any) {
+const Plugin = videojs.getPlugin('plugin')
-  return `
-    <div class="vjs-upnext-top">
-      <span class="vjs-upnext-headtext">${options.headText}</span>
-      <div class="vjs-upnext-title"></div>
-    </div>
-    <div class="vjs-upnext-autoplay-icon">
-      <svg height="100%" version="1.1" viewbox="0 0 98 98" width="100%">
-        <circle class="vjs-upnext-svg-autoplay-circle" cx="49" cy="49" fill="#000" fill-opacity="0.8" r="48"></circle>
-        <circle class="vjs-upnext-svg-autoplay-ring" cx="-49" cy="49" fill-opacity="0" r="46.5" stroke="#FFFFFF" stroke-width="4" transform="rotate(-90)"></circle>
-        <polygon class="vjs-upnext-svg-autoplay-triangle" fill="#fff" points="32,27 72,49 32,71"></polygon></svg>
-    </div>
-    <span class="vjs-upnext-bottom">
-      <span class="vjs-upnext-cancel">
-        <button class="vjs-upnext-cancel-button" tabindex="0" aria-label="Cancel autoplay">${options.cancelText}</button>
-      </span>
-      <span class="vjs-upnext-suspended">${options.suspendedText}</span>
-    </span>
-  `
-}
-// @ts-ignore-start
-const Component = videojs.getComponent('Component')
-class EndCard extends Component {
-  options_: any
-  dashOffsetTotal = 586
-  dashOffsetStart = 293
-  interval = 50
-  upNextEvents = new videojs.EventTarget()
-  ticks = 0
-  totalTicks: number
-  container: HTMLElement
-  title: HTMLElement
-  autoplayRing: HTMLElement
-  cancelButton: HTMLElement
-  suspendedMessage: HTMLElement
-  nextButton: HTMLElement
-  constructor (player: videojs.Player, options: any) {
-    super(player, options)
-    this.totalTicks = this.options_.timeout / this.interval
-    player.on('ended', (_: any) => {
-      if (!this.options_.condition()) return
-      player.addClass('vjs-upnext--showing')
-      this.showCard((canceled: boolean) => {
-        player.removeClass('vjs-upnext--showing')
-        this.container.style.display = 'none'
-        if (!canceled) {
-          this.options_.next()
-        }
-      })
-    })
-    player.on('playing', () => {
-      this.upNextEvents.trigger('playing')
-    })
-  }
-  createEl () {
-    const container = super.createEl('div', {
-      className: 'vjs-upnext-content',
-      innerHTML: getMainTemplate(this.options_)
-    })
-    this.container = container
-    container.style.display = 'none'
-    this.autoplayRing = container.getElementsByClassName('vjs-upnext-svg-autoplay-ring')[0]
-    this.title = container.getElementsByClassName('vjs-upnext-title')[0]
-    this.cancelButton = container.getElementsByClassName('vjs-upnext-cancel-button')[0]
-    this.suspendedMessage = container.getElementsByClassName('vjs-upnext-suspended')[0]
-    this.nextButton = container.getElementsByClassName('vjs-upnext-autoplay-icon')[0]
-    this.cancelButton.onclick = () => {
-      this.upNextEvents.trigger('cancel')
-    }
-    this.nextButton.onclick = () => {
-      this.upNextEvents.trigger('next')
-    }
-    return container
-  }
-  showCard (cb: Function) {
-    let timeout: any
-    this.autoplayRing.setAttribute('stroke-dasharray', '' + this.dashOffsetStart)
-    this.autoplayRing.setAttribute('stroke-dashoffset', '' + -this.dashOffsetStart)
-    this.title.innerHTML = this.options_.getTitle()
-    this.upNextEvents.one('cancel', () => {
-      clearTimeout(timeout)
-      cb(true)
-    })
-    this.upNextEvents.one('playing', () => {
-      clearTimeout(timeout)
-      cb(true)
-    })
-    this.upNextEvents.one('next', () => {
-      clearTimeout(timeout)
-      cb(false)
-    })
-    const goToPercent = (percent: number) => {
-      const newOffset = Math.max(-this.dashOffsetTotal, - this.dashOffsetStart - percent * this.dashOffsetTotal / 2 / 100)
-      this.autoplayRing.setAttribute('stroke-dashoffset', '' + newOffset)
-    }
-    const tick = () => {
-      goToPercent((this.ticks++) * 100 / this.totalTicks)
-    }
-    const update = () => {
-      if (this.options_.suspended()) {
-        this.suspendedMessage.innerText = this.options_.suspendedText
-        goToPercent(0)
-        this.ticks = 0
-        timeout = setTimeout(update.bind(this), 300) // checks once supsended can be a bit longer
-      } else if (this.ticks >= this.totalTicks) {
-        clearTimeout(timeout)
-        cb(false)
-      } else {
-        this.suspendedMessage.innerText = ''
-        tick()
-        timeout = setTimeout(update.bind(this), this.interval)
-      }
-    }
-    this.container.style.display = 'block'
-    timeout = setTimeout(update.bind(this), this.interval)
-  }
-}
-// @ts-ignore-end
-videojs.registerComponent('EndCard', EndCard)
-const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin')
 class UpNextPlugin extends Plugin {
-  constructor (player: videojs.Player, options: any = {}) {
+  constructor (player: VideoJsPlayer, options: Partial<EndCardOptions> = {}) {
    const settings = {
      next: options.next,
      getTitle: options.getTitle,
@@ -160,7 +17,7 @@ class UpNextPlugin extends Plugin {
      suspended: options.suspended
    }
-    super(player, settings)
+    super(player)
    this.player.ready(() => {
      player.addClass('vjs-upnext')
diff --git a/client/src/assets/player/videojs-components/next-video-button.ts b/client/src/assets/player/videojs-components/next-video-button.ts
index bf5c1aba4..bdb245dcc 100644
--- a/client/src/assets/player/videojs-components/next-video-button.ts
+++ b/client/src/assets/player/videojs-components/next-video-button.ts
@@ -1,21 +1,25 @@
-import { VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
+import videojs, { VideoJsPlayer } from 'video.js'
-// FIXME: something weird with our path definition in tsconfig and typings
-// @ts-ignore
-import { Player } from 'video.js'
-const Button: VideoJSComponentInterface = videojsUntyped.getComponent('Button')
+const Button = videojs.getComponent('Button')
+export interface NextVideoButtonOptions extends videojs.ComponentOptions {
+  handler: Function
+}
 class NextVideoButton extends Button {
+  private readonly nextVideoButtonOptions: NextVideoButtonOptions
-  constructor (player: Player, options: any) {
+  constructor (player: VideoJsPlayer, options?: NextVideoButtonOptions) {
    super(player, options)
+    this.nextVideoButtonOptions = options
  }
  createEl () {
-    const button = videojsUntyped.dom.createEl('button', {
+    const button = videojs.dom.createEl('button', {
      className: 'vjs-next-video'
-    })
+    }) as HTMLButtonElement
-    const nextIcon = videojsUntyped.dom.createEl('span', {
+    const nextIcon = videojs.dom.createEl('span', {
      className: 'icon icon-next'
    })
    button.appendChild(nextIcon)
@@ -26,11 +30,8 @@ class NextVideoButton extends Button {
  }
  handleClick () {
-    this.options_.handler()
+    this.nextVideoButtonOptions.handler()
  }
 }
-NextVideoButton.prototype.controlText_ = 'Next video'
+videojs.registerComponent('NextVideoButton', NextVideoButton)
-NextVideoButton.registerComponent('NextVideoButton', NextVideoButton)
diff --git a/client/src/assets/player/videojs-components/p2p-info-button.ts b/client/src/assets/player/videojs-components/p2p-info-button.ts
index 6424787b2..db6806fed 100644
--- a/client/src/assets/player/videojs-components/p2p-info-button.ts
+++ b/client/src/assets/player/videojs-components/p2p-info-button.ts
@@ -1,63 +1,64 @@
-import { PlayerNetworkInfo, VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
+import { PlayerNetworkInfo } from '../peertube-videojs-typings'
+import videojs from 'video.js'
 import { bytes } from '../utils'
-const Button: VideoJSComponentInterface = videojsUntyped.getComponent('Button')
+const Button = videojs.getComponent('Button')
 class P2pInfoButton extends Button {
  createEl () {
-    const div = videojsUntyped.dom.createEl('div', {
+    const div = videojs.dom.createEl('div', {
      className: 'vjs-peertube'
    })
-    const subDivWebtorrent = videojsUntyped.dom.createEl('div', {
+    const subDivWebtorrent = videojs.dom.createEl('div', {
      className: 'vjs-peertube-hidden' // Hide the stats before we get the info
-    })
+    }) as HTMLDivElement
    div.appendChild(subDivWebtorrent)
-    const downloadIcon = videojsUntyped.dom.createEl('span', {
+    const downloadIcon = videojs.dom.createEl('span', {
      className: 'icon icon-download'
    })
    subDivWebtorrent.appendChild(downloadIcon)
-    const downloadSpeedText = videojsUntyped.dom.createEl('span', {
+    const downloadSpeedText = videojs.dom.createEl('span', {
      className: 'download-speed-text'
    })
-    const downloadSpeedNumber = videojsUntyped.dom.createEl('span', {
+    const downloadSpeedNumber = videojs.dom.createEl('span', {
      className: 'download-speed-number'
    })
-    const downloadSpeedUnit = videojsUntyped.dom.createEl('span')
+    const downloadSpeedUnit = videojs.dom.createEl('span')
    downloadSpeedText.appendChild(downloadSpeedNumber)
    downloadSpeedText.appendChild(downloadSpeedUnit)
    subDivWebtorrent.appendChild(downloadSpeedText)
-    const uploadIcon = videojsUntyped.dom.createEl('span', {
+    const uploadIcon = videojs.dom.createEl('span', {
      className: 'icon icon-upload'
    })
    subDivWebtorrent.appendChild(uploadIcon)
-    const uploadSpeedText = videojsUntyped.dom.createEl('span', {
+    const uploadSpeedText = videojs.dom.createEl('span', {
      className: 'upload-speed-text'
    })
-    const uploadSpeedNumber = videojsUntyped.dom.createEl('span', {
+    const uploadSpeedNumber = videojs.dom.createEl('span', {
      className: 'upload-speed-number'
    })
-    const uploadSpeedUnit = videojsUntyped.dom.createEl('span')
+    const uploadSpeedUnit = videojs.dom.createEl('span')
    uploadSpeedText.appendChild(uploadSpeedNumber)
    uploadSpeedText.appendChild(uploadSpeedUnit)
    subDivWebtorrent.appendChild(uploadSpeedText)
-    const peersText = videojsUntyped.dom.createEl('span', {
+    const peersText = videojs.dom.createEl('span', {
      className: 'peers-text'
    })
-    const peersNumber = videojsUntyped.dom.createEl('span', {
+    const peersNumber = videojs.dom.createEl('span', {
      className: 'peers-number'
    })
    subDivWebtorrent.appendChild(peersNumber)
    subDivWebtorrent.appendChild(peersText)
-    const subDivHttp = videojsUntyped.dom.createEl('div', {
+    const subDivHttp = videojs.dom.createEl('div', {
      className: 'vjs-peertube-hidden'
    })
-    const subDivHttpText = videojsUntyped.dom.createEl('span', {
+    const subDivHttpText = videojs.dom.createEl('span', {
      className: 'http-fallback',
      textContent: 'HTTP'
    })
@@ -83,8 +84,8 @@ class P2pInfoButton extends Button {
      const totalUploaded = bytes(p2pStats.uploaded + httpStats.uploaded)
      const numPeers = p2pStats.numPeers
-      subDivWebtorrent.title = this.player_.localize('Total downloaded: ') + totalDownloaded.join(' ') + '\n' +
+      subDivWebtorrent.title = this.player().localize('Total downloaded: ') + totalDownloaded.join(' ') + '\n' +
-        this.player_.localize('Total uploaded: ' + totalUploaded.join(' '))
+        this.player().localize('Total uploaded: ' + totalUploaded.join(' '))
      downloadSpeedNumber.textContent = downloadSpeed[ 0 ]
      downloadSpeedUnit.textContent = ' ' + downloadSpeed[ 1 ]
@@ -92,14 +93,15 @@ class P2pInfoButton extends Button {
      uploadSpeedNumber.textContent = uploadSpeed[ 0 ]
      uploadSpeedUnit.textContent = ' ' + uploadSpeed[ 1 ]
-      peersNumber.textContent = numPeers
+      peersNumber.textContent = numPeers.toString()
-      peersText.textContent = ' ' + (numPeers > 1 ? this.player_.localize('peers') : this.player_.localize('peer'))
+      peersText.textContent = ' ' + (numPeers > 1 ? this.player().localize('peers') : this.player_.localize('peer'))
      subDivHttp.className = 'vjs-peertube-hidden'
      subDivWebtorrent.className = 'vjs-peertube-displayed'
    })
-    return div
+    return div as HTMLButtonElement
  }
 }
-Button.registerComponent('P2PInfoButton', P2pInfoButton)
+videojs.registerComponent('P2PInfoButton', P2pInfoButton)
diff --git a/client/src/assets/player/videojs-components/peertube-link-button.ts b/client/src/assets/player/videojs-components/peertube-link-button.ts
index 4d0ea37f5..0db9762a5 100644
--- a/client/src/assets/player/videojs-components/peertube-link-button.ts
+++ b/client/src/assets/player/videojs-components/peertube-link-button.ts
@@ -1,13 +1,10 @@
-import { VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
 import { buildVideoLink } from '../utils'
-// FIXME: something weird with our path definition in tsconfig and typings
+import videojs, { VideoJsPlayer } from 'video.js'
-// @ts-ignore
-import { Player } from 'video.js'
-const Button: VideoJSComponentInterface = videojsUntyped.getComponent('Button')
+const Button = videojs.getComponent('Button')
 class PeerTubeLinkButton extends Button {
-  constructor (player: Player, options: any) {
+  constructor (player: VideoJsPlayer, options?: videojs.ComponentOptions) {
    super(player, options)
  }
@@ -20,21 +17,22 @@ class PeerTubeLinkButton extends Button {
  }
  handleClick () {
-    this.player_.pause()
+    this.player().pause()
  }
  private buildElement () {
-    const el = videojsUntyped.dom.createEl('a', {
+    const el = videojs.dom.createEl('a', {
      href: buildVideoLink(),
      innerHTML: 'PeerTube',
-      title: this.player_.localize('Go to the video page'),
+      title: this.player().localize('Go to the video page'),
      className: 'vjs-peertube-link',
      target: '_blank'
    })
    el.addEventListener('mouseenter', () => this.updateHref())
-    return el
+    return el as HTMLButtonElement
  }
 }
-Button.registerComponent('PeerTubeLinkButton', PeerTubeLinkButton)
+videojs.registerComponent('PeerTubeLinkButton', PeerTubeLinkButton)
diff --git a/client/src/assets/player/videojs-components/peertube-load-progress-bar.ts b/client/src/assets/player/videojs-components/peertube-load-progress-bar.ts
index b594fc1c5..8168e8f2d 100644
--- a/client/src/assets/player/videojs-components/peertube-load-progress-bar.ts
+++ b/client/src/assets/player/videojs-components/peertube-load-progress-bar.ts
@@ -1,16 +1,12 @@
-import { VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
+import videojs, { VideoJsPlayer } from 'video.js'
-// FIXME: something weird with our path definition in tsconfig and typings
-// @ts-ignore
-import { Player } from 'video.js'
-const Component: VideoJSComponentInterface = videojsUntyped.getComponent('Component')
+const Component = videojs.getComponent('Component')
 class PeerTubeLoadProgressBar extends Component {
-  partEls_: any[]
-  constructor (player: Player, options: any) {
+  constructor (player: VideoJsPlayer, options?: videojs.ComponentOptions) {
    super(player, options)
-    this.partEls_ = []
    this.on(player, 'progress', this.update)
  }
@@ -22,8 +18,6 @@ class PeerTubeLoadProgressBar extends Component {
  }
  dispose () {
-    this.partEls_ = null
    super.dispose()
  }
@@ -31,7 +25,8 @@ class PeerTubeLoadProgressBar extends Component {
    const torrent = this.player().webtorrent().getTorrent()
    if (!torrent) return
-    this.el_.style.width = (torrent.progress * 100) + '%'
+    // FIXME: typings
+    (this.el() as HTMLElement).style.width = (torrent.progress * 100) + '%'
  }
 }
diff --git a/client/src/assets/player/videojs-components/resolution-menu-button.ts b/client/src/assets/player/videojs-components/resolution-menu-button.ts
index 2de3ece19..0fa6272e7 100644
--- a/client/src/assets/player/videojs-components/resolution-menu-button.ts
+++ b/client/src/assets/player/videojs-components/resolution-menu-button.ts
@@ -1,22 +1,19 @@
-// FIXME: something weird with our path definition in tsconfig and typings
+import videojs, { VideoJsPlayer } from 'video.js'
-// @ts-ignore
-import { Player } from 'video.js'
-import { LoadedQualityData, VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
+import { LoadedQualityData } from '../peertube-videojs-typings'
 import { ResolutionMenuItem } from './resolution-menu-item'
-const Menu: VideoJSComponentInterface = videojsUntyped.getComponent('Menu')
+const Menu = videojs.getComponent('Menu')
-const MenuButton: VideoJSComponentInterface = videojsUntyped.getComponent('MenuButton')
+const MenuButton = videojs.getComponent('MenuButton')
 class ResolutionMenuButton extends MenuButton {
-  label: HTMLElement
+  labelEl_: HTMLElement
-  labelEl_: any
-  player: Player
-  constructor (player: Player, options: any) {
+  constructor (player: VideoJsPlayer, options?: videojs.MenuButtonOptions) {
    super(player, options)
-    this.player = player
-    player.tech_.on('loadedqualitydata', (e: any, data: any) => this.buildQualities(data))
+    this.controlText('Quality')
+    player.tech(true).on('loadedqualitydata', (e: any, data: any) => this.buildQualities(data))
    player.peertube().on('resolutionChange', () => setTimeout(() => this.trigger('updateLabel'), 0))
  }
@@ -24,9 +21,9 @@ class ResolutionMenuButton extends MenuButton {
  createEl () {
    const el = super.createEl()
-    this.labelEl_ = videojsUntyped.dom.createEl('div', {
+    this.labelEl_ = videojs.dom.createEl('div', {
      className: 'vjs-resolution-value'
-    })
+    }) as HTMLElement
    el.appendChild(this.labelEl_)
@@ -55,7 +52,7 @@ class ResolutionMenuButton extends MenuButton {
      for (const child of children) {
        if (component !== child) {
-          child.selected(false)
+          (child as videojs.MenuItem).selected(false)
        }
      }
    })
@@ -76,7 +73,7 @@ class ResolutionMenuButton extends MenuButton {
      if (d.id === -1) continue
      const label = d.label === '0p'
-        ? this.player.localize('Audio-only')
+        ? this.player().localize('Audio-only')
        : d.label
      this.menu.addChild(new ResolutionMenuItem(
@@ -110,6 +107,5 @@ class ResolutionMenuButton extends MenuButton {
    this.trigger('menuChanged')
  }
 }
-ResolutionMenuButton.prototype.controlText_ = 'Quality'
-MenuButton.registerComponent('ResolutionMenuButton', ResolutionMenuButton)
+videojs.registerComponent('ResolutionMenuButton', ResolutionMenuButton)
diff --git a/client/src/assets/player/videojs-components/resolution-menu-item.ts b/client/src/assets/player/videojs-components/resolution-menu-item.ts
index 6c42fefd2..b039c4572 100644
--- a/client/src/assets/player/videojs-components/resolution-menu-item.ts
+++ b/client/src/assets/player/videojs-components/resolution-menu-item.ts
@@ -1,12 +1,16 @@
-// FIXME: something weird with our path definition in tsconfig and typings
+import videojs, { VideoJsPlayer } from 'video.js'
-// @ts-ignore
+import { AutoResolutionUpdateData, ResolutionUpdateData } from '../peertube-videojs-typings'
-import { Player } from 'video.js'
-import { AutoResolutionUpdateData, ResolutionUpdateData, VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
+const MenuItem = videojs.getComponent('MenuItem')
+export interface ResolutionMenuItemOptions extends videojs.MenuItemOptions {
+  labels?: { [id: number]: string }
+  id: number
+  callback: Function
+}
-const MenuItem: VideoJSComponentInterface = videojsUntyped.getComponent('MenuItem')
 class ResolutionMenuItem extends MenuItem {
-  private readonly id: number
+  private readonly resolutionId: number
  private readonly label: string
  // Only used for the automatic item
  private readonly labels: { [id: number]: string }
@@ -15,7 +19,7 @@ class ResolutionMenuItem extends MenuItem {
  private autoResolutionPossible: boolean
  private currentResolutionLabel: string
-  constructor (player: Player, options: any) {
+  constructor (player: VideoJsPlayer, options?: ResolutionMenuItemOptions) {
    options.selectable = true
    super(player, options)
@@ -23,40 +27,40 @@ class ResolutionMenuItem extends MenuItem {
    this.autoResolutionPossible = true
    this.currentResolutionLabel = ''
+    this.resolutionId = options.id
    this.label = options.label
    this.labels = options.labels
-    this.id = options.id
    this.callback = options.callback
    player.peertube().on('resolutionChange', (_: any, data: ResolutionUpdateData) => this.updateSelection(data))
    // We only want to disable the "Auto" item
-    if (this.id === -1) {
+    if (this.resolutionId === -1) {
      player.peertube().on('autoResolutionChange', (_: any, data: AutoResolutionUpdateData) => this.updateAutoResolution(data))
    }
  }
  handleClick (event: any) {
    // Auto button disabled?
-    if (this.autoResolutionPossible === false && this.id === -1) return
+    if (this.autoResolutionPossible === false && this.resolutionId === -1) return
    super.handleClick(event)
-    this.callback(this.id, 'video')
+    this.callback(this.resolutionId, 'video')
  }
  updateSelection (data: ResolutionUpdateData) {
-    if (this.id === -1) {
+    if (this.resolutionId === -1) {
      this.currentResolutionLabel = this.labels[data.id]
    }
    // Automatic resolution only
    if (data.auto === true) {
-      this.selected(this.id === -1)
+      this.selected(this.resolutionId === -1)
      return
    }
-    this.selected(this.id === data.id)
+    this.selected(this.resolutionId === data.id)
  }
  updateAutoResolution (data: AutoResolutionUpdateData) {
@@ -71,13 +75,13 @@ class ResolutionMenuItem extends MenuItem {
  }
  getLabel () {
-    if (this.id === -1) {
+    if (this.resolutionId === -1) {
      return this.label + ' <small>' + this.currentResolutionLabel + '</small>'
    }
    return this.label
  }
 }
-MenuItem.registerComponent('ResolutionMenuItem', ResolutionMenuItem)
+videojs.registerComponent('ResolutionMenuItem', ResolutionMenuItem)
 export { ResolutionMenuItem }
diff --git a/client/src/assets/player/videojs-components/settings-dialog.ts b/client/src/assets/player/videojs-components/settings-dialog.ts
new file mode 100644
index 000000000..dd0b1e472
--- /dev/null
+++ b/client/src/assets/player/videojs-components/settings-dialog.ts
@@ -0,0 +1,37 @@
+import videojs, { VideoJsPlayer } from 'video.js'
+const Component = videojs.getComponent('Component')
+class SettingsDialog extends Component {
+  constructor (player: VideoJsPlayer) {
+    super(player)
+    this.hide()
+  }
+  /**
+   * Create the component's DOM element
+   *
+   * @return {Element}
+   * @method createEl
+   */
+  createEl () {
+    const uniqueId = this.id()
+    const dialogLabelId = 'TTsettingsDialogLabel-' + uniqueId
+    const dialogDescriptionId = 'TTsettingsDialogDescription-' + uniqueId
+    return super.createEl('div', {
+      className: 'vjs-settings-dialog vjs-modal-overlay',
+      innerHTML: '',
+      tabIndex: -1
+    }, {
+      'role': 'dialog',
+      'aria-labelledby': dialogLabelId,
+      'aria-describedby': dialogDescriptionId
+    })
+  }
+}
+Component.registerComponent('SettingsDialog', SettingsDialog)
+export { SettingsDialog }
diff --git a/client/src/assets/player/videojs-components/settings-menu-button.ts b/client/src/assets/player/videojs-components/settings-menu-button.ts
index b700f4be6..eae628e7d 100644
--- a/client/src/assets/player/videojs-components/settings-menu-button.ts
+++ b/client/src/assets/player/videojs-components/settings-menu-button.ts
@@ -1,43 +1,52 @@
-// Author: Yanko Shterev
+// Thanks to Yanko Shterev: https://github.com/yshterev/videojs-settings-menu
-// Thanks https://github.com/yshterev/videojs-settings-menu
-// FIXME: something weird with our path definition in tsconfig and typings
-// @ts-ignore
-import * as videojs from 'video.js'
 import { SettingsMenuItem } from './settings-menu-item'
-import { VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
 import { toTitleCase } from '../utils'
+import videojs, { VideoJsPlayer } from 'video.js'
+import { SettingsDialog } from './settings-dialog'
+import { SettingsPanel } from './settings-panel'
+import { SettingsPanelChild } from './settings-panel-child'
-const Button: VideoJSComponentInterface = videojsUntyped.getComponent('Button')
+const Button = videojs.getComponent('Button')
-const Menu: VideoJSComponentInterface = videojsUntyped.getComponent('Menu')
+const Menu = videojs.getComponent('Menu')
-const Component: VideoJSComponentInterface = videojsUntyped.getComponent('Component')
+const Component = videojs.getComponent('Component')
+export interface SettingsButtonOptions extends videojs.ComponentOptions {
+  entries: any[]
+  setup?: {
+    maxHeightOffset: number
+  }
+}
 class SettingsButton extends Button {
-  playerComponent = videojs.Player
+  dialog: SettingsDialog
-  dialog: any
+  dialogEl: HTMLElement
-  dialogEl: any
+  menu: videojs.Menu
-  menu: any
+  panel: SettingsPanel
-  panel: any
+  panelChild: SettingsPanelChild
-  panelChild: any
+  addSettingsItemHandler: typeof SettingsButton.prototype.onAddSettingsItem
-  addSettingsItemHandler: Function
+  disposeSettingsItemHandler: typeof SettingsButton.prototype.onDisposeSettingsItem
-  disposeSettingsItemHandler: Function
+  playerClickHandler: typeof SettingsButton.prototype.onPlayerClick
-  playerClickHandler: Function
+  userInactiveHandler: typeof SettingsButton.prototype.onUserInactive
-  userInactiveHandler: Function
+  private settingsButtonOptions: SettingsButtonOptions
-  constructor (player: videojs.Player, options: any) {
+  constructor (player: VideoJsPlayer, options?: SettingsButtonOptions) {
    super(player, options)
-    this.playerComponent = player
+    this.settingsButtonOptions = options
-    this.dialog = this.playerComponent.addChild('settingsDialog')
-    this.dialogEl = this.dialog.el_
+    this.controlText('Settings')
+    this.dialog = this.player().addChild('settingsDialog')
+    this.dialogEl = this.dialog.el() as HTMLElement
    this.menu = null
    this.panel = this.dialog.addChild('settingsPanel')
    this.panelChild = this.panel.addChild('settingsPanelChild')
    this.addClass('vjs-settings')
-    this.el_.setAttribute('aria-label', 'Settings Button')
+    this.el().setAttribute('aria-label', 'Settings Button')
    // Event handlers
    this.addSettingsItemHandler = this.onAddSettingsItem.bind(this)
@@ -84,7 +93,7 @@ class SettingsButton extends Button {
    this.hideDialog()
-    if (this.options_.entries.length === 0) {
+    if (this.settingsButtonOptions.entries.length === 0) {
      this.addClass('vjs-hidden')
    }
  }
@@ -103,10 +112,10 @@ class SettingsButton extends Button {
  }
  bindEvents () {
-    this.playerComponent.on('click', this.playerClickHandler)
+    this.player().on('click', this.playerClickHandler)
-    this.playerComponent.on('addsettingsitem', this.addSettingsItemHandler)
+    this.player().on('addsettingsitem', this.addSettingsItemHandler)
-    this.playerComponent.on('disposesettingsitem', this.disposeSettingsItemHandler)
+    this.player().on('disposesettingsitem', this.disposeSettingsItemHandler)
-    this.playerComponent.on('userinactive', this.userInactiveHandler)
+    this.player().on('userinactive', this.userInactiveHandler)
  }
  buildCSSClass () {
@@ -122,9 +131,9 @@ class SettingsButton extends Button {
  }
  showDialog () {
-    this.player_.peertube().onMenuOpen()
+    this.player().peertube().onMenuOpen();
-    this.menu.el_.style.opacity = '1'
+    (this.menu.el() as HTMLElement).style.opacity = '1'
    this.dialog.show()
    this.setDialogSize(this.getComponentSize(this.menu))
@@ -134,23 +143,24 @@ class SettingsButton extends Button {
    this.player_.peertube().onMenuClosed()
    this.dialog.hide()
-    this.setDialogSize(this.getComponentSize(this.menu))
+    this.setDialogSize(this.getComponentSize(this.menu));
-    this.menu.el_.style.opacity = '1'
+    (this.menu.el() as HTMLElement).style.opacity = '1'
    this.resetChildren()
  }
-  getComponentSize (element: any) {
+  getComponentSize (element: videojs.Component | HTMLElement) {
    let width: number = null
    let height: number = null
    // Could be component or just DOM element
    if (element instanceof Component) {
-      width = element.el_.offsetWidth
+      const el = element.el() as HTMLElement
-      height = element.el_.offsetHeight
+      width = el.offsetWidth
+      height = el.offsetHeight;
-      // keep width/height as properties for direct use
+      (element as any).width = width;
-      element.width = width
+      (element as any).height = height
-      element.height = height
    } else {
      width = element.offsetWidth
      height = element.offsetHeight
@@ -164,15 +174,17 @@ class SettingsButton extends Button {
      return
    }
-    const offset = this.options_.setup.maxHeightOffset
+    const offset = this.settingsButtonOptions.setup.maxHeightOffset
-    const maxHeight = this.playerComponent.el_.offsetHeight - offset
+    const maxHeight = (this.player().el() as HTMLElement).offsetHeight - offset // FIXME: typings
+    const panelEl = this.panel.el() as HTMLElement
    if (height > maxHeight) {
      height = maxHeight
      width += 17
-      this.panel.el_.style.maxHeight = `${height}px`
+      panelEl.style.maxHeight = `${height}px`
-    } else if (this.panel.el_.style.maxHeight !== '') {
+    } else if (panelEl.style.maxHeight !== '') {
-      this.panel.el_.style.maxHeight = ''
+      panelEl.style.maxHeight = ''
    }
    this.dialogEl.style.width = `${width}px`
@@ -182,7 +194,7 @@ class SettingsButton extends Button {
  buildMenu () {
    this.menu = new Menu(this.player())
    this.menu.addClass('vjs-main-menu')
-    const entries = this.options_.entries
+    const entries = this.settingsButtonOptions.entries
    if (entries.length === 0) {
      this.addClass('vjs-hidden')
@@ -191,7 +203,7 @@ class SettingsButton extends Button {
    }
    for (const entry of entries) {
-      this.addMenuItem(entry, this.options_)
+      this.addMenuItem(entry, this.settingsButtonOptions)
    }
    this.panelChild.addChild(this.menu)
@@ -199,15 +211,17 @@ class SettingsButton extends Button {
  addMenuItem (entry: any, options: any) {
    const openSubMenu = function (this: any) {
-      if (videojsUntyped.dom.hasClass(this.el_, 'open')) {
+      if (videojs.dom.hasClass(this.el_, 'open')) {
-        videojsUntyped.dom.removeClass(this.el_, 'open')
+        videojs.dom.removeClass(this.el_, 'open')
      } else {
-        videojsUntyped.dom.addClass(this.el_, 'open')
+        videojs.dom.addClass(this.el_, 'open')
      }
    }
    options.name = toTitleCase(entry)
-    const settingsMenuItem = new SettingsMenuItem(this.player(), options, entry, this as any)
+    const newOptions = Object.assign({}, options, { entry, menuButton: this })
+    const settingsMenuItem = new SettingsMenuItem(this.player(), newOptions)
    this.menu.addChild(settingsMenuItem)
@@ -221,7 +235,7 @@ class SettingsButton extends Button {
  resetChildren () {
    for (const menuChild of this.menu.children()) {
-      menuChild.reset()
+      (menuChild as SettingsMenuItem).reset()
    }
  }
@@ -230,75 +244,12 @@ class SettingsButton extends Button {
   */
  hideChildren () {
    for (const menuChild of this.menu.children()) {
-      menuChild.hideSubMenu()
+      (menuChild as SettingsMenuItem).hideSubMenu()
    }
  }
 }
-class SettingsPanel extends Component {
-  constructor (player: videojs.Player, options: any) {
-    super(player, options)
-  }
-  createEl () {
-    return super.createEl('div', {
-      className: 'vjs-settings-panel',
-      innerHTML: '',
-      tabIndex: -1
-    })
-  }
-}
-class SettingsPanelChild extends Component {
-  constructor (player: videojs.Player, options: any) {
-    super(player, options)
-  }
-  createEl () {
-    return super.createEl('div', {
-      className: 'vjs-settings-panel-child',
-      innerHTML: '',
-      tabIndex: -1
-    })
-  }
-}
-class SettingsDialog extends Component {
-  constructor (player: videojs.Player, options: any) {
-    super(player, options)
-    this.hide()
-  }
-  /**
-   * Create the component's DOM element
-   *
-   * @return {Element}
-   * @method createEl
-   */
-  createEl () {
-    const uniqueId = this.id_
-    const dialogLabelId = 'TTsettingsDialogLabel-' + uniqueId
-    const dialogDescriptionId = 'TTsettingsDialogDescription-' + uniqueId
-    return super.createEl('div', {
-      className: 'vjs-settings-dialog vjs-modal-overlay',
-      innerHTML: '',
-      tabIndex: -1
-    }, {
-      'role': 'dialog',
-      'aria-labelledby': dialogLabelId,
-      'aria-describedby': dialogDescriptionId
-    })
-  }
-}
-SettingsButton.prototype.controlText_ = 'Settings'
 Component.registerComponent('SettingsButton', SettingsButton)
-Component.registerComponent('SettingsDialog', SettingsDialog)
-Component.registerComponent('SettingsPanel', SettingsPanel)
-Component.registerComponent('SettingsPanelChild', SettingsPanelChild)
-export { SettingsButton, SettingsDialog, SettingsPanel, SettingsPanelChild }
+export { SettingsButton }
diff --git a/client/src/assets/player/videojs-components/settings-menu-item.ts b/client/src/assets/player/videojs-components/settings-menu-item.ts
index 84d394c0e..f5671f49d 100644
--- a/client/src/assets/player/videojs-components/settings-menu-item.ts
+++ b/client/src/assets/player/videojs-components/settings-menu-item.ts
@@ -1,57 +1,63 @@
-// Author: Yanko Shterev
+// Thanks to Yanko Shterev: https://github.com/yshterev/videojs-settings-menu
-// Thanks https://github.com/yshterev/videojs-settings-menu
-// FIXME: something weird with our path definition in tsconfig and typings
-// @ts-ignore
-import * as videojs from 'video.js'
 import { toTitleCase } from '../utils'
-import { VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
+import videojs, { VideoJsPlayer } from 'video.js'
+import { SettingsButton } from './settings-menu-button'
-const MenuItem: VideoJSComponentInterface = videojsUntyped.getComponent('MenuItem')
+import { SettingsDialog } from './settings-dialog'
-const component: VideoJSComponentInterface = videojsUntyped.getComponent('Component')
+import { SettingsPanel } from './settings-panel'
+import { SettingsPanelChild } from './settings-panel-child'
+const MenuItem = videojs.getComponent('MenuItem')
+const component = videojs.getComponent('Component')
+export interface SettingsMenuItemOptions extends videojs.MenuItemOptions {
+  entry: string
+  menuButton: SettingsButton
+}
 class SettingsMenuItem extends MenuItem {
-  settingsButton: any
+  settingsButton: SettingsButton
-  dialog: any
+  dialog: SettingsDialog
-  mainMenu: any
+  mainMenu: videojs.Menu
-  panel: any
+  panel: SettingsPanel
-  panelChild: any
+  panelChild: SettingsPanelChild
-  panelChildEl: any
+  panelChildEl: HTMLElement
-  size: any
+  size: number[]
  menuToLoad: string
-  subMenu: any
+  subMenu: SettingsButton
-  submenuClickHandler: Function
+  submenuClickHandler: typeof SettingsMenuItem.prototype.onSubmenuClick
-  transitionEndHandler: Function
+  transitionEndHandler: typeof SettingsMenuItem.prototype.onTransitionEnd
-  settingsSubMenuTitleEl_: any
+  settingsSubMenuTitleEl_: HTMLElement
-  settingsSubMenuValueEl_: any
+  settingsSubMenuValueEl_: HTMLElement
-  settingsSubMenuEl_: any
+  settingsSubMenuEl_: HTMLElement
-  constructor (player: videojs.Player, options: any, entry: string, menuButton: VideoJSComponentInterface) {
+  constructor (player: VideoJsPlayer, options?: SettingsMenuItemOptions) {
    super(player, options)
-    this.settingsButton = menuButton
+    this.settingsButton = options.menuButton
    this.dialog = this.settingsButton.dialog
    this.mainMenu = this.settingsButton.menu
    this.panel = this.dialog.getChild('settingsPanel')
    this.panelChild = this.panel.getChild('settingsPanelChild')
-    this.panelChildEl = this.panelChild.el_
+    this.panelChildEl = this.panelChild.el() as HTMLElement
    this.size = null
    // keep state of what menu type is loading next
    this.menuToLoad = 'mainmenu'
-    const subMenuName = toTitleCase(entry)
+    const subMenuName = toTitleCase(options.entry)
-    const SubMenuComponent = videojsUntyped.getComponent(subMenuName)
+    const SubMenuComponent = videojs.getComponent(subMenuName)
    if (!SubMenuComponent) {
      throw new Error(`Component ${subMenuName} does not exist`)
    }
-    this.subMenu = new SubMenuComponent(this.player(), options, menuButton, this)
-    const subMenuClass = this.subMenu.buildCSSClass().split(' ')[0]
+    const newOptions = Object.assign({}, options, { entry: options.menuButton, menuButton: this })
+    this.subMenu = new SubMenuComponent(this.player(), newOptions) as any // FIXME: typings
+    const subMenuClass = this.subMenu.buildCSSClass().split(' ')[ 0 ]
    this.settingsSubMenuEl_.className += ' ' + subMenuClass
    this.eventHandlers()
@@ -72,7 +78,7 @@ class SettingsMenuItem extends MenuItem {
          player.on('captionsChanged', () => {
            setTimeout(() => {
              this.settingsSubMenuEl_.innerHTML = ''
-              this.settingsSubMenuEl_.appendChild(this.subMenu.menu.el_)
+              this.settingsSubMenuEl_.appendChild(this.subMenu.menu.el())
              this.update()
              this.bindClickEvents()
            }, 0)
@@ -119,27 +125,27 @@ class SettingsMenuItem extends MenuItem {
   * @method createEl
   */
  createEl () {
-    const el = videojsUntyped.dom.createEl('li', {
+    const el = videojs.dom.createEl('li', {
      className: 'vjs-menu-item'
    })
-    this.settingsSubMenuTitleEl_ = videojsUntyped.dom.createEl('div', {
+    this.settingsSubMenuTitleEl_ = videojs.dom.createEl('div', {
      className: 'vjs-settings-sub-menu-title'
-    })
+    }) as HTMLElement
    el.appendChild(this.settingsSubMenuTitleEl_)
-    this.settingsSubMenuValueEl_ = videojsUntyped.dom.createEl('div', {
+    this.settingsSubMenuValueEl_ = videojs.dom.createEl('div', {
      className: 'vjs-settings-sub-menu-value'
-    })
+    }) as HTMLElement
    el.appendChild(this.settingsSubMenuValueEl_)
-    this.settingsSubMenuEl_ = videojsUntyped.dom.createEl('div', {
+    this.settingsSubMenuEl_ = videojs.dom.createEl('div', {
      className: 'vjs-settings-sub-menu'
-    })
+    }) as HTMLElement
-    return el
+    return el as HTMLLIElement
  }
  /**
@@ -147,17 +153,17 @@ class SettingsMenuItem extends MenuItem {
   *
   * @method handleClick
   */
-  handleClick () {
+  handleClick (event: videojs.EventTarget.Event) {
    this.menuToLoad = 'submenu'
    // Remove open class to ensure only the open submenu gets this class
-    videojsUntyped.dom.removeClass(this.el_, 'open')
+    videojs.dom.removeClass(this.el(), 'open')
-    super.handleClick()
+    super.handleClick(event);
-    this.mainMenu.el_.style.opacity = '0'
+    (this.mainMenu.el() as HTMLElement).style.opacity = '0'
    // Whether to add or remove vjs-hidden class on the settingsSubMenuEl element
-    if (videojsUntyped.dom.hasClass(this.settingsSubMenuEl_, 'vjs-hidden')) {
+    if (videojs.dom.hasClass(this.settingsSubMenuEl_, 'vjs-hidden')) {
-      videojsUntyped.dom.removeClass(this.settingsSubMenuEl_, 'vjs-hidden')
+      videojs.dom.removeClass(this.settingsSubMenuEl_, 'vjs-hidden')
      // animation not played without timeout
      setTimeout(() => {
@@ -167,7 +173,7 @@ class SettingsMenuItem extends MenuItem {
      this.settingsButton.setDialogSize(this.size)
    } else {
-      videojsUntyped.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
+      videojs.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
    }
  }
@@ -178,9 +184,9 @@ class SettingsMenuItem extends MenuItem {
   */
  createBackButton () {
    const button = this.subMenu.menu.addChild('MenuItem', {}, 0)
-    button.name_ = 'BackButton'
-    button.addClass('vjs-back-button')
+    button.addClass('vjs-back-button');
-    button.el_.innerHTML = this.player_.localize(this.subMenu.controlText_)
+    (button.el() as HTMLElement).innerHTML = this.player().localize(this.subMenu.controlText())
  }
  /**
@@ -189,17 +195,17 @@ class SettingsMenuItem extends MenuItem {
   * @method PrefixedEvent
   */
  PrefixedEvent (element: any, type: any, callback: any, action = 'addEvent') {
-    const prefix = ['webkit', 'moz', 'MS', 'o', '']
+    const prefix = [ 'webkit', 'moz', 'MS', 'o', '' ]
    for (let p = 0; p < prefix.length; p++) {
-      if (!prefix[p]) {
+      if (!prefix[ p ]) {
        type = type.toLowerCase()
      }
      if (action === 'addEvent') {
-        element.addEventListener(prefix[p] + type, callback, false)
+        element.addEventListener(prefix[ p ] + type, callback, false)
      } else if (action === 'removeEvent') {
-        element.removeEventListener(prefix[p] + type, callback, false)
+        element.removeEventListener(prefix[ p ] + type, callback, false)
      }
    }
  }
@@ -211,7 +217,7 @@ class SettingsMenuItem extends MenuItem {
    if (this.menuToLoad === 'mainmenu') {
      // hide submenu
-      videojsUntyped.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
+      videojs.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
      // reset opacity to 0
      this.settingsSubMenuEl_.style.opacity = '0'
@@ -219,25 +225,27 @@ class SettingsMenuItem extends MenuItem {
  }
  reset () {
-    videojsUntyped.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
+    videojs.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
    this.settingsSubMenuEl_.style.opacity = '0'
    this.setMargin()
  }
  loadMainMenu () {
+    const mainMenuEl = this.mainMenu.el() as HTMLElement
    this.menuToLoad = 'mainmenu'
    this.mainMenu.show()
-    this.mainMenu.el_.style.opacity = '0'
+    mainMenuEl.style.opacity = '0'
    // back button will always take you to main menu, so set dialog sizes
-    this.settingsButton.setDialogSize([this.mainMenu.width, this.mainMenu.height])
+    const mainMenuAny = this.mainMenu as any
+    this.settingsButton.setDialogSize([ mainMenuAny.width, mainMenuAny.height ])
    // animation not triggered without timeout (some async stuff ?!?)
    setTimeout(() => {
      // animate margin and opacity before hiding the submenu
      // this triggers CSS Transition event
      this.setMargin()
-      this.mainMenu.el_.style.opacity = '1'
+      mainMenuEl.style.opacity = '1'
    }, 0)
  }
@@ -251,8 +259,8 @@ class SettingsMenuItem extends MenuItem {
      this.update()
    })
-    this.settingsSubMenuTitleEl_.innerHTML = this.player_.localize(this.subMenu.controlText_)
+    this.settingsSubMenuTitleEl_.innerHTML = this.player().localize(this.subMenu.controlText())
-    this.settingsSubMenuEl_.appendChild(this.subMenu.menu.el_)
+    this.settingsSubMenuEl_.appendChild(this.subMenu.menu.el())
    this.panelChildEl.appendChild(this.settingsSubMenuEl_)
    this.update()
@@ -283,7 +291,8 @@ class SettingsMenuItem extends MenuItem {
    // or sets options_['selected'] on the selected playback rate.
    // Thus we get the submenu value based on the labelEl of playbackRateMenuButton
    if (subMenu === 'PlaybackRateMenuButton') {
-      setTimeout(() => this.settingsSubMenuValueEl_.innerHTML = this.subMenu.labelEl_.innerHTML, 250)
+      const html = (this.subMenu as any).labelEl_.innerHTML
+      setTimeout(() => this.settingsSubMenuValueEl_.innerHTML = html, 250)
    } else {
      // Loop trough the submenu items to find the selected child
      for (const subMenuItem of this.subMenu.menu.children_) {
@@ -292,13 +301,15 @@ class SettingsMenuItem extends MenuItem {
        }
        if (subMenuItem.hasClass('vjs-selected')) {
+          const subMenuItemUntyped = subMenuItem as any
          // Prefer to use the function
-          if (typeof subMenuItem.getLabel === 'function') {
+          if (typeof subMenuItemUntyped.getLabel === 'function') {
-            this.settingsSubMenuValueEl_.innerHTML = subMenuItem.getLabel()
+            this.settingsSubMenuValueEl_.innerHTML = subMenuItemUntyped.getLabel()
            break
          }
-          this.settingsSubMenuValueEl_.innerHTML = subMenuItem.options_.label
+          this.settingsSubMenuValueEl_.innerHTML = subMenuItemUntyped.options_.label
        }
      }
    }
@@ -313,7 +324,7 @@ class SettingsMenuItem extends MenuItem {
      if (!(item instanceof component)) {
        continue
      }
-      item.on(['tap', 'click'], this.submenuClickHandler)
+      item.on([ 'tap', 'click' ], this.submenuClickHandler)
    }
  }
@@ -321,11 +332,11 @@ class SettingsMenuItem extends MenuItem {
  // if number of submenu items change dynamically more logic will be needed
  setSize () {
    this.dialog.removeClass('vjs-hidden')
-    videojsUntyped.dom.removeClass(this.settingsSubMenuEl_, 'vjs-hidden')
+    videojs.dom.removeClass(this.settingsSubMenuEl_, 'vjs-hidden')
    this.size = this.settingsButton.getComponentSize(this.settingsSubMenuEl_)
    this.setMargin()
    this.dialog.addClass('vjs-hidden')
-    videojsUntyped.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
+    videojs.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
  }
  setMargin () {
@@ -341,19 +352,19 @@ class SettingsMenuItem extends MenuItem {
   */
  hideSubMenu () {
    // after removing settings item this.el_ === null
-    if (!this.el_) {
+    if (!this.el()) {
      return
    }
-    if (videojsUntyped.dom.hasClass(this.el_, 'open')) {
+    if (videojs.dom.hasClass(this.el(), 'open')) {
-      videojsUntyped.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
+      videojs.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
-      videojsUntyped.dom.removeClass(this.el_, 'open')
+      videojs.dom.removeClass(this.el(), 'open')
    }
  }
 }
-SettingsMenuItem.prototype.contentElType = 'button'
+(SettingsMenuItem as any).prototype.contentElType = 'button'
-videojsUntyped.registerComponent('SettingsMenuItem', SettingsMenuItem)
+videojs.registerComponent('SettingsMenuItem', SettingsMenuItem)
 export { SettingsMenuItem }
diff --git a/client/src/assets/player/videojs-components/settings-panel-child.ts b/client/src/assets/player/videojs-components/settings-panel-child.ts
new file mode 100644
index 000000000..d12e8218a
--- /dev/null
+++ b/client/src/assets/player/videojs-components/settings-panel-child.ts
@@ -0,0 +1,22 @@
+import videojs, { VideoJsPlayer } from 'video.js'
+const Component = videojs.getComponent('Component')
+class SettingsPanelChild extends Component {
+  constructor (player: VideoJsPlayer, options?: videojs.ComponentOptions) {
+    super(player, options)
+  }
+  createEl () {
+    return super.createEl('div', {
+      className: 'vjs-settings-panel-child',
+      innerHTML: '',
+      tabIndex: -1
+    })
+  }
+}
+Component.registerComponent('SettingsPanelChild', SettingsPanelChild)
+export { SettingsPanelChild }
diff --git a/client/src/assets/player/videojs-components/settings-panel.ts b/client/src/assets/player/videojs-components/settings-panel.ts
new file mode 100644
index 000000000..2090abf45
--- /dev/null
+++ b/client/src/assets/player/videojs-components/settings-panel.ts
@@ -0,0 +1,22 @@
+import videojs, { VideoJsPlayer } from 'video.js'
+const Component = videojs.getComponent('Component')
+class SettingsPanel extends Component {
+  constructor (player: VideoJsPlayer, options?: videojs.ComponentOptions) {
+    super(player, options)
+  }
+  createEl () {
+    return super.createEl('div', {
+      className: 'vjs-settings-panel',
+      innerHTML: '',
+      tabIndex: -1
+    })
+  }
+}
+Component.registerComponent('SettingsPanel', SettingsPanel)
+export { SettingsPanel }
diff --git a/client/src/assets/player/videojs-components/theater-button.ts b/client/src/assets/player/videojs-components/theater-button.ts
index bf383cf34..1c8c9f154 100644
--- a/client/src/assets/player/videojs-components/theater-button.ts
+++ b/client/src/assets/player/videojs-components/theater-button.ts
@@ -1,26 +1,24 @@
-// FIXME: something weird with our path definition in tsconfig and typings
+import videojs, { VideoJsPlayer } from 'video.js'
-// @ts-ignore
-import * as videojs from 'video.js'
-import { VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
 import { saveTheaterInStore, getStoredTheater } from '../peertube-player-local-storage'
-const Button: VideoJSComponentInterface = videojsUntyped.getComponent('Button')
+const Button = videojs.getComponent('Button')
 class TheaterButton extends Button {
  private static readonly THEATER_MODE_CLASS = 'vjs-theater-enabled'
-  constructor (player: videojs.Player, options: any) {
+  constructor (player: VideoJsPlayer, options: videojs.ComponentOptions) {
    super(player, options)
    const enabled = getStoredTheater()
    if (enabled === true) {
-      this.player_.addClass(TheaterButton.THEATER_MODE_CLASS)
+      this.player().addClass(TheaterButton.THEATER_MODE_CLASS)
      this.handleTheaterChange()
    }
-    this.player_.theaterEnabled = enabled
+    this.controlText('Theater mode')
+    this.player().theaterEnabled = enabled
  }
  buildCSSClass () {
@@ -52,6 +50,4 @@ class TheaterButton extends Button {
  }
 }
-TheaterButton.prototype.controlText_ = 'Theater mode'
+videojs.registerComponent('TheaterButton', TheaterButton)
-TheaterButton.registerComponent('TheaterButton', TheaterButton)
diff --git a/client/src/assets/player/webtorrent/webtorrent-plugin.ts b/client/src/assets/player/webtorrent/webtorrent-plugin.ts
index 35cf85c99..bf6b0a718 100644
--- a/client/src/assets/player/webtorrent/webtorrent-plugin.ts
+++ b/client/src/assets/player/webtorrent/webtorrent-plugin.ts
@@ -1,17 +1,15 @@
-// FIXME: something weird with our path definition in tsconfig and typings
+import videojs, { VideoJsPlayer } from 'video.js'
-// @ts-ignore
-import * as videojs from 'video.js'
 import * as WebTorrent from 'webtorrent'
 import { renderVideo } from './video-renderer'
-import { LoadedQualityData, PlayerNetworkInfo, VideoJSComponentInterface, WebtorrentPluginOptions } from '../peertube-videojs-typings'
+import { LoadedQualityData, PlayerNetworkInfo, WebtorrentPluginOptions } from '../peertube-videojs-typings'
 import { getRtcConfig, timeToInt, videoFileMaxByResolution, videoFileMinByResolution } from '../utils'
 import { PeertubeChunkStore } from './peertube-chunk-store'
 import {
  getAverageBandwidthInStore,
  getStoredMute,
-  getStoredVolume,
  getStoredP2PEnabled,
+  getStoredVolume,
  saveAverageBandwidth
 } from '../peertube-player-local-storage'
 import { VideoFile } from '@shared/models'
@@ -24,14 +22,16 @@ type PlayOptions = {
  delay?: number
 }
-const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin')
+const Plugin = videojs.getPlugin('plugin')
 class WebTorrentPlugin extends Plugin {
+  readonly videoFiles: VideoFile[]
  private readonly playerElement: HTMLVideoElement
  private readonly autoplay: boolean = false
  private readonly startTime: number = 0
-  private readonly savePlayerSrcFunction: Function
+  private readonly savePlayerSrcFunction: VideoJsPlayer['src']
-  private readonly videoFiles: VideoFile[]
  private readonly videoDuration: number
  private readonly CONSTANTS = {
    INFO_SCHEDULER: 1000, // Don't change this
@@ -49,7 +49,6 @@ class WebTorrentPlugin extends Plugin {
    dht: false
  })
-  private player: any
  private currentVideoFile: VideoFile
  private torrent: WebTorrent.Torrent
@@ -70,8 +69,8 @@ class WebTorrentPlugin extends Plugin {
  private downloadSpeeds: number[] = []
-  constructor (player: videojs.Player, options: WebtorrentPluginOptions) {
+  constructor (player: VideoJsPlayer, options?: WebtorrentPluginOptions) {
-    super(player, options)
+    super(player)
    this.startTime = timeToInt(options.startTime)
@@ -147,12 +146,12 @@ class WebTorrentPlugin extends Plugin {
    }
    // Do not display error to user because we will have multiple fallback
-    this.disableErrorDisplay()
+    this.disableErrorDisplay();
    // Hack to "simulate" src link in video.js >= 6
    // Without this, we can't play the video after pausing it
    // https://github.com/videojs/video.js/blob/master/src/js/player.js#L1633
-    this.player.src = () => true
+    (this.player as any).src = () => true
    const oldPlaybackRate = this.player.playbackRate()
    const previousVideoFile = this.currentVideoFile
@@ -333,7 +332,7 @@ class WebTorrentPlugin extends Plugin {
    const playPromise = this.player.play()
    if (playPromise !== undefined) {
-      return playPromise.then(done)
+      return playPromise.then(() => done())
                        .catch((err: Error) => {
                          if (err.message.indexOf('The play() request was interrupted by a call to pause()') !== -1) {
                            return
@@ -426,8 +425,8 @@ class WebTorrentPlugin extends Plugin {
    }
    // Proxy first play
-    const oldPlay = this.player.play.bind(this.player)
+    const oldPlay = this.player.play.bind(this.player);
-    this.player.play = () => {
+    (this.player as any).play = () => {
      this.player.addClass('vjs-has-big-play-button-clicked')
      this.player.play = oldPlay
@@ -619,7 +618,7 @@ class WebTorrentPlugin extends Plugin {
        video: qualityLevelsPayload
      }
    }
-    this.player.tech_.trigger('loadedqualitydata', payload)
+    this.player.tech(true).trigger('loadedqualitydata', payload)
  }
  private buildQualityLabel (file: VideoFile) {
@@ -651,9 +650,9 @@ class WebTorrentPlugin extends Plugin {
      return
    }
-    for (let i = 0; i < qualityLevels; i++) {
+    for (let i = 0; i < qualityLevels.length; i++) {
-      const q = this.player.qualityLevels[i]
+      const q = qualityLevels[i]
-      if (q.height === resolutionId) qualityLevels.selectedIndex = i
+      if (q.height === resolutionId) qualityLevels.selectedIndex_ = i
    }
  }
 }
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 5dacdd73b..fa2452231 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -32,7 +32,7 @@ body {
  --menuForegroundColor: #{$menu-color};
  --submenuColor: #{$sub-menu-color};
-  --inputColor: #{$input-background-color};
+  --inputBackgroundColor: #{$input-background-color};
  --inputPlaceholderColor: #{$input-placeholder-color};
  --actionButtonColor: #{$grey-foreground-color};
@@ -61,7 +61,7 @@ strong {
 input.readonly {
  /* Force blank on readonly inputs */
-  background-color: var(--inputColor) !important;
+  background-color: var(--inputBackgroundColor) !important;
 }
 input, textarea {
@@ -202,26 +202,6 @@ label {
  to { transform: scale(1) rotate(360deg);}
 }
-.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 tables, don't have a hover different background
 table {
  .action-button-edit, .action-button-delete {
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 136eddd3a..317781e0e 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -77,11 +77,17 @@
  }
 }
+@mixin button-focus-visible-shadow($color) {
+  &.focus-visible {
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px $color;
+  }
+}
 @mixin peertube-input-text($width) {
  display: inline-block;
  height: $button-height;
  width: $width;
-  background: var(--inputColor);
+  background: var(--inputBackgroundColor);
  border: 1px solid #C6C6C6;
  border-radius: 3px;
  padding-left: 15px;
@@ -118,6 +124,8 @@
 }
 @mixin orange-button {
+  @include button-focus-visible-shadow(var(--mainHoverColor));
  &, &:active, &:focus {
    color: #fff;
    background-color: var(--mainColor);
@@ -169,7 +177,6 @@
  text-align: center;
  padding: 0 17px 0 13px;
  cursor: pointer;
-  outline: 0;
 }
 @mixin peertube-button-link {
@@ -254,7 +261,7 @@
  width: $width;
  border-radius: 3px;
  overflow: hidden;
-  background: var(--inputColor);
+  background: var(--inputBackgroundColor);
  position: relative;
  font-size: 15px;
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 5b5ac9adc..e087a2548 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -81,7 +81,7 @@ $variables: (
  --menuForegroundColor: var(--menuForegroundColor),
  --submenuColor: var(--submenuColor),
-  --inputColor: var(--inputColor),
+  --inputBackgroundColor: var(--inputBackgroundColor),
  --inputPlaceholderColor: var(--inputPlaceholderColor),
  --actionButtonColor: var(--actionButtonColor),
diff --git a/client/src/sass/player/_player-variables.scss b/client/src/sass/player/_player-variables.scss
index 0c2359ac7..935a60b49 100644
--- a/client/src/sass/player/_player-variables.scss
+++ b/client/src/sass/player/_player-variables.scss
@@ -1,7 +1,7 @@
 $primary-foreground-color: #fff;
 $primary-foreground-opacity: 0.9;
 $primary-foreground-opacity-hover: 1;
-$primary-background-color: #000;
+$primary-background-color: rgba(0, 0, 0, 0.8);
 $font-size: 13px;
 $control-bar-height: 34px;
diff --git a/client/src/sass/player/bezels.scss b/client/src/sass/player/bezels.scss
index ff3448511..853a030a3 100644
--- a/client/src/sass/player/bezels.scss
+++ b/client/src/sass/player/bezels.scss
@@ -32,11 +32,3 @@
    fill: #fff;
  }
 }
-.video-js {
-  .vjs-bezel-content {
-  }
-}
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index 41e2a535c..f80106428 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -21,6 +21,12 @@ body {
  .vjs-dock-text {
    padding-right: 10px;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, .6) 0, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0) 100%);
+  }
+  .vjs-dock-title,
+  .vjs-dock-description {
+    text-shadow: 0 0 2px rgba(0, 0, 0, .5);
  }
  .vjs-dock-description {
@@ -55,7 +61,7 @@ body {
    $big-play-width: 1.2em;
    $big-play-height: 1.2em;
-    border: 4px solid #fff;
+    border: 2px solid #fff;
    border-radius: 100%;
    left: 50%;
@@ -185,7 +191,6 @@ body {
        .vjs-play-progress {
          background: var(--embedForegroundColor);
-          transition: all .2s ease 0s;
          // Not display the circle if the progress is not hovered
          &::before {
diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts
index c91ae08b9..d5b42a025 100644
--- a/client/src/standalone/videos/embed.ts
+++ b/client/src/standalone/videos/embed.ts
@@ -1,15 +1,11 @@
 import './embed.scss'
 import {
-  getCompleteLocale,
-  is18nLocale,
-  isDefaultLocale,
  peertubeTranslate,
  ResultList,
  ServerConfig,
  VideoDetails
 } from '../../../../shared'
-import { VideoJSCaption } from '../../assets/player/peertube-videojs-typings'
 import { VideoCaption } from '../../../../shared/models/videos/caption/video-caption.model'
 import {
  P2PMediaLoaderOptions,
@@ -19,10 +15,14 @@ import {
 import { VideoStreamingPlaylistType } from '../../../../shared/models/videos/video-streaming-playlist.type'
 import { PeerTubeEmbedApi } from './embed-api'
 import { TranslationsManager } from '../../assets/player/translations-manager'
+import { VideoJsPlayer } from 'video.js'
+import { VideoJSCaption } from '../../assets/player/peertube-videojs-typings'
+type Translations = { [ id: string ]: string }
 export class PeerTubeEmbed {
  videoElement: HTMLVideoElement
-  player: any
+  player: VideoJsPlayer
  api: PeerTubeEmbedApi = null
  autoplay: boolean
  controls: boolean
@@ -71,7 +71,7 @@ export class PeerTubeEmbed {
    element.parentElement.removeChild(element)
  }
-  displayError (text: string, translations?: { [ id: string ]: string }) {
+  displayError (text: string, translations?: Translations) {
    // Remove video element
    if (this.videoElement) this.removeElement(this.videoElement)
@@ -90,12 +90,12 @@ export class PeerTubeEmbed {
    errorText.innerHTML = translatedText
  }
-  videoNotFound (translations?: { [ id: string ]: string }) {
+  videoNotFound (translations?: Translations) {
    const text = 'This video does not exist.'
    this.displayError(text, translations)
  }
-  videoFetchError (translations?: { [ id: string ]: string }) {
+  videoFetchError (translations?: Translations) {
    const text = 'We cannot fetch the video. Please try again later.'
    this.displayError(text, translations)
  }
@@ -237,7 +237,7 @@ export class PeerTubeEmbed {
      })
    }
-    this.player = await PeertubePlayerManager.initialize(this.mode, options, (player: any) => this.player = player)
+    this.player = await PeertubePlayerManager.initialize(this.mode, options, (player: VideoJsPlayer) => this.player = player)
    this.player.on('customError', (event: any, data: any) => this.handleError(data.err, serverTranslations))
    window[ 'videojsPlayer' ] = this.player
@@ -261,19 +261,19 @@ export class PeerTubeEmbed {
  }
  private async buildDock (videoInfo: VideoDetails, configResponse: Response) {
-    if (this.controls) {
+    if (!this.controls) return
-      const title = this.title ? videoInfo.name : undefined
-      const config: ServerConfig = await configResponse.json()
+    const title = this.title ? videoInfo.name : undefined
-      const description = config.tracker.enabled && this.warningTitle
-        ? '<span class="text">' + this.player.localize('Watching this video may reveal your IP address to others.') + '</span>'
-        : undefined
-      this.player.dock({
+    const config: ServerConfig = await configResponse.json()
-        title,
+    const description = config.tracker.enabled && this.warningTitle
-        description
+      ? '<span class="text">' + peertubeTranslate('Watching this video may reveal your IP address to others.') + '</span>'
-      })
+      : undefined
-    }
+    this.player.dock({
+      title,
+      description
+    })
  }
  private buildCSS () {
diff --git a/client/tsconfig.json b/client/tsconfig.json
index 8824c4f7c..c4f2d6a6a 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -26,7 +26,7 @@
    "paths": {
      "@app/*": [ "src/app/*" ],
      "@shared/*": [ "../shared/*" ],
-      "video.js": [ "node_modules/video.js/dist/alt/video.core.js" ],
+      "video.js": [ "node_modules/video.js/dist/alt/video.core.novtt" ],
      "fs": [ "src/shims/noop" ],
      "http": [ "src/shims/http" ],
      "https": [ "src/shims/https" ],
diff --git a/client/webpack/webpack.video-embed.js b/client/webpack/webpack.video-embed.js
index 909048cca..f6d532556 100644
--- a/client/webpack/webpack.video-embed.js
+++ b/client/webpack/webpack.video-embed.js
@@ -27,7 +27,7 @@ module.exports = function () {
      modules: [ helpers.root('src'), helpers.root('node_modules') ],
      alias: {
-        'video.js$': path.resolve('node_modules/video.js/dist/alt/video.core.js')
+        'video.js$': path.resolve('node_modules/video.js/dist/alt/video.core.novtt.js')
      }
    },
diff --git a/client/yarn.lock b/client/yarn.lock
index 0855a2570..1b9c2cef1 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -987,11 +987,6 @@
    semver "6.3.0"
    semver-intersect "1.4.0"
-"@streamroot/videojs-hlsjs-plugin@^1.0.10":
-  version "1.0.13"
-  resolved "https://registry.yarnpkg.com/@streamroot/videojs-hlsjs-plugin/-/videojs-hlsjs-plugin-1.0.13.tgz#ae3afb3a5a3cd90e7b424b6b4cb14de1cde40836"
-  integrity sha512-A55213sFj8nuoj23YiR0r73cRV4dlnSwXGwT1Qiu+oqhsauhqN+lHSRHFztMIU4EMf2Cafvv5P4R+A2c/Uj6nw==
 "@types/bittorrent-protocol@*":
  version "2.2.4"
  resolved "https://registry.yarnpkg.com/@types/bittorrent-protocol/-/bittorrent-protocol-2.2.4.tgz#7dc0716924bc6a904753d39846ad235c7dab4641"
@@ -1045,6 +1040,11 @@
  resolved "https://registry.yarnpkg.com/@types/jschannel/-/jschannel-1.0.1.tgz#79d582ccf42554c8457230526a3054d018d559f0"
  integrity sha512-S34NuOoOOKXbft3f9GDeLKp777ABCGArZaqUWOuu1Xn+1S75Osmk8kCeqmw5x2TuASyjE082DwDAuoaXNIRCTw==
+"@types/linkify-it@*":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-2.1.0.tgz#ea3dd64c4805597311790b61e872cbd1ed2cd806"
+  integrity sha512-Q7DYAOi9O/+cLLhdaSvKdaumWyHbm7HAk/bFwwyTuU0arR5yyCeW5GOoqt4tJTpDRxhpx9Q8kQL6vMpuw9hDSw==
 "@types/linkifyjs@^2.1.2":
  version "2.1.2"
  resolved "https://registry.yarnpkg.com/@types/linkifyjs/-/linkifyjs-2.1.2.tgz#8244f4e6d7be65359cc25a34da8977fce87a7b2e"
@@ -1071,10 +1071,12 @@
  dependencies:
    "@types/node" "*"
-"@types/markdown-it@^0.0.5":
+"@types/markdown-it@^0.0.9":
-  version "0.0.5"
+  version "0.0.9"
-  resolved "https://registry.yarnpkg.com/@types/markdown-it/-/markdown-it-0.0.5.tgz#5cdcbe08e81075d5dbf15466b311359b02a30c2b"
+  resolved "https://registry.yarnpkg.com/@types/markdown-it/-/markdown-it-0.0.9.tgz#a5d552f95216c478e0a27a5acc1b28dcffd989ce"
-  integrity sha512-Bhc4jTJ3g+WU+dBvyhwwssHifjqapauyjV+0cTWVWRjwDAaK9PebZBFpLJmoOCp47qlkDeeT1Y9sV9LyyaG02w==
+  integrity sha512-IFSepyZXbF4dgSvsk8EsgaQ/8Msv1I5eTL0BZ0X3iGO9jw6tCVtPG8HchIPm3wrkmGdqZOD42kE0zplVi1gYDA==
+  dependencies:
+    "@types/linkify-it" "*"
 "@types/minimatch@*":
  version "3.0.3"
@@ -1157,10 +1159,10 @@
  resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"
  integrity sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==
-"@types/video.js@^7.2.5":
+"@types/video.js@^7.3.3":
-  version "7.2.15"
+  version "7.3.3"
-  resolved "https://registry.yarnpkg.com/@types/video.js/-/video.js-7.2.15.tgz#03d950f01c985a5082ead4d1b73064455a1c8c6f"
+  resolved "https://registry.yarnpkg.com/@types/video.js/-/video.js-7.3.3.tgz#b6870d954473dfd694e10b55a90c0f3be8522da3"
-  integrity sha512-NsojVfvTwdVqDe0+vJaoHOO2iuLm0sp/u8jEsZeLGsM3gNfg5WIOFd6NC0cQR9JHUuDPPSPF70jxdklGWm5jhQ==
+  integrity sha512-yAb46+4A0dKFxOQRVLoLyfC/S/BmHLE10MxPXt/t88+7R4GWLHosHelVtYpKBRykjptdkqfQXNRXoQzDeKm6MA==
 "@types/webpack-sources@^0.1.5":
  version "0.1.5"
@@ -2586,6 +2588,29 @@ chardet@^0.7.0:
  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
  integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
+chart.js@^2.9.3:
+  version "2.9.3"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.3.tgz#ae3884114dafd381bc600f5b35a189138aac1ef7"
+  integrity sha512-+2jlOobSk52c1VU6fzkh3UwqHMdSlgH1xFv9FKMqHiNCpXsGPQa/+81AFa+i3jZ253Mq9aAycPwDjnn1XbRNNw==
+  dependencies:
+    chartjs-color "^2.1.0"
+    moment "^2.10.2"
+chartjs-color-string@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71"
+  integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
+  dependencies:
+    color-name "^1.0.0"
+chartjs-color@^2.1.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0"
+  integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
+  dependencies:
+    chartjs-color-string "^0.6.0"
+    color-convert "^1.9.3"
 check-types@^8.0.3:
  version "8.0.3"
  resolved "https://registry.yarnpkg.com/check-types/-/check-types-8.0.3.tgz#3356cca19c889544f2d7a95ed49ce508a0ecf552"
@@ -2800,7 +2825,7 @@ collection-visit@^1.0.0:
    map-visit "^1.0.0"
    object-visit "^1.0.0"
-color-convert@^1.9.0:
+color-convert@^1.9.0, color-convert@^1.9.3:
  version "1.9.3"
  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -2812,6 +2837,11 @@ color-name@1.1.3:
  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
+color-name@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 colors@1.1.2:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
@@ -6941,6 +6971,11 @@ mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1:
  dependencies:
    minimist "0.0.8"
+moment@^2.10.2:
+  version "2.24.0"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
+  integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
 mousetrap@^1.6.0:
  version "1.6.3"
  resolved "https://registry.yarnpkg.com/mousetrap/-/mousetrap-1.6.3.tgz#80fee49665fd478bccf072c9d46bdf1bfed3558a"
@@ -10809,6 +10844,11 @@ void-elements@^2.0.0:
  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
  integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=
+vtt.js@^0.13.0:
+  version "0.13.0"
+  resolved "https://registry.yarnpkg.com/vtt.js/-/vtt.js-0.13.0.tgz#955c667b34d5325b2012cb9e8ba9bad6e0b11ff8"
+  integrity sha1-lVxmezTVMlsgEsuei6m61uCxH/g=
 watchpack@^1.6.0:
  version "1.6.0"
  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"