Merge pull request #417 from RavWar/controls_css_rework

Lock controls when video is paused

src/css/video-js.css

@@ -78,8 +78,9 @@ body.vjs-full-window {
 
 /* 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;
+  display: block !important;
+  visibility: visible; /* Needed to make sure things hide in older browsers too. */
+  opacity: 1;
 
   -webkit-transition: visibility 0s linear 0s, opacity 0.3s linear;
   -moz-transition: visibility 0s linear 0s, opacity 0.3s linear;
@@ -88,8 +89,9 @@ body.vjs-full-window {
   transition: visibility 0s linear 0s, opacity 0.3s linear;
 }
 .vjs-fade-out {
-  visibility: hidden !important;
-  opacity: 0 !important;
+  display: block !important;
+  visibility: hidden;
+  opacity: 0;
 
   -webkit-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
   -moz-transition: visibility 0s linear 1.5s,opacity 1.5s linear;
@@ -126,10 +128,11 @@ 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 */
 
+  display: none;
   /* Start hidden and with 0 opacity. Opacity is used to fade in modern browsers. */
   /* Can't use display block to hide initially because widths of slider handles aren't calculated and avaialbe for positioning correctly. */
-  visibility: hidden;
-  opacity: 0;
+  /*visibility: hidden;
+  opacity: 0;*/
 }
 
 /* General styles for individual controls. */

src/js/component.js

@@ -546,7 +546,7 @@ vjs.Component.prototype.lockShowing = function(){
   var style = this.el_.style;
   style.display = 'block';
   style.opacity = 1;
-  style.visiblity = 'visible';
+  style.visibility = 'visible';
   return this;
 };
 
@@ -558,7 +558,7 @@ vjs.Component.prototype.unlockShowing = function(){
   var style = this.el_.style;
   style.display = '';
   style.opacity = '';
-  style.visiblity = '';
+  style.visibility = '';
   return this;
 };
 

src/js/controls.js

@@ -38,6 +38,8 @@ vjs.ControlBar = function(player, options){
     if ( !('ontouchstart' in window) ) {
       this.player_.on('mouseover', fadeIn);
       this.player_.on('mouseout', fadeOut);
+      this.player_.on('pause', vjs.bind(this, this.lockShowing));
+      this.player_.on('play', vjs.bind(this, this.unlockShowing));
     }
 
     touchstart = false;
@@ -98,10 +100,6 @@ vjs.ControlBar.prototype.fadeOut = function(){
   this.player_.trigger('controlshidden');
 };
 
-vjs.ControlBar.prototype.lockShowing = function(){
-  this.el_.style.opacity = '1';
-};
-
 /* Button - Base class for all buttons
 ================================================================================ */
 /**
@@ -1059,12 +1057,12 @@ goog.inherits(vjs.PosterImage, vjs.Button);
 vjs.PosterImage.prototype.createEl = function(){
   var el = vjs.createEl('div', {
         className: 'vjs-poster',
-        
+
         // Don't want poster to be tabbable.
         tabIndex: -1
       }),
       poster = this.player_.poster();
-  
+
   if (poster) {
     if ('backgroundSize' in el.style) {
       el.style.backgroundImage = 'url("' + poster + '")';
@@ -1072,7 +1070,7 @@ vjs.PosterImage.prototype.createEl = function(){
       el.appendChild(vjs.createEl('img', { src: poster }));
     }
   }
-  
+
   return el;
 };