Reorganize player files

3 files changed, 1007 insertions, 0 deletions

diff --git a/client/src/assets/player/shared/webtorrent/peertube-chunk-store.ts b/client/src/assets/player/shared/webtorrent/peertube-chunk-store.ts
new file mode 100644
index 000000000..81378c277
--- /dev/null
+++ b/client/src/assets/player/shared/webtorrent/peertube-chunk-store.ts
@@ -0,0 +1,233 @@
+// From https://github.com/MinEduTDF/idb-chunk-store
+// We use temporary IndexDB (all data are removed on destroy) to avoid RAM issues
+// Thanks @santiagogil and @Feross
+
+import { EventEmitter } from 'events'
+import Dexie from 'dexie'
+
+class ChunkDatabase extends Dexie {
+  chunks: Dexie.Table<{ id: number, buf: Buffer }, number>
+
+  constructor (dbname: string) {
+    super(dbname)
+
+    this.version(1).stores({
+      chunks: 'id'
+    })
+  }
+}
+
+class ExpirationDatabase extends Dexie {
+  databases: Dexie.Table<{ name: string, expiration: number }, number>
+
+  constructor () {
+    super('webtorrent-expiration')
+
+    this.version(1).stores({
+      databases: 'name,expiration'
+    })
+  }
+}
+
+export class PeertubeChunkStore extends EventEmitter {
+  private static readonly BUFFERING_PUT_MS = 1000
+  private static readonly CLEANER_INTERVAL_MS = 1000 * 60 // 1 minute
+  private static readonly CLEANER_EXPIRATION_MS = 1000 * 60 * 5 // 5 minutes
+
+  chunkLength: number
+
+  private pendingPut: { id: number, buf: Buffer, cb: (err?: Error) => void }[] = []
+  // If the store is full
+  private memoryChunks: { [ id: number ]: Buffer | true } = {}
+  private databaseName: string
+  private putBulkTimeout: any
+  private cleanerInterval: any
+  private db: ChunkDatabase
+  private expirationDB: ExpirationDatabase
+  private readonly length: number
+  private readonly lastChunkLength: number
+  private readonly lastChunkIndex: number
+
+  constructor (chunkLength: number, opts: any) {
+    super()
+
+    this.databaseName = 'webtorrent-chunks-'
+
+    if (!opts) opts = {}
+    if (opts.torrent?.infoHash) this.databaseName += opts.torrent.infoHash
+    else this.databaseName += '-default'
+
+    this.setMaxListeners(100)
+
+    this.chunkLength = Number(chunkLength)
+    if (!this.chunkLength) throw new Error('First argument must be a chunk length')
+
+    this.length = Number(opts.length) || Infinity
+
+    if (this.length !== Infinity) {
+      this.lastChunkLength = (this.length % this.chunkLength) || this.chunkLength
+      this.lastChunkIndex = Math.ceil(this.length / this.chunkLength) - 1
+    }
+
+    this.db = new ChunkDatabase(this.databaseName)
+    // Track databases that expired
+    this.expirationDB = new ExpirationDatabase()
+
+    this.runCleaner()
+  }
+
+  put (index: number, buf: Buffer, cb: (err?: Error) => void) {
+    const isLastChunk = (index === this.lastChunkIndex)
+    if (isLastChunk && buf.length !== this.lastChunkLength) {
+      return this.nextTick(cb, new Error('Last chunk length must be ' + this.lastChunkLength))
+    }
+    if (!isLastChunk && buf.length !== this.chunkLength) {
+      return this.nextTick(cb, new Error('Chunk length must be ' + this.chunkLength))
+    }
+
+    // Specify we have this chunk
+    this.memoryChunks[index] = true
+
+    // Add it to the pending put
+    this.pendingPut.push({ id: index, buf, cb })
+    // If it's already planned, return
+    if (this.putBulkTimeout) return
+
+    // Plan a future bulk insert
+    this.putBulkTimeout = setTimeout(async () => {
+      const processing = this.pendingPut
+      this.pendingPut = []
+      this.putBulkTimeout = undefined
+
+      try {
+        await this.db.transaction('rw', this.db.chunks, () => {
+          return this.db.chunks.bulkPut(processing.map(p => ({ id: p.id, buf: p.buf })))
+        })
+      } catch (err) {
+        console.log('Cannot bulk insert chunks. Store them in memory.', { err })
+
+        processing.forEach(p => {
+          this.memoryChunks[p.id] = p.buf
+        })
+      } finally {
+        processing.forEach(p => p.cb())
+      }
+    }, PeertubeChunkStore.BUFFERING_PUT_MS)
+  }
+
+  get (index: number, opts: any, cb: (err?: Error, buf?: Buffer) => void): void {
+    if (typeof opts === 'function') return this.get(index, null, opts)
+
+    // IndexDB could be slow, use our memory index first
+    const memoryChunk = this.memoryChunks[index]
+    if (memoryChunk === undefined) {
+      const err = new Error('Chunk not found') as any
+      err['notFound'] = true
+
+      return process.nextTick(() => cb(err))
+    }
+
+    // Chunk in memory
+    if (memoryChunk !== true) return cb(null, memoryChunk)
+
+    // Chunk in store
+    this.db.transaction('r', this.db.chunks, async () => {
+      const result = await this.db.chunks.get({ id: index })
+      if (result === undefined) return cb(null, Buffer.alloc(0))
+
+      const buf = result.buf
+      if (!opts) return this.nextTick(cb, null, buf)
+
+      const offset = opts.offset || 0
+      const len = opts.length || (buf.length - offset)
+      return cb(null, buf.slice(offset, len + offset))
+    })
+    .catch(err => {
+      console.error(err)
+      return cb(err)
+    })
+  }
+
+  close (cb: (err?: Error) => void) {
+    return this.destroy(cb)
+  }
+
+  async destroy (cb: (err?: Error) => void) {
+    try {
+      if (this.pendingPut) {
+        clearTimeout(this.putBulkTimeout)
+        this.pendingPut = null
+      }
+      if (this.cleanerInterval) {
+        clearInterval(this.cleanerInterval)
+        this.cleanerInterval = null
+      }
+
+      if (this.db) {
+        this.db.close()
+
+        await this.dropDatabase(this.databaseName)
+      }
+
+      if (this.expirationDB) {
+        this.expirationDB.close()
+        this.expirationDB = null
+      }
+
+      return cb()
+    } catch (err) {
+      console.error('Cannot destroy peertube chunk store.', err)
+      return cb(err)
+    }
+  }
+
+  private runCleaner () {
+    this.checkExpiration()
+
+    this.cleanerInterval = setInterval(() => {
+      this.checkExpiration()
+    }, PeertubeChunkStore.CLEANER_INTERVAL_MS)
+  }
+
+  private async checkExpiration () {
+    let databasesToDeleteInfo: { name: string }[] = []
+
+    try {
+      await this.expirationDB.transaction('rw', this.expirationDB.databases, async () => {
+        // Update our database expiration since we are alive
+        await this.expirationDB.databases.put({
+          name: this.databaseName,
+          expiration: new Date().getTime() + PeertubeChunkStore.CLEANER_EXPIRATION_MS
+        })
+
+        const now = new Date().getTime()
+        databasesToDeleteInfo = await this.expirationDB.databases.where('expiration').below(now).toArray()
+      })
+    } catch (err) {
+      console.error('Cannot update expiration of fetch expired databases.', err)
+    }
+
+    for (const databaseToDeleteInfo of databasesToDeleteInfo) {
+      await this.dropDatabase(databaseToDeleteInfo.name)
+    }
+  }
+
+  private async dropDatabase (databaseName: string) {
+    const dbToDelete = new ChunkDatabase(databaseName)
+    console.log('Destroying IndexDB database %s.', databaseName)
+
+    try {
+      await dbToDelete.delete()
+
+      await this.expirationDB.transaction('rw', this.expirationDB.databases, () => {
+        return this.expirationDB.databases.where({ name: databaseName }).delete()
+      })
+    } catch (err) {
+      console.error('Cannot delete %s.', databaseName, err)
+    }
+  }
+
+  private nextTick <T> (cb: (err?: Error, val?: T) => void, err: Error, val?: T) {
+    process.nextTick(() => cb(err, val), undefined)
+  }
+}
diff --git a/client/src/assets/player/shared/webtorrent/video-renderer.ts b/client/src/assets/player/shared/webtorrent/video-renderer.ts
new file mode 100644
index 000000000..9b80fea2c
--- /dev/null
+++ b/client/src/assets/player/shared/webtorrent/video-renderer.ts
@@ -0,0 +1,133 @@
+// Thanks: https://github.com/feross/render-media
+
+const MediaElementWrapper = require('mediasource')
+import { extname } from 'path'
+const Videostream = require('videostream')
+
+const VIDEOSTREAM_EXTS = [
+  '.m4a',
+  '.m4v',
+  '.mp4'
+]
+
+type RenderMediaOptions = {
+  controls: boolean
+  autoplay: boolean
+}
+
+function renderVideo (
+  file: any,
+  elem: HTMLVideoElement,
+  opts: RenderMediaOptions,
+  callback: (err: Error, renderer: any) => void
+) {
+  validateFile(file)
+
+  return renderMedia(file, elem, opts, callback)
+}
+
+function renderMedia (file: any, elem: HTMLVideoElement, opts: RenderMediaOptions, callback: (err: Error, renderer?: any) => void) {
+  const extension = extname(file.name).toLowerCase()
+  let preparedElem: any
+  let currentTime = 0
+  let renderer: any
+
+  try {
+    if (VIDEOSTREAM_EXTS.includes(extension)) {
+      renderer = useVideostream()
+    } else {
+      renderer = useMediaSource()
+    }
+  } catch (err) {
+    return callback(err)
+  }
+
+  function useVideostream () {
+    prepareElem()
+    preparedElem.addEventListener('error', function onError (err: Error) {
+      preparedElem.removeEventListener('error', onError)
+
+      return callback(err)
+    })
+    preparedElem.addEventListener('loadstart', onLoadStart)
+    return new Videostream(file, preparedElem)
+  }
+
+  function useMediaSource (useVP9 = false) {
+    const codecs = getCodec(file.name, useVP9)
+
+    prepareElem()
+    preparedElem.addEventListener('error', function onError (err: Error) {
+      preparedElem.removeEventListener('error', onError)
+
+      // Try with vp9 before returning an error
+      if (codecs.includes('vp8')) return fallbackToMediaSource(true)
+
+      return callback(err)
+    })
+    preparedElem.addEventListener('loadstart', onLoadStart)
+
+    const wrapper = new MediaElementWrapper(preparedElem)
+    const writable = wrapper.createWriteStream(codecs)
+    file.createReadStream().pipe(writable)
+
+    if (currentTime) preparedElem.currentTime = currentTime
+
+    return wrapper
+  }
+
+  function fallbackToMediaSource (useVP9 = false) {
+    if (useVP9 === true) console.log('Falling back to media source with VP9 enabled.')
+    else console.log('Falling back to media source..')
+
+    useMediaSource(useVP9)
+  }
+
+  function prepareElem () {
+    if (preparedElem === undefined) {
+      preparedElem = elem
+
+      preparedElem.addEventListener('progress', function () {
+        currentTime = elem.currentTime
+      })
+    }
+  }
+
+  function onLoadStart () {
+    preparedElem.removeEventListener('loadstart', onLoadStart)
+    if (opts.autoplay) preparedElem.play()
+
+    callback(null, renderer)
+  }
+}
+
+function validateFile (file: any) {
+  if (file == null) {
+    throw new Error('file cannot be null or undefined')
+  }
+  if (typeof file.name !== 'string') {
+    throw new Error('missing or invalid file.name property')
+  }
+  if (typeof file.createReadStream !== 'function') {
+    throw new Error('missing or invalid file.createReadStream property')
+  }
+}
+
+function getCodec (name: string, useVP9 = false) {
+  const ext = extname(name).toLowerCase()
+  if (ext === '.mp4') {
+    return 'video/mp4; codecs="avc1.640029, mp4a.40.5"'
+  }
+
+  if (ext === '.webm') {
+    if (useVP9 === true) return 'video/webm; codecs="vp9, opus"'
+
+    return 'video/webm; codecs="vp8, vorbis"'
+  }
+
+  return undefined
+}
+
+export {
+  renderVideo
+}
diff --git a/client/src/assets/player/shared/webtorrent/webtorrent-plugin.ts b/client/src/assets/player/shared/webtorrent/webtorrent-plugin.ts
new file mode 100644
index 000000000..b48203148
--- /dev/null
+++ b/client/src/assets/player/shared/webtorrent/webtorrent-plugin.ts
@@ -0,0 +1,641 @@
+import videojs from 'video.js'
+import * as WebTorrent from 'webtorrent'
+import { isIOS } from '@root-helpers/web-browser'
+import { timeToInt } from '@shared/core-utils'
+import { VideoFile } from '@shared/models'
+import { getAverageBandwidthInStore, getStoredMute, getStoredVolume, saveAverageBandwidth } from '../../peertube-player-local-storage'
+import { PeerTubeResolution, PlayerNetworkInfo, WebtorrentPluginOptions } from '../../types'
+import { getRtcConfig, videoFileMaxByResolution, videoFileMinByResolution } from '../common'
+import { PeertubeChunkStore } from './peertube-chunk-store'
+import { renderVideo } from './video-renderer'
+
+const CacheChunkStore = require('cache-chunk-store')
+
+type PlayOptions = {
+  forcePlay?: boolean
+  seek?: number
+  delay?: number
+}
+
+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: videojs.Player['src']
+  private readonly videoDuration: number
+  private readonly CONSTANTS = {
+    INFO_SCHEDULER: 1000, // Don't change this
+    AUTO_QUALITY_SCHEDULER: 3000, // Check quality every 3 seconds
+    AUTO_QUALITY_THRESHOLD_PERCENT: 30, // Bandwidth should be 30% more important than a resolution bitrate to change to it
+    AUTO_QUALITY_OBSERVATION_TIME: 10000, // Wait 10 seconds after having change the resolution before another check
+    AUTO_QUALITY_HIGHER_RESOLUTION_DELAY: 5000, // Buffering higher resolution during 5 seconds
+    BANDWIDTH_AVERAGE_NUMBER_OF_VALUES: 5 // Last 5 seconds to build average bandwidth
+  }
+
+  private readonly webtorrent = new WebTorrent({
+    tracker: {
+      rtcConfig: getRtcConfig()
+    },
+    dht: false
+  })
+
+  private currentVideoFile: VideoFile
+  private torrent: WebTorrent.Torrent
+
+  private renderer: any
+  private fakeRenderer: any
+  private destroyingFakeRenderer = false
+
+  private autoResolution = true
+  private autoResolutionPossible = true
+  private isAutoResolutionObservation = false
+  private playerRefusedP2P = false
+
+  private torrentInfoInterval: any
+  private autoQualityInterval: any
+  private addTorrentDelay: any
+  private qualityObservationTimer: any
+  private runAutoQualitySchedulerTimer: any
+
+  private downloadSpeeds: number[] = []
+
+  constructor (player: videojs.Player, options?: WebtorrentPluginOptions) {
+    super(player)
+
+    this.startTime = timeToInt(options.startTime)
+
+    // Custom autoplay handled by webtorrent because we lazy play the video
+    this.autoplay = options.autoplay
+
+    this.playerRefusedP2P = options.playerRefusedP2P
+
+    this.videoFiles = options.videoFiles
+    this.videoDuration = options.videoDuration
+
+    this.savePlayerSrcFunction = this.player.src
+    this.playerElement = options.playerElement
+
+    this.player.ready(() => {
+      const playerOptions = this.player.options_
+
+      const volume = getStoredVolume()
+      if (volume !== undefined) this.player.volume(volume)
+
+      const muted = playerOptions.muted !== undefined ? playerOptions.muted : getStoredMute()
+      if (muted !== undefined) this.player.muted(muted)
+
+      this.player.duration(options.videoDuration)
+
+      this.initializePlayer()
+      this.runTorrentInfoScheduler()
+
+      this.player.one('play', () => {
+        // Don't run immediately scheduler, wait some seconds the TCP connections are made
+        this.runAutoQualitySchedulerTimer = setTimeout(() => this.runAutoQualityScheduler(), this.CONSTANTS.AUTO_QUALITY_SCHEDULER)
+      })
+    })
+  }
+
+  dispose () {
+    clearTimeout(this.addTorrentDelay)
+    clearTimeout(this.qualityObservationTimer)
+    clearTimeout(this.runAutoQualitySchedulerTimer)
+
+    clearInterval(this.torrentInfoInterval)
+    clearInterval(this.autoQualityInterval)
+
+    // Don't need to destroy renderer, video player will be destroyed
+    this.flushVideoFile(this.currentVideoFile, false)
+
+    this.destroyFakeRenderer()
+  }
+
+  getCurrentResolutionId () {
+    return this.currentVideoFile ? this.currentVideoFile.resolution.id : -1
+  }
+
+  updateVideoFile (
+    videoFile?: VideoFile,
+    options: {
+      forcePlay?: boolean
+      seek?: number
+      delay?: number
+    } = {},
+    done: () => void = () => { /* empty */ }
+  ) {
+    // Automatically choose the adapted video file
+    if (!videoFile) {
+      const savedAverageBandwidth = getAverageBandwidthInStore()
+      videoFile = savedAverageBandwidth
+        ? this.getAppropriateFile(savedAverageBandwidth)
+        : this.pickAverageVideoFile()
+    }
+
+    if (!videoFile) {
+      throw Error(`Can't update video file since videoFile is undefined.`)
+    }
+
+    // Don't add the same video file once again
+    if (this.currentVideoFile !== undefined && this.currentVideoFile.magnetUri === videoFile.magnetUri) {
+      return
+    }
+
+    // Do not display error to user because we will have multiple fallback
+    this.player.peertube().hideFatalError();
+
+    // 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 as any).src = () => true
+    const oldPlaybackRate = this.player.playbackRate()
+
+    const previousVideoFile = this.currentVideoFile
+    this.currentVideoFile = videoFile
+
+    // Don't try on iOS that does not support MediaSource
+    // Or don't use P2P if webtorrent is disabled
+    if (isIOS() || this.playerRefusedP2P) {
+      return this.fallbackToHttp(options, () => {
+        this.player.playbackRate(oldPlaybackRate)
+        return done()
+      })
+    }
+
+    this.addTorrent(this.currentVideoFile.magnetUri, previousVideoFile, options, () => {
+      this.player.playbackRate(oldPlaybackRate)
+      return done()
+    })
+
+    this.selectAppropriateResolution(true)
+  }
+
+  updateEngineResolution (resolutionId: number, delay = 0) {
+    // Remember player state
+    const currentTime = this.player.currentTime()
+    const isPaused = this.player.paused()
+
+    // Hide bigPlayButton
+    if (!isPaused) {
+      this.player.bigPlayButton.hide()
+    }
+
+    // Audio-only (resolutionId === 0) gets special treatment
+    if (resolutionId === 0) {
+      // Audio-only: show poster, do not auto-hide controls
+      this.player.addClass('vjs-playing-audio-only-content')
+      this.player.posterImage.show()
+    } else {
+      // Hide poster to have black background
+      this.player.removeClass('vjs-playing-audio-only-content')
+      this.player.posterImage.hide()
+    }
+
+    const newVideoFile = this.videoFiles.find(f => f.resolution.id === resolutionId)
+    const options = {
+      forcePlay: false,
+      delay,
+      seek: currentTime + (delay / 1000)
+    }
+
+    this.updateVideoFile(newVideoFile, options)
+  }
+
+  flushVideoFile (videoFile: VideoFile, destroyRenderer = true) {
+    if (videoFile !== undefined && this.webtorrent.get(videoFile.magnetUri)) {
+      if (destroyRenderer === true && this.renderer && this.renderer.destroy) this.renderer.destroy()
+
+      this.webtorrent.remove(videoFile.magnetUri)
+      console.log('Removed ' + videoFile.magnetUri)
+    }
+  }
+
+  disableAutoResolution () {
+    this.autoResolution = false
+    this.autoResolutionPossible = false
+    this.player.peertubeResolutions().disableAutoResolution()
+  }
+
+  isAutoResolutionPossible () {
+    return this.autoResolutionPossible
+  }
+
+  getTorrent () {
+    return this.torrent
+  }
+
+  getCurrentVideoFile () {
+    return this.currentVideoFile
+  }
+
+  changeQuality (id: number) {
+    if (id === -1) {
+      if (this.autoResolutionPossible === true) {
+        this.autoResolution = true
+
+        this.selectAppropriateResolution(false)
+      }
+
+      return
+    }
+
+    this.autoResolution = false
+    this.updateEngineResolution(id)
+    this.selectAppropriateResolution(false)
+  }
+
+  private addTorrent (
+    magnetOrTorrentUrl: string,
+    previousVideoFile: VideoFile,
+    options: PlayOptions,
+    done: (err?: Error) => void
+  ) {
+    if (!magnetOrTorrentUrl) return this.fallbackToHttp(options, done)
+
+    console.log('Adding ' + magnetOrTorrentUrl + '.')
+
+    const oldTorrent = this.torrent
+    const torrentOptions = {
+      // Don't use arrow function: it breaks webtorrent (that uses `new` keyword)
+      store: function (chunkLength: number, storeOpts: any) {
+        return new CacheChunkStore(new PeertubeChunkStore(chunkLength, storeOpts), {
+          max: 100
+        })
+      }
+    }
+
+    this.torrent = this.webtorrent.add(magnetOrTorrentUrl, torrentOptions, torrent => {
+      console.log('Added ' + magnetOrTorrentUrl + '.')
+
+      if (oldTorrent) {
+        // Pause the old torrent
+        this.stopTorrent(oldTorrent)
+
+        // We use a fake renderer so we download correct pieces of the next file
+        if (options.delay) this.renderFileInFakeElement(torrent.files[0], options.delay)
+      }
+
+      // Render the video in a few seconds? (on resolution change for example, we wait some seconds of the new video resolution)
+      this.addTorrentDelay = setTimeout(() => {
+        // We don't need the fake renderer anymore
+        this.destroyFakeRenderer()
+
+        const paused = this.player.paused()
+
+        this.flushVideoFile(previousVideoFile)
+
+        // Update progress bar (just for the UI), do not wait rendering
+        if (options.seek) this.player.currentTime(options.seek)
+
+        const renderVideoOptions = { autoplay: false, controls: true }
+        renderVideo(torrent.files[0], this.playerElement, renderVideoOptions, (err, renderer) => {
+          this.renderer = renderer
+
+          if (err) return this.fallbackToHttp(options, done)
+
+          return this.tryToPlay(err => {
+            if (err) return done(err)
+
+            if (options.seek) this.seek(options.seek)
+            if (options.forcePlay === false && paused === true) this.player.pause()
+
+            return done()
+          })
+        })
+      }, options.delay || 0)
+    })
+
+    this.torrent.on('error', (err: any) => console.error(err))
+
+    this.torrent.on('warning', (err: any) => {
+      // We don't support HTTP tracker but we don't care -> we use the web socket tracker
+      if (err.message.indexOf('Unsupported tracker protocol') !== -1) return
+
+      // Users don't care about issues with WebRTC, but developers do so log it in the console
+      if (err.message.indexOf('Ice connection failed') !== -1) {
+        console.log(err)
+        return
+      }
+
+      // Magnet hash is not up to date with the torrent file, add directly the torrent file
+      if (err.message.indexOf('incorrect info hash') !== -1) {
+        console.error('Incorrect info hash detected, falling back to torrent file.')
+        const newOptions = { forcePlay: true, seek: options.seek }
+        return this.addTorrent(this.torrent['xs'], previousVideoFile, newOptions, done)
+      }
+
+      // Remote instance is down
+      if (err.message.indexOf('from xs param') !== -1) {
+        this.handleError(err)
+      }
+
+      console.warn(err)
+    })
+  }
+
+  private tryToPlay (done?: (err?: Error) => void) {
+    if (!done) done = function () { /* empty */ }
+
+    const playPromise = this.player.play()
+    if (playPromise !== undefined) {
+      return playPromise.then(() => done())
+                        .catch((err: Error) => {
+                          if (err.message.includes('The play() request was interrupted by a call to pause()')) {
+                            return
+                          }
+
+                          console.error(err)
+                          this.player.pause()
+                          this.player.posterImage.show()
+                          this.player.removeClass('vjs-has-autoplay')
+                          this.player.removeClass('vjs-has-big-play-button-clicked')
+                          this.player.removeClass('vjs-playing-audio-only-content')
+
+                          return done()
+                        })
+    }
+
+    return done()
+  }
+
+  private seek (time: number) {
+    this.player.currentTime(time)
+    this.player.handleTechSeeked_()
+  }
+
+  private getAppropriateFile (averageDownloadSpeed?: number): VideoFile {
+    if (this.videoFiles === undefined) return undefined
+    if (this.videoFiles.length === 1) return this.videoFiles[0]
+
+    const files = this.videoFiles.filter(f => f.resolution.id !== 0)
+    if (files.length === 0) return undefined
+
+    // Don't change the torrent if the player ended
+    if (this.torrent && this.torrent.progress === 1 && this.player.ended()) return this.currentVideoFile
+
+    if (!averageDownloadSpeed) averageDownloadSpeed = this.getAndSaveActualDownloadSpeed()
+
+    // Limit resolution according to player height
+    const playerHeight = this.playerElement.offsetHeight
+
+    // We take the first resolution just above the player height
+    // Example: player height is 530px, we want the 720p file instead of 480p
+    let maxResolution = files[0].resolution.id
+    for (let i = files.length - 1; i >= 0; i--) {
+      const resolutionId = files[i].resolution.id
+      if (resolutionId !== 0 && resolutionId >= playerHeight) {
+        maxResolution = resolutionId
+        break
+      }
+    }
+
+    // Filter videos we can play according to our screen resolution and bandwidth
+    const filteredFiles = files.filter(f => f.resolution.id <= maxResolution)
+                               .filter(f => {
+                                 const fileBitrate = (f.size / this.videoDuration)
+                                 let threshold = fileBitrate
+
+                                 // If this is for a higher resolution or an initial load: add a margin
+                                 if (!this.currentVideoFile || f.resolution.id > this.currentVideoFile.resolution.id) {
+                                   threshold += ((fileBitrate * this.CONSTANTS.AUTO_QUALITY_THRESHOLD_PERCENT) / 100)
+                                 }
+
+                                 return averageDownloadSpeed > threshold
+                               })
+
+    // If the download speed is too bad, return the lowest resolution we have
+    if (filteredFiles.length === 0) return videoFileMinByResolution(files)
+
+    return videoFileMaxByResolution(filteredFiles)
+  }
+
+  private getAndSaveActualDownloadSpeed () {
+    const start = Math.max(this.downloadSpeeds.length - this.CONSTANTS.BANDWIDTH_AVERAGE_NUMBER_OF_VALUES, 0)
+    const lastDownloadSpeeds = this.downloadSpeeds.slice(start, this.downloadSpeeds.length)
+    if (lastDownloadSpeeds.length === 0) return -1
+
+    const sum = lastDownloadSpeeds.reduce((a, b) => a + b)
+    const averageBandwidth = Math.round(sum / lastDownloadSpeeds.length)
+
+    // Save the average bandwidth for future use
+    saveAverageBandwidth(averageBandwidth)
+
+    return averageBandwidth
+  }
+
+  private initializePlayer () {
+    this.buildQualities()
+
+    if (this.autoplay) {
+      this.player.posterImage.hide()
+
+      return this.updateVideoFile(undefined, { forcePlay: true, seek: this.startTime })
+    }
+
+    // Proxy first 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
+
+      this.updateVideoFile(undefined, { forcePlay: true, seek: this.startTime })
+    }
+  }
+
+  private runAutoQualityScheduler () {
+    this.autoQualityInterval = setInterval(() => {
+
+      // Not initialized or in HTTP fallback
+      if (this.torrent === undefined || this.torrent === null) return
+      if (this.autoResolution === false) return
+      if (this.isAutoResolutionObservation === true) return
+
+      const file = this.getAppropriateFile()
+      let changeResolution = false
+      let changeResolutionDelay = 0
+
+      // Lower resolution
+      if (this.isPlayerWaiting() && file.resolution.id < this.currentVideoFile.resolution.id) {
+        console.log('Downgrading automatically the resolution to: %s', file.resolution.label)
+        changeResolution = true
+      } else if (file.resolution.id > this.currentVideoFile.resolution.id) { // Higher resolution
+        console.log('Upgrading automatically the resolution to: %s', file.resolution.label)
+        changeResolution = true
+        changeResolutionDelay = this.CONSTANTS.AUTO_QUALITY_HIGHER_RESOLUTION_DELAY
+      }
+
+      if (changeResolution === true) {
+        this.updateEngineResolution(file.resolution.id, changeResolutionDelay)
+
+        // Wait some seconds in observation of our new resolution
+        this.isAutoResolutionObservation = true
+
+        this.qualityObservationTimer = setTimeout(() => {
+          this.isAutoResolutionObservation = false
+        }, this.CONSTANTS.AUTO_QUALITY_OBSERVATION_TIME)
+      }
+    }, this.CONSTANTS.AUTO_QUALITY_SCHEDULER)
+  }
+
+  private isPlayerWaiting () {
+    return this.player?.hasClass('vjs-waiting')
+  }
+
+  private runTorrentInfoScheduler () {
+    this.torrentInfoInterval = setInterval(() => {
+      // Not initialized yet
+      if (this.torrent === undefined) return
+
+      // Http fallback
+      if (this.torrent === null) return this.player.trigger('p2pInfo', false)
+
+      // this.webtorrent.downloadSpeed because we need to take into account the potential old torrent too
+      if (this.webtorrent.downloadSpeed !== 0) this.downloadSpeeds.push(this.webtorrent.downloadSpeed)
+
+      return this.player.trigger('p2pInfo', {
+        source: 'webtorrent',
+        http: {
+          downloadSpeed: 0,
+          uploadSpeed: 0,
+          downloaded: 0,
+          uploaded: 0
+        },
+        p2p: {
+          downloadSpeed: this.torrent.downloadSpeed,
+          numPeers: this.torrent.numPeers,
+          uploadSpeed: this.torrent.uploadSpeed,
+          downloaded: this.torrent.downloaded,
+          uploaded: this.torrent.uploaded
+        },
+        bandwidthEstimate: this.webtorrent.downloadSpeed
+      } as PlayerNetworkInfo)
+    }, this.CONSTANTS.INFO_SCHEDULER)
+  }
+
+  private fallbackToHttp (options: PlayOptions, done?: (err?: Error) => void) {
+    const paused = this.player.paused()
+
+    this.disableAutoResolution()
+
+    this.flushVideoFile(this.currentVideoFile, true)
+    this.torrent = null
+
+    // Enable error display now this is our last fallback
+    this.player.one('error', () => this.player.peertube().displayFatalError())
+
+    const httpUrl = this.currentVideoFile.fileUrl
+    this.player.src = this.savePlayerSrcFunction
+    this.player.src(httpUrl)
+
+    this.selectAppropriateResolution(true)
+
+    // We changed the source, so reinit captions
+    this.player.trigger('sourcechange')
+
+    return this.tryToPlay(err => {
+      if (err && done) return done(err)
+
+      if (options.seek) this.seek(options.seek)
+      if (options.forcePlay === false && paused === true) this.player.pause()
+
+      if (done) return done()
+    })
+  }
+
+  private handleError (err: Error | string) {
+    return this.player.trigger('customError', { err })
+  }
+
+  private pickAverageVideoFile () {
+    if (this.videoFiles.length === 1) return this.videoFiles[0]
+
+    const files = this.videoFiles.filter(f => f.resolution.id !== 0)
+    return files[Math.floor(files.length / 2)]
+  }
+
+  private stopTorrent (torrent: WebTorrent.Torrent) {
+    torrent.pause()
+    // Pause does not remove actual peers (in particular the webseed peer)
+    torrent.removePeer(torrent['ws'])
+  }
+
+  private renderFileInFakeElement (file: WebTorrent.TorrentFile, delay: number) {
+    this.destroyingFakeRenderer = false
+
+    const fakeVideoElem = document.createElement('video')
+    renderVideo(file, fakeVideoElem, { autoplay: false, controls: false }, (err, renderer) => {
+      this.fakeRenderer = renderer
+
+      // The renderer returns an error when we destroy it, so skip them
+      if (this.destroyingFakeRenderer === false && err) {
+        console.error('Cannot render new torrent in fake video element.', err)
+      }
+
+      // Load the future file at the correct time (in delay MS - 2 seconds)
+      fakeVideoElem.currentTime = this.player.currentTime() + (delay - 2000)
+    })
+  }
+
+  private destroyFakeRenderer () {
+    if (this.fakeRenderer) {
+      this.destroyingFakeRenderer = true
+
+      if (this.fakeRenderer.destroy) {
+        try {
+          this.fakeRenderer.destroy()
+        } catch (err) {
+          console.log('Cannot destroy correctly fake renderer.', err)
+        }
+      }
+      this.fakeRenderer = undefined
+    }
+  }
+
+  private buildQualities () {
+    const resolutions: PeerTubeResolution[] = this.videoFiles.map(file => ({
+      id: file.resolution.id,
+      label: this.buildQualityLabel(file),
+      height: file.resolution.id,
+      selected: false,
+      selectCallback: () => this.changeQuality(file.resolution.id)
+    }))
+
+    resolutions.push({
+      id: -1,
+      label: this.player.localize('Auto'),
+      selected: true,
+      selectCallback: () => this.changeQuality(-1)
+    })
+
+    this.player.peertubeResolutions().add(resolutions)
+  }
+
+  private buildQualityLabel (file: VideoFile) {
+    let label = file.resolution.label
+
+    if (file.fps && file.fps >= 50) {
+      label += file.fps
+    }
+
+    return label
+  }
+
+  private selectAppropriateResolution (byEngine: boolean) {
+    const resolution = this.autoResolution
+      ? -1
+      : this.getCurrentResolutionId()
+
+    const autoResolutionChosen = this.autoResolution
+      ? this.getCurrentResolutionId()
+      : undefined
+
+    this.player.peertubeResolutions().select({ id: resolution, autoResolutionChosenId: autoResolutionChosen, byEngine })
+  }
+}
+
+videojs.registerPlugin('webtorrent', WebTorrentPlugin)
+export { WebTorrentPlugin }