Permalink
Browse files

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

)

Use double the seekable increment for live edge detection.
Add liveui option.
  • Loading branch information...
BrandonOCasey authored and gkatsev committed Dec 10, 2018
1 parent 98b4a1c commit dce4a2c7d48d9cd1d5507f0563ce4f825a589afd
Showing with 18 additions and 4 deletions.
  1. +12 −0 docs/guides/options.md
  2. +1 −1 src/js/live-tracker.js
  3. +5 −3 test/unit/live-tracker.test.js
@@ -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`
@@ -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.
@@ -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');
});

0 comments on commit dce4a2c

Please sign in to comment.