Mouse time display

src/css/components/_progress.scss

@@ -28,6 +28,7 @@
 .video-js .vjs-progress-control:hover .vjs-progress-holder { font-size: 1.666666666666666666em }
 
 /* Also show the current time tooltip */
+.video-js .vjs-progress-control:hover .vjs-mouse-display:after,
 .video-js .vjs-progress-control:hover .vjs-play-progress:after {
   display: block;
 
@@ -53,6 +54,13 @@
   top: 0;
 }
 
+.video-js .vjs-mouse-display {
+  @extend .vjs-icon-circle;
+
+  &:before {
+    display: none;
+  }
+}
 .video-js .vjs-play-progress {
   background-color: $primary-text;
   @extend .vjs-icon-circle;
@@ -65,10 +73,12 @@
     font-size: 0.9em;
     height: 1em;
     line-height: 1em;
+    z-index: 1;
   }
 }
 
 // Current Time "tooltip"
+.video-js .vjs-mouse-display:after,
 .video-js .vjs-play-progress:after {
   /* By default this is hidden and only shown when hovering over the progress control */
   display: none;
@@ -81,6 +91,7 @@
   padding: 0.2em 0.5em;
   @include background-color-with-alpha($primary-text, 0.8);
   @include border-radius(0.3em);
+  z-index: 1;
 }
 
 .video-js .vjs-load-progress {
@@ -97,3 +108,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 {
+  display: none;
+  position: absolute;
+  width: 1px;
+  height: 100%;
+  background-color: $primary-bg;
+  opacity: 0.9;
+}
+.video-js .vjs-progress-control:hover .vjs-mouse-display {
+  display: block;
+}
+.video-js .vjs-progress-control .vjs-mouse-display:after {
+  color: $primary-text; 
+  @include background-color-with-alpha($primary-bg, 0.8);
+}

src/js/control-bar/progress-control/mouse-time-display.js

@@ -0,0 +1,70 @@
+/**
+ * @file mouse-time-display.js
+ */
+import Component from '../../component.js';
+import * as Dom from '../../utils/dom.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 Component {
+
+  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.position = event.pageX - Dom.findElPosition(this.el().parentNode).left;
+
+    this.update();
+  }
+
+  calculateDistance(event) {
+    return Dom.getPointerPosition(this.el().parentNode, event).x;
+  }
+
+  update() {
+    this.updateDataAttr();
+
+    this.el().style.left = this.position + 'px';
+  }
+
+  updateDataAttr() {
+    let time = formatTime(this.newTime, this.player_.duration());
+    this.el().setAttribute('data-current-time', time);
+  }
+}
+
+Component.registerComponent('MouseTimeDisplay', MouseTimeDisplay);
+export default MouseTimeDisplay;

src/js/control-bar/progress-control/progress-control.js

@@ -3,6 +3,7 @@
  */
 import Component from '../../component.js';
 import SeekBar from './seek-bar.js';
+import MouseTimeDisplay from './mouse-time-display.js';
 
 /**
  * The Progress Control component contains the seek bar, load progress,

src/js/control-bar/progress-control/seek-bar.js

@@ -7,6 +7,7 @@ import LoadProgressBar from './load-progress-bar.js';
 import PlayProgressBar from './play-progress-bar.js';
 import * as Fn from '../../utils/fn.js';
 import formatTime from '../../utils/format-time.js';
+import assign from 'object.assign';
 
 /**
  * Seek Bar and holder for the progress bars
@@ -30,11 +31,12 @@ class SeekBar extends Slider {
    * @return {Element}
    * @method createEl
    */
-  createEl() {
-    return super.createEl('div', {
-      className: 'vjs-progress-holder',
+  createEl(type='div', props={}) {
+    props = assign({
       'aria-label': 'video progress bar'
-    });
+    }, props);
+    props.className = 'vjs-progress-holder' + (props.className ? ' ' + props.className : '');
+    return super.createEl(type, props);
   }
 
   /**
@@ -126,7 +128,8 @@ class SeekBar extends Slider {
 SeekBar.prototype.options_ = {
   children: {
     'loadProgressBar': {},
-    'playProgressBar': {}
+    'playProgressBar': {},
+    'mouseTimeDisplay': {}
   },
   'barName': 'playProgressBar'
 };

src/js/slider/slider.js

@@ -145,37 +145,11 @@ class Slider extends Component {
    * @method calculateDistance
    */
   calculateDistance(event){
-    let el = this.el_;
-    let box = Dom.findElPosition(el);
-    let boxW = el.offsetWidth;
-    let boxH = el.offsetHeight;
-
+    let position = Dom.getPointerPosition(this.el_, event);
     if (this.vertical()) {
-      let boxY = box.top;
-
-      let pageY;
-      if (event.changedTouches) {
-        pageY = event.changedTouches[0].pageY;
-      } else {
-        pageY = event.pageY;
-      }
-
-      // Percent that the click is through the adjusted area
-      return Math.max(0, Math.min(1, ((boxY - pageY) + boxH) / boxH));
-
-    } else {
-      let boxX = box.left;
-
-      let pageX;
-      if (event.changedTouches) {
-        pageX = event.changedTouches[0].pageX;
-      } else {
-        pageX = event.pageX;
-      }
-
-      // Percent that the click is through the adjusted area
-      return Math.max(0, Math.min(1, (pageX - boxX) / boxW));
+      return position.y;
     }
+    return position.x;
   }
 
   /**

src/js/utils/dom.js

@@ -332,3 +332,35 @@ export function findElPosition(el) {
     top: Math.round(top)
   };
 }
+
+/**
+ * Get pointer position in element
+ * Returns an object with x and y coordinates.
+ * The base on the coordinates are the bottom left of the element.
+ *
+ * @param {Element} el Element on which to get the pointer position on
+ * @param {Event} event Event object
+ * @return {Object=} position This object will have x and y coordinates corresponding to the mouse position
+ * @metho getPointerPosition
+ */
+export function getPointerPosition(el, event) {
+  let position = {};
+  let box = findElPosition(el);
+  let boxW = el.offsetWidth;
+  let boxH = el.offsetHeight;
+
+  let boxY = box.top;
+  let boxX = box.left;
+  let pageY = event.pageY
+  let pageX = event.pageX;
+
+  if (event.changedTouches) {
+    pageX = event.changedTouches[0].pageX;
+    pageY = event.changedTouches[0].pageY;
+  }
+
+  position.y = Math.max(0, Math.min(1, ((boxY - pageY) + boxH) / boxH));
+  position.x = Math.max(0, Math.min(1, (pageX - boxX) / boxW));
+
+  return position;
+}