some sequence / playlist / add-media bug fixes
authorMichael Dale <dale@users.mediawiki.org>
Tue, 4 Aug 2009 18:51:34 +0000 (18:51 +0000)
committerMichael Dale <dale@users.mediawiki.org>
Tue, 4 Aug 2009 18:51:34 +0000 (18:51 +0000)
* improved abstraction of embedVideo class for playlist object

js2/mwEmbed/example_usage/Firefogg_Make_Advanced.html
js2/mwEmbed/libAddMedia/seqRemoteSearchDriver.js
js2/mwEmbed/libEmbedVideo/embedVideo.js
js2/mwEmbed/libEmbedVideo/htmlEmbed.js
js2/mwEmbed/libSequencer/mvPlayList.js

index 110024e..97746f5 100644 (file)
@@ -1,8 +1,8 @@
 <!DOCTYPE HTML>
 <html><head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
-    <title>Firefogg - Make Ogg Video in your Browser</title>    
-       <script type="text/javascript" src="../jsScriptLoader.php?debug=true&class=mv_embed,window.jQuery,mvBaseUploadInterface,mvFirefogg,mvAdvFirefogg,$j.ui,$j.ui.progressbar,$j.ui.dialog,$j.cookie,$j.ui.accordion,$j.ui.slider,$j.ui.datepicker"></script>                 
+    <title>Firefogg - Make Ogg Video in your Browser</title>      
+       <script type="text/javascript" src="../jsScriptLoader.php?&class=mv_embed,window.jQuery,mvBaseUploadInterface,mvFirefogg,mvAdvFirefogg,$j.ui,$j.ui.progressbar,$j.ui.dialog,$j.cookie,$j.ui.accordion,$j.ui.slider,$j.ui.datepicker"></script>
 <style type="text/css" media="all">body {
   margin: 0;
   padding: 0;
@@ -91,7 +91,7 @@ Make Ogg Video</h1>
        <div style="margin-right:auto;margin-left:auto;width:500px;" id="loadFogg">Loading firefogg<blink>...</blink></div>     
        <div style="margin-right:auto;margin-left:auto;width:500px;height:230px"  id="firefogg_app"></div>
        
-       <div style="height:265px"></div>
+       <div style="height:295px"></div>
        <center><span style="font:size:80%">Built using <a href="http://firefogg.org">firefogg</a>, <a href="http://www.mediawiki.org/wiki/Media_Projects_Overview#MwEmbed">MwEmbed</a> and <a href="http://jqueryui.com/">jquery.ui</a>. Supports  
                <a href="#" id="doThemeRoller">...</a>
        </span>
index 7597d35..8563087 100644 (file)
@@ -89,7 +89,7 @@ seqRemoteSearchDriver.prototype = {
        },
        insertResource:function(rObj){
                var _this = this;
-               js_log("SEQ insert resource after:" + _this.sequence_add_target );
+               js_log("SEQ insert resource after:" + _this.sequence_add_target  + ' of type: ' + rObj.mime);
                if(_this.sequence_add_target ){
                        var tClip = _this.pSeq.getClipFromSeqID( _this.sequence_add_target );           
                        var target_order = false;
@@ -102,26 +102,25 @@ seqRemoteSearchDriver.prototype = {
                var cat = rObj;                 
                //check for target insert path
                this.checkImportResource( rObj, function(){     
-                                                                                                               
+                                                                               
                        var clipConfig = {                                      
                                'type'   : rObj.mime,
                                'uri'    : _this.cFileNS + ':' + rObj.target_resource_title,                            
                                'title'  : rObj.title                                                           
                        };                                                                                                                              
-                       //set via local properites if avaliable
+                       //set via local properites if avaliable                 
                        clipConfig['src'] = (rObj.local_src) ? rObj.local_src : rObj.src;
-                       clipConfig['poster'] = (rObj.local_poster) ? rObj.local_poster : rObj.poster;
+                       clipConfig['poster'] = ( rObj.local_poster ) ? rObj.local_poster : rObj.poster;
                        
                        if(rObj.start_time && rObj.end_time){
                                clipConfig['dur'] = npt2seconds( rObj.end_time ) - npt2seconds( rObj.start_time );
                        }else{
-                               //provide a default duration 
+                               //provide a default duration if none set 
                                clipConfig['dur'] = 4;
-                       }
-                       
+                       }                       
                        
                        //create the media element (target order+1 (since we insert (after)             
-                       _this.pSeq.plObj.tryAddMediaObj(clipConfig, target_order+1 );           
+                       _this.pSeq.plObj.tryAddMediaObj( clipConfig, (parseInt(target_order) + 1) );            
                        //refresh the timeline: 
                        _this.pSeq.do_refresh_timeline();
                        js_log("run close all: ");                                              
index 3fdb0e0..bd9e9a3 100644 (file)
@@ -284,13 +284,15 @@ var ctrlBuilder = {
                //make pointer to the embedObj
                this.embedObj =embedObj;
                var _this = this;               
-               $j.each( embedObj.supports, function( i, sup ){
+               for(var i in embedObj.supports){                        
                        _this.supports[i] = embedObj.supports[i];
-               });
+               };
                                        
                //special case vars: 
-               if( ( embedObj.roe || embedObj.media_element.timedTextSources() )  
-                               && embedObj.show_meta_link  )
+               if( ( embedObj.roe || 
+                               (embedObj.media_element.timedTextSources && 
+                               embedObj.media_element.timedTextSources() ) 
+                       )  && embedObj.show_meta_link  )
                        this.supports['closed_captions']=true;   
                
                        
@@ -464,7 +466,7 @@ var ctrlBuilder = {
                        function(){                     
                                $j('#vol_container_' + embedObj.id).addClass('vol_container_top');
                                //set to "below" if playing and embedType != native
-                               if(embedObj && embedObj.isPlaying() && !embedObj.supports['overlays']){
+                               if(embedObj && embedObj.isPlaying && embedObj.isPlaying() && !embedObj.supports['overlays']){
                                        $j('#vol_container_' + embedObj.id).removeClass('vol_container_top').addClass('vol_container_below');
                                }
                                
@@ -1314,8 +1316,7 @@ embedVideo.prototype = {
                return true;    
        },
        getTimeReq:function(){
-               //js_log('f:getTimeReq:'+ this.getDurationNTP());
-               var default_time_req = '0:00:00/' + this.getDurationNTP() ;
+               var default_time_req = '0:00:00/' + seconds2npt(this.getDuration());
                if(!this.media_element)
                        return default_time_req;
                if(!this.media_element.selected_source)
@@ -1339,10 +1340,6 @@ embedVideo.prototype = {
                        this.end_ntp = seconds2npt( this.duration );            
                //return the duration
                return this.duration;
-       },
-         /* get the duration in ntp format */
-       getDurationNTP:function(){
-               return seconds2npt(this.getDuration());
        },
        /*
         * wrapEmebedContainer
@@ -1654,7 +1651,7 @@ embedVideo.prototype = {
        },      
        getHTML : function (){          
                //@@todo check if we have sources avaliable     
-               js_log('f:getHTML : ' + this.id );                      
+               js_log('embedVideo:getHTML : ' + this.id );                     
                var _this = this;                                
                var html_code = '';             
                html_code = '<div id="videoPlayer_'+this.id+'" style="width:'+this.width+'px;" class="videoPlayer">';           
@@ -1811,7 +1808,8 @@ embedVideo.prototype = {
                download, and embed code.
        */
        getThumbnailHTML : function ()
-       {
+       {               
+               js_log('embedVideo:getThumbnailHTML::' + this.id);
                var thumb_html = '';
                var class_atr='';
                var style_atr='';
@@ -2387,11 +2385,13 @@ embedVideo.prototype = {
                //do head request if on the same domain
                return this.media_element.selected_source.URLTimeEncoding;
        },
-       setSliderValue: function(perc, hide_progress){
+       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("embed video set: " + '#mv_play_head_'+this_id + ' to ' + 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() + ')');
@@ -2558,6 +2558,8 @@ mediaPlayers.prototype =
                
                this.default_players['text/html'] = ['html'];
                this.default_players['image/jpeg'] = ['html'];
+               this.default_players['image/png'] = ['html'];
+               this.default_players['image/svg'] = ['html'];
                
        },
        addPlayer : function(player, mime_type)
@@ -2606,8 +2608,8 @@ mediaPlayers.prototype =
        },
        defaultPlayer : function(mime_type)
        {                               
-               js_log("f:defaultPlayer: " + mime_type);
-               var mime_players = this.getMIMETypePlayers(mime_type);          
+               js_log("get defaultPlayer for " + mime_type);           
+               var mime_players = this.getMIMETypePlayers(mime_type);                          
                if( mime_players.length > 0)
                {
                        // check for prior preference for this mime type
index 70d1af8..cc654d6 100644 (file)
@@ -130,20 +130,24 @@ var htmlEmbed ={
        getEmbedHTML:function(){
                js_log('f:html:getEmbedHTML: ' + this.id);
                //set up the css for our parent div:             
-               $j(this).css({'width':this.pc.pp.width, 'height':this.pc.pp.height, 'overflow':"hidden"});
+               $j(this).css({
+                       'width':this.pc.pp.width, 
+                       'height':this.pc.pp.height, 
+                       'overflow':"hidden"
+               });
                //@@todo support more smil animation layout stuff: 
                
                //wrap output in videoPlayer_ div:
                $j(this).html('<div id="videoPlayer_'+ this.id+'">'+this.getThumbnailHTML()+'</div>');
-       },
-       getThumbnailHTML:function( opt ){
+       },      
+       getThumbnailHTML:function( opt ){                               
                var out='';
                if(!opt)
                        opt = {};                       
                var height = (opt.height)?opt.height:this.pc.pp.height;
                var width = (opt.width)?opt.width: this.pc.pp.width;    
                js_log('1req '+ opt.height + ' but got: ' + height);    
-               if( this.pc.type =='image/jpeg'){
+               if( this.pc.type =='image/jpeg' ||  this.pc.type == 'image/png' ){
                        js_log('should put src: '+this.pc.src);
                        out = '<img style="width:'+width+'px;height:'+height+'px" src="'+this.pc.src+'">';
                }else{
@@ -153,12 +157,12 @@ var htmlEmbed ={
                return out;
        },
        doThumbnailHTML:function(){
-               js_log('f:htmlEmbed:doThumbnailHTML');
+               js_log('htmlEmbed:doThumbnailHTML()');
                this.getEmbedHTML();
        },
        /* since its just html display get the "embed" right away */
        getHTML:function(){
-               js_log('getHTML: htmlEmbed');
+               js_log('htmlEmbed::getHTML() ' + this.id);
                this.getEmbedHTML();
        },
        getDuration:function(){
index 4c1d8fc..cb5ca8c 100644 (file)
@@ -33,7 +33,10 @@ if(typeof wgServer=='undefined'){
 }else{
        var defaultMetaDataProvider = wgServer + wgScript + '?title=Special:MvExportStream&feed_format=roe&stream_name=';
 }
-
+/*
+ * The playlist Object implements ~most~ of embedVideo but we don't inherit (other than to use the control builder)  
+ * because pretty much every function has to be changed for the playlist context
+ */
 var mvPlayList = function(element) {           
        return this.init(element);
 };
@@ -69,6 +72,17 @@ mvPlayList.prototype = {
                title_bar_height:17,
                control_height:29
        },
+       //embed object type support system; 
+       supports: {
+               'play_head':true, 
+               'pause':true,            
+               'fullscreen':false, 
+               'time_display':true, 
+               'volume_control':true,
+               
+               'overlays':true,
+               'playlist_swap_loader':true //if the object supports playlist functions         
+       },
        init : function(element){
                js_log('mvPlayList:init:');             
                this.tracks={};         
@@ -80,7 +94,7 @@ mvPlayList.prototype = {
                this.default_track = this.tracks[0];                            
                
                //get all the attributes:
-                 for(var attr in mv_default_playlist_attributes){         
+                for(var attr in mv_default_playlist_attributes){          
                        if( element.getAttribute(attr) ){
                                this[attr]=element.getAttribute(attr);
                                //js_log('attr:' + attr + ' val: ' + video_attributes[attr] +" "+'elm_val:' + element.getAttribute(attr) + "\n (set by elm)");  
@@ -230,8 +244,11 @@ mvPlayList.prototype = {
                        this.doWhenClipLoadDone();
                }else{
                        js_log("only "+ _this.clip_ready_count +" clips done, scheduling callback:");
+                       var doParseDoneCheck = function(){                              
+                               _this.doWhenParseDone();
+                       }
                        if( !mvJsLoader.load_error )    //re-issue request if no load error:
-                               setTimeout('document.getElementById(\''+this.id+'\').doWhenParseDone()', 250);
+                               setTimeout(doParseDoneCheck, 100);
                }                                                               
        },
        doWhenClipLoadDone:function(){          
@@ -264,6 +281,10 @@ mvPlayList.prototype = {
                //js_log("return dur: " + this.pl_duration);
                return this.pl_duration;
        },
+       getTimeReq:function(){
+               //playlist does not really support time request atm ( in theory in the future we could embed playlists with temporal urls)
+               return '0:0:0/' +  seconds2npt( this.getDuration() ); 
+       },
        getDataSource:function(){       
                js_log("f:getDataSource "+ this.src);
                //determine the type / first is it m3u or xml?   
@@ -518,13 +539,11 @@ mvPlayList.prototype = {
        setStatus:function(value){
                $j('#mv_time_'+this.id).html( value );
        },
-       setSliderValue:function(value){
+       setSliderValue:function(value){         
                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
-                       }
+                       //slider is on 1000 scale: 
+                       var val = parseInt( value *1000 );                      
+                       $j('#mv_play_head_' + this.id).slider('value', val);
                }
        },      
        getPlayHeadPos: function(prec_done){
@@ -718,7 +737,7 @@ mvPlayList.prototype = {
                        //play cur_clip                 
                        this.cur_clip.embed.play();             
                }               
-               //start up the playlist monitor 
+               //start up the playlist monitor                 
                this.monitor();         
        },
        /*
@@ -742,6 +761,25 @@ mvPlayList.prototype = {
                        clip.embed.pause();             
                });
        },
+       //@@todo mute across all child clips: 
+       toggleMute:function(){
+               var this_id = (this.pc!=null)?this.pc.pp.id:this.id;    
+               if(this.muted){
+                       this.muted=false;
+                       $j('#volume_control_'+this_id + ' span').removeClass('ui-icon-volume-off').addClass('ui-icon-volume-on');
+                       $j('#volume_bar_'+this_id).slider('value', 100); 
+                       this.updateVolumen(1);
+               }else{
+                       this.muted=true;
+                       $j('#volume_control_'+this_id + ' span').removeClass('ui-icon-volume-on').addClass('ui-icon-volume-off');
+                       $j('#volume_bar_'+this_id).slider('value', 0);
+                       this.updateVolumen(0); 
+               }
+               js_log('f:toggleMute::' + this.muted);          
+       },
+       updateVolumen:function(perc){
+               js_log('update volume not supported with current playback type');
+       },
        fullscreen:function(){
                this.cur_clip.embed.fullscreen();
        },
@@ -785,11 +823,15 @@ mvPlayList.prototype = {
                        this.cur_clip = this.start_clip;                
                        //display the first clip thumb: 
                        this.cur_clip.embed.stop();
-                       //make sure the current clip is vissable:
+                       //hide other clips:
+                       $j('#'+this.id+' .clip_container').hide();
+                       //show the first/current clip:
                        $j('#clipDesc_'+this.cur_clip.id).show();
                }
                //reset the currentTime: 
                this.currentTime = 0;
+               //rest the sldier
+               this.setSliderValue( 0 );
                //FIXME still some issues with "stoping" and reseting the playlist      
        },      
        doSeek:function(v){
@@ -849,9 +891,8 @@ mvPlayList.prototype = {
        //gets playlist controls large control height for sporting 
        //next prev button and more status display
        getControlsHTML:function(){
-               //get controls from current clip  (add some playlist specific controls:           
-               this.cur_clip.embed.supports['prev_next']=true;         
-               return ctrlBuilder.getControls(this.cur_clip.embed);
+               //get controls from current clip  (add some playlist specific controls:                                 
+               return ctrlBuilder.getControls( this );
        },      
        //ads colors/dividers between tracks
        colorPlayHead: function(){
@@ -874,7 +915,7 @@ mvPlayList.prototype = {
                        //(use getSoloDuration to not include transitions and such)      
                        var perc = ( clip.getSoloDuration() / pl_duration );
                        var pwidth = Math.round( perc * _this.track_len);
-                       js_log('pstatus:c:'+ clip.getDuration() + ' of '+ pl_duration+' %:' + perc + ' width: '+ pwidth + ' of total: ' + _this.track_len);
+                       //js_log('pstatus:c:'+ clip.getDuration() + ' of '+ pl_duration+' %:' + perc + ' width: '+ pwidth + ' of total: ' + _this.track_len);
                        //var pwidth = Math.round( perc  * _this.track_len - (_this.mv_seeker_width*perc) );
                        
                        //add the buffer child indicator:                                                
@@ -1002,6 +1043,22 @@ mvPlayList.prototype = {
                        clearInterval( this.default_track.clips[ clip_inx ].timerId );
                else
                        this.default_track.clips[ clip_inx ][ trans_type ].run_transition();            
+       },
+       playerPixelWidth : function()
+       {
+               var player = $j('#mv_embedded_player_'+this.id).get(0);
+               if(typeof player!='undefined' && player['offsetWidth'])
+                       return player.offsetWidth;
+               else
+                       return parseInt(this.width);
+       },
+       playerPixelHeight : function()
+       {
+               var player = $j('#mv_embedded_player_'+this.id).get(0);
+               if(typeof player!='undefined' && player['offsetHeight'])
+                       return player.offsetHeight;
+               else
+                       return parseInt(this.height);
        }
 }
 
@@ -1140,7 +1197,7 @@ mvClip.prototype = {
                        '<div id="pl_desc_txt_'+this.id+'" class="pl_desc" style="position:absolute;left:'+(tw+2)+'px;width:'+twDesc+'px;height:'+th+'px;overflow:auto;">'+
                                        '<b>'+this.title+'</b><br>'+                    
                                        this.desc + '<br>' + 
-                                       '<b>clip length:</b> '+ this.embed.getDurationNTP()+ 
+                                       '<b>clip length:</b> '+ seconds2npt( this.embed.getDuration() ); 
                        '</div>');              
                }
        },*/
@@ -1279,7 +1336,7 @@ PlMvEmbed.prototype = {
                //status updates handled by playlist obj
        },
        setSliderValue:function(value){
-               //setSlider value handled by playlist obj               
+               //setSlider value handled by playlist obj       
        }       
 }
 
@@ -1437,21 +1494,12 @@ mvPlayList.prototype.monitor = function(){
        
        //update the playlist current time: 
        //check for a trsnOut from the previus clip to subtract
-       /*var prev_clip =  this.getPrevClip();
-       var transOffset = 0;
-       if( prev_clip.id != this.cur_clip.id ){
-               if( prev_clip.transOut ){
-                       transOffset = prev_clip.transOut.getDuration();
-                       js_log("should add: " + transOffset + " off:" + this.cur_clip.dur_offset+  " to " +this.cur_clip.embed.currentTime +
-                                ' = ' + ( this.cur_clip.dur_offset + this.cur_clip.embed.currentTime + transOffset) );
-               }
-       }*/
        this.currentTime = this.cur_clip.dur_offset + this.cur_clip.embed.relativeCurrentTime();        
                
        //update slider: 
        if(!this.userSlide){
-               this.setStatus(seconds2npt(this.currentTime) + '/' + seconds2npt(this.getDuration()) );                         
-               this.setSliderValue(this.currentTime / this.getDuration());
+               this.setStatus(seconds2npt(this.currentTime) + '/' + seconds2npt(this.getDuration()) );                                 
+               this.setSliderValue( this.currentTime / this.getDuration() );
        }
        //pre-load any future clips:
        this.loadFutureClips();
@@ -2032,7 +2080,7 @@ mvSMILClip.prototype = {
                if(this.transOut)
                        fulldur -= this.transOut.getDuration();
 
-               js_log("getSoloDuration:: td: " + this.getDuration() + ' sd:' + fulldur);
+               //js_log("getSoloDuration:: td: " + this.getDuration() + ' sd:' + fulldur);
                return fulldur;
        }
 }