From 936362d5e542cf744fcf3291c7ac9b5bf616635b Mon Sep 17 00:00:00 2001 From: Michael Dale Date: Mon, 26 Oct 2009 10:44:13 +0000 Subject: [PATCH] * Skin refactoring ** Player Themable has kskin and mvpcf skin side by side ** skins can include js configuration ** moving common assets into a shared folder ** (still a bit more to do) * fix for firefox native video missing onseeked callback * some refactoring of globals into $mw namespace * fixed clientAcceptsGzip call in 'stand alone' mode for script-loader * some language msg updates --- js2/apiProxyPage.js | 2 +- .../example_usage/Player_Simple_Themable.html | 23 -- .../example_usage/Player_Themable.html | 34 ++ js2/mwEmbed/jsScriptLoader.php | 22 +- js2/mwEmbed/libAddMedia/remoteSearchDriver.js | 16 +- js2/mwEmbed/libEmbedVideo/embedVideo.js | 340 +++++++++--------- js2/mwEmbed/libEmbedVideo/nativeEmbed.js | 19 +- js2/mwEmbed/libMwApi/mw.proxy.js | 8 +- js2/mwEmbed/libSequencer/mvPlayList.js | 18 +- js2/mwEmbed/libSequencer/mvSequencer.js | 2 +- js2/mwEmbed/mv_embed.js | 112 +++--- js2/mwEmbed/php/languages/mwEmbed.i18n.php | 3 +- .../remote_cp/archive_org_logo_17.png | Bin .../remote_cp/archive_org_logo_80.png | Bin .../remote_cp/archive_org_tab.png | Bin .../remote_cp/combined_tab.png | Bin .../remote_cp/flickr_tab.png | Bin .../remote_cp/metavid_logo_17.png | Bin .../remote_cp/metavid_tab.png | Bin .../remote_cp/this_wiki_logo_17.png | Bin .../remote_cp/this_wiki_tab.png | Bin .../remote_cp/wiki_commons_logo_17.png | Bin .../remote_cp/wiki_commons_logo_80.png | Bin .../remote_cp/wiki_commons_tab.png | Bin .../transition_images/fade_crossfade.png | Bin .../transition_images/fade_fadeFromColor.png | Bin .../transition_images/transition_wipe.png | Bin js2/mwEmbed/skins/ctrlBuilder.js | 111 +++--- js2/mwEmbed/skins/kskin/kskin.js | 107 +++++- js2/mwEmbed/skins/kskin/playerSkin.css | 160 +++++++++ js2/mwEmbed/skins/mvpcf/mvpcf.js | 2 +- js2/mwEmbed/skins/mvpcf/playerSkin.css | 122 ++++++- js2/mwEmbed/skins/mvpcf/styles.css | 144 -------- 33 files changed, 776 insertions(+), 469 deletions(-) delete mode 100644 js2/mwEmbed/example_usage/Player_Simple_Themable.html create mode 100644 js2/mwEmbed/example_usage/Player_Themable.html rename js2/mwEmbed/skins/{mvpcf/images => common}/remote_cp/archive_org_logo_17.png (100%) rename js2/mwEmbed/skins/{mvpcf/images => common}/remote_cp/archive_org_logo_80.png (100%) rename js2/mwEmbed/skins/{mvpcf/images => common}/remote_cp/archive_org_tab.png (100%) rename js2/mwEmbed/skins/{mvpcf/images => common}/remote_cp/combined_tab.png (100%) rename js2/mwEmbed/skins/{mvpcf/images => common}/remote_cp/flickr_tab.png (100%) rename js2/mwEmbed/skins/{mvpcf/images => common}/remote_cp/metavid_logo_17.png (100%) rename js2/mwEmbed/skins/{mvpcf/images => common}/remote_cp/metavid_tab.png (100%) rename js2/mwEmbed/skins/{mvpcf/images => common}/remote_cp/this_wiki_logo_17.png (100%) rename js2/mwEmbed/skins/{mvpcf/images => common}/remote_cp/this_wiki_tab.png (100%) rename js2/mwEmbed/skins/{mvpcf/images => common}/remote_cp/wiki_commons_logo_17.png (100%) rename js2/mwEmbed/skins/{mvpcf/images => common}/remote_cp/wiki_commons_logo_80.png (100%) rename js2/mwEmbed/skins/{mvpcf/images => common}/remote_cp/wiki_commons_tab.png (100%) rename js2/mwEmbed/skins/{mvpcf => common}/transition_images/fade_crossfade.png (100%) rename js2/mwEmbed/skins/{mvpcf => common}/transition_images/fade_fadeFromColor.png (100%) rename js2/mwEmbed/skins/{mvpcf => common}/transition_images/transition_wipe.png (100%) diff --git a/js2/apiProxyPage.js b/js2/apiProxyPage.js index 8e2a99471e..327e5c664a 100644 --- a/js2/apiProxyPage.js +++ b/js2/apiProxyPage.js @@ -8,7 +8,7 @@ * since this is proxy server set a pre-append debug flag to know which debug msgs are coming from where */ -mwConfig['debug_pre'] = 'Proxy'; +$mw.conf['debug_pre'] = 'Proxy'; if( !mwApiProxyConfig ) var mwApiProxyConfig = {}; diff --git a/js2/mwEmbed/example_usage/Player_Simple_Themable.html b/js2/mwEmbed/example_usage/Player_Simple_Themable.html deleted file mode 100644 index 4ec0fc823b..0000000000 --- a/js2/mwEmbed/example_usage/Player_Simple_Themable.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - Sample Themed Player - - - - -

