r41172 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:r41171‎ | r41172 | r41173 >
Date:00:21, 23 September 2008
Author:dale
Status:old
Tags:
Comment:
improved mv_embed sequence editor and minnor fixes
Modified paths:
  • /trunk/extensions/MetavidWiki/skins/mv_embed/mv_embed.js (modified) (history)
  • /trunk/extensions/MetavidWiki/skins/mv_embed/mv_playlist.js (modified) (history)
  • /trunk/extensions/MetavidWiki/skins/mv_embed/mv_sequence.css (deleted) (history)
  • /trunk/extensions/MetavidWiki/skins/mv_embed/mv_sequencer.js (modified) (history)
  • /trunk/extensions/MetavidWiki/skins/mv_embed/skins/mvpcf/mv_sequence.css (added) (history)
  • /trunk/extensions/MetavidWiki/skins/mv_embed/skins/mvpcf/mv_sequence.css (added) (history)
  • /trunk/extensions/MetavidWiki/skins/mv_embed/skins/mvpcf/styles.css (modified) (history)
  • /trunk/extensions/MetavidWiki/skins/mv_stream.js (modified) (history)

Diff [purge]

Index: trunk/extensions/MetavidWiki/skins/mv_stream.js
@@ -90,9 +90,9 @@
9191 //add_custom_effects();
9292 //set up the init values for mouse over restore:
9393 org_vid_title = $j('#mv_stream_time').html();
94 - if(!$j('#embed_vid').get(0)){
 94+ if(!$j('#embed_vid').get(0).ready_to_play){
9595 //no embed video present stop init
96 - return '';
 96+ return js_log('no clip ready to play');
9797 }
9898 org_vid_time_req = $j('#embed_vid').get(0).getTimeReq();
9999 org_thum_src = $j('#embed_vid').get(0).thumbnail;
Index: trunk/extensions/MetavidWiki/skins/mv_embed/mv_sequence.css
@@ -1,72 +0,0 @@
2 -/* the css file for sequence styles */
3 -
4 -.mv_head_jump{
5 - font-family:"verdana","helvetica","arial",sans-serif;
6 - font-size:11px;
7 - background:#CCCCCC;
8 - z-index:1;
9 -}
10 -.mv_playline{
11 - position:absolute;
12 - background:gray;
13 - top:20px;
14 - left:0px;
15 - width:2px;
16 - bottom:20px;
17 - z-index:10;
18 -}
19 -.mv_seq_tracks{
20 - position:absolute;left:90px;top:0px;right:12px;bottom:0px;overflow:auto;
21 -}
22 -.mv_tl_left_cnt{
23 - position:absolute;
24 - top:0px;
25 - left:0px;
26 - bottom:0px;
27 - width:85px;
28 -}
29 -.track_name{
30 - font-family:"verdana","helvetica","arial",sans-serif;
31 - font-size:12px;
32 - width:85px;
33 - position:absolute;
34 - background:#CCCCCC;
35 -}
36 -.container_track{
37 - position:absolute;
38 - border:solid thin red;
39 -
40 -}
41 -.mv_time_clip_text{
42 - font-family:"verdana","helvetica","arial",sans-serif;
43 - font-size:12px;
44 -}
45 -.mv_time_clip{
46 - position:absolute;
47 - z-index:0;
48 - overflow:hidden;
49 - border:solid thin white;
50 - white-space: nowrap;
51 -}
52 -.mv_clip_cnt{
53 - position:absolute;
54 - width:16px;
55 - height:16px;
56 -}
57 -
58 -.ui-drag-e{ cursor: e-resize;}
59 -.ui-drag-w{ cursor: w-resize;}
60 -
61 -.mv_clip_stats{
62 - font-family:"verdana","helvetica","arial",sans-serif;
63 - font-size:11px;
64 - position:absolute;
65 - background:#CCCCCC;
66 - bottom:0px;
67 - right:0px;
68 -}
69 -.mv_droppable{
70 - position:absolute;
71 - top:0px;
72 - z-index:-1;
73 -}
Index: trunk/extensions/MetavidWiki/skins/mv_embed/skins/mvpcf/mv_sequence.css
@@ -0,0 +1,71 @@
 2+/* the css file for sequence styles */
 3+.mv_head_jump{
 4+ font-family:"verdana","helvetica","arial",sans-serif;
 5+ font-size:11px;
 6+ background:#CCCCCC;
 7+ z-index:1;
 8+}
 9+.mv_playline{
 10+ position:absolute;
 11+ background:gray;
 12+ top:20px;
 13+ left:0px;
 14+ width:2px;
 15+ bottom:20px;
 16+ z-index:10;
 17+}
 18+.mv_seq_tracks{
 19+ position:absolute;left:90px;top:0px;right:12px;bottom:0px;overflow:auto;
 20+}
 21+.mv_tl_left_cnt{
 22+ position:absolute;
 23+ top:0px;
 24+ left:0px;
 25+ bottom:0px;
 26+ width:85px;
 27+}
 28+.track_name{
 29+ font-family:"verdana","helvetica","arial",sans-serif;
 30+ font-size:12px;
 31+ width:85px;
 32+ position:absolute;
 33+ background:#CCCCCC;
 34+}
 35+.container_track{
 36+ position:absolute;
 37+ border:solid thin red;
 38+
 39+}
 40+.mv_time_clip_text{
 41+ font-family:"verdana","helvetica","arial",sans-serif;
 42+ font-size:12px;
 43+}
 44+.mv_time_clip{
 45+ position:absolute;
 46+ z-index:0;
 47+ overflow:hidden;
 48+ border:solid thin white;
 49+ white-space: nowrap;
 50+}
 51+.mv_clip_cnt{
 52+ position:absolute;
 53+ width:16px;
 54+ height:16px;
 55+}
 56+
 57+.ui-drag-e{ cursor: e-resize;}
 58+.ui-drag-w{ cursor: w-resize;}
 59+
 60+.mv_clip_stats{
 61+ font-family:"verdana","helvetica","arial",sans-serif;
 62+ font-size:11px;
 63+ position:absolute;
 64+ background:#CCCCCC;
 65+ bottom:0px;
 66+ right:0px;
 67+}
 68+.mv_droppable{
 69+ position:absolute;
 70+ top:0px;
 71+ z-index:-1;
 72+}
Property changes on: trunk/extensions/MetavidWiki/skins/mv_embed/skins/mvpcf/mv_sequence.css
___________________________________________________________________
Added: svn:eol-style
173 + native
Index: trunk/extensions/MetavidWiki/skins/mv_embed/skins/mvpcf/styles.css
@@ -13,10 +13,10 @@
1414 background:#262626 none repeat scroll 0 0;
1515 border:3px solid #666666;
1616 left:10%;
17 - top:10%;
 17+ top:5%;
1818 position:fixed;
1919 width:80%;
20 - height:80%;
 20+ height:90%;
2121 z-index:100;
2222 color:#fff;
2323 }
Index: trunk/extensions/MetavidWiki/skins/mv_embed/mv_embed.js
@@ -204,10 +204,8 @@
205205 $j.ajaxSetup({
206206 cache: true
207207 });
208 - js_log('jquery loaded');
209 -
 208+ js_log('jquery loaded');
