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
|
/**
* @file mouse-volume-level-display.js
*/
import Component from '../../component.js';
import * as Fn from '../../utils/fn.js';
/** @import Player from '../../player' */
import './volume-level-tooltip';
/**
* The {@link MouseVolumeLevelDisplay} component tracks mouse movement over the
* {@link VolumeControl}. It displays an indicator and a {@link VolumeLevelTooltip}
* indicating the volume level which is represented by a given point in the
* {@link VolumeBar}.
*
* @extends Component
*/
class MouseVolumeLevelDisplay extends Component {
/**
* Creates an instance of this class.
*
* @param {Player} player
* The {@link Player} that this class should be attached to.
*
* @param {Object} [options]
* The key/value store of player options.
*/
constructor(player, options) {
super(player, options);
this.update = Fn.throttle(Fn.bind_(this, this.update), Fn.UPDATE_REFRESH_INTERVAL);
}
/**
* Create the DOM element for this class.
*
* @return {Element}
* The element that was created.
*/
createEl() {
return super.createEl('div', {
className: 'vjs-mouse-display'
});
}
/**
* Enquires updates to its own DOM as well as the DOM of its
* {@link VolumeLevelTooltip} child.
*
* @param {Object} rangeBarRect
* The `ClientRect` for the {@link VolumeBar} element.
*
* @param {number} rangeBarPoint
* A number from 0 to 1, representing a horizontal/vertical reference point
* from the left edge of the {@link VolumeBar}
*
* @param {boolean} vertical
* Referees to the Volume control position
* in the control bar{@link VolumeControl}
*
*/
update(rangeBarRect, rangeBarPoint, vertical) {
const volume = 100 * rangeBarPoint;
this.getChild('volumeLevelTooltip').updateVolume(rangeBarRect, rangeBarPoint, vertical, volume, () => {
if (vertical) {
this.el_.style.bottom = `${rangeBarRect.height * rangeBarPoint}px`;
} else {
this.el_.style.left = `${rangeBarRect.width * rangeBarPoint}px`;
}
});
}
}
/**
* Default options for `MouseVolumeLevelDisplay`
*
* @type {Object}
* @private
*/
MouseVolumeLevelDisplay.prototype.options_ = {
children: [
'volumeLevelTooltip'
]
};
Component.registerComponent('MouseVolumeLevelDisplay', MouseVolumeLevelDisplay);
export default MouseVolumeLevelDisplay;
|
