fix: seekbar liveui keybinds, only user seeks should ignore liveThres…

…hold
videojs · Apr 27, 2021 · b345cee · b345cee
1 parent 1708ddd
commit b345cee
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 20 deletions.
diff --git a/src/js/control-bar/progress-control/seek-bar.js b/src/js/control-bar/progress-control/seek-bar.js
@@ -186,6 +186,14 @@ class SeekBar extends Slider {
     return percent;
   }
 
+  userSeek_(ct) {
+    if (this.player_.liveTracker && this.player_.liveTracker.isLive()) {
+      this.player_.liveTracker.nextSeekedFromUser();
+    }
+
+    this.player_.currentTime(ct);
+  }
+
   /**
    * Get the value of current time but allows for smooth scrubbing,
    * when player can't keep up.
@@ -302,14 +310,8 @@ class SeekBar extends Slider {
       }
     }
 
-    // tell live tracker that the current seek can be
-    // behind live.
-    if (liveTracker) {
-      liveTracker.userSeek_(true);
-    }
-
     // Set new time (tell player to seek to new time)
-    this.player_.currentTime(newTime);
+    this.userSeek_(newTime);
   }
 
   enable() {
@@ -372,14 +374,14 @@ class SeekBar extends Slider {
    * Move more quickly fast forward for keyboard-only users
    */
   stepForward() {
-    this.player_.currentTime(this.player_.currentTime() + STEP_SECONDS);
+    this.userSeek_(this.player_.currentTime() + STEP_SECONDS);
   }
 
   /**
    * Move more quickly rewind for keyboard-only users
    */
   stepBack() {
-    this.player_.currentTime(this.player_.currentTime() - STEP_SECONDS);
+    this.userSeek_(this.player_.currentTime() - STEP_SECONDS);
   }
 
   /**
@@ -415,32 +417,42 @@ class SeekBar extends Slider {
    * @listens keydown
    */
   handleKeyDown(event) {
+    const liveTracker = this.player_.liveTracker;
+
     if (keycode.isEventKey(event, 'Space') || keycode.isEventKey(event, 'Enter')) {
       event.preventDefault();
       event.stopPropagation();
       this.handleAction(event);
     } else if (keycode.isEventKey(event, 'Home')) {
       event.preventDefault();
       event.stopPropagation();
-      this.player_.currentTime(0);
+      this.userSeek_(0);
     } else if (keycode.isEventKey(event, 'End')) {
       event.preventDefault();
       event.stopPropagation();
-      this.player_.currentTime(this.player_.duration());
+      if (liveTracker && liveTracker.isLive()) {
+        this.userSeek_(liveTracker.liveCurrentTime());
+      } else {
+        this.userSeek_(this.player_.duration());
+      }
     } else if (/^[0-9]$/.test(keycode(event))) {
       event.preventDefault();
       event.stopPropagation();
       const gotoFraction = (keycode.codes[keycode(event)] - keycode.codes['0']) * 10.0 / 100.0;
 
-      this.player_.currentTime(this.player_.duration() * gotoFraction);
+      if (liveTracker && liveTracker.isLive()) {
+        this.userSeek_(liveTracker.seekableStart() + (liveTracker.liveWindow() * gotoFraction));
+      } else {
+        this.userSeek_(this.player_.duration() * gotoFraction);
+      }
     } else if (keycode.isEventKey(event, 'PgDn')) {
       event.preventDefault();
       event.stopPropagation();
-      this.player_.currentTime(this.player_.currentTime() - (STEP_SECONDS * PAGE_KEY_MULTIPLIER));
+      this.userSeek_(this.player_.currentTime() - (STEP_SECONDS * PAGE_KEY_MULTIPLIER));
     } else if (keycode.isEventKey(event, 'PgUp')) {
       event.preventDefault();
       event.stopPropagation();
-      this.player_.currentTime(this.player_.currentTime() + (STEP_SECONDS * PAGE_KEY_MULTIPLIER));
+      this.userSeek_(this.player_.currentTime() + (STEP_SECONDS * PAGE_KEY_MULTIPLIER));
     } else {
       // Pass keydown handling up for unsupported keys
       super.handleKeyDown(event);

diff --git a/src/js/live-tracker.js b/src/js/live-tracker.js
@@ -191,8 +191,8 @@ class LiveTracker extends Component {
   handleSeeked() {
     const timeDiff = Math.abs(this.liveCurrentTime() - this.player_.currentTime());
 
-    this.seekedBehindLive_ = this.userSeek__ && timeDiff > 2;
-    this.userSeek__ = false;
+    this.seekedBehindLive_ = this.nextSeekedFromUser_ && timeDiff > 2;
+    this.nextSeekedFromUser_ = false;
     this.trackLive_();
   }
 
@@ -215,7 +215,7 @@ class LiveTracker extends Component {
     this.behindLiveEdge_ = true;
     this.timeupdateSeen_ = false;
     this.seekedBehindLive_ = false;
-    this.userSeek__ = false;
+    this.nextSeekedFromUser_ = false;
 
     this.clearInterval(this.trackingInterval_);
     this.trackingInterval_ = null;
@@ -227,8 +227,13 @@ class LiveTracker extends Component {
     this.off(this.player_, 'timeupdate', this.seekToLiveEdge_);
   }
 
-  userSeek_(v) {
-    this.userSeek__ = v;
+  /**
+   * The next seeked event is from the user. Meaning that any seek
+   * > 2s behind live will be considered behind live for real and
+   * liveTolerance will be ignored.
+   */
+  nextSeekedFromUser() {
+    this.nextSeekedFromUser_ = true;
   }
 
   /**
@@ -375,7 +380,8 @@ class LiveTracker extends Component {
    * Seek to the live edge if we are behind the live edge
    */
   seekToLiveEdge() {
-    this.userSeek__ = false;
+    this.seekedBehindLive_ = false;
+    this.nextSeekedFromUser_ = false;
     if (this.atLiveEdge()) {
       return;
     }