* added "preview" for firefogg (lets you get a preview of videos as they are encoded)
authorMichael Dale <dale@users.mediawiki.org>
Thu, 1 Oct 2009 17:05:05 +0000 (17:05 +0000)
committerMichael Dale <dale@users.mediawiki.org>
Thu, 1 Oct 2009 17:05:05 +0000 (17:05 +0000)
* moved remote oggHandler code to remoteMwEmbed.js (no need for it to be in mv_embed.js)
* added class target for button text
* updated global mv_embed config vars

js2/mwEmbed/libAddMedia/mvBaseUploadInterface.js
js2/mwEmbed/libAddMedia/mvFirefogg.js
js2/mwEmbed/mv_embed.js

index a800bd2..89fb94d 100644 (file)
@@ -666,7 +666,7 @@ mvBaseUploadInterface.prototype = {
          var _this = this;
          
          //remove old instance:
-         if($j('#upProgressDialog').length!=0){
+         if($j('#upProgressDialog').length !=0 ){
                 $j('#upProgressDialog').dialog( 'destroy' ).remove();
          }
          //re add it:
@@ -676,6 +676,7 @@ mvBaseUploadInterface.prototype = {
                  title:_this.getProgressTitle(),
                  bgiframe: true,
                  modal: true,
+                 draggable:true,
                  width:400,
                  heigh:200,
                  beforeclose: function(event, ui) {
@@ -688,9 +689,8 @@ mvBaseUploadInterface.prototype = {
                  },
                  buttons: _this.cancel_button()
          });
-         $j('#upProgressDialog').html(
-               //set initial content:
-               '<div id="up-pbar-container" style="width:90%;height:15px;" >' +
+         $j('#upProgressDialog').html(         
+               '<div id="up-pbar-container" style="width:90%;height:15px;" >' +                
                '<div id="up-progressbar" style="height:15px;"></div>' +
                        '<div id="up-status-container">'+
                                '<span id="up-pstatus">0% - </span> ' +
@@ -705,7 +705,6 @@ mvBaseUploadInterface.prototype = {
          $j('#up-progressbar').progressbar({
                  value:0
          });
-
        },
        cancel_button:function(){
           var _this = this;
index 1add3c5..abbd24d 100644 (file)
@@ -15,7 +15,9 @@ loadGM({
        "fogg-passthrough_mode" : "Your selected file is already Ogg or not a video file",
        "fogg-transcoding" : "Encoding video to Ogg",
        "fogg-encoding-done" : "Encoding complete",
-       "fogg-badtoken" : "Token is not valid"
+       "fogg-badtoken" : "Token is not valid",
+       "fogg-preview"  : "Preview Video",
+       "fogg-hidepreview" : "Hide Preview"
 });
 
 var firefogg_install_links =  {
@@ -67,7 +69,10 @@ var default_firefogg_options = {
        'target_passthrough_mode':false,
 
        //if firefogg should take over the form submit action
-       'firefogg_form_action':true
+       'firefogg_form_action':true,
+       
+       //if we should show a preview of encoding progress 
+       'show_preview':false,
 }
 
 
@@ -306,6 +311,103 @@ mvFirefogg.prototype = { //extends mvBaseUploadInterface
                //update the bindings:
                this.doControlBindings();
        },
+       //do firefogg specific additions: 
+       dispProgressOverlay:function(){
+               this.pe_dispProgressOverlay();
+               this.doPreviewControl();                
+       },
+       doPreviewControl:function(){
+               var _this = this;
+               //prepend preview collapable                            
+               $j('#upProgressDialog').append(         
+                       '<div style="clear:both;height:3em"/>'+                                                 
+                       $j.btnHtml(gM('fogg-preview'), 'fogg_preview', 'triangle-1-e') + 
+                       '<div style="padding:10px;">' +                                 
+                               '<canvas style="margin:auto;" id="fogg_preview_canvas" />' +
+                       '</div>'
+               );
+               //set initial state
+               if( _this.show_preview == true){
+                       $j('#fogg_preview_canvas').show();
+               }else{
+                       $j('#fogg_preview_canvas').hide();
+               }
+               //apply preview binding:
+               $j('#upProgressDialog .fogg_preview').btnBind().click( function(){
+                       js_log("click .foog_preview" + $j(this).children('.ui-icon').attr('class') );
+                       //check state: 
+                       if( $j(this).children('.ui-icon').hasClass('ui-icon-triangle-1-e') ){
+                               _this.show_preview = true;                      
+                               //update icon:
+                               $j(this).children('.ui-icon')
+                                       .removeClass('ui-icon-triangle-1-e')
+                                       .addClass('ui-icon-triangle-1-s'); 
+                               //update text
+                               $j(this).children('.btnText').text( gM('fogg-hidepreview') );
+                                
+                               //show preview window                   
+                               $j('#fogg_preview_canvas').show('fast');
+                       }else{                                  
+                               _this.show_preview = false;                                             
+                               //update icon:
+                               $j(this).children('.ui-icon')
+                                       .removeClass('ui-icon-triangle-1-s')
+                                       .addClass('ui-icon-triangle-1-e');                                                                      
+                               //update text:
+                               $j(this).children('.btnText').text( gM('fogg-preview') );                               
+                               
+                               $j('#fogg_preview_canvas').hide('slow');
+                       }
+               });
+       }, 
+       doRenderPreview:function(){
+               var _this = this;               
+               //set up the hidden video to pull frames from: 
+               if( $j('#fogg_preview_vid').length == 0 )
+                       $j('body').append('<video id="fogg_preview_vid" style="display:none"></video>');        
+               var v = $j('#fogg_preview_vid').get(0);         
+                                       
+               
+               function seekToEnd(){                   
+                   var v = $j('#fogg_preview_vid').get(0);                     
+                   v.currentTime = v.duration-0.4;             
+               }
+               function getFrame() {
+                       var v = $j('#fogg_preview_vid').get(0);
+                       var canvas = $j('#fogg_preview_canvas').get(0);
+                       canvas.width = 160;
+                       canvas.height = canvas.width * v.videoHeight/v.videoWidth;
+                       var ctx = canvas.getContext("2d");
+                       ctx.drawImage(v, 0, 0, canvas.width, canvas.height);
+               }               
+               var previewI=null;
+               function preview() {                            
+                       //initialize the video if not setup already:
+                       var v = $j('#fogg_preview_vid').get(0);                                         
+                       if( v.src != _this.fogg.previewUrl ){           
+                               js_log('init preview with url:' + _this.fogg.previewUrl);               
+                               v.src = _this.fogg.previewUrl;
+                               
+                               //set the video to seek to the end of the video
+                               v.removeEventListener("loadedmetadata", seekToEnd, true);
+                               v.addEventListener("loadedmetadata", seekToEnd, true);
+                               
+                               //render a frame once seek is complete: 
+                               v.removeEventListener("seeked", getFrame, true);
+                               v.addEventListener("seeked", getFrame, true);
+                               
+                               //refresh the video duration/meta:
+                               clearInterval(previewI);
+                               var previewI = setInterval(function(){
+                                       if (_this.fogg.status() != "encoding"){
+                                               clearInterval(previewI);
+                                       }                                       
+                                       v.load();
+                               }, 1000);                        
+                       } 
+               }               
+               preview();      
+       },
        getEditForm:function(){
                if( this.target_edit_from )
                        return this.pe_getEditForm();
@@ -530,7 +632,6 @@ mvFirefogg.prototype = { //extends mvBaseUploadInterface
                js_log('doEncode: with: ' +  JSON.stringify( _this.encoder_settings ) );
                _this.fogg.encode( JSON.stringify( _this.encoder_settings ) );
 
-
                 //show transcode status:
                $j('#up-status-state').html( gM('mwe-upload-transcoded-status') );
 
@@ -538,6 +639,10 @@ mvFirefogg.prototype = { //extends mvBaseUploadInterface
                var encodingStatus = function() {
                        var status = _this.fogg.status();
 
+                       if( _this.show_preview == true ){
+                               _this.doRenderPreview();
+                       }
+
                        //update progress bar
                        _this.updateProgress( _this.fogg.progress() );
 
@@ -618,6 +723,12 @@ mvFirefogg.prototype = { //extends mvBaseUploadInterface
                                        return false;
                                }
                        }
+                       if( _this.show_preview == true ){
+                               if(  _this.fogg.state == 'encoding' ){
+                                       _this.doRenderPreview();
+                               }
+                       }
+                       
                        //update progress bar
                        _this.updateProgress( _this.fogg.progress() );
 
index 9863d68..7b56464 100644 (file)
@@ -26,14 +26,14 @@ var MV_EMBED_VERSION = '1.0r19';
  * Configuration variables should be set by extending mwConfigOptions
  * here is the default config: 
  */
-var mwConfig = {
+var mwDefaultConfig = {
        'skin_name': 'mvpcf',
        'jui_skin': 'redmond',
        'video_size':'400x300'
 }
 
-if( !mwConfigOptions )
-       var mwConfigOptions = {};
+if( !mwConfig )
+       var mwConfig = {};
 
 // Install the default config values for anything not set in mwConfig
 
@@ -154,7 +154,7 @@ function lcCssPath( cssSet ) {
  * this once for PHP & JavaScript)
  *
  * This is more verbose than the earlier version that compressed paths
- * but it's all good, gzipping helps compress repetetive path strings
+ * but it's all good, gzipping helps compress path strings
  * grouped by directory.
  *
  * Right now the PHP AutoLoader only reads this mv_embed.js file.
@@ -175,8 +175,8 @@ lcPaths({
        "$j.fn.simpleUploadForm": "libAddMedia/simpleUploadForm.js",
 
        "ctrlBuilder"   : "skins/ctrlBuilder.js",
-       "kskin"                 : "skins/kskin/kskin.js",
-       "mvpcf"                 : "skins/mvpcf/mvpcf.js",
+       "kskinConfig"   : "skins/kskin/kskin.js",
+       "mvpcfConfig"   : "skins/mvpcf/mvpcf.js",
 
        "$j.secureEvalJSON"     : "jquery/plugins/jquery.secureEvalJSON.js",
        "$j.cookie"                     : "jquery/plugins/jquery.cookie.js",
@@ -237,7 +237,6 @@ lcPaths({
        "mvTimedEffectsEdit": "libSequencer/mvTimedEffectsEdit.js",
 
        "mvTextInterface"       : "libTimedText/mvTextInterface.js"
-
 });
 
 // Dependency mapping for CSS files for self-contained included plugins:
@@ -559,13 +558,16 @@ var mvJsLoader = {
                                _global['$j'] = jQuery.noConflict();
                                
                                //setup our global settings using the (jQuery helper) 
-                               $j.extend( mwConfig, mwConfigOptions);
+                               mwConfig = $j.extend( mwDefaultConfig, mwConfig);                                                               
                                
                                // Set up the skin path
                                _global['mv_jquery_skin_path'] = mv_embed_path + 'jquery/jquery.ui/themes/' +mwConfig['jui_skin'] + '/';
                                _global['mv_skin_img_path'] = mv_embed_path + 'skins/' + mwConfig['skin_name'] + '/images/';
                                _global['mv_default_thumb_url'] = mv_skin_img_path + 'vid_default_thumb.jpg';
                                
+                               //setup skin dependent dependencies 
+                               lcCssPath({'embedVideo'         : 'skins/' + mwConfig['skin_name'] + '/playerSkin.css'});                               
+                               
                                // Make sure the skin/style sheets are always available:
                                loadExternalCss( mv_jquery_skin_path + 'jquery-ui-1.7.1.custom.css' );
                                loadExternalCss( mv_embed_path + 'skins/' + mwConfig['skin_name'] + '/styles.css' );
@@ -577,7 +579,7 @@ var mvJsLoader = {
                                });
                                
                                js_log( 'jQuery loaded into $j' );
-                               // Set up mvEmbed jQuery bindings:
+                               // Set up mvEmbed jQuery bindings and config based dependencies
                                mv_jqueryBindings();
                        }
                        // Run the callback
@@ -591,19 +593,24 @@ var mvJsLoader = {
                js_log( 'embedVideoCheck:' );           
                // Make sure we have jQuery
                _this.jQueryCheck( function() {
+                       //set class videonojs to hidden
                        $j('.videonojs').html( gM('mwe-loading_txt') );
-                       //Set up the embed video player class request: 
+                       //Set up the embed video player class request: (include the skin js as well)  
                        var depReq = [
                                [
                                        '$j.ui',
                                        'embedVideo',
                                        'ctrlBuilder',
-                                       '$j.cookie'
+                                       '$j.cookie'                                     
                                ],
                                [
                                        '$j.ui.slider'
                                ]
-                       ];
+                       ];                                      
+                       //add skin if set: 
+                       if( mwConfig['skin_name'] )
+                               depReq[0].push( mwConfig['skin_name'] + 'Config' );
+                       
                        // Add PNG fix if needed:
                        if( $j.browser.msie || $j.browser.version < 7 )
                                depReq[0].push( '$j.fn.pngFix' );
@@ -708,63 +715,11 @@ var mwAddOnloadHook = js2AddOnloadHook;
  */
 function rewrite_by_id( vid_id, ready_callback ) {
        js_log( 'f:rewrite_by_id: ' + vid_id );
-       // Force a recheck of the DOM for playlist or video elements:
+       // Force a re-check of the DOM for playlist or video elements:
        mvJsLoader.embedVideoCheck( function() {
                mv_video_embed( ready_callback, vid_id );
        });
 }
-// Deprecated in favor of updates to OggHandler
-function rewrite_for_OggHandler( vidIdList ){
-       for( var i = 0; i < vidIdList.length; i++ ) {
-               var vidId = vidIdList[i];
-               js_log( 'looking at vid: ' + i +' ' + vidId );
-               // Grab the thumbnail and src of the video
-               var pimg = $j( '#' + vidId + ' img' );
-               var poster_attr = 'poster = "' + pimg.attr( 'src' ) + '" ';
-               var pwidth = pimg.attr( 'width' );
-               var pheight = pimg.attr( 'height' );
-
-               var type_attr = '';
-               // Check for audio
-               if( pwidth == '22' && pheight == '22' ) {
-                       pwidth = '400';
-                       pheight = '300';
-                       type_attr = 'type="audio/ogg"';
-                       poster_attr = '';
-               }
-
-               // Parsed values:
-               var src = '';
-               var duration = '';
-
-               var re = new RegExp( /videoUrl(&quot;:?\s*)*([^&]*)/ );
-               src = re.exec( $j( '#'+vidId).html() )[2];
-
-               var re = new RegExp( /length(&quot;:?\s*)*([^&]*)/ );
-               duration = re.exec( $j( '#'+vidId).html() )[2];
-
-               var re = new RegExp( /offset(&quot;:?\s*)*([^&]*)/ );
-               offset = re.exec( $j( '#'+vidId).html() )[2];
-               var offset_attr = offset ? 'startOffset="' + offset + '"' : '';
-
-               if( src ) {
-                       // Replace the top div with the mv_embed based player:
-                       var vid_html = '<video id="vid_' + i +'" '+
-                                       'src="' + src + '" ' +
-                                       poster_attr + ' ' +
-                                       type_attr + ' ' +
-                                       offset_attr + ' ' +
-                                       'duration="' + duration + '" ' +
-                                       'style="width:' + pwidth + 'px;height:' +
-                                               pheight + 'px;"></video>';
-                       //js_log("Video HTML: " + vid_html);
-                       $j( '#'+vidId ).html( vid_html );
-               }
-
-               // Rewrite that video ID:
-               rewrite_by_id( 'vid_' + i );
-       }
-}
 
 
 /*********** INITIALIZATION CODE *************
@@ -922,7 +877,8 @@ function mv_jqueryBindings() {
                                ],
                                [
                                        '$j.ui.progressbar',
-                                       '$j.ui.dialog'
+                                       '$j.ui.dialog',
+                                       '$j.ui.draggable'
                                ]
                        ];
                        if( iObj.encoder_interface ) {
@@ -1001,12 +957,12 @@ function mv_jqueryBindings() {
                        return '<a href="' + href + '" ' + target_attr + style_attr + 
                                ' class="ui-state-default ui-corner-all ui-icon_link ' +
                                className + '"><span class="ui-icon ui-icon-' + iconId + '" />' +
-                               msg + '</a>';
+                               '<span class="btnText">'+ msg +'<span></a>';
                }
                // Shortcut to bind hover state
-               $.fn.btnBind = function() {
+               $.fn.btnBind = function() {             
                        $j( this ).hover(
-                               function() {
+                               function() {                                    
                                        $j( this ).addClass( 'ui-state-hover' );
                                },
                                function() {