23 files changed, 1357 insertions, 624 deletions

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 * as videojs from 'video.js'
-import { VideoJSComponentInterface } from '../peertube-videojs-typings'
+import videojs, { VideoJsPlayer } from 'video.js'
+import './pause-bezel'
 
-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>
-  `
-}
-
-// @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()
-    })
-  }
+const Plugin = videojs.getPlugin('plugin')
 
-  createEl () {
-    const container = super.createEl('div', {
-      className: 'vjs-bezels-content'
-    })
-    this.container = container
-    container.style.display = 'none'
-
-    return container
-  }
-
-  showBezel () {
-    this.container.style.display = 'inherit'
-    setTimeout(() => {
-      this.container.style.display = 'none'
-    }, 500) // matching the animation duration
-  }
-}
-// @ts-ignore-end
-
-videojs.registerComponent('PauseBezel', PauseBezel)
-
-const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin')
 class BezelsPlugin extends Plugin {
-  constructor (player: videojs.Player, options: any = {}) {
-    super(player, options)
+
+  constructor (player: VideoJsPlayer, options?: videojs.ComponentOptions) {
+    super(player)
 
     this.player.ready(() => {
       player.addClass('vjs-bezels')
@@ -90,4 +17,5 @@ class BezelsPlugin extends Plugin {
 }
 
 videojs.registerPlugin('bezels', BezelsPlugin)
+
 export { BezelsPlugin }
diff --git a/client/src/assets/player/bezels/pause-bezel.ts b/client/src/assets/player/bezels/pause-bezel.ts
new file mode 100644
index 000000000..98eb12099
--- /dev/null
+++ b/client/src/assets/player/bezels/pause-bezel.ts
@@ -0,0 +1,72 @@
+import videojs, { VideoJsPlayer } from 'video.js'
+
+function getPauseBezel () {
+  return `
+  <div class="vjs-bezels-pause">
+    <div class="vjs-bezel" role="status" aria-label="Pause">
+      <div class="vjs-bezel-icon">
+        <svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%">
+          <use class="vjs-svg-shadow" xlink:href="#vjs-id-1"></use>
+          <path class="vjs-svg-fill" d="M 12,26 16,26 16,10 12,10 z M 21,26 25,26 25,10 21,10 z" id="vjs-id-1"></path>
+        </svg>
+      </div>
+    </div>
+  </div>
+  `
+}
+
+function getPlayBezel () {
+  return `
+  <div class="vjs-bezels-play">
+    <div class="vjs-bezel" role="status" aria-label="Play">
+      <div class="vjs-bezel-icon">
+        <svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%">
+          <use class="vjs-svg-shadow" xlink:href="#vjs-id-2"></use>
+          <path class="vjs-svg-fill" d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z" id="ytp-id-2"></path>
+        </svg>
+      </div>
+    </div>
+  </div>
+  `
+}
+
+const Component = videojs.getComponent('Component')
+class PauseBezel extends Component {
+  container: HTMLDivElement
+
+  constructor (player: VideoJsPlayer, options?: videojs.ComponentOptions) {
+    super(player, options)
+
+    player.on('pause', (_: any) => {
+      if (player.seeking() || player.ended()) return
+      this.container.innerHTML = getPauseBezel()
+      this.showBezel()
+    })
+
+    player.on('play', (_: any) => {
+      if (player.seeking()) return
+      this.container.innerHTML = getPlayBezel()
+      this.showBezel()
+    })
+  }
+
+  createEl () {
+    this.container = super.createEl('div', {
+      className: 'vjs-bezels-content'
+    }) as HTMLDivElement
+
+    this.container.style.display = 'none'
+
+    return this.container
+  }
+
+  showBezel () {
+    this.container.style.display = 'inherit'
+
+    setTimeout(() => {
+      this.container.style.display = 'none'
+    }, 500) // matching the animation duration
+  }
+}
+
+videojs.registerComponent('PauseBezel', PauseBezel)
diff --git a/client/src/assets/player/p2p-media-loader/hls-plugin.ts b/client/src/assets/player/p2p-media-loader/hls-plugin.ts
new file mode 100644
index 000000000..d78e1ab90
--- /dev/null
+++ b/client/src/assets/player/p2p-media-loader/hls-plugin.ts
@@ -0,0 +1,626 @@
+// Thanks https://github.com/streamroot/videojs-hlsjs-plugin
+// We duplicated this plugin to choose the hls.js version we want, because streamroot only provide a bundled file
+
+import * as Hlsjs from 'hls.js'
+import videojs, { VideoJsPlayer } from 'video.js'
+import { HlsjsConfigHandlerOptions, QualityLevelRepresentation, QualityLevels, VideoJSTechHLS } from '../peertube-videojs-typings'
+
+type ErrorCounts = {
+  [ type: string ]: number
+}
+
+type Metadata = {
+  levels: Hlsjs.Level[]
+}
+
+const registerSourceHandler = function (vjs: typeof videojs) {
+  if (!Hlsjs.isSupported()) {
+    console.warn('Hls.js is not supported in this browser!')
+    return
+  }
+
+  const html5 = vjs.getTech('Html5')
+
+  if (!html5) {
+    console.error('Not supported version if video.js')
+    return
+  }
+
+  // FIXME: typings
+  (html5 as any).registerSourceHandler({
+    canHandleSource: function (source: videojs.Tech.SourceObject) {
+      const hlsTypeRE = /^application\/x-mpegURL|application\/vnd\.apple\.mpegurl$/i
+      const hlsExtRE = /\.m3u8/i
+
+      if (hlsTypeRE.test(source.type)) return 'probably'
+      if (hlsExtRE.test(source.src)) return 'maybe'
+
+      return ''
+    },
+
+    handleSource: function (source: videojs.Tech.SourceObject, tech: VideoJSTechHLS) {
+      if (tech.hlsProvider) {
+        tech.hlsProvider.dispose()
+      }
+
+      tech.hlsProvider = new Html5Hlsjs(vjs, source, tech)
+
+      return tech.hlsProvider
+    }
+  }, 0);
+
+  // FIXME: typings
+  (vjs as any).Html5Hlsjs = Html5Hlsjs
+}
+
+function hlsjsConfigHandler (this: VideoJsPlayer, options: HlsjsConfigHandlerOptions) {
+  const player = this
+
+  if (!options) return
+
+  if (!player.srOptions_) {
+    player.srOptions_ = {}
+  }
+
+  if (!player.srOptions_.hlsjsConfig) {
+    player.srOptions_.hlsjsConfig = options.hlsjsConfig
+  }
+
+  if (!player.srOptions_.captionConfig) {
+    player.srOptions_.captionConfig = options.captionConfig
+  }
+
+  if (options.levelLabelHandler && !player.srOptions_.levelLabelHandler) {
+    player.srOptions_.levelLabelHandler = options.levelLabelHandler
+  }
+}
+
+const registerConfigPlugin = function (vjs: typeof videojs) {
+  // Used in Brightcove since we don't pass options directly there
+  const registerVjsPlugin = vjs.registerPlugin || vjs.plugin
+  registerVjsPlugin('hlsjs', hlsjsConfigHandler)
+}
+
+class Html5Hlsjs {
+  private static readonly hooks: { [id: string]: Function[] } = {}
+
+  private readonly videoElement: HTMLVideoElement
+  private readonly errorCounts: ErrorCounts = {}
+  private readonly player: VideoJsPlayer
+  private readonly tech: videojs.Tech
+  private readonly source: videojs.Tech.SourceObject
+  private readonly vjs: typeof videojs
+
+  private hls: Hlsjs & { manualLevel?: number } // FIXME: typings
+  private hlsjsConfig: Partial<Hlsjs.Config & { cueHandler: any }> = null
+
+  private _duration: number = null
+  private metadata: Metadata = null
+  private isLive: boolean = null
+  private dvrDuration: number = null
+  private edgeMargin: number = null
+
+  private handlers: { [ id in 'play' | 'addtrack' | 'playing' | 'textTracksChange' | 'audioTracksChange' ]: EventListener } = {
+    play: null,
+    addtrack: null,
+    playing: null,
+    textTracksChange: null,
+    audioTracksChange: null
+  }
+
+  private uiTextTrackHandled = false
+
+  constructor (vjs: typeof videojs, source: videojs.Tech.SourceObject, tech: videojs.Tech) {
+    this.vjs = vjs
+    this.source = source
+
+    this.tech = tech;
+    (this.tech as any).name_ = 'Hlsjs'
+
+    this.videoElement = tech.el() as HTMLVideoElement
+    this.player = vjs((tech.options_ as any).playerId)
+
+    this.videoElement.addEventListener('error', event => {
+      let errorTxt: string
+      const mediaError = (event.currentTarget as HTMLVideoElement).error
+
+      switch (mediaError.code) {
+        case mediaError.MEDIA_ERR_ABORTED:
+          errorTxt = 'You aborted the video playback'
+          break
+        case mediaError.MEDIA_ERR_DECODE:
+          errorTxt = 'The video playback was aborted due to a corruption problem or because the video used features your browser did not support'
+          this._handleMediaError(mediaError)
+          break
+        case mediaError.MEDIA_ERR_NETWORK:
+          errorTxt = 'A network error caused the video download to fail part-way'
+          break
+        case mediaError.MEDIA_ERR_SRC_NOT_SUPPORTED:
+          errorTxt = 'The video could not be loaded, either because the server or network failed or because the format is not supported'
+          break
+
+        default:
+          errorTxt = mediaError.message
+      }
+
+      console.error('MEDIA_ERROR: ', errorTxt)
+    })
+
+    this.initialize()
+  }
+
+  duration () {
+    return this._duration || this.videoElement.duration || 0
+  }
+
+  seekable () {
+    if (this.hls.media) {
+      if (!this.isLive) {
+        return this.vjs.createTimeRanges(0, this.hls.media.duration)
+      }
+
+      // Video.js doesn't seem to like floating point timeranges
+      const startTime = Math.round(this.hls.media.duration - this.dvrDuration)
+      const endTime = Math.round(this.hls.media.duration - this.edgeMargin)
+
+      return this.vjs.createTimeRanges(startTime, endTime)
+    }
+
+    return this.vjs.createTimeRanges()
+  }
+
+  // See comment for `initialize` method.
+  dispose () {
+    this.videoElement.removeEventListener('play', this.handlers.play)
+    this.videoElement.textTracks.removeEventListener('addtrack', this.handlers.addtrack)
+    this.videoElement.removeEventListener('playing', this.handlers.playing)
+
+    this.player.textTracks().removeEventListener('change', this.handlers.textTracksChange)
+    this.uiTextTrackHandled = false
+
+    this.player.audioTracks().removeEventListener('change', this.handlers.audioTracksChange)
+
+    this.hls.destroy()
+  }
+
+  static addHook (type: string, callback: Function) {
+    Html5Hlsjs.hooks[ type ] = this.hooks[ type ] || []
+    Html5Hlsjs.hooks[ type ].push(callback)
+  }
+
+  static removeHook (type: string, callback: Function) {
+    if (Html5Hlsjs.hooks[ type ] === undefined) return false
+
+    const index = Html5Hlsjs.hooks[ type ].indexOf(callback)
+    if (index === -1) return false
+
+    Html5Hlsjs.hooks[ type ].splice(index, 1)
+
+    return true
+  }
+
+  private _executeHooksFor (type: string) {
+    if (Html5Hlsjs.hooks[ type ] === undefined) {
+      return
+    }
+
+    // ES3 and IE < 9
+    for (let i = 0; i < Html5Hlsjs.hooks[ type ].length; i++) {
+      Html5Hlsjs.hooks[ type ][ i ](this.player, this.hls)
+    }
+  }
+
+  private _handleMediaError (error: any) {
+    if (this.errorCounts[ Hlsjs.ErrorTypes.MEDIA_ERROR ] === 1) {
+      console.info('trying to recover media error')
+      this.hls.recoverMediaError()
+      return
+    }
+
+    if (this.errorCounts[ Hlsjs.ErrorTypes.MEDIA_ERROR ] === 2) {
+      console.info('2nd try to recover media error (by swapping audio codec')
+      this.hls.swapAudioCodec()
+      this.hls.recoverMediaError()
+      return
+    }
+
+    if (this.errorCounts[ Hlsjs.ErrorTypes.MEDIA_ERROR ] > 2) {
+      console.info('bubbling media error up to VIDEOJS')
+      this.tech.error = () => error
+      this.tech.trigger('error')
+      return
+    }
+  }
+
+  private _onError (_event: any, data: Hlsjs.errorData) {
+    const error: { message: string, code?: number } = {
+      message: `HLS.js error: ${data.type} - fatal: ${data.fatal} - ${data.details}`
+    }
+    console.error(error.message)
+
+    // increment/set error count
+    if (this.errorCounts[ data.type ]) this.errorCounts[ data.type ] += 1
+    else this.errorCounts[ data.type ] = 1
+
+    // Implement simple error handling based on hls.js documentation
+    // https://github.com/dailymotion/hls.js/blob/master/API.md#fifth-step-error-handling
+    if (data.fatal) {
+      switch (data.type) {
+        case Hlsjs.ErrorTypes.NETWORK_ERROR:
+          console.info('bubbling network error up to VIDEOJS')
+          error.code = 2
+          this.tech.error = () => error as any
+          this.tech.trigger('error')
+          break
+
+        case Hlsjs.ErrorTypes.MEDIA_ERROR:
+          error.code = 3
+          this._handleMediaError(error)
+          break
+
+        default:
+          // cannot recover
+          this.hls.destroy()
+          console.info('bubbling error up to VIDEOJS')
+          this.tech.error = () => error as any
+          this.tech.trigger('error')
+          break
+      }
+    }
+  }
+
+  private switchQuality (qualityId: number) {
+    this.hls.nextLevel = qualityId
+  }
+
+  private _levelLabel (level: Hlsjs.Level) {
+    if (this.player.srOptions_.levelLabelHandler) {
+      return this.player.srOptions_.levelLabelHandler(level)
+    }
+
+    if (level.height) return level.height + 'p'
+    if (level.width) return Math.round(level.width * 9 / 16) + 'p'
+    if (level.bitrate) return (level.bitrate / 1000) + 'kbps'
+
+    return 0
+  }
+
+  private _relayQualityChange (qualityLevels: QualityLevels) {
+    // Determine if it is "Auto" (all tracks enabled)
+    let isAuto = true
+
+    for (let i = 0; i < qualityLevels.length; i++) {
+      if (!qualityLevels[ i ]._enabled) {
+        isAuto = false
+        break
+      }
+    }
+
+    // Interact with ME
+    if (isAuto) {
+      this.hls.currentLevel = -1
+      return
+    }
+
+    // Find ID of highest enabled track
+    let selectedTrack: number
+
+    for (selectedTrack = qualityLevels.length - 1; selectedTrack >= 0; selectedTrack--) {
+      if (qualityLevels[ selectedTrack ]._enabled) {
+        break
+      }
+    }
+
+    this.hls.currentLevel = selectedTrack
+  }
+
+  private _handleQualityLevels () {
+    if (!this.metadata) return
+
+    const qualityLevels = this.player.qualityLevels && this.player.qualityLevels()
+    if (!qualityLevels) return
+
+    for (let i = 0; i < this.metadata.levels.length; i++) {
+      const details = this.metadata.levels[ i ]
+      const representation: QualityLevelRepresentation = {
+        id: i,
+        width: details.width,
+        height: details.height,
+        bandwidth: details.bitrate,
+        bitrate: details.bitrate,
+        _enabled: true
+      }
+
+      const self = this
+      representation.enabled = function (this: QualityLevels, level: number, toggle?: boolean) {
+        // Brightcove switcher works TextTracks-style (enable tracks that it wants to ABR on)
+        if (typeof toggle === 'boolean') {
+          this[ level ]._enabled = toggle
+          self._relayQualityChange(this)
+        }
+
+        return this[ level ]._enabled
+      }
+
+      qualityLevels.addQualityLevel(representation)
+    }
+  }
+
+  private _notifyVideoQualities () {
+    if (!this.metadata) return
+    const cleanTracklist = []
+
+    if (this.metadata.levels.length > 1) {
+      const autoLevel = {
+        id: -1,
+        label: 'auto',
+        selected: this.hls.manualLevel === -1
+      }
+      cleanTracklist.push(autoLevel)
+    }
+
+    this.metadata.levels.forEach((level, index) => {
+      // Don't write in level (shared reference with Hls.js)
+      const quality = {
+        id: index,
+        selected: index === this.hls.manualLevel,
+        label: this._levelLabel(level)
+      }
+
+      cleanTracklist.push(quality)
+    })
+
+    const payload = {
+      qualityData: { video: cleanTracklist },
+      qualitySwitchCallback: this.switchQuality.bind(this)
+    }
+
+    this.tech.trigger('loadedqualitydata', payload)
+
+    // Self-de-register so we don't raise the payload multiple times
+    this.videoElement.removeEventListener('playing', this.handlers.playing)
+  }
+
+  private _updateSelectedAudioTrack () {
+    const playerAudioTracks = this.tech.audioTracks()
+    for (let j = 0; j < playerAudioTracks.length; j++) {
+      // FIXME: typings
+      if ((playerAudioTracks[ j ] as any).enabled) {
+        this.hls.audioTrack = j
+        break
+      }
+    }
+  }
+
+  private _onAudioTracks () {
+    const hlsAudioTracks = this.hls.audioTracks as (AudioTrack & { name?: string, lang?: string })[] // FIXME typings
+    const playerAudioTracks = this.tech.audioTracks()
+
+    if (hlsAudioTracks.length > 1 && playerAudioTracks.length === 0) {
+      // Add Hls.js audio tracks if not added yet
+      for (let i = 0; i < hlsAudioTracks.length; i++) {
+        playerAudioTracks.addTrack(new this.vjs.AudioTrack({
+          id: i.toString(),
+          kind: 'alternative',
+          label: hlsAudioTracks[ i ].name || hlsAudioTracks[ i ].lang,
+          language: hlsAudioTracks[ i ].lang,
+          enabled: i === this.hls.audioTrack
+        }))
+      }
+
+      // Handle audio track change event
+      this.handlers.audioTracksChange = this._updateSelectedAudioTrack.bind(this)
+      playerAudioTracks.addEventListener('change', this.handlers.audioTracksChange)
+    }
+  }
+
+  private _getTextTrackLabel (textTrack: TextTrack) {
+    // Label here is readable label and is optional (used in the UI so if it is there it should be different)
+    return textTrack.label ? textTrack.label : textTrack.language
+  }
+
+  private _isSameTextTrack (track1: TextTrack, track2: TextTrack) {
+    return this._getTextTrackLabel(track1) === this._getTextTrackLabel(track2)
+      && track1.kind === track2.kind
+  }
+
+  private _updateSelectedTextTrack () {
+    const playerTextTracks = this.player.textTracks()
+    let activeTrack: TextTrack = null
+
+    for (let j = 0; j < playerTextTracks.length; j++) {
+      if (playerTextTracks[ j ].mode === 'showing') {
+        activeTrack = playerTextTracks[ j ]
+        break
+      }
+    }
+
+    const hlsjsTracks = this.videoElement.textTracks
+    for (let k = 0; k < hlsjsTracks.length; k++) {
+      if (hlsjsTracks[ k ].kind === 'subtitles' || hlsjsTracks[ k ].kind === 'captions') {
+        hlsjsTracks[ k ].mode = activeTrack && this._isSameTextTrack(hlsjsTracks[ k ], activeTrack)
+          ? 'showing'
+          : 'disabled'
+      }
+    }
+  }
+
+  private _startLoad () {
+    this.hls.startLoad(-1)
+    this.videoElement.removeEventListener('play', this.handlers.play)
+  }
+
+  private _oneLevelObjClone (obj: object) {
+    const result = {}
+    const objKeys = Object.keys(obj)
+    for (let i = 0; i < objKeys.length; i++) {
+      result[ objKeys[ i ] ] = obj[ objKeys[ i ] ]
+    }
+
+    return result
+  }
+
+  private _filterDisplayableTextTracks (textTracks: TextTrackList) {
+    const displayableTracks = []
+
+    // Filter out tracks that is displayable (captions or subtitles)
+    for (let idx = 0; idx < textTracks.length; idx++) {
+      if (textTracks[ idx ].kind === 'subtitles' || textTracks[ idx ].kind === 'captions') {
+        displayableTracks.push(textTracks[ idx ])
+      }
+    }
+
+    return displayableTracks
+  }
+
+  private _updateTextTrackList () {
+    const displayableTracks = this._filterDisplayableTextTracks(this.videoElement.textTracks)
+    const playerTextTracks = this.player.textTracks()
+
+    // Add stubs to make the caption switcher shows up
+    // Adding the Hls.js text track in will make us have double captions
+    for (let idx = 0; idx < displayableTracks.length; idx++) {
+      let isAdded = false
+
+      for (let jdx = 0; jdx < playerTextTracks.length; jdx++) {
+        if (this._isSameTextTrack(displayableTracks[ idx ], playerTextTracks[ jdx ])) {
+          isAdded = true
+          break
+        }
+      }
+
+      if (!isAdded) {
+        const hlsjsTextTrack = displayableTracks[ idx ]
+        this.player.addRemoteTextTrack({
+          kind: hlsjsTextTrack.kind as videojs.TextTrack.Kind,
+          label: this._getTextTrackLabel(hlsjsTextTrack),
+          language: hlsjsTextTrack.language,
+          srclang: hlsjsTextTrack.language
+        }, false)
+      }
+    }
+
+    // Handle UI switching
+    this._updateSelectedTextTrack()
+
+    if (!this.uiTextTrackHandled) {
+      this.handlers.textTracksChange = this._updateSelectedTextTrack.bind(this)
+      playerTextTracks.addEventListener('change', this.handlers.textTracksChange)
+
+      this.uiTextTrackHandled = true
+    }
+  }
+
+  private _onMetaData (_event: any, data: Hlsjs.manifestLoadedData) {
+    // This could arrive before 'loadedqualitydata' handlers is registered, remember it so we can raise it later
+    this.metadata = data as any
+    this._handleQualityLevels()
+  }
+
+  private _createCueHandler (captionConfig: any) {
+    return {
+      newCue: (track: any, startTime: number, endTime: number, captionScreen: { rows: any[] }) => {
+        let row: any
+        let cue: VTTCue
+        let text: string
+        const VTTCue = (window as any).VTTCue || (window as any).TextTrackCue
+
+        for (let r = 0; r < captionScreen.rows.length; r++) {
+          row = captionScreen.rows[ r ]
+          text = ''
+
+          if (!row.isEmpty()) {
+            for (let c = 0; c < row.chars.length; c++) {
+              text += row.chars[ c ].ucharj
+            }
+
+            cue = new VTTCue(startTime, endTime, text.trim())
+
+            // typeof null === 'object'
+            if (captionConfig != null && typeof captionConfig === 'object') {
+              // Copy client overridden property into the cue object
+              const configKeys = Object.keys(captionConfig)
+
+              for (let k = 0; k < configKeys.length; k++) {
+                cue[ configKeys[ k ] ] = captionConfig[ configKeys[ k ] ]
+              }
+            }
+            track.addCue(cue)
+            if (endTime === startTime) track.addCue(new VTTCue(endTime + 5, ''))
+          }
+        }
+      }
+    }
+  }
+
+  private _initHlsjs () {
+    const techOptions = this.tech.options_ as HlsjsConfigHandlerOptions
+    const srOptions_ = this.player.srOptions_
+
+    const hlsjsConfigRef = srOptions_ && srOptions_.hlsjsConfig || techOptions.hlsjsConfig
+    // Hls.js will write to the reference thus change the object for later streams
+    this.hlsjsConfig = hlsjsConfigRef ? this._oneLevelObjClone(hlsjsConfigRef) : {}
+
+    if ([ '', 'auto' ].includes(this.videoElement.preload) && !this.videoElement.autoplay && this.hlsjsConfig.autoStartLoad === undefined) {
+      this.hlsjsConfig.autoStartLoad = false
+    }
+
+    const captionConfig = srOptions_ && srOptions_.captionConfig || techOptions.captionConfig
+    if (captionConfig) {
+      this.hlsjsConfig.cueHandler = this._createCueHandler(captionConfig)
+    }
+
+    // If the user explicitly sets autoStartLoad to false, we're not going to enter the if block above
+    // That's why we have a separate if block here to set the 'play' listener
+    if (this.hlsjsConfig.autoStartLoad === false) {
+      this.handlers.play = this._startLoad.bind(this)
+      this.videoElement.addEventListener('play', this.handlers.play)
+    }
+
+    // _notifyVideoQualities sometimes runs before the quality picker event handler is registered -> no video switcher
+    this.handlers.playing = this._notifyVideoQualities.bind(this)
+    this.videoElement.addEventListener('playing', this.handlers.playing)
+
+    this.hls = new Hlsjs(this.hlsjsConfig)
+
+    this._executeHooksFor('beforeinitialize')
+
+    this.hls.on(Hlsjs.Events.ERROR, (event, data) => this._onError(event, data))
+    this.hls.on(Hlsjs.Events.AUDIO_TRACKS_UPDATED, () => this._onAudioTracks())
+    this.hls.on(Hlsjs.Events.MANIFEST_PARSED, (event, data) => this._onMetaData(event, data as any)) // FIXME: typings
+    this.hls.on(Hlsjs.Events.LEVEL_LOADED, (event, data) => {
+      // The DVR plugin will auto seek to "live edge" on start up
+      if (this.hlsjsConfig.liveSyncDuration) {
+        this.edgeMargin = this.hlsjsConfig.liveSyncDuration
+      } else if (this.hlsjsConfig.liveSyncDurationCount) {
+        this.edgeMargin = this.hlsjsConfig.liveSyncDurationCount * data.details.targetduration
+      }
+
+      this.isLive = data.details.live
+      this.dvrDuration = data.details.totalduration
+      this._duration = this.isLive ? Infinity : data.details.totalduration
+    })
+    this.hls.once(Hlsjs.Events.FRAG_LOADED, () => {
+      // Emit custom 'loadedmetadata' event for parity with `videojs-contrib-hls`
+      // Ref: https://github.com/videojs/videojs-contrib-hls#loadedmetadata
+      this.tech.trigger('loadedmetadata')
+    })
+
+    this.hls.attachMedia(this.videoElement)
+
+    this.handlers.addtrack = this._updateTextTrackList.bind(this)
+    this.videoElement.textTracks.addEventListener('addtrack', this.handlers.addtrack)
+
+    this.hls.loadSource(this.source.src)
+  }
+
+  private initialize () {
+    this._initHlsjs()
+  }
+}
+
+export {
+  Html5Hlsjs,
+  registerSourceHandler,
+  registerConfigPlugin
+}
diff --git a/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts b/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts
index c3f863f72..e86900faa 100644
--- a/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts
+++ b/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts
@@ -1,16 +1,15 @@
-// FIXME: something weird with our path definition in tsconfig and typings
-// @ts-ignore
-import * as videojs from 'video.js'
-import { P2PMediaLoaderPluginOptions, PlayerNetworkInfo, VideoJSComponentInterface } from '../peertube-videojs-typings'
+import videojs, { VideoJsPlayer } from 'video.js'
+import { P2PMediaLoaderPluginOptions, PlayerNetworkInfo } from '../peertube-videojs-typings'
 import { Engine, initHlsJsPlayer, initVideoJsContribHlsJsPlayer } from 'p2p-media-loader-hlsjs'
 import { Events, Segment } from 'p2p-media-loader-core'
 import { timeToInt } from '../utils'
+import { registerConfigPlugin, registerSourceHandler } from './hls-plugin'
+import * as Hlsjs from 'hls.js'
 
-// videojs-hlsjs-plugin needs videojs in window
-window['videojs'] = videojs
-require('@streamroot/videojs-hlsjs-plugin')
+registerConfigPlugin(videojs)
+registerSourceHandler(videojs)
 
-const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin')
+const Plugin = videojs.getPlugin('plugin')
 class P2pMediaLoaderPlugin extends Plugin {
 
   private readonly CONSTANTS = {
@@ -18,7 +17,7 @@ class P2pMediaLoaderPlugin extends Plugin {
   }
   private readonly options: P2PMediaLoaderPluginOptions
 
-  private hlsjs: any // Don't type hlsjs to not bundle the module
+  private hlsjs: Hlsjs
   private p2pEngine: Engine
   private statsP2PBytes = {
     pendingDownload: [] as number[],
@@ -37,12 +36,13 @@ class P2pMediaLoaderPlugin extends Plugin {
 
   private networkInfoInterval: any
 
-  constructor (player: videojs.Player, options: P2PMediaLoaderPluginOptions) {
-    super(player, options)
+  constructor (player: VideoJsPlayer, options?: P2PMediaLoaderPluginOptions) {
+    super(player)
 
     this.options = options
 
-    if (!videojs.Html5Hlsjs) {
+    // FIXME: typings https://github.com/Microsoft/TypeScript/issues/14080
+    if (!(videojs as any).Html5Hlsjs) {
       const message = 'HLS.js does not seem to be supported.'
       console.warn(message)
 
@@ -50,7 +50,8 @@ class P2pMediaLoaderPlugin extends Plugin {
       return
     }
 
-    videojs.Html5Hlsjs.addHook('beforeinitialize', (videojsPlayer: any, hlsjs: any) => {
+    // FIXME: typings https://github.com/Microsoft/TypeScript/issues/14080
+    (videojs as any).Html5Hlsjs.addHook('beforeinitialize', (videojsPlayer: any, hlsjs: any) => {
       this.hlsjs = hlsjs
     })
 
@@ -84,12 +85,11 @@ class P2pMediaLoaderPlugin extends Plugin {
   private initialize () {
     initHlsJsPlayer(this.hlsjs)
 
-    const tech = this.player.tech_
-    this.p2pEngine = tech.options_.hlsjsConfig.loader.getEngine()
+    // FIXME: typings
+    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
-    this.hlsjs.on('hlsLevelSwitching', (_: any, data: any) => {
+    this.hlsjs.on(Hlsjs.Events.LEVEL_SWITCHING, (_: any, data: any) => {
       this.trigger('resolutionChange', { auto: this.hlsjs.autoLevelEnabled, resolutionId: data.height })
     })
 
diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts
index d9e02cd7d..dbf631a5e 100644
--- a/client/src/assets/player/peertube-player-manager.ts
+++ b/client/src/assets/player/peertube-player-manager.ts
@@ -1,21 +1,26 @@
 import { VideoFile } from '../../../../shared/models/videos'
-// @ts-ignore
-import * as videojs from 'video.js'
+import videojs, { VideoJsPlayer, VideoJsPlayerOptions } 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/peertube-load-progress-bar'
+import './videojs-components/settings-menu-item'
+import './videojs-components/settings-panel'
+import './videojs-components/settings-panel-child'
 import './videojs-components/theater-button'
-import { P2PMediaLoaderPluginOptions, UserWatching, VideoJSCaption, VideoJSPluginOptions, videojsUntyped } from './peertube-videojs-typings'
+import { P2PMediaLoaderPluginOptions, UserWatching, VideoJSCaption, VideoJSPluginOptions } from './peertube-videojs-typings'
 import { buildVideoEmbed, buildVideoLink, copyToClipboard, getRtcConfig } from './utils'
 import { isDefaultLocale } from '../../../../shared/models/i18n/i18n'
 import { segmentValidatorFactory } from './p2p-media-loader/segment-validator'
@@ -24,12 +29,17 @@ import { RedundancyUrlManager } from './p2p-media-loader/redundancy-url-manager'
 import { getStoredP2PEnabled } from './peertube-player-local-storage'
 import { TranslationsManager } from './translations-manager'
 
+// For VideoJS
+(window as any).WebVTT = require('vtt.js/lib/vtt.js').WebVTT;
+
 // Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
-videojsUntyped.getComponent('PlaybackRateMenuButton').prototype.controlText_ = 'Speed'
+(videojs.getComponent('PlaybackRateMenuButton') as any).prototype.controlText_ = 'Speed'
+
+const CaptionsButton = videojs.getComponent('CaptionsButton') as any
 // Change Captions to Subtitles/CC
-videojsUntyped.getComponent('CaptionsButton').prototype.controlText_ = 'Subtitles/CC'
+CaptionsButton.prototype.controlText_ = 'Subtitles/CC'
 // We just want to display 'Off' instead of 'captions off', keep a space so the variable == true (hacky I know)
-videojsUntyped.getComponent('CaptionsButton').prototype.label_ = ' '
+CaptionsButton.prototype.label_ = ' '
 
 export type PlayerMode = 'webtorrent' | 'p2p-media-loader'
 
@@ -92,9 +102,9 @@ export type PeertubePlayerManagerOptions = {
 
 export class PeertubePlayerManager {
   private static playerElementClassName: string
-  private static onPlayerChange: (player: any) => void
+  private static onPlayerChange: (player: VideoJsPlayer) => void
 
-  static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions, onPlayerChange: (player: any) => void) {
+  static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions, onPlayerChange: (player: VideoJsPlayer) => void) {
     let p2pMediaLoader: any
 
     this.onPlayerChange = onPlayerChange
@@ -114,12 +124,12 @@ export class PeertubePlayerManager {
 
     const self = this
     return new Promise(res => {
-      videojs(options.common.playerElement, videojsOptions, function (this: any) {
+      videojs(options.common.playerElement, videojsOptions, function (this: VideoJsPlayer) {
         const player = this
 
         let alreadyFallback = false
 
-        player.tech_.one('error', () => {
+        player.tech(true).one('error', () => {
           if (!alreadyFallback) self.maybeFallbackToWebTorrent(mode, player, options)
           alreadyFallback = true
         })
@@ -164,7 +174,7 @@ export class PeertubePlayerManager {
     const videojsOptions = this.getVideojsOptions(mode, options)
 
     const self = this
-    videojs(newVideoElement, videojsOptions, function (this: any) {
+    videojs(newVideoElement, videojsOptions, function (this: VideoJsPlayer) {
       const player = this
 
       self.addContextMenu(mode, player, options.common.embedUrl)
@@ -173,7 +183,11 @@ export class PeertubePlayerManager {
     })
   }
 
-  private static getVideojsOptions (mode: PlayerMode, options: PeertubePlayerManagerOptions, p2pMediaLoaderModule?: any) {
+  private static getVideojsOptions (
+    mode: PlayerMode,
+    options: PeertubePlayerManagerOptions,
+    p2pMediaLoaderModule?: any
+  ): VideoJsPlayerOptions {
     const commonOptions = options.common
 
     let autoplay = commonOptions.autoplay
@@ -197,9 +211,9 @@ export class PeertubePlayerManager {
     }
 
     if (mode === 'p2p-media-loader') {
-      const { streamrootHls } = PeertubePlayerManager.addP2PMediaLoaderOptions(plugins, options, p2pMediaLoaderModule)
+      const { hlsjs } = PeertubePlayerManager.addP2PMediaLoaderOptions(plugins, options, p2pMediaLoaderModule)
 
-      html5 = streamrootHls.html5
+      html5 = hlsjs.html5
     }
 
     if (mode === 'webtorrent') {
@@ -213,7 +227,7 @@ export class PeertubePlayerManager {
       html5,
 
       // We don't use text track settings for now
-      textTrackSettings: false,
+      textTrackSettings: false as any, // FIXME: typings
       controls: commonOptions.controls !== undefined ? commonOptions.controls : true,
       loop: commonOptions.loop !== undefined ? commonOptions.loop : false,
 
@@ -237,7 +251,7 @@ export class PeertubePlayerManager {
           peertubeLink: commonOptions.peertubeLink,
           theaterButton: commonOptions.theaterButton,
           nextVideo: commonOptions.nextVideo
-        })
+        }) as any // FIXME: typings
       }
     }
 
@@ -289,7 +303,7 @@ export class PeertubePlayerManager {
         swarmId: p2pMediaLoaderOptions.playlistUrl
       }
     }
-    const streamrootHls = {
+    const hlsjs = {
       levelLabelHandler: (level: { height: number, width: number }) => {
         const file = p2pMediaLoaderOptions.videoFiles.find(f => f.resolution.id === level.height)
 
@@ -308,7 +322,7 @@ export class PeertubePlayerManager {
       }
     }
 
-    const toAssign = { p2pMediaLoader, streamrootHls }
+    const toAssign = { p2pMediaLoader, hlsjs }
     Object.assign(plugins, toAssign)
 
     return toAssign
@@ -406,7 +420,7 @@ export class PeertubePlayerManager {
     return children
   }
 
-  private static addContextMenu (mode: PlayerMode, player: any, videoEmbedUrl: string) {
+  private static addContextMenu (mode: PlayerMode, player: VideoJsPlayer, videoEmbedUrl: string) {
     const content = [
       {
         label: player.localize('Copy the video URL'),
@@ -416,9 +430,8 @@ export class PeertubePlayerManager {
       },
       {
         label: player.localize('Copy the video URL at the current time'),
-        listener: function () {
-          const player = this as videojs.Player
-          copyToClipboard(buildVideoLink({ startTime: player.currentTime() }))
+        listener: function (this: VideoJsPlayer) {
+          copyToClipboard(buildVideoLink({ startTime: this.currentTime() }))
         }
       },
       {
@@ -432,9 +445,8 @@ export class PeertubePlayerManager {
     if (mode === 'webtorrent') {
       content.push({
         label: player.localize('Copy magnet URI'),
-        listener: function () {
-          const player = this as videojs.Player
-          copyToClipboard(player.webtorrent().getCurrentVideoFile().magnetUri)
+        listener: function (this: VideoJsPlayer) {
+          copyToClipboard(this.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
-// @ts-ignore
-import * as videojs from 'video.js'
+import videojs, { VideoJsPlayer } from 'video.js'
 import './videojs-components/settings-menu-button'
 import {
   PeerTubePluginOptions,
   ResolutionUpdateData,
   UserWatching,
-  VideoJSCaption,
-  VideoJSComponentInterface,
-  videojsUntyped
+  VideoJSCaption
 } 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) {
-    super(player, options)
+  constructor (player: VideoJsPlayer, options?: PeerTubePluginOptions) {
+    super(player)
 
     this.videoViewUrl = options.videoViewUrl
     this.videoDuration = options.videoDuration
@@ -67,7 +63,7 @@ class PeerTubePlugin extends Plugin {
         this.player.p2pMediaLoader().on('resolutionChange', (_: any, d: any) => this.handleResolutionChange(d))
       }
 
-      this.player.tech_.on('loadedqualitydata', () => {
+      this.player.tech(true).on('loadedqualitydata', () => {
         setTimeout(() => {
           // Replay a resolution change, now we loaded all quality data
           if (this.lastResolutionChange) this.handleResolutionChange(this.lastResolutionChange)
@@ -102,7 +98,7 @@ class PeerTubePlugin extends Plugin {
       }
 
       this.player.textTracks().on('change', () => {
-        const showing = this.player.textTracks().tracks_.find((t: { kind: string, mode: string }) => {
+        const showing = this.player.textTracks().tracks_.find(t => {
           return t.kind === 'captions' && t.mode === 'showing'
         })
 
@@ -262,7 +258,7 @@ class PeerTubePlugin extends Plugin {
 
   // Thanks: https://github.com/videojs/video.js/issues/4460#issuecomment-312861657
   private initSmoothProgressBar () {
-    const SeekBar = videojsUntyped.getComponent('SeekBar')
+    const SeekBar = videojs.getComponent('SeekBar') as any
     SeekBar.prototype.getPercent = function getPercent () {
       // Allows for smooth scrubbing, when player can't keep up.
       // const time = (this.player_.scrubbing()) ?
diff --git a/client/src/assets/player/peertube-videojs-typings.ts b/client/src/assets/player/peertube-videojs-typings.ts
index aad4dbb4f..a4e4c580c 100644
--- a/client/src/assets/player/peertube-videojs-typings.ts
+++ b/client/src/assets/player/peertube-videojs-typings.ts
@@ -1,28 +1,81 @@
-// FIXME: something weird with our path definition in tsconfig and typings
-// @ts-ignore
-import * as videojs from 'video.js'
-
 import { PeerTubePlugin } from './peertube-plugin'
 import { WebTorrentPlugin } from './webtorrent/webtorrent-plugin'
 import { P2pMediaLoaderPlugin } from './p2p-media-loader/p2p-media-loader-plugin'
 import { PlayerMode } from './peertube-player-manager'
 import { RedundancyUrlManager } from './p2p-media-loader/redundancy-url-manager'
 import { VideoFile } from '@shared/models'
+import videojs from 'video.js'
+import { Config, Level } from 'hls.js'
+
+declare module 'video.js' {
+
+  export interface VideoJsPlayer {
+    srOptions_: HlsjsConfigHandlerOptions
+
+    theaterEnabled: boolean
+
+    // FIXME: add it to upstream typings
+    posterImage: {
+      show (): void
+      hide (): void
+    }
+
+    handleTechSeeked_ (): void
+
+    // Plugins
 
-declare namespace videojs {
-  interface Player {
     peertube (): PeerTubePlugin
+
     webtorrent (): WebTorrentPlugin
+
     p2pMediaLoader (): P2pMediaLoaderPlugin
+
+    contextmenuUI (options: any): any
+
+    bezels (): void
+
+    qualityLevels (): QualityLevels
+
+    textTracks (): TextTrackList & {
+      on: Function
+      tracks_: { kind: string, mode: string, language: string }[]
+    }
+
+    audioTracks (): AudioTrackList
+
+    dock (options: { title: string, description: string }): void
   }
 }
 
-interface VideoJSComponentInterface {
-  _player: videojs.Player
+export interface VideoJSTechHLS extends videojs.Tech {
+  hlsProvider: any // FIXME: typings
+}
+
+export interface HlsjsConfigHandlerOptions {
+  hlsjsConfig?: Config & { cueHandler: any }// FIXME: typings
+  captionConfig?: any // FIXME: typings
+
+  levelLabelHandler?: (level: Level) => string
+}
+
+type QualityLevelRepresentation = {
+  id: number
+  height: number
+
+  label?: string
+  width?: number
+  bandwidth?: number
+  bitrate?: number
 
-  new (player: videojs.Player, options?: any): any
+  enabled?: Function
+  _enabled: boolean
+}
+
+type QualityLevels = QualityLevelRepresentation[] & {
+  selectedIndex: number
+  selectedIndex_: number
 
-  registerComponent (name: string, obj: any): any
+  addQualityLevel (representation: QualityLevelRepresentation): void
 }
 
 type VideoJSCaption = {
@@ -78,9 +131,6 @@ type VideoJSPluginOptions = {
   p2pMediaLoader?: P2PMediaLoaderPluginOptions
 }
 
-// videojs typings don't have some method we need
-const videojsUntyped = videojs as any
-
 type LoadedQualityData = {
   qualitySwitchCallback: Function,
   qualityData: {
@@ -123,13 +173,13 @@ export {
   PlayerNetworkInfo,
   ResolutionUpdateData,
   AutoResolutionUpdateData,
-  VideoJSComponentInterface,
-  videojsUntyped,
   VideoJSCaption,
   UserWatching,
   PeerTubePluginOptions,
   WebtorrentPluginOptions,
   P2PMediaLoaderPluginOptions,
   VideoJSPluginOptions,
-  LoadedQualityData
+  LoadedQualityData,
+  QualityLevelRepresentation,
+  QualityLevels
 }
diff --git a/client/src/assets/player/upnext/end-card.ts b/client/src/assets/player/upnext/end-card.ts
new file mode 100644
index 000000000..d121a83a9
--- /dev/null
+++ b/client/src/assets/player/upnext/end-card.ts
@@ -0,0 +1,155 @@
+import videojs, { VideoJsPlayer } from 'video.js'
+
+function getMainTemplate (options: any) {
+  return `
+    <div class="vjs-upnext-top">
+      <span class="vjs-upnext-headtext">${options.headText}</span>
+      <div class="vjs-upnext-title"></div>
+    </div>
+    <div class="vjs-upnext-autoplay-icon">
+      <svg height="100%" version="1.1" viewbox="0 0 98 98" width="100%">
+        <circle class="vjs-upnext-svg-autoplay-circle" cx="49" cy="49" fill="#000" fill-opacity="0.8" r="48"></circle>
+        <circle class="vjs-upnext-svg-autoplay-ring" cx="-49" cy="49" fill-opacity="0" r="46.5" stroke="#FFFFFF" stroke-width="4" transform="rotate(-90)"></circle>
+        <polygon class="vjs-upnext-svg-autoplay-triangle" fill="#fff" points="32,27 72,49 32,71"></polygon></svg>
+    </div>
+    <span class="vjs-upnext-bottom">
+      <span class="vjs-upnext-cancel">
+        <button class="vjs-upnext-cancel-button" tabindex="0" aria-label="Cancel autoplay">${options.cancelText}</button>
+      </span>
+      <span class="vjs-upnext-suspended">${options.suspendedText}</span>
+    </span>
+  `
+}
+
+export interface EndCardOptions extends videojs.ComponentOptions {
+  next: Function,
+  getTitle: () => string
+  timeout: number
+  cancelText: string
+  headText: string
+  suspendedText: string
+  condition: () => boolean
+  suspended: () => boolean
+}
+
+const Component = videojs.getComponent('Component')
+class EndCard extends Component {
+  options_: EndCardOptions
+
+  dashOffsetTotal = 586
+  dashOffsetStart = 293
+  interval = 50
+  upNextEvents = new videojs.EventTarget()
+  ticks = 0
+  totalTicks: number
+
+  container: HTMLDivElement
+  title: HTMLElement
+  autoplayRing: HTMLElement
+  cancelButton: HTMLElement
+  suspendedMessage: HTMLElement
+  nextButton: HTMLElement
+
+  constructor (player: VideoJsPlayer, options: EndCardOptions) {
+    super(player, options)
+
+    this.totalTicks = this.options_.timeout / this.interval
+
+    player.on('ended', (_: any) => {
+      if (!this.options_.condition()) return
+
+      player.addClass('vjs-upnext--showing')
+      this.showCard((canceled: boolean) => {
+        player.removeClass('vjs-upnext--showing')
+        this.container.style.display = 'none'
+        if (!canceled) {
+          this.options_.next()
+        }
+      })
+    })
+
+    player.on('playing', () => {
+      this.upNextEvents.trigger('playing')
+    })
+  }
+
+  createEl () {
+    const container = super.createEl('div', {
+      className: 'vjs-upnext-content',
+      innerHTML: getMainTemplate(this.options_)
+    }) as HTMLDivElement
+
+    this.container = container
+    container.style.display = 'none'
+
+    this.autoplayRing = container.getElementsByClassName('vjs-upnext-svg-autoplay-ring')[0] as HTMLElement
+    this.title = container.getElementsByClassName('vjs-upnext-title')[0] as HTMLElement
+    this.cancelButton = container.getElementsByClassName('vjs-upnext-cancel-button')[0] as HTMLElement
+    this.suspendedMessage = container.getElementsByClassName('vjs-upnext-suspended')[0] as HTMLElement
+    this.nextButton = container.getElementsByClassName('vjs-upnext-autoplay-icon')[0] as HTMLElement
+
+    this.cancelButton.onclick = () => {
+      this.upNextEvents.trigger('cancel')
+    }
+
+    this.nextButton.onclick = () => {
+      this.upNextEvents.trigger('next')
+    }
+
+    return container
+  }
+
+  showCard (cb: Function) {
+    let timeout: any
+
+    this.autoplayRing.setAttribute('stroke-dasharray', '' + this.dashOffsetStart)
+    this.autoplayRing.setAttribute('stroke-dashoffset', '' + -this.dashOffsetStart)
+
+    this.title.innerHTML = this.options_.getTitle()
+
+    this.upNextEvents.one('cancel', () => {
+      clearTimeout(timeout)
+      cb(true)
+    })
+
+    this.upNextEvents.one('playing', () => {
+      clearTimeout(timeout)
+      cb(true)
+    })
+
+    this.upNextEvents.one('next', () => {
+      clearTimeout(timeout)
+      cb(false)
+    })
+
+    const goToPercent = (percent: number) => {
+      const newOffset = Math.max(-this.dashOffsetTotal, - this.dashOffsetStart - percent * this.dashOffsetTotal / 2 / 100)
+      this.autoplayRing.setAttribute('stroke-dashoffset', '' + newOffset)
+    }
+
+    const tick = () => {
+      goToPercent((this.ticks++) * 100 / this.totalTicks)
+    }
+
+    const update = () => {
+      if (this.options_.suspended()) {
+        this.suspendedMessage.innerText = this.options_.suspendedText
+        goToPercent(0)
+        this.ticks = 0
+        timeout = setTimeout(update.bind(this), 300) // checks once supsended can be a bit longer
+      } else if (this.ticks >= this.totalTicks) {
+        clearTimeout(timeout)
+        cb(false)
+      } else {
+        this.suspendedMessage.innerText = ''
+        tick()
+        timeout = setTimeout(update.bind(this), this.interval)
+      }
+    }
+
+    this.container.style.display = 'block'
+    timeout = setTimeout(update.bind(this), this.interval)
+  }
+}
+
+videojs.registerComponent('EndCard', EndCard)
diff --git a/client/src/assets/player/upnext/upnext-plugin.ts b/client/src/assets/player/upnext/upnext-plugin.ts
index a3747b25f..6512fec2c 100644
--- a/client/src/assets/player/upnext/upnext-plugin.ts
+++ b/client/src/assets/player/upnext/upnext-plugin.ts
@@ -1,154 +1,11 @@
-// @ts-ignore
-import * as videojs from 'video.js'
-import { VideoJSComponentInterface } from '../peertube-videojs-typings'
+import videojs, { VideoJsPlayer } from 'video.js'
+import { EndCardOptions } from './end-card'
 
-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>
-  `
-}
-
-// @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
-  }
+const Plugin = videojs.getPlugin('plugin')
 
