* volume control / skin fixes to support both horz and vert volume control

diff --git a/js2/mwEmbed/libEmbedVideo/embedVideo.js b/js2/mwEmbed/libEmbedVideo/embedVideo.js
index 828ebe4..0dc7273 100644 (file)
--- a/js2/mwEmbed/libEmbedVideo/embedVideo.js
+++ b/js2/mwEmbed/libEmbedVideo/embedVideo.js
@@ -1410,6 +1410,8 @@ embedVideo.prototype = {
                $j( '#mv_embedded_player_' + this.id ).html( this.getThumbnailHTML() );
                this.paused = true;             
                this.thumbnail_disp = true;
+               //make sure the ctrlBuilder remain active: 
+               this.ctrlBuilder.addControlHooks(this); 
        },
        refreshControlsHTML:function(){
                js_log('refreshControlsHTML::');
@@ -2004,17 +2006,15 @@ embedVideo.prototype = {
                        this.update_interval = null;
                }
        },
-       toggleMute:function(){
+       toggleMute:function(){  
                var eid = (this.pc!=null)?this.pc.pp.id:this.id;        
-               if(this.muted){
-                       this.muted=false;
-                       $j('#volume_control_'+eid + ' span').removeClass('ui-icon-volume-off').addClass('ui-icon-volume-on');
-                       $j('#volume_bar_'+eid).slider('value', 100); 
+               if( this.muted ){
+                       this.muted=false;                       
+                       $j('#' + eid + ' .volume-slider').slider('value', 100);
                        this.updateVolumen(1);
                }else{
-                       this.muted=true;
-                       $j('#volume_control_'+eid + ' span').removeClass('ui-icon-volume-on').addClass('ui-icon-volume-off');
-                       $j('#volume_bar_'+eid).slider('value', 0);
+                       this.muted=true;                        
+                       $j('#' + eid + ' .volume-slider').slider('value', 0);
                        this.updateVolumen(0); 
                }
                js_log('f:toggleMute::' + this.muted);          
@@ -2054,7 +2054,7 @@ embedVideo.prototype = {
        //do common monitor code like update the playhead and play status 
        //plugin objects are responsible for updating currentTime
        monitor:function(){              
-               js_log(' ct: ' + this.currentTime + ' dur: ' + ( parseInt( this.duration ) + 1 )  + ' is seek: ' + this.seeking );
+               //js_log(' ct: ' + this.currentTime + ' dur: ' + ( parseInt( this.duration ) + 1 )  + ' is seek: ' + this.seeking );
                if( this.currentTime && this.currentTime > 0 && this.duration){
                        if( !this.userSlide && !this.seeking ){
                                if( this.start_offset  ){ 

diff --git a/js2/mwEmbed/skins/ctrlBuilder.js b/js2/mwEmbed/skins/ctrlBuilder.js
index 499c8f4..0e8c33c 100644 (file)
--- a/js2/mwEmbed/skins/ctrlBuilder.js
+++ b/js2/mwEmbed/skins/ctrlBuilder.js
@@ -252,34 +252,39 @@ ctrlBuilder.prototype = {
        doVolumeBinding:function(){
                var embedObj = this.embedObj;
                var _this = this;
-               var $tp=$j('#' + embedObj.id);
-               //default volume binding:
-               var hoverOverDelay=false;
+               var $tp=$j('#' + embedObj.id);          
                $tp.find('.volume_control').unbind().btnBind().click(function(){
+                       js_log('clicked volume control');
                        $j('#' +embedObj.id).get(0).toggleMute();
-               }).hover(
-                       function(){
-                               $j('#vol_container_' + embedObj.id).addClass('vol_container_top');
-                               //set to "below" if playing and embedType != native
-                               if(embedObj && embedObj.isPlaying && embedObj.isPlaying() && !embedObj.supports['overlays']){
-                                       $j('#vol_container_' + embedObj.id).removeClass('vol_container_top').addClass('vol_container_below');
+               });
+               //add vertical volume display hover
+               if( this.volume_layout == 'vertical'){
+                       //default volume binding:
+                       var hoverOverDelay = false;
+                       var $tpvol = $tp.find('.vol_container');
+                       $tp.find('.volume_control').hover(
+                               function(){                                             
+                                       $tpvol.addClass('vol_container_top');                                   
+                                       //set to "below" if playing and embedType != native
+                                       if(embedObj && embedObj.isPlaying && embedObj.isPlaying() && !embedObj.supports['overlays']){
+                                               $tpvol.removeClass('vol_container_top').addClass('vol_container_below');
+                                       }       
+                                       $tpvol.fadeIn('fast');
+                                       hoverOverDelay = true;
+                               },
+                               function(){
+                                       hoverOverDelay= false;
+                                       setTimeout(function doHideVolume(){
+                                               if(!hoverOverDelay){
+                                                       $tpvol.fadeOut('fast');
+                                               }
+                                       }, 500);
                                }
-
-                               $j('#vol_container_' + embedObj.id).fadeIn('fast');
-                               hoverOverDelay = true;
-                       },
-                       function(){
-                               hoverOverDelay= false;
-                               setTimeout(function doHideVolume(){
-                                       if(!hoverOverDelay){
-                                               $j('#vol_container_' + embedObj.id).fadeOut('fast');
-                                       }
-                               }, 500);
-                       }
-               );
-               //Volumen Slider
-               $j('#volume_bar_'+embedObj.id).slider({
-                       orientation: "vertical",
+                       );
+               }
+               
+               //setup slider:
+               var sliderConf = {
                        range: "min",
                        value: 80,
                        min: 0,
@@ -291,20 +296,20 @@ ctrlBuilder.prototype = {
                        },
                        change:function(event, ui){
                                var perc = ui.value/100;
-                               if (perc==0) {
-                                       $j('#' + embedObj.id + ' .volume_control span').removeClass('ui-icon-volume-on').addClass('ui-icon-volume-off');
+                               if ( perc==0 ) {
+                                       $tp.find('.volume_control span').removeClass('ui-icon-volume-on').addClass('ui-icon-volume-off');
                                }else{
-                                       $j('#' + embedObj.id + ' .volume_control span').removeClass('ui-icon-volume-off').addClass('ui-icon-volume-on');
-                               }
-                               //only run the onChange event if done by a user slide:
-                               if(embedObj.userSlide){
-                                       embedObj.userSlide=false;
-                                       embedObj.seeking=true;
-                                       var perc = ui.value/100;
-                                       embedObj.updateVolumen(perc);
+                                       $tp.find('.volume_control span').removeClass('ui-icon-volume-off').addClass('ui-icon-volume-on');
                                }
+                               var perc = ui.value/100;
+                               embedObj.updateVolumen(perc);
                        }
-               });
+               }
+               
+               if( this.volume_layout == 'vertical')
+                       sliderConf['orientation'] = "vertical";
+               
+               $tp.find( '.volume-slider' ).slider( sliderConf );      
        },
        getMvBufferHtml:function(){
                return '<div class="ui-slider-range ui-slider-range-min ui-widget-header ' +
@@ -413,8 +418,8 @@ ctrlBuilder.prototype = {
                                                '<span class="ui-icon ui-icon-volume-on"></span>';
                                                
                                if( ctrlObj.volume_layout == 'vertical'){
-                                       o+='<div style="position:absolute;display:none;" id="vol_container_'+ctrlObj.id+'" class="vol_container ui-corner-all">' +
-                                                       '<div class="volume_bar" id="volume_bar_' + ctrlObj.id + '"></div>' +
+                                       o+='<div style="position:absolute;display:none;" class="vol_container ui-corner-all">' +
+                                                       '<div class="volume-slider" ></div>' +
                                                '</div>';
                                }
                                o+= '</div>';                                                                           

diff --git a/js2/mwEmbed/skins/kskin/kskin.js b/js2/mwEmbed/skins/kskin/kskin.js
index 0f0a582..e6ebe53 100644 (file)
--- a/js2/mwEmbed/skins/kskin/kskin.js
+++ b/js2/mwEmbed/skins/kskin/kskin.js
@@ -110,33 +110,7 @@ var kskinConfig = {
                                });
                                $tp.find('.play-btn-large').fadeOut('fast');
                        }
-               });     
-               
-               //slider:
-               $tp.find('.volume-slider').slider({
-                       range: "min",
-                       value: 80,
-                       min: 0,
-                       max: 100,
-            slide: function(event, ui) {
-                     embedObj.updateVolumen(ui.value/100);
-            },
-                       change: function(event, ui){
-                               var level = ui.value/100;
-                               if (level==0) {
-                                       $tp.find('.k-volume span').addClass('ui-icon-volume-off');
-                               }else{
-                                       $tp.find('.k-volume span').removeClass('ui-icon-volume-off');
-                               }
-                               //only run the onChange event if done by a user slide:
-                               if(embedObj.userSlide){
-                                       embedObj.userSlide=false;
-                                       embedObj.seeking=true;
-//                                     var perc = ui.value/100;
-                                       embedObj.updateVolumen(level);
-                               }
-                       }
-               });
+               });                                     
        
        }
 }
\ No newline at end of file

diff --git a/js2/mwEmbed/skins/kskin/playerSkin.css b/js2/mwEmbed/skins/kskin/playerSkin.css
index 5acc6a3..bd8663b 100644 (file)
--- a/js2/mwEmbed/skins/kskin/playerSkin.css
+++ b/js2/mwEmbed/skins/kskin/playerSkin.css
@@ -1,235 +1,388 @@
 /*
 * K-skin player
 */ 
+.k-player {
+       color: white;
+}
 
 /* large play button */
-.k-player .play-btn-large { width:120px; height:55px; background: url(images/ksprite.png) no-repeat 28px -433px; position:absolute; cursor:pointer; border:none;} /*.ui-state-default */
-.k-player .play-btn-large.ui-state-hover { background: url(images/ksprite.png) no-repeat 28px -377px; }
+.k-player .play-btn-large {
+       width: 120px;
+       height: 55px;
+       background: url(images/ksprite.png) no-repeat 28px -433px;
+       position: absolute;
+       cursor: pointer;
+       border: none;
+}  /*.ui-state-default */
+.k-player .play-btn-large.ui-state-hover {
+       background: url(images/ksprite.png) no-repeat 28px -377px;
+}
 
 /* control icons: */
-.k-player .ui-state-default .ui-icon, .k-player .ui-state-hover .ui-icon {background:transparent url(images/ksprite.png) no-repeat scroll 0 -48px;}
- 
-.k-player .ui-state-default .ui-icon-arrow-4-diag { background-position: 0 -32px;} /* fullscreen */
-.k-player .ui-state-hover .ui-icon-arrow-4-diag { background-position: -16px -32px;}
-.k-player .ui-state-default .ui-icon-volume-on,  .ui-state-hover .ui-icon-volume-off,  { margin-left:-6px; background-position: -16px -48px;}
-.k-player .ui-state-hover .ui-icon-volume-on, .ui-state-default .ui-icon-volume-off { margin-left:-6px; background-position: 0 -48px;}
+.k-player .ui-state-default .ui-icon,.k-player .ui-state-hover .ui-icon
+       {
+       background: transparent url(images/ksprite.png) no-repeat scroll 0 -48px
+               ;
+}
+
+.k-player .ui-state-default .ui-icon-arrow-4-diag {
+       background-position: 0 -32px;
+}  /* fullscreen */
+.k-player .ui-state-hover .ui-icon-arrow-4-diag {
+       background-position: -16px -32px;
+}
+
+.k-player .ui-state-hover .ui-icon-volume-on{  
+       background-position: -16px -48px;
+}
+
+.k-player .ui-state-default .ui-icon-play {
+       background: url(images/ksprite.png) no-repeat 0 0;
+}
+
+.k-player .ui-state-hover .ui-icon-play {
+       background-position: -16px 0;
+}
 
-.k-player .ui-state-default .ui-icon-play { background:url(images/ksprite.png) no-repeat 0 0;}
-.k-player .ui-state-hover .ui-icon-play { background-position: -16px 0;}
+.k-player .ui-state-default .ui-icon-pause {
+       background: url(images/ksprite.png) no-repeat 0 -17px;
+}
 
-.k-player .ui-state-default .ui-icon-pause { background:url(images/ksprite.png) no-repeat 0 -17px;}
-.k-player .ui-state-hover .ui-icon-pause { background-position: -16px -17px;}
+.k-player .ui-state-hover .ui-icon-pause {
+       background-position: -16px -17px;
+}
 
 .k-player .control-bar {
-       border: 0px;    
-       height:21px; 
-       padding: 2px 0 0 6px; 
-       margin-top:0px; 
-       background: url(images/ksprite.png) repeat-x 0 -81px; 
-       font: normal 11px arial,sans-serif; 
-       color:#555;
+       border: 0px;
+       height: 21px;
+       padding: 2px 0 0 6px;
+       margin-top: 0px;
+       background: url(images/ksprite.png) repeat-x 0 -81px;
+       font: normal 11px arial, sans-serif;
+       color: #555;
 }
 
 .k-player .play_head {
-       background:url("images/ksprite.png") repeat-x scroll 0 -350px transparent;
-       display:inline;
-       float:left;     
-       margin-left:10px;
-       border:1px solid #EEEEEE;
-       height:8px;
-       margin:6px 10px 0 7px;
-       position:relative;
+       background: url("images/ksprite.png") repeat-x scroll 0 -350px
+               transparent;
+       display: inline;
+       float: left;
+       margin-left: 10px;
+       border: 1px solid #EEEEEE;
+       height: 8px;
+       margin: 6px 10px 0 7px;
+       position: relative;
 }
 
 .k-player .play_head .ui-slider-handle {
-       background:url("images/ksprite.png") no-repeat scroll -67px -341px transparent;
-       border:1px solid #888888;
-       display:block;
-       height:8px;
-       margin:-1px 0 0 -5px;
-       position:absolute;
-       top:0;
-       width:8px;
-       cursor:pointer;
+       background: url("images/ksprite.png") no-repeat scroll -67px -341px
+               transparent;
+       border: 1px solid #888888;
+       display: block;
+       height: 8px;
+       margin: -1px 0 0 -5px;
+       position: absolute;
+       top: 0;
+       width: 8px;
+       cursor: pointer;
 }
 
 .k-player .time-disp {
-border:medium none;
-display:inline;
-color:#555555;
-font:11px arial,sans-serif;
-line-height:20px;
-overflow:hidden;
-width:36px;
+       border: medium none;
+       display: inline;
+       color: #555555;
+       font: 11px arial, sans-serif;
+       line-height: 20px;
+       overflow: hidden;
+       width: 36px;
+       float: right;
 }
 
 .k-player .lButton {
-       cursor:pointer;
-       float:left;
-       list-style:none outside none;
-       margin:2px;
-       padding:0px 0;
+       cursor: pointer;
+       float: left;
+       list-style: none outside none;
+       margin: 2px;
+       padding: 0px 0;
        width: 24px;
-       height:16px;
-       position:relative;
-       background:none repeat scroll 0 0 transparent;
-       border:medium none;
+       height: 16px;
+       position: relative;
+       background: none repeat scroll 0 0 transparent;
+       border: medium none;
 }
+
 .k-player .rButton {
-       cursor:pointer;
-       float:right;
-       list-style:none outside none;
-       margin:2px;
-       padding:0px 0;
+       cursor: pointer;
+       float: right;
+       list-style: none outside none;
+       margin: 2px;
+       padding: 0px 0;
        width: 23px;
-       height:16px;
-       position:relative;
-       background:none repeat scroll 0 0 transparent;
-       border:medium none;
+       height: 16px;
+       position: relative;
+       background: none repeat scroll 0 0 transparent;
+       border: medium none;
 }
 
 .k-player .k-options {
-       border:1px solid #AAAAAA !important;
-       color:#555555;
-       float:right;
-       height:22px;
-       margin-top:-2px;
+       border: 1px solid #AAAAAA !important;
+       color: #555555;
+       float: right;
+       height: 22px;
+       margin-top: -2px;
        margin-right: 0px;
-       width:50px;
-       float:right;
-       background:none repeat scroll 0 0 transparent;
-       font-family:Lucida Grande,Lucida Sans,Arial,sans-serif;
-       font-size:11px;
-       text-transform:uppercase;       
-}
-.k-player .k-options span{
-       position:relative;
-       top:4px;
-       left:7px;
-}
-
-.k-player .k-menu-screens  {
-       float:left;
-       font-size:11px;
-       padding:13px 10px 15px 15px;
-       width:320px;
-}
-
-.k-player ul.k-menu-bar  {
-       background:url("images/ksprite.png") no-repeat scroll -99px -104px transparent;
-       bottom:5px;
-       height:128px;
-       list-style:none outside none;
-       padding:0 0 5px;
-       position:absolute;
-       right:0;
-}
-.k-player .k-menu  {
-       background:none repeat scroll 0 0 #181818;
-       border:medium none;
-       display:none;
-       height:300px;
-       left:0;
-       opacity:0.9;
-       position:absolute;
-       top:0;
-       width:400px;
-       z-index:999;
+       width: 50px;
+       float: right;
+       background: none repeat scroll 0 0 transparent;
+       font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;
+       font-size: 11px;
+       text-transform: uppercase;
+}
+
+.k-player .k-options span {
+       position: relative;
+       top: 4px;
+       left: 7px;
+}
+
+.k-player .k-menu-screens {
+       float: left;
+       font-size: 11px;
+       padding: 13px 10px 15px 15px;
+       width: 320px;
+}
+
+.k-player ul.k-menu-bar {
+       background: url("images/ksprite.png") no-repeat scroll -99px -104px
+               transparent;
+       bottom: 5px;
+       height: 128px;
+       list-style: none outside none;
+       padding: 0 0 5px;
+       position: absolute;
+       right: 0;
+}
+
+.k-player .k-menu {
+       background: none repeat scroll 0 0 #181818;
+       border: medium none;
+       display: none;
+       height: 300px;
+       left: 0;
+       opacity: 0.9;
+       position: absolute;
+       top: 0;
+       width: 400px;
+       z-index: 999;
 }
+
 .k-player .k-menu-bar li a {
-       background:url("images/ksprite.png") no-repeat scroll -51px -110px transparent;
-       display:block;
-       height:32px;
-       margin-left:1px;
-       overflow:hidden;
-       text-indent:99999px;
-       width:49px;
-}
-.k-menu-bar li a:hover { background-position: -1px -110px;}
-.k-menu-bar li.k-download-btn a { background-position: -51px -203px;}
-.k-menu-bar li.k-download-btn a:hover { background-position: -1px -203px;}
-
-.k-menu-bar li.k-share-btn a { background-position: -51px -172px;}
-.k-menu-bar li.k-share-btn a:hover { background-position: -1px -172px;}
-
-.k-menu-bar li.k-credits-btn a { background-position: -51px -141px;}
-.k-menu-bar li.k-credits-btn a:hover { background-position: -1px -141px;}
- 
-.k-menu-screens { width:320px; padding: 13px 10px 15px 15px; float:left;} /* w & h inline via jq */
-.k-menu-screens h2 { padding: 0 0 5px 1px; clear:both; font-size:12px; color:#666;}
-.k-menu-screens p { margin: 6px 0;}
-.k-menu-screens a { ;}
-.k-menu-screens a img { border:none;}
-.k-menu-screens ul { padding:0; margin: 6px 0 0; list-style: none outside none;}
-
-.k-edit-screen { width:370px; height:223px; padding-top:77px; text-align:center; background:#181818; color:#fff;}
-.k-edit-screen div { }
-.k-edit-screen a { color:#7BB8FC;}
-.k-edit-screen a img { border:none;}
-
-.k-menu-screens { width:320px; padding: 13px 10px 15px 15px; float:left;} /* w & h inline via jq */
-.k-menu-screens h2 { padding: 0 0 5px 1px; clear:both; font-size:12px; color:#666;}
-.k-menu-screens p { margin: 6px 0;}
-.k-menu-screens a { ;}
-.k-menu-screens a img { border:none;}
-.k-menu-screens ul { padding:0; margin: 6px 0 0; list-style: none outside none;}
-
-.k-menu-screens li { height:14px; margin-bottom:6px;}
-.k-menu-screens li a { padding-left:22px; background:url(images/ksprite.png) no-repeat -85px -274px; text-decoration:none;}
-.k-menu-screens li a.active, .k-menu-screens li a:hover.active  { background-position: -85px -247px;}
-.k-menu-screens li a:hover { background-position: -85px -260px;}
-.k-menu-screens a { color:#BBBBBB; }
+       background: url("images/ksprite.png") no-repeat scroll -51px -110px
+               transparent;
+       display: block;
+       height: 32px;
+       margin-left: 1px;
+       overflow: hidden;
+       text-indent: 99999px;
+       width: 49px;
+}
+
+.k-menu-bar li a:hover {
+       background-position: -1px -110px;
+}
+
+.k-menu-bar li.k-download-btn a {
+       background-position: -51px -203px;
+}
+
+.k-menu-bar li.k-download-btn a:hover {
+       background-position: -1px -203px;
+}
+
+.k-menu-bar li.k-share-btn a {
+       background-position: -51px -172px;
+}
+
+.k-menu-bar li.k-share-btn a:hover {
+       background-position: -1px -172px;
+}
+
+.k-menu-bar li.k-credits-btn a {
+       background-position: -51px -141px;
+}
+
+.k-menu-bar li.k-credits-btn a:hover {
+       background-position: -1px -141px;
+}
+
+.k-menu-screens {
+       width: 320px;
+       padding: 13px 10px 15px 15px;
+       float: left;
+}  /* w & h inline via jq */
+.k-menu-screens h2 {
+       padding: 0 0 5px 1px;
+       clear: both;
+       font-size: 12px;
+       color: #666;
+}
+
+.k-menu-screens p {
+       margin: 6px 0;
+}
+
+.k-menu-screens a {;
+       
+}
+
+.k-menu-screens a img {
+       border: none;
+}
+
+.k-menu-screens ul {
+       padding: 0;
+       margin: 6px 0 0;
+       list-style: none outside none;
+}
+
+.k-edit-screen {
+       width: 370px;
+       height: 223px;
+       padding-top: 77px;
+       text-align: center;
+       background: #181818;
+       color: #fff;
+}
+
+.k-edit-screen div {
+       
+}
+
+.k-edit-screen a {
+       color: #7BB8FC;
+}
 
+.k-edit-screen a img {
+       border: none;
+}
+
+.k-menu-screens {
+       width: 320px;
+       padding: 13px 10px 15px 15px;
+       float: left;
+}  /* w & h inline via jq */
+.k-menu-screens h2 {
+       padding: 0 0 5px 1px;
+       clear: both;
+       font-size: 12px;
+       color: #666;
+}
+
+.k-menu-screens p {
+       margin: 6px 0;
+}
+
+.k-menu-screens a {;
+       
+}
+
+.k-menu-screens a img {
+       border: none;
+}
+
+.k-menu-screens ul {
+       padding: 0;
+       margin: 6px 0 0;
+       list-style: none outside none;
+}
+
+.k-menu-screens li {
+       height: 14px;
+       margin-bottom: 6px;
+}
+
+.k-menu-screens li a {
+       padding-left: 22px;
+       background: url(images/ksprite.png) no-repeat -85px -274px;
+       text-decoration: none;
+}
+
+.k-menu-screens li a.active,.k-menu-screens li a:hover .active {
+       background-position: -85px -247px;
+}
+
+.k-menu-screens li a:hover {
+       background-position: -85px -260px;
+}
+
+.k-menu-screens a {
+       color: #BBBBBB;
+}
 
 .k-menu textarea {
-       background:none repeat scroll 0 0 transparent;
-       border-color:#000000 -moz-use-text-color -moz-use-text-color #000000;
-       border-style:solid none none solid;
-       border-width:2px medium medium 2px;
-       color:#CCCCCC;
-       font:11px arial,sans-serif;
-       height:15px;
-       overflow:hidden;
-       padding-left:2px;
-       width:100%;
+       background: none repeat scroll 0 0 transparent;
+       border-color: #000000 -moz-use-text-color -moz-use-text-color #000000;
+       border-style: solid none none solid;
+       border-width: 2px medium medium 2px;
+       color: #CCCCCC;
+       font: 11px arial, sans-serif;
+       height: 15px;
+       overflow: hidden;
+       padding-left: 2px;
+       width: 100%;
 }
+
 .menu-screen.menu-share button {
-       background:url("images/ksprite.png") no-repeat scroll 0 -81px #D4D4D4;
-       border:1px solid #000000;
-       color:#000000;
-       float:right;
-       height:24px;
-       padding:0 5px 3px;
-       width:84px;
-       font-size:1em;
+       background: url("images/ksprite.png") no-repeat scroll 0 -81px #D4D4D4;
+       border: 1px solid #000000;
+       color: #000000;
+       float: right;
+       height: 24px;
+       padding: 0 5px 3px;
+       width: 84px;
+       font-size: 1em;
 }
+
 .k-player .menu-screen.menu-share div.ui-state-highlight {
-       background:none repeat scroll 0 0 transparent;
-       border-color:#554926;
-       color:#FFE96E;
-       float:left;
-       padding:2px 5px;
+       background: none repeat scroll 0 0 transparent;
+       border-color: #554926;
+       color: #FFE96E;
+       float: left;
+       padding: 2px 5px;
 }
+
 .k-player .menu-screen.menu-share div.ui-state-highlight a {
-       color:#FFE96E;
-       font-weight:bold;
+       color: #FFE96E;
+       font-weight: bold;
+}
+
+.k-player .volume_control {
+       margin-right: 0px;
+       width: 16px;
 }
 
-.k-player .volume-slide {
-       width:38px !important;
+.k-player .volume_control span {
+       margin-right: 0px;
+}
+
+.k-player .volume-slider {
+       width: 30px;
 }
+
 .k-player .volume-slider .ui-slider-range {
-       -moz-border-radius:0 0 0 0;
-       background:url("images/ksprite.png") repeat-x scroll -66px -306px transparent;
-       height:17px;
-       position:absolute;
+       -moz-border-radius: 0 0 0 0;
+       background: url("images/ksprite.png") repeat-x scroll -66px -306px
+               transparent;
+       height: 17px;
+       position: absolute;
 }
+
 .k-player .volume-slider a.ui-slider-handle {
-       background:none repeat scroll 0 0 transparent;
-       border:medium none;
-       display:block;
-       height:18px;
-       margin:-3px 5px 0 -1px;
-       position:absolute;
-       width:8px;
+       background: none repeat scroll 0 0 transparent;
+       border: medium none;
+       display: block;
+       height: 18px;
+       margin: -3px 5px 0 -1px;
+       position: absolute;
+       width: 8px;
 }
\ No newline at end of file

diff --git a/js2/mwEmbed/skins/mvpcf/playerSkin.css b/js2/mwEmbed/skins/mvpcf/playerSkin.css
index 1ae63c4..36ca4bf 100644 (file)
--- a/js2/mwEmbed/skins/mvpcf/playerSkin.css
+++ b/js2/mwEmbed/skins/mvpcf/playerSkin.css
@@ -80,10 +80,10 @@
        padding: 0 0 0 0;
        
 }
-.volume_on {   
+.mv-player .volume_on {        
        background: url(images/player_volume_tag.png) 0 8px no-repeat;
 }
-.volume_off{
+.mv-player .volume_off{
        background: url(images/player_volume_tag_off.png) 0 8px no-repeat;
 }
 
@@ -96,7 +96,33 @@
        margin: -1px 0 0 3px;
        cursor: pointer;
 }
-
+.mv-player .vol_container{
+       z-index:99;
+       width:23px;
+       height:75px;
+       width:23px;
+       background: #CCC;
+}
+.mv-player .vol_container_below{
+       top:30px;
+}
+.mv-player .vol_container_top{
+       top:-77px;
+}
+.mv-player .vol_container .volume-slider{
+       margin-top:5px; 
+       height:65px;
+       width:10px;
+       margin-left: auto ;
+       margin-right: auto ;    
+}
+.mv-player .vol_container .ui-slider-handle{
+       cursor : pointer;
+       width:10px;
+       height:10px;    
+       position:absolute;
+       left:-1px;              
+}
 
 .mv-player .time-disp {
        line-height: 32px;
@@ -117,20 +143,20 @@
        margin-top:10px;        
 }
 
-.play_head .ui-slider-handle{
+.mv-player .play_head .ui-slider-handle{
        width:10px;
        height:15px;
        margin-left:-5px;
        margin-top:1px;
 }
 
-.inOutSlider .ui-slider-handle{
+.mv-player .inOutSlider .ui-slider-handle{
        width:8px;      
        cusror: move;
 }
 
 
-.videoOptionsComplete textarea {
+.mv-player .videoOptionsComplete textarea {
        background:none repeat scroll 0 0 transparent;
        border-color:#333 -moz-use-text-color -moz-use-text-color #333;
        border-style:solid none none solid;
@@ -142,7 +168,7 @@
        padding-left:2px;
        width:100%;
 }
-.videoOptionsComplete .copycode {
+.mv-player .videoOptionsComplete .copycode {
        background:url("images/ksprite.png") no-repeat scroll 0 -81px #D4D4D4;
        border:1px solid #000000;
        color:#000000;
@@ -152,14 +178,14 @@
        width:84px;
        font-size:1em;
 }
-.videoOptionsComplete div.ui-state-highlight {
+.mv-player .videoOptionsComplete div.ui-state-highlight {
        background:none repeat scroll 0 0 transparent;
        border-color:#554926;
        color:#FFE96E;
        float:left;
        padding:2px 5px;
 }
-.videoOptionsComplete div.ui-state-highlight a {
+.mv-player .videoOptionsComplete div.ui-state-highlight a {
        color:#FFE96E;
        font-weight:bold;
 }