js2/mwEmbed/skins/ctrlBuilder.js

   1 //set the dismissNativeWarn flag:
   2 _global['dismissNativeWarn'] = false;
   3
   4 /*
   5  * controlsBuilder:
   6  *
   7  */
   8 var ctrlBuilder = {
   9         height:29,
  10         supports:{
  11                   'options':true,
  12                   'borders':true
  13         },
  14         getControls:function( embedObj ){
  15                 js_log('f:controlsBuilder:: opt:' + this.options);
  16                 this.id = (embedObj.pc)?embedObj.pc.pp.id:embedObj.id;
  17                 this.available_width = embedObj.playerPixelWidth();
  18                 //make pointer to the embedObj
  19                 this.embedObj =embedObj;
  20                 var _this = this;
  21                 for(var i in embedObj.supports){
  22                         _this.supports[i] = embedObj.supports[i];
  23                 };
  24
  25                 //special case vars:
  26                 if( ( embedObj.roe ||
  27                                 (embedObj.media_element.timedTextSources &&
  28                                 embedObj.media_element.timedTextSources() )
  29                         )  && embedObj.show_meta_link  )
  30                         this.supports['closed_captions']=true;
  31
  32
  33                 //append options to body (if not already there)
  34                 if($j('#mv_vid_options_'+ctrlBuilder.id).length==0)
  35                         $j('body').append( this.components['mv_embedded_options'].o() );
  36
  37                 var o='';
  38                 for( var i in this.components ){
  39                         if( this.supports[i] ){
  40                                 if( this.available_width > this.components[i].w ){
  41                                         //special case with playhead don't add unless we have 60px
  42                                         if( i == 'play_head' && ctrlBuilder.available_width < 60 )
  43                                                 continue;
  44                                         o+=this.components[i].o();
  45                                         this.available_width -= this.components[i].w;
  46                                 }else{
  47                                         js_log('not enough space for control component:' + i);
  48                                 }
  49                         }
  50                 }
  51                 return o;
  52         },
  53          /*
  54          * addControlHooks
  55          * to be run once controls are attached to the dom
  56          */
  57         addControlHooks:function(embedObj){
  58                 //add in drag/seek hooks:
  59                 if(!embedObj.base_seeker_slider_offset &&  $j('#mv_seeker_slider_'+embedObj.id).get(0))
  60                         embedObj.base_seeker_slider_offset = $j('#mv_seeker_slider_'+embedObj.id).get(0).offsetLeft;
  61
  62                 //js_log('looking for: #mv_seeker_slider_'+embedObj.id + "\n " +
  63                 //              'start sec: '+embedObj.start_time_sec + ' base offset: '+embedObj.base_seeker_slider_offset);
  64
  65                 //add play hook:
  66                 $j('#mv_play_pause_button_' + embedObj.id).unbind().btnBind().click(function(){
  67                         $j('#' + embedObj.id).get(0).play();
  68                 })
  69
  70                 //big_play_link_ play binding:
  71                 $j('#big_play_link_' + embedObj.id).unbind().click(function(){
  72                         $j('#' + embedObj.id).get(0).play();
  73                 });
  74
  75                 //add recomend firefox if non-native playback:
  76                 if( embedObj.doNativeWarningCheck() ){
  77                         $j('#dc_'+ embedObj.id).hover(
  78                                 function(){
  79                                         if($j('#gnp_' + embedObj.id).length==0){
  80                                                 $j(this).append('<div id="gnp_' + embedObj.id + '" class="ui-state-highlight ui-corner-all" ' +
  81                                                         'style="position:absolute;display:none;background:#FFF;top:10px;left:10px;right:10px;">' +
  82                                                         gM('mv_for_best_experience') +
  83                                                 '<br><input id="ffwarn_'+embedObj.id+'" type=\"checkbox\">' +
  84                                                         gM('mv_do_not_warn_again') +
  85                                                 '</div>');
  86                                                 $j('#ffwarn_'+embedObj.id).click(function(){
  87                                                         if( $j(this).is(':checked') ){
  88                                                                 //set up a cookie for 7 days:
  89                                                                 $j.cookie('dismissNativeWarn', true, { expires: 5 });
  90                                                                 //set the current instance
  91                                                                 _global['dismissNativeWarn'] = true;
  92                                                                 $j('#gnp_' + embedObj.id).fadeOut('slow');
  93                                                         }else{
  94                                                                 _global['adismissNativeWarn'] = false;
  95                                                                 $j.cookie('dismissNativeWarn', false);
  96                                                         }
  97
  98                                                 });
  99                                         }
 100                                         if( ($j.cookie('dismissNativeWarn') !== true) &&
 101                                                 _global['dismissNativeWarn'] === false  ){
 102                                                 $j('#gnp_' + embedObj.id).fadeIn('slow');
 103                                         }
 104                                 },
 105                                 function(){
 106                                         $j('#gnp_' + embedObj.id).fadeOut('slow');
 107                                 }
 108                         );
 109                 }
 110
 111                 if( $j.browser.msie  &&  $j.browser.version <= 6){
 112                         $j('#big_play_link_' + embedObj.id).pngFix();
 113                 }
 114
 115
 116                 //captions binding:
 117                 $j('#timed_text_'  + embedObj.id).unbind().btnBind().click(function(){
 118                         $j('#' + embedObj.id).get(0).showTextInterface();
 119                 });
 120
 121                 //options binding:
 122                 $j('#options_button_' + embedObj.id).unbind().btnBind().click(function(){
 123                         $j('#' +embedObj.id).get(0).doOptionsHTML();
 124                 });
 125
 126                 //fullscreen binding:
 127                 $j('#fullscreen_'+embedObj.id).unbind().btnBind().click(function(){
 128                         $j('#' +embedObj.id).get(0).fullscreen();
 129                 });
 130
 131                 js_log(" should add slider binding: " + $j('#mv_play_head_'+embedObj.id).length) ;
 132                 $j('#mv_play_head_'+embedObj.id).slider({
 133                         range: "min",
 134                         value: 0,
 135                         min: 0,
 136                         max: 1000,
 137                         start: function(event, ui){
 138                                 var id = (embedObj.pc!=null)?embedObj.pc.pp.id:embedObj.id;
 139                                 embedObj.userSlide=true;
 140                                 $j('#big_play_link_'+id).fadeOut('fast');
 141                                 //if playlist always start at 0
 142                                 embedObj.start_time_sec = (embedObj.instanceOf == 'mvPlayList')?0:
 143                                                                 npt2seconds(embedObj.getTimeReq().split('/')[0]);
 144                         },
 145                         slide: function(event, ui) {
 146                                 var perc = ui.value/1000;
 147                                 embedObj.jump_time = seconds2npt( parseFloat( parseFloat(embedObj.getDuration()) * perc ) + embedObj.start_time_sec);
 148                                 //js_log('perc:' + perc + ' * ' + embedObj.getDuration() + ' jt:'+  this.jump_time);
 149                                 embedObj.setStatus( gM('seek_to')+' '+embedObj.jump_time );
 150                                 //update the thumbnail / frame
 151                                 if(embedObj.isPlaying==false){
 152                                         embedObj.updateThumbPerc( perc );
 153                                 }
 154                         },
 155                         change:function(event, ui){
 156                                 //only run the onChange event if done by a user slide:
 157                                 if(embedObj.userSlide){
 158                                         embedObj.userSlide=false;
 159                                         embedObj.seeking=true;
 160                                         //stop the monitor timer (if we can)
 161                                         if(embedObj.stopMonitor)
 162                                                 embedObj.stopMonitor();
 163
 164                                         var perc = ui.value/1000;
 165                                         //set seek time (in case we have to do a url seek)
 166                                         embedObj.seek_time_sec = npt2seconds( embedObj.jump_time, true );
 167                                         js_log('do jump to: '+embedObj.jump_time + ' perc:' +perc + ' sts:' + embedObj.seek_time_sec);
 168                                         embedObj.doSeek(perc);
 169                                 }
 170                         }
 171                 });
 172                 //up the z-index of the default status indicator:
 173                 $j('#mv_play_head_'+embedObj.id + ' .ui-slider-handle').css('z-index', 4);
 174                 $j('#mv_play_head_'+embedObj.id + ' .ui-slider-range').addClass('ui-corner-all').css('z-index', 2);
 175                 //extended class list for jQuery ui themeing (we can probably refactor this with custom buffering highliter)
 176                 $j('#mv_play_head_'+embedObj.id).append( ctrlBuilder.getMvBufferHtml() );
 177
 178                 //videoOptions:
 179                 $j('#mv_vid_options_'+ctrlBuilder.id+' .vo_selection').click(function(){
 180                         embedObj.selectPlaybackMethod();
 181                         $j('#mv_vid_options_'+ctrlBuilder.id).hide();
 182                         return false;
 183                 });
 184                 $j('#mv_vid_options_'+ctrlBuilder.id+' .vo_download').click(function(){
 185                         embedObj.showVideoDownload();
 186                         $j('#mv_vid_options_'+ctrlBuilder.id).hide();
 187                         return false;
 188                 })
 189                 $j('#mv_vid_options_'+ctrlBuilder.id+' .vo_showcode').click(function(){
 190                         embedObj.showEmbedCode();
 191                         $j('#mv_vid_options_'+ctrlBuilder.id).hide();
 192                         return false;
 193                 });
 194
 195                 //volume binding:
 196                 var hoverOverDelay=false;
 197                 $j('#volume_control_'+embedObj.id).unbind().btnBind().click(function(){
 198                         $j('#' +embedObj.id).get(0).toggleMute();
 199                 }).hover(
 200                         function(){
 201                                 $j('#vol_container_' + embedObj.id).addClass('vol_container_top');
 202                                 //set to "below" if playing and embedType != native
 203                                 if(embedObj && embedObj.isPlaying && embedObj.isPlaying() && !embedObj.supports['overlays']){
 204                                         $j('#vol_container_' + embedObj.id).removeClass('vol_container_top').addClass('vol_container_below');
 205                                 }
 206
 207                                 $j('#vol_container_' + embedObj.id).fadeIn('fast');
 208                                 hoverOverDelay = true;
 209                         },
 210                         function(){
 211                                 hoverOverDelay= false;
 212                                 setTimeout(function doHideVolume(){
 213                                         if(!hoverOverDelay){
 214                                                 $j('#vol_container_' + embedObj.id).fadeOut('fast');
 215                                         }
 216                                 }, 500);
 217                         }
 218                 );
 219                 //Volumen Slider
 220                 $j('#volume_bar_'+embedObj.id).slider({
 221                         orientation: "vertical",
 222                         range: "min",
 223                         value: 80,
 224                         min: 0,
 225                         max: 100,
 226                         slide: function(event, ui) {
 227                                 var perc = ui.value/100;
 228                                 //js_log('update volume:' + perc);
 229                                 embedObj.updateVolumen(perc);
 230                         },
 231                         change:function(event, ui){
 232                                 var perc = ui.value/100;
 233                                 if (perc==0) {
 234                                         $j('#volume_control_'+embedObj.id + ' span').removeClass('ui-icon-volume-on').addClass('ui-icon-volume-off');
 235                                 }else{
 236                                         $j('#volume_control_'+embedObj.id + ' span').removeClass('ui-icon-volume-off').addClass('ui-icon-volume-on');
 237                                 }
 238                                 //only run the onChange event if done by a user slide:
 239                                 if(embedObj.userSlide){
 240                                         embedObj.userSlide=false;
 241                                         embedObj.seeking=true;
 242                                         var perc = ui.value/100;
 243                                         embedObj.updateVolumen(perc);
 244                                 }
 245                         }
 246                 });
 247
 248         },
 249         getMvBufferHtml:function(){
 250                 return '<div class="ui-slider-range ui-slider-range-min ui-widget-header ' +
 251                                 'ui-state-highlight ui-corner-all '+
 252                                 'mv_buffer" style="width:0px;height:100%;z-index:1;top:0px" />';
 253         },
 254         components:{
 255                 'borders':{
 256                         'w':8,
 257                         'o':function(){
 258                                 return  '';
 259                         }
 260                 },
 261                 'mv_embedded_options':{
 262                         'w':0,
 263                         'o':function(){
 264                                 var o= '<div id="mv_vid_options_'+ctrlBuilder.id+'" class="videoOptions">'+
 265                                 '<div class="videoOptionsTop"></div>'+
 266                                 '<div class="videoOptionsBox">'+
 267                                 '<div class="block">'+
 268                                         '<h6>Video Options</h6>'+
 269                                 '</div>'+
 270                                         '<div class="block">'+
 271                                                 '<p class="short_match vo_selection"><a href="#"><span>Stream Selection</span></a></p>'+
 272                                                 '<p class="short_match vo_download"><a href="#"><span>Download</span></a></p>'+
 273                                                 '<p class="short_match vo_showcode"><a href="#"><span>Share or Embed</span></a></p>';
 274
 275                                         //link to the stream page if we are not already there:
 276                                         if( ctrlBuilder.embedObj.roe && typeof mv_stream_interface == 'undefined' )
 277                                                 o+='<p class="short_match"><a href="javascript:$j(\'#'+ctrlBuilder.id+'\').get(0).doLinkBack()"><span><strong>Source Page</strong></span></a></p>';
 278
 279                                 o+='</div>'+
 280                                 '</div><!--videoOptionsInner-->' +
 281                                         '<div class="videoOptionsBot"></div>' +
 282                                 '</div><!--videoOptions-->';
 283                                 return o;
 284                         }
 285                 },
 286                 'fullscreen':{
 287                         'w':20,
 288                         'o':function(){
 289                                 return '<div title="' + gM('player_fullscreen') + '" id="fullscreen_'+ctrlBuilder.id+'" class="ui-state-default ui-corner-all ui-icon_link rButton"><span class="ui-icon ui-icon-arrow-4-diag"></span></div>'
 290                         }
 291                 },
 292                 'options':{
 293                         'w':26,
 294                         'o':function(){
 295                                 return '<div title="'+ gM('player_options') + '" id="options_button_'+ctrlBuilder.id+'" class="ui-state-default ui-corner-all ui-icon_link rButton"><span class="ui-icon ui-icon-wrench"></span></div>';
 296                         }
 297                 },
 298                 'pause':{
 299                         'w':24,
 300                         'o':function(){
 301                                 return '<div title="' + gM('play_clip') + '" id="mv_play_pause_button_' + ctrlBuilder.id + '" class="ui-state-default ui-corner-all ui-icon_link lButton"><span class="ui-icon ui-icon-play"/></div>';
 302                         }
 303                 },
 304                 'closed_captions':{
 305                         'w':23,
 306                         'o':function(){
 307                                 return '<div title="' + gM('closed_captions') + '" id="timed_text_'+ctrlBuilder.id+'" class="ui-state-default ui-corner-all ui-icon_link rButton"><span class="ui-icon ui-icon-comment"></span></div>'
 308                         }
 309                 },
 310                 'volume_control':{
 311                         'w':23,
 312                         'o':function(){
 313                                         return '<div title="' + gM('volume_control') + '" id="volume_control_'+ctrlBuilder.id+'" class="ui-state-default ui-corner-all ui-icon_link rButton">' +
 314                                                                 '<span class="ui-icon ui-icon-volume-on"></span>' +
 315                                                                 '<div style="position:absolute;display:none;" id="vol_container_'+ctrlBuilder.id+'" class="vol_container ui-corner-all">' +
 316                                                                         '<div class="volume_bar" id="volume_bar_' + ctrlBuilder.id + '"></div>' +
 317                                                                 '</div>'+
 318                                                         '</div>';
 319                         }
 320                 },
 321                 'time_display':{
 322                         'w':90,
 323                         'o':function(){
 324                                 return '<div id="mv_time_'+ctrlBuilder.id+'" class="ui-widget time">' + ctrlBuilder.embedObj.getTimeReq() + '</div>';
 325                         }
 326                 },
 327                 'play_head':{
 328                         'w':0, //special case (takes up remaining space)
 329                         'o':function(){
 330                                 return '<div class="play_head" id="mv_play_head_' + ctrlBuilder.id + '" style="width: ' + ( ctrlBuilder.available_width - 30 ) + 'px;"></div>';
 331                         }
 332                 }
 333         }
 334 }