-
Notifications
You must be signed in to change notification settings - Fork 7.5k
/
Copy pathplay-toggle.js
151 lines (134 loc) · 3.62 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
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
/**
* @file play-toggle.js
*/
import Button from '../button.js';
import Component from '../component.js';
import {silencePromise} from '../utils/promise';
/** @import Player from './player' */
/**
* Button to toggle between play and pause.
*
* @extends Button
*/
class PlayToggle extends Button {
/**
* 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);
// show or hide replay icon
options.replay = options.replay === undefined || options.replay;
this.setIcon('play');
this.on(player, 'play', (e) => this.handlePlay(e));
this.on(player, 'pause', (e) => this.handlePause(e));
if (options.replay) {
this.on(player, 'ended', (e) => this.handleEnded(e));
}
}
/**
* Builds the default DOM `className`.
*
* @return {string}
* The DOM `className` for this object.
*/
buildCSSClass() {
return `vjs-play-control ${super.buildCSSClass()}`;
}
/**
* This gets called when an `PlayToggle` is "clicked". See
* {@link ClickableComponent} for more detailed information on what a click can be.
*
* @param {Event} [event]
* The `keydown`, `tap`, or `click` event that caused this function to be
* called.
*
* @listens tap
* @listens click
*/
handleClick(event) {
if (this.player_.paused()) {
silencePromise(this.player_.play());
} else {
this.player_.pause();
}
}
/**
* This gets called once after the video has ended and the user seeks so that
* we can change the replay button back to a play button.
*
* @param {Event} [event]
* The event that caused this function to run.
*
* @listens Player#seeked
*/
handleSeeked(event) {
this.removeClass('vjs-ended');
if (this.player_.paused()) {
this.handlePause(event);
} else {
this.handlePlay(event);
}
}
/**
* Add the vjs-playing class to the element so it can change appearance.
*
* @param {Event} [event]
* The event that caused this function to run.
*
* @listens Player#play
*/
handlePlay(event) {
this.removeClass('vjs-ended', 'vjs-paused');
this.addClass('vjs-playing');
// change the button text to "Pause"
this.setIcon('pause');
this.controlText('Pause');
}
/**
* Add the vjs-paused class to the element so it can change appearance.
*
* @param {Event} [event]
* The event that caused this function to run.
*
* @listens Player#pause
*/
handlePause(event) {
this.removeClass('vjs-playing');
this.addClass('vjs-paused');
// change the button text to "Play"
this.setIcon('play');
this.controlText('Play');
}
/**
* Add the vjs-ended class to the element so it can change appearance
*
* @param {Event} [event]
* The event that caused this function to run.
*
* @listens Player#ended
*/
handleEnded(event) {
this.removeClass('vjs-playing');
this.addClass('vjs-ended');
// change the button text to "Replay"
this.setIcon('replay');
this.controlText('Replay');
// on the next seek remove the replay button
this.one(this.player_, 'seeked', (e) => this.handleSeeked(e));
}
}
/**
* The text that should display over the `PlayToggle`s controls. Added for localization.
*
* @type {string}
* @protected
*/
PlayToggle.prototype.controlText_ = 'Play';
Component.registerComponent('PlayToggle', PlayToggle);
export default PlayToggle;