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

feat: playback rate button now opens the menu rather than changing the playback rate (#7779)

Browse Source 
BREAKING CHANGE: This changes the behavior of the playback rate button.
This commit is contained in:
Pat O'Neill 2022-06-02 12:07:10 -04:00
parent cc84ff4f80
commit a0fd14894c
2 changed files with 41 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/js/control-bar/playback-rate-menu/playback-rate-menu-button.js
View File

@ -92,36 +92,6 @@ class PlaybackRateMenuButton extends MenuButton {
return items;
}
/**
* Updates ARIA accessibility attributes
*/
updateARIAAttributes() {
// Current playback rate
this.el().setAttribute('aria-valuenow', this.player().playbackRate());
}
/**
* This gets called when an `PlaybackRateMenuButton` is "clicked". See
* {@link ClickableComponent} for more detailed information on what a click can be.
*
* @param {EventTarget~Event} [event]
* The `keydown`, `tap`, or `click` event that caused this function to be
* called.
*
* @listens tap
* @listens click
*/
handleClick(event) {
// select next rate option
const currentRate = this.player().playbackRate();
const rates = this.playbackRates();
const currentIndex = rates.indexOf(currentRate);
// this get the next rate and it will select first one if the last one currently selected
const newIndex = (currentIndex + 1) % rates.length;
this.player().playbackRate(rates[newIndex]);
}
/**
* On playbackrateschange, update the menu to account for the new items.
*
@ -191,7 +161,9 @@ class PlaybackRateMenuButton extends MenuButton {
}
/**
* The text that should display over the `FullscreenToggle`s controls. Added for localization.
* The text that should display over the `PlaybackRateMenuButton`s controls.
*
* Added for localization.
*
* @type {string}
* @private

67
test/unit/control-bar/playback-rate-menu/playback-rate-menu-button.test.js
View File

@ -1,13 +1,12 @@
/* eslint-env qunit */
import PlaybackRateMenuButton from '../../../../src/js/control-bar/playback-rate-menu/playback-rate-menu-button';
import TestHelpers from '../../test-helpers.js';
import * as Events from '../../../../src/js/utils/events.js';
QUnit.module('PlaybackRateMenuButton', {
beforeEach(assert) {
this.player = TestHelpers.makePlayer({
playbackRates: [1, 2, 3]
});
this.button = this.player.controlBar.playbackRateMenuButton;
},
afterEach(assert) {
this.player.dispose();
@ -20,33 +19,43 @@ QUnit.test('playback rate default value', function(assert) {
assert.strictEqual(currentRate, 1, 'Playbackrate begins with value 1"');
});
QUnit.test('clicking should move to the next available rate', function(assert) {
const playbackRateMenu = new PlaybackRateMenuButton(this.player);
const el = playbackRateMenu.menuButton_.el();
Events.trigger(el, 'click');
const currentRate = this.player.playbackRate();
assert.strictEqual(currentRate, 2, 'Playbackrate changes to value 2"');
QUnit.test('is visible when playback rates are configured and the tech supports playback rates', function(assert) {
assert.expect(1);
assert.notOk(this.button.hasClass('vjs-hidden'), 'does not have the vjs-hidden class');
});
QUnit.test('keep clicking should move to all possible rates in loop', function(assert) {
const playbackRateMenu = new PlaybackRateMenuButton(this.player);
const el = playbackRateMenu.menuButton_.el();
Events.trigger(el, 'click');
let currentRate = this.player.playbackRate();
assert.strictEqual(currentRate, 2, 'Playbackrate changes to value 2"');
Events.trigger(el, 'click');
currentRate = this.player.playbackRate();
assert.strictEqual(currentRate, 3, 'Playbackrate changes to value 3"');
Events.trigger(el, 'click');
currentRate = this.player.playbackRate();
assert.strictEqual(currentRate, 1, 'Playbackrate changes back to value 1"');
QUnit.test('is not visible if no playback rates are configured', function(assert) {
assert.expect(1);
this.player.playbackRates([]);
assert.ok(this.button.hasClass('vjs-hidden'), 'has the vjs-hidden class');
});
QUnit.test('is not visible if the tech does not support playback rates', function(assert) {
assert.expect(1);
this.player.tech_.featuresPlaybackRate = false;
// loadstart is needed to update the hidden state.
this.player.trigger('loadstart');
assert.ok(this.button.hasClass('vjs-hidden'), 'has the vjs-hidden class');
});
QUnit.test('label is updated when playback rate changes', function(assert) {
assert.expect(4);
assert.strictEqual(this.button.labelEl_.textContent, '1x', 'the default label content is "1x"');
this.player.playbackRate(2);
assert.strictEqual(this.button.labelEl_.textContent, '2x', 'the label content is now "2x"');
this.player.playbackRate(3);
assert.strictEqual(this.button.labelEl_.textContent, '3x', 'the label content is now "3x"');
this.player.playbackRate(4);
assert.strictEqual(this.button.labelEl_.textContent, '4x', 'the playback rate (and label content) can change to values that are not in the rates available in the menu');
});
QUnit.test('menu is updated when playback rates configuration changes', function(assert) {
assert.expect(2);
const getItemLabels = () => this.button.menu.children().map(item => item.label);
assert.deepEqual(getItemLabels(), ['3x', '2x', '1x'], 'the initial list of items is as expected');
this.player.playbackRates([1, 1.5, 2, 5]);
assert.deepEqual(getItemLabels(), ['5x', '2x', '1.5x', '1x'], 'the list of items was updated');
});