* Sequencer render updates
authorMichael Dale <dale@users.mediawiki.org>
Thu, 23 Jul 2009 02:09:56 +0000 (02:09 +0000)
committerMichael Dale <dale@users.mediawiki.org>
Thu, 23 Jul 2009 02:09:56 +0000 (02:09 +0000)
** created class/file mvFirefoggRender.js

js2/mwEmbed/example_usage/SequencerPlayer_Render.html [new file with mode: 0644]
js2/mwEmbed/example_usage/SequencerPlayer_Seeking.html [deleted file]
js2/mwEmbed/libAddMedia/mvFirefogg.js
js2/mwEmbed/libEmbedVideo/embedVideo.js
js2/mwEmbed/libEmbedVideo/nativeEmbed.js
js2/mwEmbed/libSequencer/mvFirefoggRender.js [new file with mode: 0644]
js2/mwEmbed/libSequencer/mvPlayList.js
js2/mwEmbed/mv_embed.js
js2/mwEmbed/php/jsAutoloadLocalClasses.php

diff --git a/js2/mwEmbed/example_usage/SequencerPlayer_Render.html b/js2/mwEmbed/example_usage/SequencerPlayer_Render.html
new file mode 100644 (file)
index 0000000..96b96c8
--- /dev/null
@@ -0,0 +1,64 @@
+<!doctype html>
+<html>
+<head>
+    <title>mv_embed Seeking Example</title>
+         <script type="text/javascript" src="../mv_embed.js?debug=true"></script>      
+  <style>
+    #render_box {
+      position:absolute;
+      width:400px;
+      height:300px;
+    }    
+
+  </style>
+  <script>  
+mwAddOnloadHook(function(){
+
+       $j('#render_player').firefoggRender({
+               'render_options':{
+                       "framerate" : 30 
+               },
+               'target_startRender':'#buttonStart',
+               'target_stopRender': '#buttonStop',
+               'target_timeStatus': '#time_status'
+               
+       },function( foggRender ){
+               $j('#loading_text').hide();
+               if( foggRender.enabled ){
+                       $j('#info_control').show();
+               }else{
+                       $j('#info_control').html( 
+                               foggRender.myFogg.getTargetHtml('target_please_install')
+                       );
+                       if(!($j.browser.mozilla && $j.browser.version >= '1.9.1')) {
+                               $j('#info_control').html(
+                                       foggRender.myFogg.getTargetHtml('target_use_latest_fox')
+                               );                                      
+                       }
+               }
+       });
+       
+});
+  </script>
+</head>
+<body>
+   <!--
+<playlist id="render_player" src="media/sample_smil.xml" controls="false" width="400" height="300"></playlist>
+-->
+ <video id="render_player" src="media/sample_fish.ogg" style="width:400px;height:300px" controls="false"
+ poster="media/sample_fish.jpg"></video>
+
+
+<span id="loading_text" style="position:absolute; top:320px;">
+loading render system <blink>...</blink>
+</span>
+<div id="info_control" style="display:none;">
+       <button id="buttonStart">Do Render</button>
+       <button id="buttonStop">Stop</button>
+       Current Time: <input type="text" id="time_status" value="0.0" />
+       <span id="status"></span><br>
+</div>
+
+</body>
+</html>
+
diff --git a/js2/mwEmbed/example_usage/SequencerPlayer_Seeking.html b/js2/mwEmbed/example_usage/SequencerPlayer_Seeking.html
deleted file mode 100644 (file)
index a420fb6..0000000
+++ /dev/null
@@ -1,78 +0,0 @@
-<!doctype html>
-<html>
-<head>
-    <title>mv_embed Seeking Example</title>
-         <script type="text/javascript" src="../mv_embed.js?debug=true"></script>      
-  <style>
-    #render_box {
-      position:absolute;
-      width:400px;
-      height:300px;
-    }
-    #frame_overlay {
-      position:absolute;
-      width:400px;
-      height:300px;
-      top: 28px;
-      left: 9px;
-    }
-
-  </style>
-  <script>
-var pos = 0;
-var duration = 2;
-var step = 0.04;
-var render = false;
-
-function renderNext() {
-  $j('#pos').val(pos);
-  document.getElementById('render_box').setCurrentTime(pos, function(currentTime) {
-      return function() {
-        //ogg.addFrame('frame_overlay');
-        pos += step;
-        if(render && pos <= duration)
-          renderNext();
-      };
-  }(pos));
-}
-
-function startRender() {
-  //ogg = new Firefogg();
-  //ogg.initRender('{"videoQuality": 10, "framerate": 25, "width": 400, "height": 300}', 'sample_smil.ogv');
-  $j("#buttonStart").attr("disabled", true); 
-  if(!render) {
-      //document.getElementById('render_box').play();
-      //document.getElementById('render_box').pause();
-      setTimeout(function() {
-        //duration = document.getElementById('render_box').getDuration();
-        render = true;
-        pos = 0;
-        renderNext();
-      }, 1000);
-  }
-}
-function stopRender() {
-  render = false;
-  $j("#buttonStart").attr("disabled", false); 
-  $j("#buttonSop").attr("disabled", true); 
-}
-function seek() {
-  var seekTo = $j('#pos').val();
-  document.getElementById('render_box').setCurrentTime(seekTo, function() { js_log('seeked'); });
-}
-  </script>
-</head>
-<body>
-<playlist id="render_box" src="media/sample_smil.xml" controls="false"></playlist>
-<div id="frame_overlay"></div>
-
-<div id="info" style="position: absolute; top:360px">
-    <button onclick="startRender()" id="buttonStart">Start</button>
-    <button onclick="stopRender()" id="buttonStart">Stop</button>
-    position: <input type="text" id="pos" value="6.6" />
-    <button onclick="seek()">seek</button>
-    <span id="status"></span><br>
-</div>
-</body>
-</html>
-
index f1c019c..2c56d9b 100644 (file)
@@ -23,11 +23,19 @@ var firefogg_install_links =  {
 };
 
 var default_firefogg_options = {
+       //what to do when finished uploading
        'upload_done_action':'redirect',
+       //if firefoog is enabled
        'fogg_enabled':false,
+       //the api url to upload to
        'api_url':null,
+       //the passthrough flag (enables un-modified uploads)
        'passthrough': false,
+       //if we will be showing the encoder interface
        'encoder_interface': false,
+       //if we want to limit the library functionality to "only firefoog" (no upload or progress bars) 
+       'only_fogg': false,
+       
        
        //callbacks:
        'new_source_cb': false, //called on source name update passes along source name
@@ -63,7 +71,7 @@ var mvFirefogg = function(iObj){
 }
 mvFirefogg.prototype = { //extends mvBaseUploadInterface
 
-       min_firefogg_version : '0.9.8', 
+       min_firefogg_version : '0.9.9', 
        fogg_enabled : false,            //if firefogg is enabled or not.        
        encoder_settings:{                      //@@todo allow server to set this 
                'maxSize': 400, 
@@ -92,21 +100,23 @@ mvFirefogg.prototype = { //extends mvBaseUploadInterface
                                this[i] = default_firefogg_options[i];
                        }
                }
-               
-               var myBUI = new mvBaseUploadInterface( iObj );
-               //standard extends code: 
-               for(var i in myBUI){                    
-                       if(this[i]){
-                               this['pe_'+ i] = myBUI[i];
-                       }else{
-                               this[i] =  myBUI[i];
+               //check if we want to limit the usage:
+               if(!this.only_fogg){
+                       var myBUI = new mvBaseUploadInterface( iObj );
+                       
+                       //standard extends code: 
+                       for(var i in myBUI){                    
+                               if(this[i]){
+                                       this['pe_'+ i] = myBUI[i];
+                               }else{
+                                       this[i] =  myBUI[i];
+                               }
                        }
                }
-               if(!this.selector){
-                       js_log('Error: firefogg: missing selector ');
-               }
-               //if detect 
                
+               if(!this.selector){
+                       js_log('firefogg: missing selector ');
+               }               
        },
        doRewrite:function( callback ){
                var _this = this;
@@ -222,10 +232,10 @@ mvFirefogg.prototype = { //extends mvBaseUploadInterface
                });
        },
        firefoggCheck:function(){                                  
-               if(typeof(Firefogg) != 'undefined' && Firefogg().version >= '0.9.9'){                                           
-                  this.fogg = new Firefogg();  
-                  this.fogg_enabled = true;
-                  return true;
+               if(typeof(Firefogg) != 'undefined' && Firefogg().version >= this.min_firefogg_version){                                         
+                       this.fogg = new Firefogg();     
+                       this.fogg_enabled = true;
+                       return true;
                }else{                                                          
                        return false;
                }
index 2c82944..bf531b1 100644 (file)
@@ -454,7 +454,7 @@ var ctrlBuilder = {
                        function(){                     
                                $j('#vol_container_' + embedObj.id).addClass('vol_container_top');
                                //set to "below" if playing and embedType != native
-                               if(embedObj.isPlaying() && !embedObj.supports['overlays']){
+                               if(embedObj && embedObj.isPlaying() && !embedObj.supports['overlays']){
                                        $j('#vol_container_' + embedObj.id).removeClass('vol_container_top').addClass('vol_container_below');
                                }
                                
@@ -1364,7 +1364,14 @@ embedVideo.prototype = {
                }               
                //do play in 100ms (give things time to clear) 
                setTimeout('$j(\'#' + this.id + '\').get(0).play()',100);
-       },      
+       },
+       /*
+        * seeks to the requested time and issues a callback when ready 
+        * (should be overwitten by client that supports frame serving)
+        */     
+       setCurrentTime:function( time, callback){
+               js_log('error: base embed setCurrentTime can not frame serve (overide via plugin)');
+       },
        addPresTimeOffset:function(){
           //add in the offset:         
           if(this.seek_time_sec && this.seek_time_sec!=0){
@@ -1808,7 +1815,7 @@ embedVideo.prototype = {
                        '<img width="'+this.playerPixelWidth()+'" height="'+this.playerPixelHeight()+'" style="position:relative;width:'+this.playerPixelWidth()+';height:'+this.playerPixelHeight()+'"' +
                        ' id="img_thumb_'+this.id+'" src="' + this.thumbnail + '">';
                
-               if(this.play_button==true)
+               if(this.play_button == true && this.controls == true)
                          thumb_html+=this.getPlayButton();
                          
                   thumb_html+='</div>';
@@ -2370,11 +2377,12 @@ embedVideo.prototype = {
                //do head request if on the same domain
                return this.media_element.selected_source.URLTimeEncoding;
        },
-       setSliderValue: function(perc, hide_progress){          
-               var this_id = (this.pc)?this.pc.pp.id:this.id;
-               var val = parseInt( perc*1000 ); 
-               $j('#mv_play_head_'+this_id).slider('value', val);
-               
+       setSliderValue: function(perc, hide_progress){
+               if(this.controls){              
+                       var this_id = (this.pc)?this.pc.pp.id:this.id;
+                       var val = parseInt( perc*1000 ); 
+                       $j('#mv_play_head_'+this_id).slider('value', val);
+               }
                //js_log('set#mv_seeker_slider_'+this_id + ' perc in: ' + perc + ' * ' + $j('#mv_seeker_'+this_id).width() + ' = set to: '+ val + ' - '+ Math.round(this.mv_seeker_width*perc) );
                //js_log('op:' + offset_perc + ' *('+perc+' * ' + $j('#slider_'+id).width() + ')');
        },
@@ -2746,7 +2754,7 @@ var embedTypes = {
                                        if (dummyvid.canPlayType && dummyvid.canPlayType("video/ogg;codecs=\"theora,vorbis\"") == "probably")
                                        {
                                                this.players.addPlayer( videoElementPlayer );
-                                       } else if(this.supportedMimeType('video/ogg')) {
+                                       } else if(this.supportedMimeType( 'video/ogg' )) {
                                                /* older versions of safari do not support canPlayType,
                                                   but xiph qt registers mimetype via quicktime plugin */
                                                this.players.addPlayer( videoElementPlayer );
index f8adb18..c547dd8 100644 (file)
@@ -120,21 +120,26 @@ var nativeEmbed = {
        setCurrentTime: function(pos, callback){
                var _this = this;
                this.getVID();
-               if(!this.vid) {
-                       js_log('native:setCurrentTime: load video');
+               if(!this.vid) {                 
                        this.load();
                        var loaded = function(event) {
                                js_log('native:setCurrentTime (after load): ' + pos + ' :  dur: ' + this.getDuration());
                                _this.vid.currentTime = pos;
-                               var once = function(event) { callback(); _this.vid.removeEventListener('seeked', once, false) };
+                               var once = function(event) { 
+                                       callback();
+                                       _this.vid.removeEventListener('seeked', once, false) 
+                               };
                                _this.vid.addEventListener('seeked', once, false);
                                _this.removeEventListener('loadedmetadata', loaded, false);
                        };
                        _this.addEventListener('loadedmetadata', loaded, false);
                } else {
-                       js_log('native:setCurrentTime: ' + pos + ' : '  + this.supportsURLTimeEncoding() + ' dur: ' + this.getDuration() + ' sts:' + this.seek_time_sec );
+                       //js_log('native:setCurrentTime: ' + pos + ' : '  + this.supportsURLTimeEncoding() + ' dur: ' + this.getDuration() + ' sts:' + this.seek_time_sec );
                        _this.vid.currentTime = pos;
-                       var once = function(event) { callback(); _this.vid.removeEventListener('seeked', once, false) };
+                       var once = function(event) { 
+                               callback(); 
+                               _this.vid.removeEventListener('seeked', once, false) 
+                       };
                        _this.vid.addEventListener('seeked', once, false);
                }
        },
@@ -169,7 +174,7 @@ var nativeEmbed = {
         * native callbacks for the video tag: 
         */
        oncanplaythrough : function(){          
-               js_log('f:oncanplaythrough');
+               //js_log('f:oncanplaythrough');
                this.getVID();
                if( ! this.paused )
                        this.vid.play();
@@ -238,6 +243,10 @@ var nativeEmbed = {
                if(this.vid)
                        return this.vid.volume;                    
        },      
+       getNativeDuration:function(){
+               if(this.vid)
+                       return this.vid.duration;
+       },
        load:function(){
                this.getVID();
                if( !this.vid ){
diff --git a/js2/mwEmbed/libSequencer/mvFirefoggRender.js b/js2/mwEmbed/libSequencer/mvFirefoggRender.js
new file mode 100644 (file)
index 0000000..2f5fd2d
--- /dev/null
@@ -0,0 +1,146 @@
+/*
+ * hanndles driving the firefogg render system 
+*/
+
+var mvFirefoggRender = function( iObj ) {              
+       return this.init( iObj );
+};
+var default_render_options = {
+       "videoQuality" : 10, 
+       "framerate"     : 30, 
+       "width"         : 400, 
+       "height"        : 300
+}
+var default_FirefoggRender_options = {
+       start_time:0,
+       //if we should save to disk (if false setup upload stuff below) 
+       save_to_disk:true
+}
+//set up the mvPlaylist object
+mvFirefoggRender.prototype = {
+       //default empty render options: 
+       renderOptions: {},              
+       continue_rendering:false,
+       init:function( iObj ){
+               var _this = this;                               
+               
+               //grab the mvFirefogg object to do basic tests
+               this.myFogg = new mvFirefogg({
+                       'only_fogg':true
+               });
+               
+               //check for firefogg:
+               if( this.myFogg.firefoggCheck() ){
+                       this.enabled = true;
+               }else{
+                       this.enabled = false;
+                       return this;
+               }
+               
+               //set up local fogg pointer: 
+               this.fogg = this.myFogg.fogg;
+               
+               //setup player instance
+               this.player = $j(iObj.player_target).get(0);            
+               this.player_target = iObj.player_target;
+               
+               //setup the render options (with defaults) 
+               for(var i in default_render_options){
+                       if( iObj['render_options'][i] ){
+                               this.renderOptions[ i ] = iObj['render_options'][i];
+                       }else{
+                               this.renderOptions[ i ] = default_render_options[i];
+                       }
+               }
+               //setup the application options (with defaults) 
+               for(var i in default_FirefoggRender_options ){
+                       if( iObj[ i ] ){
+                               this[ i ] = iObj[ i ];
+                       }else{
+                               this[ i ] = default_FirefoggRender_options[i];
+                       }
+               }
+               //set up targets and local vars
+               
+               if( iObj.target_startRender ){
+                       $j(iObj.target_startRender).click(function(){
+                               js_log("Start render");
+                               _this.startRender();
+                       })
+                       this.target_startRender = iObj.target_startRender;
+               }
+               if( iObj.target_stopRender ){
+                       $j(iObj.target_stopRender).click(function(){
+                               _this.stopRender();
+                       })
+                       this.target_stopRender = iObj.target_stopRender;
+               }
+               if( iObj.target_timeStatus ){
+                       this.target_timeStatus = iObj.target_timeStatus;
+               }
+       },
+       startRender:function(){
+               var _this = this;       
+               var t = this.start_time;
+               //get the interval from renderOptions framerate
+               var interval =  1 / this.renderOptions.framerate
+               
+               //issue a load request on the player:
+               this.player.load();
+               
+               //init the Render
+               this.fogg.initRender(  JSON.stringify( _this.renderOptions ), 'foggRender' );
+               
+               //add audio if we had any:
+               
+               //request a target (should support rendering to temp location too) 
+               this.fogg.saveVideoAs();
+               
+               //set the continue rendering flag to true:
+               this.continue_rendering = true;
+               
+               //internal function to hanndle updates:                         
+               var doNextFrame = function(){                   
+                       $j(_this.target_timeStatus).val( " on " + (Math.round(t*10)/10) + " of "+
+                               (Math.round( _this.player.getDuration() * 10) / 10 ) );
+                       _this.player.setCurrentTime(t, function(){
+                               _this.fogg.addFrame( $j(_this.player_target).attr('id') );
+                               t += interval;
+                               if(t >= _this.player.getDuration() ){
+                                       _this.doFinalRender();                                                          
+                               }else{                          
+                                       if(_this.continue_rendering){
+                                               doNextFrame();
+                                       }else{
+                                               //else quit:
+                                               _this.doFinalRender();
+                                       }
+                               }
+                       });
+               }
+               doNextFrame();
+       },
+       stopRender:function(){
+               this.continue_rendering=false;
+       },      
+       doFinalRender:function(){               
+               $j(this.target_timeStatus).val("doing final render");
+               this.fogg.render();     
+               this.updateStatus();
+       },
+       updateStatus:function(){
+               var _this = this;               
+               var doUpdateStatus = function(){
+                       var rstatus = _this.fogg.renderstatus()
+                   $j(_this.target_timeStatus).val(rstatus);
+                   if(rstatus != 'done' && rstatus != 'rendering failed') {
+                       setTimeout(doUpdateStatus, 100);
+                   } else {
+                       $j(_this.target_startRender).attr("disabled", false); 
+                   }
+               }
+               doUpdateStatus();
+       }
+
+       
+}
\ No newline at end of file
index a140927..4c1d8fc 100644 (file)
@@ -519,10 +519,12 @@ mvPlayList.prototype = {
                $j('#mv_time_'+this.id).html( value );
        },
        setSliderValue:function(value){
-               if(this.cur_clip.embed){
-               //js_log('calling original embed slider with val: '+value);
-               this.cur_clip.embed.pe_setSliderValue( value );
-               //call seq playline update here
+               if( this.controls ){
+                       if(this.cur_clip.embed){
+                               //js_log('calling original embed slider with val: '+value);
+                               this.cur_clip.embed.pe_setSliderValue( value );
+                               //call seq playline update here
+                       }
                }
        },      
        getPlayHeadPos: function(prec_done){
@@ -718,7 +720,13 @@ mvPlayList.prototype = {
                }               
                //start up the playlist monitor 
                this.monitor();         
-       },      
+       },
+       /*
+        * the load function loads all the clips in order 
+        */     
+       load:function(){
+               //do nothing right now)
+       },
        toggleMute:function(){
                this.cur_clip.embed.toggleMute();
        },      
@@ -828,10 +836,12 @@ mvPlayList.prototype = {
                                if (_this.cur_clip.id != clip.id) {
                                        _this.updateCurrentClip( clip );
                                }                                                               
-                               _this.cur_clip.embed.setCurrentTime(clipTime, callback);
+                               _this.cur_clip.embed.setCurrentTime(clipTime, function(){                                       
+                                       if(callback)
+                                               callback();     
+                               });                                                                                     
                                _this.currentTime = pos;
-                               _this.doSmilActions();                          
-                               return '';
+                               _this.doSmilActions();
                        }
                        currentOffset += nextTime;
                }
index c770e31..159eaab 100644 (file)
@@ -225,6 +225,7 @@ lcPaths( 'libEmbedVideo/', [
 lcPaths( 'libSequencer/', [
        'mvPlayList',
        'mvSequencer',
+       'mvFirefoggRender',
        'mvTimedEffectsEdit'
 ])
 //libTimedText:
@@ -894,6 +895,29 @@ function mv_jqueryBindings(){
                                        }
                        });             
                }
+               //takes a input player as the selector and exposes basic rendering controls
+               $.fn.firefoggRender = function( iObj, callback ){                       
+                       //check if we already have render loaded then just pass on updates/actions 
+                       var sElm = $j(this.selector).get(0);
+                       if(sElm['fogg_render']){
+                               if(sElm['fogg_render']=='loading'){
+                                       js_log("Error: called firefoggRender while loading");
+                                       return false;
+                               }
+                               //call or update the property: 
+                       }
+                       sElm['fogg_render']='loading';
+                       //add the selector: 
+                       iObj['player_target'] = this.selector;                  
+                       mvJsLoader.doLoad([
+                               'mvFirefogg',
+                               'mvFirefoggRender'
+                       ],function(){           
+                               sElm['fogg_render']= new mvFirefoggRender( iObj );
+                               if( callback && typeof callback == 'function' )
+                                       callback( sElm['fogg_render'] );
+                       });
+               }
                
                $.fn.baseUploadInterface = function(iObj){
                        mvJsLoader.doLoad([
@@ -969,7 +993,7 @@ function getURLParamReplace( url, opt ){
  */
 function seconds2npt(sec, show_ms){
        if( isNaN( sec ) ){
-               js_log("warning: trying to get npt time on NaN:" + sec);
+               //js_log("warning: trying to get npt time on NaN:" + sec);
                return '0:0:0';
        }               
        var hours = Math.floor(sec/ 3600);
index a2c5736..4af4294 100644 (file)
@@ -84,6 +84,7 @@ $wgJSAutoloadLocalClasses['vlcEmbed']                         = $wgMwEmbedDirectory . 'libEmbedVideo/
 $wgJSAutoloadLocalClasses['mvPlayList']                = $wgMwEmbedDirectory . 'libSequencer/mvPlayList.js';
 $wgJSAutoloadLocalClasses['mvSequencer']               = $wgMwEmbedDirectory . 'libSequencer/mvSequencer.js';
 $wgJSAutoloadLocalClasses['mvSequencer']               = $wgMwEmbedDirectory . 'libSequencer/mvSequencer.js';
+$wgJSAutoloadLocalClasses['mvFirefoggRender']  = $wgMwEmbedDirectory . 'libSequencer/mvFirefoggRender.js';
 
 // libTimedText:
 $wgJSAutoloadLocalClasses['mvTimedEffectsEdit']        = $wgMwEmbedDirectory . 'libTimedText/mvTimedEffectsEdit.js';
\ No newline at end of file