Improve player progress bar

1 files changed, 24 insertions, 0 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)