r36105 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:r36104‎ | r36105 | r36106 >
Date:20:51, 9 June 2008
Author:dale
Status:old
Tags:
Comment:
updated mv_embed better remote embedding compatibility with IE
Modified paths:
  • /trunk/extensions/MetavidWiki/skins/mv_embed/mv_embed.js (modified) (history)
  • /trunk/extensions/MetavidWiki/skins/mv_embed/mv_vlcEmbed.js (modified) (history)
  • /trunk/extensions/MetavidWiki/skins/mv_embed/sample_page.php (modified) (history)

Diff [purge]

Index: trunk/extensions/MetavidWiki/skins/mv_embed/mv_embed.js
@@ -99,6 +99,13 @@
100100 "roe":null,
101101 //if roe includes metadata tracks we can expose a link to metadata
102102 "show_meta_link":true,
 103+
 104+ //default state attributes per html5 spec:
 105+ //http://www.whatwg.org/specs/web-apps/current-work/#video)
 106+ "paused":true,
 107+ "readyState":0, //http://www.whatwg.org/specs/web-apps/current-work/#readystate
 108+ "currentTime":0, //current playback position (should be updated by plugin)
 109+ "duration":NaN, //media duration (read from file or anx temporal url)
103110
104111 //custom attributes for mv_embed:
105112 "play_button":true,
@@ -673,22 +680,26 @@
674681 }
675682 }
676683 ///js_log('did vI style');
677 - //now swap out the video element for the embed_video obj:
678 - var parent_elm = video_element.parentNode;
 684+ //now swap out the video element for the embed_video obj:
 685+ $j(video_element).after(embed_video).remove();
 686+ //update HTML
 687+ $j('#'+embed_video.id).get(0).getHTML();
 688+
 689+ /*var parent_elm = video_element.parentNode;
679690 parent_elm.removeChild(video_element);
680691
681692 //append the object into the dom:
682693 parent_elm.appendChild(embed_video);
683694
684695 //now run the getHTML on the new embedVideo Obj:
685 - embed_video.getHTML();
686 - //js_log('html set:' + document.getElementById(embed_video.id).innerHTML);
687 -
 696+ embed_video.getHTML();
 697+ */
 698+ js_log('html set:' + document.getElementById(embed_video.id).innerHTML);
688699 //store a reference to the id
689700 //(for single instance plugins that need to keep track of other instances on the page)
690701 global_ogg_list.push(embed_video.id);
691702
692 - js_log('append child: ' + embed_video.id + ' len:'+global_ogg_list.length);
 703+ js_log('done with child: ' + embed_video.id + ' len:'+global_ogg_list.length);
693704 return true;
694705 }
695706 /*
@@ -723,7 +734,7 @@
724735 //parse roe if not already done:
725736
726737 //if not "live" or under 5 min load all transcript in one request
727 - if(!this.pe.roe_data){
 738+ if(!this.pe.roe_xml){
728739 js_log("MISSING ROE DATA for text interface");
729740 var _this = this;
730741 this.pe.getParseROE( function(){
@@ -744,7 +755,7 @@
745756
746757 //@@todo use user-language as key to select transcript layer.
747758 _this = this;
748 - $j.each(this.pe.roe_data.getElementsByTagName('mediaSource'), function(inx, n){
 759+ $j.each(this.pe.roe_xml.getElementsByTagName('mediaSource'), function(inx, n){
749760 if(n.getAttribute('content-type')=='text/cmml'){
750761 _this.availableTracks[n.getAttribute('id')] = {
751762 src:n.getAttribute('src'),
@@ -842,14 +853,15 @@
843854 },
844855 show:function(){
845856 //js_log("show text interface");
846 - /*fade out cc*/
847 - $j('#metaText_'+this.pe.id).fadeOut('fast');
 857+ /*fade out cc button*/
 858+ $j('#metaButton_'+this.pe.id).fadeOut('fast');
