From 5183f5de5d083cd41ac8c082a4014f36a871f7c6 Mon Sep 17 00:00:00 2001 From: Michael Dale Date: Tue, 27 Oct 2009 01:14:08 +0000 Subject: [PATCH] * more skin refactoring --- .../example_usage/Player_Themable.html | 19 ++-- .../libAddMedia/searchLibs/mediaWikiSearch.js | 25 +---- js2/mwEmbed/libEmbedVideo/embedVideo.js | 96 ++++++++++--------- js2/mwEmbed/mv_embed.js | 59 +++++------- js2/mwEmbed/php/languages/mwEmbed.i18n.php | 1 + js2/mwEmbed/skins/ctrlBuilder.js | 52 ++++++---- js2/mwEmbed/skins/kskin/kskin.js | 30 ++++++ js2/mwEmbed/skins/kskin/playerSkin.css | 54 +++++++++++ js2/mwEmbed/skins/mvpcf/playerSkin.css | 37 ++++++- 9 files changed, 246 insertions(+), 127 deletions(-) diff --git a/js2/mwEmbed/example_usage/Player_Themable.html b/js2/mwEmbed/example_usage/Player_Themable.html index bd9fd09ddf..70d8b2bac9 100644 --- a/js2/mwEmbed/example_usage/Player_Themable.html +++ b/js2/mwEmbed/example_usage/Player_Themable.html @@ -12,23 +12,22 @@ To play with dynamic Themes install Themeroller

