Revision: 51671 Author: dale Date: 2009-06-10 00:49:54 +0000 (Wed, 10 Jun 2009)
Log Message: ----------- sequencer style updates and small fixes Modified Paths: -------------- branches/new-upload/phase3/js2/mwEmbed/libAddMedia/remoteSearchDriver.js branches/new-upload/phase3/js2/mwEmbed/libClipEdit/mvClipEdit.js branches/new-upload/phase3/js2/mwEmbed/libEmbedVideo/embedVideo.js branches/new-upload/phase3/js2/mwEmbed/libEmbedVideo/htmlEmbed.js branches/new-upload/phase3/js2/mwEmbed/libSequencer/mvPlayList.js branches/new-upload/phase3/js2/mwEmbed/libSequencer/mvSequencer.js branches/new-upload/phase3/js2/mwEmbed/skins/mvpcf/mv_sequence.css branches/new-upload/phase3/js2/mwEmbed/skins/mvpcf/styles.css Modified: branches/new-upload/phase3/js2/mwEmbed/libAddMedia/remoteSearchDriver.js =================================================================== --- branches/new-upload/phase3/js2/mwEmbed/libAddMedia/remoteSearchDriver.js 2009-06-10 00:01:22 UTC (rev 51670) +++ branches/new-upload/phase3/js2/mwEmbed/libAddMedia/remoteSearchDriver.js 2009-06-10 00:49:54 UTC (rev 51671) @@ -684,9 +684,7 @@ }); }, /* check for all the results to finish */ - checkResultsDone: function(){ - js_log( "checkResultsDone:entry: " + rsdMVRS.disp_item + ' not: ' + this.disp_item); - + checkResultsDone: function(){ var _this = this; var loading_done = true; @@ -699,10 +697,9 @@ } if( loading_done ){ this.drawOutputResults(); - }else{ - js_log("before setTimeout: " + rsdMVRS.disp_item); + }else{ //make sure the instance name is up-to-date refrence to _this; - eval( _this.instance_name + ' = _this'); + eval( _this.instance_name + ' = _this'); setTimeout( _this.instance_name + '.checkResultsDone()', 30); } }, Modified: branches/new-upload/phase3/js2/mwEmbed/libClipEdit/mvClipEdit.js =================================================================== --- branches/new-upload/phase3/js2/mwEmbed/libClipEdit/mvClipEdit.js 2009-06-10 00:01:22 UTC (rev 51670) +++ branches/new-upload/phase3/js2/mwEmbed/libClipEdit/mvClipEdit.js 2009-06-10 00:49:54 UTC (rev 51671) @@ -98,15 +98,15 @@ 'duration':{ d:1, 'media':['image','template'], - 'doEdit':function( _this ){ + 'doEdit':function(target, _this ){ //do clock mouse scroll duration editor - $j('#sub_cliplib_ic').html('cur dur: ' + _this.rObj.dur ); + $j(target).html('cur dur: ' + _this.rObj.dur ); } }, 'inoutpoints':{ 'd':1, 'media':['video'], - 'doEdit':function( _this ){ + 'doEdit':function(target, _this ){ //do clock mouse scroll duration editor var end_ntp = ( _this.rObj.embed.end_ntp) ? _this.rObj.embed.end_ntp : _this.rObj.embed.getDuration(); if(!end_ntp) @@ -116,7 +116,7 @@ if(!start_ntp) seconds2npt( 0 ); - $j('#sub_cliplib_ic').html( + $j(target).html( _this.getSetInOutHtml({ 'start_ntp' : start_ntp, 'end_ntp' : end_ntp @@ -128,7 +128,7 @@ 'fileopts':{ 'd':0, 'media':['image','video','template'], - 'doEdit':function( _this ){ + 'doEdit':function(target, _this ){ var doEditHtml = function(){ //add html for rObj resource: var o= '<table>' + @@ -173,14 +173,14 @@ '<td>' + gM('mv_resource_page') + '</td>' + - '<td><a href="' + wgArticlePath.replace(/\$1/, _this.rObj.uri ) + + '<td><a href="' + wgArticlePath.replace(/\$1/, _this.rObj.uri ) +'" '+ ' target="new">'+ _this.rObj.uri + '</a>'+ '</td>'+ '</tr>'; o+='</table>'; - $j('#sub_cliplib_ic').html ( o ); + $j(target).html ( o ); //add update bindings //update doFocusBindings @@ -247,25 +247,25 @@ 'panzoom':{ 'd':0, 'media':['image','video'], - 'doEdit':function( _this ){ + 'doEdit':function(target, _this ){ //do clock mouse scroll duration editor - $j('#sub_cliplib_ic').html('<h3>Set Position</h3><h3>Set Zoom</h3><h3>Set Crop</h3><h3>Set Aspect</h3>'); + $j(target).html('<h3>Set Position</h3><h3>Set Zoom</h3><h3>Set Crop</h3><h3>Set Aspect</h3>'); } }, 'overlays':{ 'd':0, 'media':['image','video'], - 'doEdit':function( _this ){ + 'doEdit':function(target, _this ){ //do clock mouse scroll duration editor - $j('#sub_cliplib_ic').html('<h3>Current Overlays:</h3>Add,Remove,Modify'); + $j(target).html('<h3>Current Overlays:</h3>Add,Remove,Modify'); } }, 'audio':{ 'd':0, 'media':['image','video', 'template'], - 'doEdit':function( _this ){ + 'doEdit':function(target, _this ){ //do clock mouse scroll duration editor - $j('#sub_cliplib_ic').html('<h3>Audio Volume:</h3>'); + $j(target).html('<h3>Audio Volume:</h3>'); } } }, @@ -273,8 +273,11 @@ var _this = this; //add in subMenus if set //check for submenu and add to item container - var o=''; - o+= '<ul id="mv_submenu_clipedit" class="mv_submenu">'; + var o=''; + var tabc =''; + o+= '<div id="mv_submenu_clipedit">'; + o+='<ul>'; + var selected_tab = 0; $j.each(this.edit_types, function(sInx, editType){ //check if the given editType is valid for our given media type var include = false; @@ -282,22 +285,28 @@ if( editType.media[i] == _this.media_type) include = true; } - if(include){ - var sub_sel_class = (editType.d == 1)?'class="mv_sub_selected"':''; - o+= '<li ' + sub_sel_class + ' id="mv_smi_' + sInx + '">' + - gM('sc_' + sInx ) + '</li>'; + if(include){ + o+= '<li>'+ + '<a id="mv_smi_'+sInx+'" href="#sc_' + sInx + '">' + gM('sc_' + sInx ) + '</a>'+ + '</li>'; + tabc += '<div id="sc_' + sInx + '" style="overflow:auto;" ></div>'; } }); - o+= '</ul>'; - //add sub menu container with menu html: - o+= '<div id="sub_cliplib_ic" class="submenu_container"></div>'; - $j('#'+this.control_ct).html( o ) ; + o+= '</ul>' + tabc; + o+= '</div>'; + //add sub menu container with menu html: + $j('#'+this.control_ct).html( o ) ; //set up bindings: - for( var i in this.edit_types){ - $j('#mv_smi_'+ i).click( function(){ - _this.doDisplayEdit( $j(this).attr("id").replace('mv_smi_','') ); - }); - } + $j('#mv_submenu_clipedit').tabs({ + select: function(event, ui) { + _this.doDisplayEdit( $j(ui.tab).attr('id').replace('mv_smi_', '') ); + } + //add sorting + }).addClass('ui-tabs-vertical ui-helper-clearfix'); + //close left: + $j("#mv_submenu_clipedit li").removeClass('ui-corner-top').addClass('ui-corner-left'); + //update the default edit display: + _this.doDisplayEdit(); }, doDisplayEdit:function( edit_type ){ if(!edit_type) @@ -305,15 +314,11 @@ if(this.edit_types[i].d == 1) edit_type = i; } - js_log('doDisplayEdit: ' + edit_type ); - //remove from all - $j('#mv_submenu_clipedit li').removeClass('mv_sub_selected'); - //add selected class: - $j('#mv_smi_' + edit_type).addClass('mv_sub_selected'); + js_log('doDisplayEdit: ' + edit_type ); //do edit interface for that edit type: if( this.edit_types[ edit_type ].doEdit ) - this.edit_types[ edit_type ].doEdit( this ); + this.edit_types[ edit_type ].doEdit( '#sc_'+edit_type, this ); }, setUpVideoCtrl:function(){ js_log('setUpVideoCtrl:f'); Modified: branches/new-upload/phase3/js2/mwEmbed/libEmbedVideo/embedVideo.js =================================================================== --- branches/new-upload/phase3/js2/mwEmbed/libEmbedVideo/embedVideo.js 2009-06-10 00:01:22 UTC (rev 51670) +++ branches/new-upload/phase3/js2/mwEmbed/libEmbedVideo/embedVideo.js 2009-06-10 00:49:54 UTC (rev 51671) @@ -1579,13 +1579,13 @@ //@@todo overwite by embed library if we can render frames natavily renderTimelineThumbnail:function( options ){ var my_thumb_src = this.media_element.getThumbnailURL(); - + //check if our thumbnail has a time attribute: if( my_thumb_src.indexOf('t=') !== -1){ var time_ntp = seconds2npt ( options.time + parseInt(this.start_offset) ); my_thumb_src = getURLParamReplace( my_thumb_src, { 't':time_ntp, 'size': options.size } ); } - var thumb_class = (typeof options['thumb_class'] !='undefined')? options['thumb_class'] : ''; - return '<div class="' + thumb_class + '" src="' + my_thumb_src +'" '+ + var thumb_class = (typeof options['thumb_class'] != 'undefined' ) ? options['thumb_class'] : ''; + return '<div class="ui-corner-all ' + thumb_class + '" src="' + my_thumb_src + '" '+ 'style="height:' + options.height + 'px;' + 'width:' + options.width + 'px" >' + '<img src="' + my_thumb_src +'" '+ Modified: branches/new-upload/phase3/js2/mwEmbed/libEmbedVideo/htmlEmbed.js =================================================================== --- branches/new-upload/phase3/js2/mwEmbed/libEmbedVideo/htmlEmbed.js 2009-06-10 00:01:22 UTC (rev 51670) +++ branches/new-upload/phase3/js2/mwEmbed/libEmbedVideo/htmlEmbed.js 2009-06-10 00:49:54 UTC (rev 51671) @@ -80,6 +80,7 @@ return true; }, renderTimelineThumbnail:function( options ){ + js_log("HTMLembed req w, height: " + options.width + ' ' + options.height); //generate a scaled down version _that_ we can clone if nessisary //add a not vissiable container to the body: var do_refresh = (typeof options['refresh'] != 'undefined')?true:false; @@ -88,16 +89,18 @@ if( $j('#' + thumb_render_id ).length == 0 || do_refresh ){ //set the font scale down percentage: (kind of arbitrary) var scale_perc = options.width / this.pc.pp.width; - //js_log('scale_perc:'+options.width + ' / '+ $j(this).width()+ ' = '+scale_perc ); + js_log('scale_perc:'+options.width + ' / '+ $j(this).width()+ ' = '+scale_perc ); //min scale font percent of 70 (overflow is hidden) - var font_perc = ( Math.round( scale_perc*100 ) < 80 )?80:Math.round( scale_perc*100 ); - var thumb_class = (typeof options['thumb_class'] !='undefined')? options['thumb_class'] : ''; - + var font_perc = ( Math.round( scale_perc*100 ) < 80 ) ? 80 : Math.round( scale_perc*100 ); + var thumb_class = (typeof options['thumb_class'] !='undefined')? options['thumb_class'] : ''; $j('body').append( '<div id="' + thumb_render_id + '" style="display:none">'+ '<div class="' + thumb_class + '" '+ 'style="width:'+options.width+'px;height:'+options.height+'px;" >'+ - this.getThumbnailHTML() + - '</div>'+ + this.getThumbnailHTML({ + 'width': options.width, + 'height': options.height + }) + + '</div>' + '</div>' ); //scale down the fonts: @@ -112,7 +115,7 @@ $j('#' + thumb_render_id + ' img').filter('[width]').each(function(){ $j(this).attr({ 'width': Math.round( $j(this).attr('width') * scale_perc ), - 'height': Math.round( $j(this).attr('height') * scale_perc ) + 'height': Math.round( $j(this).attr('height') * scale_perc ) } ); }); @@ -133,11 +136,16 @@ //wrap output in videoPlayer_ div: $j(this).html('<div id="videoPlayer_'+ this.id+'">'+this.getThumbnailHTML()+'</div>'); }, - getThumbnailHTML:function(){ + getThumbnailHTML:function( opt ){ var out=''; + if(!opt) + opt = {}; + var height = (opt.height)?opt.height:this.pc.pp.height; + var width = (opt.width)?opt.width: this.pc.pp.width; + js_log('1req '+ opt.height + ' but got: ' + height); if( this.pc.type =='image/jpeg'){ js_log('should put src: '+this.pc.src); - out = '<img width="'+this.pc.pp.width+'" height="'+this.pc.pp.height+'" src="'+this.pc.src+'">'; + out = '<img style="width:'+width+'px;height:'+height+'px" src="'+this.pc.src+'">'; }else{ out = this.pc.wholeText; } @@ -167,8 +175,7 @@ //@@todo we can "start loading images" if we want on_dom_swap:function(){ this.loading_external_data=false - this.ready_to_play=true; - debugger; + this.ready_to_play=true; return ; } }; \ No newline at end of file Modified: branches/new-upload/phase3/js2/mwEmbed/libSequencer/mvPlayList.js =================================================================== --- branches/new-upload/phase3/js2/mwEmbed/libSequencer/mvPlayList.js 2009-06-10 00:01:22 UTC (rev 51670) +++ branches/new-upload/phase3/js2/mwEmbed/libSequencer/mvPlayList.js 2009-06-10 00:49:54 UTC (rev 51671) @@ -736,11 +736,13 @@ } }); //set the current clip to the first clip: - this.cur_clip = this.start_clip; - //display the first clip thumb: - this.cur_clip.embed.stop(); - //make sure the current clip is vissable: - $j('#clipDesc_'+this.cur_clip.id).show(); + if(this.start_clip){ + this.cur_clip = this.start_clip; + //display the first clip thumb: + this.cur_clip.embed.stop(); + //make sure the current clip is vissable: + $j('#clipDesc_'+this.cur_clip.id).show(); + } //reset the currentTime: this.currentTime = 0; //FIXME still some issues with "stoping" and reseting the playlist Modified: branches/new-upload/phase3/js2/mwEmbed/libSequencer/mvSequencer.js =================================================================== --- branches/new-upload/phase3/js2/mwEmbed/libSequencer/mvSequencer.js 2009-06-10 00:01:22 UTC (rev 51670) +++ branches/new-upload/phase3/js2/mwEmbed/libSequencer/mvSequencer.js 2009-06-10 00:49:54 UTC (rev 51671) @@ -221,8 +221,8 @@ 'width:'+this.video_width+'px;height:'+this.video_height+'px;border:solid thin blue;background:#FFF;font-color:black;"/>'+ '<div id="'+this.sequence_tools_id+'" style="position:absolute;' + 'left:0px;right:'+(this.video_width+15)+'px;top:0px;height:'+(this.video_height+23)+'px;"/>'+ - '<div id="'+this.timeline_id+'" style="position:absolute;' + - 'left:0px;right:0px;top:'+(this.video_height+10)+'px;bottom:25px;overflow:auto;">'+ + '<div id="'+this.timeline_id+'" class="ui-widget ui-widget-content ui-corner-all" style="position:absolute;' + + 'left:0px;right:0px;top:'+(this.video_height+34)+'px;bottom:25px;overflow:auto;">'+ gM('loading_timeline')+ '</div>'+ '<div id="' + this.target_sequence_container + '_status" style="position:absolute;left:0px;width:300px;"></div>'+ '<div id="' + this.target_sequence_container + '_save_cancel" style="position:absolute;'+ @@ -402,7 +402,7 @@ $j('#'+this.timeline_id+'_tracks').append( '<div id="container_track_'+i+'" style="top:'+top_pos+'px;height:'+(track_height+2)+'px;left:0px;right:0px;" class="container_track" />' ); - top_pos+=track_height+20; + top_pos+=track_height+20; } } if( this.timeline_mode=='storyboard'){ @@ -541,7 +541,7 @@ selected_tab=inx; o+='<li>' + - '<a id="mv_menu_item_'+tab_id+'" href="#' + tab_id + '_ic">'+gM('menu_' + tab_id )+ + '<a id="mv_menu_item_'+tab_id+'" href="#' + tab_id + '_ic">'+gM('menu_' + tab_id ) + '</a>' + '</li>'; tabc += '<div id="' + tab_id + '_ic" style="overflow:auto;height:272px;" >'; @@ -957,8 +957,8 @@ 'height:' + (this.track_clipThumb_height+30) + 'px;' + 'width:'+(container_width)+'px;" >'; track_html+=clip.embed.renderTimelineThumbnail({ - 'width':frame_width, - 'thumb_class':'mv_clip_thumb', + 'width' : frame_width, + 'thumb_class' : 'mv_clip_thumb', 'height':this.track_clipThumb_height, 'time':0 }); @@ -1254,7 +1254,7 @@ //js_log("pinit: "+ pint+ ' < '+clip.width_px+' ++'+frame_width); for(var p=pint;p<clip.width_px;p+=frame_width){ var clip_time = (p==0)?0:Math.round(p*this.timeline_scale); - js_log('rendering clip frames: p:' +p+' '+ (p*this.timeline_scale)+' ' + clip_time); + js_log('rendering clip frames: p:' +p+' pts:'+ (p*this.timeline_scale)+' time:' + clip_time + ' height:'+this.track_thumb_height); clip_frames_html+=clip.embed.renderTimelineThumbnail({ 'width': frame_width, 'thumb_class':'mv_tl_thumb', @@ -1323,12 +1323,27 @@ render_playheadhead_seeker:function(){ //render out time stamps and time "jump" links //first get total width - if(this.timeline_mode=='time'){ - //hide the old control if present - $j('#'+this.timeline_id + '_pl_control').remove(); - //set width based on pixle to time and current length: - pixle_length = Math.round( this.timeline_duration / this.timeline_scale); - $j('#'+this.timeline_id+'_head_jump').width(pixle_length); + + //remove the old one if its still there + $j('#'+this.timeline_id +'_pl_control').remove(); + js_log('output controls to: ' + this.target_sequence_container); + //render out a playlist clip wide and all the way to the right (only playhead and play button) (outside of timeline) + $j(this.target_sequence_container).append('<div id="'+ this.timeline_id +'_pl_control"'+ + ' style="position:absolute;top:' + (this.plObj.height) +'px;'+ + 'right:1px;width:'+this.plObj.width+'px;height:'+this.plObj.org_control_height+'" '+ + 'class="videoPlayer"><div class="ui-widget ui-corner-bottom ui-state-default controls">'+ + this.plObj.getControlsHTML() + + '</div>'+ + '</div>'); + //update time and render out clip dividers .. should be used to show load progress + this.plObj.updateBaseStatus(); + + //once the controls are in the DOM add hooks: + ctrlBuilder.addControlHooks(this.plObj); + + //render out the "jump" div + if(this.timeline_mode=='time'){ + /*$j('#'+this.timeline_id+'_head_jump').width(pixle_length); //output times every 50pixles var out=''; //output time-desc every 50pixles and jump links every 10 pixles @@ -1340,26 +1355,9 @@ out+='<span style="position:absolute;left:'+i+'px;">|'+seconds2npt(Math.round(i*this.timeline_scale))+'</span>'; n++; if(n==10)n=0; - } - $j('#'+this.timeline_id+'_head_jump').html(out); - } - if(this.timeline_mode=='storyboard'){ - //remove the old one if its still there - $j('#'+this.timeline_id +'_pl_control').remove(); - //render out a playlist clip wide and all the way to the right (only playhead and play button) (outside of timeline) - $j(this.target_sequence_container).append('<div id="'+ this.timeline_id +'_pl_control"'+ - ' style="position:absolute;top:' + (this.plObj.height) +'px;'+ - 'right:1px;width:'+this.plObj.width+'px;height:'+this.plObj.org_control_height+'" '+ - 'class="videoPlayer"><div class="ui-widget ui-corner-bottom ui-state-default controls">'+ - this.plObj.getControlsHTML() + - '</div>'+ - '</div>'); - //update time and render out clip dividers .. should be used to show load progress - this.plObj.updateBaseStatus(); + }*/ - //once the controls are in the DOM add hooks: - ctrlBuilder.addControlHooks(this.plObj); - } + } }, jt:function( jh_time ){ js_log('jt:' + jh_time); Modified: branches/new-upload/phase3/js2/mwEmbed/skins/mvpcf/mv_sequence.css =================================================================== --- branches/new-upload/phase3/js2/mwEmbed/skins/mvpcf/mv_sequence.css 2009-06-10 00:01:22 UTC (rev 51670) +++ branches/new-upload/phase3/js2/mwEmbed/skins/mvpcf/mv_sequence.css 2009-06-10 00:49:54 UTC (rev 51671) @@ -171,22 +171,23 @@ right:0px; } .submenu_container{ - top:25px; +/* top:25px; left:10px; right:0px; overflow:auto; position:absolute; broder: solid thin gray; +*/ } .mv_submenu{ /*position:absolute;*/ - left:0px; + /*left:0px; top:0px; margin:2px; list-style-type:none; bottom:0px; border:none; - padding:0px; + padding:0px;*/ } .mv_submenu li{ border:solid thin gray; Modified: branches/new-upload/phase3/js2/mwEmbed/skins/mvpcf/styles.css =================================================================== --- branches/new-upload/phase3/js2/mwEmbed/skins/mvpcf/styles.css 2009-06-10 00:01:22 UTC (rev 51670) +++ branches/new-upload/phase3/js2/mwEmbed/skins/mvpcf/styles.css 2009-06-10 00:49:54 UTC (rev 51671) @@ -684,4 +684,14 @@ .ui-progressbar-value{ background-image: url('images/pbar-ani.gif'); -} \ No newline at end of file +} + +/* Vertical Tabs +----------------------------------*/ +.ui-tabs-vertical { width: 55em; } +.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; } +.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; } +.ui-tabs-vertical .ui-tabs-nav li a { display:block; } +.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; } +.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;} + _______________________________________________ MediaWiki-CVS mailing list MediaWiki-CVS@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-cvs