]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blobdiff - client/src/assets/player/peertube-videojs-plugin.ts
Fix seeking on auto resolution change
[github/Chocobozzz/PeerTube.git] / client / src / assets / player / peertube-videojs-plugin.ts
index 19490baf2b805039b7691460ffe99c67a41bf358..e4fea0991901159fdfedd3d21bfbe55782ae99ab 100644 (file)
-// Big thanks to: https://github.com/kmoskwiak/videojs-resolution-switcher
-
-import videojs, { Player } from 'video.js'
+import * as videojs from 'video.js'
 import * as WebTorrent from 'webtorrent'
-
+import { VideoFile } from '../../../../shared/models/videos/video.model'
 import { renderVideo } from './video-renderer'
-import { VideoFile } from '../../../../shared'
-
-// videojs typings don't have some method we need
-const videojsUntyped = videojs as any
-const webtorrent = new WebTorrent({ dht: false })
-
-const MenuItem = videojsUntyped.getComponent('MenuItem')
-const ResolutionMenuItem = videojsUntyped.extend(MenuItem, {
-  constructor: function (player: Player, options) {
-    options.selectable = true
-    MenuItem.call(this, player, options)
-
-    const currentResolution = this.player_.getCurrentResolution()
-    this.selected(this.options_.id === currentResolution)
-  },
-
-  handleClick: function (event) {
-    MenuItem.prototype.handleClick.call(this, event)
-    this.player_.updateResolution(this.options_.id)
-  }
-})
-MenuItem.registerComponent('ResolutionMenuItem', ResolutionMenuItem)
-
-const MenuButton = videojsUntyped.getComponent('MenuButton')
-const ResolutionMenuButton = videojsUntyped.extend(MenuButton, {
-  constructor: function (player, options) {
-    this.label = document.createElement('span')
-    options.label = 'Quality'
-
-    MenuButton.call(this, player, options)
-    this.el().setAttribute('aria-label', 'Quality')
-    this.controlText('Quality')
-
-    videojsUntyped.dom.addClass(this.label, 'vjs-resolution-button-label')
-    this.el().appendChild(this.label)
-
-    player.on('videoFileUpdate', videojs.bind(this, this.update))
-  },
-
-  createItems: function () {
-    const menuItems = []
-    for (const videoFile of this.player_.videoFiles) {
-      menuItems.push(new ResolutionMenuItem(
-        this.player_,
+import './settings-menu-button'
+import { PeertubePluginOptions, VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings'
+import {
+  getAverageBandwidth,
+  getStoredMute,
+  getStoredVolume, isMobile,
+  saveAverageBandwidth,
+  saveMuteInStore,
+  saveVolumeInStore,
+  videoFileMaxByResolution,
+  videoFileMinByResolution
+} from './utils'
+import * as CacheChunkStore from 'cache-chunk-store'
+import { PeertubeChunkStore } from './peertube-chunk-store'
+
+const webtorrent = new WebTorrent({
+  tracker: {
+    rtcConfig: {
+      iceServers: [
         {
-          id: videoFile.resolution,
-          label: videoFile.resolutionLabel,
-          src: videoFile.magnetUri,
-          selected: videoFile.resolution === this.currentSelection
-        })
-      )
+          urls: 'stun:stun.stunprotocol.org'
+        },
+        {
+          urls: 'stun:stun.framasoft.org'
+        }
+      ]
     }
-
-    return menuItems
   },
-
-  update: function () {
-    this.label.innerHTML = this.player_.getCurrentResolutionLabel()
-    return MenuButton.prototype.update.call(this)
-  },
-
-  buildCSSClass: function () {
-    return MenuButton.prototype.buildCSSClass.call(this) + ' vjs-resolution-button'
-  }
+  dht: false
 })
-MenuButton.registerComponent('ResolutionMenuButton', ResolutionMenuButton)
-
-const Button = videojsUntyped.getComponent('Button')
-const PeertubeLinkButton = videojsUntyped.extend(Button, {
-  constructor: function (player) {
-    Button.apply(this, arguments)
-    this.player = player
-  },
 
-  createEl: function () {
-    const link = document.createElement('a')
-    link.href = window.location.href.replace('embed', 'watch')
-    link.innerHTML = 'PeerTube'
-    link.title = 'Go to the video page'
-    link.className = 'vjs-peertube-link'
-    link.target = '_blank'
+const Plugin: VideoJSComponentInterface = videojsUntyped.getPlugin('plugin')
+class PeerTubePlugin extends Plugin {
+  private readonly playerElement: HTMLVideoElement
+
+  private readonly autoplay: boolean = false
+  private readonly startTime: number = 0
+  private readonly savePlayerSrcFunction: Function
+  private readonly videoFiles: VideoFile[]
+  private readonly videoViewUrl: string
+  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
+  }
 
-    return link
-  },
+  private player: any
+  private currentVideoFile: VideoFile
+  private torrent: WebTorrent.Torrent
+  private autoResolution = true
+  private isAutoResolutionObservation = false
+
+  private videoViewInterval
+  private torrentInfoInterval
+  private autoQualityInterval
+  private addTorrentDelay
+  private qualityObservationTimer
+  private runAutoQualitySchedulerTimer
+
+  private downloadSpeeds: number[] = []
+
+  constructor (player: videojs.Player, options: PeertubePluginOptions) {
+    super(player, options)
+
+    // Disable auto play on iOS
+    this.autoplay = options.autoplay && this.isIOS() === false
+
+    this.startTime = options.startTime
+    this.videoFiles = options.videoFiles
+    this.videoViewUrl = options.videoViewUrl
+    this.videoDuration = options.videoDuration
+
+    this.savePlayerSrcFunction = this.player.src
+    // 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.playerElement = options.playerElement
+
+    if (this.autoplay === true) this.player.addClass('vjs-has-autoplay')
+
+    this.player.ready(() => {
+      const volume = getStoredVolume()
+      if (volume !== undefined) this.player.volume(volume)
+      const muted = getStoredMute()
+      if (muted !== undefined) this.player.muted(muted)
+
+      this.initializePlayer()
+      this.runTorrentInfoScheduler()
+      this.runViewAdd()
+
+      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)
+      })
+    })
 
-  handleClick: function () {
-    this.player.pause()
+    this.player.on('volumechange', () => {
+      saveVolumeInStore(this.player.volume())
+      saveMuteInStore(this.player.muted())
+    })
   }
-})
-Button.registerComponent('PeerTubeLinkButton', PeertubeLinkButton)
 
-type PeertubePluginOptions = {
-  videoFiles: VideoFile[]
-  playerElement: HTMLVideoElement
-  autoplay: boolean
-  peerTubeLink: boolean
-}
-const peertubePlugin = function (options: PeertubePluginOptions) {
-  const player = this
-  let currentVideoFile: VideoFile = undefined
-  const playerElement = options.playerElement
-  player.videoFiles = options.videoFiles
+  dispose () {
+    clearTimeout(this.addTorrentDelay)
+    clearTimeout(this.qualityObservationTimer)
+    clearTimeout(this.runAutoQualitySchedulerTimer)
 
-  // 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
-  player.src = function () {
-    return true
-  }
+    clearInterval(this.videoViewInterval)
+    clearInterval(this.torrentInfoInterval)
+    clearInterval(this.autoQualityInterval)
 
-  player.getCurrentResolution = function () {
-    return currentVideoFile ? currentVideoFile.resolution : -1
+    // Don't need to destroy renderer, video player will be destroyed
+    this.flushVideoFile(this.currentVideoFile, false)
   }
 
-  player.getCurrentResolutionLabel = function () {
-    return currentVideoFile ? currentVideoFile.resolutionLabel : ''
+  getCurrentResolutionId () {
+    return this.currentVideoFile ? this.currentVideoFile.resolution.id : -1
   }
 
-  player.updateVideoFile = function (videoFile: VideoFile, done: () => void) {
-    if (done === undefined) {
-      done = () => { /* empty */ }
-    }
+  getCurrentResolutionLabel () {
+    return this.currentVideoFile ? this.currentVideoFile.resolution.label : ''
+  }
 
-    // Pick the first one
+  updateVideoFile (
+    videoFile?: VideoFile,
+    options: {
+      forcePlay?: boolean,
+      seek?: number,
+      delay?: number
+    } = {},
+    done: () => void = () => { /* empty */ }
+  ) {
+    // Automatically choose the adapted video file
     if (videoFile === undefined) {
-      videoFile = player.videoFiles[0]
+      const savedAverageBandwidth = getAverageBandwidth()
+      videoFile = savedAverageBandwidth
+        ? this.getAppropriateFile(savedAverageBandwidth)
+        : this.pickAverageVideoFile()
     }
 
     // Don't add the same video file once again
-    if (currentVideoFile !== undefined && currentVideoFile.magnetUri === videoFile.magnetUri) {
+    if (this.currentVideoFile !== undefined && this.currentVideoFile.magnetUri === videoFile.magnetUri) {
       return
     }
 
-    const previousVideoFile = currentVideoFile
-    currentVideoFile = videoFile
+    // Do not display error to user because we will have multiple fallback
+    this.disableErrorDisplay()
 
-    console.log('Adding ' + videoFile.magnetUri + '.')
-    player.torrent = webtorrent.add(videoFile.magnetUri, torrent => {
-      console.log('Added ' + videoFile.magnetUri + '.')
+    this.player.src = () => true
+    const oldPlaybackRate = this.player.playbackRate()
 
-      this.flushVideoFile(previousVideoFile)
+    const previousVideoFile = this.currentVideoFile
+    this.currentVideoFile = videoFile
 
-      const options = { autoplay: true, controls: true }
-      renderVideo(torrent.files[0], playerElement, options,(err, renderer) => {
-        if (err) return handleError(err)
+    this.addTorrent(this.currentVideoFile.magnetUri, previousVideoFile, options, () => {
+      this.player.playbackRate(oldPlaybackRate)
+      return done()
+    })
 
-        this.renderer = renderer
-        player.play()
+    this.trigger('videoFileUpdate')
+  }
 
-        return done()
+  addTorrent (
+    magnetOrTorrentUrl: string,
+    previousVideoFile: VideoFile,
+    options: {
+      forcePlay?: boolean,
+      seek?: number,
+      delay?: number
+    },
+    done: Function
+  ) {
+    console.log('Adding ' + magnetOrTorrentUrl + '.')
+
+    const oldTorrent = this.torrent
+    const torrentOptions = {
+      store: (chunkLength, storeOpts) => new CacheChunkStore(new PeertubeChunkStore(chunkLength, storeOpts), {
+        max: 100
       })
+    }
+
+    this.torrent = webtorrent.add(magnetOrTorrentUrl, torrentOptions, torrent => {
+      console.log('Added ' + magnetOrTorrentUrl + '.')
+
+      // Pause the old torrent
+      if (oldTorrent) {
+        oldTorrent.pause()
+        // Pause does not remove actual peers (in particular the webseed peer)
+        oldTorrent.removePeer(oldTorrent['ws'])
+      }
+
+      // Render the video in a few seconds? (on resolution change for example, we wait some seconds of the new video resolution)
+      this.addTorrentDelay = setTimeout(() => {
+        const paused = this.player.paused()
+
+        this.flushVideoFile(previousVideoFile)
+
+        const renderVideoOptions = { autoplay: false, controls: true }
+        renderVideo(torrent.files[0], this.playerElement, renderVideoOptions,(err, renderer) => {
+          this.renderer = renderer
+
+          if (err) return this.fallbackToHttp(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()
+          })
+        })
+      }, options.delay || 0)
     })
 
-    player.torrent.on('error', err => handleError(err))
-    player.torrent.on('warning', err => {
+    this.torrent.on('error', err => this.handleError(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: http://') !== -1) return
+      if (err.message.indexOf('Unsupported tracker protocol') !== -1) return
 
-      return handleError(err)
-    })
+      // 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.error(err)
+        return
+      }
 
-    player.trigger('videoFileUpdate')
+      // 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 options = { forcePlay: true }
+        return this.addTorrent(this.torrent['xs'], previousVideoFile, options, done)
+      }
 
-    return player
+      return this.handleError(err)
+    })
   }
 
-  player.updateResolution = function (resolution) {
+  updateResolution (resolutionId: number, delay = 0) {
     // Remember player state
-    const currentTime = player.currentTime()
-    const isPaused = player.paused()
+    const currentTime = this.player.currentTime()
+    const isPaused = this.player.paused()
+
+    // Remove poster to have black background
+    this.playerElement.poster = ''
 
     // Hide bigPlayButton
-    if (!isPaused && this.player_.options_.bigPlayButton) {
-      this.player_.bigPlayButton.hide()
+    if (!isPaused) {
+      this.player.bigPlayButton.hide()
     }
 
-    const newVideoFile = player.videoFiles.find(f => f.resolution === resolution)
-    player.updateVideoFile(newVideoFile, () => {
-      player.currentTime(currentTime)
-      player.handleTechSeeked_()
-    })
+    const newVideoFile = this.videoFiles.find(f => f.resolution.id === resolutionId)
+    const options = {
+      forcePlay: false,
+      delay,
+      seek: currentTime + (delay / 1000)
+    }
+    this.updateVideoFile(newVideoFile, options)
   }
 
-  player.flushVideoFile = function (videoFile: VideoFile, destroyRenderer = true) {
+  flushVideoFile (videoFile: VideoFile, destroyRenderer = true) {
     if (videoFile !== undefined && webtorrent.get(videoFile.magnetUri)) {
-      if (destroyRenderer === true) this.renderer.destroy()
+      if (destroyRenderer === true && this.renderer && this.renderer.destroy) this.renderer.destroy()
+
       webtorrent.remove(videoFile.magnetUri)
+      console.log('Removed ' + videoFile.magnetUri)
     }
   }
 
-  player.ready(function () {
-    const controlBar = player.controlBar
+  isAutoResolutionOn () {
+    return this.autoResolution
+  }
 
-    const menuButton = new ResolutionMenuButton(player, options)
-    const fullscreenElement = controlBar.fullscreenToggle.el()
-    controlBar.resolutionSwitcher = controlBar.el().insertBefore(menuButton.el(), fullscreenElement)
-    controlBar.resolutionSwitcher.dispose = function () {
-      this.parentNode.removeChild(this)
-    }
+  enableAutoResolution () {
+    this.autoResolution = true
+    this.trigger('autoResolutionUpdate')
+  }
+
+  disableAutoResolution () {
+    this.autoResolution = false
+    this.trigger('autoResolutionUpdate')
+  }
+
+  getCurrentVideoFile () {
+    return this.currentVideoFile
+  }
+
+  getTorrent () {
+    return this.torrent
+  }
 
-    player.dispose = function () {
-      // Don't need to destroy renderer, video player will be destroyed
-      player.flushVideoFile(currentVideoFile, false)
+  private tryToPlay (done?: Function) {
+    if (!done) done = function () { /* empty */ }
+
+    const playPromise = this.player.play()
+    if (playPromise !== undefined) {
+      return playPromise.then(done)
+                        .catch(err => {
+                          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')
+
+                          return done()
+                        })
     }
 
-    if (options.peerTubeLink === true) {
-      const peerTubeLinkButton = new PeertubeLinkButton(player)
-      controlBar.peerTubeLink = controlBar.el().insertBefore(peerTubeLinkButton.el(), fullscreenElement)
+    return done()
+  }
+
+  private seek (time: number) {
+    this.player.currentTime(time)
+    this.player.handleTechSeeked_()
+  }
+
+  private getAppropriateFile (averageDownloadSpeed?: number): VideoFile {
+    if (this.videoFiles === undefined || this.videoFiles.length === 0) return undefined
+    if (this.videoFiles.length === 1) return this.videoFiles[0]
 
-      controlBar.peerTubeLink.dispose = function () {
-        this.parentNode.removeChild(this)
+    // Don't change the torrent is the play was ended
+    if (this.torrent && this.torrent.progress === 1 && this.player.ended()) return this.currentVideoFile
+
+    if (!averageDownloadSpeed) averageDownloadSpeed = this.getAndSaveActualDownloadSpeed()
+
+    // Filter videos we can play according to our bandwidth
+    const filteredFiles = this.videoFiles.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)
       }
-    }
 
-    if (options.autoplay === true) {
-      player.updateVideoFile()
+      return averageDownloadSpeed > threshold
+    })
+
+    // If the download speed is too bad, return the lowest resolution we have
+    if (filteredFiles.length === 0) return videoFileMinByResolution(this.videoFiles)
+
+    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 () {
+    if (isMobile()) this.player.addClass('vjs-is-mobile')
+
+    this.initSmoothProgressBar()
+
+    this.alterInactivity()
+
+    if (this.autoplay === true) {
+      this.player.posterImage.hide()
+
+      this.updateVideoFile(undefined, { forcePlay: true, seek: this.startTime })
     } else {
-      player.one('play', () => {
-        // Pause, we wait the video to load before
-        player.pause()
+      // Don't try on iOS that does not support MediaSource
+      if (this.isIOS()) {
+        this.currentVideoFile = this.pickAverageVideoFile()
+        return this.fallbackToHttp(undefined, false)
+      }
 
-        player.updateVideoFile(undefined, () => player.play())
-      })
+      // Proxy first play
+      const oldPlay = this.player.play.bind(this.player)
+      this.player.play = () => {
+        this.player.addClass('vjs-has-big-play-button-clicked')
+        this.player.play = oldPlay
+
+        this.updateVideoFile(undefined, { forcePlay: true, seek: this.startTime })
+      }
     }
+  }
 
-    setInterval(() => {
-      if (player.torrent !== undefined) {
-        player.trigger('torrentInfo', {
-          downloadSpeed: player.torrent.downloadSpeed,
-          numPeers: player.torrent.numPeers,
-          uploadSpeed: player.torrent.uploadSpeed
-        })
+  private runAutoQualityScheduler () {
+    this.autoQualityInterval = setInterval(() => {
+
+      // Not initialized or in HTTP fallback
+      if (this.torrent === undefined || this.torrent === null) return
+      if (this.isAutoResolutionOn() === 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.updateResolution(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 && 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.trigger('torrentInfo', false)
+
+      // webtorrent.downloadSpeed because we need to take into account the potential old torrent too
+      if (webtorrent.downloadSpeed !== 0) this.downloadSpeeds.push(webtorrent.downloadSpeed)
+
+      return this.trigger('torrentInfo', {
+        downloadSpeed: this.torrent.downloadSpeed,
+        numPeers: this.torrent.numPeers,
+        uploadSpeed: this.torrent.uploadSpeed
+      })
+    }, this.CONSTANTS.INFO_SCHEDULER)
+  }
+
+  private runViewAdd () {
+    this.clearVideoViewInterval()
+
+    // After 30 seconds (or 3/4 of the video), add a view to the video
+    let minSecondsToView = 30
+
+    if (this.videoDuration < minSecondsToView) minSecondsToView = (this.videoDuration * 3) / 4
+
+    let secondsViewed = 0
+    this.videoViewInterval = setInterval(() => {
+      if (this.player && !this.player.paused()) {
+        secondsViewed += 1
+
+        if (secondsViewed > minSecondsToView) {
+          this.clearVideoViewInterval()
+
+          this.addViewToVideo().catch(err => console.error(err))
+        }
       }
     }, 1000)
-  })
+  }
+
+  private clearVideoViewInterval () {
+    if (this.videoViewInterval !== undefined) {
+      clearInterval(this.videoViewInterval)
+      this.videoViewInterval = undefined
+    }
+  }
+
+  private addViewToVideo () {
+    return fetch(this.videoViewUrl, { method: 'POST' })
+  }
+
+  private fallbackToHttp (done?: Function, play = true) {
+    this.flushVideoFile(this.currentVideoFile, true)
+    this.torrent = null
+
+    // Enable error display now this is our last fallback
+    this.player.one('error', () => this.enableErrorDisplay())
+
+    const httpUrl = this.currentVideoFile.fileUrl
+    this.player.src = this.savePlayerSrcFunction
+    this.player.src(httpUrl)
+    if (play) this.tryToPlay()
+
+    if (done) return done()
+  }
+
+  private handleError (err: Error | string) {
+    return this.player.trigger('customError', { err })
+  }
+
+  private enableErrorDisplay () {
+    this.player.addClass('vjs-error-display-enabled')
+  }
+
+  private disableErrorDisplay () {
+    this.player.removeClass('vjs-error-display-enabled')
+  }
+
+  private isIOS () {
+    return !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)
+  }
+
+  private alterInactivity () {
+    let saveInactivityTimeout: number
+
+    const disableInactivity = () => {
+      saveInactivityTimeout = this.player.options_.inactivityTimeout
+      this.player.options_.inactivityTimeout = 0
+    }
+    const enableInactivity = () => {
+      this.player.options_.inactivityTimeout = saveInactivityTimeout
+    }
 
-  function handleError (err: Error|string) {
-    return player.trigger('customError', { err })
+    const settingsDialog = this.player.children_.find(c => c.name_ === 'SettingsDialog')
+
+    this.player.controlBar.on('mouseenter', () => disableInactivity())
+    settingsDialog.on('mouseenter', () => disableInactivity())
+    this.player.controlBar.on('mouseleave', () => enableInactivity())
+    settingsDialog.on('mouseleave', () => enableInactivity())
+  }
+
+  private pickAverageVideoFile () {
+    if (this.videoFiles.length === 1) return this.videoFiles[0]
+
+    return this.videoFiles[Math.floor(this.videoFiles.length / 2)]
+  }
+
+  // Thanks: https://github.com/videojs/video.js/issues/4460#issuecomment-312861657
+  private initSmoothProgressBar () {
+    const SeekBar = videojsUntyped.getComponent('SeekBar')
+    SeekBar.prototype.getPercent = function getPercent () {
+      // Allows for smooth scrubbing, when player can't keep up.
+      // const time = (this.player_.scrubbing()) ?
+      //   this.player_.getCache().currentTime :
+      //   this.player_.currentTime()
+      const time = this.player_.currentTime()
+      const percent = time / this.player_.duration()
+      return percent >= 1 ? 1 : percent
+    }
+    SeekBar.prototype.handleMouseMove = function handleMouseMove (event) {
+      let newTime = this.calculateDistance(event) * this.player_.duration()
+      if (newTime === this.player_.duration()) {
+        newTime = newTime - 0.1
+      }
+      this.player_.currentTime(newTime)
+      this.update()
+    }
   }
 }
 
-videojsUntyped.registerPlugin('peertube', peertubePlugin)
+videojsUntyped.registerPlugin('peertube', PeerTubePlugin)
+export { PeerTubePlugin }