1 : /**
2 :  * @file slider.js
3 :  */
4 : import Component from '../component.js';
5 : import * as Dom from '../utils/dom.js';
6 : import {assign} from '../utils/obj';
7 : import {IS_CHROME} from '../utils/browser.js';
8 : import clamp from '../utils/clamp.js';
9 : import keycode from 'keycode';
10 : 
11 : /**
12 :  * The base functionality for a slider. Can be vertical or horizontal.
13 :  * For instance the volume bar or the seek bar on a video is a slider.
14 :  *
15 :  * @extends Component
16 :  */
17 : class Slider extends Component {
18 : 
19 :   /**
20 :  * Create an instance of this class
21 :  *
22 :  * @param {Player} player
23 :  *        The `Player` that this class should be attached to.
24 :  *
25 :  * @param {Object} [options]
26 :  *        The key/value store of player options.
27 :  */
28 :   constructor(player, options) {
29 :     super(player, options);
30 : 
31 :     this.handleMouseDown_ = (e) => this.handleMouseDown(e);
32 :     this.handleMouseUp_ = (e) => this.handleMouseUp(e);
33 :     this.handleKeyDown_ = (e) => this.handleKeyDown(e);
34 :     this.handleClick_ = (e) => this.handleClick(e);
35 :     this.handleMouseMove_ = (e) => this.handleMouseMove(e);
36 :     this.update_ = (e) => this.update(e);
37 : 
38 :     // Set property names to bar to match with the child Slider class is looking for
39 :     this.bar = this.getChild(this.options_.barName);
40 : 
41 :     // Set a horizontal or vertical class on the slider depending on the slider type
42 :     this.vertical(!!this.options_.vertical);
43 : 
44 :     this.enable();
45 :   }
46 : 
47 :   /**
48 :    * Are controls are currently enabled for this slider or not.
49 :    *
50 :    * @return {boolean}
51 :    *         true if controls are enabled, false otherwise
52 :    */
53 :   enabled() {
54 :     return this.enabled_;
55 :   }
56 : 
57 :   /**
58 :    * Enable controls for this slider if they are disabled
59 :    */
60 :   enable() {
61 :     if (this.enabled()) {
62 :       return;
63 :     }
64 : 
65 :     this.on('mousedown', this.handleMouseDown_);
66 :     this.on('touchstart', this.handleMouseDown_);
67 :     this.on('keydown', this.handleKeyDown_);
68 :     this.on('click', this.handleClick_);
69 : 
70 :     // TODO: deprecated, controlsvisible does not seem to be fired
71 :     this.on(this.player_, 'controlsvisible', this.update);
72 : 
73 :     if (this.playerEvent) {
74 :       this.on(this.player_, this.playerEvent, this.update);
75 :     }
76 : 
77 :     this.removeClass('disabled');
78 :     this.setAttribute('tabindex', 0);
79 : 
80 :     this.enabled_ = true;
81 :   }
82 : 
83 :   /**
84 :    * Disable controls for this slider if they are enabled
85 :    */
86 :   disable() {
87 :     if (!this.enabled()) {
88 :       return;
89 :     }
90 :     const doc = this.bar.el_.ownerDocument;
91 : 
92 :     this.off('mousedown', this.handleMouseDown_);
93 :     this.off('touchstart', this.handleMouseDown_);
94 :     this.off('keydown', this.handleKeyDown_);
95 :     this.off('click', this.handleClick_);
96 :     this.off(this.player_, 'controlsvisible', this.update_);
97 :     this.off(doc, 'mousemove', this.handleMouseMove_);
98 :     this.off(doc, 'mouseup', this.handleMouseUp_);
99 :     this.off(doc, 'touchmove', this.handleMouseMove_);
100 :     this.off(doc, 'touchend', this.handleMouseUp_);
101 :     this.removeAttribute('tabindex');
102 : 
103 :     this.addClass('disabled');
104 : 
105 :     if (this.playerEvent) {
106 :       this.off(this.player_, this.playerEvent, this.update);
107 :     }
108 :     this.enabled_ = false;
109 :   }
110 : 
111 :   /**
112 :    * Create the `Slider`s DOM element.
113 :    *
114 :    * @param {string} type
115 :    *        Type of element to create.
116 :    *
117 :    * @param {Object} [props={}]
118 :    *        List of properties in Object form.
119 :    *
120 :    * @param {Object} [attributes={}]
121 :    *        list of attributes in Object form.
122 :    *
123 :    * @return {Element}
124 :    *         The element that gets created.
125 :    */
126 :   createEl(type, props = {}, attributes = {}) {
127 :     // Add the slider element class to all sub classes
128 :     props.className = props.className + ' vjs-slider';
129 :     props = assign({
130 :       tabIndex: 0
131 :     }, props);
132 : 
133 :     attributes = assign({
134 :       'role': 'slider',
135 :       'aria-valuenow': 0,
136 :       'aria-valuemin': 0,
137 :       'aria-valuemax': 100,
138 :       'tabIndex': 0
139 :     }, attributes);
140 : 
141 :     return super.createEl(type, props, attributes);
142 :   }
143 : 
144 :   /**
145 :    * Handle `mousedown` or `touchstart` events on the `Slider`.
146 :    *
147 :    * @param {EventTarget~Event} event
148 :    *        `mousedown` or `touchstart` event that triggered this function
149 :    *
150 :    * @listens mousedown
151 :    * @listens touchstart
152 :    * @fires Slider#slideractive
153 :    */
154 :   handleMouseDown(event) {
155 :     const doc = this.bar.el_.ownerDocument;
156 : 
157 :     if (event.type === 'mousedown') {
158 :       event.preventDefault();
159 :     }
160 :     // Do not call preventDefault() on touchstart in Chrome
161 :     // to avoid console warnings. Use a 'touch-action: none' style
162 :     // instead to prevent unintented scrolling.
163 :     // https://developers.google.com/web/updates/2017/01/scrolling-intervention
164 :     if (event.type === 'touchstart' && !IS_CHROME) {
165 :       event.preventDefault();
166 :     }
167 :     Dom.blockTextSelection();
168 : 
169 :     this.addClass('vjs-sliding');
170 :     /**
171 :      * Triggered when the slider is in an active state
172 :      *
173 :      * @event Slider#slideractive
174 :      * @type {EventTarget~Event}
175 :      */
176 :     this.trigger('slideractive');
177 : 
178 :     this.on(doc, 'mousemove', this.handleMouseMove_);
179 :     this.on(doc, 'mouseup', this.handleMouseUp_);
180 :     this.on(doc, 'touchmove', this.handleMouseMove_);
181 :     this.on(doc, 'touchend', this.handleMouseUp_);
182 : 
183 :     this.handleMouseMove(event, true);
184 :   }
185 : 
186 :   /**
187 :    * Handle the `mousemove`, `touchmove`, and `mousedown` events on this `Slider`.
188 :    * The `mousemove` and `touchmove` events will only only trigger this function during
189 :    * `mousedown` and `touchstart`. This is due to {@link Slider#handleMouseDown} and
190 :    * {@link Slider#handleMouseUp}.
191 :    *
192 :    * @param {EventTarget~Event} event
193 :    *        `mousedown`, `mousemove`, `touchstart`, or `touchmove` event that triggered
194 :    *        this function
195 :    * @param {boolean} mouseDown this is a flag that should be set to true if `handleMouseMove` is called directly. It allows us to skip things that should not happen if coming from mouse down but should happen on regular mouse move handler. Defaults to false.
196 :    *
197 :    * @listens mousemove
198 :    * @listens touchmove
199 :    */
200 :   handleMouseMove(event) {}
201 : 
202 :   /**
203 :    * Handle `mouseup` or `touchend` events on the `Slider`.
204 :    *
205 :    * @param {EventTarget~Event} event
206 :    *        `mouseup` or `touchend` event that triggered this function.
207 :    *
208 :    * @listens touchend
209 :    * @listens mouseup
210 :    * @fires Slider#sliderinactive
211 :    */
212 :   handleMouseUp() {
213 :     const doc = this.bar.el_.ownerDocument;
214 : 
215 :     Dom.unblockTextSelection();
216 : 
217 :     this.removeClass('vjs-sliding');
218 :     /**
219 :      * Triggered when the slider is no longer in an active state.
220 :      *
221 :      * @event Slider#sliderinactive
222 :      * @type {EventTarget~Event}
223 :      */
224 :     this.trigger('sliderinactive');
225 : 
226 :     this.off(doc, 'mousemove', this.handleMouseMove_);
227 :     this.off(doc, 'mouseup', this.handleMouseUp_);
228 :     this.off(doc, 'touchmove', this.handleMouseMove_);
229 :     this.off(doc, 'touchend', this.handleMouseUp_);
230 : 
231 :     this.update();
232 :   }
233 : 
234 :   /**
235 :    * Update the progress bar of the `Slider`.
236 :    *
237 :    * @return {number}
238 :    *          The percentage of progress the progress bar represents as a
239 :    *          number from 0 to 1.
240 :    */
241 :   update() {
242 :     // In VolumeBar init we have a setTimeout for update that pops and update
243 :     // to the end of the execution stack. The player is destroyed before then
244 :     // update will cause an error
245 :     // If there's no bar...
246 :     if (!this.el_ || !this.bar) {
247 :       return;
248 :     }
249 : 
250 :     // clamp progress between 0 and 1
251 :     // and only round to four decimal places, as we round to two below
252 :     const progress = this.getProgress();
253 : 
254 :     if (progress === this.progress_) {
255 :       return progress;
256 :     }
257 : 
258 :     this.progress_ = progress;
259 : 
260 :     this.requestNamedAnimationFrame('Slider#update', () => {
261 :       // Set the new bar width or height
262 :       const sizeKey = this.vertical() ? 'height' : 'width';
263 : 
264 :       // Convert to a percentage for css value
265 :       this.bar.el().style[sizeKey] = (progress * 100).toFixed(2) + '%';
266 :     });
267 : 
268 :     return progress;
269 :   }
270 : 
271 :   /**
272 :    * Get the percentage of the bar that should be filled
273 :    * but clamped and rounded.
274 :    *
275 :    * @return {number}
276 :    *         percentage filled that the slider is
277 :    */
278 :   getProgress() {
279 :     return Number(clamp(this.getPercent(), 0, 1).toFixed(4));
280 :   }
281 : 
282 :   /**
283 :    * Calculate distance for slider
284 :    *
285 :    * @param {EventTarget~Event} event
286 :    *        The event that caused this function to run.
287 :    *
288 :    * @return {number}
289 :    *         The current position of the Slider.
290 :    *         - position.x for vertical `Slider`s
291 :    *         - position.y for horizontal `Slider`s
292 :    */
293 :   calculateDistance(event) {
294 :     const position = Dom.getPointerPosition(this.el_, event);
295 : 
296 :     if (this.vertical()) {
297 :       return position.y;
298 :     }
299 :     return position.x;
300 :   }
301 : 
302 :   /**
303 :    * Handle a `keydown` event on the `Slider`. Watches for left, rigth, up, and down
304 :    * arrow keys. This function will only be called when the slider has focus. See
305 :    * {@link Slider#handleFocus} and {@link Slider#handleBlur}.
306 :    *
307 :    * @param {EventTarget~Event} event
308 :    *        the `keydown` event that caused this function to run.
309 :    *
310 :    * @listens keydown
311 :    */
312 :   handleKeyDown(event) {
313 : 
314 :     // Left and Down Arrows
315 :     if (keycode.isEventKey(event, 'Left') || keycode.isEventKey(event, 'Down')) {
316 :       event.preventDefault();
317 :       event.stopPropagation();
318 :       this.stepBack();
319 : 
320 :     // Up and Right Arrows
321 :     } else if (keycode.isEventKey(event, 'Right') || keycode.isEventKey(event, 'Up')) {
322 :       event.preventDefault();
323 :       event.stopPropagation();
324 :       this.stepForward();
325 :     } else {
326 : 
327 :       // Pass keydown handling up for unsupported keys
328 :       super.handleKeyDown(event);
329 :     }
330 :   }
331 : 
332 :   /**
333 :    * Listener for click events on slider, used to prevent clicks
334 :    *   from bubbling up to parent elements like button menus.
335 :    *
336 :    * @param {Object} event
337 :    *        Event that caused this object to run
338 :    */
339 :   handleClick(event) {
340 :     event.stopPropagation();
341 :     event.preventDefault();
342 :   }
343 : 
344 :   /**
345 :    * Get/set if slider is horizontal for vertical
346 :    *
347 :    * @param {boolean} [bool]
348 :    *        - true if slider is vertical,
349 :    *        - false is horizontal
350 :    *
351 :    * @return {boolean}
352 :    *         - true if slider is vertical, and getting
353 :    *         - false if the slider is horizontal, and getting
354 :    */
355 :   vertical(bool) {
356 :     if (bool === undefined) {
357 :       return this.vertical_ || false;
358 :     }
359 : 
360 :     this.vertical_ = !!bool;
361 : 
362 :     if (this.vertical_) {
363 :       this.addClass('vjs-slider-vertical');
364 :     } else {
365 :       this.addClass('vjs-slider-horizontal');
366 :     }
367 :   }
368 : }
369 : 
370 : Component.registerComponent('Slider', Slider);
371 : export default Slider;