| Index: branches/new-upload/phase3/js2/mwEmbed/example_usage/Make_Ogg_Advanced.html |
| — | — | @@ -3,7 +3,7 @@ |
| 4 | 4 | <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
| 5 | 5 | <title>Firefogg - Make Ogg Video in your Browser</title> |
| 6 | 6 | <!-- <script type="text/javascript" src="../jsScriptLoader.php?class=mv_embed"></script> --> |
| 7 | | - <script type="text/javascript" src="../mv_embed.js"></script> |
| | 7 | + <script type="text/javascript" src="../mv_embed.js?debug=true"></script> |
| 8 | 8 | <style type="text/css" media="all">@import "http://www.firefogg.org/css/style.css";</style> |
| 9 | 9 | <style type="text/css" media="all"> |
| 10 | 10 | .install{ |
| — | — | @@ -26,7 +26,7 @@ |
| 27 | 27 | <br> |
| 28 | 28 | <br> |
| 29 | 29 | <div style="margin-right:auto;margin-left:auto;width:500px;height:250px" id="firefogg_app"> </div> |
| 30 | | - <br><br><br><br> |
| | 30 | + <div style="height:250px"></div> |
| 31 | 31 | <center><span style="font:size:80%">Built using <a href="http://firefogg.org">firefogg</a>, <a href="http://www.mediawiki.org/wiki/Media_Projects_Overview#MwEmbed">MwEmbed</a> and <a href="http://jqueryui.com/">jquery.ui</a>. Supports |
| 32 | 32 | <a href="javascript:(function(){if%20(!/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){alert('Sorry,%20due%20to%20security%20restrictions,%20this%20tool%20only%20works%20in%20Firefox');%20return%20false;%20};%20if(window.jquitr){%20jquitr.addThemeRoller();%20}%20else{%20jquitr%20=%20{};%20jquitr.s%20=%20document.createElement('script');%20jquitr.s.src%20=%20'http://jqueryui.com/themeroller/developertool/developertool.js.php';%20document.getElementsByTagName('head')[0].appendChild(jquitr.s);}%20})();">custom themes</a> |
| 33 | 33 | </span> |
| Index: branches/new-upload/phase3/js2/mwEmbed/libAddMedia/mvAdvFirefogg.js |
| — | — | @@ -5,7 +5,14 @@ |
| 6 | 6 | //@@todo put all msg text into loadGM json |
| 7 | 7 | |
| 8 | 8 | loadGM({ |
| 9 | | - "help-sticky": "Help (Click to Keep Help on Screen)" |
| | 9 | + "help-sticky": "Help (Click to Keep Help on Screen)", |
| | 10 | + "fogg-cg-preset": "Preset: <strong>$1</strong>", |
| | 11 | + "fogg-cg-quality": "Basic Quality and Resolution Control", |
| | 12 | + "fogg-cg-meta": "Meta Data for the Clip", |
| | 13 | + "fogg-cg-advVideo": "Advanced Video Encoding Controls", |
| | 14 | + "fogg-cg-advAudio": "Advanced Audio Encoding Controls", |
| | 15 | + "fogg-preset-custom": "Custom Settings" |
| | 16 | + |
| 10 | 17 | }); |
| 11 | 18 | |
| 12 | 19 | var mvAdvFirefogg = function( initObj ){ |
| — | — | @@ -22,62 +29,59 @@ |
| 23 | 30 | 'exclude_settings' : [], |
| 24 | 31 | |
| 25 | 32 | //the control container (where we put all the controls) |
| 26 | | - 'target_control_container':'' |
| | 33 | + 'target_control_container':false |
| 27 | 34 | } |
| 28 | 35 | |
| 29 | 36 | mvAdvFirefogg.prototype = { |
| 30 | 37 | //the global groupings and titles for for configuration options : |
| 31 | | - config_groups :{ |
| 32 | | - 'preset' : "Preset: $1", |
| 33 | | - 'quality' : "Basic Quality and Resolution Control", |
| 34 | | - 'meta' : "Meta Data for the Clip", |
| 35 | | - 'advVideo' : "Advanced Video Encoding Controls", |
| 36 | | - 'advAudio' : "Advanced Audio Encoding Controls" |
| 37 | | - }, |
| 38 | | - //list of pre-sets: |
| 39 | | - presetConf : { |
| 40 | | - 'presets' :{ |
| 41 | | - 'd' : 'webvideo', |
| 42 | | - 'type' : 'select', |
| 43 | | - 'selectVal': ['webvideo'], |
| 44 | | - 'group' : "preset", |
| 45 | | - 'preset_conf':{ |
| 46 | | - 'webvideo': { |
| 47 | | - 'desc': "Webvideo Theora, Vorbis 400kbs & 400px Width", |
| 48 | | - 'conf': { |
| 49 | | - 'maxSize': 400, |
| 50 | | - 'videoBitrate': 400, |
| 51 | | - 'noUpscaling':true |
| 52 | | - } |
| 53 | | - } |
| 54 | | - } |
| 55 | | - } |
| 56 | | - }, |
| 57 | | - //local instance encoder config (empty by default) |
| 58 | | - local_encoder_config:{}, |
| | 38 | + config_groups : [ 'preset','quality', 'meta' ,'advVideo', 'advAudio'], |
| | 39 | + //list of pre-sets: |
| | 40 | + //local instance encoder config: |
| | 41 | + default_local_settings:{ |
| | 42 | + 'd' : 'webvideo', |
| | 43 | + 'type' : 'select', |
| | 44 | + 'selectVal': ['webvideo'], |
| | 45 | + 'group' : "preset", |
| | 46 | + 'pSet' : { |
| | 47 | + 'custom':{ |
| | 48 | + 'descKey': 'fogg-preset-custom', |
| | 49 | + 'conf': {} |
| | 50 | + }, |
| | 51 | + 'webvideo': { |
| | 52 | + 'desc': "Web Video Theora, Vorbis 400kbs & 400px max width", |
| | 53 | + 'conf': { |
| | 54 | + 'maxSize': 400, |
| | 55 | + 'videoBitrate': 400, |
| | 56 | + 'noUpscaling':true |
| | 57 | + } |
| | 58 | + } |
| | 59 | + } |
| | 60 | + }, |
| | 61 | + local_settings: {}, |
| | 62 | + |
| 59 | 63 | //core firefogg default encoder configuration |
| 60 | 64 | //see encoder options here: http://www.firefogg.org/dev/index.html |
| 61 | | - default_encoder_config : { |
| | 65 | + default_encoder_config : { |
| 62 | 66 | //base quality settings: |
| 63 | 67 | 'videoQuality': { |
| 64 | | - 'd' : 5, |
| 65 | | - 't' : 'Video Quality', |
| | 68 | + 'd' : 5, |
| | 69 | + 't' : 'Video Quality', |
| 66 | 70 | 'range' : {'min':0,'max':10}, |
| 67 | 71 | 'type' : 'slider', |
| 68 | 72 | 'group' : 'quality', |
| 69 | 73 | 'help' : "Used to set the <i>Visual Quality</i> of the encoded video." |
| 70 | 74 | }, |
| 71 | 75 | 'audioQuality': { |
| 72 | | - 'd' : 1, |
| 73 | | - 't' : 'Audio Quality', |
| | 76 | + 'd' : 1, |
| | 77 | + 't' : 'Audio Quality', |
| 74 | 78 | 'range' : {'min':-1,'max':10}, |
| 75 | 79 | 'type' : 'slider', |
| 76 | 80 | 'group' : 'quality', |
| 77 | 81 | 'help' : "Used to set the <i>Acoustic Quality</i> of the encoded audio." |
| 78 | 82 | }, |
| 79 | 83 | 'videoCodec':{ |
| 80 | | - 'd' : "theora", |
| 81 | | - 't' : 'Video Codec', |
| | 84 | + 'd' : "theora", |
| | 85 | + 't' : 'Video Codec', |
| 82 | 86 | 'selectVal' : ['theora'], |
| 83 | 87 | 'type' : "select", |
| 84 | 88 | 'group' : "quality", |
| — | — | @@ -85,58 +89,69 @@ |
| 86 | 90 | }, |
| 87 | 91 | 'audioCodec':{ |
| 88 | 92 | 'd' : "vorbis", |
| 89 | | - 't' : 'Audio Codec', |
| | 93 | + 't' : 'Audio Codec', |
| 90 | 94 | 'selectVal' : ['vorbis'], |
| 91 | 95 | 'type' : "select", |
| 92 | 96 | 'group' : "quality", |
| 93 | 97 | 'help' : "Used to set the clip audio codec. Presently only Vorbis is supported. More about the <a href=\"http://www.vorbis.com//\">vorbis codec</a> " |
| 94 | 98 | }, |
| 95 | 99 | 'width': { |
| 96 | | - 't' : 'Video Width', |
| 97 | | - 'type' : "int", |
| | 100 | + 't' : 'Video Width', |
| | 101 | + 'range' : {'min':0,'max':1080}, |
| | 102 | + 'step' : 4, |
| | 103 | + 'type' : 'slider', |
| 98 | 104 | 'group' : "quality", |
| 99 | 105 | 'help' : "Resize to given width." |
| 100 | 106 | }, |
| 101 | 107 | 'height': { |
| 102 | | - 't' : 'Video Height', |
| 103 | | - 'type' : "int", |
| | 108 | + 't' : 'Video Height', |
| | 109 | + 'range' : {'min':0,'max':1080}, |
| | 110 | + 'step' : 4, |
| | 111 | + 'type' : "slider", |
| 104 | 112 | 'group' : "quality", |
| 105 | 113 | 'help' : "Resize to given height" |
| 106 | | - }, |
| 107 | | - |
| 108 | | - //advanced Video control configs: |
| | 114 | + }, |
| | 115 | + //advanced Video control configs: |
| | 116 | + 'videoBitrate':{ |
| | 117 | + 't' : 'Video Bitrate', |
| | 118 | + 'range' : {'min':1, 'max':16778}, |
| | 119 | + 'type' : "slider", |
| | 120 | + 'group' : "advVideo", |
| | 121 | + 'help' : "Video Bitrate sets the encoding bitrate for video in (kb/s)" |
| | 122 | + } , |
| 109 | 123 | 'framerate':{ |
| 110 | | - 't' : 'Framerate', |
| 111 | | - 'd' : '24', |
| | 124 | + 't' : 'Framerate', |
| | 125 | + 'd' : '24', |
| 112 | 126 | 'selectVal' : ['12', '16', '23:976', '24', '29:97', '30'], |
| 113 | 127 | 'type' : "select", |
| 114 | 128 | 'group' : "advVideo", |
| 115 | 129 | 'help' : "The video Framerate. More about <a target=\"_new\" href=\"http://en.wikipedia.org/wiki/Frame_rate\">Framerate</a>" |
| 116 | 130 | }, |
| 117 | 131 | 'aspect':{ |
| 118 | | - 't' : 'Aspect Ratio', |
| | 132 | + 't' : 'Aspect Ratio', |
| | 133 | + 'd' : '4:3', |
| 119 | 134 | 'type' : "select", |
| 120 | 135 | 'selectVal' : ['4:3', '16:9'], |
| 121 | 136 | 'group' : "advVideo", |
| 122 | 137 | 'help' : "The video aspect ratio can be fraction 4:3 or 16:9. More about <a target=\"_new\" href=\"http://en.wikipedia.org/wiki/Aspect_ratio_%28image%29\">aspect ratios</a>" |
| 123 | 138 | }, |
| 124 | 139 | 'keyframeInterval':{ |
| 125 | | - 'd' : '64', |
| 126 | | - 't' : 'Key Frame Interval', |
| | 140 | + 'd' : '64', |
| | 141 | + 't' : 'Key Frame Interval', |
| 127 | 142 | 'range' : {'min':0,'max':65536}, |
| 128 | | - 'numberType' : 'force keyframe every $1 frames', |
| 129 | | - 'type' : 'slider', |
| | 143 | + 'numberType': 'force keyframe every $1 frames', |
| | 144 | + 'type' : 'int', |
| 130 | 145 | 'group' : 'advVideo', |
| 131 | 146 | 'help' : "The keyframe interval in frames. Note: Most codecs force keyframes if the difference between frames is greater than keyframe encode size. More about <a href=\"http://en.wikipedia.org/wiki/I-frame\">keyframes</a>" |
| 132 | 147 | }, |
| 133 | 148 | 'denoise':{ |
| 134 | 149 | 'type' : "boolean", |
| 135 | | - 't' : "Denoise Filter", |
| | 150 | + 't' : "Denoise Filter", |
| 136 | 151 | 'group' : 'advVideo', |
| 137 | 152 | 'help' : "Denoise input video. More about <a target=\"_new\" href=\"http://en.wikipedia.org/wiki/Video_denoising\">denoise</a>" |
| 138 | 153 | }, |
| 139 | 154 | 'novideo':{ |
| 140 | | - 't' : "No Video", |
| | 155 | + 't' : "No Video", |
| 141 | 156 | 'type' : "boolean", |
| 142 | 157 | 'group' : 'advVideo', |
| 143 | 158 | 'help' : "disable video in the output" |
| — | — | @@ -144,9 +159,9 @@ |
| 145 | 160 | |
| 146 | 161 | //advanced Audio control Config: |
| 147 | 162 | 'audioBitrate':{ |
| 148 | | - 't' : "Audio Bitrate", |
| | 163 | + 't' : "Audio Bitrate", |
| 149 | 164 | 'range' : {'min':32,'max':500}, |
| 150 | | - 'numberType' : '$1 kbs', |
| | 165 | + 'numberType': '$1 kbs', |
| 151 | 166 | 'type' : 'slider', |
| 152 | 167 | 'group' : 'advAudio' |
| 153 | 168 | }, |
| — | — | @@ -231,38 +246,40 @@ |
| 232 | 247 | }else{ |
| 233 | 248 | this[ i ] = myFogg[i]; |
| 234 | 249 | } |
| 235 | | - } |
| | 250 | + } |
| 236 | 251 | }, |
| 237 | 252 | setupForm:function(){ |
| 238 | 253 | //call base firefogg form setup |
| 239 | | - basefogg_setupForm(); |
| 240 | | - //if we have a target control form gennerate the html and setup the bindings |
| 241 | | - if( this.target_control_container != ''){ |
| 242 | | - //gennerate the control html |
| 243 | | - this.doControlHTML(); |
| 244 | | - |
| 245 | | - //setup bindings: |
| 246 | | - this.doControlBindings(); |
| 247 | | - } |
| 248 | | - //else maybe we could just have a single link that invokes the interface? |
| | 254 | + basefogg_setupForm(); |
| | 255 | + |
| | 256 | + //gennerate the control html |
| | 257 | + this.doControlHTML(); |
| 249 | 258 | |
| | 259 | + //setup control bindings: |
| | 260 | + this.doControlBindings(); |
| | 261 | + |
| 250 | 262 | }, |
| 251 | 263 | doControlHTML: function(){ |
| 252 | | - |
| | 264 | + js_log("adv doControlHTML"); |
| 253 | 265 | var _this = this; |
| | 266 | + //load presets from cookie: |
| | 267 | + this.loadEncSettings(); |
| | 268 | + |
| 254 | 269 | //add base control buttons: |
| 255 | 270 | _this.basefogg_doControlHTML(); |
| 256 | 271 | |
| 257 | 272 | //build the config group outpouts |
| 258 | 273 | var gdout =''; |
| 259 | | - $j.each(this.config_groups, function(group_key, group_desc){ |
| | 274 | + $j.each(this.config_groups, function(inx, group_key){ |
| 260 | 275 | gdout+= '<div> '+ |
| 261 | | - '<h3><a href="#" id="gd_'+group_key+'" >' + group_desc + '</a></h3>'+ |
| | 276 | + '<h3><a href="#" class="gd_'+group_key+'" >' + gM('fogg-cg-'+group_key) + '</a></h3>'+ |
| 262 | 277 | '<div>'; |
| 263 | 278 | //output that group control options: |
| 264 | | - gdout+='<table width="450" ><tr><td width="35%"></td><td width="65%"></td></tr>'; |
| 265 | | - //special preset case: |
| 266 | | - |
| | 279 | + gdout+='<table width="' + ($j(_this.selector).width()-60) + '" ><tr><td width="35%"></td><td width="65%"></td></tr>'; |
| | 280 | + //output the special prset output |
| | 281 | + if(group_key=='preset'){ |
| | 282 | + gdout+=_this.proccessPresetControl( cK ); |
| | 283 | + } |
| 267 | 284 | for(var cK in _this.default_encoder_config){ |
| 268 | 285 | var cConf = _this.default_encoder_config[cK]; |
| 269 | 286 | if(cConf.group == group_key){ |
| — | — | @@ -285,7 +302,7 @@ |
| 286 | 303 | } |
| 287 | 304 | }, |
| 288 | 305 | //custom advanced target rewrites: |
| 289 | | - getTargetHtml:function(target){ |
| | 306 | + getTargetHtml:function(target){ |
| 290 | 307 | if( target=='target_btn_select_file' || |
| 291 | 308 | target=='target_btn_select_new_file'|| |
| 292 | 309 | target=='target_btn_save_local_file'){ |
| — | — | @@ -294,38 +311,63 @@ |
| 295 | 312 | target +'" href="#"><span class="ui-icon ' + icon + '"/>' + |
| 296 | 313 | gM( 'fogg-' + target.substring(11)) + |
| 297 | 314 | '</a>'; |
| 298 | | - }else if('target_input_file_name'){ |
| | 315 | + }else if( target=='target_use_latest_fox' || |
| | 316 | + target=='target_please_install' || |
| | 317 | + target == 'target_passthrough_mode'){ |
| | 318 | + return '<div style="margin-top:1em;padding: 0pt 0.7em;" class="ui-state-error ui-corner-all ' + |
| | 319 | + target + '">' + |
| | 320 | + '<p><span style="float: left; margin-right: 0.3em;" class="ui-icon ui-icon-alert"/>'+ |
| | 321 | + gM( 'fogg-' + target.substring(7)) +'</p>'+ |
| | 322 | + '</div>'; |
| | 323 | + }else if(target=='target_input_file_name'){ |
| 299 | 324 | return '<input style="" class="text ui-widget-content ui-corner-all ' + target + '" '+ |
| 300 | 325 | 'type="text" value="' + gM( 'fogg-' + target.substring(11)) + '"/> '; |
| 301 | 326 | }else{ |
| | 327 | + js_log('call : basefogg_getTargetHtml'); |
| 302 | 328 | return this.basefogg_getTargetHtml(target); |
| 303 | 329 | } |
| 304 | 330 | }, |
| | 331 | + proccessPresetControl:function(){ |
| | 332 | + var out=''; |
| | 333 | + var _this = this; |
| | 334 | + js_log('proccessPresetControl::'); |
| | 335 | + if(typeof this.local_settings.pSet!= 'undefined' ){ |
| | 336 | + out+= '<select class="_preset_select">'; |
| | 337 | + $j.each(this.local_settings.pSet, function(pKey, pSet){ |
| | 338 | + var pDesc = (pSet.descKey) ? gM(pSet.descKey) : pSet.desc; |
| | 339 | + var sel = (_this.local_settings.d == pKey)?' selected':''; |
| | 340 | + out+='<option value="'+pKey+'" '+sel+'>'+ pDesc+'</option>'; |
| | 341 | + }); |
| | 342 | + out+='</select>'; |
| | 343 | + } |
| | 344 | + return out; |
| | 345 | + }, |
| 305 | 346 | proccessCkControlHTML:function( cK ){ |
| 306 | 347 | var cConf = this.default_encoder_config[cK]; |
| 307 | 348 | var out =''; |
| 308 | 349 | out+='<tr><td valign="top">'+ |
| 309 | 350 | '<label for="_' + cK + '">' + |
| 310 | 351 | cConf.t + ':' + |
| 311 | | - '<span title="' + gM('help-sticky') + '" id="help_'+ cK + '" class="ui-icon ui-icon-info" style="float:left"></span>'+ |
| | 352 | + '<span title="' + gM('help-sticky') + '" class="help_'+ cK + ' ui-icon ui-icon-info" style="float:left"></span>'+ |
| 312 | 353 | '</label></td><td>'; |
| 313 | | - //check if we have a value for this: |
| 314 | | - var dv = ( this.local_encoder_config[ cK ] ) ? this.local_encoder_config[ cK ] : ''; |
| | 354 | + //if we don't value for this: |
| | 355 | + var dv = ( this.default_encoder_config[cK].d ) ? this.default_encoder_config[cK].d : ''; |
| 315 | 356 | //switch on the config type |
| 316 | 357 | switch( cConf.type ){ |
| 317 | 358 | case 'string': |
| 318 | | - out+= '<input type="text" id="_' + cK + '" value="' + dv + '" >' ; |
| | 359 | + case 'int': |
| | 360 | + out+= '<input type="text" class="_' + cK + ' text ui-widget-content ui-corner-all" value="' + dv + '" >' ; |
| 319 | 361 | break; |
| 320 | 362 | case 'slider': |
| 321 | 363 | var strMax = this.default_encoder_config[ cK ].range.max + ''; |
| 322 | 364 | maxdigits = strMax.length +1; |
| 323 | 365 | out+= '<input type="text" maxlength="'+maxdigits+'" size="' +maxdigits + '" '+ |
| 324 | | - 'id="_' + cK + '" style="display:inline;border:0; color:#f6931f; font-weight:bold;" ' + |
| | 366 | + 'class="_'+cK+ ' text ui-widget-content ui-corner-all" style="display:inline;border:0; color:#f6931f; font-weight:bold;" ' + |
| 325 | 367 | 'value="' + dv + '" >' + |
| 326 | | - '<div id="slider_' + cK + '"></div>'; |
| | 368 | + '<div class="slider_' + cK + '"></div>'; |
| 327 | 369 | break; |
| 328 | 370 | case 'select': |
| 329 | | - out+= '<select id="_' + cK + '">'+ |
| | 371 | + out+= '<select class="_' + cK + '">'+ |
| 330 | 372 | '<option value=""> </option>'; |
| 331 | 373 | for(var i in cConf.selectVal){ |
| 332 | 374 | var val = cConf.selectVal[i]; |
| — | — | @@ -346,8 +388,8 @@ |
| 347 | 389 | } |
| 348 | 390 | //output the help row: |
| 349 | 391 | if(cConf.help){ |
| 350 | | - out+='<div id="helpRow_' + cK + '">'+ |
| 351 | | - '<span id="helpClose_' + cK +'" class="ui-icon ui-icon-circle-close" '+ |
| | 392 | + out+='<div class="helpRow_' + cK + '">'+ |
| | 393 | + '<span class="helpClose_' + cK + ' ui-icon ui-icon-circle-close" '+ |
| 352 | 394 | 'title="Close Help"'+ |
| 353 | 395 | 'style="float:left"/>'+ |
| 354 | 396 | cConf.help + |
| — | — | @@ -355,11 +397,7 @@ |
| 356 | 398 | } |
| 357 | 399 | out+='</td></tr><tr><td colspan="2" height="10"></td></tr>'; |
| 358 | 400 | return out; |
| 359 | | - }, |
| 360 | | - select_fogg:function(){ |
| 361 | | - this.basefogg_select_fogg(); |
| 362 | | - $j(this.target_control_container).show('slow'); |
| 363 | | - }, |
| | 401 | + }, |
| 364 | 402 | doControlBindings:function(){ |
| 365 | 403 | var _this = this; |
| 366 | 404 | _this.basefogg_doControlBindings(); |
| — | — | @@ -367,58 +405,111 @@ |
| 368 | 406 | $j(this.target_control_container).hide(); |
| 369 | 407 | |
| 370 | 408 | var helpState = {}; |
| | 409 | + //do some display tweeks: |
| | 410 | + js_log('tw:' + $j(this.selector).width() + |
| | 411 | + 'ssf:' + $j(this.target_btn_select_new_file).width() + |
| | 412 | + 'sf:' + $j(this.target_btn_save_local_file).width() ); |
| | 413 | + $j(this.target_input_file_name).width( |
| | 414 | + $j(this.selector).width() - ( $j(this.target_btn_select_new_file).width() + |
| | 415 | + $j(this.target_btn_save_local_file).width() + 79 ) |
| | 416 | + ) |
| | 417 | + |
| | 418 | + //special preset action: |
| | 419 | + $j(this.selector + ' ._preset_select').change(function(){ |
| | 420 | + _this.updatePresetSelection( $j(this).val() ); |
| | 421 | + }); |
| | 422 | + |
| 371 | 423 | //bind control actions |
| 372 | 424 | for(var cK in this.default_encoder_config){ |
| 373 | 425 | var cConf = this.default_encoder_config[cK]; |
| 374 | 426 | //set up the help for all types: |
| 375 | 427 | if(cConf.help){ |
| 376 | 428 | //initial state is hidden: |
| 377 | | - $j('#helpRow_' + cK).hide(); |
| 378 | | - $j('#help_' + cK).click(function(){ |
| 379 | | - var cK = $j(this).attr("id").replace('help_',''); |
| | 429 | + $j( this.selector + ' .helpRow_' + cK).hide(); |
| | 430 | + $j(this.selector + ' .help_' + cK).click(function(){ |
| | 431 | + //get the ckId (assume its the last class) |
| | 432 | + var cK = $j(this).attr("class").split(' ').slice(-1).replace('help_', ''); |
| | 433 | + |
| 380 | 434 | if(helpState[cK]){ |
| 381 | | - $j('#helpRow_' + cK).hide('slow'); |
| | 435 | + $j(this.selector + ' .helpRow_' + cK).hide('slow'); |
| 382 | 436 | helpState[cK] = false; |
| 383 | 437 | }else{ |
| 384 | | - $j('#helpRow_' + cK).show('slow'); |
| | 438 | + $j( this.selector + ' .helpRow_' + cK).show('slow'); |
| 385 | 439 | helpState[cK] = true; |
| 386 | 440 | } |
| 387 | 441 | return false; |
| 388 | 442 | }).hover(function(){ |
| 389 | | - var cK = $j(this).attr("id").replace('help_',''); |
| 390 | | - $j('#helpRow_' + cK).show('slow'); |
| | 443 | + //get the ckId (assume its the last class) |
| | 444 | + var cK = _this.getClassId(this, 'help_'); |
| | 445 | + |
| | 446 | + $j( this.selector + ' .helpRow_' + cK).show('slow'); |
| 391 | 447 | },function(){ |
| 392 | 448 | var cK = $j(this).attr("id").replace('help_',''); |
| 393 | 449 | if(!helpState[cK]) |
| 394 | | - $j('#helpRow_' + cK).hide('slow') |
| | 450 | + $j( this.selector + ' .helpRow_' + cK).hide('slow') |
| 395 | 451 | |
| 396 | 452 | } |
| 397 | 453 | ); |
| 398 | | - $j('#helpClose_' + cK).click(function(){ |
| 399 | | - var cK = $j(this).attr("id").replace('helpClose_',''); |
| 400 | | - $j('#helpRow_' + cK).hide('slow'); |
| | 454 | + $j( this.selector + ' .helpClose_' + cK).click(function(){ |
| | 455 | + //get the ckId (assume its the last class) |
| | 456 | + var cK = _this.getClassId(this, 'help_'); |
| | 457 | + $j(this.selector + ' .helpRow_' + cK).hide('slow'); |
| 401 | 458 | helpState[cK] = false; |
| 402 | 459 | return false; |
| 403 | 460 | }); |
| 404 | 461 | }else{ |
| 405 | | - $j('#help_' + cK).hide(); |
| | 462 | + $j(this.selector + ' .help_' + cK).hide(); |
| 406 | 463 | } |
| | 464 | + |
| | 465 | + //setup bindings for change values: (validate input) |
| 407 | 466 | |
| 408 | 467 | switch( cConf.type ){ |
| 409 | 468 | case 'string': |
| 410 | 469 | //@@check if we have a validate function on the string |
| | 470 | + $j(_this.selector + ' ._'+cK).change(function(){ |
| | 471 | + $j(this).val( _this.updateLocalSetting( |
| | 472 | + _this.getClassId(this), |
| | 473 | + $j(this).val() )); |
| | 474 | + _this.updatePresetSelection('custom'); |
| | 475 | + }) |
| 411 | 476 | break; |
| 412 | | - case 'slider': |
| 413 | | - $j('#slider_' + cK ).slider({ |
| | 477 | + case 'slider': |
| | 478 | + $j(this.selector + ' .slider_' + cK ).slider({ |
| 414 | 479 | range: "min", |
| 415 | | - value: parseInt($j('#_' + cK ).val() ), |
| | 480 | + animate: true, |
| | 481 | + step: (cConf.step)?cConf.step:1, |
| | 482 | + value: $j( this.selector +' ._' + cK ).val(), |
| 416 | 483 | min: this.default_encoder_config[ cK ].range.min, |
| 417 | 484 | max: this.default_encoder_config[ cK ].range.max, |
| 418 | | - slide: function(event, ui) { |
| 419 | | - var id = $j(this).attr('id').replace('slider_', '');; |
| 420 | | - $j('#_'+ id).val( ui.value ); |
| 421 | | - } |
| 422 | | - }); |
| | 485 | + slide: function(event, ui) { |
| | 486 | + $j( _this.selector + ' ._' + _this.getClassId(this, 'slider_') ).val( ui.value ); |
| | 487 | + //setup special bindings for width / heigh aspect binding: |
| | 488 | + if(_this.getClassId(this, 'slider_') == 'width'){ |
| | 489 | + js_log('widht is: ' + ui.value + ' height should keep aspect: ' ); |
| | 490 | + //return false |
| | 491 | + } |
| | 492 | + if(_this.getClassId(this, 'slider_') == 'height'){ |
| | 493 | + js_log('height is: ' + ui.value + ' width should keep aspect: ' ); |
| | 494 | + //return false |
| | 495 | + } |
| | 496 | + }, |
| | 497 | + change: function(event, ui){ |
| | 498 | + js_log("id: " + _this.getClassId(this, 'slider_')); |
| | 499 | + //update the local settings |
| | 500 | + _this.updateLocalSetting( _this.getClassId(this, 'slider_'), ui.value); |
| | 501 | + } |
| | 502 | + }) |
| | 503 | + $j( this.selector +' ._' + cK).change(function(){ |
| | 504 | + var scid = _this.getClassId(this); |
| | 505 | + var valdVal = _this.updateLocalSetting(scid.substr(1),$j(this).val() ); |
| | 506 | + _this.updatePresetSelection('custom'); |
| | 507 | + //(validate user form input) |
| | 508 | + $j(this).val(valdVal); |
| | 509 | + //update the slider |
| | 510 | + js_log("update: " + _this.selector + ' .slider' + scid); |
| | 511 | + $j(_this.selector + ' .slider'+ scid).slider('option', 'value', valdVal ); |
| | 512 | + |
| | 513 | + }); |
| 423 | 514 | break |
| 424 | 515 | case 'select': |
| 425 | 516 | |
| — | — | @@ -430,37 +521,170 @@ |
| 431 | 522 | collapsible: true, |
| 432 | 523 | active: false, |
| 433 | 524 | fillSpace: true |
| 434 | | - }); |
| | 525 | + }); |
| | 526 | + |
| | 527 | + //do config value updates if any |
| | 528 | + this.updateValuesInHtml(); |
| 435 | 529 | }, |
| | 530 | + updatePresetSelection:function( pKey ){ |
| | 531 | + //update the preset desc |
| | 532 | + this.updatePresetDesc(pKey); |
| | 533 | + //@@todo other updates |
| | 534 | + }, |
| | 535 | + updateLocalSetting:function(confKey, value){ |
| | 536 | + js_log("updateLocalSetting: " + confKey + ' : ' + value); |
| | 537 | + //update the local value (return the value we acutally set) |
| | 538 | + if(typeof this.default_encoder_config[confKey] != 'undefined'){ |
| | 539 | + dec = this.default_encoder_config[confKey]; |
| | 540 | + if(dec.range){ |
| | 541 | + value = parseInt(value); |
| | 542 | + var min = ( dec.range.local_min) ? dec.range.local_min :dec.range.min; |
| | 543 | + if(value < min) |
| | 544 | + value = min; |
| | 545 | + var max = ( dec.range.local_max) ? dec.range.local_max : dec.range.max |
| | 546 | + if(value > max) |
| | 547 | + value = max; |
| | 548 | + } |
| | 549 | + if(dec.type=='int') |
| | 550 | + value = parseInt(value); |
| | 551 | + js_log('update:local_settings:custom:conf:'+ confKey + ' = ' + value); |
| | 552 | + this.local_settings.pSet['custom']['conf'][confKey] = value; |
| | 553 | + return value; |
| | 554 | + } |
| | 555 | + return value; |
| | 556 | + }, |
| | 557 | + getLocalValue:function(confKey){ |
| | 558 | + return this.local_settings.pSet['custom']['conf'][confKey]; |
| | 559 | + }, |
| | 560 | + getClassId:function(elm, rmstr){ |
| | 561 | + var elmclass = $j(elm).attr("class").split(' ').slice(0,1).toString(); |
| | 562 | + if(rmstr) |
| | 563 | + return elmclass.replace( rmstr, '' ); |
| | 564 | + return elmclass; |
| | 565 | + }, |
| 436 | 566 | /* |
| 437 | 567 | * sets up the autoEncoder settings |
| 438 | 568 | */ |
| 439 | 569 | autoEncoderSettings:function(){ |
| | 570 | + var _this = this; |
| | 571 | + //do the base encoder settings setup: |
| | 572 | + this.basefogg_autoEncoderSettings(); |
| | 573 | + //make sure we are "encoding" if not display not a video file eror: |
| | 574 | + if( this.encoder_settings['passthrough'] ){ |
| | 575 | + js_log("in passthrough mode (hide control)"); |
| | 576 | + //hide all controls |
| | 577 | + //dispaly not encodable video |
| | 578 | + $j(this.target_control_container).hide('slow'); |
| | 579 | + $j(this.target_passthrough_mode).show('slow'); |
| | 580 | + return ; |
| | 581 | + } |
| | 582 | + //restore display: |
| | 583 | + $j(this.target_control_container).show('slow'); |
| | 584 | + $j(this.target_passthrough_mode).hide('slow'); |
| 440 | 585 | |
| 441 | | - }, |
| 442 | | - //sets up the local settings for the encode (restored from a cookie if you have them) |
| 443 | | - setupSettings:function( force ){ |
| 444 | | - if(!force){ |
| 445 | | - if($.cookie('this.local_encoder_config')){ |
| 446 | | - this.local_encoder_config = JSON.parse( $.cookie('this.local_encoder_config') ); |
| | 586 | + //do setup settings based on local_settings /default_encoder_config with sourceFileInfo |
| | 587 | + //see: http://firefogg.org/dev/sourceInfo_example.html |
| | 588 | + for(var i in this.sourceFileInfo){ |
| | 589 | + var val = this.sourceFileInfo[i]; |
| | 590 | + var k = false; |
| | 591 | + switch(i){ |
| | 592 | + //do nothing with these: |
| | 593 | + case 'bitrate': |
| | 594 | + k = 'videoBitrate'; |
| | 595 | + val = (val*2 > this.default_encoder_config[k])?this.default_encoder_config[k]:val*2; |
| | 596 | + break; |
| | 597 | + case 'audio_bitrate': |
| | 598 | + k = 'audioBitrate'; |
| | 599 | + val = (val*2 > this.default_encoder_config[k])?this.default_encoder_config[k]:val*2; |
| | 600 | + break; |
| | 601 | + case 'width': |
| | 602 | + k = 'width'; |
| | 603 | + break; |
| | 604 | + case 'height': |
| | 605 | + k = 'height'; |
| | 606 | + break; |
| | 607 | + } |
| | 608 | + if(k!==false){ |
| | 609 | + //update the value if unset: |
| | 610 | + _this.updateLocalSetting( k, val); |
| | 611 | + |
| | 612 | + //update the local range: |
| | 613 | + if(this.default_encoder_config[k].range){ |
| | 614 | + this.default_encoder_config[k].range.local_max = val; |
| | 615 | + } |
| 447 | 616 | } |
| 448 | 617 | } |
| 449 | | - for(var i in this.default_encoder_config){ |
| 450 | | - if( this.default_encoder_config[i]['d'] ){ |
| 451 | | - this.local_encoder_config[i] = this.default_encoder_config[i]['d']; |
| | 618 | + //update the aspect |
| | 619 | + this.default_encoder_config.aspect.local_aspect = this.getLocalValue('width') / this.getLocalValue('height'); |
| | 620 | + |
| | 621 | + //set all values to new default ranges & update slider: |
| | 622 | + $j.each(this.default_encoder_config, function(inx, val){ |
| | 623 | + if($j(_this.selector + ' ._'+inx).length!=0){ |
| | 624 | + if(typeof val.range != 'undefined'){ |
| | 625 | + //udate slider range |
| | 626 | + var new_max = (val.range.local_max)?val.range.local_max: val.range.max |
| | 627 | + $j( _this.selector + ' .slider_'+inx).slider('option', 'max', new_max); |
| | 628 | + |
| | 629 | + //if we have a default local value put it into the current range: |
| | 630 | + if(_this.local_settings.pSet['custom']['conf'][inx]){ |
| | 631 | + //update the input: |
| | 632 | + $j(_this.selector + ' ._'+ inx).val( _this.local_settings.pSet['custom']['conf'][inx] ); |
| | 633 | + } |
| | 634 | + //update slider value: |
| | 635 | + $j(_this.selctor + ' .slider_'+inx).slider('option', |
| | 636 | + 'value', $j(_this.selector + ' ._'+ inx).val() ); |
| | 637 | + } |
| 452 | 638 | } |
| | 639 | + }); |
| | 640 | + //update values |
| | 641 | + this.updateValuesInHtml(); |
| | 642 | + }, |
| | 643 | + updatePresetDesc:function(pKey){ |
| | 644 | + js_log('update preset desc: '+ pKey); |
| | 645 | + var pset_desc = ''; |
| | 646 | + if(this.local_settings.pSet[ pKey ].desc){ |
| | 647 | + pset_desc = this.local_settings.pSet[ pKey ].desc; |
| | 648 | + }else{ |
| | 649 | + pset_desc = gM('fogg-preset-'+ pKey); |
| 453 | 650 | } |
| 454 | | - setValuesInHtml(); |
| | 651 | + //update the preset title: |
| | 652 | + $j( this.selector + ' .gd_preset' ).html( |
| | 653 | + gM('fogg-cg-preset', pset_desc) |
| | 654 | + ); |
| 455 | 655 | }, |
| 456 | | - setValuesInHtml:function(){ |
| 457 | | - //set the actual HTML: |
| 458 | | - $.each(this.local_encoder_config, function(inx, val){ |
| 459 | | - if($j('#_'+inx).length !=0){ |
| 460 | | - $j('#_'+inx).val( val ); |
| | 656 | + updateValuesInHtml:function(){ |
| | 657 | + js_log('updateValuesInHtml::'); |
| | 658 | + var _this = this; |
| | 659 | + var pKey = this.local_settings.d; |
| | 660 | + this.updatePresetDesc( pKey ); |
| | 661 | + |
| | 662 | + //set the actual HTML & widgets based on any local settings values: |
| | 663 | + $j.each(_this.local_settings.pSet['custom']['conf'], function(inx, val){ |
| | 664 | + if($j(_this.selector + ' ._'+inx).length !=0){ |
| | 665 | + $j(_this.selector + ' ._'+inx).val( val ); |
| 461 | 666 | } |
| 462 | | - }) |
| | 667 | + }); |
| 463 | 668 | }, |
| 464 | | - saveSettings:function(){ |
| 465 | | - $j.cookie('this.local_encoder_config', JSON.stringify( this.local_encoder_config ) ); |
| | 669 | + //restors settings from a cookie if you have them) |
| | 670 | + loadEncSettings:function( force ){ |
| | 671 | + if($j.cookie('fogg_encoder_config')){ |
| | 672 | + js_log("load:fogg_encoder_config from cookie "); |
| | 673 | + this.local_settings = JSON.parse( $j.cookie('fogg_settings') ); |
| | 674 | + } |
| | 675 | + //set to default if not loaded yet: |
| | 676 | + if( this.local_settings && this.local_settings.pSet && this.local_settings.pSet['custom']['conf']){ |
| | 677 | + js_log('local settings already populated'); |
| | 678 | + }else{ |
| | 679 | + this.local_settings = this.default_local_settings; |
| | 680 | + } |
| | 681 | + |
| | 682 | + }, |
| | 683 | + //clear preset settings: |
| | 684 | + clearSettings:function(force){ |
| | 685 | + |
| | 686 | + }, |
| | 687 | + //save settings to the cookie |
| | 688 | + saveEncSettings:function(){ |
| | 689 | + $j.cookie('fogg_settings', JSON.stringify( this.local_settings ) ); |
| 466 | 690 | } |
| 467 | 691 | } |
| \ No newline at end of file |
| Index: branches/new-upload/phase3/js2/mwEmbed/libAddMedia/mvFirefogg.js |
| — | — | @@ -9,8 +9,8 @@ |
| 10 | 10 | 'fogg-check_for_fogg' : 'Checking for Firefogg <blink>...</blink>', |
| 11 | 11 | 'fogg-installed' : 'Firefogg is Installed', |
| 12 | 12 | 'fogg-please_install' : 'You don\'t have firefogg installed, For improved uploads please <a href="$1">install firefogg</a> more <a href="http://commons.wikimedia.org/wiki/Commons:Firefogg">about firefogg</a>', |
| 13 | | - 'fogg-use_latest_fox' : 'You need a <a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Firefox 3.5</a> to use Firefogg', |
| 14 | | - 'passthrough_mode' : 'Your selected file is already ogg or not a video file', |
| | 13 | + 'fogg-use_latest_fox' : 'You need a <a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Firefox 3.5</a> to use Firefogg', |
| | 14 | + 'fogg-passthrough_mode' : 'Your selected file is already ogg or not a video file', |
| 15 | 15 | }); |
| 16 | 16 | |
| 17 | 17 | var firefogg_install_links = { |
| — | — | @@ -57,13 +57,13 @@ |
| 58 | 58 | } |
| 59 | 59 | mvFirefogg.prototype = { //extends mvBaseUploadInterface |
| 60 | 60 | |
| 61 | | - min_firefogg_version : '0.9.6', |
| | 61 | + min_firefogg_version : '0.9.6', |
| 62 | 62 | fogg_enabled : false, //if firefogg is enabled or not. |
| 63 | 63 | encoder_settings:{ //@@todo allow server to set this |
| 64 | 64 | 'maxSize': 400, |
| 65 | 65 | 'videoBitrate': 400, |
| 66 | 66 | 'noUpscaling':true |
| 67 | | - }, |
| | 67 | + }, |
| 68 | 68 | sourceFileInfo:{}, |
| 69 | 69 | ogg_extensions: ['ogg', 'ogv', 'oga'], |
| 70 | 70 | video_extensions: ['avi', 'mov', 'mp4', 'mp2', 'mpeg', 'mpeg2', 'mpeg4', 'dv', 'wmv'], |
| — | — | @@ -92,7 +92,7 @@ |
| 93 | 93 | } |
| 94 | 94 | if(!this.selector){ |
| 95 | 95 | js_log('Error: firefogg: missing selector '); |
| 96 | | - } |
| | 96 | + } |
| 97 | 97 | }, |
| 98 | 98 | doRewrite:function( callback ){ |
| 99 | 99 | var _this = this; |
| — | — | @@ -113,7 +113,7 @@ |
| 114 | 114 | if(callback) |
| 115 | 115 | callback(); |
| 116 | 116 | }, |
| 117 | | - doControlHTML: function(){ |
| | 117 | + doControlHTML: function(){ |
| 118 | 118 | var _this = this; |
| 119 | 119 | var out = ''; |
| 120 | 120 | $j.each(default_firefogg_options, function(target, na){ |
| — | — | @@ -130,11 +130,13 @@ |
| 131 | 131 | $j( this.selector ).html( out ).show(); |
| 132 | 132 | }, |
| 133 | 133 | getTargetHtml:function(target){ |
| | 134 | + js_log('getTargetHtml:'+ target); |
| 134 | 135 | if( target.substr(7,3)=='btn'){ |
| 135 | 136 | return '<input style="" class="' + target + '" type="button" value="' + gM( 'fogg-' + target.substring(11)) + '"/> '; |
| 136 | 137 | }else if(target.substr(7,5)=='input'){ |
| 137 | 138 | return '<input style="" class="' + target + '" type="text" value="' + gM( 'fogg-' + target.substring(11)) + '"/> '; |
| 138 | 139 | }else{ |
| | 140 | + js_log(" get target: " + target.substring(7)); |
| 139 | 141 | return '<div style="" class="' + target + '" >'+ gM('fogg-'+ target.substring(7)) + '</div> '; |
| 140 | 142 | } |
| 141 | 143 | }, |
| — | — | @@ -150,7 +152,7 @@ |
| 151 | 153 | coma=','; |
| 152 | 154 | } |
| 153 | 155 | }); |
| 154 | | - $j( hide_target_list ).hide(); |
| | 156 | + $j( hide_target_list ).hide(); |
| 155 | 157 | //if rewriting the form lets keep the text input around: |
| 156 | 158 | if(_this.form_rewrite) |
| 157 | 159 | $j('#target_input_file_name').show(); |
| — | — | @@ -167,6 +169,12 @@ |
| 168 | 170 | }); |
| 169 | 171 | |
| 170 | 172 | }else{ |
| | 173 | + //first check firefox version: |
| | 174 | + if(!($j.browser.mozilla && $j.browser.version >= '1.9.1')) { |
| | 175 | + $j(_this.target_use_latest_fox).show(); |
| | 176 | + return ; |
| | 177 | + } |
| | 178 | + //if they have the right version of mozilla provide install link: |
| 171 | 179 | var os_link = false; |
| 172 | 180 | if(navigator.oscpu){ |
| 173 | 181 | if(navigator.oscpu.search('Linux') >= 0) |
| — | — | @@ -175,7 +183,7 @@ |
| 176 | 184 | os_link = firefogg_install_links['macosx']; |
| 177 | 185 | else if(navigator.oscpu.search('Win') >= 0) |
| 178 | 186 | os_link = firefogg_install_links['win32']; |
| 179 | | - } |
| | 187 | + } |
| 180 | 188 | $j(_this.target_please_install).html( gM('fogg-please_install',os_link )).css('padding', '10px').show(); |
| 181 | 189 | } |
| 182 | 190 | //setup the target save local file bindins: |
| — | — | @@ -256,14 +264,18 @@ |
| 257 | 265 | //if not already hidden hide select file and show "select new": |
| 258 | 266 | $j(_this.target_btn_select_file).hide(); |
| 259 | 267 | //show and setup binding for select new file: |
| 260 | | - $j(_this.target_btn_select_new_file).show().click(function(){ |
| | 268 | + $j(_this.target_btn_select_new_file).show().unbind().click(function(){ |
| 261 | 269 | _this.select_fogg(); |
| 262 | 270 | }); |
| 263 | 271 | //update if we are in passthrough mode or going to encode |
| 264 | 272 | if( _this.fogg.sourceInfo && _this.fogg.sourceFilename ){ |
| 265 | 273 | //update the source status |
| 266 | | - _this.sourceFileInfo = JSON.parse( _this.fogg.sourceInfo) ; |
| 267 | | - |
| | 274 | + try{ |
| | 275 | + _this.sourceFileInfo = JSON.parse( _this.fogg.sourceInfo ) ; |
| | 276 | + }catch (e){ |
| | 277 | + js_error('error could not parse fogg sourceInfo'); |
| | 278 | + } |
| | 279 | + |
| 268 | 280 | //now setup encoder settings based source type: |
| 269 | 281 | _this.autoEncoderSettings(); |
| 270 | 282 | |
| — | — | @@ -304,7 +316,8 @@ |
| 305 | 317 | //in the default case passthrough |
| 306 | 318 | _this.encoder_settings['passthrough'] = true; |
| 307 | 319 | }else if( $j.inArray(ext, _this.video_extensions) > -1 ){ |
| 308 | | - //we are going to run the encoder |
| | 320 | + //we are going to run the encoder with default settings. |
| | 321 | + _this.encoder_settings['passthrough'] = false; |
| 309 | 322 | }else{ |
| 310 | 323 | _this.encoder_settings['passthrough'] = true; |
| 311 | 324 | } |