Update MouseTimeDisplay to be a single element.

This element is a child of seek-bar and is styled in the _progress.scss file.

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 {
@@ -99,17 +110,17 @@ specific time ranges that have been buffered */
 }
 
 .video-js .vjs-progress-control .vjs-mouse-display {
-  visibility: hidden;
+  display: none;
   position: absolute;
-  right: 0;
-  left: 0;
-  top: calc(50% - 0.15em);
+  width: 1px;
+  height: 100%;
+  background-color: $primary-bg;
+  opacity: 0.9;
 }
-.video-js .vjs-progress-control .vjs-mouse-display .vjs-mouse-display-bar {
-  visibility: hidden;
+.video-js .vjs-progress-control:hover .vjs-mouse-display {
+  display: block;
 }
-.video-js .vjs-progress-control .vjs-mouse-display .vjs-mouse-display-bar:after {
-  visibility: visible;
+.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

@@ -2,7 +2,7 @@
  * @file mouse-time-display.js
  */
 import Component from '../../component.js';
-import SeekBar from './seek-bar.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';
@@ -16,19 +16,14 @@ import throttle from 'lodash-compat/function/throttle';
  * @extends Component
  * @class MouseTimeDisplay
  */
-class MouseTimeDisplay extends SeekBar {
+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));
     });
-
-    this.bar_ = this.el().querySelector('.vjs-mouse-display-bar');
-    this.bar = {
-      el: () => this.bar_
-    };
   }
 
   /**
@@ -39,8 +34,7 @@ class MouseTimeDisplay extends SeekBar {
    */
   createEl() {
     return super.createEl('div', {
-      className: 'vjs-mouse-display',
-      innerHTML: `<div class="vjs-mouse-display-bar vjs-play-progress"></div>`
+      className: 'vjs-mouse-display'
     });
   }
 
@@ -51,24 +45,26 @@ class MouseTimeDisplay extends SeekBar {
   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();
-    super.update();
+
+    this.el().style.left = this.position + 'px';
   }
 
   updateDataAttr() {
     let time = formatTime(this.newTime, this.player_.duration());
-    this.bar && this.bar.el().setAttribute('data-current-time', time);
+    this.el().setAttribute('data-current-time', time);
   }
 }
 
-MouseTimeDisplay.prototype.options_ = {
-  'barName': 'mouseTimeDisplay'
-};
-MouseTimeDisplay.prototype.handleMouseDown = MouseTimeDisplay.prototype.handleMouseMove;
-
 Component.registerComponent('MouseTimeDisplay', MouseTimeDisplay);
 export default MouseTimeDisplay;

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

@@ -31,7 +31,6 @@ class ProgressControl extends Component {
 
 ProgressControl.prototype.options_ = {
   children: {
-    'mouseTimeDisplay': {},
     'seekBar': {}
   }
 };

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

@@ -128,7 +128,8 @@ class SeekBar extends Slider {
 SeekBar.prototype.options_ = {
   children: {
     'loadProgressBar': {},
-    'playProgressBar': {}
+    'playProgressBar': {},
+    'mouseTimeDisplay': {}
   },
   'barName': 'playProgressBar'
 };