r40350 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:r40349‎ | r40350 | r40351 >
Date:01:45, 3 September 2008
Author:dale
Status:old
Tags:
Comment:
improved smil transition support
Modified paths:
  • /trunk/extensions/MetavidWiki/skins/mv_embed/embedLibs/mv_nativeEmbed.js (modified) (history)
  • /trunk/extensions/MetavidWiki/skins/mv_embed/example_usage/sample_smil.smil.xml (modified) (history)
  • /trunk/extensions/MetavidWiki/skins/mv_embed/mv_embed.js (modified) (history)
  • /trunk/extensions/MetavidWiki/skins/mv_embed/mv_playlist.js (modified) (history)

Diff [purge]

Index: trunk/extensions/MetavidWiki/skins/mv_embed/example_usage/sample_smil.smil.xml
@@ -17,27 +17,27 @@
1818 <transition id="xFade"
1919 type="fade"
2020 subtype="crossfade"
21 - dur="2s"/>
 21+ dur="4s"/>
2222
2323 </head>
2424 <body>
2525 <seq>
26 - <video src="sample_fish.ogg?t=0:0:0/0:0:26"
 26+ <video src="sample_fish.ogg?t=0:0:0/0:0:25"
2727 region="video_region"
28 - transIn="fromGreen"
29 - fill="remove"
30 - type="video/ogg"
 28+ transIn="fromGreen"
 29+ transOut="xFade"
 30+ type="video/ogg"
 31+ fill="transition"
 32+ dur="10s"
3133 poster="sample_fish.jpg"/>
3234
3335 <video src="sample_magnolia.ogg?t=0:0:0/0:0:05"
3436 region="video_region"
3537 transIn="xFade"
36 - transOut="toGreen"
37 - begin="2s"
 38+ transOut="toGreen"
3839 fill="transition"
3940 type="video/ogg"
40 - poster="sample_magnolia.jpg"/>
41 -
 41+ poster="sample_magnolia.jpg"/>
4242 </seq>
4343 </body>
4444 </smil>
Index: trunk/extensions/MetavidWiki/skins/mv_embed/embedLibs/mv_nativeEmbed.js
@@ -10,8 +10,8 @@
1111 'volume_control':true,
1212
1313 'overlays':true,
14 - 'playlist_driver':true //if the object supports playlist functions
15 - },
 14+ 'playlist_swap_loader':true //if the object supports playlist functions
 15+ },
