fix: enable liveui on more livestreams (#7502)

Some live streams with a 30s live window can actually fluctuate between below and above the 30s threshold we have. Instead, we should have a slightly lower default to have those streams get the liveui.

docs/guides/options.md

@@ -279,9 +279,9 @@ and you will not be able click the text to seek to the live edge. `liveui` will
 ### `liveTracker.trackingThreshold`
 
 > Type: `number`
-> Default: `30`
+> Default: `20`
 
-An option for the liveTracker component of the player that controls when the liveui should be shown. By default if a stream has less than 30s on the seekBar then we do not show the new liveui even with the liveui option set.
+An option for the liveTracker component of the player that controls when the liveui should be shown. By default if a stream has less than 20s on the seekBar then we do not show the new liveui even with the liveui option set.
 
 ### `liveTracker.liveTolerance`
 

src/js/live-tracker.js

@@ -6,7 +6,7 @@ import window from 'global/window';
 import * as Fn from './utils/fn.js';
 
 const defaults = {
-  trackingThreshold: 30,
+  trackingThreshold: 20,
   liveTolerance: 15
 };
 
@@ -28,7 +28,7 @@ class LiveTracker extends Component {
    * @param {Object} [options]
    *        The key/value store of player options.
    *
-   * @param {number} [options.trackingThreshold=30]
+   * @param {number} [options.trackingThreshold=20]
    *        Number of seconds of live window (seekableEnd - seekableStart) that
    *        media needs to have before the liveui will be shown.
    *

test/unit/seek-to-live.test.js

@@ -84,7 +84,7 @@ QUnit.test('liveui disabled live window is never shown', function(assert) {
 
   // liveui false
   this.player.options_.liveui = false;
-  this.player.seekable = () => createTimeRange(0, 29);
+  this.player.seekable = () => createTimeRange(0, 19);
   this.player.duration(Infinity);
 
   assert.equal(this.getComputedDisplay(), 'none', 'is hidden');