From ca2f9fdffa135fcd55cb9ec120ad07bc5558c1a9 Mon Sep 17 00:00:00 2001 From: Michael Dale Date: Wed, 4 Nov 2009 11:24:48 +0000 Subject: [PATCH] * sequencer updates / other small fixes --- .../example_usage/Player_Themable.html | 2 +- js2/mwEmbed/libAddMedia/remoteSearchDriver.js | 2 +- .../libAddMedia/searchLibs/mediaWikiSearch.js | 5 +- js2/mwEmbed/libClipEdit/mvClipEdit.js | 133 +++++++++++++----- js2/mwEmbed/libEmbedVideo/embedVideo.js | 49 +++---- js2/mwEmbed/libSequencer/mvFirefoggRender.js | 1 - js2/mwEmbed/libSequencer/mvPlayList.js | 60 ++++---- js2/mwEmbed/libSequencer/mvSequencer.js | 22 +-- js2/mwEmbed/mv_embed.js | 2 +- js2/mwEmbed/skins/ctrlBuilder.js | 18 ++- js2/mwEmbed/skins/kskin/playerSkin.css | 2 +- js2/mwEmbed/skins/mvpcf/playerSkin.css | 7 +- js2/mwEmbed/tests/testLang.html | 4 +- 13 files changed, 177 insertions(+), 130 deletions(-) diff --git a/js2/mwEmbed/example_usage/Player_Themable.html b/js2/mwEmbed/example_usage/Player_Themable.html index 223bd3c164..b9d14d7c25 100644 --- a/js2/mwEmbed/example_usage/Player_Themable.html +++ b/js2/mwEmbed/example_usage/Player_Themable.html @@ -7,7 +7,7 @@ - +

Sample Themable Player:

To play with dynamic Themes install Themeroller

