mirror of
https://github.com/videojs/video.js.git
synced 2024-12-23 02:04:34 +02:00
1afe5049e6
## Description Adds a `TransientButton` component for the types of button that are shown on top of the video briefly during playback and reappear when there is user activity. e.g. Unmute buttons, skip intro. It aims is to be a generic button type to be extended. Some basic styles are provided but kept light to not complicate customisation. It's important to insert a transient button before the control bar for the tab order to make sense. _Optionally_ takes focus when shown. ## Specific Changes proposed Adds `TransientButton` component. ## Requirements Checklist - [x] Feature implemented / Bug fixed - [ ] If necessary, more likely in a feature request than a bug fix - [x] Change has been verified in an actual browser (Chrome, Firefox, IE) - [x] Unit Tests updated or fixed - [ ] Docs/guides updated - [x] Example: https://deploy-preview-8629--videojs-preview.netlify.app/sandbox/transient-button.html - [x] Has no DOM changes which impact accessiblilty or trigger warnings (e.g. Chrome issues tab) - [x] Has no changes to JSDoc which cause `npm run docs:api` to error - [ ] Reviewed by Two Core Contributors
90 lines
3.0 KiB
JavaScript
90 lines
3.0 KiB
JavaScript
/* eslint-env qunit */
|
|
import TransientButton from '../../src/js/transient-button.js';
|
|
import TestHelpers from './test-helpers.js';
|
|
import sinon from 'sinon';
|
|
|
|
QUnit.module('TransientButton');
|
|
|
|
QUnit.test('show and hide should add and remove force-display class', function(assert) {
|
|
const player = TestHelpers.makePlayer();
|
|
|
|
const testButton = new TransientButton(player, {});
|
|
|
|
player.addChild(testButton);
|
|
|
|
assert.false(testButton.hasClass('force-display'), 'button is initially hidden');
|
|
|
|
testButton.show();
|
|
assert.true(testButton.hasClass('force-display'), 'button has force-display after show()');
|
|
|
|
testButton.hide();
|
|
assert.false(testButton.hasClass('force-display'), 'button no longer has force-display after hide()');
|
|
|
|
player.dispose();
|
|
});
|
|
|
|
QUnit.test('show and hide should add and remove force-display class', function(assert) {
|
|
this.clock = sinon.useFakeTimers();
|
|
|
|
const player = TestHelpers.makePlayer();
|
|
|
|
const testButton = new TransientButton(player, {});
|
|
|
|
player.hasStarted(true);
|
|
player.userActive(false);
|
|
|
|
player.addChild(testButton);
|
|
|
|
assert.false(testButton.hasClass('force-display'), 'button is initially hidden');
|
|
|
|
testButton.show();
|
|
assert.true(testButton.hasClass('force-display'), 'button has force-display after show()');
|
|
|
|
this.clock.tick(2000);
|
|
assert.true(testButton.hasClass('force-display'), 'button still has force-display until timeout');
|
|
|
|
this.clock.tick(2500);
|
|
assert.false(testButton.hasClass('force-display'), 'button no longer has force-display until timeout');
|
|
|
|
player.dispose();
|
|
|
|
this.clock.restore();
|
|
});
|
|
|
|
QUnit.test('applies posiiton classes', function(assert) {
|
|
const player = TestHelpers.makePlayer();
|
|
const testButton1 = new TransientButton(player, { position: ['top', 'left']});
|
|
const testButton2 = new TransientButton(player, { position: ['bottom', 'right']});
|
|
const testButton3 = new TransientButton(player, {});
|
|
|
|
assert.ok(testButton1.hasClass('vjs-top'), 'position top yields vjs-top class');
|
|
assert.ok(testButton1.hasClass('vjs-left'), 'position left yields vjs-left class');
|
|
assert.ok(testButton2.hasClass('vjs-bottom'), 'position bottom yields vjs-bottom class');
|
|
assert.ok(testButton2.hasClass('vjs-right'), 'position right yields vjs-right class');
|
|
['vjs-top', 'vjs-neartop', 'vjs-bottom', 'vjs-left', 'vjs-right'].forEach(positionClass => {
|
|
assert.false(testButton3.hasClass(positionClass), `with no options should be no ${positionClass} class`);
|
|
});
|
|
|
|
player.dispose();
|
|
});
|
|
|
|
QUnit.test('takes focus only when specified', function(assert) {
|
|
|
|
const player = TestHelpers.makePlayer();
|
|
const testButton1 = new TransientButton(player, {});
|
|
const testButton2 = new TransientButton(player, {takeFocus: true});
|
|
|
|
const spy1 = sinon.spy(testButton1.el_, 'focus');
|
|
const spy2 = sinon.spy(testButton2.el_, 'focus');
|
|
|
|
player.addChild(testButton1);
|
|
testButton1.show();
|
|
assert.false(spy1.called, 'by default a button should not take focus');
|
|
|
|
player.addChild(testButton2);
|
|
testButton2.show();
|
|
assert.true(spy2.called, 'when enabled button should take focus');
|
|
|
|
player.dispose();
|
|
});
|