1616 getEmbedHTML : function (){
1717 setTimeout('$j(\'#'+this.id+'\').get(0).postEmbedJS()', 150);
1818 //set a default duration of 30 seconds: cortao should detect duration.
@@ -48,15 +48,15 @@
4949 this.getVID(); //make shure we have .vid obj
5050 //js_log('time loaded: ' + this.vid.TimeRanges );
5151 //js_log('current time: '+ this.vid.currentTime + ' dur: ' + this.duration);
52 -
53 - //update duration if not set
 52+
 53+ //update duration if not set
5454 this.duration =(this.vid.duration==0)?this.getDuration():this.vid.duration;
5555
5656 //update currentTime
5757 this.currentTime = this.vid.currentTime;
5858
59 - //check for overlays to run or stop
60 - this.doSmilTransitionOverlays();
 59+ //does smili based actions
 60+ this.doSmilActions();
6161
6262 if( this.currentTime > 0 ){
6363 if(!this.userSlide){
@@ -117,58 +117,124 @@
118118 },
119119 //handles the rendering of overlays loaind of future clips (if nessesary)
120120 //@@todo could be lazy loaded if nessesary
121 - doSmilTransitionOverlays: function(){
122 - if(this.pc){
123 - _pClip = this.pc;
 121+ doSmilActions: function(){
 122+ if(this.pc){ //make sure we haev a parent clip:
 123+ var offSetTime = 0; //offset time should let us start a transition later on if we have to.
 124+ _pClip = this.pc;
 125+
 126+ //@@todo move some of this out of this loop
 127+ if(!_pClip.dur)
 128+ _pClip.dur = this.duration;
 129+
 130+ //check for duration actions / clip freze mode
 131+ if(_pClip.dur <= this.currentTime ){
 132+ //force next clip
 133+ js_log('smil dur: '+_pClip.dur + ' <= curTime: ' + this.currentTime + ' go to next clip');
 134+ _pClip.pp.next();
 135+ }
 136+
 137+ if(_pClip.dur >= this.currentTime ){
 138+ //@@todo freeze on onClipStop
 139+ }
 140+
 141+ if(_pClip.begin){
 142+ //@@todo do freeze until begin time
 143+ }
 144+
 145+ //check future clip for transitions (assume we are the current clip)
 146+ /*var next_pClip = _pClip.pp.getClip(1);
 147+ if(next_pClip.id!=_pClip.id){ //make sure we are not transitioning to the current clip
 148+ if(next_pClip.transIn){
 149+ if(next_pClip.transIn.subtype=='crossfade'){
 150+ //apply the effect to the end of "this"
 151+ if(this.currentTime > (this.duration - next_pClip.transIn.dur) ){
 152+ js_log("do clip: cross fade now: "+(this.duration - next_pClip.transIn.dur) );
 153+ if(!_pClip['trans_corssfadeOut']){
 154+ //make new trans_corssfadeOut (special for cross fade)
 155+ _pClip['trans_corssfadeOut']=_pClip.pp.transitions[next_pClip.transIn.id].clone();
 156+ _pClip.trans_corssfadeOut.cfout=true;
 157+ }
 158+ var overlay_selector_id = 'clipDesc_'+_pClip.id;
 159+ mvTransLib.doTransition(_pClip.trans_corssfadeOut, overlay_selector_id, offSetTime )
 160+ }
 161+
 162+ }
 163+ }
 164+ }*/
 165+ js_log("check for transOut: ct:"+this.currentTime + ' not > dur:'+_pClip.dur+'-'+'cdur:'+ _pClip.transOut.dur +' = '+ (_pClip.dur - _pClip.transOut.dur));
 166+ if(_pClip.transOut){
 167+ if(this.currentTime > (_pClip.dur - _pClip.transOut.dur) ){
 168+ if(_pClip.transOut.animation_state==0){
 169+ js_log("RUN transOut: ct:"+this.currentTime + ' > ' + (_pClip.dur - _pClip.transOut.dur));
 170+ _pClip.transOut.animation_state=1;//running transition
 171+ if(_pClip.transOut.subtype=='crossfade'){
 172+ //make sure the "next" clip is visiable
 173+ var next_pClip = _pClip.pp.getClip(1);
 174+ $j('#clipDesc_'+next_pClip.id).show();
 175+ var overlay_selector_id = 'clipDesc_'+_pClip.id;
 176+ mvTransLib.doTransition(_pClip.transOut, overlay_selector_id, offSetTime );
 177+ }
 178+ }
 179+ }
 180+ }
124181 if(_pClip.transIn){
125 - //js_log('transIn exist see if we are in time range');
126 - if(_pClip.transIn.dur){
127 - //only run if the animation_done is not done yet:
128 - if(!_pClip.transIn.animation_done){ //make sure the animation is not done
129 - if(this.currentTime < _pClip.transIn.dur){
130 - if(_pClip.transIn.animation_state==0){
131 - _pClip.transIn.animation_state=1;//running transition
132 - js_log("RUN TRANSITION: ");
133 - //@@todo process special case when overlay is subsequent clip
134 - var overlay_selector_id= 'transIn_'+_pClip.id;
135 - if( ! $j('#'+overlay_selector_id).get(0) ){
136 - js_log('adding in element: to #mv_ebct_'+_pClip.pp.id + ' oid:' +overlay_selector_id);
137 - $j('#mv_ebct_'+_pClip.pp.id).prepend(''+
138 - '<div id="'+overlay_selector_id+'" ' +
139 - 'style="position:absolute;top:0px;left:0px;' +
140 - 'height:'+this.height+'px;'+
141 - 'width:'+this.width+'px;' +
142 - 'opacity:1;'+
143 - 'z-index:2">' +
144 - '</div>');
145 - }
146 - js_log('selector element: '+$j('#'+overlay_selector_id).length);
147 - //start transition for remaining time
148 - var offSetTime = 0; //future think about what time info we need to send
149 - //var tran_function = getTransitionFunction(_pClip.transIn,overlay_selector_id, offSetTime)
150 - mvTransLib.doTransition(_pClip.transIn, overlay_selector_id, offSetTime )
151 - }
152 - //special case of cross fading clips:
153 - //js_log('tran function: '+tran_function);
154 - //debugger;
155 - }
156 - }
157 - }
 182+ if(this.currentTime < _pClip.transIn.dur){
 183+ if(_pClip.transIn.animation_state==0){
 184+ _pClip.transIn.animation_state=1;//running transition
 185+ js_log("RUN transIn ");
 186+ //@@todo process special case when overlay is subsequent clip
 187+ if(_pClip.transIn.subtype=='crossfade'){
 188+ //check if prev clip pid exist:
 189+ var prev_clip = _pClip.pp.getClip(-1);
 190+ var overlay_selector_id = 'clipDesc_'+prev_clip.id;
 191+ }else{
 192+ var overlay_selector_id =this.getOverlaySelector(_pClip, 'transIn_');
 193+ }
 194+ js_log('selector element: '+$j('#'+overlay_selector_id).length);
 195+ //start transition for remaining time
 196+
 197+ //var tran_function = getTransitionFunction(_pClip.transIn,overlay_selector_id, offSetTime)
 198+ mvTransLib.doTransition(_pClip.transIn, overlay_selector_id, offSetTime )
 199+ }
 200+ //special case of cross fading clips:
 201+ //js_log('tran function: '+tran_function);
 202+ //debugger;
 203+ }
158204 }
159205 }
 206+ },
 207+ getOverlaySelector:function(_pClip, pre_var){
 208+ var overlay_selector_id= pre_var+_pClip.id;
 209+ if( ! $j('#'+overlay_selector_id).get(0) ){
 210+ $j('#mv_ebct_'+_pClip.pp.id).prepend(''+
 211+ '<div id="'+overlay_selector_id+'" ' +
 212+ 'style="position:absolute;top:0px;left:0px;' +
 213+ 'height:'+this.height+'px;'+
 214+ 'width:'+this.width+'px;' +
 215+ 'z-index:2">' +
 216+ '</div>');
 217+ }
 218+ return overlay_selector_id;
 219+ },
 220+ /*
 221+ * playlist driver
 222+ * mannages native playlist calls
 223+ */
 224+ playlistNext:function(){
 225+ if(!this.pc){//make sure we are a clip
 226+ //
 227+
 228+ }
160229 }
161230 }
162231 /*
163232 * mvTransLib libary of transitions
164233 * a single object called to initiate transition effects can easily be extended in separate js file
165234 * (that way a limited feature set "sequence" need not include a _lot_ of js unless necessary )
166 - */
167 - /*
 235+ *
168236 * Smil Transition Effects see:
169237 * http://www.w3.org/TR/SMIL3/smil-transitions.html#TransitionEffects-TransitionAttribute
170 - */
171 -
172 -
 238+ */
173239 mvTransLib = {
174240 /*
175241 * function doTransition lookups up the transition in the mvTransLib obj
@@ -180,18 +246,14 @@
181247 if(!tObj.type)
182248 return js_log('transition is missing type attribute');
183249
184 - if(!tObj.type)
 250+ if(!tObj.subtype)
185251 return js_log('transition is missing subtype attribute');
186252
187253 if(!this['type'][tObj.type])
188 - return js_log('mvTransLib is missing type: '+tObj.type);
 254+ return js_log('mvTransLib does not support type: '+tObj.type);
189255
190256 if(!this['type'][tObj.type][tObj.subtype])
191 - return js_log('mvTransLib is missing subType: '+tObj.subtype);
192 -
193 - //maybe have a default for this?
194 - if(!tObj.dur)
195 - return js_log('missing transition duration');
 257+ return js_log('mvTransLib does not support subType: '+tObj.subtype);
196258
197259 //has type and subype call function with params:
198260 this['type'][tObj.type][tObj.subtype](tObj,overlay_selector_id, offSetTime);
@@ -229,7 +291,7 @@
230292 }
231293 );
232294 },
233 - //depends if transition_in or transition_out
 295+ //corssFade
234296 crossfade:function(tObj, overlay_selector_id, offSetTime){
235297 js_log('f:crossfade: '+overlay_selector_id);
236298 //set the initial state
Index: trunk/extensions/MetavidWiki/skins/mv_embed/mv_embed.js
@@ -1917,8 +1917,8 @@
19181918 }
19191919 // time display
19201920 if(this.supports['time_display'] && (available_width > 80))
1921 - {
1922 - html_code += '<div id="mv_time_'+id+'" class="time">'+this.getTimeReq()+'</div>';
 1921+ {
 1922+ html_code += '<div id="mv_time_'+id+'" class="time">'+this.getDurationNTP()+'</div>';
19231923 available_width -= 80;
19241924 }
19251925
@@ -2070,8 +2070,7 @@
20712071 ' overflow:hidden; top:0px; left:0px; width:'+this.playerPixelWidth()+'px; height:'+this.playerPixelHeight()+'px; z-index:0;">'+
20722072 '<img width="'+this.playerPixelWidth()+'" height="'+this.playerPixelHeight()+'" style="position:relative;width:'+this.playerPixelWidth()+';height:'+this.playerPixelHeight()+'"' +
20732073 ' id="img_thumb_'+this.id+'" src="' + thumbnail + '">';
2074 -
2075 - js_log("PLAY BUTTON: " + this.play_button);
 2074+
20762075 if(this.play_button==true)
20772076 thumb_html+=this.getPlayButton();
20782077 thumb_html+='</div>';
Index: trunk/extensions/MetavidWiki/skins/mv_embed/mv_playlist.js
@@ -335,6 +335,8 @@
336336 //update the embed html:
337337 clip.embed.height=plObj.height;
338338 clip.embed.width=plObj.width;
 339+ if(clip.id != plObj.cur_clip.id)
 340+ clip.embed.play_button=false;
339341
340342 clip.embed.getHTML();//get the thubnails for everything
341343 $j(clip.embed).css({ 'position':"absolute",'top':"0px", 'left':"0px"});
@@ -342,11 +344,10 @@
343345 $j('#clipDesc_'+clip.id).get(0).appendChild(clip.embed);
344346 }else{
345347 js_log('cound not find: clipDesc_'+clip.id);
346 - }
347 -
 348+ }
348349 //add the controls if we are on the current clip:
349350 if(clip.id == plObj.cur_clip.id){
350 - js_log("add controls: "+ clip.embed.getControlsHTML() +"\nto:videoPlayer_"+ clip.embed.id);
 351+ //js_log("add controls: "+ clip.embed.getControlsHTML() +"\nto:videoPlayer_"+ clip.embed.id);
351352 $j('#videoPlayer_'+clip.embed.id).append(
352353 '<div id="mv_embedded_controls_'+plObj.id+'" ' +
353354 'style="postion:relative;top:'+(plObj.height+title_bar_height)+'px" ' +
@@ -354,7 +355,7 @@
355356 clip.embed.getControlsHTML() +
356357 '</div>'
357358 );
358 - }
 359+ }
359360 });
360361
361362 if(this.cur_clip)
@@ -507,10 +508,19 @@
508509 next: function(){
509510 //advance the playhead to the next clip
510511 var next_clip = this.getClip(1);
511 - if(this.cur_clip.embed.supports['playlist_driver']){
 512+ if(this.cur_clip.embed.supports['playlist_driver']){ //where the plugin is just feed a playlist
512513 //do next clip action on start_clip embed cuz its the one being displayed:
513514 this.start_clip.embed.playlistNext();
514515 this.cur_clip=next_clip;
 516+ }else if(this.cur_clip.embed.supports['playlist_swap_loader']){
 517+ //where the plugin supports pre_loading future clips and manage that in javascript
 518+ //pause current clip
 519+ this.cur_clip.embed.pause;
 520+ //do swap:
 521+ $j('#clipDesc_'+this.cur_clip.id).hide();
 522+ this.cur_clip=next_clip;
 523+ $j('#clipDesc_'+this.cur_clip.id).show();
 524+ this.cur_clip.embed.play();
515525 }else{
516526 js_log('do next');
517527 this.switchPlayingClip(next_clip);
@@ -522,8 +532,17 @@
523533 if(this.cur_clip.embed.supports['playlist_driver']){
524534 this.start_clip.embed.playlistPrev();
525535 this.cur_clip=prev_clip;
 536+ }else if(this.cur_clip.embed.supports['playlist_swap_loader']){
 537+ //where the plugin supports pre_loading future clips and manage that in javascript
 538+ //pause current clip
 539+ this.cur_clip.embed.pause;
 540+ //do swap:
 541+ $j('#clipDesc_'+this.cur_clip.id).hide();
 542+ this.cur_clip=prev_clip;
 543+ $j('#clipDesc_'+this.cur_clip.id).show();
 544+ this.cur_clip.embed.play();
526545 }else{
527 - js_log('do prev');
 546+ js_log('do prev hard embed swap');
528547 this.switchPlayingClip(prev_clip);
529548 }
530549 },
@@ -640,11 +659,13 @@
641660 },
642661 //returns a clip. If offset is out of bound returns first or last clip
643662 getClip: function(clip_offset){
644 - if(!clip_offset)clip_offset=0;
645 - //idorate through clips for this.cur_clipID (more complicated to allow for id of clips
 663+ if(!clip_offset)clip_offset=0;
 664+
646665 var cov = this.cur_clip.order + clip_offset;
647666 var cmax = this.getClipCount()-1;
648667 //js_log('cov:'+cov +' cmax:'+ cmax);
 668+
 669+ //force first or last clip if offset is outOfBounds
649670 if( cov >= 0 && cov <= cmax ){
650671 return this.default_track.clips[cov]
651672 }else{
@@ -1554,7 +1575,8 @@
15551576 'transIn',
15561577 'transOut',
15571578 'begin',
1558 - 'fill'
 1579+ 'fill',
 1580+ 'dur'
15591581 );
15601582 //all the overwritten and new methods for playlist extension of mv_embed
15611583 mvSMILClip.prototype = {
@@ -1590,7 +1612,9 @@
15911613 if(this.transOut && this.pp.transitions[this.transOut])
15921614 this.transOut =this.pp.transitions[this.transOut].clone();
15931615
1594 -
 1616+ //parse duration:
 1617+ if(this.dur)
 1618+ this.dur = smilParseTime(this.dur);
15951619 //check if the transition is a valid id:
15961620 return this;
15971621 },
@@ -1625,6 +1649,7 @@
16261650 };
16271651 transitionObj.prototype = {
16281652 animation_state:0, //can be 0=unset, 1=running, 2=done
 1653+ dur:2, //default duration of 2
16291654 init:function(element){
16301655 //load supported attributes:
16311656 var _this = this;
@@ -1635,7 +1660,7 @@
16361661 //@@todo proccess duration (for now just srip s) per:
16371662 //http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-ClockValueSyntax
16381663 if(_this.dur)
1639 - _this.dur = parseInt(_this.dur.replace('s', ''));
 1664+ _this.dur = smilParseTime(_this.dur);
16401665 },
16411666 clone:function(){
16421667 var cObj = new this.constructor();
@@ -1644,6 +1669,18 @@
16451670 return cObj;
16461671 }
16471672 }
 1673+/*
 1674+ * takes an input
 1675+ * @time_str input time string
 1676+ * returns time in seconds
 1677+ *
 1678+ * @@todo proccess duration (for now just srip s) per:
 1679+ * http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-ClockValueSyntax
 1680+ * (probably have to use a Time object to fully support the smil spec
 1681+ */
 1682+function smilParseTime(time_str){
 1683+ return parseInt(time_str.replace('s', ''));
 1684+}
16481685 /***************************
16491686 * end SMIL specific code
16501687 ***************************/