-
Notifications
You must be signed in to change notification settings - Fork 7.5k
/
Copy pathdescriptions-button.js
105 lines (90 loc) · 2.52 KB
/
descriptions-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
/**
* @file descriptions-button.js
*/
import TextTrackButton from './text-track-button.js';
import Component from '../../component.js';
import * as Fn from '../../utils/fn.js';
/** @import Player from '../../player' */
/**
* The button component for toggling and selecting descriptions
*
* @extends TextTrackButton
*/
class DescriptionsButton extends TextTrackButton {
/**
* 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.
*
* @param {Function} [ready]
* The function to call when this component is ready.
*/
constructor(player, options, ready) {
super(player, options, ready);
this.setIcon('audio-description');
const tracks = player.textTracks();
const changeHandler = Fn.bind_(this, this.handleTracksChange);
tracks.addEventListener('change', changeHandler);
this.on('dispose', function() {
tracks.removeEventListener('change', changeHandler);
});
}
/**
* Handle text track change
*
* @param {Event} event
* The event that caused this function to run
*
* @listens TextTrackList#change
*/
handleTracksChange(event) {
const tracks = this.player().textTracks();
let disabled = false;
// Check whether a track of a different kind is showing
for (let i = 0, l = tracks.length; i < l; i++) {
const track = tracks[i];
if (track.kind !== this.kind_ && track.mode === 'showing') {
disabled = true;
break;
}
}
// If another track is showing, disable this menu button
if (disabled) {
this.disable();
} else {
this.enable();
}
}
/**
* Builds the default DOM `className`.
*
* @return {string}
* The DOM `className` for this object.
*/
buildCSSClass() {
return `vjs-descriptions-button ${super.buildCSSClass()}`;
}
buildWrapperCSSClass() {
return `vjs-descriptions-button ${super.buildWrapperCSSClass()}`;
}
}
/**
* `kind` of TextTrack to look for to associate it with this menu.
*
* @type {string}
* @private
*/
DescriptionsButton.prototype.kind_ = 'descriptions';
/**
* The text that should display over the `DescriptionsButton`s controls. Added for localization.
*
* @type {string}
* @protected
*/
DescriptionsButton.prototype.controlText_ = 'Descriptions';
Component.registerComponent('DescriptionsButton', DescriptionsButton);
export default DescriptionsButton;