2020-01-28 17:29:50 +01:00
|
|
|
import videojs, { VideoJsPlayer } from 'video.js'
|
2018-05-31 09:51:51 +02:00
|
|
|
|
2020-01-28 17:29:50 +01:00
|
|
|
const Component = videojs.getComponent('Component')
|
2018-05-31 09:51:51 +02:00
|
|
|
|
|
|
|
class PeerTubeLoadProgressBar extends Component {
|
|
|
|
|
2020-01-28 17:29:50 +01:00
|
|
|
constructor (player: VideoJsPlayer, options?: videojs.ComponentOptions) {
|
2018-05-31 09:51:51 +02:00
|
|
|
super(player, options)
|
2020-01-28 17:29:50 +01:00
|
|
|
|
2018-05-31 09:51:51 +02:00
|
|
|
this.on(player, 'progress', this.update)
|
|
|
|
}
|
|
|
|
|
|
|
|
createEl () {
|
|
|
|
return super.createEl('div', {
|
|
|
|
className: 'vjs-load-progress',
|
|
|
|
innerHTML: `<span class="vjs-control-text"><span>${this.localize('Loaded')}</span>: 0%</span>`
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
dispose () {
|
|
|
|
super.dispose()
|
|
|
|
}
|
|
|
|
|
|
|
|
update () {
|
2019-01-23 15:36:45 +01:00
|
|
|
const torrent = this.player().webtorrent().getTorrent()
|
2018-05-31 09:51:51 +02:00
|
|
|
if (!torrent) return
|
|
|
|
|
2020-01-28 17:29:50 +01:00
|
|
|
// FIXME: typings
|
|
|
|
(this.el() as HTMLElement).style.width = (torrent.progress * 100) + '%'
|
2018-05-31 09:51:51 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
Component.registerComponent('PeerTubeLoadProgressBar', PeerTubeLoadProgressBar)
|