210209 mvJsLoader.doLoad(_this.lib_plugins, function(){
211 - js_log('loaded ui core');
212210 //load control ui after ui.core loaded
213211 mvJsLoader.doLoad(_this.lib_controlui,function(){
214212 js_log('plugins loaded');
@@ -954,12 +952,11 @@
955953 }
956954 }
957955
958 -var sq_load_time=0;
959956 function mv_do_sequence(initObj){
960957 js_log('mv_do_sequence');
961958 //issue a request to get the css file (if not already included):
962 - if(!styleSheetPresent(mv_embed_path+'mv_sequence.css'))
963 - loadExternalCss(mv_embed_path+'mv_sequence.css');
 959+ if(!styleSheetPresent(mv_embed_path+'skins/'+mv_skin_name+'/mv_sequence.css'))
 960+ loadExternalCss(mv_embed_path+'skins/'+mv_skin_name+'/mv_sequence.css');
964961 //make sure we have the required mv_ebed libs (they are not loaded when no video element is on the page)
965962 mvEmbed.load_libs(function(){
966963 //load playlist object and drag,drop,resize,hoverintent,libs
@@ -2474,7 +2471,7 @@
24752472
24762473 //fix for IE<7 and its lack of PNG support:
24772474 out+=getTransparentPng(new Object ({id:'play_'+id, width:play_btn_width, height:play_btn_height, border:"0",
2478 - src:mv_embed_path + '/skins/'+mv_skin_name+'/images/player_big_play_button.png' }));
 2475+ src:mv_embed_path + '/skin/images/player_big_play_button.png' }));
24792476 out+='</a></div>';
24802477 return out;*/
24812478 },
Index: trunk/extensions/MetavidWiki/skins/mv_embed/mv_sequencer.js
@@ -16,8 +16,26 @@
1717 * enables more dynamic layouts
1818 * exports back out to json or inline format
1919 */
 20+
 21+gMsg['menu_welcome']='Welcome';
 22+gMsg['menu_cliplib']='Clip Library';
 23+gMsg['menu_transition']='Transitions';
 24+gMsg['menu_soundtrack']='Soundtrack';
 25+
 26+gMsg['zoom_in']='Zoom In';
 27+gMsg['zoom_out']='Zoom Out';
 28+gMsg['cut_clip']='Cut Clips';
 29+gMsg['expand_track']='Expand Track';
 30+gMsg['colapse_track']='Colapse Track';
 31+gMsg['play_clip']='Play From Playline Position';
 32+gMsg['pixle2sec']='pixles to seconds';
 33+gMsg['rmclip']='Remove Clip';
 34+gMsg['clip_in']='clip in';
 35+gMsg['clip_out']='clip out';
 36+
2037 //used to set default values and validate the passed init object
2138 var sequencerDefaultValues = {
 39+
2240 instance_name:'mvSeq', //for now only one instance by name mvSeq is allowed
2341 sequence_container_id:'null',//text value (so that its a valid property)
2442 video_container_id:'mv_video_container',
@@ -25,7 +43,8 @@
2644 timeline_id:'mv_timeline',
2745 plObj_id:'plobj',
2846
29 -
 47+ track_timeline_format:'boxes', //boxes (imovie like) or timeline ( finalCut like)
 48+
3049 timeline_scale:.25, //in pixel to second ratio ie 100pixles for every ~30seconds
3150 timeline_duration:500, //default timeline length in seconds
3251 playline_time:0,
@@ -35,19 +54,7 @@
3655 // note some options will be lost in block rendering mode (like cutting clips etc)
3756 timeline_mode:'time',
3857 //Msg are all the language specific values ...
39 - // (todo overwite by msg values preloaded in the page)
40 - Msg:{
41 - zoom_in:'Zoom In',
42 - zoom_out:'Zoom Out',
43 - cut_clip:'Cut Clips',
44 - expand_track:'Expand Track',
45 - colapse_track:'Colapse Track',
46 - play_clip:'Play From Playline Position',
47 - pixle2sec:'pixles to seconds',
48 - rmclip:'Remove Clip',
49 - clip_in:'clip in',
50 - clip_out:'clip out'
51 - },
 58+ // (@@todo overwite by msg values preloaded in the page)
5259 //tack/clips can be pushed via json or inline playlist format
5360 inline_playlist:'null', //text value so its a valid property
5461 inline_playlist_id:'null',
@@ -76,34 +83,55 @@
7784 this[i]=initObj[i];
7885 }
7986 }
 87+ if(this.sequence_container_id==null)
 88+ return js_log('Error: no sequence_container_id');
 89+