-  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/utils.ts b/client/src/assets/player/utils.ts
index 38f2482eb..fa902e1f1 100644
--- a/client/src/assets/player/utils.ts
+++ b/client/src/assets/player/utils.ts
@@ -51,8 +51,9 @@ function buildVideoLink (options: {
     : window.location.origin + window.location.pathname.replace('/embed/', '/watch/')
 
   const params = new URLSearchParams(window.location.search)
-  // Remove this unused parameter when we are on a playlist page
+  // Remove these unused parameters when we are on a playlist page
   params.delete('videoId')
+  params.delete('resume')
 
   if (options.startTime) {
     const startTimeInt = Math.floor(options.startTime)
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'
-// FIXME: something weird with our path definition in tsconfig and typings
-// @ts-ignore
-import { Player } from 'video.js'
+import videojs, { VideoJsPlayer } 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'
-    })
-    const nextIcon = videojsUntyped.dom.createEl('span', {
+    }) as HTMLButtonElement
+    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'
-
-NextVideoButton.registerComponent('NextVideoButton', NextVideoButton)
+videojs.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' +
-        this.player_.localize('Total uploaded: ' + totalUploaded.join(' '))
+      subDivWebtorrent.title = this.player().localize('Total downloaded: ') + totalDownloaded.join(' ') + '\n' +
+        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
-      peersText.textContent = ' ' + (numPeers > 1 ? this.player_.localize('peers') : this.player_.localize('peer'))
+      peersNumber.textContent = numPeers.toString()
+      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
-// @ts-ignore
-import { Player } from 'video.js'
+import videojs, { VideoJsPlayer } 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'
-// FIXME: something weird with our path definition in tsconfig and typings
-// @ts-ignore
-import { Player } from 'video.js'
+import videojs, { VideoJsPlayer } 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
-// @ts-ignore
-import { Player } from 'video.js'
+import videojs, { VideoJsPlayer } 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 MenuButton: VideoJSComponentInterface = videojsUntyped.getComponent('MenuButton')
+const Menu = videojs.getComponent('Menu')
+const MenuButton = videojs.getComponent('MenuButton')
 class ResolutionMenuButton extends MenuButton {
-  label: HTMLElement
-  labelEl_: any
-  player: Player
+  labelEl_: HTMLElement
 
-  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
-// @ts-ignore
-import { Player } from 'video.js'
+import videojs, { VideoJsPlayer } from 'video.js'
+import { AutoResolutionUpdateData, ResolutionUpdateData } from '../peertube-videojs-typings'
 
-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 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'
-
+// Thanks to Yanko Shterev: https://github.com/yshterev/videojs-settings-menu
 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 Menu: VideoJSComponentInterface = videojsUntyped.getComponent('Menu')
-const Component: VideoJSComponentInterface = videojsUntyped.getComponent('Component')
+const Button = videojs.getComponent('Button')
+const Menu = videojs.getComponent('Menu')
+const Component = videojs.getComponent('Component')
+
+export interface SettingsButtonOptions extends videojs.ComponentOptions {
+  entries: any[]
+  setup?: {
+    maxHeightOffset: number
+  }
+}
 
 class SettingsButton extends Button {
-  playerComponent = videojs.Player
-  dialog: any
-  dialogEl: any
-  menu: any
-  panel: any
-  panelChild: any
-
-  addSettingsItemHandler: Function
-  disposeSettingsItemHandler: Function
-  playerClickHandler: Function
-  userInactiveHandler: Function
-
-  constructor (player: videojs.Player, options: any) {
+  dialog: SettingsDialog
+  dialogEl: HTMLElement
+  menu: videojs.Menu
+  panel: SettingsPanel
+  panelChild: SettingsPanelChild
+
+  addSettingsItemHandler: typeof SettingsButton.prototype.onAddSettingsItem
+  disposeSettingsItemHandler: typeof SettingsButton.prototype.onDisposeSettingsItem
+  playerClickHandler: typeof SettingsButton.prototype.onPlayerClick
+  userInactiveHandler: typeof SettingsButton.prototype.onUserInactive
+
+  private settingsButtonOptions: SettingsButtonOptions
+
+  constructor (player: VideoJsPlayer, options?: SettingsButtonOptions) {
     super(player, options)
 
-    this.playerComponent = player
-    this.dialog = this.playerComponent.addChild('settingsDialog')
-    this.dialogEl = this.dialog.el_
+    this.settingsButtonOptions = options
+
+    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.playerComponent.on('addsettingsitem', this.addSettingsItemHandler)
-    this.playerComponent.on('disposesettingsitem', this.disposeSettingsItemHandler)
-    this.playerComponent.on('userinactive', this.userInactiveHandler)
+    this.player().on('click', this.playerClickHandler)
+    this.player().on('addsettingsitem', this.addSettingsItemHandler)
+    this.player().on('disposesettingsitem', this.disposeSettingsItemHandler)
+    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.menu.el_.style.opacity = '1'
+    this.setDialogSize(this.getComponentSize(this.menu));
+    (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
-      height = element.el_.offsetHeight
+      const el = element.el() as HTMLElement
+
+      width = el.offsetWidth
+      height = el.offsetHeight;
 
-      // keep width/height as properties for direct use
-      element.width = width
-      element.height = height
+      (element as any).width = width;
+      (element as any).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 maxHeight = this.playerComponent.el_.offsetHeight - offset
+    const offset = this.settingsButtonOptions.setup.maxHeightOffset
+    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`
-    } else if (this.panel.el_.style.maxHeight !== '') {
-      this.panel.el_.style.maxHeight = ''
+      panelEl.style.maxHeight = `${height}px`
+    } else if (panelEl.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')) {
-        videojsUntyped.dom.removeClass(this.el_, 'open')
+      if (videojs.dom.hasClass(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 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'
-
+// Thanks to Yanko Shterev: https://github.com/yshterev/videojs-settings-menu
 import { toTitleCase } from '../utils'
-import { VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
-
-const MenuItem: VideoJSComponentInterface = videojsUntyped.getComponent('MenuItem')
-const component: VideoJSComponentInterface = videojsUntyped.getComponent('Component')
+import videojs, { VideoJsPlayer } from 'video.js'
+import { SettingsButton } from './settings-menu-button'
+import { SettingsDialog } from './settings-dialog'
+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
-  dialog: any
-  mainMenu: any
-  panel: any
-  panelChild: any
-  panelChildEl: any
-  size: any
+  settingsButton: SettingsButton
+  dialog: SettingsDialog
+  mainMenu: videojs.Menu
+  panel: SettingsPanel
+  panelChild: SettingsPanelChild
+  panelChildEl: HTMLElement
+  size: number[]
   menuToLoad: string
-  subMenu: any
+  subMenu: SettingsButton
 
-  submenuClickHandler: Function
-  transitionEndHandler: Function
+  submenuClickHandler: typeof SettingsMenuItem.prototype.onSubmenuClick
+  transitionEndHandler: typeof SettingsMenuItem.prototype.onTransitionEnd
 
-  settingsSubMenuTitleEl_: any
-  settingsSubMenuValueEl_: any
-  settingsSubMenuEl_: any
+  settingsSubMenuTitleEl_: HTMLElement
+  settingsSubMenuValueEl_: HTMLElement
+  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 SubMenuComponent = videojsUntyped.getComponent(subMenuName)
+    const subMenuName = toTitleCase(options.entry)
+    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')) {
-      videojsUntyped.dom.removeClass(this.settingsSubMenuEl_, 'vjs-hidden')
+    if (videojs.dom.hasClass(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.el_.innerHTML = this.player_.localize(this.subMenu.controlText_)
+
+    button.addClass('vjs-back-button');
+    (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.settingsSubMenuEl_.appendChild(this.subMenu.menu.el_)
+    this.settingsSubMenuTitleEl_.innerHTML = this.player().localize(this.subMenu.controlText())
+    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') {
-            this.settingsSubMenuValueEl_.innerHTML = subMenuItem.getLabel()
+          if (typeof subMenuItemUntyped.getLabel === 'function') {
+            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')) {
-      videojsUntyped.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
-      videojsUntyped.dom.removeClass(this.el_, 'open')
+    if (videojs.dom.hasClass(this.el(), 'open')) {
+      videojs.dom.addClass(this.settingsSubMenuEl_, 'vjs-hidden')
+      videojs.dom.removeClass(this.el(), 'open')
     }
   }
 
 }
 
-SettingsMenuItem.prototype.contentElType = 'button'
-videojsUntyped.registerComponent('SettingsMenuItem', SettingsMenuItem)
+(SettingsMenuItem as any).prototype.contentElType = 'button'
+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
-// @ts-ignore
-import * as videojs from 'video.js'
-
-import { VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
+import videojs, { VideoJsPlayer } from 'video.js'
 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'
-
-TheaterButton.registerComponent('TheaterButton', TheaterButton)
+videojs.registerComponent('TheaterButton', TheaterButton)
diff --git a/client/src/assets/player/webtorrent/webtorrent-plugin.ts b/client/src/assets/player/webtorrent/webtorrent-plugin.ts
index 35cf85c99..bf6b0a718 100644
--- a/client/src/assets/player/webtorrent/webtorrent-plugin.ts
+++ b/client/src/assets/player/webtorrent/webtorrent-plugin.ts
@@ -1,17 +1,15 @@
-// FIXME: something weird with our path definition in tsconfig and typings
-// @ts-ignore
-import * as videojs from 'video.js'
+import videojs, { VideoJsPlayer } from 'video.js'
 
 import * as WebTorrent from 'webtorrent'
 import { renderVideo } from './video-renderer'
-import { LoadedQualityData, PlayerNetworkInfo, VideoJSComponentInterface, WebtorrentPluginOptions } from '../peertube-videojs-typings'
+import { LoadedQualityData, PlayerNetworkInfo, WebtorrentPluginOptions } from '../peertube-videojs-typings'
 import { getRtcConfig, timeToInt, videoFileMaxByResolution, videoFileMinByResolution } from '../utils'
 import { PeertubeChunkStore } from './peertube-chunk-store'
 import {
   getAverageBandwidthInStore,
   getStoredMute,
-  getStoredVolume,
   getStoredP2PEnabled,
+  getStoredVolume,
   saveAverageBandwidth
 } from '../peertube-player-local-storage'
 import { VideoFile } from '@shared/models'
@@ -24,14 +22,16 @@ type PlayOptions = {
   delay?: number
 }
 
-const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin')
+const Plugin = videojs.getPlugin('plugin')
+
 class WebTorrentPlugin extends Plugin {
+  readonly videoFiles: VideoFile[]
+
   private readonly playerElement: HTMLVideoElement
 
   private readonly autoplay: boolean = false
   private readonly startTime: number = 0
-  private readonly savePlayerSrcFunction: Function
-  private readonly videoFiles: VideoFile[]
+  private readonly savePlayerSrcFunction: VideoJsPlayer['src']
   private readonly videoDuration: number
   private readonly CONSTANTS = {
     INFO_SCHEDULER: 1000, // Don't change this
@@ -49,7 +49,6 @@ class WebTorrentPlugin extends Plugin {
     dht: false
   })
 
-  private player: any
   private currentVideoFile: VideoFile
   private torrent: WebTorrent.Torrent
 
@@ -70,8 +69,8 @@ class WebTorrentPlugin extends Plugin {
 
   private downloadSpeeds: number[] = []
 
-  constructor (player: videojs.Player, options: WebtorrentPluginOptions) {
-    super(player, options)
+  constructor (player: VideoJsPlayer, options?: WebtorrentPluginOptions) {
+    super(player)
 
     this.startTime = timeToInt(options.startTime)
 
@@ -147,12 +146,12 @@ class WebTorrentPlugin extends Plugin {
     }
 
     // Do not display error to user because we will have multiple fallback
-    this.disableErrorDisplay()
+    this.disableErrorDisplay();
 
     // Hack to "simulate" src link in video.js >= 6
     // Without this, we can't play the video after pausing it
     // https://github.com/videojs/video.js/blob/master/src/js/player.js#L1633
-    this.player.src = () => true
+    (this.player as any).src = () => true
     const oldPlaybackRate = this.player.playbackRate()
 
     const previousVideoFile = this.currentVideoFile
@@ -333,7 +332,7 @@ class WebTorrentPlugin extends Plugin {
 
     const playPromise = this.player.play()
     if (playPromise !== undefined) {
-      return playPromise.then(done)
+      return playPromise.then(() => done())
                         .catch((err: Error) => {
                           if (err.message.indexOf('The play() request was interrupted by a call to pause()') !== -1) {
                             return
@@ -426,8 +425,8 @@ class WebTorrentPlugin extends Plugin {
     }
 
     // Proxy first play
-    const oldPlay = this.player.play.bind(this.player)
-    this.player.play = () => {
+    const oldPlay = this.player.play.bind(this.player);
+    (this.player as any).play = () => {
       this.player.addClass('vjs-has-big-play-button-clicked')
       this.player.play = oldPlay
 
@@ -619,7 +618,7 @@ class WebTorrentPlugin extends Plugin {
         video: qualityLevelsPayload
       }
     }
-    this.player.tech_.trigger('loadedqualitydata', payload)
+    this.player.tech(true).trigger('loadedqualitydata', payload)
   }
 
   private buildQualityLabel (file: VideoFile) {
@@ -651,9 +650,9 @@ class WebTorrentPlugin extends Plugin {
       return
     }
 
-    for (let i = 0; i < qualityLevels; i++) {
-      const q = this.player.qualityLevels[i]
-      if (q.height === resolutionId) qualityLevels.selectedIndex = i
+    for (let i = 0; i < qualityLevels.length; i++) {
+      const q = qualityLevels[i]
+      if (q.height === resolutionId) qualityLevels.selectedIndex_ = i
     }
   }
 }