- + Source Code used:
- +
-
- -(ksin) Embed Code used:
- + +(ksin) Source Code used:
+
- diff --git a/js2/mwEmbed/libAddMedia/searchLibs/mediaWikiSearch.js b/js2/mwEmbed/libAddMedia/searchLibs/mediaWikiSearch.js index d7be4f6ded..00b11b31a0 100644 --- a/js2/mwEmbed/libAddMedia/searchLibs/mediaWikiSearch.js +++ b/js2/mwEmbed/libAddMedia/searchLibs/mediaWikiSearch.js @@ -240,30 +240,7 @@ mediaWikiSearch.prototype = { }, getImageObj:function( rObj, size, callback ){ if( rObj.mime=='application/ogg' ) - return callback( {'url':rObj.src, 'poster' : rObj.url } ); - - //we can just use direct request urls - //@@todo thumb.php has some issues (cant serve the full image size, has poor erro handling etc) - /*var baseImgUrl = this.cp.api_url.replace('api.php', 'thumb.php'); - if ( rObj.mime=='image/jpeg' || rObj.mime=='image/png' ){ - //if requested size is greater than org size return reduced size obj: - if( size.width > rObj.orgwidth){ - callback({ - 'url' : baseImgUrl + '?f=' + rObj.titleKey.replace(/\s/g, '_') + '&w='+ rObj.orgwidth, - 'width' : rObj.orgwidth, - 'height': rObj.orgheight - }); - return false; - } - } - //assuming svg or size is in range: give them requested size - callback({ - 'url' : baseImgUrl + '?f=' + rObj.titleKey + '&w='+ size.width, - 'width' : size.width, - 'height': Math.round( ( rObj.orgheight / rObj.orgwidth)*size.width ) - }); - return false; - */ + return callback( {'url':rObj.src, 'poster' : rObj.url } ); //his could be depreciated if thumb.php improves var reqObj = { diff --git a/js2/mwEmbed/libEmbedVideo/embedVideo.js b/js2/mwEmbed/libEmbedVideo/embedVideo.js index ee839d1bc8..3514034071 100644 --- a/js2/mwEmbed/libEmbedVideo/embedVideo.js +++ b/js2/mwEmbed/libEmbedVideo/embedVideo.js @@ -18,11 +18,11 @@ loadGM({ "mwe-next_clip_msg" : "Play next clip", "mwe-prev_clip_msg" : "Play previous clip", "mwe-current_clip_msg" : "Continue playing this clip", - "mwe-seek_to" : "Seek to $1", + "mwe-seek_to" : "Seek $1", "mwe-paused" : "paused", "mwe-download_segment" : "Download selection:", "mwe-download_full" : "Download full video file:", - "mwe-download_right_click" : "To download, right click and select Save target as...<\/i>", + "mwe-download_right_click" : "To download, right click and select Save link as...<\/i>", "mwe-download_clip" : "Download video", "mwe-download_text" : "Download text (CMML<\/a> xml):", "mwe-download" : "Download", @@ -51,7 +51,8 @@ loadGM({ "mwe-read_before_embed" : "Read this<\/a> before embedding.", "mwe-embed_site_or_blog" : "Embed on your site or blog", "mwe-related_videos" : "Related videos", - "mwe-seeking" : "seeking" + "mwe-seeking" : "seeking", + "mwe-copy-code" : "Copy code" }); //set the globals: @@ -132,7 +133,7 @@ mvEmbed = { mvEmbed.flist.push( swap_done_callback ); //get mv_embed location if it has not been set - js_log('mv_video_embed:: ' + MV_EMBED_VERSION); + js_log('mv_video_embed:: ' + $mw.version); var loadPlaylistLib=false; @@ -140,10 +141,10 @@ mvEmbed = { js_log( "Do SWAP: " + $j(this_elm).attr("id") + ' tag: '+ this_elm.tagName.toLowerCase() ); if( $j(this_elm).attr("id") == '' ){ - $j(this_elm).attr("id", 'v'+ global_player_list.length); + $j(this_elm).attr("id", 'v'+ $mw.player_list.length); } //store a global reference to the id - global_player_list.push( $j(this_elm).attr("id") ); + $mw.player_list.push( $j(this_elm).attr("id") ); //if video doSwap switch( this_elm.tagName.toLowerCase()){ @@ -247,16 +248,16 @@ mvEmbed = { $j('#'+embed_video.id).get(0).init_with_sources_loaded(); } - js_log('done with child: ' + embed_video.id + ' len:' + global_player_list.length); + js_log('done with child: ' + embed_video.id + ' len:' + $mw.player_list.length); return true; }, //this should not be needed. checkClipsReady : function(){ //js_log('checkClipsReady'); var is_ready=true; - for(var i=0; i < global_player_list.length; i++){ - if( $j('#'+global_player_list[i]).length !=0){ - var cur_vid = $j('#'+global_player_list[i]).get(0); + for(var i=0; i < $mw.player_list.length; i++){ + if( $j('#'+$mw.player_list[i]).length !=0){ + var cur_vid = $j('#'+$mw.player_list[i]).get(0); is_ready = ( cur_vid.ready_to_play ) ? is_ready : false; if( !is_ready && cur_vid.load_error ){ is_ready=true; @@ -1664,34 +1665,38 @@ embedVideo.prototype = { } } }, - //display the code to remotely embed this video: - showEmbedCode : function(embed_code){ - if(!embed_code) - embed_code = this.getEmbeddingHTML(); - var o=''; - if(this.linkback){ - o+=' '+ - '

or

'; - } - o+='
' + - 'Embed Clip in Blog or Site
'+ - '' + gM('mwe-read_before_embed') + - '
'+ - ' '+ - ' '+ - '
'+ - '
'; - this.displayHTML(o); - $j('#'+ this.id + ' .readthis a').css('font-color', 'red'); - }, - copyText:function(){ - $j('#embedding_user_html_'+this.id).focus().select(); - if(document.selection){ - CopiedTxt = document.selection.createRange(); - CopiedTxt.execCommand("Copy"); - } + showShare:function($target){ + var embed_code = this.getEmbeddingHTML(); + var o = ''; + var _this = this; + //@todo: hook events to two a's for swapping in and out code for link vs. embed; + // hook events for changing active class of li based on a. + o+= '

' + gM('mwe-share_this_video') + '

\n' + + ' ' + + '
' + + '' + + '
' + gM('mwe-read_before_embed') + '
' + + '' + $target.html(o); + $cpBtn = $j( '#' + this.id + ' .copycode'); + $cpTxt = $j( '#' + this.id + ' .source_wrap textarea'); + + $cpTxt.click(function(){ + $j(this).get(0).select(); + }); + //add copy binding: + $cpBtn.click(function(){ + $cpTxt.focus().get(0).select(); + if(document.selection){ + CopiedTxt = document.selection.createRange(); + CopiedTxt.execCommand("Copy"); + } + }); }, showTextInterface:function(){ var _this = this; @@ -2045,8 +2050,8 @@ embedVideo.prototype = { }, //do common monitor code like update the playhead and play status //plugin objects are responsible for updating currentTime - monitor:function(){ - //js_log(' us: ' + this.userSlide + ' is seek: ' + this.seeking ); + monitor:function(){ + js_log(' ct: ' + this.currentTime + ' dur: ' + ( parseInt( this.duration ) + 1 ) + ' is seek: ' + this.seeking ); if( this.currentTime && this.currentTime > 0 && this.duration){ if( !this.userSlide && !this.seeking ){ if( this.start_offset ){ @@ -2057,9 +2062,14 @@ embedVideo.prototype = { }else{ this.setSliderValue( this.currentTime / this.duration ); var et = (this.ctrlBuilder.long_time_disp)? '/' + seconds2npt( this.duration ):''; - this.setStatus( seconds2npt( this.currentTime ) + et); + this.setStatus( seconds2npt( this.currentTime ) + et); } } + //check if we are "done" + if( this.currentTime > ( parseInt(this.duration) + 1 ) ){ + js_log("should run clip done"); + this.onClipDone(); + } }else{ //media lacks duration just show end time //js_log(' ct:' + this.currentTime + ' dur: ' + this.duration); @@ -2398,9 +2408,9 @@ mediaPlayers.prototype = } if( selected_player ) { - for(var i=0; i < global_player_list.length; i++) + for(var i=0; i < $mw.player_list.length; i++) { - var embed = $j('#'+global_player_list[i]).get(0); + var embed = $j('#'+$mw.player_list[i]).get(0); if(embed.media_element.selected_source && (embed.media_element.selected_source.mime_type == mime_type)) { embed.selectPlayer(selected_player); diff --git a/js2/mwEmbed/mv_embed.js b/js2/mwEmbed/mv_embed.js index d2ec4ed1a5..c34bf96b45 100644 --- a/js2/mwEmbed/mv_embed.js +++ b/js2/mwEmbed/mv_embed.js @@ -14,14 +14,6 @@ * (in cases where media will be hosted in a different place than the embedding page) * */ -// Fix multiple instances of mv_embed (i.e. include twice from two different servers) -var MV_DO_INIT=true; -if( MV_EMBED_VERSION ){ - MV_DO_INIT=false; -} -// Used to grab fresh copies of scripts. -var MV_EMBED_VERSION = '1.0r20'; - /** @@ -194,7 +186,8 @@ parseUri.options = { // For use when mv_embed with script-loader is in the root MediaWiki path var mediaWiki_mvEmbed_path = 'js2/mwEmbed/'; -var _global = this; // Global obj (depreciate use window) +//The global scope: will be depreciated once we get everything into $mw +var _global = this; /* * setup the empty global $mw object @@ -206,9 +199,6 @@ if(!window['$mw']){ } //@@todo move these into $mw -var mv_init_done = false; -var global_cb_count = 0; -var global_player_list = new Array(); // The global player list per page var global_req_cb = new Array(); // The global request callback array // Get the mv_embed location if it has not been set @@ -230,17 +220,17 @@ if( !mv_embed_path ) { 'jui_skin' : 'redmond', 'video_size' : '400x300' } + // the version of mwEmbed + $.version = '1.0r21'; /* - * global flags + * some global containers flags */ - $.g = { - 'skin_list' : new Array(), - 'mv_init_done' : false, - 'global_cb_count' : 0, - 'global_player_list' : new Array(), // The global player list per page - 'global_req_cb' : new Array() // The global request callback array - } + $.skin_list = new Array(); + $.init_done = false; + $.cb_count = 0; + $.player_list = new Array(), // The global player list per page + $.req_cb = new Array() // The global request callback array /* * Language classes $mw.lang @@ -1066,9 +1056,9 @@ var mvJsLoader = { ]; //add any requested skins (suports multiple skins per single page) - if( $mw.g['skin_list'] ){ - for(var i in $mw.g['skin_list'] ){ - depReq[0].push( $mw.g['skin_list'][i] + 'Config' ); + if( $mw.skin_list ){ + for(var i in $mw.skin_list ){ + depReq[0].push( $mw.skin_list[i] + 'Config' ); } } @@ -1125,14 +1115,14 @@ $mw.load = mwLoad; * $j(document).ready( function(){ */ function mwdomReady( force ) { js_log( 'f:mwdomReady:' ); - if( !force && mv_init_done ) { - js_log( "mv_init_done already done, do nothing..." ); + if( !force && $mw.init_done ) { + js_log( "mw done, do nothing..." ); return false; } - mv_init_done = true; + $mw.init_done = true; // Handle the execution of queued functions with jQuery "ready" - // Check if this page has a video or playlist + // Check if this page has a video, audio or playlist tag var e = [ document.getElementsByTagName( "video" ), document.getElementsByTagName( "audio" ), @@ -1145,7 +1135,7 @@ function mwdomReady( force ) { if(e[j][k] && typeof( e[j][k]) == 'object'){ var sn = e[j][k].getAttribute('skin_name') if( sn && sn != ''){ - $mw.g.skin_list.push( sn ); + $mw.skin_list.push( sn ); } } } @@ -1205,7 +1195,7 @@ if( window.onload ) { window.onload = function () { if( temp_f ) temp_f(); - mwdomReady(); + mwdomReady(); } /* @@ -1314,6 +1304,9 @@ function mv_jqueryBindings() { }); }); } + /* + * Sequencer loader + */ $.fn.sequencer = function( iObj, callback ) { // Debugger iObj['target_sequence_container'] = this.selector; @@ -1690,7 +1683,7 @@ function do_api_req( options, callback ) { options.data['format'] = 'json'; // If action is not set, assume query - if( !options.data['action'] ) + if( ! options.data['action'] ) options.data['action'] = 'query'; // js_log('do api req: ' + options.url +'?' + jQuery.param(options.data) ); @@ -1726,7 +1719,7 @@ function do_api_req( options, callback ) { req_url += paramAnd + encodeURIComponent( i ) + '=' + encodeURIComponent( options.data[i] ); paramAnd = '&'; } - var fname = 'mycpfn_' + ( global_cb_count++ ); + var fname = 'mycpfn_' + ( $mw.cb_count++ ); _global[ fname ] = callback; req_url += '&' + options.jsonCB + '=' + fname; loadExternalJs( req_url ); @@ -1898,7 +1891,7 @@ function getMvUniqueReqId() { return urid; } // Otherwise, just return the mv_embed version - return MV_EMBED_VERSION; + return $mw.version; } /* * Set the global mv_embed path based on the script's location @@ -1955,7 +1948,7 @@ if ( typeof DOMParser == "undefined" ) { * Utility functions */ function js_log( string ) { - ///add any prepend debug strings if nessesary + ///add any prepend debug strings if nessesary (used for cross browser) if( $mw.conf['debug_pre'] ) string = $mw.conf['debug_pre']+ string; diff --git a/js2/mwEmbed/php/languages/mwEmbed.i18n.php b/js2/mwEmbed/php/languages/mwEmbed.i18n.php index e8070e4308..c83ee1b006 100644 --- a/js2/mwEmbed/php/languages/mwEmbed.i18n.php +++ b/js2/mwEmbed/php/languages/mwEmbed.i18n.php @@ -355,6 +355,7 @@ $messages['en'] = array( 'mwe-embed_site_or_blog' => 'Embed on your site or blog', 'mwe-related_videos' => 'Related videos', 'mwe-seeking' => 'seeking', + "mwe-copy-code" => "Copy code", ); /** Message documentation (Message documentation) diff --git a/js2/mwEmbed/skins/ctrlBuilder.js b/js2/mwEmbed/skins/ctrlBuilder.js index 5620d18047..499c8f4dc6 100644 --- a/js2/mwEmbed/skins/ctrlBuilder.js +++ b/js2/mwEmbed/skins/ctrlBuilder.js @@ -32,6 +32,8 @@ ctrlBuilder.prototype = { pClass : 'mv-player', long_time_disp: true, body_options : true, + //default volume layout is "vertical" + volume_layout : 'vertical', height:29, supports:{ 'options':true, @@ -187,7 +189,11 @@ ctrlBuilder.prototype = { var perc = ui.value/1000; embedObj.jump_time = seconds2npt( parseFloat( parseFloat(embedObj.getDuration()) * perc ) + embedObj.start_time_sec); //js_log('perc:' + perc + ' * ' + embedObj.getDuration() + ' jt:'+ this.jump_time); - embedObj.setStatus( gM('mwe-seek_to', embedObj.jump_time ) ); + if( _this.long_time_disp ){ + embedObj.setStatus( gM('mwe-seek_to', embedObj.jump_time ) ); + }else{ + embedObj.setStatus( embedObj.jump_time ); + } //update the thumbnail / frame if(embedObj.isPlaying==false){ embedObj.updateThumbPerc( perc ); @@ -231,13 +237,23 @@ ctrlBuilder.prototype = { $opt.hide(); return false; }) - $opt.find('.vo_showcode').click(function(){ - embedObj.showEmbedCode(); + $opt.find('.vo_showcode').click(function(){ + embedObj.displayHTML(); + embedObj.showShare( $tp.find('.videoOptionsComplete') ); $opt.hide(); return false; }); - - //volume binding: + this.doVolumeBinding(); + + //check if we have any custom skin hooks to run (only one per skin) + if( this.addSkinControlHooks && typeof( this.addSkinControlHooks) == 'function') + this.addSkinControlHooks(); + }, + doVolumeBinding:function(){ + var embedObj = this.embedObj; + var _this = this; + var $tp=$j('#' + embedObj.id); + //default volume binding: var hoverOverDelay=false; $tp.find('.volume_control').unbind().btnBind().click(function(){ $j('#' +embedObj.id).get(0).toggleMute(); @@ -289,10 +305,6 @@ ctrlBuilder.prototype = { } } }); - - //check if we have any custom skin hooks to run (only one per skin) - if( this.addSkinControlHooks && typeof( this.addSkinControlHooks) == 'function') - this.addSkinControlHooks(); }, getMvBufferHtml:function(){ return '
' + - '' + - ''+ - '
'; + 'o':function( ctrlObj ){ + var o=''; + if ( ctrlObj.volume_layout == 'horizontal' ) + o+='
'; + + o+= '
' + + ''; + + if( ctrlObj.volume_layout == 'vertical'){ + o+=''; + } + o+= '
'; + return o; } }, 'time_display':{ diff --git a/js2/mwEmbed/skins/kskin/kskin.js b/js2/mwEmbed/skins/kskin/kskin.js index f9246f4fd1..0f0a582993 100644 --- a/js2/mwEmbed/skins/kskin/kskin.js +++ b/js2/mwEmbed/skins/kskin/kskin.js @@ -7,6 +7,7 @@ var kskinConfig = { //display time progres long_time_disp: false, body_options: false, + volume_layout: 'horizontal', components:{ 'play-btn-large' : { 'h' : 55 @@ -18,6 +19,9 @@ var kskinConfig = { '' + gM('mwe-menu_btn') + '' + '' } + }, + 'time_display':{ + 'w':70 }, 'mv_embedded_options':{ 'w':0, @@ -107,6 +111,32 @@ var kskinConfig = { $tp.find('.play-btn-large').fadeOut('fast'); } }); + + //slider: + $tp.find('.volume-slider').slider({ + range: "min", + value: 80, + min: 0, + max: 100, + slide: function(event, ui) { + embedObj.updateVolumen(ui.value/100); + }, + change: function(event, ui){ + var level = ui.value/100; + if (level==0) { + $tp.find('.k-volume span').addClass('ui-icon-volume-off'); + }else{ + $tp.find('.k-volume span').removeClass('ui-icon-volume-off'); + } + //only run the onChange event if done by a user slide: + if(embedObj.userSlide){ + embedObj.userSlide=false; + embedObj.seeking=true; +// var perc = ui.value/100; + embedObj.updateVolumen(level); + } + } + }); } } \ No newline at end of file diff --git a/js2/mwEmbed/skins/kskin/playerSkin.css b/js2/mwEmbed/skins/kskin/playerSkin.css index 6de9e7de8e..5acc6a380d 100644 --- a/js2/mwEmbed/skins/kskin/playerSkin.css +++ b/js2/mwEmbed/skins/kskin/playerSkin.css @@ -179,3 +179,57 @@ width:36px; .k-menu-screens li a.active, .k-menu-screens li a:hover.active { background-position: -85px -247px;} .k-menu-screens li a:hover { background-position: -85px -260px;} .k-menu-screens a { color:#BBBBBB; } + + +.k-menu textarea { + background:none repeat scroll 0 0 transparent; + border-color:#000000 -moz-use-text-color -moz-use-text-color #000000; + border-style:solid none none solid; + border-width:2px medium medium 2px; + color:#CCCCCC; + font:11px arial,sans-serif; + height:15px; + overflow:hidden; + padding-left:2px; + width:100%; +} +.menu-screen.menu-share button { + background:url("images/ksprite.png") no-repeat scroll 0 -81px #D4D4D4; + border:1px solid #000000; + color:#000000; + float:right; + height:24px; + padding:0 5px 3px; + width:84px; + font-size:1em; +} +.k-player .menu-screen.menu-share div.ui-state-highlight { + background:none repeat scroll 0 0 transparent; + border-color:#554926; + color:#FFE96E; + float:left; + padding:2px 5px; +} +.k-player .menu-screen.menu-share div.ui-state-highlight a { + color:#FFE96E; + font-weight:bold; +} + +.k-player .volume-slide { + width:38px !important; +} +.k-player .volume-slider .ui-slider-range { + -moz-border-radius:0 0 0 0; + background:url("images/ksprite.png") repeat-x scroll -66px -306px transparent; + height:17px; + position:absolute; +} +.k-player .volume-slider a.ui-slider-handle { + background:none repeat scroll 0 0 transparent; + border:medium none; + display:block; + height:18px; + margin:-3px 5px 0 -1px; + position:absolute; + width:8px; +} \ No newline at end of file diff --git a/js2/mwEmbed/skins/mvpcf/playerSkin.css b/js2/mwEmbed/skins/mvpcf/playerSkin.css index 3a4aa53544..1ae63c42a5 100644 --- a/js2/mwEmbed/skins/mvpcf/playerSkin.css +++ b/js2/mwEmbed/skins/mvpcf/playerSkin.css @@ -127,4 +127,39 @@ .inOutSlider .ui-slider-handle{ width:8px; cusror: move; -} \ No newline at end of file +} + + +.videoOptionsComplete textarea { + background:none repeat scroll 0 0 transparent; + border-color:#333 -moz-use-text-color -moz-use-text-color #333; + border-style:solid none none solid; + border-width:2px medium medium 2px; + color:#CCCCCC; + font:11px arial,sans-serif; + height:15px; + overflow:hidden; + padding-left:2px; + width:100%; +} +.videoOptionsComplete .copycode { + background:url("images/ksprite.png") no-repeat scroll 0 -81px #D4D4D4; + border:1px solid #000000; + color:#000000; + float:right; + height:24px; + padding:0 5px 3px; + width:84px; + font-size:1em; +} +.videoOptionsComplete div.ui-state-highlight { + background:none repeat scroll 0 0 transparent; + border-color:#554926; + color:#FFE96E; + float:left; + padding:2px 5px; +} +.videoOptionsComplete div.ui-state-highlight a { + color:#FFE96E; + font-weight:bold; +} -- 2.20.1