- 1 :
/**
- 2 :
* @file volume-control.js
- 3 :
*/
- 4 :
import Component from '../../component.js';
- 5 :
import checkVolumeSupport from './check-volume-support';
- 6 :
import {isPlain} from '../../utils/obj';
- 7 :
import {throttle, bind, UPDATE_REFRESH_INTERVAL} from '../../utils/fn.js';
- 8 :
- 9 :
// Required children
- 10 :
import './volume-bar.js';
- 11 :
- 12 :
/**
- 13 :
* The component for controlling the volume level
- 14 :
*
- 15 :
* @extends Component
- 16 :
*/
- 17 :
class VolumeControl extends Component {
- 18 :
- 19 :
/**
- 20 :
* Creates 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 :
options.vertical = options.vertical || false;
- 30 :
- 31 :
// Pass the vertical option down to the VolumeBar if
- 32 :
// the VolumeBar is turned on.
- 33 :
if (typeof options.volumeBar === 'undefined' || isPlain(options.volumeBar)) {
- 34 :
options.volumeBar = options.volumeBar || {};
- 35 :
options.volumeBar.vertical = options.vertical;
- 36 :
}
- 37 :
- 38 :
super(player, options);
- 39 :
- 40 :
// hide this control if volume support is missing
- 41 :
checkVolumeSupport(this, player);
- 42 :
- 43 :
this.throttledHandleMouseMove = throttle(bind(this, this.handleMouseMove), UPDATE_REFRESH_INTERVAL);
- 44 :
this.handleMouseUpHandler_ = (e) => this.handleMouseUp(e);
- 45 :
- 46 :
this.on('mousedown', (e) => this.handleMouseDown(e));
- 47 :
this.on('touchstart', (e) => this.handleMouseDown(e));
- 48 :
this.on('mousemove', (e) => this.handleMouseMove(e));
- 49 :
- 50 :
// while the slider is active (the mouse has been pressed down and
- 51 :
// is dragging) or in focus we do not want to hide the VolumeBar
- 52 :
this.on(this.volumeBar, ['focus', 'slideractive'], () => {
- 53 :
this.volumeBar.addClass('vjs-slider-active');
- 54 :
this.addClass('vjs-slider-active');
- 55 :
this.trigger('slideractive');
- 56 :
});
- 57 :
- 58 :
this.on(this.volumeBar, ['blur', 'sliderinactive'], () => {
- 59 :
this.volumeBar.removeClass('vjs-slider-active');
- 60 :
this.removeClass('vjs-slider-active');
- 61 :
this.trigger('sliderinactive');
- 62 :
});
- 63 :
}
- 64 :
- 65 :
/**
- 66 :
* Create the `Component`'s DOM element
- 67 :
*
- 68 :
* @return {Element}
- 69 :
* The element that was created.
- 70 :
*/
- 71 :
createEl() {
- 72 :
let orientationClass = 'vjs-volume-horizontal';
- 73 :
- 74 :
if (this.options_.vertical) {
- 75 :
orientationClass = 'vjs-volume-vertical';
- 76 :
}
- 77 :
- 78 :
return super.createEl('div', {
- 79 :
className: `vjs-volume-control vjs-control ${orientationClass}`
- 80 :
});
- 81 :
}
- 82 :
- 83 :
/**
- 84 :
* Handle `mousedown` or `touchstart` events on the `VolumeControl`.
- 85 :
*
- 86 :
* @param {EventTarget~Event} event
- 87 :
* `mousedown` or `touchstart` event that triggered this function
- 88 :
*
- 89 :
* @listens mousedown
- 90 :
* @listens touchstart
- 91 :
*/
- 92 :
handleMouseDown(event) {
- 93 :
const doc = this.el_.ownerDocument;
- 94 :
- 95 :
this.on(doc, 'mousemove', this.throttledHandleMouseMove);
- 96 :
this.on(doc, 'touchmove', this.throttledHandleMouseMove);
- 97 :
this.on(doc, 'mouseup', this.handleMouseUpHandler_);
- 98 :
this.on(doc, 'touchend', this.handleMouseUpHandler_);
- 99 :
}
- 100 :
- 101 :
/**
- 102 :
* Handle `mouseup` or `touchend` events on the `VolumeControl`.
- 103 :
*
- 104 :
* @param {EventTarget~Event} event
- 105 :
* `mouseup` or `touchend` event that triggered this function.
- 106 :
*
- 107 :
* @listens touchend
- 108 :
* @listens mouseup
- 109 :
*/
- 110 :
handleMouseUp(event) {
- 111 :
const doc = this.el_.ownerDocument;
- 112 :
- 113 :
this.off(doc, 'mousemove', this.throttledHandleMouseMove);
- 114 :
this.off(doc, 'touchmove', this.throttledHandleMouseMove);
- 115 :
this.off(doc, 'mouseup', this.handleMouseUpHandler_);
- 116 :
this.off(doc, 'touchend', this.handleMouseUpHandler_);
- 117 :
}
- 118 :
- 119 :
/**
- 120 :
* Handle `mousedown` or `touchstart` events on the `VolumeControl`.
- 121 :
*
- 122 :
* @param {EventTarget~Event} event
- 123 :
* `mousedown` or `touchstart` event that triggered this function
- 124 :
*
- 125 :
* @listens mousedown
- 126 :
* @listens touchstart
- 127 :
*/
- 128 :
handleMouseMove(event) {
- 129 :
this.volumeBar.handleMouseMove(event);
- 130 :
}
- 131 :
}
- 132 :
- 133 :
/**
- 134 :
* Default options for the `VolumeControl`
- 135 :
*
- 136 :
* @type {Object}
- 137 :
* @private
- 138 :
*/
- 139 :
VolumeControl.prototype.options_ = {
- 140 :
children: [
- 141 :
'volumeBar'
- 142 :
]
- 143 :
};
- 144 :
- 145 :
Component.registerComponent('VolumeControl', VolumeControl);
- 146 :
export default VolumeControl;