Don't force sliders to get evaluated on load. closes videojs#1122

Squashed commit of the following:

commit d5957da
Author: David LaPalomento <[email protected]>
Date:   Mon Mar 31 16:22:43 2014 -0400

    Peg the volume control to 1.0 on init
    Setup styles so that the volume control initially renders at full volume. This matches browser behavior where volume is available and saves Javascript from having to manually update the volume control on init. After the initial draw, the volume control is updated dynamically the same way it was before.

commit 8bc861f
Author: David LaPalomento <[email protected]>
Date:   Wed Mar 12 17:16:30 2014 -0400

    Don't force sliders to get evaluated on load
    Since the load and play progress sliders are guaranteed to start from zero, set that through CSS. Calling Slider.prototype.update forces a re-flow because element dimensions are queried and style rules changed. That reflow consistently took around 60ms on my laptop which would mean dropped frames and "jerkiness" on initialization.

CHANGELOG.md

@@ -3,7 +3,8 @@ CHANGELOG
 
 ## HEAD (Unreleased)
 * Updated the UI to support live video ([view](https://github.com/videojs/video.js/pull/1121))
-* The UI now resets after a source change [[view](https://github.com/videojs/video.js/pull/1124)]
+* The UI now resets after a source change ([view](https://github.com/videojs/video.js/pull/1124))
+* Now assuming smart CSS defaults for sliders to prevent reflow on player init ([view](https://github.com/videojs/video.js/pull/1122))
 
 --------------------
 

src/css/video-js.less

@@ -303,6 +303,8 @@ fonts to show/hide properly.
   top: 0;
   left: 0;
   height: 0.5em;
+  /* assuming volume starts at 1.0 */
+  width: 100%;
 
   background: @slider-bar-color
     url(@slider-bar-pattern)
@@ -311,6 +313,10 @@ fonts to show/hide properly.
 .vjs-default-skin .vjs-volume-bar .vjs-volume-handle {
   width: 0.5em;
   height: 0.5em;
+  /* Assumes volume starts at 1.0. If you change the size of the
+     handle relative to the volume bar, you'll need to update this value
+     too. */
+  left: 90%;
 }
 
 .vjs-default-skin .vjs-volume-handle:before {
@@ -368,6 +374,8 @@ fonts to show/hide properly.
   height: 100%;
   margin: 0;
   padding: 0;
+  /* updated by javascript during playback */
+  width: 0;
   /* Needed for IE6 *///
   left: 0;
   top: 0;

src/js/control-bar/volume-control.js

@@ -49,7 +49,6 @@ vjs.VolumeBar = vjs.Slider.extend({
     vjs.Slider.call(this, player, options);
     player.on('volumechange', vjs.bind(this, this.updateARIAAttributes));
     player.ready(vjs.bind(this, this.updateARIAAttributes));
-    setTimeout(vjs.bind(this, this.update), 0); // update when elements is in DOM
   }
 });
 

src/js/slider.js

@@ -16,8 +16,6 @@ vjs.Slider = vjs.Component.extend({
     this.bar = this.getChild(this.options_['barName']);
     this.handle = this.getChild(this.options_['handleName']);
 
-    player.on(this.playerEvent, vjs.bind(this, this.update));
-
     this.on('mousedown', this.onMouseDown);
     this.on('touchstart', this.onMouseDown);
     this.on('focus', this.onFocus);
@@ -26,10 +24,7 @@ vjs.Slider = vjs.Component.extend({
 
     this.player_.on('controlsvisible', vjs.bind(this, this.update));
 
-    // This is actually to fix the volume handle position. http://twitter.com/#!/gerritvanaaken/status/159046254519787520
-    // this.player_.one('timeupdate', vjs.bind(this, this.update));
-
-    player.ready(vjs.bind(this, this.update));
+    player.on(this.playerEvent, vjs.bind(this, this.update));
 
     this.boundEvents = {};
   }