* moved remote oggHandler code to remoteMwEmbed.js
authorMichael Dale <dale@users.mediawiki.org>
Fri, 2 Oct 2009 05:47:19 +0000 (05:47 +0000)
committerMichael Dale <dale@users.mediawiki.org>
Fri, 2 Oct 2009 05:47:19 +0000 (05:47 +0000)
* refactored skin system should soon be possible to have two player skins in a single page.
* stubs to restore k-skin functionality
* restored some broken pieces of mwEmbedRemote

18 files changed:
js2/editPage.js
js2/mwEmbed/example_usage/Firefogg_Make_Advanced.html
js2/mwEmbed/example_usage/Player_Simple_Themable.html
js2/mwEmbed/jsScriptLoader.php
js2/mwEmbed/libAddMedia/remoteSearchDriver.js
js2/mwEmbed/libEmbedVideo/embedVideo.js
js2/mwEmbed/libEmbedVideo/vlcEmbed.js
js2/mwEmbed/libSequencer/mvPlayList.js
js2/mwEmbed/php/jsAutoloadLocalClasses.php
js2/mwEmbed/skins/ctrlBuilder.js
js2/mwEmbed/skins/kskin/kskin.js
js2/mwEmbed/skins/kskin/playerSkin.css [new file with mode: 0644]
js2/mwEmbed/skins/kskin/styles.css
js2/mwEmbed/skins/mvpcf/ie_styles.css [deleted file]
js2/mwEmbed/skins/mvpcf/mvpcf.js
js2/mwEmbed/skins/mvpcf/playerSkin.css [new file with mode: 0644]
js2/mwEmbed/skins/mvpcf/styles.css
js2/remoteMwEmbed.js

index 1c87a92..b3e3995 100644 (file)
@@ -1,51 +1,51 @@
 /*
  * JS2-style replacement for MediaWiki edit.js
- * @todo port the rest of it to here
+ * (right now it just supports the toolbar) 
  */
 
-// Setup configuration vars
-if( !mwAddMediaConfig ) {
-       var mwAddMediaConfig = {
+// Setup configuration vars (if not set already) 
+if( !mwAddMediaConfig )
+       var mwAddMediaConfig = {};
+
+//The default editPage AMW config
+var defaultAddMediaConfig = {
                'profile': 'mediawiki_edit',
                'target_textbox': '#wpTextbox1',
                // Note: selections in the textbox will take over the default query
                'default_query': wgTitle,
                'target_title': wgPageName,
                // Here we can setup the content provider overrides
-               'enabled_cps':['wiki_commons'],
+               'enabled_cps':['wiki_commons'],   
                // The local wiki API URL:
                'local_wiki_api_url': wgServer + wgScriptPath + '/api.php'
-       };
-}
-
+};
 js2AddOnloadHook( function() {
-       mwEditPageHelper.init();
+       mwEditPageHelper.init(
+               $j.extend( true, defaultAddMediaConfig, mwAddMediaConfig )
+       );
 });
 var mwEditPageHelper = {
-       init: function() {
-               var _this = this;
-               //@@todo check for a new version of the toolbar and via toolbar API
-
-               // Kind of tricky, it would be nice to use a "loader" call here to avoid concurrency issues.
+       init: function( amwConf ) {
+               var _this = this;               
+               // kind of tricky, it would be nice to use run on ready "loader" call here
                if( typeof $j.wikiEditor != 'undefined' ) {
                        setTimeout( function() {
                                $j( '.wikiEditor-ui [rel=file]' ).unbind().addMediaWiz(
-                               mwAddMediaConfig
+                                       amwConf
                                );
-                       },
-                       100 );
+                       }, 100 );
                } else {
                        // Add the add-media-wizard button for old toolbar:
                        $j( '#toolbar' ).append( '<img style="cursor:pointer" id="btn-add-media-wiz" src="' +
-                       mv_skin_img_path + 'Button_add_media.png">' );
+                               mv_skin_img_path + 'Button_add_media.png">' );
                        $j( '#btn-add-media-wiz' ).addMediaWiz(
-                               mwAddMediaConfig
+                               amwConf
                        );
                }
 
                // Add to new toolbar (need to use api)
                /*$j( '[rel=insert] tool-file' ).addMediaWiz(
-                       mwAddMediaConfig
+                               mwAddMediaConfig
                );*/
        }
 }
index 4eb0dd0..d40c9cb 100644 (file)
@@ -2,8 +2,8 @@
 <html><head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <title>Firefogg - Make Ogg Video in your Browser</title>
-       <script type="text/javascript" src="../jsScriptLoader.php?urid=18&class=mv_embed,window.jQuery,mvBaseUploadInterface,mvFirefogg,mvAdvFirefogg,$j.ui,$j.ui.progressbar,$j.ui.dialog,$j.cookie,$j.ui.accordion,$j.ui.slider,$j.ui.datepicker"></script>
-       <!-- <script type="text/javascript" src="../mv_embed.js"></script> -->
+       <script type="text/javascript" src="../jsScriptLoader.php?urid=19&class=mv_embed,window.jQuery,mvBaseUploadInterface,mvFirefogg,mvAdvFirefogg,$j.ui,$j.ui.progressbar,$j.ui.dialog,$j.cookie,$j.ui.accordion,$j.ui.slider,$j.ui.datepicker,$j.ui.draggable"></script>
+       <!--  <script type="text/javascript" src="../mv_embed.js"></script>  -->
 <style type="text/css" media="all">body {
   margin: 0;
   padding: 0;
index 9795046..4ec0fc8 100644 (file)
 To play with dynamic Themes install <a href="http://jqueryui.com/themeroller/developertool/">Themeroller</a><p><p>
 <div style="width:450px;float:left">
 <video src="http://upload.wikimedia.org/wikipedia/commons/d/d3/Okapia_johnstoni5.ogg" 
-               thumbnail="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Okapia_johnstoni5.ogg/mid-Okapia_johnstoni5.ogg.jpg" durationHint="15"></video>
+               poster="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Okapia_johnstoni5.ogg/mid-Okapia_johnstoni5.ogg.jpg" durationHint="15"></video>
                </div>  
 <div style="float:left">
 <b>Source Code used:</b><br>
-<textarea cols="50" rows="7"><video src="http://upload.wikimedia.org/wikipedia/commons/d/d3/Okapia_johnstoni5.ogg" thumbnail="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Okapia_johnstoni5.ogg/mid-Okapia_johnstoni5.ogg.jpg" durationHint="15"></video></textarea>
+<textarea cols="50" rows="7"><video src="http://upload.wikimedia.org/wikipedia/commons/d/d3/Okapia_johnstoni5.ogg" poster="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Okapia_johnstoni5.ogg/mid-Okapia_johnstoni5.ogg.jpg" durationHint="15"></video></textarea>
 </div>
 </body>
 </html>
index fc13eab..c0bfbb0 100644 (file)
@@ -4,6 +4,7 @@
  * @file
  */
 // Check if we are being invoked in a MediaWiki context or stand alone usage:
+
 if ( !defined( 'MEDIAWIKI' ) ) {
        // Load noMediaWiki helper
        require_once( realpath( dirname( __FILE__ ) ) . '/php/noMediaWikiConfig.php' );
@@ -206,7 +207,6 @@ class jsScriptLoader {
                                                                if( $t->exists()
                                                                        && ( $t->getNamespace() == NS_MEDIAWIKI
                                                                        || $t->getNamespace() == NS_USER ) ){
-
                                                                                $doAddWT = true;
                                                                }
                                                        }
index cb822da..1626b8d 100644 (file)
@@ -346,7 +346,7 @@ remoteSearchDriver.prototype = {
                                }
                        }
                }
