Have an internal bar in MouseTimeDisplay.

videojs · Sep 10, 2015 · 16616ff · 16616ff
1 parent 6a9ad29
commit 16616ff
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 49 deletions.
diff --git a/src/js/control-bar/progress-control/mouse-display-bar.js b/src/js/control-bar/progress-control/mouse-display-bar.js
diff --git a/src/js/control-bar/progress-control/mouse-time-display.js b/src/js/control-bar/progress-control/mouse-time-display.js
@@ -25,6 +25,11 @@ class MouseTimeDisplay extends SeekBar {
     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_
+    };
   }
 
   /**
@@ -35,7 +40,8 @@ class MouseTimeDisplay extends SeekBar {
    */
   createEl() {
     return super.createEl('div', {
-      className: 'vjs-mouse-display'
+      className: 'vjs-mouse-display',
+      innerHTML: `<div class="vjs-mouse-display-bar vjs-play-progress"></div>`
     });
   }
 
@@ -55,15 +61,14 @@ class MouseTimeDisplay extends SeekBar {
   }
 
   updateDataAttr() {
-    this.mouseDisplayBar.updateDataAttr(formatTime(this.newTime, this.player_.duration()));
+    //this.mouseDisplayBar.updateDataAttr(formatTime(this.newTime, this.player_.duration()));
+    let time = formatTime(this.newTime, this.player_.duration());
+    this.bar && this.bar.el().setAttribute('data-current-time', time);
   }
 }
 
 MouseTimeDisplay.prototype.options_ = {
-  children: {
-    'mouseDisplayBar': {}
-  },
-  'barName': 'mouseDisplayBar'
+  'barName': 'mouseTimeDisplay'
 };
 MouseTimeDisplay.prototype.handleMouseDown = MouseTimeDisplay.prototype.handleMouseMove;