49 files changed, 1242 insertions, 685 deletions
diff --git a/client/package.json b/client/package.json
index cd0a82aa4..e9c74787c 100644
--- a/client/package.json
+++ b/client/package.json
@@ -69,7 +69,7 @@
    "@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 +77,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 +133,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/+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/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/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/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/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/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.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/p2p-media-loader-plugin.ts b/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts
index c3f863f72..512054ae6 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,7 +1,5 @@
-// 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'
@@ -10,7 +8,7 @@ import { timeToInt } from '../utils'
 window['videojs'] = videojs
 require('@streamroot/videojs-hlsjs-plugin')
-const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin')
+const Plugin = videojs.getPlugin('plugin')
 class P2pMediaLoaderPlugin extends Plugin {
  private readonly CONSTANTS = {
@@ -37,12 +35,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 +49,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,8 +84,9 @@ 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
    // https://github.com/video-dev/hls.js/blob/master/src/events.js#L37
diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts
index d9e02cd7d..4e6387a53 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
@@ -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
      }
    }
@@ -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..e45722661 100644
--- a/client/src/assets/player/peertube-videojs-typings.ts
+++ b/client/src/assets/player/peertube-videojs-typings.ts
@@ -1,7 +1,4 @@
-// FIXME: something weird with our path definition in tsconfig and typings
+import videojs from 'video.js'
-// @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'
@@ -9,20 +6,45 @@ import { PlayerMode } from './peertube-player-manager'
 import { RedundancyUrlManager } from './p2p-media-loader/redundancy-url-manager'
 import { VideoFile } from '@shared/models'
-declare namespace videojs {
+declare module 'video.js' {
-  interface Player {
+  export interface VideoJsPlayer {
+    theaterEnabled: boolean
+    // FIXME: add it to upstream typings
+    posterImage: {
+      show (): void
+      hide (): void
+    }
+    handleTechSeeked_ (): void
+    // Plugins
    peertube (): PeerTubePlugin
    webtorrent (): WebTorrentPlugin
    p2pMediaLoader (): P2pMediaLoaderPlugin
-  }
-}
-interface VideoJSComponentInterface {
+    contextmenuUI (options: any): any
-  _player: videojs.Player
+    bezels (): void
+    qualityLevels (): { height: number, id: number }[] & {
+      selectedIndex: number
+      selectedIndex_: number
-  new (player: videojs.Player, options?: any): any
+      addQualityLevel (representation: {
+        id: number
+        label: string
+        height: number
+        _enabled: boolean
+      }): void
+    }
-  registerComponent (name: string, obj: any): any
+    textTracks (): TextTrackList & {
+      on: Function
+      tracks_: { kind: string, mode: string, language: string }[]
+    }
+  }
 }
 type VideoJSCaption = {
@@ -78,9 +100,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,8 +142,6 @@ export {
  PlayerNetworkInfo,
  ResolutionUpdateData,
  AutoResolutionUpdateData,
-  VideoJSComponentInterface,
-  videojsUntyped,
  VideoJSCaption,
  UserWatching,
  PeerTubePluginOptions,
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..d26fc38fa 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,13 +22,14 @@ type PlayOptions = {
  delay?: number
 }
-const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin')
+const Plugin = videojs.getPlugin('plugin')
 class WebTorrentPlugin extends Plugin {
  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 = {
@@ -49,7 +48,6 @@ class WebTorrentPlugin extends Plugin {
    dht: false
  })
-  private player: any
  private currentVideoFile: VideoFile
  private torrent: WebTorrent.Torrent
@@ -70,8 +68,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 +145,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 +331,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 +424,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 +617,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 +649,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/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..20ff5c3c8 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -1157,10 +1157,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 +2586,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 +2823,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 +2835,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 +6969,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 +10842,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"