848859 /*slide in intefrace container*/
849860 if($j('#metaBox_'+this.pe.id).length==0){
 861+
850862 //append it to body relative to offset of this.pe
851863 var loc = $j(this.pe).position();
852864 js_log('top ' +loc.top + ' left:'+loc.left );
853 - var mvboxHTML ='<div style="position:absolute;z-index: 5001;' +
 865+ var mvboxHTML ='<div style="position:absolute;z-index: '+ getNextHighestZindex() +';'+
854866 'top:'+(loc.top)+'px;' +
855867 'left:'+(parseInt(loc.left)+parseInt(this.pe.width)+10)+'px;' +
856868 'height:'+this.pe.height+'px;width:400px;' +
@@ -870,7 +882,7 @@
871883 //the meta box:
872884 $j('#metaBox_'+this.pe.id).fadeOut('fast');
873885 //the icon link:
874 - $j('#metaText_'+this.pe.id).fadeIn('fast');
 886+ $j('#metaButton_'+this.pe.id).fadeIn('fast');
875887 },
876888 getBody:function(){
877889 return '<div id="mmbody_'+this.pe.id+'" style="position:absolute;top:20px;left:0px;right:0px;bottom:0px;height:'+(this.pe.height-20)+'px;overflow:auto;"/>';
@@ -918,7 +930,7 @@
919931 },
920932 monitor:function(){
921933 //grab the time from the video object
922 - var cur_time = parseInt( this.pe.currentTime() );
 934+ var cur_time = parseInt( this.pe.currentTime );
923935 if(cur_time!=0 && this.prevTimeScroll!=cur_time){
924936 //search for current time: flash red border trascript
925937 _this = this;
@@ -938,7 +950,7 @@
939951 this.scrollTimerId = setInterval('document.getElementById(\''+this.pe.id+'\').textInterface.monitor()', 500);
940952 }
941953 //jump to the current position:
942 - var cur_time = parseInt (this.pe.currentTime());
 954+ var cur_time = parseInt (this.pe.currentTime );
943955 js_log('cur time: '+ cur_time);
944956
945957 _this = this;
@@ -959,7 +971,7 @@
960972 //add in loading icon:
961973 /*
962974 out+= '<div class="mv_loading_icon" style="background:url(\''+mv_embed_path+'images/indicator.gif\');display:';
963 - out+= (this.roe_data)? 'none':'inline';
 975+ out+= (this.roe_xml)? 'none':'inline';
964976 out+='"/>';
965977 */
966978 var as_checked = (this.autoscroll)?'checked':'';
@@ -986,15 +998,8 @@
987999 //base embedVideo object
9881000 embedVideo.prototype = {
9891001 slider:null,
990 - roe_data:null,
991 - load_external_data:false,
992 - //state attributes (per html5 spec http://www.whatwg.org/specs/web-apps/current-work/#video)
993 - video_states:{
994 - "paused":true,
995 - "readyState":0, //http://www.whatwg.org/specs/web-apps/current-work/#readystate
996 - "currentTime":0, //current playback position (should be overwritten by local functions)
997 - "duration":NaN //media duration (read from file or anx temporal url)
998 - },
 1002+ roe_xml:null,
 1003+ load_external_data:false,
9991004 //utility functions for property values:
10001005 hx : function ( s ) {
10011006 if ( typeof s != 'String' ) {
@@ -1026,10 +1031,6 @@
10271032 if(this.roe==null){
10281033 this['show_meta_link']=false;
10291034 }
1030 - //init the default states:
1031 - for(var state in this.video_states){
1032 - this[state]=this.video_states[state];
1033 - }
10341035 js_log('continue_thumb:'+ this['thumbnail']);
10351036 js_log('continue_src:'+ this['src']);
10361037 //if the thumbnail is null replace with default thumb:
@@ -1088,17 +1089,15 @@
10891090 getParseROE: function(callback){
10901091 var _this = this;
10911092 do_request(this.roe, function(data){
1092 - js_log('got DATA!!!!!!!');
1093 - //$j.each(data.getElementsByTagName('mediaSource'), function(inx, n){
 1093+ js_log('got DATA!!!!!!!' + typeof data);
10941094 // alert('found mediaSource');
10951095 //});
1096 - elm = data.getElementById('html_linkback');
1097 - js_log("on: "+_this.id + " got data "+ data.length + ' test elm:' + elm.getAttribute('rel'));
1098 - if(typeof data == 'object' ){
1099 - js_log('type of data is object, data:'+ data.toString());
1100 - _this.roe_data = data;
 1096+ //elm = xml.getElementById('html_linkback');
 1097+ //js_log("on: "+_this.id + " got xml "+ xml.length + ' test elm:' + elm.getAttribute('rel'));
 1098+ if(typeof data == 'object' ){
 1099+ _this.roe_xml = data;
11011100 var cmml_available=false;
1102 - $j.each(_this.roe_data.getElementsByTagName('mediaSource'), function(inx, n){
 1101+ $j.each(_this.roe_xml.getElementsByTagName('mediaSource'), function(inx, n){
11031102 js_log(' on element: ' + n.getAttribute('content-type'));
11041103 if(n.getAttribute('content-type')=='video/ogg' && n.getAttribute("default")=="true"){
11051104 js_log('set src to '+n.getAttribute("src"));
@@ -1115,9 +1114,9 @@
11161115 }
11171116 /*
11181117 //set the src to video tag with "default" attribute:
1119 - //var rVids = _this.roe_data.getElementsByTagName('video');
 1118+ //var rVids = _this.roe_xml.getElementsByTagName('video');
11201119 js_log('found '+ rVids.length + ' video tags');
1121 - $j.each(_this.roe_data.getElementsByTagName('video'), function(inx,n){
 1120+ $j.each(_this.roe_xml.getElementsByTagName('video'), function(inx,n){
11221121 if(n.getAttribute("default")=="true"){
11231122 js_log('set src to '+n.getAttribute("src"));
11241123 _this['src'] = n.getAttribute("src");
@@ -1125,14 +1124,14 @@
11261125 });
11271126 */
11281127 //set the thumbnail:
1129 - $j.each(_this.roe_data.getElementsByTagName('img'), function(inx, n){
 1128+ $j.each(_this.roe_xml.getElementsByTagName('img'), function(inx, n){
11301129 if(n.getAttribute("id")=="stream_thumb"){
11311130 js_log('set thumb to '+n.getAttribute("src"));
11321131 _this['thumbnail'] = n.getAttribute("src");
11331132 }
11341133 });
11351134 //set the linkback:
1136 - $j.each(_this.roe_data.getElementsByTagName('link'), function(inx, n){
 1135+ $j.each(_this.roe_xml.getElementsByTagName('link'), function(inx, n){
11371136 if(n.getAttribute('id')=='html_linkback'){
11381137 js_log('set linkback to '+n.getAttribute("href"));
11391138 _this['linkback'] = n.getAttribute('href');
@@ -1143,7 +1142,7 @@
11441143 //could not find default video src for playback
11451144 $j(_this).html(getMsg('missing_video_stream'));
11461145 }else{
1147 - //js_log("do callback roe data:"+_this['roe_data']+' '+ _this['src'] +' '+ _this['thumbnail'] + 'cb: '+ callback);
 1146+ //js_log("do callback roe data:"+_this['roe_xml']+' '+ _this['src'] +' '+ _this['thumbnail'] + 'cb: '+ callback);
11481147 callback(_this.id);
11491148 }
11501149 });
@@ -1316,7 +1315,7 @@
13171316 if(this.show_meta_link){
13181317 thumb_html+='<div style="border:none;position:absolute;top:2px;right:2px;z-index:1">'+
13191318 '<a title="'+getMsg('select_transcript_set')+'" href="javascript:document.getElementById(\''+this.id+'\').showTextInterface();">';
1320 - thumb_html+=getTransparentPng({id:'metaText_'+this.id, width:"40", height:"27", border:"0",
 1319+ thumb_html+=getTransparentPng({id:'metaButton_'+this.id, width:"40", height:"27", border:"0",
13211320 src:mv_embed_path + 'images/cc_meta_sm.png' });
13221321 thumb_html+='</div>';
13231322 }
@@ -1361,11 +1360,13 @@
13621361 'src=&quot;'+mv_embed_path+'mv_embed.js&quot;&gt;&lt;/script&gt' +
13631362 '&lt;video ';
13641363 if(this.roe){
1365 - embed_code_html+='roe=&quot;'+this.roe+'&quot; /&gt;';
 1364+ embed_code_html+='roe=&quot;'+this.roe+'&quot; &gt;';
13661365 }else{
13671366 embed_code_html+='src=&quot;'+this.src+'&quot; ' +
1368 - 'thumbnail=&quot;'+embed_thumb_html+'&quot;/&gt;';
 1367+ 'thumbnail=&quot;'+embed_thumb_html+'&quot;&gt;';
13691368 }
 1369+ //close the video tag
 1370+ embed_code_html+='&lt;/video&gt;';
13701371 //add the hidden embed code:
13711372 thumb_html+='<div id="embed_code_'+this.id+'" style="border:solid;border-color:black;overflow:hidden;display:none;position:absolute;bottom:2px;right:'+(right_offset+30)+'px;width:'+(this.width-100)+'px;z-index:1">'+
13721373 '<input onClick="this.select();" type="text" size="40" length="1024" value="'+embed_code_html+'">'
@@ -1445,7 +1446,7 @@
14461447 '<span id="con_vl_'+this.id+'" style="position:absolute;top:20px;left:20px;color:white;">';
14471448 var dl_list='';
14481449 //set to loading if we don't have the roe data yet:
1449 - if(!this.roe_data && this.roe){
 1450+ if(!this.roe_xml && this.roe){
14501451 select_code+=getMsg('loading_txt');
14511452 var _this = this;
14521453 this.getParseROE(function(){
@@ -1465,7 +1466,7 @@
14661467 var out='<b style="color:white;">'+getMsg('download_from')+' '+parseUri(this.src).queryKey['t']+'</b><br>';
14671468 out+='<span style="color:white"><blockquote>';
14681469 var dl_list=dl_txt_list='';
1469 - $j.each(this.roe_data.getElementsByTagName('mediaSource'), function(inx,n){
 1470+ $j.each(this.roe_xml.getElementsByTagName('mediaSource'), function(inx,n){
14701471 var dl_line = '<li><a style="color:white" href="' + n.getAttribute("src") +'"> '+
14711472 n.getAttribute("title")+'</a></li>'+"\n";
14721473 if(n.getAttribute("content-type")=="video/ogg"){
@@ -1812,21 +1813,22 @@
18131814 }else{
18141815 //check if MV_embed path matches document.URL then we can use the local proxy:
18151816 if(parseUri(document.URL).host == parseUri(mv_embed_path).host ){
1816 - js_log('use mv_embed_proxy : ' + parseUri(document.URL).host + ' != '+ parseUri(req_url).host);
 1817+ js_log('use mv_embed_proxy : ' + parseUri(document.URL).host + ' == '+ parseUri(mv_embed_path).host);
18171818 //alert("do ajax req:" +req_url);
18181819 $j.ajax({
18191820 type: "POST",
1820 - url:mv_embed_path + 'mv_data_proxy.php',
 1821+ url:mv_embed_path + 'mv_data_proxy.php',
18211822 data:{url:req_url},
1822 - success:function(data){
1823 - js_log("did ajax req:"+ typeof data);
 1823+ success:function(data){
18241824 callback(data);
18251825 }
18261826 });
18271827 }else{
1828 - //need to get data via DOM proxy injection with callback
 1828+ //get data via DOM injection of proxy request with callback
18291829 global_req_cb.push(callback);
1830 - if(!mv_json_response){
 1830+ if(!mv_json_response){
 1831+ //@@todo should remove this functionality from mv_data_proxy
 1832+ //and require sites serve up data as javascript with a callback
18311833 req_url =req_url.replace(/&/g,'__amp__');
18321834 loadExternalJs(mv_embed_path+'mv_data_proxy.php?url='+req_url+
18331835 '&cb=mv_jsdata_cb&cb_inx='+(global_req_cb.length-1) );
@@ -1838,6 +1840,7 @@
18391841 }
18401842 }
18411843 function mv_jsdata_cb(response){
 1844+ js_log('mv_jsdata_cb');
18421845 //run the callback from the global req cb object:
18431846 if(!global_req_cb[response['cb_inx']]){
18441847 js_log('missing req cb index');
@@ -1853,7 +1856,7 @@
18541857 break;
18551858 case 'text/xml':
18561859 if(typeof response['pay_load'] == 'string'){
1857 - js_log(response['pay_load']);
 1860+ js_log('load string:'+ response['pay_load']);
18581861 //attempt to parse as xml for IE
18591862 if(embedTypes.msie){
18601863 var xmldata=new ActiveXObject("Microsoft.XMLDOM");
@@ -1926,7 +1929,6 @@
19271930 }
19281931 if (typeof DOMParser == "undefined") {
19291932 DOMParser = function () {}
1930 -
19311933 DOMParser.prototype.parseFromString = function (str, contentType) {
19321934 if (typeof ActiveXObject != "undefined") {
19331935 var d = new ActiveXObject("MSXML.DomDocument");
@@ -1947,26 +1949,46 @@
19481950 /*
19491951 * utility functions:
19501952 */
1951 -//if(typeof js_log == 'undefined'){
1952 - function js_log(string){
1953 - if( window.console ){
1954 - console.log(string);
1955 - }else{
1956 - /*
1957 - * IE and non-firebug debug:
1958 - */
1959 - var log_elm = document.getElementById('mv_js_log');
1960 - /*if(!log_elm){
1961 - document.write('<div style="position:absolute;z-index:50;top:0px;left:0px;right:0px;height:150px;"><textarea id="mv_js_log" cols="80" rows="6"></textarea></div>');
1962 - var log_elm = document.getElementById('mv_js_log');
1963 - }
1964 - if(log_elm){
1965 - log_elm.value+=string+"\n";
1966 - }*/
1967 - }
1968 - }
1969 -//}
1970 -//report errors as alerts:
 1953+function js_log(string){
 1954+ if( window.console ){
 1955+ console.log(string);
 1956+ }else{
 1957+ /*
 1958+ * IE and non-firebug debug:
 1959+ */
 1960+ /*var log_elm = document.getElementById('mv_js_log');
 1961+ if(!log_elm){
 1962+ document.write('<div style="position:absolute;z-index:500;top:0px;left:0px;right:0px;height:150px;"><textarea id="mv_js_log" cols="80" rows="6"></textarea></div>');
 1963+ var log_elm = document.getElementById('mv_js_log');
 1964+ }
 1965+ if(log_elm){
 1966+ log_elm.value+=string+"\n";
 1967+ }*/
 1968+ }
 1969+}
 1970+function getNextHighestZindex(obj){
 1971+ var highestIndex = 0;
 1972+ var currentIndex = 0;
 1973+ var elArray = Array();
 1974+ if(obj){ elArray = obj.getElementsByTagName('*'); }else{ elArray = document.getElementsByTagName('*'); }
 1975+ for(var i=0; i < elArray.length; i++){
 1976+ if (elArray[i].currentStyle){
 1977+ currentIndex = parseFloat(elArray[i].currentStyle['zIndex']);
 1978+ }else if(window.getComputedStyle){
 1979+ currentIndex = parseFloat(document.defaultView.getComputedStyle(elArray[i],null).getPropertyValue('z-index'));
 1980+ }
 1981+ if(!isNaN(currentIndex) && currentIndex > highestIndex){ highestIndex = currentIndex; }
 1982+ }
 1983+ return(highestIndex+1);
 1984+}
 1985+function var_dump(obj) {
 1986+ if(typeof obj == "object") {
 1987+ return "Type: "+typeof(obj)+((obj.constructor) ? "\nConstructor: "+obj.constructor : "")+"\nValue: " + obj;
 1988+ } else {
 1989+ return "Type: "+typeof(obj)+"\nValue: "+obj;
 1990+ }
 1991+}
 1992+
19711993 function js_error(string){
19721994 alert(string);
19731995 }
\ No newline at end of file
Index: trunk/extensions/MetavidWiki/skins/mv_embed/mv_vlcEmbed.js
@@ -9,6 +9,7 @@
1010 //init vars:
1111 monitorTimerId : 0,
1212 prevState : 0,
 13+ currentTime:0,
1314 userSlide:false,
1415 getEmbedHTML : function(){
1516 //setup the interface controls if requested
@@ -178,7 +179,8 @@
179180 onPlaying : function(){
180181 this.mediaLen = this.vlc.input.length;
181182 //js_log('on playing:'+ this.mediaLen +' time:'+ this.vlc.input.time + ' p:'+this.vlc.input.position);
182 -
 183+ //update the currentTime attribute
 184+ this.currentTime =this.vlc.input.time/1000;
183185 if( this.mediaLen > 0 || this.vlc.input.time > 0){
184186 ///set mediaLen via request Url
185187 if(this.mediaLen==0)
@@ -266,7 +268,9 @@
267269 fullscreen : function(){
268270 this.vlc.video.toggleFullscreen();
269271 },
270 - /* returns current time in float seconds */
 272+ /* returns current time in float seconds
 273+ * as per html5 we should just have an attribute by name of CurrentTime
 274+ * http://www.whatwg.org/specs/web-apps/current-work/#currenttime
271275 currentTime : function(){
272276 if(typeof this.vlc != 'undefined' ){
273277 if(typeof this.vlc.input != 'undefined' ){
@@ -275,6 +279,7 @@
276280 }
277281 return '0';
278282 },
 283+ */
279284 // get the embed vlc object
280285 getVLC : function getVLC(){
281286 this.vlc = this.getPluginEmbed();
Index: trunk/extensions/MetavidWiki/skins/mv_embed/sample_page.php
@@ -39,13 +39,12 @@
4040 //$sample_embed[1]['tag'] = '<video roe="http://192.168.0.104/mvWiki/index.php?title=Special:MvExportStream&feed_format=roe&stream_name=Senate_proceeding_08-01-07&t=0:00:00/0:05:00">';
4141 //$sample_embed[1]['desc'] = 'Demo of json ROE attribute';
4242
43 -$sample_embed[2]['tag'] = '<video roe="http://metavid.ucsc.edu/wiki/index.php?title=Special:MvExportStream&feed_format=roe&stream_name=Senate_proceeding_08-01-07&t=0:06:00/0:07:00">';
44 -$sample_embed[2]['desc'] = 'Demo2 of json ROE attribute';
 43+//$sample_embed[2]['tag'] = '<video roe="http://metavid.ucsc.edu/wiki/index.php?title=Special:MvExportStream&feed_format=roe&stream_name=Senate_proceeding_08-01-07&t=0:06:00/0:07:00">';
 44+//$sample_embed[2]['desc'] = 'Demo2 of json ROE attribute';
4545
4646
47 -//$sample_embed[2]['tag'] = '<video id="v2" controls="true" style="width:400px;height:400px"
48 -//roe="http://mammoth.dnip.net/wiki/index.php?title=Special:MvExportStream&feed_format=roe&stream_name=senate_11-14-05&t=0:42:14/0:42:56"/>';
49 -//$sample_embed[2]['desc'] = 'video with controls and thumbnail';
 47+$sample_embed[2]['tag'] = '<video id="v2" controls="true" roe="http://mammoth.dnip.net/mvWiki/index.php?title=Special:MvExportStream&feed_format=roe&stream_name=senate_11-14-05&t=0:42:14/0:42:56"/>';
 48+$sample_embed[2]['desc'] = 'video with controls and thumbnail';
5049
5150
5251 //playlist tags:

Status & tagging log