1 files changed, 33 insertions, 0 deletions

diff --git a/client/src/assets/player/control-bar/peertube-load-progress-bar.ts b/client/src/assets/player/control-bar/peertube-load-progress-bar.ts
new file mode 100644
index 000000000..623e70eb2
--- /dev/null
+++ b/client/src/assets/player/control-bar/peertube-load-progress-bar.ts
@@ -0,0 +1,33 @@
+import videojs from 'video.js'
+
+const Component = videojs.getComponent('Component')
+
+class PeerTubeLoadProgressBar extends Component {
+
+  constructor (player: videojs.Player, options?: videojs.ComponentOptions) {
+    super(player, options)
+
+    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 () {
+    const torrent = this.player().webtorrent().getTorrent()
+    if (!torrent) return
+
+    (this.el() as HTMLElement).style.width = (torrent.progress * 100) + '%'
+  }
+
+}
+
+Component.registerComponent('PeerTubeLoadProgressBar', PeerTubeLoadProgressBar)