client/src/assets/player/videojs-components/peertube-load-progress-bar.ts

   1 import videojs, { VideoJsPlayer } from 'video.js'
   2
   3 const Component = videojs.getComponent('Component')
   4
   5 class PeerTubeLoadProgressBar extends Component {
   6
   7   constructor (player: VideoJsPlayer, options?: videojs.ComponentOptions) {
   8     super(player, options)
   9
  10     this.on(player, 'progress', this.update)
  11   }
  12
  13   createEl () {
  14     return super.createEl('div', {
  15       className: 'vjs-load-progress',
  16       innerHTML: `<span class="vjs-control-text"><span>${this.localize('Loaded')}</span>: 0%</span>`
  17     })
  18   }
  19
  20   dispose () {
  21     super.dispose()
  22   }
  23
  24   update () {
  25     const torrent = this.player().webtorrent().getTorrent()
  26     if (!torrent) return
  27
  28     // FIXME: typings
  29     (this.el() as HTMLElement).style.width = (torrent.progress * 100) + '%'
  30   }
  31
  32 }
  33
  34 Component.registerComponent('PeerTubeLoadProgressBar', PeerTubeLoadProgressBar)