-
+               
                //set up the default model config:
                this.dmodalCss = {
                        'width':'auto',
index af316c0..127fb64 100644 (file)
@@ -94,10 +94,12 @@ var default_video_attributes = {
        "linkback":null,
        "embed_link":true,
        "download_link":true,
-       "type":null      //the content type of the media 
+       "type":null,     //the content type of the media 
+       
+       "skin_name":null //if you want to select a custom skin per video tag. 
 };
 /*
- * the base source attibute checks
+ * the base source attribute checks
  */
 var mv_default_source_attr= new Array(
        'id',
@@ -120,7 +122,7 @@ function mv_video_embed(swap_done_callback, force_id){
        mvEmbed.init( swap_done_callback, force_id );
 }
 mvEmbed = {    
-       //flist stores the set of functions to run after the video has been swaped in. 
+       //flist stores the set of functions to run after the video has been swapped in. 
        flist:new Array(),
        init:function( swap_done_callback, force_id ){
                
@@ -128,7 +130,7 @@ mvEmbed = {
                        mvEmbed.flist.push( swap_done_callback );
                        
                //get mv_embed location if it has not been set
-               js_log('mv_embed ' + MV_EMBED_VERSION);                         
+               js_log('mv_embed ' + MV_EMBED_VERSION);                                         
                
                var loadPlaylistLib=false;                                              
                
@@ -138,7 +140,7 @@ mvEmbed = {
                        if( $j(this_elm).attr("id") == '' ){
                                $j(this_elm).attr("id", 'v'+ global_player_list.length);
                        }                       
-                       //stre a global reference to the id     
+                       //store a global reference to the id    
                   global_player_list.push( $j(this_elm).attr("id") );
                   //if video doSwap
                   switch( this_elm.tagName.toLowerCase()){
@@ -234,8 +236,8 @@ mvEmbed = {
                $j('#'+embed_video.id).get(0).on_dom_swap();    
                          
                // now that "embed_video" is stable, do more initialization (if we are ready)
-               if($j('#'+embed_video.id).get(0).loading_external_data == false && 
-                          $j('#'+embed_video.id).get(0).init_with_sources_loadedDone == false){
+               if($j('#'+embed_video.id).get(0).loading_external_data == false
+                        && $j('#'+embed_video.id).get(0).init_with_sources_loadedDone == false){
                        //load and set ready state since source are available: 
                        $j('#'+embed_video.id).get(0).init_with_sources_loaded();
                }
@@ -808,7 +810,11 @@ embedVideo.prototype = {
        },
        init: function(element){                
                //this.element_pointer = element;
-
+               
+               //set the skin name from the config
+               //@@todo support skin as an attribute option
+               this.skin_name = mwConfig['skin_name'];
+               
                //inherit all the default video_attributes
                for(var attr in default_video_attributes){ //for in loop oky on user object
                        if(element.getAttribute(attr)){
@@ -844,7 +850,13 @@ embedVideo.prototype = {
                        this.user_missing_plugin_html=element.innerHTML;
                }                                 
                // load all of the specified sources
-               this.media_element = new mediaElement(element);                                                  
+               this.media_element = new mediaElement(element);         
+               
+               //if we are displaying controls setup the ctrlBuilder  
+               if( this.controls ){
+                       //set-up the local ctrlBuilder instance: 
+                       this.ctrlBuilder = new ctrlBuilder( this );             
+               }                        
        },
        on_dom_swap: function(){
                js_log('f:on_dom_swap');                                
@@ -873,7 +885,7 @@ embedVideo.prototype = {
                this.init_with_sources_loadedDone=true;                          
                //autoseletct the source
                this.media_element.autoSelectSource();          
-               //auto select player based on prefrence or default order
+               //auto select player based on default order
                if( !this.media_element.selected_source )
                {
                        //check for parent clip: 
@@ -925,13 +937,8 @@ embedVideo.prototype = {
                //set up the new embedObj
                js_log('f: inheritEmbedObj: embedding with ' + this.selected_player.library);
                var _this = this;               
-               this.selected_player.load( function()
-               {
-                        js_log("selected_player::load:duration is: " +  _this.duration);  
+               this.selected_player.load( function(){                    
                        //js_log('inheriting '+_this.selected_player.library +'Embed to ' + _this.id + ' ' + $j('#'+_this.id).length);
-                       //var _this = $j('#'+_this.id).get(0);
-                       //js_log( 'type of ' + _this.selected_player.library +'Embed + ' +
-                       //              eval('typeof '+_this.selected_player.library +'Embed')); 
                        eval('embedObj = ' +_this.selected_player.library +'Embed;');
                        for(var method in embedObj){ //for in loop oky for object  
                                //parent method preservation for local overwritten methods
@@ -979,12 +986,11 @@ embedVideo.prototype = {
                                var playable_sources = this.media_element.getPlayableSources();
                                for(var sInx=0; sInx < playable_sources.length; sInx++){  
                                        var mime_type = playable_sources[sInx].mime_type;
-                                       if( mime_type=='video/ogg' ){
-                                               //they  have flash / h.264 fallback no need to push firefox :( 
+                                       if( mime_type=='video/ogg' ){                                           
                                                foundOgg = true;
                                        }
                                }
-                               //no ogg no point in download firefox
+                               //no ogg src... no point in download firefox link
                                if(!foundOgg)
                                        return false;
                                                                                
@@ -1022,7 +1028,7 @@ embedVideo.prototype = {
         * wrapEmebedContainer
         * wraps the embed code into a container to better support playlist function
         *  (where embed element is swapped for next clip
-        *  (where plugin method does not support playlsits
+        *  (where plugin method does not support playlist
         */
        wrapEmebedContainer:function(embed_code){
                //check if parent clip is set( ie we are in a playlist so name the embed container by playlistID)
@@ -1179,7 +1185,7 @@ embedVideo.prototype = {
                                return ;
                                
                        $j('#img_thumb_'+this.id).css('zindex',1);
-                       $j('#big_play_link_'+this.id).hide();
+                       $j( this.id + ' .play-btn-large').hide();
        
                        //add black background
                        $j('#dc_'+this.id).append('<div id="black_back_'+this.id+'" ' +
@@ -1404,38 +1410,43 @@ embedVideo.prototype = {
                        return;
                }else{
                        $j('#mv_embedded_controls_'+this.id).html( this.getControlsHTML() );
-                       ctrlBuilder.addControlHooks(this);                                              
+                       this.ctrlBuilder.addControlHooks(this);                                         
                }               
        },   
        getControlsHTML:function()
        {                       
-               return ctrlBuilder.getControls( this );
+               return this.ctrlBuilder.getControls( this );
        },      
        getHTML : function (){          
-               //@@todo check if we have sources avaliable     
+               //@@todo check if we have sources available     
                js_log('embedVideo:getHTML : ' + this.id  + ' resource type: ' + this.type);                    
                var _this = this;                                
                var html_code = '';             
-               html_code = '<div id="videoPlayer_'+this.id+'" style="width:'+this.width+'px;position:relative;" class="videoPlayer">';         
+               html_code = '<div id="videoPlayer_' + this.id + '" style="width:' + this.width + 'px;position:relative;"'+ 
+                                               'class="' + this.ctrlBuilder.pClass + '">';             
                html_code += '<div style="width:'+parseInt(this.width)+'px;height:'+parseInt(this.height)+'px;"  id="mv_embedded_player_'+this.id+'">' +
                                                this.getThumbnailHTML() + 
                                        '</div>';                                                                                       
                //js_log("mvEmbed:controls "+ typeof this.controls);                                                                    
                if( this.controls )
                {
+                       //set-up the local ctrlBuilder instance: 
+                       this.ctrlBuilder = new ctrlBuilder( this );
+                       
                        js_log("f:getHTML:AddControls");
                        html_code +='<div id="mv_embedded_controls_' + this.id + '" class="ui-widget ui-corner-bottom ui-state-default controls" >';
                        html_code += this.getControlsHTML();       
-                       html_code +='</div>';     
+                       html_code +='</div>';                           
                        //block out some space by encapulating the top level div 
                        $j(this).wrap('<div style="width:'+parseInt(this.width)+'px;height:'
-                                       +(parseInt(this.height)+ctrlBuilder.height)+'px"></div>');                                      
+                                       +( parseInt(this.height) + this.ctrlBuilder.height )+'px"></div>');
+                                                               
                }
                html_code += '</div>'; //videoPlayer div close          
                //js_log('should set: '+this.id);
                $j(this).html( html_code );                                     
                //add hooks once Controls are in DOM
-               ctrlBuilder.addControlHooks(this);              
+               this.ctrlBuilder.addControlHooks(this);         
                                                  
                //js_log('set this to: ' + $j(this).html() );   
                //alert('stop');
@@ -1587,7 +1598,7 @@ embedVideo.prototype = {
                        ' id="img_thumb_'+this.id+'" src="' + this.thumbnail + '">';
                
                if(this.play_button == true && this.controls == true)
-                         thumb_html+=this.getPlayButton();
+                         thumb_html+= this.ctrlBuilder.getComponent( 'play-btn-large' );
                          
                   thumb_html+='</div>';
                return thumb_html;
@@ -1627,15 +1638,7 @@ embedVideo.prototype = {
                //js_log('pos of options button: t:'+pos['top']+' l:'+ pos['left']);
                $j('#mv_vid_options_'+sel_id).css(pos).toggle();
                return;
-       },
-       getPlayButton:function(id){
-               if(!id)id=this.id;
-               return '<div title="' + gM('mwe-play_clip') + '" id="big_play_link_'+id+'" class="large_play_button" '+
-                       'style="left:'+((this.playerPixelWidth()-130)/2)+'px;'+
-                       'top:' + ((this.playerPixelHeight()-96)/2) + 'px;">'+
-                       '<img src="' + mv_skin_img_path + 'player_big_play_button.png">'+
-                       '</div>';
-       },
+       },      
        doLinkBack:function(){
                if(this.roe && this.media_element.addedROEData==false){
                        var _this = this;
@@ -1994,7 +1997,7 @@ embedVideo.prototype = {
                }
                
                //make sure the big playbutton is has click action: 
-               $j('#big_play_link_' + _this.id).unbind('click').click(function(){
+               $j(_this.id + ' .play-btn-large').unbind('click').click(function(){
                        $j('#' +_this.id).get(0).play();
                });
                
@@ -2253,20 +2256,12 @@ mediaPlayer.prototype =
        {
                return gM('mwe-ogg-player-' + this.id);
        },
-       load : function(callback){
-               var libName = this.library+'Embed';
-               if( mvJsLoader.checkObjPath( libName ) ){
-                       js_log('plugin loaded, do callback:');
-                       callback();
-               }else{
-                       var _this = this;                                                                                       
-                       //jQuery based get script does not work so well.                                                        
-                       mvJsLoader.doLoad([ 
-                               libName
-                       ],function(){
-                               callback();                                                     
-                       });
-               }
+       load : function(callback){              
+               mvJsLoader.doLoad([ 
+                       this.library + 'Embed'  
+               ],function(){
+                       callback();                                                     
+               });
        }       
 }
 /* players and supported mime types 
index 0e5a8d8..db607a5 100644 (file)
@@ -194,20 +194,11 @@ var vlcEmbed = {
 /* events */
        onOpen: function(){
                this.setStatus("Opening...");
-               //document.getElementById("info_"+this.id).innerHTML = "Opening...";
-               //document.getElementById("PlayOrPause").disabled = true;
-               //document.getElementById("Stop").disabled = false;
        },
        onBuffer: function(){
                this.setStatus("Buffering...");
-               //document.getElementById("info_"+this.id).innerHTML = "Buffering...";
-               //document.getElementById("PlayOrPause").disabled = true;
-               //document.getElementById("Stop").disabled = false;
        },
        onPlay: function(){
-               //document.getElementById("PlayOrPause").value = "Pause";
-               //document.getElementById("PlayOrPause").disabled = false;
-               //document.getElementById("Stop").disabled = false;
                this.onPlaying();               
        },
        liveFeedRoll: 0,
index 32fbd19..f3fc43a 100644 (file)
@@ -713,7 +713,7 @@ mvPlayList.prototype = {
                var _this=this;
                //js_log('pl play');
                //hide the playlist play button: 
-               $j('#big_play_link_'+this.id).hide();                           
+               $j(this.id + ' .play-btn-large').hide();                                
                
                //un-pause if paused:
                if(this.paused)
index 1cf264a..6c2cbf2 100644 (file)
@@ -4,7 +4,6 @@ if ( !defined( 'MEDIAWIKI' ) ) die( 1 );
 global $wgJSAutoloadLocalClasses, $wgMwEmbedDirectory;
 
 // Load classes from  mv_embed.js
-
 if ( is_file( $wgMwEmbedDirectory . 'mv_embed.js' ) ) {
        // Read the file
        $str = @file_get_contents( $wgMwEmbedDirectory . 'mv_embed.js' );
index aa4fbe4..747eee7 100644 (file)
@@ -1,17 +1,38 @@
 //set the dismissNativeWarn flag:
 _global['dismissNativeWarn'] = false;
 
+
+/** base ctrlBuilder object
+       @param the embedVideo element we are targeting
+*/
+var ctrlBuilder = function( embedObj ) {
+       return this.init( embedObj );
+};
+
 /* 
- * controlsBuilder:
- * 
+ * controlsBuilder prototype:
  */
-var ctrlBuilder = {
+ctrlBuilder.prototype = {
+       init:function( embedObj, opt ){
+               this.embedObj = embedObj;                               
+               
+               //check for skin overrides for ctrlBuilder
+               if( _global[ embedObj.skin_name + 'Config'] )
+                       $j.extend(this, _global[ embedObj.skin_name + 'Config']);
+                       
+       },
+       pClass:'videoPlayer',
        height:29,
        supports:{
                  'options':true,                                
                  'borders':true                           
        },      
-       getControls:function( embedObj ){       
+       getControls:function(){ 
+               //set up local pointer to the embedObj
+               var embedObj = this.embedObj;
+               //set up loadl ctrlBuilder ref
+               var _this = this;
+               
                js_log('f:controlsBuilder:: opt:' + this.options);              
                this.id = (embedObj.pc)?embedObj.pc.pp.id:embedObj.id;
                this.available_width = embedObj.playerPixelWidth();
@@ -31,17 +52,17 @@ var ctrlBuilder = {
                
                        
                //append options to body (if not already there)
-               if($j('#mv_vid_options_'+ctrlBuilder.id).length==0)
-                       $j('body').append( this.components['mv_embedded_options'].o() );                
+               if($j('#mv_vid_options_' + this.id).length==0)
+                       $j('body').append( this.components['mv_embedded_options'].o( this ) );          
                                        
                var o='';       
                for( var i in this.components ){
                        if( this.supports[i] ){
                                if( this.available_width > this.components[i].w ){
                                        //special case with playhead don't add unless we have 60px
-                                       if( i == 'play_head' && ctrlBuilder.available_width < 60 )
+                                       if( i == 'play_head' && this.available_width < 60 )
                                                continue;                                               
-                                       o+=this.components[i].o();
+                                       o+=this.components[i].o( this  );
                                        this.available_width -= this.components[i].w;
                                }else{
                                        js_log('not enough space for control component:' + i);
@@ -54,7 +75,10 @@ var ctrlBuilder = {
         * addControlHooks
         * to be run once controls are attached to the dom
         */
-       addControlHooks:function(embedObj){                                                             
+       addControlHooks:function(){             
+               //set up local pointer to the embedObj
+               var embedObj = this.embedObj;   
+               var _this = this;                                       
                //add in drag/seek hooks: 
                if(!embedObj.base_seeker_slider_offset &&  $j('#mv_seeker_slider_'+embedObj.id).get(0))
                        embedObj.base_seeker_slider_offset = $j('#mv_seeker_slider_'+embedObj.id).get(0).offsetLeft;                      
@@ -63,16 +87,16 @@ var ctrlBuilder = {
                //              'start sec: '+embedObj.start_time_sec + ' base offset: '+embedObj.base_seeker_slider_offset);
                
                //add play hook: 
-               $j('#mv_play_pause_button_' + embedObj.id).unbind().btnBind().click(function(){
+               $j('#mv_play_pause_button_' + embedObj.id ).unbind().btnBind().click(function(){
                        $j('#' + embedObj.id).get(0).play();
                })      
                
-               //big_play_link_ play binding: 
-               $j('#big_play_link_' + embedObj.id).unbind().click(function(){
+               //do play-btn-large binding: 
+               $j('#' + embedObj.id + ' .play-btn-large' ).unbind().btnBind().click(function(){
                        $j('#' + embedObj.id).get(0).play();
                });             
                
-               //add recomend firefox if non-native playback:
+               //add recommend firefox if non-native playback:
                if( embedObj.doNativeWarningCheck() ){                                                                                                                  
                        $j('#dc_'+ embedObj.id).hover(
                                function(){                                                                             
@@ -109,7 +133,7 @@ var ctrlBuilder = {
                }
                
                if( $j.browser.msie  &&  $j.browser.version <= 6){                      
-                       $j('#big_play_link_' + embedObj.id).pngFix();
+                       $j( embedObj.id + ' .play-btn-large' ).pngFix();
                }
                
                
@@ -137,7 +161,7 @@ var ctrlBuilder = {
                        start: function(event, ui){
                                var id = (embedObj.pc!=null)?embedObj.pc.pp.id:embedObj.id;
                                embedObj.userSlide=true;
-                               $j('#big_play_link_'+id).fadeOut('fast');
+                               $j(id + ' .play-btn-large').fadeOut('fast');
                                //if playlist always start at 0
                                embedObj.start_time_sec = (embedObj.instanceOf == 'mvPlayList')?0:
                                                                npt2seconds(embedObj.getTimeReq().split('/')[0]);        
@@ -173,22 +197,22 @@ var ctrlBuilder = {
                $j('#mv_play_head_'+embedObj.id + ' .ui-slider-handle').css('z-index', 4);
                $j('#mv_play_head_'+embedObj.id + ' .ui-slider-range').addClass('ui-corner-all').css('z-index', 2);
                //extended class list for jQuery ui themeing (we can probably refactor this with custom buffering highliter) 
-               $j('#mv_play_head_'+embedObj.id).append( ctrlBuilder.getMvBufferHtml() );
+               $j('#mv_play_head_'+embedObj.id).append( this.getMvBufferHtml() );
                                
                //videoOptions: 
-               $j('#mv_vid_options_'+ctrlBuilder.id+' .vo_selection').click(function(){
+               $j('#mv_vid_options_' + this.id + ' .vo_selection').click(function(){
                        embedObj.selectPlaybackMethod();
-                       $j('#mv_vid_options_'+ctrlBuilder.id).hide();
+                       $j('#mv_vid_options_' + embedObj.id).hide();
                        return false;
                });
                $j('#mv_vid_options_'+ctrlBuilder.id+' .vo_download').click(function(){
                        embedObj.showVideoDownload();
-                       $j('#mv_vid_options_'+ctrlBuilder.id).hide();
+                       $j('#mv_vid_options_'+embedObj.id).hide();
                        return false;
                })              
                $j('#mv_vid_options_'+ctrlBuilder.id+' .vo_showcode').click(function(){
                        embedObj.showEmbedCode();
-                       $j('#mv_vid_options_'+ctrlBuilder.id).hide();
+                       $j('#mv_vid_options_'+embedObj.id).hide();
                        return false;
                });             
                        
@@ -251,17 +275,45 @@ var ctrlBuilder = {
                                'ui-state-highlight ui-corner-all '+
                                'mv_buffer" style="width:0px;height:100%;z-index:1;top:0px" />';
        },
+       getComponent:function( component ) {                            
+               if( this.components[ component ] ){
+                       return this.components[ component ].o( this );
+               }else{
+                       return false;
+               }
+       },
+       /*
+       * components take in the embedObj and return some html for the given component. 
+       * components can be overwritten by skin javascript
+       */
        components:{
                'borders':{
                        'w':8,
-                       'o':function(){
+                       'o':function( ctrlObj ){
                                return  '';
                        }
                },
+               'play-btn-large':{
+                       'w' : 130,
+                       'h' : 96,
+                       'o':function( ctrlObj ){                                                
+                               //get dynamic position for big play button (@@todo maybe use margin:auto ? ) 
+                               return $j('<div/>').attr({
+                                                               'title' : gM('mwe-play_clip'),
+                                                               'class' : "ui-state-default play-btn-large",
+                                                       })
+                                                       .css({
+                                                               'left'  : ((ctrlObj.embedObj.playerPixelWidth() - this.w)/2),
+                                                               'top'   : ((ctrlObj.embedObj.playerPixelHeight() - this.h)/2)
+                                                       })
+                                                       //quick and dirty way to get at jquery html (might be a short cut I am missing?) 
+                                                       .wrap('<div/>').parent().html();                                                
+                       }
+               },
                'mv_embedded_options':{
                        'w':0,
-                       'o':function(){
-                               var o= '<div id="mv_vid_options_'+ctrlBuilder.id+'" class="videoOptions">'+
+                       'o':function( ctrlObj ){
+                               var o= '<div id="mv_vid_options_'+ctrlObj.id+'" class="videoOptions">'+
                                '<div class="videoOptionsTop"></div>'+
                                '<div class="videoOptionsBox">'+
                                '<div class="block">'+
@@ -273,8 +325,8 @@ var ctrlBuilder = {
                                                '<p class="short_match vo_showcode"><a href="#"><span>'+gM('mwe-share')+'</span></a></p>';
                                        
                                        //link to the stream page if we are not already there: 
-                                       if( ctrlBuilder.embedObj.roe && typeof mv_stream_interface == 'undefined' )
-                                               o+='<p class="short_match"><a href="javascript:$j(\'#'+ctrlBuilder.id+'\').get(0).doLinkBack()"><span><strong>Source Page</strong></span></a></p>';
+                                       if( ctrlObj.embedObj.roe && typeof mv_stream_interface == 'undefined' )
+                                               o+='<p class="short_match"><a href="javascript:$j(\'#'+ctrlObj.id+'\').get(0).doLinkBack()"><span><strong>Source Page</strong></span></a></p>';
                                                                                        
                                o+='</div>'+  
                                '</div><!--videoOptionsInner-->' +   
@@ -285,49 +337,49 @@ var ctrlBuilder = {
                },
                'fullscreen':{
                        'w':20,
-                       'o':function(){
-                               return '<div title="' + gM('mwe-player_fullscreen') + '" id="fullscreen_'+ctrlBuilder.id+'" class="ui-state-default ui-corner-all ui-icon_link rButton"><span class="ui-icon ui-icon-arrow-4-diag"></span></div>'
+                       'o':function( ctrlObj ){
+                               return '<div title="' + gM('mwe-player_fullscreen') + '" id="fullscreen_'+ctrlObj.id+'" class="ui-state-default ui-corner-all ui-icon_link rButton"><span class="ui-icon ui-icon-arrow-4-diag"></span></div>'
                        }
                },
                'options':{
                        'w':26,
-                       'o':function(){
-                               return '<div title="'+ gM('mwe-player_options') + '" id="options_button_'+ctrlBuilder.id+'" class="ui-state-default ui-corner-all ui-icon_link rButton"><span class="ui-icon ui-icon-wrench"></span></div>';                                             
+                       'o':function( ctrlObj ){
+                               return '<div title="'+ gM('mwe-player_options') + '" id="options_button_'+ctrlObj.id+'" class="ui-state-default ui-corner-all ui-icon_link rButton"><span class="ui-icon ui-icon-wrench"></span></div>';                                                 
                        }
                },
                'pause':{
                        'w':24,
-                       'o':function(){
-                               return '<div title="' + gM('mwe-play_clip') + '" id="mv_play_pause_button_' + ctrlBuilder.id + '" class="ui-state-default ui-corner-all ui-icon_link lButton"><span class="ui-icon ui-icon-play"/></div>';
+                       'o':function( ctrlObj ){
+                               return '<div title="' + gM('mwe-play_clip') + '" id="mv_play_pause_button_' + ctrlObj.id + '" class="ui-state-default ui-corner-all ui-icon_link lButton"><span class="ui-icon ui-icon-play"/></div>';
                        }
                },
                'closed_captions':{
                        'w':23,
-                       'o':function(){
-                               return '<div title="' + gM('mwe-closed_captions') + '" id="timed_text_'+ctrlBuilder.id+'" class="ui-state-default ui-corner-all ui-icon_link rButton"><span class="ui-icon ui-icon-comment"></span></div>'
+                       'o':function( ctrlObj ){
+                               return '<div title="' + gM('mwe-closed_captions') + '" id="timed_text_'+ctrlObj.id+'" class="ui-state-default ui-corner-all ui-icon_link rButton"><span class="ui-icon ui-icon-comment"></span></div>'
                        }                       
                },
                'volume_control':{
                        'w':23,
-                       'o':function(){
-                                       return '<div title="' + gM('mwe-volume_control') + '" id="volume_control_'+ctrlBuilder.id+'" class="ui-state-default ui-corner-all ui-icon_link rButton">' +
+                       'o':function( ctrlObj ){
+                                       return '<div title="' + gM('mwe-volume_control') + '" id="volume_control_'+ctrlObj.id+'" class="ui-state-default ui-corner-all ui-icon_link rButton">' +
                                                                '<span class="ui-icon ui-icon-volume-on"></span>' +
-                                                               '<div style="position:absolute;display:none;" id="vol_container_'+ctrlBuilder.id+'" class="vol_container ui-corner-all">' +
-                                                                       '<div class="volume_bar" id="volume_bar_' + ctrlBuilder.id + '"></div>' +
+                                                               '<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>' +
                                                                '</div>'+
                                                        '</div>';                                                                                                               
                        }
                },
                'time_display':{
                        'w':90,
-                       'o':function(){
-                               return '<div id="mv_time_'+ctrlBuilder.id+'" class="ui-widget time">' + ctrlBuilder.embedObj.getTimeReq() + '</div>';
+                       'o':function( ctrlObj ){
+                               return '<div id="mv_time_'+ctrlObj.id+'" class="ui-widget time">' + ctrlObj.embedObj.getTimeReq() + '</div>';
                        }
                },
                'play_head':{
                        'w':0, //special case (takes up remaining space) 
-                       'o':function(){
-                               return '<div class="play_head" id="mv_play_head_' + ctrlBuilder.id + '" style="width: ' + ( ctrlBuilder.available_width - 30 ) + 'px;"></div>';
+                       'o':function( ctrlObj ){
+                               return '<div class="play_head" id="mv_play_head_' + ctrlObj.id + '" style="width: ' + ( ctrlObj.available_width - 30 ) + 'px;"></div>';
                        }
                }                                                                               
        }       
index e69de29..bb56998 100644 (file)
@@ -0,0 +1,7 @@
+/*
+* skin js allows you to override contrlBuilder html/class output
+*/
+
+var kskinConfig = {
+       pClass: 'k-player'
+}
\ No newline at end of file
diff --git a/js2/mwEmbed/skins/kskin/playerSkin.css b/js2/mwEmbed/skins/kskin/playerSkin.css
new file mode 100644 (file)
index 0000000..e9daba3
--- /dev/null
@@ -0,0 +1,21 @@
+/*
+* K-skin player
+*/ 
+
+/* 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; }
+
+/* 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-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-hover .ui-icon-pause { background-position: -16px -17px;}
index 0fd4c8f..96ddaf9 100644 (file)
@@ -1,85 +1,85 @@
-\r
-/* player styles */\r
-.k-player { width:400px; height:340px; position:relative;} /* inline via jq */\r
-.k-player * { padding:0; margin:0;} /* inline via jq */\r
-.k-edit-bar { }\r
-.k-edit-bar a { width:33px; padding: 1px 0 0; display:block; text-align:center; font-weight:bold; color:#888; text-decoration:none; background:#F2F2F2;}\r
-\r
-.k-video { width:400px; height:300px; background:#000; margin-bottom:1px;}  /* h & w inline via jq */\r
-.k-control-bar { height:21px; padding: 2px 0 0 6px; margin-top:1px; background: url(images/ksprite.png) repeat-x 0 -81px; font: normal 11px arial,sans-serif; color:#555;}\r
-.k-control-bar button, .k-control-bar div.ui-slider, .k-control-bar div.k-timer { float:left;}\r
-.k-timer { margin-top:2px;}\r
-.k-volume-slider { width:26px;}\r
+
+/* player styles */
+.k-player { width:400px; height:340px; position:relative;} /* inline via jq */
+.k-player * { padding:0; margin:0;} /* inline via jq */
+.k-edit-bar { }
+.k-edit-bar a { width:33px; padding: 1px 0 0; display:block; text-align:center; font-weight:bold; color:#888; text-decoration:none; background:#F2F2F2;}
+
+.k-video { width:400px; height:300px; background:#000; margin-bottom:1px;}  /* h & w inline via jq */
+.k-control-bar { height:21px; padding: 2px 0 0 6px; margin-top:1px; background: url(images/ksprite.png) repeat-x 0 -81px; font: normal 11px arial,sans-serif; color:#555;}
+.k-control-bar button, .k-control-bar div.ui-slider, .k-control-bar div.k-timer { float:left;}
+.k-timer { margin-top:2px;}
+.k-volume-slider { width:26px;}
 .k-control-bar .k-options { width:50px; height:22px; text-transform:uppercase; margin-top:-2px; border: solid 1px #aaa; border-top:none; float:right; font: bold 11px arial,sans-serif; color:#555;}
-\r
-span.ui-icon.ui-icon-k-menu { width:auto; padding-left:2px; background:none; outline:none; cursor:default;}\r
-.k-menu { opacity:0.9; filter:alpha(opacity=90); z-index:1; width:400px; height:300px; background:#181818; position:absolute; top:0px; left:0px;} /* h, w, top inline via jq top:15px*/\r
 
-ul.k-menu-bar{ height:128px; padding: 0 0 5px;position:absolute; bottom:5px;right:0px; list-style: none outside none; background: url(images/ksprite.png) -99px -104px no-repeat;} /* eventually: mtop inline via jq */\r
-.k-menu-bar li a { display:block; width:49px; height:32px; margin-left:1px; text-indent:99999px; background: url(images/ksprite.png) -51px -110px no-repeat; overflow:hidden;}\r
-.k-menu-bar li a:hover { background-position: -1px -110px;}\r
+span.ui-icon.ui-icon-k-menu { width:auto; padding-left:2px; background:none; outline:none; cursor:default;}
+.k-menu { opacity:0.9; filter:alpha(opacity=90); z-index:1; width:400px; height:300px; background:#181818; position:absolute; top:0px; left:0px;} /* h, w, top inline via jq top:15px*/
+
+ul.k-menu-bar{ height:128px; padding: 0 0 5px;position:absolute; bottom:5px;right:0px; list-style: none outside none; background: url(images/ksprite.png) -99px -104px no-repeat;} /* eventually: mtop inline via jq */
+.k-menu-bar li a { display:block; width:49px; height:32px; margin-left:1px; text-indent:99999px; background: url(images/ksprite.png) -51px -110px no-repeat; overflow:hidden;}
+.k-menu-bar li a:hover { background-position: -1px -110px;}
 
 
-.k-menu-bar li.k-download-btn a { background-position: -51px -203px;}\r
+.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;}
-\r
-.k-menu-bar li.k-share-btn a { background-position: -51px -172px;}\r
+
+.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;}
-\r
-.k-menu-bar li.k-credits-btn a { background-position: -51px -141px;}\r
-.k-menu-bar li.k-credits-btn a:hover { background-position: -1px -141px;}\r
+
+.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;}
+
+/* end player */
+
+.k-slide-window { overflow:hidden;}
+.k-menu-screens .menu-credits ul { float:left;}
+.k-menu-screens .menu-credits li { height:39px; padding: 11px 11px 11px 11px; margin-bottom:12px; display:block; background:#333;}
+.k-menu-screens .menu-credits li a { padding:0; background:none;}
+.k-menu-screens .menu-credits li img { float:left; background:blue;}
+.k-menu-screens .menu-credits li div { height:39px; padding-left:11px; floats:left; overflow:hidden;}
  
+a.k-prev-credit, a.k-next-credit { width:65px; height:28px; margin: -13px auto -6px; display:block; background: url(images/ksprite.png) 0px -320px no-repeat;} 
+a.k-next-credit { margin: 0 0 1px; position:absolute; bottom:0; background-position: -0px -290px;}
+a:hover.k-prev-credit { background-position: 0px -238px;}
+a:hover.k-next-credit { background-position: 0px -260px;}
+  
+.k-logo { margin:8px 0 0 1px; display:block;}
  
\r
-.k-menu-screens { width:320px; padding: 13px 10px 15px 15px; float:left;} /* w & h inline via jq */\r
-.k-menu-screens h2 { padding: 0 0 5px 1px; clear:both; font-size:12px; color:#666;}\r
-.k-menu-screens p { margin: 6px 0;}\r
-.k-menu-screens a { ;}\r
-.k-menu-screens a img { border:none;}\r
-.k-menu-screens ul { padding:0; margin: 6px 0 0; list-style: none outside none;}\r
-\r
-.k-edit-screen { width:370px; height:223px; padding-top:77px; text-align:center; background:#181818; color:#fff;}\r
-.k-edit-screen div { }\r
-.k-edit-screen a { color:#7BB8FC;}\r
-.k-edit-screen a img { border:none;}\r
-\r
-/* end player */\r
-\r
-.k-slide-window { overflow:hidden;}\r
-.k-menu-screens .menu-credits ul { float:left;}\r
-.k-menu-screens .menu-credits li { height:39px; padding: 11px 11px 11px 11px; margin-bottom:12px; display:block; background:#333;}\r
-.k-menu-screens .menu-credits li a { padding:0; background:none;}\r
-.k-menu-screens .menu-credits li img { float:left; background:blue;}\r
-.k-menu-screens .menu-credits li div { height:39px; padding-left:11px; floats:left; overflow:hidden;}\r
\r
-a.k-prev-credit, a.k-next-credit { width:65px; height:28px; margin: -13px auto -6px; display:block; background: url(images/ksprite.png) 0px -320px no-repeat;} \r
-a.k-next-credit { margin: 0 0 1px; position:absolute; bottom:0; background-position: -0px -290px;}\r
-a:hover.k-prev-credit { background-position: 0px -238px;}\r
-a:hover.k-next-credit { background-position: 0px -260px;}\r
-  \r
-.k-logo { margin:8px 0 0 1px; display:block;}\r
\r
-.k_field_wrap { border: solid 1px #444; margin-bottom:7px;}\r
-.k-screen.k-share button { width:70px; padding:2px 5px 3px; border:1px solid #000; float:right; background: #D4D4D4 url(images/ksprite.png) no-repeat -32px 0; color:#000; float:right;}\r
-.k-menu textarea { width:100%; height:15px; border: solid 2px #000; border-bottom:none; border-right:none; background:transparent; color:#ccc; overflow:hidden;}\r
-  \r
-.k-screen.k-share div.ui-state-highlight { width:90px; padding:2px 5px; border-color:#554926; float:left; background:none; color:#FFE96E;}\r
-.k-screen.k-share div.ui-state-highlight a { color:#FFE96E; font-weight:bold;}\r
-.k-screen.k-share div.ui-state-highlight a:hover { }\r
-  \r
-.k-menu-screens li { height:14px; margin-bottom:6px;}\r
-.k-menu-screens li a { padding-left:22px; background:url(images/ksprite.png) no-repeat -85px -274px; text-decoration:none;}\r
-.k-menu-screens li a.active, .k-menu-screens li a:hover.active  { background-position: -85px -247px;}\r
-.k-menu-screens li a:hover { background-position: -85px -260px;}\r
-\r
+.k_field_wrap { border: solid 1px #444; margin-bottom:7px;}
+.k-screen.k-share button { width:70px; padding:2px 5px 3px; border:1px solid #000; float:right; background: #D4D4D4 url(images/ksprite.png) no-repeat -32px 0; color:#000; float:right;}
+.k-menu textarea { width:100%; height:15px; border: solid 2px #000; border-bottom:none; border-right:none; background:transparent; color:#ccc; overflow:hidden;}
+  
+.k-screen.k-share div.ui-state-highlight { width:90px; padding:2px 5px; border-color:#554926; float:left; background:none; color:#FFE96E;}
+.k-screen.k-share div.ui-state-highlight a { color:#FFE96E; font-weight:bold;}
+.k-screen.k-share div.ui-state-highlight a:hover { }
+  
+.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-options.ui-state-hover { color:blue;}
  
 .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;}
\r
-.k-player .ui-state-default .ui-icon-arrow-4-diag { background-position: 0 -32px;} /* fullscreen */\r
-.k-player .ui-state-hover .ui-icon-arrow-4-diag { background-position: -16px -32px;}\r
-.k-player .ui-state-default .ui-icon-volume-on,  .ui-state-hover .ui-icon-volume-off,  { margin-left:-6px; background-position: -16px -48px;}\r
-.k-player .ui-state-hover .ui-icon-volume-on, .ui-state-default .ui-icon-volume-off { margin-left:-6px; background-position: 0 -48px;}\r
+.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-play { background:url(images/ksprite.png) no-repeat 0 0;}
 .k-player .ui-state-hover .ui-icon-play { background-position: -16px 0;}
@@ -87,27 +87,27 @@ a:hover.k-next-credit { background-position: 0px -260px;}
 .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-control-bar .ui-slider { height:8px; border: solid 1px #eee; margin: 4px 10px 0 7px; position:relative; background:url(images/ksprite.png) repeat-x 0 -350px;}\r
-.k-control-bar .ui-slider-handle { width:8px; height:8px; top:0px; border: solid 1px #888; margin: -1px 0 0 -5px; display:block; position:relative; background: url(images/ksprite.png) no-repeat -67px -341px; position:absolute;}\r
+.k-control-bar .ui-slider { height:8px; border: solid 1px #eee; margin: 4px 10px 0 7px; position:relative; background:url(images/ksprite.png) repeat-x 0 -350px;}
+.k-control-bar .ui-slider-handle { width:8px; height:8px; top:0px; border: solid 1px #888; margin: -1px 0 0 -5px; display:block; position:relative; background: url(images/ksprite.png) no-repeat -67px -341px; position:absolute;}
 .k-control-bar .ui-slider-range { height:8px; position:absolute; background: url(images/ksprite.png) repeat-x 0 -368px; -moz-border-radius:5px; -webkit-border-radius:5px;}
-.k-control-bar .ui-slider-buffer { height:8px; position:absolute; background: url(images/ksprite.png) repeat-x 0 -359px; -moz-border-radius:5px; -webkit-border-radius:5px;}\r
\r
-.k-control-bar .ui-slider.k-volume-slider { height:15px; margin: 2px 3px 0 -4px; /* ie = m: 3 3 0 -2 */ border:none; background-position: -66px -323px; -moz-border-radius:0px; -webkit-border-radius:0px;}\r
-.k-control-bar .k-volume-slider a.ui-slider-handle { width:8px; height:18px; margin: -3px 5px 0 -1px; border:none; display:block; position:absolute; background:none;}\r
-.k-control-bar .k-volume-slider a:hover.ui-slider-handle { border: solid 1px #999;}\r
-.k-control-bar .k-volume-slider .ui-slider-range { height:17px; position:absolute; background: url(images/ksprite.png) repeat-x -66px -306px; -moz-border-radius:0; -webkit-border-radius:0;}  \r
-\r
-.play-btn-large { width:120px; height:55px; background: url(images/ksprite.png) no-repeat 28px -433px; position:absolute; cursor:pointer;} /*.ui-state-default */\r
-.play-btn-large.ui-state-hover { background: url(images/ksprite.png) no-repeat 28px -377px; }\r
-\r
-.k-volume.ui-state-hover { margin-left:6px; }\r
-\r
-/* move to ie css */\r
-.k-volume-slider span, span.ui-icon-play, span.ui-icon-volume-on, button.k-fullscreen { *margin-top:-1px;}\r
-span.ui-icon-volume-on { *margin-left:0 !important;}\r
-.ui-state-hover.k-volume { *margin-left:0 !important;}\r
-span.ui-icon-k-menu { *margin-top:3px;}\r
-.k-control-bar .ui-slider.k-volume-slider { *margin-left:-2px;}\r
+.k-control-bar .ui-slider-buffer { height:8px; position:absolute; background: url(images/ksprite.png) repeat-x 0 -359px; -moz-border-radius:5px; -webkit-border-radius:5px;}
+.k-control-bar .ui-slider.k-volume-slider { height:15px; margin: 2px 3px 0 -4px; /* ie = m: 3 3 0 -2 */ border:none; background-position: -66px -323px; -moz-border-radius:0px; -webkit-border-radius:0px;}
+.k-control-bar .k-volume-slider a.ui-slider-handle { width:8px; height:18px; margin: -3px 5px 0 -1px; border:none; display:block; position:absolute; background:none;}
+.k-control-bar .k-volume-slider a:hover.ui-slider-handle { border: solid 1px #999;}
+.k-control-bar .k-volume-slider .ui-slider-range { height:17px; position:absolute; background: url(images/ksprite.png) repeat-x -66px -306px; -moz-border-radius:0; -webkit-border-radius:0;}  
+
+.play-btn-large { width:120px; height:55px; background: url(images/ksprite.png) no-repeat 28px -433px; position:absolute; cursor:pointer;} /*.ui-state-default */
+.play-btn-large.ui-state-hover { background: url(images/ksprite.png) no-repeat 28px -377px; }
+
+.k-volume.ui-state-hover { margin-left:6px; }
+
+/* move to ie css */
+.k-volume-slider span, span.ui-icon-play, span.ui-icon-volume-on, button.k-fullscreen { *margin-top:-1px;}
+span.ui-icon-volume-on { *margin-left:0 !important;}
+.ui-state-hover.k-volume { *margin-left:0 !important;}
+span.ui-icon-k-menu { *margin-top:3px;}
+.k-control-bar .ui-slider.k-volume-slider { *margin-left:-2px;}
 /* end IE css */
 
 /* fixes for jquery.ui themes */
@@ -141,4 +141,4 @@ float:left;
 overflow:hidden;
 padding:10px;
 }
-\r
+
diff --git a/js2/mwEmbed/skins/mvpcf/ie_styles.css b/js2/mwEmbed/skins/mvpcf/ie_styles.css
deleted file mode 100644 (file)
index e69de29..0000000
index e69de29..7414afe 100644 (file)
@@ -0,0 +1,7 @@
+/*
+mvpcf skin config
+*/
+
+var mvpcfConfig = {
+       
+};
\ No newline at end of file
diff --git a/js2/mwEmbed/skins/mvpcf/playerSkin.css b/js2/mwEmbed/skins/mvpcf/playerSkin.css
new file mode 100644 (file)
index 0000000..b93566b
--- /dev/null
@@ -0,0 +1,10 @@
+/*
+ * reference player skin 
+ */
+/* large play button: */
+.play-btn-large { width:130px; height:96px; background: url(images/player_big_play_button.png); position:absolute; cursor:pointer; border:none;}/*.ui-state-default */
+
+
+
+
index 7fa0f2c..a79fb58 100644 (file)
@@ -97,6 +97,7 @@ div.floatleft, table.floatleft {
 
 
 /*Video player*/
+
 .videoPlayer {
 /*     width: 100%;*/
        color: white;
@@ -448,7 +449,7 @@ div.floatleft, table.floatleft {
        top:16%;
        width:283px;
 }
-.videoComplete .videoOptionsComplete p {text-align: center; margin: 3px 0; padding: 0;}
+.videoComplete .videoOptionsComplete p { text-align: center; margin: 3px 0; padding: 0; }
 .videoComplete .videoOptionsComplete a {
        color: white;
 /*     font-size: 22px;*/
@@ -492,61 +493,6 @@ div.floatleft, table.floatleft {
        margin:10px;
 }
 
-#SEQUENCER CSS:
-#resizable css:
-/*
-.ui-resizable-handle { position: absolute; background: #ddd; display: none; }
-.ui-resizable .ui-resizable-handle { display: block }
-.ui-resizable-e { z-index:5; position:absolute; cursor: e-resize;
-       width: 15px;height:19px; top: 0px; bottom: 0px; right: 0px;
-       background: transparent url(images/slider_handle_red.gif) no-repeat scroll 0% 0%;
-}
-.ui-resizable-w { z-index:5; position:absolute; cursor: w-resize;
-       width: 15px;height:19px; top: 0px; bottom: 0px; left: 0px;
-       background: transparent url(images/slider_handle_green.gif) no-repeat scroll 0% 0%;
-}
-.ui-dragSpan {
-       filter: alpha(opacity=70); 
-       -moz-opacity: .7;
-       background-color:#AAF; 
-       position:absolute; 
-       left: 10px; 
-       right:10px;
-       height:19px;  
-}
-*/
-/*
-div.rsd_cp_tab_container{
-       display:inline;
-       margin:0;
-       padding:5px 2px 10px 2px;
-       background:#F7F7F7 url(remote_search/tab-bg.png) repeat-x scroll left bottom;
-       border:1px solid #777;  
-       margin-left:7px;
-       cursor:pointer;
-       float:left;
-       width:auto;
-}
-div.rsd_cp_tab {
-       display:inline;
-       margin:0;
-       padding:5px 2px 10px 2px;
-       background:#F7F7F7 url(remote_search/tab-bg.png) repeat-x scroll left bottom;
-       border:1px solid #777;  
-       margin-left:7px;
-       cursor:pointer;
-       float:left;
-       width:auto;
-       position:relative;
-}
-
-div.rsd_selected {
-       background:#FFFFFF none repeat scroll 0 0;      
-       border-bottom:0;
-       padding-top:6px;
-       z-index:2;
-}
-*/
 .rsd_cp_tab img{
        border:0px;
 }
@@ -556,18 +502,6 @@ div.rsd_selected {
        top:2px;
        bottom:2px;             
 }
-/*#rsd_results {
-       border-top:0;
-       border:1px solid #777;
-       /*position:relative;*/  
-       background:#FFF;        
-       left:2px;
-       right:2px;
-       bottom:2px;     
-       overflow:auto;
-       position:absolute;
-       top:75px;
-}*/
 #rsd_resource_edit{
        z-index:2;
 }
index 6632aef..d413346 100644 (file)
@@ -1,18 +1,20 @@
 /*
  * this file exposes some of the functionality of mwEmbed to wikis
- * that are not yet running the new-upload branch
+ * that do not yet have js2 enabled
  */
 
 var urlparts = getRemoteEmbedPath();
 var mwEmbedHostPath = urlparts[0];
 var reqAguments = urlparts[1];
 
-// Check if mvEmbed is already loaded (ie the js2 branch is active) in which case do nothing
-if( typeof MV_EMBED_VERSION == 'undefined' ) {
-       doPageSpecificRewrite();
-}
+addOnloadHook( function(){     
+       //only do rewrites if MV_EMBED / js2 is "off"
+       if( typeof MV_EMBED_VERSION == 'undefined' ) {
+               doPageSpecificRewrite();
+       }
+});
 
-function doPageSpecificRewrite() {
+function doPageSpecificRewrite() {     
        // Add media wizard
        if( wgAction == 'edit' || wgAction == 'submit' ) {
                load_mv_embed( function() {
@@ -25,25 +27,78 @@ function doPageSpecificRewrite() {
                load_mv_embed( function() {
                        importScriptURI( mwEmbedHostPath + '/uploadPage.js' + reqAguments );
                } );
-       }
-
-       // OggHandler rewrite
+       }       
+       
+       // OggHandler rewrite for view pages:
        var vidIdList = [];
        var divs = document.getElementsByTagName( 'div' );
        for( var i = 0; i < divs.length; i++ ) {
                if( divs[i].id && divs[i].id.substring( 0, 11 ) == 'ogg_player_' ) {
-                       vidIdList.push( divs[i].getAttribute( "id" ) );
+                       vidIdList.push( divs[i].getAttribute( "id" ) );                 
                }
-       }
+       }       
        if( vidIdList.length > 0 ) {
                load_mv_embed( function() {
-                       mvJsLoader.embedVideoCheck( function() {
-                               // Do utilty rewrite of OggHandler content:
+                       mvJsLoader.embedVideoCheck( function() {                                
+                               // Do utility rewrite of OggHandler content:
                                rewrite_for_OggHandler( vidIdList );
                        } );
                } );
        }
 }
+// will be deprecated in favor of updates to OggHandler
+function rewrite_for_OggHandler( vidIdList ){
+       for( var i = 0; i < vidIdList.length; i++ ) {
+               var vidId = vidIdList[i];                       
+               // Grab the thumbnail and src of the video
+               var pimg = $j( '#' + vidId + ' img' );
+               var poster_attr = 'poster = "' + pimg.attr( 'src' ) + '" ';
+               var pwidth = pimg.attr( 'width' );
+               var pheight = pimg.attr( 'height' );
+
+               var type_attr = '';
+               // Check for audio
+               if( pwidth == '22' && pheight == '22' ) {
+                       pwidth = '400';
+                       pheight = '100';
+                       type_attr = 'type="audio/ogg"';
+                       poster_attr = '';
+               }
+
+               // Parsed values:
+               var src = '';
+               var duration = '';
+       
+               var re = new RegExp( /videoUrl(&quot;:?\s*)*([^&]*)/ );
+               src = re.exec( $j( '#'+vidId).html() )[2];
+
+               var re = new RegExp( /length(&quot;:?\s*)*([^&]*)/ );
+               duration = re.exec( $j( '#'+vidId).html() )[2];
+
+               var re = new RegExp( /offset(&quot;:?\s*)*([^&]*)/ );
+               offset = re.exec( $j( '#'+vidId).html() )[2];
+               var offset_attr = offset ? 'startOffset="' + offset + '"' : '';
+
+               // Rewrite that video id (do async calls to avoid locking)              
+               if( src ) {                             
+                       // Replace the top div with the mv_embed based player:
+                       var vid_html = '<video id="vid_' + i +'" '+
+                                       'src="' + src + '" ' +
+                                       poster_attr + ' ' +
+                                       type_attr + ' ' +
+                                       offset_attr + ' ' +
+                                       'duration="' + duration + '" ' +
+                                       'style="width:' + pwidth + 'px;height:' +
+                                               pheight + 'px;"></video>';
+                       //set the video tag inner html and update the height                            
+                       $j( '#' + vidId ).html( vid_html )
+                               .css('height', pheight + 20;
+                       
+               }
+               
+               rewrite_by_id( 'vid_' + i );            
+       }
+}
 
 function getRemoteEmbedPath() {
        for( var i = 0; i < document.getElementsByTagName( 'script' ).length; i++ ) {
@@ -75,7 +130,9 @@ function load_mv_embed( callback ) {
 
 function check_for_mv_embed( callback ) {
        if( typeof MV_EMBED_VERSION == 'undefined' ) {
-               setTimeout( 'check_for_mv_embed( ' + callback + ');', 25 );
+               setTimeout( function(){
+                       check_for_mv_embed( callback );
+               }, 25 );
        } else {
                callback();
        }