diff --git a/js2/mwEmbed/libAddMedia/remoteSearchDriver.js b/js2/mwEmbed/libAddMedia/remoteSearchDriver.js index 2df54909a4..c060e367c9 100644 --- a/js2/mwEmbed/libAddMedia/remoteSearchDriver.js +++ b/js2/mwEmbed/libAddMedia/remoteSearchDriver.js @@ -1557,7 +1557,7 @@ remoteSearchDriver.prototype = { } }, checkForFile:function( fName, callback){ - js_log("checkForFile::"); + js_log("checkForFile::" + fName ); var _this = this; reqObj={ 'action':'query', diff --git a/js2/mwEmbed/libAddMedia/searchLibs/mediaWikiSearch.js b/js2/mwEmbed/libAddMedia/searchLibs/mediaWikiSearch.js index 00b11b31a0..9367ce11ae 100644 --- a/js2/mwEmbed/libAddMedia/searchLibs/mediaWikiSearch.js +++ b/js2/mwEmbed/libAddMedia/searchLibs/mediaWikiSearch.js @@ -188,10 +188,9 @@ mediaWikiSearch.prototype = { // or better improve the wiki-text parsing and use above var desc = rObj.desc.match(/\|\s*description\s*=\s*(([^\n]*\n)*)\|\s*source=/i); if( desc && desc[1] ){ - rObj.desc = $j.trim( desc[1] ); - var cat = wgUserLanguage; + rObj.desc = $j.trim( desc[1] ); //attempt to get the user language if set: - if( wgUserLanguage ){ + if( typeof wgUserLanguage != 'undefined' && wgUserLanguage ){ //for some reason the RegExp object is not happy: var reg = new RegExp( '\{\{\s*' + wgUserLanguage + '([^=]*)=([^\}]*)\}\}', 'gim' ); var langMatch = reg.exec( rObj.desc ); diff --git a/js2/mwEmbed/libClipEdit/mvClipEdit.js b/js2/mwEmbed/libClipEdit/mvClipEdit.js index b08f738437..8a08d0c4fe 100644 --- a/js2/mwEmbed/libClipEdit/mvClipEdit.js +++ b/js2/mwEmbed/libClipEdit/mvClipEdit.js @@ -30,7 +30,8 @@ loadGM({ "mwe-preview_inout" : "Preview in-out points", "mwe-edit-tools" : "Edit tools", "mwe-inline-description" : "Inline description", - "mwe-edit-video-tools" : "Edit video tools:" + "mwe-edit-video-tools" : "Edit video tools:", + "mwe-duration" : "Duration:" }); var default_clipedit_values = { @@ -102,22 +103,25 @@ mvClipEdit.prototype = { 'duration':{ 'media':['image','template'], 'doEdit':function( _this, target ){ - //(_this is a smilClip instance) - //do clock mouse scroll duration editor + function doUpdateDur( inputElm ){ + js_log("update duration:" + $j( inputElm ).val() ); + //update the parent sequence object: + _this.rObj.dur = smilParseTime( $j( inputElm ).val() ); + //update the playlist: + _this.p_seqObj.do_refresh_timeline( true ); + } + $j(target).html( - '' + + '' + ''+ '' ).children("input[name='ce_dur']").change(function(){ - js_log("update duration:" + $j(this).val() ); - //update the parent sequence object: - _this.rObj.dur = smilParseTime( $j(this).val() ); - //update the playlist: - _this.p_seqObj.do_refresh_timeline( true ); + doUpdateDur(this); }); - + //Strange can't chain this binding for some reason... + $j(target).find("input[name='ce_dur']").upDownTimeInputBind( doUpdateDur ); } }, 'inoutpoints':{ @@ -144,7 +148,7 @@ mvClipEdit.prototype = { 'fileopts':{ 'media':['image','video','template'], 'doEdit':function(_this, target ){ - //if media type is template we have to query to get its URI to get its paramaters + //if media type is template we have to query to get its URI to get its parameters if(_this.media_type == 'template' && !_this.rObj.tVars){ mv_set_loading('#sub_cliplib_ic'); var reqObj ={ 'action':'query', @@ -391,9 +395,11 @@ mvClipEdit.prototype = { }, setInOutBindings:function(){ var _this = this; + //setup a top level shortcut: + var $tp = $j('#'+this.control_ct); - var start_sec = npt2seconds($j('#'+this.control_ct + ' .startInOut').val() ); - var end_sec = npt2seconds($j('#'+this.control_ct + ' .endInOut').val() ); + var start_sec = npt2seconds( $tp.find('.startInOut').val() ); + var end_sec = npt2seconds( $tp.find('.endInOut').val() ); //if we don't have 0 as start then assume we are in a range request and give some buffer area: var min_slider = (start_sec - 60 < 0 ) ? 0 : start_sec - 60; @@ -403,23 +409,49 @@ mvClipEdit.prototype = { max_slider = end_sec; } - $j('#'+this.control_ct + ' .inOutSlider').slider({ + $tp.find('.inOutSlider').slider({ range: true, min: min_slider, max: max_slider, + animate: true, values: [start_sec, end_sec], slide: function(event, ui) { //js_log(" vals:"+ seconds2npt( ui.values[0] ) + ' : ' + seconds2npt( ui.values[1]) ); - $j('#'+_this.control_ct + ' .startInOut').val( seconds2npt( ui.values[0] ) ); - $j('#'+_this.control_ct + ' .endInOut').val( seconds2npt( ui.values[1] ) ); + $tp.find('.startInOut').val( seconds2npt( ui.values[0] ) ); + $tp.find('.endInOut').val( seconds2npt( ui.values[1] ) ); }, change:function(event, ui){ do_video_time_update( seconds2npt( ui.values[0]), seconds2npt( ui.values[1] ) ); } + }); + + //bind up and down press when focus on start or end + $tp.find('.startInOut').upDownTimeInputBind( function( inputElm ){ + var s_sec = npt2seconds( $j( inputElm ).val() ); + var e_sec = npt2seconds( $tp.find('.endInOut').val() ) + if( s_sec > e_sec ) + $j( inputElm ).val( seconds2npt( e_sec - 1 ) ); + //update the slider: + var values = $tp.find('.inOutSlider').slider('option', 'values'); + js_log('in slider len: ' + $tp.find('.inOutSlider').length); + //set to 5 + $tp.find('.inOutSlider').slider('value', 10 ); + debugger; + $tp.find('.inOutSlider').slider('option', 'values', [s_sec, e_sec] ); + var values = $tp.find('.inOutSlider').slider('option', 'values'); + js_log('values (after update):' + values ); }); - + $tp.find('.endInOut').upDownTimeInputBind( function( inputElm ){ + var s_sec = npt2seconds( $tp.find('.startInOut').val() ); + var e_sec = npt2seconds( $j( inputElm ).val() ); + if( e_sec < s_sec ) + $j( inputElm ).val( seconds2npt( s_sec + 1 ) ); + //update the slider: + $tp.find('.inOutSlider').slider('option', 'values', [ s_sec, e_sec ]); + }); + //preview button: - $j('#'+this.control_ct + ' .inOutPreviewClip').btnBind().click(function(){ + $j('#'+this.control_ct + ' .inOutPreviewClip').btnBind().click(function(){ $j('#embed_vid').get(0).stop(); $j('#embed_vid').get(0).play(); }); @@ -429,14 +461,14 @@ mvClipEdit.prototype = { return '' + gM('mwe-set_in_out_points') + ''+ ''+ '' + - '' + '' + - '' + @@ -599,14 +631,14 @@ mvClipEdit.prototype = { }, applyVideoAdj:function(){ js_log('applyVideoAdj::'); + $tp = $j('#'+this.control_ct ); //be sure to "stop the video (some plugins can't have DOM elements on top of them) $j('#embed_vid').get(0).stop(); - //update video related keys: - ; - this.rObj['start_time'] = $j('#'+this.control_ct + ' .startInOut').val(); - this.rObj['end_time'] = $j('#'+this.control_ct + ' .endInOut').val() ; + //update video related keys + this.rObj['start_time'] = $tp.find('.startInOut').val(); + this.rObj['end_time'] = $tp.find('.endInOut').val() ; //do the local video adjust if(typeof this.rObj.pSobj['applyVideoAdj'] != 'undefined'){ @@ -621,7 +653,7 @@ mvClipEdit.prototype = { js_log( 'click:turn off' ); var cat = _this.rObj; if(_this.rObj.crop){ - //empty out and display croped: + //empty out and display cropped: $j('#'+_this.clip_disp_ct ).empty().html( '
0) { for ( var i = 0; i < navigator.mimeTypes.length; i++ ) { var type = navigator.mimeTypes[i].type; @@ -2570,8 +2567,8 @@ var embedTypes = { continue; } - if ( javaEnabled || type == 'application/x-java-applet' ) { - this.players.addPlayer(cortadoPlayer); + if ( type == 'application/x-java-applet' ) { + this.players.addPlayer( cortadoPlayer ); continue; } diff --git a/js2/mwEmbed/libSequencer/mvFirefoggRender.js b/js2/mwEmbed/libSequencer/mvFirefoggRender.js index 164a275643..c117c57b0a 100644 --- a/js2/mwEmbed/libSequencer/mvFirefoggRender.js +++ b/js2/mwEmbed/libSequencer/mvFirefoggRender.js @@ -1,7 +1,6 @@ /* * handles driving the firefogg render system */ - var mvFirefoggRender = function( iObj ) { return this.init( iObj ); }; diff --git a/js2/mwEmbed/libSequencer/mvPlayList.js b/js2/mwEmbed/libSequencer/mvPlayList.js index 9f66ff72ca..d3b8c44b01 100644 --- a/js2/mwEmbed/libSequencer/mvPlayList.js +++ b/js2/mwEmbed/libSequencer/mvPlayList.js @@ -154,7 +154,8 @@ mvPlayList.prototype = { * this_plObj_Clone.sequencer=true; * this_plObj_Clone.id= 'seq_plobj'; * debugger; - */ + */ + //load sequencer: $j("#sequencer_target").sequencer({ "mv_pl_src" : this.src @@ -412,36 +413,31 @@ mvPlayList.prototype = { } }, renderDisplay:function(){ - js_log('mvPlaylist:renderDisplay:: track length: ' +this.default_track.getClipCount() );'' - - var _this=this; - //setup layout for title and dc_ clip container - - - //add the playlist controls: + js_log('mvPlaylist:renderDisplay:: track length: ' +this.default_track.getClipCount() ); + var _this=this; //append container and videoPlayer; $j(this).html('
' + + 'height:'+ ( this.height + this.pl_layout.title_bar_height + + this.pl_layout.control_height ) + 'px;position:relative;">' + '
'); - if(this.controls==true){ + if(this.controls == true){ + var cpos = _this.height + _this.pl_layout.title_bar_height; + //give more space if not in sequence: + cpos+= (this.sequencer)?2:5; //append title: $j('#dc_'+_this.id).append( '
' + - '
' + + '
' + '
' + _this.getControlsHTML() + '
'+ '
' ); - - //add the play button: - $j('#dc_'+_this.id).append( - this.cur_clip.embed.getPlayButton() - ); - //once the controls are in the DOM add hooks: - this.ctrlBuilder.addControlHooks(this); + + //once the controls are in the DOM add hooks: + this.ctrlBuilder.addControlHooks( ); }else{ //just append the video: $j('#dc_'+_this.id).append( @@ -467,9 +463,10 @@ mvPlayList.prototype = { cout+='">
'; $j('#dc_'+_this.id).append( cout ); //update the embed html: - clip.embed.height=_this.height; - clip.embed.width=_this.width; - clip.embed.play_button=false; + clip.embed.height = _this.height; + clip.embed.width = _this.width; + clip.embed.play_button = false; + clip.embed.controls = false; clip.embed.getHTML();//get the thubnails for everything @@ -524,15 +521,14 @@ mvPlayList.prototype = { updateBaseStatus:function(){ var _this = this; js_log('Playlist:updateBaseStatus'); + $j('#ptitle_'+this.id).html(''+ '' + this.title + ' '+ this.getClipCount()+' clips, '+ - seconds2npt( this.getDuration() ) + ''); - - //only show the inline edit button if mediaWiki write API is enabled: + seconds2npt( this.getDuration() ) + ''); //should probably be based on if we have a provider api url - if( typeof wgEnableWriteAPI != 'undefined'){ + if( typeof wgEnableWriteAPI != 'undefined' && !this.sequencer ){ $j( $j.btnHtml('edit', 'editBtn_'+this.id, 'pencil', {'style':'position:absolute;right:0;;font-size:x-small;height:10px;margin-bottom:0;padding-bottom:7px;padding-top:0;'} ) ).click(function(){ @@ -549,17 +545,18 @@ mvPlayList.prototype = { }, /*setStatus override (could call the jquery directly) */ setStatus:function(value){ - $j('#mv_time_'+this.id).html( value ); + $j('#'+this.id + ' .time-disp' ).text( value ); }, setSliderValue:function(value){ //slider is on 1000 scale: - var val = parseInt( value *1000 ); + var val = parseInt( value *1000 ); + js_log('update slider: #' + this.id + ' .play_head to ' + val ); $j('#' + this.id + ' .play_head').slider('value', val); }, getPlayHeadPos: function(prec_done){ var _this = this; if($j('#mv_seeker_'+this.id).length==0){ - //js_log('no playhead so we can\'t get playhead pos' ); + js_log('no playhead so we can\'t get playhead pos' ); return 0; } var track_len = $j('#mv_seeker_'+this.id).css('width').replace(/px/, ''); @@ -714,7 +711,7 @@ mvPlayList.prototype = { //playlist play play: function(){ var _this=this; - //js_log('pl play'); + js_log('pl play'); //hide the playlist play button: $j(this.id + ' .play-btn-large').hide(); @@ -1125,10 +1122,11 @@ mvClip.prototype = { //if in sequence mode hide controls / embed links // init_pl_embed.play_button=false; - init_pl_embed.controls=false; + //init_pl_embed.controls=true; //if(this.pp.sequencer=='true'){ init_pl_embed.embed_link=null; - init_pl_embed.linkback=null; + init_pl_embed.linkback=null; + if(this.poster)init_pl_embed['thumbnail']=this.poster; diff --git a/js2/mwEmbed/libSequencer/mvSequencer.js b/js2/mwEmbed/libSequencer/mvSequencer.js index 2259af6d10..520e1d55a1 100644 --- a/js2/mwEmbed/libSequencer/mvSequencer.js +++ b/js2/mwEmbed/libSequencer/mvSequencer.js @@ -114,8 +114,8 @@ var sequencerDefaultValues = { //trackObj used to payload playlist Track Object (when inline not present) tracks:{} } -var mvSequencer = function(iObj) { - return this.init(iObj); +var mvSequencer = function( iObj ) { + return this.init( iObj ); }; //set up the mvSequencer object mvSequencer.prototype = { @@ -215,9 +215,9 @@ mvSequencer.prototype = { //add the container divs (with basic layout ~universal~ $j(this.target_sequence_container).html(''+ '
'+ + 'width:' + this.video_width + 'px;height:' + (this.video_height+54) + 'px;"/>'+ '
'+ + 'left:0px;right:0px;top:'+(this.video_height+60)+'px;bottom:35px;overflow:auto;">'+ gM('mwe-loading_timeline')+ '
'+ '
'+ '
' + 'left:0px;right:'+(this.video_width+10)+'px;top:0px;height:'+(this.video_height+47)+'px;"/>' ).css({ 'min-width':'850px' }); @@ -236,9 +236,9 @@ mvSequencer.prototype = { /*js_log('set: '+this.target_sequence_container + ' html to:'+ "\n"+ $j(this.target_sequence_container).html() );*/ + //first check if we got a cloned PL object: //(when the editor is invoked with the plalylist already on the page) - //@@NOT WORKING... (need a better "clone" function) /*if( this.plObj != 'null' ){ js_log('found plObj clone'); //extend with mvSeqPlayList object: @@ -260,7 +260,7 @@ mvSequencer.prototype = { } $j('#'+this.video_container_id).html(''); + ' sequencer="true" id="' + this.plObj_id + '" />'); rewrite_by_id( this.plObj_id ); setTimeout(this.instance_name +'.checkReadyPlObj()', 25); }, @@ -297,7 +297,7 @@ mvSequencer.prototype = { bConf[ gM('mwe-cancel') ] = function(){ $j(this).dialog('close'); }; - bConf[ gm('mwe-edit_save') ] = function(){ + bConf[ gM('mwe-edit_save') ] = function(){ var saveReq = { 'action' : 'edit', 'title' : _this.plObj.mTitle, @@ -1435,7 +1435,7 @@ mvSequencer.prototype = { $j(this.target_sequence_container).append('
'+ + 'class="' + this.plObj.ctrlBuilder.pClass + '">
'+ this.plObj.getControlsHTML() + '
'+ '
'); @@ -1443,7 +1443,7 @@ mvSequencer.prototype = { this.plObj.updateBaseStatus(); //once the controls are in the DOM add hooks: - this.plObj.ctrlBuilder.addControlHooks(this.plObj); + this.plObj.ctrlBuilder.addControlHooks( $j('#' + this.timeline_id + '_pl_control' ) ); //render out the "jump" div if(this.timeline_mode=='time'){ @@ -1499,7 +1499,7 @@ mvSequencer.prototype = { //refresh player: this.plObj.getHTML(); - this.render_playheadhead_seeker(); + //this.render_playheadhead_seeker(); this.render_tracks(); this.jt(this.playline_time); diff --git a/js2/mwEmbed/mv_embed.js b/js2/mwEmbed/mv_embed.js index 0b830b5aba..16cb8f2173 100644 --- a/js2/mwEmbed/mv_embed.js +++ b/js2/mwEmbed/mv_embed.js @@ -1679,7 +1679,7 @@ function do_api_req( options, callback ) { return js_error( 'Error: request paramaters must be an object' ); } // Generate the URL if it's missing - if( typeof options.url == 'undefined' || options.url === false ) { + if( typeof options.url == 'undefined' || !options.url ) { if( !wgServer || ! wgScriptPath ) { return js_error('Error: no api url for api request'); } diff --git a/js2/mwEmbed/skins/ctrlBuilder.js b/js2/mwEmbed/skins/ctrlBuilder.js index 0e8c33c95b..e72241732f 100644 --- a/js2/mwEmbed/skins/ctrlBuilder.js +++ b/js2/mwEmbed/skins/ctrlBuilder.js @@ -93,17 +93,15 @@ ctrlBuilder.prototype = { * addControlHooks * to be run once controls are attached to the dom */ - addControlHooks:function(){ + addControlHooks:function( $tp ){ //set up local pointer to the embedObj var embedObj = this.embedObj; - var _this = this; - //add in drag/seek hooks: - if(!embedObj.base_seeker_slider_offset && $j('#mv_seeker_slider_'+embedObj.id).get(0)) - embedObj.base_seeker_slider_offset = $j('#mv_seeker_slider_'+embedObj.id).get(0).offsetLeft; - - //js_log('looking for: #mv_seeker_slider_'+embedObj.id + "\n " + - // 'start sec: '+embedObj.start_time_sec + ' base offset: '+embedObj.base_seeker_slider_offset); - var $tp=$j('#' + embedObj.id); + var _this = this; + //var embed_id = (embedObj.pc!=null)?embedObj.pc.pp.id:embedObj.id; + + if( !$tp ) + $tp = $j( '#' + embedObj.id ); + //add play hook: $tp.find('.play-btn').unbind().btnBind().click(function(){ @@ -171,7 +169,7 @@ ctrlBuilder.prototype = { $j('#' +embedObj.id).get(0).fullscreen(); }); - js_log(" should add slider binding: " + $j('#'+embedObj.id + ' .play_head').length) ; + js_log(" should add slider binding: " + $tp.find('.play_head').length) ; $tp.find('.play_head').slider({ range: "min", value: 0, diff --git a/js2/mwEmbed/skins/kskin/playerSkin.css b/js2/mwEmbed/skins/kskin/playerSkin.css index bd8663b092..970d8683ea 100644 --- a/js2/mwEmbed/skins/kskin/playerSkin.css +++ b/js2/mwEmbed/skins/kskin/playerSkin.css @@ -94,7 +94,7 @@ font: 11px arial, sans-serif; line-height: 20px; overflow: hidden; - width: 36px; + width: 39px; float: right; } diff --git a/js2/mwEmbed/skins/mvpcf/playerSkin.css b/js2/mwEmbed/skins/mvpcf/playerSkin.css index 36ca4bfa29..c600e92b3b 100644 --- a/js2/mwEmbed/skins/mvpcf/playerSkin.css +++ b/js2/mwEmbed/skins/mvpcf/playerSkin.css @@ -109,7 +109,7 @@ .mv-player .vol_container_top{ top:-77px; } -.mv-player .vol_container .volume-slider{ +. ayer .vol_container .volume-slider{ margin-top:5px; height:65px; width:10px; @@ -129,7 +129,7 @@ height: 29px; overflow: visible; font-size: 10.2px; - width: 80px; + width: 85px; float: right; display: inline; border:none; @@ -140,7 +140,8 @@ display: inline; height: 10px; margin-left:10px; - margin-top:10px; + margin-top:10px; + position:relative; } .mv-player .play_head .ui-slider-handle{ diff --git a/js2/mwEmbed/tests/testLang.html b/js2/mwEmbed/tests/testLang.html index a3f80fc1ff..f129ce90cf 100644 --- a/js2/mwEmbed/tests/testLang.html +++ b/js2/mwEmbed/tests/testLang.html @@ -8,7 +8,7 @@ td{ }
'+ + ''+ gM('mwe-start_time') + ''+ '' + '
'+ '
'+ + ''+ gM('mwe-end_time') + ''+ '