Fixed issue with volume knob positioning.

Using visiblity for for hiding in IE6.
Updated controls fading.

design/video-js.css

@@ -48,10 +48,31 @@ body.vjs-full-window {
   position: relative; width: 100%; max-height: 100%; 
 }
 
-
 /* Subtiles Styles */
 .video-js .vjs-subtitles { color: #fff; font-size: 20px; text-align: center; position: absolute; bottom: 40px; left: 0; right: 0; }
 
+/* Fading sytles, used to fade control bar. */
+.vjs-fade-in {
+  visibility: visible !important; /* Needed to make sure things hide in older browsers too. */
+  opacity: 1 !important;
+  
+  -webkit-transition: visibility 0s linear 0s, opacity 0.3s linear;
+  -moz-transition: visibility 0s linear 0s, opacity 0.3s linear;
+  -ms-transition: visibility 0s linear 0s, opacity 0.3s linear;
+  -o-transition: visibility 0s linear 0s, opacity 0.3s linear;
+  transition: visibility 0s linear 0s, opacity 0.3s linear;
+}
+.vjs-fade-out {
+  visibility: hidden !important;
+  opacity: 0 !important;
+
+  -webkit-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
+  -moz-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
+  -ms-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
+  -o-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
+  transition: visibility 0s linear 1.5s,opacity 1.5s linear;
+}
+
 /* DEFAULT SKIN (override in another file to create new skins)
 ================================================================================
 Instead of editing this file, I recommend creating your own skin CSS file to be included after this file,
@@ -62,8 +83,6 @@ so you can upgrade to newer versions easier. You can remove all these styles by
   position: absolute;
   bottom: 0; /* Distance from the bottom of the box/video. Keep 0. Use height to add more bottom margin. */
   left: 0; right: 0; /* 100% width of div */
-  opacity: 0.85; 
-/*  display: none; /* Start hidden */
   margin: 0; padding: 0; /* Controls are absolutely position, so no padding necessary */
   height: 2.6em; /* Including any margin you want above or below control items */
   color: #fff; border-top: 1px solid #404040;
@@ -80,12 +99,10 @@ so you can upgrade to newer versions easier. You can remove all these styles by
   /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#242424', endColorstr='#171717',GradientType=0 );*/ /* IE6-9 */
   background: linear-gradient(top, #242424 50%,#1f1f1f 50%,#171717 100%); /* W3C */
 
-  /* Fade-in using CSS Transitions */
+  /* Start hidden and with 0 opacity. Opacity is used to fade in modern browsers. */
-  -webkit-transition: opacity 0.3s linear;
+  /* Can't use display block to hide initially because widths of slider handles aren't calculated and avaialbe for positioning correctly. */
-  -moz-transition: opacity 0.3s linear;
+  visibility: hidden;
-  -o-transition: opacity 0.3s linear;
+  opacity: 0;
-  -ms-transition: opacity 0.3s linear;
-  transition: opacity 0.3s linear;
 }
 
 /* General styles for individual controls. */

src/component.js

@@ -76,7 +76,17 @@ _V_.Component = _V_.Class.extend({
     if (options && options.components) {
       // Loop through components and add them to the player
       this.eachProp(options.components, function(name, opts){
-        this.addComponent(name, opts);
+
+        // Allow waiting to add components until a specific event is called
+        var tempAdd = this.proxy(function(){
+          this.addComponent(name, opts);
+        });
+
+        if (opts.loadEvent) {
+          this.one(opts.loadEvent, tempAdd)
+        } else {
+          tempAdd();
+        }
       });
     }
   },
@@ -97,8 +107,6 @@ _V_.Component = _V_.Class.extend({
     // If there's no .player, this is a player
     component = new _V_[componentClass](this.player || this, options);
 
-    _V_.log(component)
-
     // Add the UI object's element to the container div (box)
     this.el.appendChild(component.el);
 
@@ -115,6 +123,16 @@ _V_.Component = _V_.Class.extend({
   hide: function(){
     this.el.style.display = "none";
   },
+  
+  fadeIn: function(){
+    this.removeClass("vjs-fade-out");
+    this.addClass("vjs-fade-in");
+  },
+
+  fadeOut: function(){
+    this.removeClass("vjs-fade-in");
+    this.addClass("vjs-fade-out");
+  },
 
   addClass: function(classToAdd){
     _V_.addClass(this.el, classToAdd);

src/controls.js

@@ -241,10 +241,11 @@ _V_.ControlBar = _V_.Component.extend({
   init: function(player, options){
     this._super(player, options);
 
-    player.addEvent("play", this.proxy(this.show));
+    player.addEvent("play", this.proxy(function(){
-
+      this.fadeIn();
-    player.addEvent("mouseover", this.proxy(this.reveal));
+      this.player.addEvent("mouseover", this.proxy(this.fadeIn));
-    player.addEvent("mouseout", this.proxy(this.conceal));
+      this.player.addEvent("mouseout", this.proxy(this.fadeOut));
+    }));
   },
 
   createElement: function(){
@@ -253,21 +254,14 @@ _V_.ControlBar = _V_.Component.extend({
     });
   },
 
-  // Used for transitions (fading out)
+  fadeIn: function(){
-  reveal: function(){
+    this._super();
-    this.el.style.opacity = 1;
+    this.player.triggerEvent("controlsvisible");
-
-    // IE doesn't support opacity, so use display instead
-    if ( !('opacity' in document.body.style) ) {
-      this.show();
-    }
   },
 
-  conceal: function(){
+  fadeOut: function(){
-    this.el.style.opacity = 0;
+    this._super();
-    if ( !('opacity' in document.body.style) ) {
+    this.player.triggerEvent("controlshidden");
-      this.hide();
-    }
   }
 });
 
@@ -388,6 +382,11 @@ _V_.Slider = _V_.Component.extend({
     this.addEvent("focus", this.onFocus);
     this.addEvent("blur", this.onBlur);
 
+    this.player.addEvent("controlsvisible", this.proxy(this.update));
+
+    // This is actually to fix the volume handle position. http://twitter.com/#!/gerritvanaaken/status/159046254519787520
+    // this.player.one("timeupdate", this.proxy(this.update));
+
     this.update();
   },
 
@@ -461,10 +460,6 @@ _V_.Slider = _V_.Component.extend({
 
       // Move the handle from the left based on the adjected progress
       handle.el.style.left = _V_.round(adjustedProgress * 100, 2) + "%";
-
-      handle.el.style.left = _V_.round(adjustedProgress * 100, 2) + "%";
-
-      _V_.log(boxWidth, handleWidth, getComputedStyle(handle.el).width)
     }
 
     // Set the new bar width