fix(liveui): make edge detection less strict, add docs for option (#5661

)

Use double the seekable increment for live edge detection.
Add liveui option.

docs/guides/options.md

@@ -247,6 +247,18 @@ Learn more about [languages in Video.js][languages]
 
 > **Note**: Generally, this option is not needed and it would be better to pass your custom languages to `videojs.addLanguage()`, so they are available in all players!
 
+### `liveui`
+
+> Type: `boolean`
+> Default: `false`
+
+Allows the player to use the new live ui that includes:
+* A progress bar for seeking within the live window
+* A button that can be clicked to seek to the live edge with a circle indicating if you are at the live edge or not.
+
+Without this option the progress bar will be hidden and in its place will be text that indicates `LIVE` playback. There will be no progress control
+and you will not be able click the text to seek to the live edge. `liveui` will default to `true` in a future version!
+
 ### `nativeControlsForTouch`
 
 > Type: `boolean`

src/js/live-tracker.js

@@ -28,7 +28,7 @@ class LiveTracker extends Component {
     // that a player can be, but still be considered live.
     // we add 0.07 because the live tracking happens every 30ms
     // and we want some wiggle room for short segment live playback
-    const liveEdgeWindow = seekableIncrement + 0.07;
+    const liveEdgeWindow = (seekableIncrement * 2) + 0.07;
 
     // on Android liveCurrentTime can bee Infinity, because seekableEnd
     // can be Infinity, so we handle that case.

test/unit/live-tracker.test.js

@@ -66,6 +66,8 @@ QUnit.module('LiveTracker', () => {
   });
 
   QUnit.test('Triggers liveedgechange when we fall behind and catch up', function(assert) {
+
+    this.liveTracker.seekableIncrement_ = 6;
     this.player.trigger('timeupdate');
     this.player.currentTime = () => 0;
     this.clock.tick(20000);
@@ -107,7 +109,7 @@ QUnit.module('LiveTracker', () => {
       return 0;
     };
 
-    this.clock.tick(3000);
+    this.clock.tick(6000);
 
     assert.ok(this.liveTracker.pastSeekEnd() > 2, 'pastSeekEnd should be over 2s');
 
@@ -154,15 +156,15 @@ QUnit.module('LiveTracker', () => {
   QUnit.test('single seekable, helpers should be correct', function(assert) {
     // simple
     this.player.seekable = () => createTimeRanges(10, 50);
-    assert.strictEqual(this.liveTracker.liveWindow(), 40.03, 'liveWindow is 40s');
+    assert.strictEqual(Math.round(this.liveTracker.liveWindow()), 40, 'liveWindow is ~40s');
     assert.strictEqual(this.liveTracker.seekableStart(), 10, 'seekableStart is 10s');
     assert.strictEqual(this.liveTracker.seekableEnd(), 50, 'seekableEnd is 50s');
   });
 
   QUnit.test('multiple seekables, helpers should be correct', function(assert) {
     // multiple
     this.player.seekable = () => createTimeRanges([[0, 1], [2, 3], [4, 5]]);
-    assert.strictEqual(this.liveTracker.liveWindow(), 5.03, 'liveWindow is 5s');
+    assert.strictEqual(Math.round(this.liveTracker.liveWindow()), 5, 'liveWindow is ~5s');
     assert.strictEqual(this.liveTracker.seekableStart(), 0, 'seekableStart is 0s');
     assert.strictEqual(this.liveTracker.seekableEnd(), 5, 'seekableEnd is 5s');
   });