diff --git a/src/css/components/_progress.scss b/src/css/components/_progress.scss index 485b431c9d..15888c8fdd 100644 --- a/src/css/components/_progress.scss +++ b/src/css/components/_progress.scss @@ -97,3 +97,19 @@ specific time ranges that have been buffered */ .video-js.vjs-no-flex .vjs-progress-control { width: auto; } + +.video-js .vjs-progress-control .vjs-mouse-display { + visibility: hidden; + position: absolute; + right: 0; + left: 0; + top: calc(50% - 0.15em); +} +.video-js .vjs-progress-control .vjs-mouse-display .vjs-mouse-display-bar { + visibility: hidden; +} +.video-js .vjs-progress-control .vjs-mouse-display .vjs-mouse-display-bar:after { + visibility: visible; + filter: invert(100%); + -webkit-filter: invert(100%); +} diff --git a/src/js/control-bar/progress-control/mouse-display-bar.js b/src/js/control-bar/progress-control/mouse-display-bar.js new file mode 100644 index 0000000000..e86a3b9f35 --- /dev/null +++ b/src/js/control-bar/progress-control/mouse-display-bar.js @@ -0,0 +1,43 @@ +/** + * @file mouse-display-bar.js + */ +import Component from '../../component.js'; +import * as Fn from '../../utils/fn.js'; +import formatTime from '../../utils/format-time.js'; + +/** + * aligns the mouse time display + * + * @param {Player|Object} player + * @param {Object=} options + * @extends Component + * @class MouseDisplayBar + */ +class MouseDisplayBar extends Component { + + constructor(player, options){ + super(player, options); + this.updateDataAttr(); + } + + /** + * Create the component's DOM element + * + * @return {Element} + * @method createEl + */ + createEl() { + return super.createEl('div', { + className: 'vjs-mouse-display-bar vjs-play-progress', + innerHTML: `${this.localize('Progress')}: 0%` + }); + } + + updateDataAttr(time) { + this.el_.setAttribute('data-current-time', time); + } + +} + +Component.registerComponent('MouseDisplayBar', MouseDisplayBar); +export default MouseDisplayBar; diff --git a/src/js/control-bar/progress-control/mouse-time-display.js b/src/js/control-bar/progress-control/mouse-time-display.js new file mode 100644 index 0000000000..557efc88c6 --- /dev/null +++ b/src/js/control-bar/progress-control/mouse-time-display.js @@ -0,0 +1,71 @@ +/** + * @file mouse-time-display.js + */ +import Component from '../../component.js'; +import MouseDisplayBar from './mouse-display-bar.js'; +import SeekBar from './seek-bar.js'; +import * as Fn from '../../utils/fn.js'; +import formatTime from '../../utils/format-time.js'; +import throttle from 'lodash-compat/function/throttle'; + +/** + * The Mouse Time Display component shows the time you will seek to + * when hovering over the progress bar + * + * @param {Player|Object} player + * @param {Object=} options + * @extends Component + * @class MouseTimeDisplay + */ +class MouseTimeDisplay extends SeekBar { + + constructor(player, options) { + super(player, options); + this.update(); + player.on('ready', () => { + this.on(player.controlBar.progressControl.el(), 'mousemove', throttle(Fn.bind(this, this.handleMouseMove), 50)); + }); + } + + /** + * Create the component's DOM element + * + * @return {Element} + * @method createEl + */ + createEl() { + return super.createEl('div', { + className: 'vjs-mouse-display' + }); + } + + getPercent() { + return this.newTime / this.player_.duration(); + } + + handleMouseMove(event) { + this.newTime = this.calculateDistance(event) * this.player_.duration(); + + this.update(); + } + + update() { + this.updateDataAttr(); + this.update_(); + } + + updateDataAttr() { + this.mouseDisplayBar.updateDataAttr(formatTime(this.newTime, this.player_.duration())); + } +} + +MouseTimeDisplay.prototype.options_ = { + children: { + 'mouseDisplayBar': {} + }, + 'barName': 'mouseDisplayBar' +}; +MouseTimeDisplay.prototype.handleMouseDown = MouseTimeDisplay.prototype.handleMouseMove; + +Component.registerComponent('MouseTimeDisplay', MouseTimeDisplay); +export default MouseTimeDisplay;