@gkatsev added a mouse-hover time display to the progress bar. closes #2569

CHANGELOG.md

@@ -130,6 +130,7 @@ CHANGELOG
 * @heff improved css selector strengths ([view](https://github.com/videojs/video.js/pull/2583))
 * @heff moved scss vars to be private ([view](https://github.com/videojs/video.js/pull/2584))
 * @heff added a fancy loading spinner ([view](https://github.com/videojs/video.js/pull/2582))
+* @gkatsev added a mouse-hover time display to the progress bar ([view](https://github.com/videojs/video.js/pull/2569))
 
 --------------------
 

src/css/components/_progress.scss

@@ -34,6 +34,7 @@
 }
 
 /* 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;
 
@@ -59,6 +60,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;
@@ -73,6 +81,7 @@
 }
 
 // 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;
@@ -86,6 +95,10 @@
   @include background-color-with-alpha($primary-text, 0.8);
   @include border-radius(0.3em);
 }
+.video-js .vjs-play-progress:before,
+.video-js .vjs-play-progress:after {
+  z-index: 1;
+}
 
 .video-js .vjs-load-progress {
   background: rgb(100, 100, 100) /* IE8- Fallback */;
@@ -101,3 +114,33 @@ 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;
+  z-index: 1;
+}
+.vjs-no-flex .vjs-progress-control .vjs-mouse-display {
+  z-index: 0;
+}
+.video-js .vjs-progress-control:hover .vjs-mouse-display {
+  display: block;
+}
+.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display,
+.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display:after {
+  visibility: hidden;
+  opacity: 0;
+  $trans: visibility 1.0s, opacity 1.0s;
+  @include transition($trans);
+}
+.video-js.vjs-user-inactive.vjs-no-flex .vjs-progress-control .vjs-mouse-display,
+.video-js.vjs-user-inactive.vjs-no-flex .vjs-progress-control .vjs-mouse-display:after {
+  display: none;
+}
+.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,64 @@
+/**
+ * @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(0, 0);
+
+    player.on('ready', () => {
+      this.on(player.controlBar.progressControl.el(), 'mousemove', throttle(Fn.bind(this, this.handleMouseMove), 25));
+    });
+  }
+
+  /**
+   * Create the component's DOM element
+   *
+   * @return {Element}
+   * @method createEl
+   */
+  createEl() {
+    return super.createEl('div', {
+      className: 'vjs-mouse-display'
+    });
+  }
+
+  handleMouseMove(event) {
+    let duration = this.player_.duration();
+    let newTime = this.calculateDistance(event) * duration;
+    let position = event.pageX - Dom.findElPosition(this.el().parentNode).left;
+
+    this.update(newTime, position);
+  }
+
+  update(newTime, position) {
+    let time = formatTime(newTime, this.player_.duration());
+
+    this.el().style.left = position + 'px';
+    this.el().setAttribute('data-current-time', time);
+  }
+
+  calculateDistance(event) {
+    return Dom.getPointerPosition(this.el().parentNode, event).x;
+  }
+}
+
+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
@@ -126,6 +127,7 @@ class SeekBar extends Slider {
 SeekBar.prototype.options_ = {
   children: {
     'loadProgressBar': {},
+    'mouseTimeDisplay': {},
     'playProgressBar': {}
   },
   'barName': 'playProgressBar'

src/js/slider/slider.js

@@ -149,37 +149,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;
+}