web/video.js
1
0
Fork 0
mirror of https://github.com/videojs/video.js.git synced 2025-01-04 06:48:49 +02:00
Code Releases Activity

fix: add a threshold of 30s for the liveui to show (#6409)

Browse Source
This commit is contained in:
Brandon Casey 2020-03-10 15:53:17 -04:00 committed by GitHub
parent 5682f14ccd
commit 47349c8e29
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 71 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/js/live-tracker.js
View File

@ -5,12 +5,18 @@ import document from 'global/document';
import * as browser from './utils/browser.js';
import * as Fn from './utils/fn.js';
const defaults = {
// Number of seconds of live window (seekableEnd - seekableStart) that
// a video needs to have before the liveui will be shown.
trackingThreshold: 30
};
/* track when we are at the live edge, and other helpers for live playback */
class LiveTracker extends Component {
constructor(player, options) {
// LiveTracker does not need an element
const options_ = mergeOptions({createEl: false}, options);
const options_ = mergeOptions(defaults, options, {createEl: false});
super(player, options_);
@ -108,9 +114,13 @@ class LiveTracker extends Component {
* and start/stop tracking accordingly.
*/
handleDurationchange() {
if (this.player_.duration() === Infinity) {
if (this.player_.duration() === Infinity && this.liveWindow() >= this.options_.trackingThreshold) {
if (this.player_.options_.liveui) {
this.player_.addClass('vjs-liveui');
}
this.startTracking();
} else {
this.player_.removeClass('vjs-liveui');
this.stopTracking();
}
}

4
src/js/player.js
View File

@ -2465,12 +2465,8 @@ class Player extends Component {
if (seconds === Infinity) {
this.addClass('vjs-live');
if (this.options_.liveui && this.player_.liveTracker) {
this.addClass('vjs-liveui');
}
} else {
this.removeClass('vjs-live');
this.removeClass('vjs-liveui');
}
if (!isNaN(seconds)) {
// Do not fire durationchange unless the duration value is known.

60
test/unit/live-tracker.test.js
View File

@ -4,12 +4,62 @@ import {createTimeRanges} from '../../src/js/utils/time-ranges.js';
import sinon from 'sinon';
QUnit.module('LiveTracker', () => {
QUnit.module('options', {
beforeEach() {
this.clock = sinon.useFakeTimers();
},
afterEach() {
this.player.dispose();
this.clock.restore();
}
});
QUnit.test('liveui true, trackingThreshold is met', function(assert) {
this.player = TestHelpers.makePlayer({liveui: true});
this.player.seekable = () => createTimeRanges(0, 30);
this.player.duration(Infinity);
assert.ok(this.player.hasClass('vjs-liveui'), 'has vjs-liveui');
assert.ok(this.player.liveTracker.isTracking(), 'is tracking');
});
QUnit.test('liveui true, trackingThreshold is not met', function(assert) {
this.player = TestHelpers.makePlayer({liveui: true, liveTracker: {trackingThreshold: 31}});
this.player.seekable = () => createTimeRanges(0, 30);
this.player.duration(Infinity);
assert.notOk(this.player.hasClass('vjs-liveui'), 'does not have vjs-iveui');
assert.notOk(this.player.liveTracker.isTracking(), 'is not tracking');
});
QUnit.test('liveui false, trackingThreshold is met', function(assert) {
this.player = TestHelpers.makePlayer({liveui: false});
this.player.seekable = () => createTimeRanges(0, 30);
this.player.duration(Infinity);
assert.notOk(this.player.hasClass('vjs-liveui'), 'does not have vjs-liveui');
assert.ok(this.player.liveTracker.isTracking(), 'is tracking');
});
QUnit.test('liveui false, trackingThreshold is not met', function(assert) {
this.player = TestHelpers.makePlayer({liveui: false, liveTracker: {trackingThreshold: 31}});
this.player.seekable = () => createTimeRanges(0, 30);
this.player.duration(Infinity);
assert.notOk(this.player.hasClass('vjs-liveui'), 'does not have vjs-liveui');
assert.notOk(this.player.liveTracker.isTracking(), 'is not tracking');
});
QUnit.module('start/stop', {
beforeEach() {
this.clock = sinon.useFakeTimers();
this.player = TestHelpers.makePlayer({liveui: true});
this.player.seekable = () => createTimeRanges(0, 30);
this.liveTracker = this.player.liveTracker;
},
@ -46,6 +96,7 @@ QUnit.module('LiveTracker', () => {
this.player = TestHelpers.makePlayer();
this.liveTracker = this.player.liveTracker;
this.player.seekable = () => createTimeRanges(0, 30);
this.player.duration(Infinity);
this.liveEdgeChanges = 0;
@ -86,17 +137,16 @@ QUnit.module('LiveTracker', () => {
});
QUnit.test('pastSeekEnd should update when seekable changes', function(assert) {
assert.strictEqual(this.liveTracker.liveCurrentTime(), 0.03, 'liveCurrentTime is now 0.03');
this.clock.tick(2000);
assert.strictEqual(this.liveTracker.liveCurrentTime(), 30.03, 'liveCurrentTime is now 30');
this.clock.tick(2010);
assert.ok(this.liveTracker.pastSeekEnd() > 2, 'pastSeekEnd should be over 2s');
this.player.seekable = () => createTimeRanges(0, 2);
this.player.seekable = () => createTimeRanges(30, 61);
this.clock.tick(30);
assert.strictEqual(this.liveTracker.pastSeekEnd(), 0.03, 'pastSeekEnd start at 0.03 again');
assert.strictEqual(this.liveTracker.liveCurrentTime(), 2.03, 'liveCurrentTime is now 2.03');
assert.equal(this.seekableEndChanges, 1, 'should be one seek end change');
assert.strictEqual(this.liveTracker.liveCurrentTime(), 61.03, 'liveCurrentTime is now 2.03');
});
QUnit.test('seeks to live edge on seekableendchange', function(assert) {

4
test/unit/seek-to-live.test.js
View File

@ -2,6 +2,7 @@
import TestHelpers from './test-helpers.js';
import sinon from 'sinon';
import computedStyle from '../../src/js/utils/computed-style.js';
import { createTimeRange } from '../../src/js/utils/time-ranges.js';
QUnit.module('SeekToLive', () => {
QUnit.module('live with liveui', {
@ -10,6 +11,7 @@ QUnit.module('SeekToLive', () => {
this.player = TestHelpers.makePlayer({liveui: true});
this.seekToLive = this.player.controlBar.seekToLive;
this.player.seekable = () => createTimeRange(0, 45);
this.getComputedDisplay = () => {
return computedStyle(this.seekToLive.el(), 'display');
@ -50,6 +52,7 @@ QUnit.module('SeekToLive', () => {
this.player = TestHelpers.makePlayer();
this.seekToLive = this.player.controlBar.seekToLive;
this.player.seekable = () => createTimeRange(0, 45);
this.getComputedDisplay = () => {
return computedStyle(this.seekToLive.el(), 'display');
@ -89,6 +92,7 @@ QUnit.module('SeekToLive', () => {
QUnit.test('switch to live', function(assert) {
assert.equal(this.getComputedDisplay(), 'none', 'is hidden');
this.player.seekable = () => createTimeRange(0, 45);
this.player.duration(Infinity);
this.player.trigger('durationchange');