-
Notifications
You must be signed in to change notification settings - Fork 7.4k
/
play-toggle.js
76 lines (66 loc) · 1.56 KB
/
play-toggle.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
/**
* @file play-toggle.js
*/
import Button from '../button.js';
import Component from '../component.js';
/**
* Button to toggle between play and pause
*
* @param {Player|Object} player
* @param {Object=} options
* @extends Button
* @class PlayToggle
*/
class PlayToggle extends Button {
constructor(player, options) {
super(player, options);
this.on(player, 'play', this.handlePlay);
this.on(player, 'pause', this.handlePause);
}
/**
* Allow sub components to stack CSS class names
*
* @return {String} The constructed class name
* @method buildCSSClass
*/
buildCSSClass() {
return `vjs-play-control ${super.buildCSSClass()}`;
}
/**
* Handle click to toggle between play and pause
*
* @method handleClick
*/
handleClick() {
if (this.player_.paused()) {
this.player_.play();
} else {
this.player_.pause();
}
}
/**
* Add the vjs-playing class to the element so it can change appearance
*
* @method handlePlay
*/
handlePlay() {
this.removeClass('vjs-paused');
this.addClass('vjs-playing');
// change the button text to "Pause"
this.controlText('Pause');
}
/**
* Add the vjs-paused class to the element so it can change appearance
*
* @method handlePause
*/
handlePause() {
this.removeClass('vjs-playing');
this.addClass('vjs-paused');
// change the button text to "Play"
this.controlText('Play');
}
}
PlayToggle.prototype.controlText_ = 'Play';
Component.registerComponent('PlayToggle', PlayToggle);
export default PlayToggle;