Improve player progress bar

2 files changed, 38 insertions, 13 deletions

diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts
index 52846503d..4843e3d8a 100644
--- a/client/src/assets/player/peertube-videojs-plugin.ts
+++ b/client/src/assets/player/peertube-videojs-plugin.ts
@@ -408,6 +408,8 @@ class PeerTubePlugin extends Plugin {
   }
 
   private initializePlayer () {
+    this.initSmoothProgressBar()
+
     if (this.autoplay === true) {
       this.updateVideoFile(undefined, () => this.player.play())
     } else {
@@ -491,5 +493,27 @@ class PeerTubePlugin extends Plugin {
   private disableErrorDisplay () {
     this.player.removeClass('vjs-error-display-enabled')
   }
+
+  // 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)
diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss
index 44478226b..4ef1693b5 100644
--- a/client/src/sass/video-js-custom.scss
+++ b/client/src/sass/video-js-custom.scss
@@ -2,10 +2,15 @@
 @import '_mixins';
 
 $primary-foreground-color: #fff;
+$primary-foreground-opacity: 0.9;
+$primary-foreground-opacity-hover: 1;
 $primary-background-color: #000;
+
 $font-size: 13px;
 $control-bar-height: 34px;
 
+$slider-bg-color: lighten($primary-background-color, 33%);
+
 .video-js.vjs-peertube-skin {
   font-size: $font-size;
   color: $primary-foreground-color;
@@ -36,8 +41,6 @@ $control-bar-height: 34px;
     line-height: $control-bar-height;
   }
 
-  .vjs-mouse-display:before,
-  .vjs-play-progress:before,
   .vjs-volume-level:before {
     content: ''; /* Remove Circle From Progress Bar */
   }
@@ -96,28 +99,26 @@ $control-bar-height: 34px;
     background-color: rgba($primary-background-color, 0.5);
   }
 
-  $slider-bg-color: lighten($primary-background-color, 33%);
-
   .vjs-slider {
     background-color: rgba(255, 255, 255, .3);
     border-radius: 2px;
     height: 5px;
+
+    .vjs-slider-bar {
+      background: $primary-foreground-color;
+    }
   }
 
-  /* The slider bar color is used for the progress bar and the volume bar
-     (the first two can be removed after a fix that's coming) */
-  .vjs-volume-level,
-  .vjs-play-progress,
-  .vjs-slider-bar {
-    background: $primary-foreground-color;
+  .vjs-play-progress .vjs-time-tooltip {
+    display: none;
   }
 
   .vjs-load-progress {
     background: rgba($slider-bg-color, 0.5);
-  }
 
-  .vjs-load-progress div {
-    background: rgba($slider-bg-color, 0.75);
+    div {
+      background: rgba($slider-bg-color, 0.75);
+    }
   }
 
   .vjs-poster {