| Index: trunk/phase3/js2/remoteMwEmbed.js |
| — | — | @@ -1,18 +1,20 @@ |
| 2 | 2 | /* |
| 3 | 3 | * this file exposes some of the functionality of mwEmbed to wikis |
| 4 | | - * that are not yet running the new-upload branch |
| | 4 | + * that do not yet have js2 enabled |
| 5 | 5 | */ |
| 6 | 6 | |
| 7 | 7 | var urlparts = getRemoteEmbedPath(); |
| 8 | 8 | var mwEmbedHostPath = urlparts[0]; |
| 9 | 9 | var reqAguments = urlparts[1]; |
| 10 | 10 | |
| 11 | | -// Check if mvEmbed is already loaded (ie the js2 branch is active) in which case do nothing |
| 12 | | -if( typeof MV_EMBED_VERSION == 'undefined' ) { |
| 13 | | - doPageSpecificRewrite(); |
| 14 | | -} |
| | 11 | +addOnloadHook( function(){ |
| | 12 | + //only do rewrites if MV_EMBED / js2 is "off" |
| | 13 | + if( typeof MV_EMBED_VERSION == 'undefined' ) { |
| | 14 | + doPageSpecificRewrite(); |
| | 15 | + } |
| | 16 | +}); |
| 15 | 17 | |
| 16 | | -function doPageSpecificRewrite() { |
| | 18 | +function doPageSpecificRewrite() { |
| 17 | 19 | // Add media wizard |
| 18 | 20 | if( wgAction == 'edit' || wgAction == 'submit' ) { |
| 19 | 21 | load_mv_embed( function() { |
| — | — | @@ -25,26 +27,79 @@ |
| 26 | 28 | load_mv_embed( function() { |
| 27 | 29 | importScriptURI( mwEmbedHostPath + '/uploadPage.js' + reqAguments ); |
| 28 | 30 | } ); |
| 29 | | - } |
| 30 | | - |
| 31 | | - // OggHandler rewrite |
| | 31 | + } |
| | 32 | + |
| | 33 | + // OggHandler rewrite for view pages: |
| 32 | 34 | var vidIdList = []; |
| 33 | 35 | var divs = document.getElementsByTagName( 'div' ); |
| 34 | 36 | for( var i = 0; i < divs.length; i++ ) { |
| 35 | 37 | if( divs[i].id && divs[i].id.substring( 0, 11 ) == 'ogg_player_' ) { |
| 36 | | - vidIdList.push( divs[i].getAttribute( "id" ) ); |
| | 38 | + vidIdList.push( divs[i].getAttribute( "id" ) ); |
| 37 | 39 | } |
| 38 | | - } |
| | 40 | + } |
| 39 | 41 | if( vidIdList.length > 0 ) { |
| 40 | 42 | load_mv_embed( function() { |
| 41 | | - mvJsLoader.embedVideoCheck( function() { |
| 42 | | - // Do utilty rewrite of OggHandler content: |
| | 43 | + mvJsLoader.embedVideoCheck( function() { |
| | 44 | + // Do utility rewrite of OggHandler content: |
| 43 | 45 | rewrite_for_OggHandler( vidIdList ); |
| 44 | 46 | } ); |
| 45 | 47 | } ); |
| 46 | 48 | } |
| 47 | 49 | } |
| | 50 | +// will be deprecated in favor of updates to OggHandler |
| | 51 | +function rewrite_for_OggHandler( vidIdList ){ |
| | 52 | + for( var i = 0; i < vidIdList.length; i++ ) { |
| | 53 | + var vidId = vidIdList[i]; |
| | 54 | + // Grab the thumbnail and src of the video |
| | 55 | + var pimg = $j( '#' + vidId + ' img' ); |
| | 56 | + var poster_attr = 'poster = "' + pimg.attr( 'src' ) + '" '; |
| | 57 | + var pwidth = pimg.attr( 'width' ); |
| | 58 | + var pheight = pimg.attr( 'height' ); |
| 48 | 59 | |
| | 60 | + var type_attr = ''; |
| | 61 | + // Check for audio |
| | 62 | + if( pwidth == '22' && pheight == '22' ) { |
| | 63 | + pwidth = '400'; |
| | 64 | + pheight = '100'; |
| | 65 | + type_attr = 'type="audio/ogg"'; |
| | 66 | + poster_attr = ''; |
| | 67 | + } |
| | 68 | + |
| | 69 | + // Parsed values: |
| | 70 | + var src = ''; |
| | 71 | + var duration = ''; |
| | 72 | + |
| | 73 | + var re = new RegExp( /videoUrl(":?\s*)*([^&]*)/ ); |
| | 74 | + src = re.exec( $j( '#'+vidId).html() )[2]; |
| | 75 | + |
| | 76 | + var re = new RegExp( /length(":?\s*)*([^&]*)/ ); |
| | 77 | + duration = re.exec( $j( '#'+vidId).html() )[2]; |
| | 78 | + |
| | 79 | + var re = new RegExp( /offset(":?\s*)*([^&]*)/ ); |
| | 80 | + offset = re.exec( $j( '#'+vidId).html() )[2]; |
| | 81 | + var offset_attr = offset ? 'startOffset="' + offset + '"' : ''; |
| | 82 | + |
| | 83 | + // Rewrite that video id (do async calls to avoid locking) |
| | 84 | + if( src ) { |
| | 85 | + // Replace the top div with the mv_embed based player: |
| | 86 | + var vid_html = '<video id="vid_' + i +'" '+ |
| | 87 | + 'src="' + src + '" ' + |
| | 88 | + poster_attr + ' ' + |
| | 89 | + type_attr + ' ' + |
| | 90 | + offset_attr + ' ' + |
| | 91 | + 'duration="' + duration + '" ' + |
| | 92 | + 'style="width:' + pwidth + 'px;height:' + |
| | 93 | + pheight + 'px;"></video>'; |
| | 94 | + //set the video tag inner html and update the height |
| | 95 | + $j( '#' + vidId ).html( vid_html ) |
| | 96 | + .css('height', pheight + 20; |
| | 97 | + |
| | 98 | + } |
| | 99 | + |
| | 100 | + rewrite_by_id( 'vid_' + i ); |
| | 101 | + } |
| | 102 | +} |
| | 103 | + |
| 49 | 104 | function getRemoteEmbedPath() { |
| 50 | 105 | for( var i = 0; i < document.getElementsByTagName( 'script' ).length; i++ ) { |
| 51 | 106 | var s = document.getElementsByTagName( 'script' )[i]; |
| — | — | @@ -75,7 +130,9 @@ |
| 76 | 131 | |
| 77 | 132 | function check_for_mv_embed( callback ) { |
| 78 | 133 | if( typeof MV_EMBED_VERSION == 'undefined' ) { |
| 79 | | - setTimeout( 'check_for_mv_embed( ' + callback + ');', 25 ); |
| | 134 | + setTimeout( function(){ |
| | 135 | + check_for_mv_embed( callback ); |
| | 136 | + }, 25 ); |
| 80 | 137 | } else { |
| 81 | 138 | callback(); |
| 82 | 139 | } |
| Index: trunk/phase3/js2/editPage.js |
| — | — | @@ -1,51 +1,51 @@ |
| 2 | 2 | /* |
| 3 | 3 | * JS2-style replacement for MediaWiki edit.js |
| 4 | | - * @todo port the rest of it to here |
| | 4 | + * (right now it just supports the toolbar) |
| 5 | 5 | */ |
| 6 | 6 | |
| 7 | | -// Setup configuration vars |
| 8 | | -if( !mwAddMediaConfig ) { |
| 9 | | - var mwAddMediaConfig = { |
| | 7 | +// Setup configuration vars (if not set already) |
| | 8 | +if( !mwAddMediaConfig ) |
| | 9 | + var mwAddMediaConfig = {}; |
| | 10 | + |
| | 11 | +//The default editPage AMW config |
| | 12 | +var defaultAddMediaConfig = { |
| 10 | 13 | 'profile': 'mediawiki_edit', |
| 11 | 14 | 'target_textbox': '#wpTextbox1', |
| 12 | 15 | // Note: selections in the textbox will take over the default query |
| 13 | 16 | 'default_query': wgTitle, |
| 14 | 17 | 'target_title': wgPageName, |
| 15 | 18 | // Here we can setup the content provider overrides |
| 16 | | - 'enabled_cps':['wiki_commons'], |
| | 19 | + 'enabled_cps':['wiki_commons'], |
| 17 | 20 | // The local wiki API URL: |
| 18 | 21 | 'local_wiki_api_url': wgServer + wgScriptPath + '/api.php' |
| 19 | | - }; |
| 20 | | -} |
| 21 | | - |
| | 22 | +}; |
| 22 | 23 | js2AddOnloadHook( function() { |
| 23 | | - mwEditPageHelper.init(); |
| | 24 | + mwEditPageHelper.init( |
| | 25 | + $j.extend( true, defaultAddMediaConfig, mwAddMediaConfig ) |
| | 26 | + ); |
| 24 | 27 | }); |
| 25 | 28 | var mwEditPageHelper = { |
| 26 | | - init: function() { |
| 27 | | - var _this = this; |
| 28 | | - //@@todo check for a new version of the toolbar and via toolbar API |
| 29 | | - |
| 30 | | - // Kind of tricky, it would be nice to use a "loader" call here to avoid concurrency issues. |
| | 29 | + init: function( amwConf ) { |
| | 30 | + var _this = this; |
| | 31 | + // kind of tricky, it would be nice to use run on ready "loader" call here |
| 31 | 32 | if( typeof $j.wikiEditor != 'undefined' ) { |
| 32 | 33 | setTimeout( function() { |
| 33 | 34 | $j( '.wikiEditor-ui [rel=file]' ).unbind().addMediaWiz( |
| 34 | | - mwAddMediaConfig |
| | 35 | + amwConf |
| 35 | 36 | ); |
| 36 | | - }, |
| 37 | | - 100 ); |
| | 37 | + }, 100 ); |
| 38 | 38 | } else { |
| 39 | 39 | // Add the add-media-wizard button for old toolbar: |
| 40 | 40 | $j( '#toolbar' ).append( '<img style="cursor:pointer" id="btn-add-media-wiz" src="' + |
| 41 | | - mv_skin_img_path + 'Button_add_media.png">' ); |
| | 41 | + mv_skin_img_path + 'Button_add_media.png">' ); |
| 42 | 42 | $j( '#btn-add-media-wiz' ).addMediaWiz( |
| 43 | | - mwAddMediaConfig |
| | 43 | + amwConf |
| 44 | 44 | ); |
| 45 | 45 | } |
| 46 | 46 | |
| 47 | 47 | // Add to new toolbar (need to use api) |
| 48 | 48 | /*$j( '[rel=insert] tool-file' ).addMediaWiz( |
| 49 | | - mwAddMediaConfig |
| | 49 | + mwAddMediaConfig |
| 50 | 50 | );*/ |
| 51 | 51 | } |
| 52 | 52 | } |
| Index: trunk/phase3/js2/mwEmbed/jsScriptLoader.php |
| — | — | @@ -4,6 +4,7 @@ |
| 5 | 5 | * @file |
| 6 | 6 | */ |
| 7 | 7 | // Check if we are being invoked in a MediaWiki context or stand alone usage: |
| | 8 | + |
| 8 | 9 | if ( !defined( 'MEDIAWIKI' ) ) { |
| 9 | 10 | // Load noMediaWiki helper |
| 10 | 11 | require_once( realpath( dirname( __FILE__ ) ) . '/php/noMediaWikiConfig.php' ); |
| — | — | @@ -206,7 +207,6 @@ |
| 207 | 208 | if( $t->exists() |
| 208 | 209 | && ( $t->getNamespace() == NS_MEDIAWIKI |
| 209 | 210 | || $t->getNamespace() == NS_USER ) ){ |
| 210 | | - |
| 211 | 211 | $doAddWT = true; |
| 212 | 212 | } |
| 213 | 213 | } |
| Index: trunk/phase3/js2/mwEmbed/example_usage/Player_Simple_Themable.html |
| — | — | @@ -12,11 +12,11 @@ |
| 13 | 13 | To play with dynamic Themes install <a href="http://jqueryui.com/themeroller/developertool/">Themeroller</a><p><p> |
| 14 | 14 | <div style="width:450px;float:left"> |
| 15 | 15 | <video src="http://upload.wikimedia.org/wikipedia/commons/d/d3/Okapia_johnstoni5.ogg" |
| 16 | | - thumbnail="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Okapia_johnstoni5.ogg/mid-Okapia_johnstoni5.ogg.jpg" durationHint="15"></video> |
| | 16 | + poster="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Okapia_johnstoni5.ogg/mid-Okapia_johnstoni5.ogg.jpg" durationHint="15"></video> |
| 17 | 17 | </div> |
| 18 | 18 | <div style="float:left"> |
| 19 | 19 | <b>Source Code used:</b><br> |
| 20 | | -<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> |
| | 20 | +<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> |
| 21 | 21 | </div> |
| 22 | 22 | </body> |
| 23 | 23 | </html> |
| Index: trunk/phase3/js2/mwEmbed/example_usage/Firefogg_Make_Advanced.html |
| — | — | @@ -2,8 +2,8 @@ |
| 3 | 3 | <html><head> |
| 4 | 4 | <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
| 5 | 5 | <title>Firefogg - Make Ogg Video in your Browser</title> |
| 6 | | - <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> |
| 7 | | - <!-- <script type="text/javascript" src="../mv_embed.js"></script> --> |
| | 6 | + <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> |
| | 7 | + <!-- <script type="text/javascript" src="../mv_embed.js"></script> --> |
| 8 | 8 | <style type="text/css" media="all">body { |
| 9 | 9 | margin: 0; |
| 10 | 10 | padding: 0; |
| Index: trunk/phase3/js2/mwEmbed/libAddMedia/remoteSearchDriver.js |
| — | — | @@ -346,7 +346,7 @@ |
| 347 | 347 | } |
| 348 | 348 | } |
| 349 | 349 | } |
| 350 | | - |
| | 350 | + |
| 351 | 351 | //set up the default model config: |
| 352 | 352 | this.dmodalCss = { |
| 353 | 353 | 'width':'auto', |
| Index: trunk/phase3/js2/mwEmbed/libSequencer/mvPlayList.js |
| — | — | @@ -713,7 +713,7 @@ |
| 714 | 714 | var _this=this; |
| 715 | 715 | //js_log('pl play'); |
| 716 | 716 | //hide the playlist play button: |
| 717 | | - $j('#big_play_link_'+this.id).hide(); |
| | 717 | + $j(this.id + ' .play-btn-large').hide(); |
| 718 | 718 | |
| 719 | 719 | //un-pause if paused: |
| 720 | 720 | if(this.paused) |
| Index: trunk/phase3/js2/mwEmbed/php/jsAutoloadLocalClasses.php |
| — | — | @@ -4,7 +4,6 @@ |
| 5 | 5 | global $wgJSAutoloadLocalClasses, $wgMwEmbedDirectory; |
| 6 | 6 | |
| 7 | 7 | // Load classes from mv_embed.js |
| 8 | | - |
| 9 | 8 | if ( is_file( $wgMwEmbedDirectory . 'mv_embed.js' ) ) { |
| 10 | 9 | // Read the file |
| 11 | 10 | $str = @file_get_contents( $wgMwEmbedDirectory . 'mv_embed.js' ); |
| Index: trunk/phase3/js2/mwEmbed/skins/ctrlBuilder.js |
| — | — | @@ -1,17 +1,38 @@ |
| 2 | 2 | //set the dismissNativeWarn flag: |
| 3 | 3 | _global['dismissNativeWarn'] = false; |
| 4 | 4 | |
| | 5 | + |
| | 6 | +/** base ctrlBuilder object |
| | 7 | + @param the embedVideo element we are targeting |
| | 8 | +*/ |
| | 9 | +var ctrlBuilder = function( embedObj ) { |
| | 10 | + return this.init( embedObj ); |
| | 11 | +}; |
| | 12 | + |
| 5 | 13 | /* |
| 6 | | - * controlsBuilder: |
| 7 | | - * |
| | 14 | + * controlsBuilder prototype: |
| 8 | 15 | */ |
| 9 | | -var ctrlBuilder = { |
| | 16 | +ctrlBuilder.prototype = { |
| | 17 | + init:function( embedObj, opt ){ |
| | 18 | + this.embedObj = embedObj; |
| | 19 | + |
| | 20 | + //check for skin overrides for ctrlBuilder |
| | 21 | + if( _global[ embedObj.skin_name + 'Config'] ) |
| | 22 | + $j.extend(this, _global[ embedObj.skin_name + 'Config']); |
| | 23 | + |
| | 24 | + }, |
| | 25 | + pClass:'videoPlayer', |
| 10 | 26 | height:29, |
| 11 | 27 | supports:{ |
| 12 | 28 | 'options':true, |
| 13 | 29 | 'borders':true |
| 14 | 30 | }, |
| 15 | | - getControls:function( embedObj ){ |
| | 31 | + getControls:function(){ |
| | 32 | + //set up local pointer to the embedObj |
| | 33 | + var embedObj = this.embedObj; |
| | 34 | + //set up loadl ctrlBuilder ref |
| | 35 | + var _this = this; |
| | 36 | + |
| 16 | 37 | js_log('f:controlsBuilder:: opt:' + this.options); |
| 17 | 38 | this.id = (embedObj.pc)?embedObj.pc.pp.id:embedObj.id; |
| 18 | 39 | this.available_width = embedObj.playerPixelWidth(); |
| — | — | @@ -31,17 +52,17 @@ |
| 32 | 53 | |
| 33 | 54 | |
| 34 | 55 | //append options to body (if not already there) |
| 35 | | - if($j('#mv_vid_options_'+ctrlBuilder.id).length==0) |
| 36 | | - $j('body').append( this.components['mv_embedded_options'].o() ); |
| | 56 | + if($j('#mv_vid_options_' + this.id).length==0) |
| | 57 | + $j('body').append( this.components['mv_embedded_options'].o( this ) ); |
| 37 | 58 | |
| 38 | 59 | var o=''; |
| 39 | 60 | for( var i in this.components ){ |
| 40 | 61 | if( this.supports[i] ){ |
| 41 | 62 | if( this.available_width > this.components[i].w ){ |
| 42 | 63 | //special case with playhead don't add unless we have 60px |
| 43 | | - if( i == 'play_head' && ctrlBuilder.available_width < 60 ) |
| | 64 | + if( i == 'play_head' && this.available_width < 60 ) |
| 44 | 65 | continue; |
| 45 | | - o+=this.components[i].o(); |
| | 66 | + o+=this.components[i].o( this ); |
| 46 | 67 | this.available_width -= this.components[i].w; |
| 47 | 68 | }else{ |
| 48 | 69 | js_log('not enough space for control component:' + i); |
| — | — | @@ -54,7 +75,10 @@ |
| 55 | 76 | * addControlHooks |
| 56 | 77 | * to be run once controls are attached to the dom |
| 57 | 78 | */ |
| 58 | | - addControlHooks:function(embedObj){ |
| | 79 | + addControlHooks:function(){ |
| | 80 | + //set up local pointer to the embedObj |
| | 81 | + var embedObj = this.embedObj; |
| | 82 | + var _this = this; |
| 59 | 83 | //add in drag/seek hooks: |
| 60 | 84 | if(!embedObj.base_seeker_slider_offset && $j('#mv_seeker_slider_'+embedObj.id).get(0)) |
| 61 | 85 | embedObj.base_seeker_slider_offset = $j('#mv_seeker_slider_'+embedObj.id).get(0).offsetLeft; |
| — | — | @@ -63,16 +87,16 @@ |
| 64 | 88 | // 'start sec: '+embedObj.start_time_sec + ' base offset: '+embedObj.base_seeker_slider_offset); |
| 65 | 89 | |
| 66 | 90 | //add play hook: |
| 67 | | - $j('#mv_play_pause_button_' + embedObj.id).unbind().btnBind().click(function(){ |
| | 91 | + $j('#mv_play_pause_button_' + embedObj.id ).unbind().btnBind().click(function(){ |
| 68 | 92 | $j('#' + embedObj.id).get(0).play(); |
| 69 | 93 | }) |
| 70 | 94 | |
| 71 | | - //big_play_link_ play binding: |
| 72 | | - $j('#big_play_link_' + embedObj.id).unbind().click(function(){ |
| | 95 | + //do play-btn-large binding: |
| | 96 | + $j('#' + embedObj.id + ' .play-btn-large' ).unbind().btnBind().click(function(){ |
| 73 | 97 | $j('#' + embedObj.id).get(0).play(); |
| 74 | 98 | }); |
| 75 | 99 | |
| 76 | | - //add recomend firefox if non-native playback: |
| | 100 | + //add recommend firefox if non-native playback: |
| 77 | 101 | if( embedObj.doNativeWarningCheck() ){ |
| 78 | 102 | $j('#dc_'+ embedObj.id).hover( |
| 79 | 103 | function(){ |
| — | — | @@ -109,7 +133,7 @@ |
| 110 | 134 | } |
| 111 | 135 | |
| 112 | 136 | if( $j.browser.msie && $j.browser.version <= 6){ |
| 113 | | - $j('#big_play_link_' + embedObj.id).pngFix(); |
| | 137 | + $j( embedObj.id + ' .play-btn-large' ).pngFix(); |
| 114 | 138 | } |
| 115 | 139 | |
| 116 | 140 | |
| — | — | @@ -137,7 +161,7 @@ |
| 138 | 162 | start: function(event, ui){ |
| 139 | 163 | var id = (embedObj.pc!=null)?embedObj.pc.pp.id:embedObj.id; |
| 140 | 164 | embedObj.userSlide=true; |
| 141 | | - $j('#big_play_link_'+id).fadeOut('fast'); |
| | 165 | + $j(id + ' .play-btn-large').fadeOut('fast'); |
| 142 | 166 | //if playlist always start at 0 |
| 143 | 167 | embedObj.start_time_sec = (embedObj.instanceOf == 'mvPlayList')?0: |
| 144 | 168 | npt2seconds(embedObj.getTimeReq().split('/')[0]); |
| — | — | @@ -173,22 +197,22 @@ |
| 174 | 198 | $j('#mv_play_head_'+embedObj.id + ' .ui-slider-handle').css('z-index', 4); |
| 175 | 199 | $j('#mv_play_head_'+embedObj.id + ' .ui-slider-range').addClass('ui-corner-all').css('z-index', 2); |
| 176 | 200 | //extended class list for jQuery ui themeing (we can probably refactor this with custom buffering highliter) |
| 177 | | - $j('#mv_play_head_'+embedObj.id).append( ctrlBuilder.getMvBufferHtml() ); |
| | 201 | + $j('#mv_play_head_'+embedObj.id).append( this.getMvBufferHtml() ); |
| 178 | 202 | |
| 179 | 203 | //videoOptions: |
| 180 | | - $j('#mv_vid_options_'+ctrlBuilder.id+' .vo_selection').click(function(){ |
| | 204 | + $j('#mv_vid_options_' + this.id + ' .vo_selection').click(function(){ |
| 181 | 205 | embedObj.selectPlaybackMethod(); |
| 182 | | - $j('#mv_vid_options_'+ctrlBuilder.id).hide(); |
| | 206 | + $j('#mv_vid_options_' + embedObj.id).hide(); |
| 183 | 207 | return false; |
| 184 | 208 | }); |
| 185 | 209 | $j('#mv_vid_options_'+ctrlBuilder.id+' .vo_download').click(function(){ |
| 186 | 210 | embedObj.showVideoDownload(); |
| 187 | | - $j('#mv_vid_options_'+ctrlBuilder.id).hide(); |
| | 211 | + $j('#mv_vid_options_'+embedObj.id).hide(); |
| 188 | 212 | return false; |
| 189 | 213 | }) |
| 190 | 214 | $j('#mv_vid_options_'+ctrlBuilder.id+' .vo_showcode').click(function(){ |
| 191 | 215 | embedObj.showEmbedCode(); |
| 192 | | - $j('#mv_vid_options_'+ctrlBuilder.id).hide(); |
| | 216 | + $j('#mv_vid_options_'+embedObj.id).hide(); |
| 193 | 217 | return false; |
| 194 | 218 | }); |
| 195 | 219 | |
| — | — | @@ -251,17 +275,45 @@ |
| 252 | 276 | 'ui-state-highlight ui-corner-all '+ |
| 253 | 277 | 'mv_buffer" style="width:0px;height:100%;z-index:1;top:0px" />'; |
| 254 | 278 | }, |
| | 279 | + getComponent:function( component ) { |
| | 280 | + if( this.components[ component ] ){ |
| | 281 | + return this.components[ component ].o( this ); |
| | 282 | + }else{ |
| | 283 | + return false; |
| | 284 | + } |
| | 285 | + }, |
| | 286 | + /* |
| | 287 | + * components take in the embedObj and return some html for the given component. |
| | 288 | + * components can be overwritten by skin javascript |
| | 289 | + */ |
| 255 | 290 | components:{ |
| 256 | 291 | 'borders':{ |
| 257 | 292 | 'w':8, |
| 258 | | - 'o':function(){ |
| | 293 | + 'o':function( ctrlObj ){ |
| 259 | 294 | return ''; |
| 260 | 295 | } |
| 261 | 296 | }, |
| | 297 | + 'play-btn-large':{ |
| | 298 | + 'w' : 130, |
| | 299 | + 'h' : 96, |
| | 300 | + 'o':function( ctrlObj ){ |
| | 301 | + //get dynamic position for big play button (@@todo maybe use margin:auto ? ) |
| | 302 | + return $j('<div/>').attr({ |
| | 303 | + 'title' : gM('mwe-play_clip'), |
| | 304 | + 'class' : "ui-state-default play-btn-large", |
| | 305 | + }) |
| | 306 | + .css({ |
| | 307 | + 'left' : ((ctrlObj.embedObj.playerPixelWidth() - this.w)/2), |
| | 308 | + 'top' : ((ctrlObj.embedObj.playerPixelHeight() - this.h)/2) |
| | 309 | + }) |
| | 310 | + //quick and dirty way to get at jquery html (might be a short cut I am missing?) |
| | 311 | + .wrap('<div/>').parent().html(); |
| | 312 | + } |
| | 313 | + }, |
| 262 | 314 | 'mv_embedded_options':{ |
| 263 | 315 | 'w':0, |
| 264 | | - 'o':function(){ |
| 265 | | - var o= '<div id="mv_vid_options_'+ctrlBuilder.id+'" class="videoOptions">'+ |
| | 316 | + 'o':function( ctrlObj ){ |
| | 317 | + var o= '<div id="mv_vid_options_'+ctrlObj.id+'" class="videoOptions">'+ |
| 266 | 318 | '<div class="videoOptionsTop"></div>'+ |
| 267 | 319 | '<div class="videoOptionsBox">'+ |
| 268 | 320 | '<div class="block">'+ |
| — | — | @@ -273,8 +325,8 @@ |
| 274 | 326 | '<p class="short_match vo_showcode"><a href="#"><span>'+gM('mwe-share')+'</span></a></p>'; |
| 275 | 327 | |
| 276 | 328 | //link to the stream page if we are not already there: |
| 277 | | - if( ctrlBuilder.embedObj.roe && typeof mv_stream_interface == 'undefined' ) |
| 278 | | - o+='<p class="short_match"><a href="javascript:$j(\'#'+ctrlBuilder.id+'\').get(0).doLinkBack()"><span><strong>Source Page</strong></span></a></p>'; |
| | 329 | + if( ctrlObj.embedObj.roe && typeof mv_stream_interface == 'undefined' ) |
| | 330 | + o+='<p class="short_match"><a href="javascript:$j(\'#'+ctrlObj.id+'\').get(0).doLinkBack()"><span><strong>Source Page</strong></span></a></p>'; |
| 279 | 331 | |
| 280 | 332 | o+='</div>'+ |
| 281 | 333 | '</div><!--videoOptionsInner-->' + |
| — | — | @@ -285,49 +337,49 @@ |
| 286 | 338 | }, |
| 287 | 339 | 'fullscreen':{ |
| 288 | 340 | 'w':20, |
| 289 | | - 'o':function(){ |
| 290 | | - 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>' |
| | 341 | + 'o':function( ctrlObj ){ |
| | 342 | + 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>' |
| 291 | 343 | } |
| 292 | 344 | }, |
| 293 | 345 | 'options':{ |
| 294 | 346 | 'w':26, |
| 295 | | - 'o':function(){ |
| 296 | | - 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>'; |
| | 347 | + 'o':function( ctrlObj ){ |
| | 348 | + 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>'; |
| 297 | 349 | } |
| 298 | 350 | }, |
| 299 | 351 | 'pause':{ |
| 300 | 352 | 'w':24, |
| 301 | | - 'o':function(){ |
| 302 | | - 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>'; |
| | 353 | + 'o':function( ctrlObj ){ |
| | 354 | + 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>'; |
| 303 | 355 | } |
| 304 | 356 | }, |
| 305 | 357 | 'closed_captions':{ |
| 306 | 358 | 'w':23, |
| 307 | | - 'o':function(){ |
| 308 | | - 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>' |
| | 359 | + 'o':function( ctrlObj ){ |
| | 360 | + 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>' |
| 309 | 361 | } |
| 310 | 362 | }, |
| 311 | 363 | 'volume_control':{ |
| 312 | 364 | 'w':23, |
| 313 | | - 'o':function(){ |
| 314 | | - return '<div title="' + gM('mwe-volume_control') + '" id="volume_control_'+ctrlBuilder.id+'" class="ui-state-default ui-corner-all ui-icon_link rButton">' + |
| | 365 | + 'o':function( ctrlObj ){ |
| | 366 | + return '<div title="' + gM('mwe-volume_control') + '" id="volume_control_'+ctrlObj.id+'" class="ui-state-default ui-corner-all ui-icon_link rButton">' + |
| 315 | 367 | '<span class="ui-icon ui-icon-volume-on"></span>' + |
| 316 | | - '<div style="position:absolute;display:none;" id="vol_container_'+ctrlBuilder.id+'" class="vol_container ui-corner-all">' + |
| 317 | | - '<div class="volume_bar" id="volume_bar_' + ctrlBuilder.id + '"></div>' + |
| | 368 | + '<div style="position:absolute;display:none;" id="vol_container_'+ctrlObj.id+'" class="vol_container ui-corner-all">' + |
| | 369 | + '<div class="volume_bar" id="volume_bar_' + ctrlObj.id + '"></div>' + |
| 318 | 370 | '</div>'+ |
| 319 | 371 | '</div>'; |
| 320 | 372 | } |
| 321 | 373 | }, |
| 322 | 374 | 'time_display':{ |
| 323 | 375 | 'w':90, |
| 324 | | - 'o':function(){ |
| 325 | | - return '<div id="mv_time_'+ctrlBuilder.id+'" class="ui-widget time">' + ctrlBuilder.embedObj.getTimeReq() + '</div>'; |
| | 376 | + 'o':function( ctrlObj ){ |
| | 377 | + return '<div id="mv_time_'+ctrlObj.id+'" class="ui-widget time">' + ctrlObj.embedObj.getTimeReq() + '</div>'; |
| 326 | 378 | } |
| 327 | 379 | }, |
| 328 | 380 | 'play_head':{ |
| 329 | 381 | 'w':0, //special case (takes up remaining space) |
| 330 | | - 'o':function(){ |
| 331 | | - return '<div class="play_head" id="mv_play_head_' + ctrlBuilder.id + '" style="width: ' + ( ctrlBuilder.available_width - 30 ) + 'px;"></div>'; |
| | 382 | + 'o':function( ctrlObj ){ |
| | 383 | + return '<div class="play_head" id="mv_play_head_' + ctrlObj.id + '" style="width: ' + ( ctrlObj.available_width - 30 ) + 'px;"></div>'; |
| 332 | 384 | } |
| 333 | 385 | } |
| 334 | 386 | } |
| Index: trunk/phase3/js2/mwEmbed/skins/mvpcf/mvpcf.js |
| — | — | @@ -0,0 +1,7 @@ |
| | 2 | +/* |
| | 3 | +mvpcf skin config |
| | 4 | +*/ |
| | 5 | + |
| | 6 | +var mvpcfConfig = { |
| | 7 | + |
| | 8 | +}; |
| \ No newline at end of file |
| Index: trunk/phase3/js2/mwEmbed/skins/mvpcf/playerSkin.css |
| — | — | @@ -0,0 +1,10 @@ |
| | 2 | +/* |
| | 3 | + * reference player skin |
| | 4 | + */ |
| | 5 | + |
| | 6 | +/* large play button: */ |
| | 7 | +.play-btn-large { width:130px; height:96px; background: url(images/player_big_play_button.png); position:absolute; cursor:pointer; border:none;}/*.ui-state-default */ |
| | 8 | + |
| | 9 | + |
| | 10 | + |
| | 11 | + |
| Index: trunk/phase3/js2/mwEmbed/skins/mvpcf/styles.css |
| — | — | @@ -97,6 +97,7 @@ |
| 98 | 98 | |
| 99 | 99 | |
| 100 | 100 | /*Video player*/ |
| | 101 | + |
| 101 | 102 | .videoPlayer { |
| 102 | 103 | /* width: 100%;*/ |
| 103 | 104 | color: white; |
| — | — | @@ -448,7 +449,7 @@ |
| 449 | 450 | top:16%; |
| 450 | 451 | width:283px; |
| 451 | 452 | } |
| 452 | | -.videoComplete .videoOptionsComplete p {text-align: center; margin: 3px 0; padding: 0;} |
| | 453 | +.videoComplete .videoOptionsComplete p { text-align: center; margin: 3px 0; padding: 0; } |
| 453 | 454 | .videoComplete .videoOptionsComplete a { |
| 454 | 455 | color: white; |
| 455 | 456 | /* font-size: 22px;*/ |
| — | — | @@ -492,61 +493,6 @@ |
| 493 | 494 | margin:10px; |
| 494 | 495 | } |
| 495 | 496 | |
| 496 | | -#SEQUENCER CSS: |
| 497 | | -#resizable css: |
| 498 | | -/* |
| 499 | | -.ui-resizable-handle { position: absolute; background: #ddd; display: none; } |
| 500 | | -.ui-resizable .ui-resizable-handle { display: block } |
| 501 | | -.ui-resizable-e { z-index:5; position:absolute; cursor: e-resize; |
| 502 | | - width: 15px;height:19px; top: 0px; bottom: 0px; right: 0px; |
| 503 | | - background: transparent url(images/slider_handle_red.gif) no-repeat scroll 0% 0%; |
| 504 | | -} |
| 505 | | -.ui-resizable-w { z-index:5; position:absolute; cursor: w-resize; |
| 506 | | - width: 15px;height:19px; top: 0px; bottom: 0px; left: 0px; |
| 507 | | - background: transparent url(images/slider_handle_green.gif) no-repeat scroll 0% 0%; |
| 508 | | -} |
| 509 | | -.ui-dragSpan { |
| 510 | | - filter: alpha(opacity=70); |
| 511 | | - -moz-opacity: .7; |
| 512 | | - background-color:#AAF; |
| 513 | | - position:absolute; |
| 514 | | - left: 10px; |
| 515 | | - right:10px; |
| 516 | | - height:19px; |
| 517 | | -} |
| 518 | | -*/ |
| 519 | | -/* |
| 520 | | -div.rsd_cp_tab_container{ |
| 521 | | - display:inline; |
| 522 | | - margin:0; |
| 523 | | - padding:5px 2px 10px 2px; |
| 524 | | - background:#F7F7F7 url(remote_search/tab-bg.png) repeat-x scroll left bottom; |
| 525 | | - border:1px solid #777; |
| 526 | | - margin-left:7px; |
| 527 | | - cursor:pointer; |
| 528 | | - float:left; |
| 529 | | - width:auto; |
| 530 | | -} |
| 531 | | -div.rsd_cp_tab { |
| 532 | | - display:inline; |
| 533 | | - margin:0; |
| 534 | | - padding:5px 2px 10px 2px; |
| 535 | | - background:#F7F7F7 url(remote_search/tab-bg.png) repeat-x scroll left bottom; |
| 536 | | - border:1px solid #777; |
| 537 | | - margin-left:7px; |
| 538 | | - cursor:pointer; |
| 539 | | - float:left; |
| 540 | | - width:auto; |
| 541 | | - position:relative; |
| 542 | | -} |
| 543 | | - |
| 544 | | -div.rsd_selected { |
| 545 | | - background:#FFFFFF none repeat scroll 0 0; |
| 546 | | - border-bottom:0; |
| 547 | | - padding-top:6px; |
| 548 | | - z-index:2; |
| 549 | | -} |
| 550 | | -*/ |
| 551 | 497 | .rsd_cp_tab img{ |
| 552 | 498 | border:0px; |
| 553 | 499 | } |
| — | — | @@ -556,18 +502,6 @@ |
| 557 | 503 | top:2px; |
| 558 | 504 | bottom:2px; |
| 559 | 505 | } |
| 560 | | -/*#rsd_results { |
| 561 | | - border-top:0; |
| 562 | | - border:1px solid #777; |
| 563 | | - /*position:relative;*/ |
| 564 | | - background:#FFF; |
| 565 | | - left:2px; |
| 566 | | - right:2px; |
| 567 | | - bottom:2px; |
| 568 | | - overflow:auto; |
| 569 | | - position:absolute; |
| 570 | | - top:75px; |
| 571 | | -}*/ |
| 572 | 506 | #rsd_resource_edit{ |
| 573 | 507 | z-index:2; |
| 574 | 508 | } |
| Index: trunk/phase3/js2/mwEmbed/skins/kskin/playerSkin.css |
| — | — | @@ -0,0 +1,21 @@ |
| | 2 | +/* |
| | 3 | +* K-skin player |
| | 4 | +*/ |
| | 5 | + |
| | 6 | +/* large play button */ |
| | 7 | +.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 */ |
| | 8 | +.k-player .play-btn-large.ui-state-hover { background: url(images/ksprite.png) no-repeat 28px -377px; } |
| | 9 | + |
| | 10 | +/* control icons: */ |
| | 11 | +.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;} |
| | 12 | + |
| | 13 | +.k-player .ui-state-default .ui-icon-arrow-4-diag { background-position: 0 -32px;} /* fullscreen */ |
| | 14 | +.k-player .ui-state-hover .ui-icon-arrow-4-diag { background-position: -16px -32px;} |
| | 15 | +.k-player .ui-state-default .ui-icon-volume-on, .ui-state-hover .ui-icon-volume-off, { margin-left:-6px; background-position: -16px -48px;} |
| | 16 | +.k-player .ui-state-hover .ui-icon-volume-on, .ui-state-default .ui-icon-volume-off { margin-left:-6px; background-position: 0 -48px;} |
| | 17 | + |
| | 18 | +.k-player .ui-state-default .ui-icon-play { background:url(images/ksprite.png) no-repeat 0 0;} |
| | 19 | +.k-player .ui-state-hover .ui-icon-play { background-position: -16px 0;} |
| | 20 | + |
| | 21 | +.k-player .ui-state-default .ui-icon-pause { background:url(images/ksprite.png) no-repeat 0 -17px;} |
| | 22 | +.k-player .ui-state-hover .ui-icon-pause { background-position: -16px -17px;} |
| Index: trunk/phase3/js2/mwEmbed/skins/kskin/kskin.js |
| — | — | @@ -0,0 +1,7 @@ |
| | 2 | +/* |
| | 3 | +* skin js allows you to override contrlBuilder html/class output |
| | 4 | +*/ |
| | 5 | + |
| | 6 | +var kskinConfig = { |
| | 7 | + pClass: 'k-player' |
| | 8 | +} |
| \ No newline at end of file |
| Index: trunk/phase3/js2/mwEmbed/skins/kskin/styles.css |
| — | — | @@ -1,85 +1,85 @@ |
| 2 | | -
|
| 3 | | -/* player styles */
|
| 4 | | -.k-player { width:400px; height:340px; position:relative;} /* inline via jq */
|
| 5 | | -.k-player * { padding:0; margin:0;} /* inline via jq */
|
| 6 | | -.k-edit-bar { }
|
| 7 | | -.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;}
|
| 8 | | -
|
| 9 | | -.k-video { width:400px; height:300px; background:#000; margin-bottom:1px;} /* h & w inline via jq */
|
| 10 | | -.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;}
|
| 11 | | -.k-control-bar button, .k-control-bar div.ui-slider, .k-control-bar div.k-timer { float:left;}
|
| 12 | | -.k-timer { margin-top:2px;}
|
| 13 | | -.k-volume-slider { width:26px;}
|
| | 2 | + |
| | 3 | +/* player styles */ |
| | 4 | +.k-player { width:400px; height:340px; position:relative;} /* inline via jq */ |
| | 5 | +.k-player * { padding:0; margin:0;} /* inline via jq */ |
| | 6 | +.k-edit-bar { } |
| | 7 | +.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;} |
| | 8 | + |
| | 9 | +.k-video { width:400px; height:300px; background:#000; margin-bottom:1px;} /* h & w inline via jq */ |
| | 10 | +.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;} |
| | 11 | +.k-control-bar button, .k-control-bar div.ui-slider, .k-control-bar div.k-timer { float:left;} |
| | 12 | +.k-timer { margin-top:2px;} |
| | 13 | +.k-volume-slider { width:26px;} |
| 14 | 14 | .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;} |
| 15 | | -
|
| 16 | | -span.ui-icon.ui-icon-k-menu { width:auto; padding-left:2px; background:none; outline:none; cursor:default;}
|
| 17 | | -.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*/
|
| 18 | 15 | |
| 19 | | -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 */
|
| 20 | | -.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;}
|
| 21 | | -.k-menu-bar li a:hover { background-position: -1px -110px;}
|
| | 16 | +span.ui-icon.ui-icon-k-menu { width:auto; padding-left:2px; background:none; outline:none; cursor:default;} |
| | 17 | +.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*/ |
| 22 | 18 | |
| | 19 | +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 */ |
| | 20 | +.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;} |
| | 21 | +.k-menu-bar li a:hover { background-position: -1px -110px;} |
| 23 | 22 | |
| 24 | | -.k-menu-bar li.k-download-btn a { background-position: -51px -203px;}
|
| | 23 | + |
| | 24 | +.k-menu-bar li.k-download-btn a { background-position: -51px -203px;} |
| 25 | 25 | .k-menu-bar li.k-download-btn a:hover { background-position: -1px -203px;} |
| 26 | | -
|
| 27 | | -.k-menu-bar li.k-share-btn a { background-position: -51px -172px;}
|
| | 26 | + |
| | 27 | +.k-menu-bar li.k-share-btn a { background-position: -51px -172px;} |
| 28 | 28 | .k-menu-bar li.k-share-btn a:hover { background-position: -1px -172px;} |
| 29 | | -
|
| 30 | | -.k-menu-bar li.k-credits-btn a { background-position: -51px -141px;}
|
| 31 | | -.k-menu-bar li.k-credits-btn a:hover { background-position: -1px -141px;}
|
| | 29 | + |
| | 30 | +.k-menu-bar li.k-credits-btn a { background-position: -51px -141px;} |
| | 31 | +.k-menu-bar li.k-credits-btn a:hover { background-position: -1px -141px;} |
| 32 | 32 | |
| 33 | 33 | |
| 34 | | -
|
| 35 | | -.k-menu-screens { width:320px; padding: 13px 10px 15px 15px; float:left;} /* w & h inline via jq */
|
| 36 | | -.k-menu-screens h2 { padding: 0 0 5px 1px; clear:both; font-size:12px; color:#666;}
|
| 37 | | -.k-menu-screens p { margin: 6px 0;}
|
| 38 | | -.k-menu-screens a { ;}
|
| 39 | | -.k-menu-screens a img { border:none;}
|
| 40 | | -.k-menu-screens ul { padding:0; margin: 6px 0 0; list-style: none outside none;}
|
| 41 | | -
|
| 42 | | -.k-edit-screen { width:370px; height:223px; padding-top:77px; text-align:center; background:#181818; color:#fff;}
|
| 43 | | -.k-edit-screen div { }
|
| 44 | | -.k-edit-screen a { color:#7BB8FC;}
|
| 45 | | -.k-edit-screen a img { border:none;}
|
| 46 | | -
|
| 47 | | -/* end player */
|
| 48 | | -
|
| 49 | | -.k-slide-window { overflow:hidden;}
|
| 50 | | -.k-menu-screens .menu-credits ul { float:left;}
|
| 51 | | -.k-menu-screens .menu-credits li { height:39px; padding: 11px 11px 11px 11px; margin-bottom:12px; display:block; background:#333;}
|
| 52 | | -.k-menu-screens .menu-credits li a { padding:0; background:none;}
|
| 53 | | -.k-menu-screens .menu-credits li img { float:left; background:blue;}
|
| 54 | | -.k-menu-screens .menu-credits li div { height:39px; padding-left:11px; floats:left; overflow:hidden;}
|
| 55 | | -
|
| 56 | | -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;}
|
| 57 | | -a.k-next-credit { margin: 0 0 1px; position:absolute; bottom:0; background-position: -0px -290px;}
|
| 58 | | -a:hover.k-prev-credit { background-position: 0px -238px;}
|
| 59 | | -a:hover.k-next-credit { background-position: 0px -260px;}
|
| 60 | | -
|
| 61 | | -.k-logo { margin:8px 0 0 1px; display:block;}
|
| 62 | | -
|
| 63 | | -.k_field_wrap { border: solid 1px #444; margin-bottom:7px;}
|
| 64 | | -.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;}
|
| 65 | | -.k-menu textarea { width:100%; height:15px; border: solid 2px #000; border-bottom:none; border-right:none; background:transparent; color:#ccc; overflow:hidden;}
|
| 66 | | -
|
| 67 | | -.k-screen.k-share div.ui-state-highlight { width:90px; padding:2px 5px; border-color:#554926; float:left; background:none; color:#FFE96E;}
|
| 68 | | -.k-screen.k-share div.ui-state-highlight a { color:#FFE96E; font-weight:bold;}
|
| 69 | | -.k-screen.k-share div.ui-state-highlight a:hover { }
|
| 70 | | -
|
| 71 | | -.k-menu-screens li { height:14px; margin-bottom:6px;}
|
| 72 | | -.k-menu-screens li a { padding-left:22px; background:url(images/ksprite.png) no-repeat -85px -274px; text-decoration:none;}
|
| 73 | | -.k-menu-screens li a.active, .k-menu-screens li a:hover.active { background-position: -85px -247px;}
|
| 74 | | -.k-menu-screens li a:hover { background-position: -85px -260px;}
|
| 75 | | -
|
| | 34 | + |
| | 35 | +.k-menu-screens { width:320px; padding: 13px 10px 15px 15px; float:left;} /* w & h inline via jq */ |
| | 36 | +.k-menu-screens h2 { padding: 0 0 5px 1px; clear:both; font-size:12px; color:#666;} |
| | 37 | +.k-menu-screens p { margin: 6px 0;} |
| | 38 | +.k-menu-screens a { ;} |
| | 39 | +.k-menu-screens a img { border:none;} |
| | 40 | +.k-menu-screens ul { padding:0; margin: 6px 0 0; list-style: none outside none;} |
| | 41 | + |
| | 42 | +.k-edit-screen { width:370px; height:223px; padding-top:77px; text-align:center; background:#181818; color:#fff;} |
| | 43 | +.k-edit-screen div { } |
| | 44 | +.k-edit-screen a { color:#7BB8FC;} |
| | 45 | +.k-edit-screen a img { border:none;} |
| | 46 | + |
| | 47 | +/* end player */ |
| | 48 | + |
| | 49 | +.k-slide-window { overflow:hidden;} |
| | 50 | +.k-menu-screens .menu-credits ul { float:left;} |
| | 51 | +.k-menu-screens .menu-credits li { height:39px; padding: 11px 11px 11px 11px; margin-bottom:12px; display:block; background:#333;} |
| | 52 | +.k-menu-screens .menu-credits li a { padding:0; background:none;} |
| | 53 | +.k-menu-screens .menu-credits li img { float:left; background:blue;} |
| | 54 | +.k-menu-screens .menu-credits li div { height:39px; padding-left:11px; floats:left; overflow:hidden;} |
| | 55 | + |
| | 56 | +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;} |
| | 57 | +a.k-next-credit { margin: 0 0 1px; position:absolute; bottom:0; background-position: -0px -290px;} |
| | 58 | +a:hover.k-prev-credit { background-position: 0px -238px;} |
| | 59 | +a:hover.k-next-credit { background-position: 0px -260px;} |
| | 60 | + |
| | 61 | +.k-logo { margin:8px 0 0 1px; display:block;} |
| | 62 | + |
| | 63 | +.k_field_wrap { border: solid 1px #444; margin-bottom:7px;} |
| | 64 | +.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;} |
| | 65 | +.k-menu textarea { width:100%; height:15px; border: solid 2px #000; border-bottom:none; border-right:none; background:transparent; color:#ccc; overflow:hidden;} |
| | 66 | + |
| | 67 | +.k-screen.k-share div.ui-state-highlight { width:90px; padding:2px 5px; border-color:#554926; float:left; background:none; color:#FFE96E;} |
| | 68 | +.k-screen.k-share div.ui-state-highlight a { color:#FFE96E; font-weight:bold;} |
| | 69 | +.k-screen.k-share div.ui-state-highlight a:hover { } |
| | 70 | + |
| | 71 | +.k-menu-screens li { height:14px; margin-bottom:6px;} |
| | 72 | +.k-menu-screens li a { padding-left:22px; background:url(images/ksprite.png) no-repeat -85px -274px; text-decoration:none;} |
| | 73 | +.k-menu-screens li a.active, .k-menu-screens li a:hover.active { background-position: -85px -247px;} |
| | 74 | +.k-menu-screens li a:hover { background-position: -85px -260px;} |
| | 75 | + |
| 76 | 76 | .k-options.ui-state-hover { color:blue;} |
| 77 | 77 | |
| 78 | 78 | .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;} |
| 79 | | -
|
| 80 | | -.k-player .ui-state-default .ui-icon-arrow-4-diag { background-position: 0 -32px;} /* fullscreen */
|
| 81 | | -.k-player .ui-state-hover .ui-icon-arrow-4-diag { background-position: -16px -32px;}
|
| 82 | | -.k-player .ui-state-default .ui-icon-volume-on, .ui-state-hover .ui-icon-volume-off, { margin-left:-6px; background-position: -16px -48px;}
|
| 83 | | -.k-player .ui-state-hover .ui-icon-volume-on, .ui-state-default .ui-icon-volume-off { margin-left:-6px; background-position: 0 -48px;}
|
| | 79 | + |
| | 80 | +.k-player .ui-state-default .ui-icon-arrow-4-diag { background-position: 0 -32px;} /* fullscreen */ |
| | 81 | +.k-player .ui-state-hover .ui-icon-arrow-4-diag { background-position: -16px -32px;} |
| | 82 | +.k-player .ui-state-default .ui-icon-volume-on, .ui-state-hover .ui-icon-volume-off, { margin-left:-6px; background-position: -16px -48px;} |
| | 83 | +.k-player .ui-state-hover .ui-icon-volume-on, .ui-state-default .ui-icon-volume-off { margin-left:-6px; background-position: 0 -48px;} |
| 84 | 84 | |
| 85 | 85 | .k-player .ui-state-default .ui-icon-play { background:url(images/ksprite.png) no-repeat 0 0;} |
| 86 | 86 | .k-player .ui-state-hover .ui-icon-play { background-position: -16px 0;} |
| — | — | @@ -87,27 +87,27 @@ |
| 88 | 88 | .k-player .ui-state-default .ui-icon-pause { background:url(images/ksprite.png) no-repeat 0 -17px;} |
| 89 | 89 | .k-player .ui-state-hover .ui-icon-pause { background-position: -16px -17px;} |
| 90 | 90 | |
| 91 | | -.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;}
|
| 92 | | -.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;}
|
| | 91 | +.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;} |
| | 92 | +.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;} |
| 93 | 93 | .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;} |
| 94 | | -.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;}
|
| 95 | | -
|
| 96 | | -.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;}
|
| 97 | | -.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;}
|
| 98 | | -.k-control-bar .k-volume-slider a:hover.ui-slider-handle { border: solid 1px #999;}
|
| 99 | | -.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;}
|
| 100 | | -
|
| 101 | | -.play-btn-large { width:120px; height:55px; background: url(images/ksprite.png) no-repeat 28px -433px; position:absolute; cursor:pointer;} /*.ui-state-default */
|
| 102 | | -.play-btn-large.ui-state-hover { background: url(images/ksprite.png) no-repeat 28px -377px; }
|
| 103 | | -
|
| 104 | | -.k-volume.ui-state-hover { margin-left:6px; }
|
| 105 | | -
|
| 106 | | -/* move to ie css */
|
| 107 | | -.k-volume-slider span, span.ui-icon-play, span.ui-icon-volume-on, button.k-fullscreen { *margin-top:-1px;}
|
| 108 | | -span.ui-icon-volume-on { *margin-left:0 !important;}
|
| 109 | | -.ui-state-hover.k-volume { *margin-left:0 !important;}
|
| 110 | | -span.ui-icon-k-menu { *margin-top:3px;}
|
| 111 | | -.k-control-bar .ui-slider.k-volume-slider { *margin-left:-2px;}
|
| | 94 | +.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;} |
| | 95 | + |
| | 96 | +.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;} |
| | 97 | +.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;} |
| | 98 | +.k-control-bar .k-volume-slider a:hover.ui-slider-handle { border: solid 1px #999;} |
| | 99 | +.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;} |
| | 100 | + |
| | 101 | +.play-btn-large { width:120px; height:55px; background: url(images/ksprite.png) no-repeat 28px -433px; position:absolute; cursor:pointer;} /*.ui-state-default */ |
| | 102 | +.play-btn-large.ui-state-hover { background: url(images/ksprite.png) no-repeat 28px -377px; } |
| | 103 | + |
| | 104 | +.k-volume.ui-state-hover { margin-left:6px; } |
| | 105 | + |
| | 106 | +/* move to ie css */ |
| | 107 | +.k-volume-slider span, span.ui-icon-play, span.ui-icon-volume-on, button.k-fullscreen { *margin-top:-1px;} |
| | 108 | +span.ui-icon-volume-on { *margin-left:0 !important;} |
| | 109 | +.ui-state-hover.k-volume { *margin-left:0 !important;} |
| | 110 | +span.ui-icon-k-menu { *margin-top:3px;} |
| | 111 | +.k-control-bar .ui-slider.k-volume-slider { *margin-left:-2px;} |
| 112 | 112 | /* end IE css */ |
| 113 | 113 | |
| 114 | 114 | /* fixes for jquery.ui themes */ |
| — | — | @@ -141,4 +141,4 @@ |
| 142 | 142 | overflow:hidden; |
| 143 | 143 | padding:10px; |
| 144 | 144 | } |
| 145 | | -
|
| | 145 | + |
| Index: trunk/phase3/js2/mwEmbed/libEmbedVideo/vlcEmbed.js |
| — | — | @@ -194,20 +194,11 @@ |
| 195 | 195 | /* events */ |
| 196 | 196 | onOpen: function(){ |
| 197 | 197 | this.setStatus("Opening..."); |
| 198 | | - //document.getElementById("info_"+this.id).innerHTML = "Opening..."; |
| 199 | | - //document.getElementById("PlayOrPause").disabled = true; |
| 200 | | - //document.getElementById("Stop").disabled = false; |
| 201 | 198 | }, |
| 202 | 199 | onBuffer: function(){ |
| 203 | 200 | this.setStatus("Buffering..."); |
| 204 | | - //document.getElementById("info_"+this.id).innerHTML = "Buffering..."; |
| 205 | | - //document.getElementById("PlayOrPause").disabled = true; |
| 206 | | - //document.getElementById("Stop").disabled = false; |
| 207 | 201 | }, |
| 208 | 202 | onPlay: function(){ |
| 209 | | - //document.getElementById("PlayOrPause").value = "Pause"; |
| 210 | | - //document.getElementById("PlayOrPause").disabled = false; |
| 211 | | - //document.getElementById("Stop").disabled = false; |
| 212 | 203 | this.onPlaying(); |
| 213 | 204 | }, |
| 214 | 205 | liveFeedRoll: 0, |
| Index: trunk/phase3/js2/mwEmbed/libEmbedVideo/embedVideo.js |
| — | — | @@ -94,10 +94,12 @@ |
| 95 | 95 | "linkback":null, |
| 96 | 96 | "embed_link":true, |
| 97 | 97 | "download_link":true, |
| 98 | | - "type":null //the content type of the media |
| | 98 | + "type":null, //the content type of the media |
| | 99 | + |
| | 100 | + "skin_name":null //if you want to select a custom skin per video tag. |
| 99 | 101 | }; |
| 100 | 102 | /* |
| 101 | | - * the base source attibute checks |
| | 103 | + * the base source attribute checks |
| 102 | 104 | */ |
| 103 | 105 | var mv_default_source_attr= new Array( |
| 104 | 106 | 'id', |
| — | — | @@ -120,7 +122,7 @@ |
| 121 | 123 | mvEmbed.init( swap_done_callback, force_id ); |
| 122 | 124 | } |
| 123 | 125 | mvEmbed = { |
| 124 | | - //flist stores the set of functions to run after the video has been swaped in. |
| | 126 | + //flist stores the set of functions to run after the video has been swapped in. |
| 125 | 127 | flist:new Array(), |
| 126 | 128 | init:function( swap_done_callback, force_id ){ |
| 127 | 129 | |
| — | — | @@ -128,7 +130,7 @@ |
| 129 | 131 | mvEmbed.flist.push( swap_done_callback ); |
| 130 | 132 | |
| 131 | 133 | //get mv_embed location if it has not been set |
| 132 | | - js_log('mv_embed ' + MV_EMBED_VERSION); |
| | 134 | + js_log('mv_embed ' + MV_EMBED_VERSION); |
| 133 | 135 | |
| 134 | 136 | var loadPlaylistLib=false; |
| 135 | 137 | |
| — | — | @@ -138,7 +140,7 @@ |
| 139 | 141 | if( $j(this_elm).attr("id") == '' ){ |
| 140 | 142 | $j(this_elm).attr("id", 'v'+ global_player_list.length); |
| 141 | 143 | } |
| 142 | | - //stre a global reference to the id |
| | 144 | + //store a global reference to the id |
| 143 | 145 | global_player_list.push( $j(this_elm).attr("id") ); |
| 144 | 146 | //if video doSwap |
| 145 | 147 | switch( this_elm.tagName.toLowerCase()){ |
| — | — | @@ -234,8 +236,8 @@ |
| 235 | 237 | $j('#'+embed_video.id).get(0).on_dom_swap(); |
| 236 | 238 | |
| 237 | 239 | // now that "embed_video" is stable, do more initialization (if we are ready) |
| 238 | | - if($j('#'+embed_video.id).get(0).loading_external_data == false && |
| 239 | | - $j('#'+embed_video.id).get(0).init_with_sources_loadedDone == false){ |
| | 240 | + if($j('#'+embed_video.id).get(0).loading_external_data == false |
| | 241 | + && $j('#'+embed_video.id).get(0).init_with_sources_loadedDone == false){ |
| 240 | 242 | //load and set ready state since source are available: |
| 241 | 243 | $j('#'+embed_video.id).get(0).init_with_sources_loaded(); |
| 242 | 244 | } |
| — | — | @@ -808,7 +810,11 @@ |
| 809 | 811 | }, |
| 810 | 812 | init: function(element){ |
| 811 | 813 | //this.element_pointer = element; |
| 812 | | - |
| | 814 | + |
| | 815 | + //set the skin name from the config |
| | 816 | + //@@todo support skin as an attribute option |
| | 817 | + this.skin_name = mwConfig['skin_name']; |
| | 818 | + |
| 813 | 819 | //inherit all the default video_attributes |
| 814 | 820 | for(var attr in default_video_attributes){ //for in loop oky on user object |
| 815 | 821 | if(element.getAttribute(attr)){ |
| — | — | @@ -844,7 +850,13 @@ |
| 845 | 851 | this.user_missing_plugin_html=element.innerHTML; |
| 846 | 852 | } |
| 847 | 853 | // load all of the specified sources |
| 848 | | - this.media_element = new mediaElement(element); |
| | 854 | + this.media_element = new mediaElement(element); |
| | 855 | + |
| | 856 | + //if we are displaying controls setup the ctrlBuilder |
| | 857 | + if( this.controls ){ |
| | 858 | + //set-up the local ctrlBuilder instance: |
| | 859 | + this.ctrlBuilder = new ctrlBuilder( this ); |
| | 860 | + } |
| 849 | 861 | }, |
| 850 | 862 | on_dom_swap: function(){ |
| 851 | 863 | js_log('f:on_dom_swap'); |
| — | — | @@ -873,7 +885,7 @@ |
| 874 | 886 | this.init_with_sources_loadedDone=true; |
| 875 | 887 | //autoseletct the source |
| 876 | 888 | this.media_element.autoSelectSource(); |
| 877 | | - //auto select player based on prefrence or default order |
| | 889 | + //auto select player based on default order |
| 878 | 890 | if( !this.media_element.selected_source ) |
| 879 | 891 | { |
| 880 | 892 | //check for parent clip: |
| — | — | @@ -925,13 +937,8 @@ |
| 926 | 938 | //set up the new embedObj |
| 927 | 939 | js_log('f: inheritEmbedObj: embedding with ' + this.selected_player.library); |
| 928 | 940 | var _this = this; |
| 929 | | - this.selected_player.load( function() |
| 930 | | - { |
| 931 | | - js_log("selected_player::load:duration is: " + _this.duration); |
| | 941 | + this.selected_player.load( function(){ |
| 932 | 942 | //js_log('inheriting '+_this.selected_player.library +'Embed to ' + _this.id + ' ' + $j('#'+_this.id).length); |
| 933 | | - //var _this = $j('#'+_this.id).get(0); |
| 934 | | - //js_log( 'type of ' + _this.selected_player.library +'Embed + ' + |
| 935 | | - // eval('typeof '+_this.selected_player.library +'Embed')); |
| 936 | 943 | eval('embedObj = ' +_this.selected_player.library +'Embed;'); |
| 937 | 944 | for(var method in embedObj){ //for in loop oky for object |
| 938 | 945 | //parent method preservation for local overwritten methods |
| — | — | @@ -979,12 +986,11 @@ |
| 980 | 987 | var playable_sources = this.media_element.getPlayableSources(); |
| 981 | 988 | for(var sInx=0; sInx < playable_sources.length; sInx++){ |
| 982 | 989 | var mime_type = playable_sources[sInx].mime_type; |
| 983 | | - if( mime_type=='video/ogg' ){ |
| 984 | | - //they have flash / h.264 fallback no need to push firefox :( |
| | 990 | + if( mime_type=='video/ogg' ){ |
| 985 | 991 | foundOgg = true; |
| 986 | 992 | } |
| 987 | 993 | } |
| 988 | | - //no ogg no point in download firefox |
| | 994 | + //no ogg src... no point in download firefox link |
| 989 | 995 | if(!foundOgg) |
| 990 | 996 | return false; |
| 991 | 997 | |
| — | — | @@ -1022,7 +1028,7 @@ |
| 1023 | 1029 | * wrapEmebedContainer |
| 1024 | 1030 | * wraps the embed code into a container to better support playlist function |
| 1025 | 1031 | * (where embed element is swapped for next clip |
| 1026 | | - * (where plugin method does not support playlsits) |
| | 1032 | + * (where plugin method does not support playlist) |
| 1027 | 1033 | */ |
| 1028 | 1034 | wrapEmebedContainer:function(embed_code){ |
| 1029 | 1035 | //check if parent clip is set( ie we are in a playlist so name the embed container by playlistID) |
| — | — | @@ -1179,7 +1185,7 @@ |
| 1180 | 1186 | return ; |
| 1181 | 1187 | |
| 1182 | 1188 | $j('#img_thumb_'+this.id).css('zindex',1); |
| 1183 | | - $j('#big_play_link_'+this.id).hide(); |
| | 1189 | + $j( this.id + ' .play-btn-large').hide(); |
| 1184 | 1190 | |
| 1185 | 1191 | //add black background |
| 1186 | 1192 | $j('#dc_'+this.id).append('<div id="black_back_'+this.id+'" ' + |
| — | — | @@ -1404,38 +1410,43 @@ |
| 1405 | 1411 | return; |
| 1406 | 1412 | }else{ |
| 1407 | 1413 | $j('#mv_embedded_controls_'+this.id).html( this.getControlsHTML() ); |
| 1408 | | - ctrlBuilder.addControlHooks(this); |
| | 1414 | + this.ctrlBuilder.addControlHooks(this); |
| 1409 | 1415 | } |
| 1410 | 1416 | }, |
| 1411 | 1417 | getControlsHTML:function() |
| 1412 | 1418 | { |
| 1413 | | - return ctrlBuilder.getControls( this ); |
| | 1419 | + return this.ctrlBuilder.getControls( this ); |
| 1414 | 1420 | }, |
| 1415 | 1421 | getHTML : function (){ |
| 1416 | | - //@@todo check if we have sources avaliable |
| | 1422 | + //@@todo check if we have sources available |
| 1417 | 1423 | js_log('embedVideo:getHTML : ' + this.id + ' resource type: ' + this.type); |
| 1418 | 1424 | var _this = this; |
| 1419 | 1425 | var html_code = ''; |
| 1420 | | - html_code = '<div id="videoPlayer_'+this.id+'" style="width:'+this.width+'px;position:relative;" class="videoPlayer">'; |
| | 1426 | + html_code = '<div id="videoPlayer_' + this.id + '" style="width:' + this.width + 'px;position:relative;"'+ |
| | 1427 | + 'class="' + this.ctrlBuilder.pClass + '">'; |
| 1421 | 1428 | html_code += '<div style="width:'+parseInt(this.width)+'px;height:'+parseInt(this.height)+'px;" id="mv_embedded_player_'+this.id+'">' + |
| 1422 | 1429 | this.getThumbnailHTML() + |
| 1423 | 1430 | '</div>'; |
| 1424 | 1431 | //js_log("mvEmbed:controls "+ typeof this.controls); |
| 1425 | 1432 | if( this.controls ) |
| 1426 | 1433 | { |
| | 1434 | + //set-up the local ctrlBuilder instance: |
| | 1435 | + this.ctrlBuilder = new ctrlBuilder( this ); |
| | 1436 | + |
| 1427 | 1437 | js_log("f:getHTML:AddControls"); |
| 1428 | 1438 | html_code +='<div id="mv_embedded_controls_' + this.id + '" class="ui-widget ui-corner-bottom ui-state-default controls" >'; |
| 1429 | 1439 | html_code += this.getControlsHTML(); |
| 1430 | | - html_code +='</div>'; |
| | 1440 | + html_code +='</div>'; |
| 1431 | 1441 | //block out some space by encapulating the top level div |
| 1432 | 1442 | $j(this).wrap('<div style="width:'+parseInt(this.width)+'px;height:' |
| 1433 | | - +(parseInt(this.height)+ctrlBuilder.height)+'px"></div>'); |
| | 1443 | + +( parseInt(this.height) + this.ctrlBuilder.height )+'px"></div>'); |
| | 1444 | + |
| 1434 | 1445 | } |
| 1435 | 1446 | html_code += '</div>'; //videoPlayer div close |
| 1436 | 1447 | //js_log('should set: '+this.id); |
| 1437 | 1448 | $j(this).html( html_code ); |
| 1438 | 1449 | //add hooks once Controls are in DOM |
| 1439 | | - ctrlBuilder.addControlHooks(this); |
| | 1450 | + this.ctrlBuilder.addControlHooks(this); |
| 1440 | 1451 | |
| 1441 | 1452 | //js_log('set this to: ' + $j(this).html() ); |
| 1442 | 1453 | //alert('stop'); |
| — | — | @@ -1587,7 +1598,7 @@ |
| 1588 | 1599 | ' id="img_thumb_'+this.id+'" src="' + this.thumbnail + '">'; |
| 1589 | 1600 | |
| 1590 | 1601 | if(this.play_button == true && this.controls == true) |
| 1591 | | - thumb_html+=this.getPlayButton(); |
| | 1602 | + thumb_html+= this.ctrlBuilder.getComponent( 'play-btn-large' ); |
| 1592 | 1603 | |
| 1593 | 1604 | thumb_html+='</div>'; |
| 1594 | 1605 | return thumb_html; |
| — | — | @@ -1627,15 +1638,7 @@ |
| 1628 | 1639 | //js_log('pos of options button: t:'+pos['top']+' l:'+ pos['left']); |
| 1629 | 1640 | $j('#mv_vid_options_'+sel_id).css(pos).toggle(); |
| 1630 | 1641 | return; |
| 1631 | | - }, |
| 1632 | | - getPlayButton:function(id){ |
| 1633 | | - if(!id)id=this.id; |
| 1634 | | - return '<div title="' + gM('mwe-play_clip') + '" id="big_play_link_'+id+'" class="large_play_button" '+ |
| 1635 | | - 'style="left:'+((this.playerPixelWidth()-130)/2)+'px;'+ |
| 1636 | | - 'top:' + ((this.playerPixelHeight()-96)/2) + 'px;">'+ |
| 1637 | | - '<img src="' + mv_skin_img_path + 'player_big_play_button.png">'+ |
| 1638 | | - '</div>'; |
| 1639 | | - }, |
| | 1642 | + }, |
| 1640 | 1643 | doLinkBack:function(){ |
| 1641 | 1644 | if(this.roe && this.media_element.addedROEData==false){ |
| 1642 | 1645 | var _this = this; |
| — | — | @@ -1994,7 +1997,7 @@ |
| 1995 | 1998 | } |
| 1996 | 1999 | |
| 1997 | 2000 | //make sure the big playbutton is has click action: |
| 1998 | | - $j('#big_play_link_' + _this.id).unbind('click').click(function(){ |
| | 2001 | + $j(_this.id + ' .play-btn-large').unbind('click').click(function(){ |
| 1999 | 2002 | $j('#' +_this.id).get(0).play(); |
| 2000 | 2003 | }); |
| 2001 | 2004 | |
| — | — | @@ -2253,20 +2256,12 @@ |
| 2254 | 2257 | { |
| 2255 | 2258 | return gM('mwe-ogg-player-' + this.id); |
| 2256 | 2259 | }, |
| 2257 | | - load : function(callback){ |
| 2258 | | - var libName = this.library+'Embed'; |
| 2259 | | - if( mvJsLoader.checkObjPath( libName ) ){ |
| 2260 | | - js_log('plugin loaded, do callback:'); |
| 2261 | | - callback(); |
| 2262 | | - }else{ |
| 2263 | | - var _this = this; |
| 2264 | | - //jQuery based get script does not work so well. |
| 2265 | | - mvJsLoader.doLoad([ |
| 2266 | | - libName |
| 2267 | | - ],function(){ |
| 2268 | | - callback(); |
| 2269 | | - }); |
| 2270 | | - } |
| | 2260 | + load : function(callback){ |
| | 2261 | + mvJsLoader.doLoad([ |
| | 2262 | + this.library + 'Embed' |
| | 2263 | + ],function(){ |
| | 2264 | + callback(); |
| | 2265 | + }); |
| 2271 | 2266 | } |
| 2272 | 2267 | } |
| 2273 | 2268 | /* players and supported mime types |