Sample Simple Themable Player:

-To play with dynamic Themes install Themeroller

-

- -
-
-Source Code used:
- -
- - - diff --git a/js2/mwEmbed/example_usage/Player_Themable.html b/js2/mwEmbed/example_usage/Player_Themable.html new file mode 100644 index 0000000000..bd9fd09ddf --- /dev/null +++ b/js2/mwEmbed/example_usage/Player_Themable.html @@ -0,0 +1,34 @@ + + + + Sample Themed Player + + + + +

Sample Themable Player:

+To play with dynamic Themes install Themeroller

+ +

+ +Source Code used:
+ +
+ + +
+ +(ksin) Embed Code used:
+ +
+ + + + + + diff --git a/js2/mwEmbed/jsScriptLoader.php b/js2/mwEmbed/jsScriptLoader.php index c627290cbc..259675b46b 100644 --- a/js2/mwEmbed/jsScriptLoader.php +++ b/js2/mwEmbed/jsScriptLoader.php @@ -5,15 +5,15 @@ */ // Check if we are being invoked in a MediaWiki context or stand alone usage: -//setup the script local script cache directory (has to be hard coded rather than config based for fast non-mediawiki hits +//setup the script local script cache directory (has to be hard coded rather than config based for fast non-mediawiki config hits $wgScriptCacheDirectory = realpath( dirname( __FILE__ ) ) . '/php/script-cache'; if ( !defined( 'MEDIAWIKI' ) && !defined( 'MW_CACHE_SCRIPT_CHECK' ) ){ - // Load noMediaWiki helper + // Load noMediaWiki helper for quick cache result $myScriptLoader = new jsScriptLoader(); if( $myScriptLoader->outputFromCache() ) exit(); - //else load up all the config and do normal doScriptLoader process: + //else load up all the config and do normal stand alone ScriptLoader process: require_once( realpath( dirname( __FILE__ ) ) . '/php/noMediaWikiConfig.php' ); $myScriptLoader->doScriptLoader(); } @@ -163,7 +163,7 @@ class jsScriptLoader { global $wgUseGzip; $this->outputJsHeaders(); if ( $wgUseGzip ) { - if ( wfClientAcceptsGzip() ) { + if ( $this->clientAcceptsGzip() ) { header( 'Content-Encoding: gzip' ); echo gzencode( $this->jsout ); } else { @@ -173,6 +173,20 @@ class jsScriptLoader { echo $this->jsout; } } + + function clientAcceptsGzip() { + $m = array(); + if( preg_match( + '/\bgzip(?:;(q)=([0-9]+(?:\.[0-9]+)))?\b/', + $_SERVER['HTTP_ACCEPT_ENCODING'], + $m ) ) { + if( isset( $m[2] ) && ( $m[1] == 'q' ) && ( $m[2] == 0 ) ) + return false; + //no gzip support found + return true; + } + return false; + } /* * postProcRequestVars uses globals, configuration and mediaWiki to test wiki-titles and files exist etc. */ diff --git a/js2/mwEmbed/libAddMedia/remoteSearchDriver.js b/js2/mwEmbed/libAddMedia/remoteSearchDriver.js index cc56b0dc27..673cefc4ec 100644 --- a/js2/mwEmbed/libAddMedia/remoteSearchDriver.js +++ b/js2/mwEmbed/libAddMedia/remoteSearchDriver.js @@ -14,7 +14,7 @@ loadGM({ "rsd_box_layout" : "Box layout", "rsd_list_layout" : "List layout", "rsd_results_desc" : "Results $1 to $2", - "rsd_results_desc_total" : "Results $1 to $2 of $3", + "rsd_results_desc_total" : "Results $1 to $2 of $3", "rsd_results_next" : "next", "rsd_results_prev" : "previous", "rsd_no_results" : "No search results for $1<\/b>", @@ -47,12 +47,12 @@ loadGM({ "mwe-cancel_import" : "Cancel import", "mwe-importing_asset" : "Importing asset", "mwe-preview_insert_resource" : "Preview insert of resource: $1", - "mwe-checking-resource": "Checking for resource", - "mwe-resource-needs-import": "Resource $1 needs to be imported to $2", + "mwe-checking-resource" : "Checking for resource", + "mwe-resource-needs-import" : "Resource $1 needs to be imported to $2", "mwe-ftype-svg" : "SVG vector file", "mwe-ftype-jpg" : "JPEG image file", "mwe-ftype-png" : "PNG image file", - "mwe-ftype-oga" : "Ogg audio file", + "mwe-ftype-oga" : "Ogg audio file", "mwe-ftype-ogg" : "Ogg video file", "mwe-ftype-unk" : "Unknown file format" }); @@ -632,11 +632,11 @@ remoteSearchDriver.prototype = { mv_set_loading('#tab-upload'); //do things async to keep interface snappy setTimeout(function(){ - //check if we need to setup the proxy:: if( _this.upload_api_target == 'proxy' ){ - //setup proxy - $j('#tab-upload').html( 'do proxy setup'); + _this.setupProxy( function(){ + _this.getUploadForm(); + }); }else{ _this.getUploadForm(); } @@ -902,7 +902,7 @@ remoteSearchDriver.prototype = { o+='
  • '; o+=''; if(cp.tab_img === true){ - o+='' + cp.title +''; + o+='' + cp.title +''; }else{ o+= cp.title; } diff --git a/js2/mwEmbed/libEmbedVideo/embedVideo.js b/js2/mwEmbed/libEmbedVideo/embedVideo.js index d7b7c66b22..2d608d6347 100644 --- a/js2/mwEmbed/libEmbedVideo/embedVideo.js +++ b/js2/mwEmbed/libEmbedVideo/embedVideo.js @@ -5,7 +5,7 @@ loadGM({ "mwe-loading_plugin" : "loading plugin ...", "mwe-select_playback" : "Set playback preference", - "mwe-link_back" : "Link back", + "mwe-link_back" : "Link back", "mwe-error_swap_vid" : "Error: mv_embed was unable to swap the video tag for the mv_embed interface", "mwe-add_to_end_of_sequence" : "Add to end of sequence", "mwe-missing_video_stream" : "The video file for this stream is missing", @@ -18,7 +18,8 @@ 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", + "mwe-seek_to" : "Seek to $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>", @@ -47,10 +48,10 @@ loadGM({ "mwe-for_best_experience" : "For a better video playback experience we recommend:
    Firefox 3.5<\/a>.<\/b>", "mwe-do_not_warn_again" : "Dismiss for now.", "mwe-playerselect" : "Players", - "mwe-read_before_embed" : "Please read the security notes on remote embedding<\/a> before actually embedding!", + "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" }); //set the globals: @@ -137,26 +138,27 @@ mvEmbed = { var eAction = function(this_elm){ 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); } //store a global reference to the id - global_player_list.push( $j(this_elm).attr("id") ); - //if video doSwap - switch( this_elm.tagName.toLowerCase()){ - case 'video': - var videoInterface = new embedVideo(this_elm); + global_player_list.push( $j(this_elm).attr("id") ); + + //if video doSwap + switch( this_elm.tagName.toLowerCase()){ + case 'video': + var videoInterface = new embedVideo(this_elm); + mvEmbed.swapEmbedVideoElement( this_elm, videoInterface ); + break; + case 'audio': + var videoInterface = new embedVideo(this_elm); + videoInterface.type ='audio'; mvEmbed.swapEmbedVideoElement( this_elm, videoInterface ); - break; - case 'audio': - var videoInterface = new embedVideo(this_elm); - videoInterface.type ='audio'; - mvEmbed.swapEmbedVideoElement( this_elm, videoInterface ); - break; - case 'playlist': - loadPlaylistLib=true; - break; + break; + case 'playlist': + loadPlaylistLib=true; + break; } } if( force_id == null && force_id != '' ){ @@ -186,6 +188,7 @@ mvEmbed = { '$j.ui', //include dialog for pop-ing up thigns '$j.ui.dialog' ], function(){ + //deal with each playlist instance $j('playlist').each(function(){ //create new playlist interface: var plObj = new mvPlayList( this ); @@ -810,23 +813,20 @@ embedVideo.prototype = { else return parseInt(this.height); }, - 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 + init: function(element){ + //inherit all the default video_attributes for(var attr in default_video_attributes){ //for in loop oky on user object if(element.getAttribute(attr)){ - this[attr]=element.getAttribute(attr); - //js_log('attr:' + attr + ' val: ' + element.getAttribute(attr) +'(set by elm)'); + this[ attr ]=element.getAttribute(attr); }else{ this[attr]=default_video_attributes[attr]; - //js_log('attr:' + attr + ' val: ' + video_attributes[attr] +" "+ 'elm_val:' + element.getAttribute(attr) + "\n (set by attr)"); } } + + //set the skin name from the config (if not set locally) + if( !this.skin_name ) + this.skin_name = $mw.conf['skin_name']; + //make sure startOffset is cast as an int if( this.startOffset && this.startOffset.split(':').length >= 2) this.startOffset = npt2seconds(this.startOffset); @@ -839,7 +839,7 @@ embedVideo.prototype = { this.duration = parseFloat(this.duration); js_log("duration is: " + this.duration); //if style is set override width and height - var dwh = mwConfig['video_size'].split('x'); + var dwh = $mw.conf['video_size'].split('x'); this.width = element.style.width ? element.style.width : dwh[0]; this.height = element.style.height ? element.style.height : dwh[1]; //set the plugin id @@ -857,8 +857,12 @@ embedVideo.prototype = { //if we are displaying controls setup the ctrlBuilder if( this.controls ){ //set-up the local ctrlBuilder instance: - this.ctrlBuilder = new ctrlBuilder( this ); - } + this.ctrlBuilder = new ctrlBuilder( this ); + //load the css for the current player + + } + //load skin: + loadExternalCss( mv_embed_path + 'skins/' + this.skin_name + '/playerSkin.css'); }, on_dom_swap: function(){ js_log('f:on_dom_swap'); @@ -1001,14 +1005,16 @@ embedVideo.prototype = { return true; }, getTimeReq:function(){ - var default_time_req = '0:00:00/' + seconds2npt(this.getDuration()); + var et = (this.ctrlBuilder.long_time_disp)? '/' + seconds2npt( this.getDuration() ) : ''; + var default_time_req = '0:00:00' + et; if(!this.media_element) return default_time_req; if(!this.media_element.selected_source) return default_time_req; if(!this.media_element.selected_source.end_ntp) return default_time_req; - return this.media_element.selected_source.start_ntp+'/'+this.media_element.selected_source.end_ntp; + var et = (this.ctrlBuilder.long_time_disp) ?'/'+this.media_element.selected_source.end_ntp : ''; + return this.media_element.selected_source.start_ntp + et; }, getDuration:function(){ //update some local pointers for the selected source: @@ -1063,7 +1069,7 @@ embedVideo.prototype = { * (should be overwitten by client that supports frame serving) */ setCurrentTime:function( time, callback){ - js_log('error: base embed setCurrentTime can not frame serve (overide via plugin)'); + js_log('error: base embed setCurrentTime can not frame serve (override via plugin)'); }, addPresTimeOffset:function(){ //add in the offset: @@ -1406,12 +1412,12 @@ embedVideo.prototype = { }, refreshControlsHTML:function(){ js_log('refreshControlsHTML::'); - if($j('#mv_embedded_controls_'+this.id).length == 0) + if($j('#' + this.id + ' .control-bar').length == 0) { - js_log('#mv_embedded_controls_'+this.id + ' not present, returning'); + js_log('control-bar not present, returning'); return ; }else{ - $j('#mv_embedded_controls_'+this.id).html( this.getControlsHTML() ); + $j('#' + this.id + ' .control-bar').html( this.getControlsHTML() ); this.ctrlBuilder.addControlHooks(this); } }, @@ -1421,7 +1427,11 @@ embedVideo.prototype = { }, getHTML : function (){ //@@todo check if we have sources available - js_log('embedVideo:getHTML : ' + this.id + ' resource type: ' + this.type); + js_log('embedVideo:getHTML : ' + this.id + ' resource type: ' + this.type); + + //set-up the local ctrlBuilder instance: + this.ctrlBuilder = new ctrlBuilder( this ); + var _this = this; var html_code = ''; html_code = '
    '; //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 +='
    '; + html_code +='
    '; html_code += this.getControlsHTML(); html_code +='
    '; //block out some space by encapulating the top level div $j(this).wrap('
    '); - + +( parseInt(this.height) + this.ctrlBuilder.height )+'px">
    '); } html_code += '
    '; //videoPlayer div close //js_log('should set: '+this.id); @@ -1634,7 +1640,7 @@ embedVideo.prototype = { doOptionsHTML:function() { var sel_id = (this.pc!=null)?this.pc.pp.id:this.id; - var pos = $j('#options_button_'+sel_id).offset(); + var pos = $j('#'+sel_id + ' .options-btn').offset(); pos['top']=pos['top']+24; pos['left']=pos['left']-124; //js_log('pos of options button: t:'+pos['top']+' l:'+ pos['left']); @@ -1669,8 +1675,7 @@ embedVideo.prototype = { } o+='
    ' + 'Embed Clip in Blog or Site
    '+ - '    '+ - 'Read This before embeding.'+ + '' + gM('mwe-read_before_embed') + '
    '+ '