6 files changed, 680 insertions, 30 deletions

diff --git a/client/package.json b/client/package.json
index ef0e8c03f..66e8990f9 100644
--- a/client/package.json
+++ b/client/package.json
@@ -56,7 +56,6 @@
     "@ngx-loading-bar/router": "^4.2.0",
     "@ngx-meta/core": "^7.0.0",
     "@ngx-translate/i18n-polyfill": "^1.0.0",
-    "@streamroot/videojs-hlsjs-plugin": "^1.0.10",
     "@types/core-js": "^2.5.2",
     "@types/debug": "^4.1.5",
     "@types/hls.js": "^0.12.4",
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 512054ae6..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
@@ -3,10 +3,11 @@ import { P2PMediaLoaderPluginOptions, PlayerNetworkInfo } from '../peertube-vide
 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 = videojs.getPlugin('plugin')
 class P2pMediaLoaderPlugin extends Plugin {
@@ -16,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[],
@@ -88,9 +89,7 @@ class P2pMediaLoaderPlugin extends Plugin {
     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 4e6387a53..dbf631a5e 100644
--- a/client/src/assets/player/peertube-player-manager.ts
+++ b/client/src/assets/player/peertube-player-manager.ts
@@ -211,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') {
@@ -303,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)
 
@@ -322,7 +322,7 @@ export class PeertubePlayerManager {
       }
     }
 
-    const toAssign = { p2pMediaLoader, streamrootHls }
+    const toAssign = { p2pMediaLoader, hlsjs }
     Object.assign(plugins, toAssign)
 
     return toAssign
diff --git a/client/src/assets/player/peertube-videojs-typings.ts b/client/src/assets/player/peertube-videojs-typings.ts
index e45722661..8f3d76cac 100644
--- a/client/src/assets/player/peertube-videojs-typings.ts
+++ b/client/src/assets/player/peertube-videojs-typings.ts
@@ -1,13 +1,17 @@
-import 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
@@ -21,32 +25,57 @@ declare module 'video.js' {
     // Plugins
 
     peertube (): PeerTubePlugin
+
     webtorrent (): WebTorrentPlugin
+
     p2pMediaLoader (): P2pMediaLoaderPlugin
 
     contextmenuUI (options: any): any
 
     bezels (): void
 
-    qualityLevels (): { height: number, id: number }[] & {
-      selectedIndex: number
-      selectedIndex_: number
-
-      addQualityLevel (representation: {
-        id: number
-        label: string
-        height: number
-        _enabled: boolean
-      }): void
-    }
+    qualityLevels (): QualityLevels
 
     textTracks (): TextTrackList & {
       on: Function
       tracks_: { kind: string, mode: string, language: string }[]
     }
+
+    audioTracks (): AudioTrackList
   }
 }
 
+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
+
+  enabled?: Function
+  _enabled: boolean
+}
+
+type QualityLevels = QualityLevelRepresentation[] & {
+  selectedIndex: number
+  selectedIndex_: number
+
+  addQualityLevel (representation: QualityLevelRepresentation): void
+}
+
 type VideoJSCaption = {
   label: string
   language: string
@@ -148,5 +177,7 @@ export {
   WebtorrentPluginOptions,
   P2PMediaLoaderPluginOptions,
   VideoJSPluginOptions,
-  LoadedQualityData
+  LoadedQualityData,
+  QualityLevelRepresentation,
+  QualityLevels
 }
diff --git a/client/yarn.lock b/client/yarn.lock
index 98b7e58a7..1b9c2cef1 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -987,11 +987,6 @@
     semver "6.3.0"
     semver-intersect "1.4.0"
 
-"@streamroot/videojs-hlsjs-plugin@^1.0.10":
-  version "1.0.13"
-  resolved "https://registry.yarnpkg.com/@streamroot/videojs-hlsjs-plugin/-/videojs-hlsjs-plugin-1.0.13.tgz#ae3afb3a5a3cd90e7b424b6b4cb14de1cde40836"
-  integrity sha512-A55213sFj8nuoj23YiR0r73cRV4dlnSwXGwT1Qiu+oqhsauhqN+lHSRHFztMIU4EMf2Cafvv5P4R+A2c/Uj6nw==
-
 "@types/bittorrent-protocol@*":
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/@types/bittorrent-protocol/-/bittorrent-protocol-2.2.4.tgz#7dc0716924bc6a904753d39846ad235c7dab4641"