- 1 :
/**
- 2 :
* @file mouse-time-display.js
- 3 :
*/
- 4 :
import Component from '../../component.js';
- 5 :
import * as Fn from '../../utils/fn.js';
- 6 :
- 7 :
import './time-tooltip';
- 8 :
- 9 :
/**
- 10 :
* The {@link MouseTimeDisplay} component tracks mouse movement over the
- 11 :
* {@link ProgressControl}. It displays an indicator and a {@link TimeTooltip}
- 12 :
* indicating the time which is represented by a given point in the
- 13 :
* {@link ProgressControl}.
- 14 :
*
- 15 :
* @extends Component
- 16 :
*/
- 17 :
class MouseTimeDisplay extends Component {
- 18 :
- 19 :
/**
- 20 :
* Creates an instance of this class.
- 21 :
*
- 22 :
* @param {Player} player
- 23 :
* The {@link 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 :
this.update = Fn.throttle(Fn.bind(this, this.update), Fn.UPDATE_REFRESH_INTERVAL);
- 31 :
}
- 32 :
- 33 :
/**
- 34 :
* Create the DOM element for this class.
- 35 :
*
- 36 :
* @return {Element}
- 37 :
* The element that was created.
- 38 :
*/
- 39 :
createEl() {
- 40 :
return super.createEl('div', {
- 41 :
className: 'vjs-mouse-display'
- 42 :
});
- 43 :
}
- 44 :
- 45 :
/**
- 46 :
* Enqueues updates to its own DOM as well as the DOM of its
- 47 :
* {@link TimeTooltip} child.
- 48 :
*
- 49 :
* @param {Object} seekBarRect
- 50 :
* The `ClientRect` for the {@link SeekBar} element.
- 51 :
*
- 52 :
* @param {number} seekBarPoint
- 53 :
* A number from 0 to 1, representing a horizontal reference point
- 54 :
* from the left edge of the {@link SeekBar}
- 55 :
*/
- 56 :
update(seekBarRect, seekBarPoint) {
- 57 :
const time = seekBarPoint * this.player_.duration();
- 58 :
- 59 :
this.getChild('timeTooltip').updateTime(seekBarRect, seekBarPoint, time, () => {
- 60 :
this.el_.style.left = `${seekBarRect.width * seekBarPoint}px`;
- 61 :
});
- 62 :
}
- 63 :
}
- 64 :
- 65 :
/**
- 66 :
* Default options for `MouseTimeDisplay`
- 67 :
*
- 68 :
* @type {Object}
- 69 :
* @private
- 70 :
*/
- 71 :
MouseTimeDisplay.prototype.options_ = {
- 72 :
children: [
- 73 :
'timeTooltip'
- 74 :
]
- 75 :
};
- 76 :
- 77 :
Component.registerComponent('MouseTimeDisplay', MouseTimeDisplay);
- 78 :
export default MouseTimeDisplay;