js2/mwEmbed/libAddMedia/mvFirefogg.js

   1 /* adds firefogg support.
   2 * autodetects: new upload api or old http POST.
   3  */
   4
   5 loadGM({
   6         "fogg-select_file" : "Select file",
   7         "fogg-select_new_file" : "Select new file",
   8         "fogg-select_url" : "Select URL",
   9         "fogg-save_local_file" : "Save Ogg",
  10         "fogg-check_for_fogg" : "Checking for Firefogg ...",
  11         "fogg-installed" : "Firefogg is installed",
  12         "fogg-for_improved_uplods" : "For improved uploads:",
  13         "fogg-please_install" : "<a href=\"$1\">Install Firefogg<\/a>. More <a href=\"http:\/\/commons.wikimedia.org\/wiki\/Commons:Firefogg\">about Firefogg<\/a>",
  14         "fogg-use_latest_fox" : "Please first install <a href=\"http:\/\/www.mozilla.com\/en-US\/firefox\/upgrade.html?from=firefogg\">Firefox 3.5<\/a> (or later). <i>Then revisit this page to install the <b>Firefogg<\/b> extension.<\/i>",
  15         "fogg-passthrough_mode" : "Your selected file is already Ogg or not a video file",
  16         "fogg-transcoding" : "Encoding video to Ogg",
  17         "fogg-encoding-done" : "Encoding complete",
  18         "fogg-badtoken" : "Token is not valid",
  19         "fogg-preview"  : "Preview video",
  20         "fogg-hidepreview" : "Hide preview"
  21 });
  22
  23 var firefogg_install_links =  {
  24         'macosx':       'http://firefogg.org/macosx/Firefogg.xpi',
  25         'win32':        'http://firefogg.org/win32/Firefogg.xpi',
  26         'linux' :       'http://firefogg.org/linux/Firefogg.xpi'
  27 };
  28
  29 var default_firefogg_options = {
  30         //what to do when finished uploading
  31         'done_upload_cb':false,
  32         //if firefoog is enabled
  33         'fogg_enabled':false,
  34         //the api url to upload to
  35         'api_url':null,
  36         //the passthrough flag (enables un-modified uploads)
  37         'passthrough': false,
  38         //if we will be showing the encoder interface
  39         'encoder_interface': false,
  40         //if we want to limit the library functionality to "only firefoog" (no upload or progress bars)
  41         'only_fogg': false,
  42
  43
  44         //callbacks:
  45         'new_source_cb': false, //called on source name update passes along source name
  46
  47         //target control container or form (can't be left null)
  48         'selector': '',
  49
  50         //if not rewriting a form we are encoding local.
  51         'form_rewrite': false,
  52
  53         //taget buttons:
  54         'target_btn_select_file': false,
  55         'target_btn_select_new_file': false,
  56
  57         //'target_btn_select_url': false,
  58
  59         'target_btn_save_local_file': false,
  60         'target_input_file_name': false,
  61
  62
  63         //target install descriptions
  64         'target_check_for_fogg': false,
  65         'target_installed': false,
  66         'target_please_install': false,
  67         'target_use_latest_fox': false,
  68         //status:
  69         'target_passthrough_mode':false,
  70
  71         //if firefogg should take over the form submit action
  72         'firefogg_form_action':true,
  73
  74         //if we should show a preview of encoding progress
  75         'show_preview':false,
  76 }
  77
  78
  79 var mvFirefogg = function(iObj){
  80         return this.init( iObj );
  81 }
  82 mvFirefogg.prototype = { //extends mvBaseUploadInterface
  83
  84         min_firefogg_version : '0.9.9.5',
  85         fogg_enabled : false,            //if firefogg is enabled or not.
  86         encoder_settings:{                      //@@todo allow server to set this
  87                 'maxSize'        : '400',
  88         'videoBitrate'   : '544',
  89         'audioBitrate'   : '96',
  90         'noUpscaling'    : true
  91         },
  92         sourceFileInfo: {},
  93         ogg_extensions: ['ogg', 'ogv', 'oga'],
  94         video_extensions: ['avi', 'mov', 'mp4', 'mp2', 'mpeg', 'mpeg2', 'mpeg4', 'dv', 'wmv'],
  95
  96         passthrough: false,
  97         sourceMode: 'file',
  98
  99         init: function( iObj ){
 100                 if(!iObj)
 101                         iObj = {};
 102
 103                 //if we have no api_url set upload to "post"
 104                 if(!iObj.api_url)
 105                         iObj.upload_mode = 'post';
 106
 107                 //inherit iObj properties:
 108                 for(var i in default_firefogg_options){
 109                         if(iObj[i]){
 110                                 this[i] = iObj[i];
 111                         }else{
 112                                 this[i] = default_firefogg_options[i];
 113                         }
 114                 }
 115                 //check if we want to limit the usage:
 116                 if(!this.only_fogg){
 117                         var myBUI = new mvBaseUploadInterface( iObj );
 118
 119                         //standard extends code:
 120                         for(var i in myBUI){
 121                                 if(this[i]){
 122                                         this['pe_'+ i] = myBUI[i];
 123                                 }else{
 124                                         this[i] =  myBUI[i];
 125                                 }
 126                         }
 127                 }
 128
 129                 if(!this.selector){
 130                         js_log('firefogg: missing selector ');
 131                 }
 132         },
 133         doRewrite:function( callback ){
 134                 var _this = this;
 135                 js_log('sel len: ' + this.selector + '::' + $j(this.selector).length + ' tag:'+ $j(this.selector).get(0).tagName);
 136                 if( $j(this.selector).length >=0 ){
 137
 138                         if( $j(this.selector).get(0).tagName.toLowerCase() == 'input' ){
 139                                 _this.form_rewrite = true;
 140                         }
 141                 }
 142                 //check if we are rewriting an input or a form:
 143                 if( this.form_rewrite ){
 144                         this.setupForm();
 145                 }else{
 146                         this.doControlHTML();
 147                         this.doControlBindings();
 148                 }
 149
 150                 //doRewrite is done:
 151                 if(callback)
 152                         callback();
 153         },
 154         doControlHTML: function( ){
 155                 var _this = this;
 156                 var out = '';
 157                 $j.each(default_firefogg_options, function(target, na){
 158                         if(target.substring(0, 6)=='target'){
 159                                 //js_log('check for target html: ' + target);
 160                                 //check for the target if missing add to the output:
 161                                 if( _this[target] === false){
 162                                         out += _this.getTargetHtml(target) + ' ';
 163                                         //update the target selector
 164                                     _this[target] = _this.selector + ' .' + target;
 165                                 }
 166                         }
 167                 });
 168                 $j( this.selector ).append( out ).hide();
 169         },
 170         getTargetHtml:function(target){
 171                 if( target.substr(7,3)=='btn'){
 172                         return '<input style="" class="' + target + '" type="button" value="' + gM( 'fogg-' + target.substring(11)) + '"/> ';
 173                 }else if(target.substr(7,5)=='input'){
 174                         return '<input style="" class="' + target + '" type="text" value="' + gM( 'fogg-' + target.substring(11)) + '"/> ';
 175                 }else{
 176                         return '<div style="" class="' + target + '" >'+ gM('fogg-'+ target.substring(7)) + '</div> ';
 177                 }
 178         },
 179         doControlBindings: function(){
 180                 var _this = this;
 181
 182                 //hide all targets:
 183                 var hide_target_list='';
 184                 var coma='';
 185                 $j.each(default_firefogg_options, function(target, na){
 186                         if(target.substring(0, 6)=='target'){
 187                                 hide_target_list+=coma + _this[target];
 188                                 coma=',';
 189                         }
 190                 });
 191                 $j( hide_target_list ).hide();
 192                 //now that the proper set of items has been hiiden show:
 193                 $j( this.selector ).show();
 194
 195
 196                 //hide all but check-for-fogg
 197                 //check for firefogg
 198                 if( _this.firefoggCheck() ){
 199
 200                         //if rewriting the form lets keep the text input around:
 201                         if( _this.form_rewrite )
 202                                 $j(this.target_input_file_name).show();
 203
 204                         //show select file:
 205                         $j( this.target_btn_select_file ).unbind(
 206                                 ).attr('disabled', false
 207                                 ).css({'display':'inline'}
 208                                 ).click(function(){
 209                                         _this.selectFogg();
 210                                 });
 211
 212                     //also setup the text file display on Click to select file:
 213                     $j(this.target_input_file_name).unbind().attr('readonly', 'readonly').click(function(){
 214                         _this.selectFogg();
 215                     })
 216
 217                 }else{
 218                         //first check firefox version:
 219                         if(!( $j.browser.mozilla && $j.browser.version >= '1.9.1' )) {
 220                                 js_log( 'show use latest::' + _this.target_use_latest_fox );
 221                                 if( _this.target_use_latest_fox ){
 222                                         if( _this.form_rewrite )
 223                                                 $j( _this.target_use_latest_fox ).prepend( gM('fogg-for_improved_uplods') );
 224
 225                                         $j( _this.target_use_latest_fox ).show();
 226                                 }
 227                                 return ;
 228                         }
 229
 230                         //if rewriting form use upload msg text
 231                         var upMsg = (_this.form_rewrite) ? gM('fogg-for_improved_uplods') : '';
 232                         $j( _this.target_please_install ).html( upMsg + gM('fogg-please_install', _this.getOSlink() )).css('padding', '10px').show();
 233                 }
 234                 //setup the target save local file bindins:
 235                 $j( _this.target_btn_save_local_file ).unbind().click(function(){
 236                         _this.saveLocalFogg();
 237                 });
 238         },
 239         /*
 240          * returns the firefogg link for your os:
 241          */
 242         getOSlink:function(){
 243                 var os_link = false;
 244                 if(navigator.oscpu){
 245                         if(navigator.oscpu.search('Linux') >= 0)
 246                                 os_link = firefogg_install_links['linux'];
 247                         else if(navigator.oscpu.search('Mac') >= 0)
 248                                   os_link = firefogg_install_links['macosx'];
 249                         else if(navigator.oscpu.search('Win') >= 0)
 250                                   os_link = firefogg_install_links['win32'];
 251                 }
 252                 return os_link
 253         },
 254         firefoggCheck:function(){
 255                 if(typeof(Firefogg) != 'undefined' && Firefogg().version >= this.min_firefogg_version){
 256                         this.fogg = new Firefogg();
 257                         this.fogg_enabled = true;
 258                         return true;
 259                 }else{
 260                         return false;
 261                 }
 262         },
 263         //assume input target
 264         setupForm: function(){
 265                 js_log('firefogg::setupForm::');
 266                 //to parent form setup if we want http updates
 267                 if( this.form_rewrite ){
 268                         //do parent form setup:
 269                         this.pe_setupForm();
 270                 }
 271
 272                 //check if we have firefogg (if not just add a link and stop proccessing)
 273                 if( !this.firefoggCheck() ){
 274                         //add some status indicators if not provided:
 275                         if(!this.target_please_install){
 276                                 $j(this.selector).after ( this.getTargetHtml('target_please_install') );
 277                                 this.target_please_install = this.selector + ' ~ .target_please_install';
 278                         }
 279                         if(!this.target_use_latest_fox){
 280                                 $j(this.selector).after ( this.getTargetHtml('target_use_latest_fox') );
 281                                 this.target_use_latest_fox = this.selector + ' ~ .target_use_latest_fox';
 282                         }
 283                         //update download link:
 284                         this.doControlBindings();
 285                         return ;
 286                 }
 287
 288                 //change the file browser to type text: (can't directly change input from "file" to "text" so longer way:
 289                 var inTag = '<input ';
 290                 $j.each($j(this.selector).get(0).attributes, function(i, attr){
 291                         var val = attr.value;
 292                         if( attr.name == 'type')
 293                                 val = 'text';
 294                         inTag += attr.name + '="' + val + '" ';
 295                 });
 296                 if(!$j(this.selector).attr('style'))
 297                         inTag += 'style="display:inline" ';
 298
 299                 inTag+= '/><span id="' + $j(this.selector).attr('name') + '_fogg-control"></span>';
 300
 301                 js_log('set input: ' + inTag);
 302                 $j(this.selector).replaceWith(inTag);
 303
 304                 this.target_input_file_name = 'input[name=' + $j(this.selector).attr('name') + ']';
 305                 //update the selector to the control target:
 306                 this.selector = '#' + $j(this.selector).attr('name') +  "_fogg-control";
 307
 308                 this.doControlHTML();
 309                 //check for the other inline status indicator targets:
 310
 311                 //update the bindings:
 312                 this.doControlBindings();
 313         },
 314         //do firefogg specific additions:
 315         dispProgressOverlay:function(){
 316                 this.pe_dispProgressOverlay();
 317
 318                 //if we are uploading video (not in passthrough mode show preview button)
 319                 if( ! this.encoder_settings['passthrough']  && ! this.http_copy_upload ){
 320                         this.doPreviewControl();
 321                 }
 322         },
 323         doPreviewControl:function(){
 324                 var _this = this;
 325                 //prepend preview (if fogg)
 326                 $j('#upProgressDialog').append(
 327                         '<div style="clear:both;height:3em"/>'+
 328                         $j.btnHtml(gM('fogg-preview'), 'fogg_preview', 'triangle-1-e') +
 329                         '<div style="padding:10px;">' +
 330                                 '<canvas style="margin:auto;" id="fogg_preview_canvas" />' +
 331                         '</div>'
 332                 );
 333                 //set initial state
 334                 if( _this.show_preview == true){
 335                         $j('#fogg_preview_canvas').show();
 336                 }else{
 337                         //update icon:
 338                         $j(this).children('.ui-icon')
 339                                 .removeClass('ui-icon-triangle-1-s')
 340                                 .addClass('ui-icon-triangle-1-e');
 341                         //update text:
 342                         $j(this).children('.btnText').text( gM('fogg-preview') );
 343                         $j('#fogg_preview_canvas').hide();
 344                 }
 345                 //apply preview binding:
 346                 $j('#upProgressDialog .fogg_preview').btnBind().click( function(){
 347                         js_log("click .foog_preview" + $j(this).children('.ui-icon').attr('class') );
 348                         //check state:
 349                         if( $j(this).children('.ui-icon').hasClass('ui-icon-triangle-1-e') ){
 350                                 _this.show_preview = true;
 351                                 //update icon:
 352                                 $j(this).children('.ui-icon')
 353                                         .removeClass('ui-icon-triangle-1-e')
 354                                         .addClass('ui-icon-triangle-1-s');
 355                                 //update text
 356                                 $j(this).children('.btnText').text( gM('fogg-hidepreview') );
 357
 358                                 //show preview window
 359                                 $j('#fogg_preview_canvas').show('fast');
 360                         }else{
 361                                 _this.show_preview = false;
 362                                 //update icon:
 363                                 $j(this).children('.ui-icon')
 364                                         .removeClass('ui-icon-triangle-1-s')
 365                                         .addClass('ui-icon-triangle-1-e');
 366                                 //update text:
 367                                 $j(this).children('.btnText').text( gM('fogg-preview') );
 368
 369                                 $j('#fogg_preview_canvas').hide('slow');
 370                         }
 371                         //don't follow the #
 372                         return false;
 373                 });
 374         },
 375         doRenderPreview:function(){
 376                 var _this = this;
 377                 //set up the hidden video to pull frames from:
 378                 if( $j('#fogg_preview_vid').length == 0 )
 379                         $j('body').append('<video id="fogg_preview_vid" style="display:none"></video>');
 380                 var v = $j('#fogg_preview_vid').get(0);
 381
 382                 function seekToEnd(){
 383                     var v = $j('#fogg_preview_vid').get(0);
 384                     v.currentTime = v.duration-0.4;
 385                 }
 386                 function getFrame() {
 387                         var v = $j('#fogg_preview_vid').get(0);
 388                         var canvas = $j('#fogg_preview_canvas').get(0);
 389                         if( canvas ){
 390                                 canvas.width = 160;
 391                                 canvas.height = canvas.width * v.videoHeight/v.videoWidth;
 392                                 var ctx = canvas.getContext("2d");
 393                                 ctx.drawImage(v, 0, 0, canvas.width, canvas.height);
 394                         }
 395                 }
 396                 var previewI=null;
 397                 function preview() {
 398                         //initialize the video if not setup already:
 399                         var v = $j('#fogg_preview_vid').get(0);
 400                         if( v.src != _this.fogg.previewUrl ){
 401                                 js_log('init preview with url:' + _this.fogg.previewUrl);
 402                                 v.src = _this.fogg.previewUrl;
 403
 404                                 //set the video to seek to the end of the video
 405                                 v.removeEventListener("loadedmetadata", seekToEnd, true);
 406                                 v.addEventListener("loadedmetadata", seekToEnd, true);
 407
 408                                 //render a frame once seek is complete:
 409                                 v.removeEventListener("seeked", getFrame, true);
 410                                 v.addEventListener("seeked", getFrame, true);
 411
 412                                 //refresh the video duration/meta:
 413                                 clearInterval(previewI);
 414                                 var previewI = setInterval(function(){
 415                                         if (_this.fogg.status() != "encoding"){
 416                                                 clearInterval(previewI);
 417                                                 _this.show_preview == false;
 418                                         }
 419                                         if (_this.show_preview == true) {
 420                                                 v.load();
 421                                         }
 422                                 }, 1000);
 423                         }
 424                 }
 425                 preview();
 426         },
 427         getEditForm:function(){
 428                 if( this.target_edit_from )
 429                         return this.pe_getEditForm();
 430                 //else try to get the parent "from" of the file selector:
 431                 return $j(this.selector).parents('form:first').get(0);
 432         },
 433         selectFogg:function(){
 434                 var _this = this;
 435                 if(_this.fogg.selectVideo() ){
 436                         this.selectFoggActions();
 437                 }
 438         },
 439         selectFoggActions:function(){
 440                 var _this = this;
 441                 js_log('videoSelectReady');
 442                 //if not already hidden hide select file and show "select new":
 443                 $j(_this.target_btn_select_file).hide();
 444
 445                 //show and setup binding for select new file:
 446                 $j(_this.target_btn_select_new_file).show().unbind().click(function(){
 447                         //create new fogg instance:
 448                         _this.fogg = new Firefogg();
 449                         _this.selectFogg();
 450                 });
 451
 452                 //update if we are in passthrough mode or going to encode
 453                 if( _this.fogg.sourceInfo && _this.fogg.sourceFilename  ){
 454                         //update the source status
 455                         try{
 456                                 _this.sourceFileInfo = JSON.parse( _this.fogg.sourceInfo ) ;
 457                         }catch (e){
 458                                 js_error('error could not parse fogg sourceInfo');
 459                         }
 460
 461                         //now setup encoder settings based source type:
 462                         _this.autoEncoderSettings();
 463
 464                         //if set to passthough update the interface (if not a form)
 465                         if(_this.encoder_settings['passthrough'] == true && !_this.form_rewrite){
 466                                 $j(_this.target_passthrough_mode).show();
 467                         }else{
 468                                 $j(_this.target_passthrough_mode).hide();
 469                                 //if set to encoder expose the encode button:
 470                                 if( !_this.form_rewrite ){
 471                                         $j(_this.target_btn_save_local_file).show();
 472                                 }
 473                         }
 474                         //~otherwise the encoding will be triggered by the form~
 475
 476                         //do source name update callback:
 477                         js_log(" should update: " + _this.target_input_file_name + ' to: ' + _this.fogg.sourceFilename );
 478                         $j(_this.target_input_file_name).val(_this.fogg.sourceFilename).show();
 479
 480                         if(_this.new_source_cb){
 481                                 if(_this.encoder_settings['passthrough']){
 482                                         var fName = _this.fogg.sourceFilename
 483                                 }else{
 484                                     var oggExt = (_this.isSourceAudio())?'oga':'ogg';
 485                     oggExt = (_this.isSourceVideo())?'ogv':oggExt;
 486                     oggExt = (_this.isUnknown())?'ogg':oggExt;
 487                                     oggName = _this.fogg.sourceFilename.substr(0,
 488                                                   _this.fogg.sourceFilename.lastIndexOf('.'));
 489                                     var fName = oggName +'.'+ oggExt
 490                                 }
 491                                 _this.new_source_cb( _this.fogg.sourceFilename , fName);
 492                         }
 493                 }
 494         },
 495         saveLocalFogg:function(){
 496            //request target location:
 497            if(this.fogg){
 498                    if(!this.fogg.saveVideoAs() )
 499                            return false;
 500
 501                    //we have set a target now call the encode:
 502                   this.doEncode();
 503            }
 504         },
 505         //simple auto encoder settings just enable passthough if file is not video or > 480 pixles tall
 506         autoEncoderSettings:function(){
 507                 var _this = this;
 508                 //grab the extension:
 509                 var sf = _this.fogg.sourceFilename;
 510                 var ext = '';
 511                 if(     sf.lastIndexOf('.') != -1)
 512                         ext = sf.substring( sf.lastIndexOf('.')+1 ).toLowerCase();
 513
 514                 //set to passthrough to true by default (images, arbitrary files that we want to send with http chunks)
 515                 this.encoder_settings['passthrough'] = true;
 516
 517                 //see if we have video or audio:
 518                 if(  _this.isSourceAudio() || _this.isSourceVideo() )
 519                          _this.encoder_settings['passthrough'] = false;
 520
 521                 //special case see if we already have ogg video:
 522                 if( _this.isOggFormat() )
 523                         _this.encoder_settings['passthrough'] = true;
 524
 525                 js_log('base autoEncoderSettings::' + _this.sourceFileInfo.contentType  + ' passthrough:' + _this.encoder_settings['passthrough']);
 526         },
 527         isUnknown:function(){
 528                 return (this.sourceFileInfo.contentType.indexOf("unknown") != -1);
 529         },
 530         isSourceAudio:function(){
 531            return (this.sourceFileInfo.contentType.indexOf("audio/") != -1);
 532         },
 533         isSourceVideo:function(){
 534             return (this.sourceFileInfo.contentType.indexOf("video/") != -1);
 535         },
 536         isOggFormat:function(){
 537            return ( this.sourceFileInfo.contentType.indexOf("video/ogg") != -1 ||
 538                         this.sourceFileInfo.contentType.indexOf("application/ogg") != -1   );
 539         },
 540         getProgressTitle:function(){
 541                 js_log("fogg:getProgressTitle f:" + this.fogg_enabled  + ' rw:' + this.form_rewrite);
 542                 //return the parent if we don't have fogg turned on:
 543                 if(! this.fogg_enabled || !this.firefogg_form_action )
 544                         return this.pe_getProgressTitle();
 545                 if( !this.form_rewrite )
 546                   return gM('fogg-transcoding');
 547                 //else return our upload+transcode msg:
 548                 return gM('mwe-upload-transcode-in-progress');
 549         },
 550         doUploadSwitch:function(){
 551                 var _this = this;
 552                 js_log("firefogg: doUploadSwitch:: " + this.fogg_enabled + ' up mode:' +  _this.upload_mode);
 553                 //make sure firefogg is enabled otherwise do parent UploadSwich:
 554                 if( !this.fogg_enabled || !this.firefogg_form_action )
 555                         return _this.pe_doUploadSwitch();
 556
 557                 //check what mode to use firefogg in:
 558                 if( _this.upload_mode == 'post' ){
 559                         _this.doEncode();
 560                 }else if( _this.upload_mode == 'api' ){ //if api mode and chunks supported do chunkUpload
 561                         _this.doChunkUpload();
 562                 }else{
 563                         js_error( 'Error: unrecongized upload mode: ' + _this.upload_mode );
 564                 }
 565         },
 566         //doChunkUpload does both uploading and encoding at the same time and uploads one meg chunks as they are ready
 567         doChunkUpload : function(){
 568                 js_log('firefogg::doChunkUpload');
 569                 var _this = this;
 570                 _this.action_done = false;
 571
 572                 //extension should already be ogg but since its user editable,
 573                 //check again
 574                 //we are transcoding so we know it will be an ogg
 575                 //(should not be done for passthrough mode)
 576                 var sf = _this.formData['filename'];
 577                 var ext = '';
 578                 if(     sf.lastIndexOf('.') != -1){
 579                         ext = sf.substring( sf.lastIndexOf('.') ).toLowerCase();
 580                 }
 581                 if( !_this.encoder_settings['passthrough'] && $j.inArray(ext.substr(1), _this.ogg_extensions) == -1 ){
 582                         var extreg = new RegExp(ext + '$', 'i');
 583                         _this.formData['filename'] = sf.replace(extreg, '.ogg');
 584                 }
 585                 //add chunk response hook to build the resultURL when uploading chunks
 586
 587                 //check for editToken:
 588                 if(!this.etoken){
 589                         js_log('missing token try ' + _this.formData['token']);
 590                         if( _this.formData['token']){
 591                                 _this.etoken = _this.formData['token'];
 592                                 _this.doChunkWithFormData();
 593                         }else{
 594                                 get_mw_token(
 595                                         'File:'+ _this.formData['filename'],
 596                                         _this.api_url,
 597                                         function( eToken ){
 598                                                 if( !eToken || eToken == '+\\' ){
 599                                                         _this.updateProgressWin( gM('fogg-badtoken'), gM('fogg-badtoken') );
 600                                                         return false;
 601                                                 }
 602                                                 _this.etoken = eToken;
 603                                                 _this.doChunkWithFormData();
 604                                         }
 605                                 );
 606                         }
 607                 }else{
 608                         js_log('we already have token: ' + this.etoken);
 609                         _this.doChunkWithFormData();
 610                 }
 611         },
 612         doChunkWithFormData:function(){
 613                 var _this = this;
 614                 js_log("firefogg::doChunkWithFormData"  + _this.etoken);
 615                 //build the api url:
 616                 var aReq ={
 617                         'action': 'upload',
 618                         'format': 'json',
 619                         'filename': _this.formData['filename'],
 620                         'comment': _this.formData['comment'],
 621                         'enablechunks': 'true'
 622                 };
 623
 624                 if( _this.etoken )
 625                         aReq['token'] = this.etoken;
 626
 627                 if( _this.formData['watch'] )
 628                         aReq['watch'] =  _this.formData['watch'];
 629
 630                 if(  _this.formData['ignorewarnings'] )
 631                         aReq['ignorewarnings'] = _this.formData['ignorewarnings'];
 632
 633                 js_log('do fogg upload/encode call: '+ _this.api_url + ' :: ' + JSON.stringify( aReq ) );
 634                 js_log('foggEncode: '+ JSON.stringify( _this.encoder_settings ) );
 635                 _this.fogg.upload( JSON.stringify( _this.encoder_settings ),  _this.api_url ,  JSON.stringify( aReq ) );
 636
 637                 //update upload status:
 638                 _this.doUploadStatus();
 639         },
 640         //doEncode and monitor progress:
 641         doEncode : function(){
 642                 var _this = this;
 643                 _this.action_done = false;
 644                 _this.dispProgressOverlay();
 645                 js_log('doEncode: with: ' +  JSON.stringify( _this.encoder_settings ) );
 646                 _this.fogg.encode( JSON.stringify( _this.encoder_settings ) );
 647
 648                  //show transcode status:
 649                 $j('#up-status-state').html( gM('mwe-upload-transcoded-status') );
 650
 651                 //setup a local function for timed callback:
 652                 var encodingStatus = function() {
 653                         var status = _this.fogg.status();
 654
 655                         if( _this.show_preview == true && _this.fogg.state == 'encoding'){
 656                                 _this.doRenderPreview();
 657                         }
 658
 659                         //update progress bar
 660                         _this.updateProgress( _this.fogg.progress() );
 661
 662                         //loop to get new status if still encoding
 663                         if( _this.fogg.state == 'encoding' ) {
 664                                 setTimeout(encodingStatus, 500);
 665                         }else if ( _this.fogg.state == 'encoding done' ) { //encoding done, state can also be 'encoding failed
 666                                 _this.encodeDone();
 667                         }else if(_this.fogg.state == 'encoding fail'){
 668                                 //@@todo error handling:
 669                                 js_error('encoding failed');
 670                         }
 671                 }
 672                 encodingStatus();
 673         },
 674         encodeDone:function(){
 675                 var _this = this;
 676                 js_log('::encodeDone::');
 677                 _this.action_done = true;
 678                 //send to the post url:
 679                 if( _this.form_rewrite && _this.upload_mode == 'post' ){
 680                         js_log('done with encoding do POST upload:' + _this.editForm.action);
 681                         // ignore warnings & set source type
 682                         //_this.formData[ 'wpIgnoreWarning' ]='true';
 683                         _this.formData[ 'wpSourceType' ] = 'upload';
 684                         _this.formData[ 'action' ]               = 'submit';
 685                         //wpUploadFile is set by firefogg
 686                         delete _this.formData[ 'file' ];
 687
 688                         _this.fogg.post( _this.editForm.action, 'wpUploadFile', JSON.stringify( _this.formData ) );
 689                         //update upload status:
 690                         _this.doUploadStatus();
 691                 }else{
 692                         js_log("done with encoding (no upload) ");
 693                         //set stuats to 100% for one second:
 694                         _this.updateProgress( 1 );
 695                         setTimeout(function(){
 696                                 _this.updateProgressWin(gM('fogg-encoding-done'),
 697                                         gM('fogg-encoding-done') + '<br>' +
 698                                         //show the video at full resolution upto 720px wide
 699                                         '<video controls="true" style="margin:auto" id="fogg_final_vid" src="' +
 700                                                  _this.fogg.previewUrl + '"></video>'
 701                                 );
 702                                 //load the video and set a callback:
 703                                 var v = $j('#fogg_final_vid').get(0);
 704                                 function resizeVid(){
 705                                         var v = $j('#fogg_final_vid').get(0);
 706                                         if( v.videoWidth > 720 ){
 707                                                 var vW = 720;
 708                                                 var vH = 720 * (v.videoHeight/v.videoWidth)
 709                                         }else{
 710                                                 var vW = v.videoWidth;
 711                                                 var vH = v.videoHeight;
 712                                         }
 713                                         //reize the video:
 714                                         $j(v).css({
 715                                                 'width' : vW,
 716                                                 'height': vH
 717                                         });
 718                                         //if large video resize the dialog box:
 719                                         if( vW + 5 > 400){
 720                                                 //also resize the dialog box
 721                                                 $j('#upProgressDialog').dialog('option', 'width', vW + 20);
 722                                                 $j('#upProgressDialog').dialog('option', 'height',      vH + 120);
 723
 724                                                 //also position the dialog container
 725                                                 $j('#upProgressDialog').dialog('option', 'position', 'center');
 726                                         }
 727                                 }
 728                                 v.removeEventListener("loadedmetadata", resizeVid, true);
 729                                 v.addEventListener("loadedmetadata", resizeVid, true);
 730                                 v.load();
 731                         }, 1000);
 732                 }
 733         },
 734         doUploadStatus:function() {
 735                 var _this = this;
 736                 $j( '#up-status-state' ).html( gM('mwe-uploaded-status')  );
 737
 738                 _this.oldResponseText = '';
 739                 //setup a local function for timed callback:
 740                 var uploadStatus = function(){
 741                         //get the response text:
 742                         var response_text =  _this.fogg.responseText;
 743                         if(!response_text){
 744                                    try{
 745                                            var pstatus = JSON.parse( _this.fogg.uploadstatus() );
 746                                            response_text = pstatus["responseText"];
 747                                    }catch(e){
 748                                            js_log("could not parse uploadstatus / could not get responseText");
 749                                    }
 750                         }
 751
 752                         if( _this.oldResponseText != response_text){
 753                                 js_log('new result text:' + response_text + ' state:' + _this.fogg.state);
 754                                 _this.oldResponseText = response_text;
 755                                 //try and parse the response text and check for errors
 756                                 try{
 757                                         var apiResult = JSON.parse( response_text );
 758                                 }catch(e){
 759                                         js_log("could not parse response_text::" + response_text + ' ...for now try with eval...');
 760                                         try{
 761                                                 var apiResult = eval( response_text );
 762                                         }catch(e){
 763                                                 var apiResult = null;
 764                                         }
 765                                 }
 766                                 if(apiResult && _this.apiUpdateErrorCheck( apiResult ) === false){
 767                                         //stop status update we have an error
 768                                         _this.action_done = true;
 769                                         _this.fogg.cancel();
 770                                         return false;
 771                                 }
 772                         }
 773                         if( _this.show_preview == true ){
 774                                 if(  _this.fogg.state == 'encoding' ){
 775                                         _this.doRenderPreview();
 776                                 }
 777                         }
 778
 779                         //update progress bar
 780                         _this.updateProgress( _this.fogg.progress() );
 781
 782                         //loop to get new status if still uploading (could also be encoding if we are in chunk upload mode)
 783                         if( _this.fogg.state == 'encoding' || _this.fogg.state == 'uploading') {
 784                                 setTimeout(uploadStatus, 100);
 785                         }//check upload state
 786                         else if( _this.fogg.state == 'upload done' ||
 787                                                  _this.fogg.state == 'done' ||
 788                                                  _this.fogg.state == 'encoding done' ) {
 789                                    //if in "post" upload mode read the html response (should be depricated):
 790                                    if( _this.upload_mode == 'api' ){
 791                                            if( apiResult && apiResult.resultUrl ){
 792                                                         var buttons ={};
 793                                                         buttons[gM('mwe-go-to-resource')] =  function(){
 794                                                                 window.location = apiResult.resultUrl;
 795                                                         }
 796                                                         var go_to_url_txt = gM('mwe-go-to-resource');
 797                                                         if( typeof _this.done_upload_cb == 'function' ){
 798                                                                 //if done action return 'true'
 799                                                                 if( _this.done_upload_cb( _this.formData ) ){
 800                                                                         //update status
 801                                                                         _this.updateProgressWin( gM('mwe-successfulupload'),  gM( 'mwe-upload_done', apiResult.resultUrl),buttons);
 802                                                                 }else{
 803                                                                         //if done action returns 'false' //close progress window
 804                                                                         this.action_done = true;
 805                                                                 $j('#upProgressDialog').empty().dialog('close');
 806                                                                 }
 807                                                         }else{
 808                                                                 //update status (without done_upload_cb)
 809                                                                 _this.updateProgressWin( gM('mwe-successfulupload'),  gM( 'mwe-upload_done', apiResult.resultUrl),buttons);
 810                                                         }
 811                                            }else{
 812                                                    //done state with error? ..not really possible given how firefogg works
 813                                                    js_log(" Upload done in chunks mode, but no resultUrl!");
 814                                            }
 815                                    }else if( _this.upload_mode == 'post' && _this.api_url ) {
 816                                            _this.procPageResponse( response_text );
 817                                    }
 818                         }else{
 819                                 //upload error:
 820                                 js_log('Error:firefogg upload error: ' + _this.fogg.state );
 821                    }
 822            }
 823            uploadStatus();
 824         },
 825         cancel_action:function( dlElm ){
 826                 if(!this.fogg_enabled){
 827                         return this.pe_cancel_action();
 828                 }
 829                 js_log('firefogg:cancel')
 830                 if( confirm( gM('mwe-cancel-confim') )){
 831                     if(navigator.oscpu && navigator.oscpu.search('Win') >= 0){
 832                          alert( 'sorry we do not yet support cancel on windows' );
 833                     }else{
 834                         this.action_done = true;
 835                         this.fogg.cancel();
 836                         $j(dlElm).empty().dialog('close');
 837                     }
 838                 }
 839                 //dont' follow the link:
 840                 return false;
 841         },
 842         /**
 843         * procPageResponse should be faded out in favor of the upload api soon..
 844         * its all very fragile to read the html output and guess at stuff
 845         */
 846         procPageResponse:function( result_page ){
 847                 var _this = this;
 848                 js_log('f:procPageResponse');
 849                 var sstring = 'var wgTitle = "' + this.formData['filename'].replace('_',' ');
 850
 851                 if(wgArticlePath){
 852                         var result_txt = gM('mwe-upload_done', wgArticlePath.replace(/\$1/, 'File:' + _this.formData['filename'] ) );
 853                 }else{
 854                         result_txt = 'File has uploaded but api "done" URL was provided. Check the log for result page output';
 855                 }
 856
 857                 //set the error text in case we dont' get far along in processing the response
 858                 _this.updateProgressWin( gM('mwe-upload_completed'), result_txt );
 859
 860                 if( result_page && result_page.toLowerCase().indexOf( sstring.toLowerCase() ) != -1){
 861                         js_log( 'upload done got redirect found: ' + sstring + ' r:' + _this.done_upload_cb );
 862                         if( _this.done_upload_cb == 'redirect' ){
 863                                 $j( '#dlbox-centered' ).html( '<h3>Upload Completed:</h3>' + result_txt + '<br>' + form_txt);
 864                                 window.location = wgArticlePath.replace( /\$1/, 'File:' + _this.formData['wpDestFile'] );
 865                         }else{
 866                                 //check if the add_done_action is a callback:
 867                                 if( typeof _this.done_upload_cb == 'function' )
 868                                         _this.done_upload_cb();
 869                         }
 870                 }else{
 871                         //js_log( 'upload page error: did not find: ' +sstring + ' in ' + "\n" + result_page );
 872                         var form_txt = '';
 873                         if( !result_page ){
 874                                 //@@todo fix this:
 875                                 //the mediaWiki upload system does not have an API so we can\'t read errors
 876                         }else{
 877                                 var res = grabWikiFormError( result_page );
 878
 879                                 if(res.error_txt)
 880                                         result_txt = res.error_txt;
 881
 882                                 if(res.form_txt)
 883                                         form_txt = res.form_txt;
 884                         }
 885                         js_log( 'error text is: ' + result_txt );
 886                         $j( '#dlbox-centered' ).html( '<h3>' + gM('mwe-upload_completed') + '</h3>' + result_txt + '<br>' + form_txt);
 887                 }
 888         }
 889 };