8090 //check for sequence_container
8191 if(this.sequence_container_id!='null'){
82 - //@@todo make sure sequence container position is relative
83 - //@@todo make sure the dim is safe size > 400x300 or so
84 - $j('#'+this.sequence_container_id).css('position', 'relative');
 92+
 93+ //$j('#'+this.sequence_container_id).css('position', 'relative');
8594 this['base_width']=$j('#'+this.sequence_container_id).width();
8695 this['base_height']=$j('#'+this.sequence_container_id).height();
8796
 97+ /*
8898 var vid_width = (Math.round(this['base_width']*.5)>320)?
8999 Math.round(this['base_width']*.5):320;
90100 var vid_height = Math.round(vid_width*.75)+30;
 101+ */
 102+ var vid_width=320;
 103+ var vid_height=240+30;
91104
 105+
92106 //add the container divs (with basic layout)
93107 $j('#'+this.sequence_container_id).html(''+
94 - '<div id="'+this.video_container_id+'" style="position:absolute;' +
 108+ '<div id="'+this.video_container_id+'" style="position:absolute;right:0px;top:0px;' +
95109 'width:'+vid_width+'px;height:'+vid_height+'px;border:solid thin blue;"/>'+
96110 '<div id="'+this.sequence_tools_id+'" style="position:absolute;' +
97 - 'left:'+(vid_width+10)+'px;right:0px;top:0px;height:'+vid_height+'px;border:solid thin black;"/>'+
 111+ 'left:0px;right:'+(vid_width+10)+'px;top:0px;height:'+vid_height+'px;border:solid thin black;"/>'+
98112 '<div id="'+this.timeline_id+'" style="position:absolute;' +
99113 'left:0px;right:0px;top:'+(vid_height+10)+'px;bottom:0px;border:solid thin red;"/>');
100 -
 114+
 115+ js_log('set: '+this.sequence_container_id + ' html to:'+ "\n"+
 116+ $j('#'+this.sequence_container_id).html()
 117+ );
101118 //add some sample tool content: (not translated since sequence_tools_id is generally overwritten
102 - $j('#'+this.sequence_tools_id).html(
103 - '<span style="margin:10px;"><b>Sample Sequence Methods:</b><ul>' +
104 - '<li><a href="javascript:'+this.instance_name+'.addClip({track_id:0,type:\'mvClip\',mvclip:\'senate_proceeding_12-07-06?t=04:46:27/04:46:58\'})">Add <i>I fancy pencils</i> clip</a></li>' +
105 - '<li><a href="javascript:'+this.instance_name+'.addRss({track_id:0,src:\'http://metavid.ucsc.edu/overlay/archive_browser/rss_filter_view?filters[0][type]=match&filters[0][val]=peace&start=0&rpp=10\'})">Add last 10 mentions of peace</li>' +
106 - '</ul>'+
107 - '</span>'
 119+ var menu_items = {
 120+ 'welcome':1,
 121+ 'cliplib':1,
 122+ 'transition':1,
 123+ 'soundtrack':1
 124+ };
 125+ var menu_html = '<ul style="list-style-type:none;list-style-position:outside;display:block;">';
 126+ for(var i in menu_items){
 127+ menu_html+='<li style="display:inline;padding:10px;"><a style="color:#fff" href="javascript:'+this.instance_name+'.disp(\''+i+'\')">'+getMsg('menu_'+i)+'</a></li>';
 128+ }
 129+ menu_html+='</ul>';
 130+ $j('#'+this.sequence_tools_id).html( menu_html +
 131+ '<div id="seq_tool_disp_'+this.instance_name+'">Welcome bla bla<br>' +
 132+ '1<br>' +
 133+ '2<br>' +
 134+ '3<br>' +
 135+ '</div>'
108136 );
109137
110138 }
@@ -111,19 +139,19 @@
112140 $j('#'+this.timeline_id).html(''+
113141 '<div id="'+this.timeline_id+'_left_cnt" class="mv_tl_left_cnt">'+
114142 '<div id="'+this.timeline_id+'_head_control" style="position:absolute;top:0px;left:0px;right:0px;height:30px;">' +
115 - '<a title="'+this.Msg.play_clip+'" href="javascript:'+this.instance_name+'.play_jt()">'+
 143+ '<a title="'+getMsg('play_clip')+'" href="javascript:'+this.instance_name+'.play_jt()">'+
116144 getTransparentPng({id:this.timeline_id+'_play', width:"16", height:"16", border:"0",
117145 src:mv_embed_path + 'images/control_play_blue.png' }) +
118146 '</a>'+
119 - '<a title="'+this.Msg.zoom_in+'" href="javascript:'+this.instance_name+'.zoom_in()">'+
 147+ '<a title="'+getMsg('zoom_in')+'" href="javascript:'+this.instance_name+'.zoom_in()">'+
120148 getTransparentPng({id:this.timeline_id+'_zoom_in_icon', width:"16", height:"16", border:"0",
121149 src:mv_embed_path + 'images/zoom_in.png' }) +
122150 '</a>'+
123 - '<a title="'+this.Msg.zoom_out+'" href="javascript:'+this.instance_name+'.zoom_out()">'+
 151+ '<a title="'+getMsg('zoom_out')+'" href="javascript:'+this.instance_name+'.zoom_out()">'+
124152 getTransparentPng({id:this.timeline_id+'_zoom_in_icon', width:"16", height:"16", border:"0",
125153 src:mv_embed_path + 'images/zoom_out.png' }) +
126154 '</a>'+
127 - '<a title="'+this.Msg.cut_clip+'" href="javascript:'+this.instance_name+'.cut_mode()">'+
 155+ '<a title="'+getMsg('cut_clip')+'" href="javascript:'+this.instance_name+'.cut_mode()">'+
128156 getTransparentPng({id:this.timeline_id+'_cut', width:"16", height:"16", border:"0",
129157 src:mv_embed_path + 'images/cut.png' }) +
130158 '</a>'+
@@ -196,13 +224,13 @@
197225 var track_height=60;
198226 var exc_img = 'opened';
199227 var exc_action='close';
200 - var exc_msg = this.Msg.colapse_track;
 228+ var exc_msg = getMsg('colapse_track');
201229 break;
202230 case 'text':
203231 var track_height=20;
204232 var exc_img = 'closed';
205233 var exc_action='open';
206 - var exc_msg = this.Msg.expand_track;
 234+ var exc_msg = getMsg('expand_track');
207235 break;
208236 }
209237 //add track name:
@@ -429,9 +457,9 @@
430458 '" class="mv_time_clip_text mv_clip_drag">'+clip.title;
431459 }
432460 //add in per clip controls
433 - track_html+='<div title="'+this.Msg.clip_in+' '+clip.embed.start_ntp+'" class="ui-resizable-w ui-resizable-handle" style="width: 16px; height: 16px; left: 0px; top: 2px;background:url(\''+mv_embed_path+'images/application_side_contract.png\');"></div>'+"\n";
434 - track_html+='<div title="'+this.Msg.clip_out+' '+clip.embed.end_ntp+'" class="ui-resizable-e ui-resizable-handle" style="width: 16px; height: 16px; right: 0px; top: 2px;background:url(\''+mv_embed_path+'images/application_side_expand.png\');"></div>'+"\n";
435 - track_html+='<div title="'+this.Msg.rmclip+'" onClick="'+this.instance_name+'.removeClip('+track_id+','+j+')" style="position:absolute;cursor:pointer;width: 16px; height: 16px; left: 0px; bottom:2px;background:url(\''+mv_embed_path+'images/delete.png\');"></div>'+"\n";
 461+ track_html+='<div title="'+getMsg('clip_in')+' '+clip.embed.start_ntp+'" class="ui-resizable-w ui-resizable-handle" style="width: 16px; height: 16px; left: 0px; top: 2px;background:url(\''+mv_embed_path+'images/application_side_contract.png\');"></div>'+"\n";
 462+ track_html+='<div title="'+getMsg('clip_out')+' '+clip.embed.end_ntp+'" class="ui-resizable-e ui-resizable-handle" style="width: 16px; height: 16px; right: 0px; top: 2px;background:url(\''+mv_embed_path+'images/application_side_expand.png\');"></div>'+"\n";
 463+ track_html+='<div title="'+getMsg('rmclip')+'" onClick="'+this.instance_name+'.removeClip('+track_id+','+j+')" style="position:absolute;cursor:pointer;width: 16px; height: 16px; left: 0px; bottom:2px;background:url(\''+mv_embed_path+'images/delete.png\');"></div>'+"\n";
436464 track_html+='<span style="display:none;" class="mv_clip_stats"></span>';
437465 track_html+='</span>';
438466 //droppable_html+='<div id="dropBefore_'+i+'_c_'+j+'" class="mv_droppable" style="height:'+this.track_thumb_height+'px;left:'+clip.left_px+'px;width:'+Math.round(clip.width_px/2)+'px"></div>';
Index: trunk/extensions/MetavidWiki/skins/mv_embed/mv_playlist.js
@@ -141,7 +141,15 @@
142142 $j('body').append('<div id="overlay"/> '+
143143 '<div id="modalbox" class="editor">');
144144 $j('#modalbox').html('loading editor<blink>...</blink>');
145 -
 145+ var _this=this;
 146+ js_log("calling sequence with url:"+ _this.src);
 147+ //load sequencer:
 148+ mv_do_sequence({
 149+ "sequence_container_id":'modalbox',
 150+ "mv_pl_url_id":_this.src //kind of redundant but make for a clean "cancel"..
 151+ // we could switch to moving around dom elements if performance is an issue
 152+ });
 153+
146154 },
147155 selectPlaybackMethod:function(){
148156 this.cur_clip.embed.selectPlaybackMethod();