-
Notifications
You must be signed in to change notification settings - Fork 7.5k
/
Copy pathplayback-rate-menu-button.js
176 lines (149 loc) · 3.99 KB
/
playback-rate-menu-button.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
/**
* @file playback-rate-menu-button.js
*/
import MenuButton from '../../menu/menu-button.js';
import PlaybackRateMenuItem from './playback-rate-menu-item.js';
import Component from '../../component.js';
import * as Dom from '../../utils/dom.js';
/** @import Player from '../../player' */
/**
* The component for controlling the playback rate.
*
* @extends MenuButton
*/
class PlaybackRateMenuButton extends MenuButton {
/**
* Creates an instance of this class.
*
* @param {Player} player
* The `Player` that this class should be attached to.
*
* @param {Object} [options]
* The key/value store of player options.
*/
constructor(player, options) {
super(player, options);
this.menuButton_.el_.setAttribute('aria-describedby', this.labelElId_);
this.updateVisibility();
this.updateLabel();
this.on(player, 'loadstart', (e) => this.updateVisibility(e));
this.on(player, 'ratechange', (e) => this.updateLabel(e));
this.on(player, 'playbackrateschange', (e) => this.handlePlaybackRateschange(e));
}
/**
* Create the `Component`'s DOM element
*
* @return {Element}
* The element that was created.
*/
createEl() {
const el = super.createEl();
this.labelElId_ = 'vjs-playback-rate-value-label-' + this.id_;
this.labelEl_ = Dom.createEl('div', {
className: 'vjs-playback-rate-value',
id: this.labelElId_,
textContent: '1x'
});
el.appendChild(this.labelEl_);
return el;
}
dispose() {
this.labelEl_ = null;
super.dispose();
}
/**
* Builds the default DOM `className`.
*
* @return {string}
* The DOM `className` for this object.
*/
buildCSSClass() {
return `vjs-playback-rate ${super.buildCSSClass()}`;
}
buildWrapperCSSClass() {
return `vjs-playback-rate ${super.buildWrapperCSSClass()}`;
}
/**
* Create the list of menu items. Specific to each subclass.
*
*/
createItems() {
const rates = this.playbackRates();
const items = [];
for (let i = rates.length - 1; i >= 0; i--) {
items.push(new PlaybackRateMenuItem(this.player(), {rate: rates[i] + 'x'}));
}
return items;
}
/**
* On playbackrateschange, update the menu to account for the new items.
*
* @listens Player#playbackrateschange
*/
handlePlaybackRateschange(event) {
this.update();
}
/**
* Get possible playback rates
*
* @return {Array}
* All possible playback rates
*/
playbackRates() {
const player = this.player();
return (player.playbackRates && player.playbackRates()) || [];
}
/**
* Get whether playback rates is supported by the tech
* and an array of playback rates exists
*
* @return {boolean}
* Whether changing playback rate is supported
*/
playbackRateSupported() {
return this.player().tech_ &&
this.player().tech_.featuresPlaybackRate &&
this.playbackRates() &&
this.playbackRates().length > 0
;
}
/**
* Hide playback rate controls when they're no playback rate options to select
*
* @param {Event} [event]
* The event that caused this function to run.
*
* @listens Player#loadstart
*/
updateVisibility(event) {
if (this.playbackRateSupported()) {
this.removeClass('vjs-hidden');
} else {
this.addClass('vjs-hidden');
}
}
/**
* Update button label when rate changed
*
* @param {Event} [event]
* The event that caused this function to run.
*
* @listens Player#ratechange
*/
updateLabel(event) {
if (this.playbackRateSupported()) {
this.labelEl_.textContent = this.player().playbackRate() + 'x';
}
}
}
/**
* The text that should display over the `PlaybackRateMenuButton`s controls.
*
* Added for localization.
*
* @type {string}
* @protected
*/
PlaybackRateMenuButton.prototype.controlText_ = 'Playback Rate';
Component.registerComponent('PlaybackRateMenuButton', PlaybackRateMenuButton);
export default PlaybackRateMenuButton;