Fix player progress bar

4 files changed, 82 insertions, 34 deletions

diff --git a/client/src/assets/player/peertube-load-progress-bar.ts b/client/src/assets/player/peertube-load-progress-bar.ts
new file mode 100644
index 000000000..cc861c451
--- /dev/null
+++ b/client/src/assets/player/peertube-load-progress-bar.ts
@@ -0,0 +1,36 @@
+import * as Bitfield from 'bitfield'
+import { VideoJSComponentInterface, videojsUntyped } from './peertube-videojs-typings'
+
+const Component: VideoJSComponentInterface = videojsUntyped.getComponent('Component')
+
+class PeerTubeLoadProgressBar extends Component {
+
+  constructor (player, options) {
+    super(player, options)
+    this.partEls_ = []
+    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 () {
+    this.partEls_ = null
+
+    super.dispose()
+  }
+
+  update () {
+    const torrent = this.player().peertube().getTorrent()
+    if (!torrent) return
+
+    this.el_.style.width = (torrent.progress * 100) + '%'
+  }
+
+}
+
+Component.registerComponent('PeerTubeLoadProgressBar', PeerTubeLoadProgressBar)
diff --git a/client/src/assets/player/peertube-player.ts b/client/src/assets/player/peertube-player.ts
index 9fe5af569..d204b9703 100644
--- a/client/src/assets/player/peertube-player.ts
+++ b/client/src/assets/player/peertube-player.ts
@@ -9,6 +9,7 @@ import './resolution-menu-button'
 import './settings-menu-button'
 import './webtorrent-info-button'
 import './peertube-videojs-plugin'
+import './peertube-load-progress-bar'
 import { videojsUntyped } from './peertube-videojs-typings'
 import { buildVideoEmbed, buildVideoLink, copyToClipboard } from './utils'
 
@@ -94,7 +95,16 @@ function getControlBarChildren (options: {
     'liveDisplay': {},
 
     'flexibleWidthSpacer': {},
-    'progressControl': {},
+    'progressControl': {
+      children: {
+        'seekBar': {
+          children: {
+            'peerTubeLoadProgressBar': {},
+            'playProgressBar': {}
+          }
+        }
+      }
+    },
 
     'webTorrentButton': {},
 
diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts
index 65103f3ab..79df42a53 100644
--- a/client/src/assets/player/peertube-videojs-plugin.ts
+++ b/client/src/assets/player/peertube-videojs-plugin.ts
@@ -272,6 +272,10 @@ class PeerTubePlugin extends Plugin {
     return this.currentVideoFile
   }
 
+  getTorrent () {
+    return this.torrent
+  }
+
   private tryToPlay (done?: Function) {
     if (!done) done = function () { /* empty */ }
 
diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss
index 350e7cdd5..64805a3a1 100644
--- a/client/src/sass/video-js-custom.scss
+++ b/client/src/sass/video-js-custom.scss
@@ -130,39 +130,6 @@ $context-menu-width: 350px;
     background-color: rgba($primary-background-color, 0.5);
   }
 
-  .vjs-slider {
-    background-color: rgba(255, 255, 255, .3);
-    border-radius: 2px;
-    height: 5px;
-
-    .vjs-slider-bar {
-      background: $primary-foreground-color;
-    }
-  }
-
-  .vjs-play-progress {
-
-    &::before {
-      top: -0.3em;
-
-      &:hover {
-        top: -0.372em;
-      }
-    }
-
-    .vjs-time-tooltip {
-      display: none;
-    }
-  }
-
-  .vjs-load-progress {
-    background: rgba($slider-bg-color, 0.5);
-
-    div {
-      background: rgba($slider-bg-color, 0.75);
-    }
-  }
-
   .vjs-poster {
     outline: none; /* Remove Blue Outline on Click*/
     outline: 0;
@@ -197,6 +164,37 @@ $context-menu-width: 350px;
       opacity: $primary-foreground-opacity;
     }
 
+    .vjs-slider {
+      background-color: rgba(255, 255, 255, .2);
+      border-radius: 2px;
+      height: 5px;
+
+      .vjs-slider-bar {
+        background: $primary-foreground-color;
+      }
+    }
+
+    .vjs-play-progress {
+
+      &::before {
+        top: -0.3em;
+
+        &:hover {
+          top: -0.372em;
+        }
+      }
+
+      .vjs-time-tooltip {
+        display: none;
+      }
+    }
+
+    .vjs-load-progress {
+      &, & div {
+        background: rgba(255, 255, 255, .2);
+      }
+    }
+
     .vjs-progress-control {
       bottom: 34px;
       width: 100%;