From 28f5855535a350dddf9e14d5a9e491f22503dc96 Mon Sep 17 00:00:00 2001 From: Michael Dale Date: Wed, 19 Aug 2009 10:39:33 +0000 Subject: [PATCH] * working display of menus .. now to fix j hooking --- js2/mwEmbed/libEmbedVideo/embedVideo.js | 147 ++++----- js2/mwEmbed/libSequencer/mvPlayList.js | 12 +- js2/mwEmbed/skins/baseSkin.js | 398 +----------------------- js2/mwEmbed/skins/kskin/styles.css | 8 +- 4 files changed, 79 insertions(+), 486 deletions(-) diff --git a/js2/mwEmbed/libEmbedVideo/embedVideo.js b/js2/mwEmbed/libEmbedVideo/embedVideo.js index f968df4138..842c164e46 100644 --- a/js2/mwEmbed/libEmbedVideo/embedVideo.js +++ b/js2/mwEmbed/libEmbedVideo/embedVideo.js @@ -316,35 +316,24 @@ var ctrlBuilder = { $tp.find('.k-menu').hide(); //output menu-items: - for(i=0; i < ctrlBuilder.menu_items.length ; i++){ - $tp.find('.k-player-btn').click(function(){ - $target = $j('#' + embedObj.id + ' .k-menu-screens .menu-player'); - //gennerate the menu if not already done: - if( $target.children().length == 0 ) - embedObj.selectPlaybackMethod(); - - //now slide in the item: - if( $target.is(':visible') ) - $target.slideOut("fast"); - else - $target.slideIn("fast"); - + for(i=0; i < ctrlBuilder.menu_items.length ; i++){ + $tp.find('.k-' + ctrlBuilder.menu_items[i] + '-btn').click(function(){ + var mk = $j(this).attr('rel'); + $target = $j('#' + embedObj.id + ' .menu-'+mk).hide(); + //gennerate the menu html not already done: + if( $target.children().length == 0 ){ + //call the function show{Menuitem} with target: + embedObj['show' + mk.charAt(0).toUpperCase() + mk.substring(1)]( + $j('#' + embedObj.id + ' .menu-'+mk) + ); + } + //slide out the others + $j('#' + embedObj.id + ' .menu-screen').hide(); + $target.fadeIn("fast"); + //don't follow the # link return false; }); - } - $tp.find('.k-download-btn').click(function(){ - embedObj.showVideoDownload(); - return false; - }); - - $tp.find('.k-share-btn').click(function(){ - embedObj.showEmbedCode(); - return false; - }); - $tp.find('.k-credits-btn').click(function(){ - //@@todo show credits menu screen; - return false; - }); + } } //options menu display: @@ -446,7 +435,7 @@ var ctrlBuilder = { //output menu item containers: for(i=0; i < ctrlBuilder.menu_items.length; i++){ var mk = ctrlBuilder.menu_items[i]; - o+= '
  • ' + + o+= '
  • ' + '' + gM( mk ) +'
    • '; } o+='' + @@ -455,8 +444,8 @@ var ctrlBuilder = { 'px; height:' + (embedObj.playerPixelHeight() - ctrlBuilder.height) + 'px;">'; //output menu item containers: - for(i=0; i < ctrlBuilder.menu_items; i++){ - o+= '
    '; + for(i=0; i < ctrlBuilder.menu_items.length; i++){ + o+= '
    '; } '' + @@ -619,10 +608,11 @@ mvEmbed = { embed_video = document.createElement('div'); //make sure our div has a hight/width set: - $j(embed_video).css({ + /*$j(embed_video).css({ 'width':videoInterface.width, 'height':videoInterface.height - }).html( mv_get_loading_img() ); + }).html( mv_get_loading_img() );*/ + //inherit the video interface for(var method in videoInterface){ //for in loop oky in Element context if(method!='readyState'){ //readyState crashes IE @@ -1552,7 +1542,7 @@ embedVideo.prototype = { function(){ //animation done.. add "loading" to div if empty if($j('#liks_info_'+_this.id).html()==''){ - $j('#liks_info_'+_this.id).html(gM('mwe-loading_txt')); + $j('#liks_info_'+_this.id).html(gM('loading_txt')); } } ) @@ -1968,7 +1958,7 @@ embedVideo.prototype = { doLinkBack:function(){ if(this.roe && this.media_element.addedROEData==false){ var _this = this; - this.displayHTML(gM('mwe-loading_txt')); + this.displayHTML(gM('loading_txt')); do_request(this.roe, function(data) { _this.media_element.addROE(data); @@ -1982,27 +1972,28 @@ embedVideo.prototype = { } } }, + showCredits: function($target){ + $target.html('credits page goes here'); + }, //display the code to remotely embed this video: - showEmbedCode : function(embed_code){ - if(!embed_code) - embed_code = this.getEmbeddingHTML(); - var o=''; + showShare:function($target){ + var embed_code = this.getEmbeddingHTML(); + var o = ''; if(this.linkback){ o+='Share Clip via Link '+ '

    or

    '; } - o+='
    ' + - 'Embed Clip in Blog or Site
    '+ + o+='Embed Clip in Blog or Site
    '+ ''+ 'Read This before embeding.'+ '
    '+ - ' '+ - ' '+ - '
    '+ - '
    '; - this.displayHTML(o); + ' '+ + ''; + js_log("should set share: " + o); + $target.html(o); }, copyText:function(){ $j('#embedding_user_html_'+this.id).focus().select(); @@ -2023,7 +2014,7 @@ embedVideo.prototype = { 'height:'+ parseInt( this.height )+'px;width:400px;' + 'display:none;" ' + 'id="metaBox_' + this.id + '">'+ - gM('mwe-loading_txt') + + gM('loading_txt') + ''); } //fade in the text display @@ -2112,7 +2103,7 @@ embedVideo.prototype = { }); return false; //onclick action return false }, - selectPlaybackMethod:function( target ){ + showPlayerselect:function( target ){ //get id (in case where we have a parent container) var this_id = (this.pc!=null)?this.pc.pp.id:this.id; @@ -2190,51 +2181,45 @@ embedVideo.prototype = { }); }); }, - showVideoDownload:function(){ + showDownload:function( $target ){ //load the roe if available (to populate out download options: - //js_log('f:showVideoDownload '+ this.roe + ' ' + this.media_element.addedROEData); + //js_log('f:showDownload '+ this.roe + ' ' + this.media_element.addedROEData); if(this.roe && this.media_element.addedROEData == false){ var _this = this; - this.displayHTML(gM('mwe-loading_txt')); + $target.html( gM('loading_txt') ); do_request(this.roe, function(data) { _this.media_element.addROE(data); - $j('#mv_disp_inner_'+_this.id).html( _this.getShowVideoDownload() ); + $target.html( _this.getShowVideoDownload() ); }); }else{ - this.displayHTML( this.getShowVideoDownload() ); - } - }, - getShowVideoDownload:function(){ -// var out='
    ' + -// ''+gM('download_segment')+'
    '; -// out+='
    '+ -// gM('download_right_click') + '

    '; - var out='
    ' + - '

    Download Video

    ' + - '
      '; -// var dl_list=''; -// var dl_txt_list=''; + $target.html( this.getShowVideoDownload() ); + } + }, + getShowVideoDownload:function(){ + var dl_txt_list = dl_list = ''; $j.each(this.media_element.getSources(), function(index, source){ -// var dl_line = '
    • ' + ' ' -// + source.getTitle()+' '+ '
      • '+"\n"; - var dl_line = '
    • ' + ' ' + source.getTitle() + '
      • \n'; - if(source.getURI().indexOf('?t=')!==-1) { - out+=dl_line; - } - else if(this.getMIMEType()=="text/cmml" || this.getMIMEType()=="text/x-srt") { - dl_txt_list+=dl_line; - } - else { - dl_list+=dl_line; + var dl_line = '
    • ' + ' ' + source.getTitle() + '
      • \n'; + if(this.getMIMEType()=="text/cmml" || this.getMIMEType()=="text/x-srt") { + dl_txt_list += dl_line; + }else { + dl_list += dl_line; } }); -// if(dl_list!='') -// out+=gM('download_full') + '
      ' + dl_list + '
      '; -// if(dl_txt_list!='') -// out+=gM('download_text')+'
      ' + dl_txt_list +'
      '; - out+='
    '; - return out; + var o='

    ' + gM('download_clip') + '

    '+ + ''; + + //add text links: + if(dl_txt_list != '') + o+='

    ' + gM('download_text') + '

    ' + + ''; + + o+='
    '; + return o; }, /* * base embed controls diff --git a/js2/mwEmbed/libSequencer/mvPlayList.js b/js2/mwEmbed/libSequencer/mvPlayList.js index f6c0e54575..e32873d65f 100644 --- a/js2/mwEmbed/libSequencer/mvPlayList.js +++ b/js2/mwEmbed/libSequencer/mvPlayList.js @@ -158,16 +158,16 @@ mvPlayList.prototype = { }); }, - selectPlaybackMethod:function(){ - this.cur_clip.embed.selectPlaybackMethod(); + showPlayerselect:function(){ + this.cur_clip.embed.showPlayerselect(); }, closeDisplayedHTML:function(){ this.cur_clip.embed.closeDisplayedHTML(); }, - showVideoDownload:function(){ - this.cur_clip.embed.showVideoDownload(); + showDownload:function(){ + this.cur_clip.embed.showDownload(); }, - showEmbedCode:function(){ + showShare:function(){ var embed_code = '<script type="text/javascript" '+ 'src="'+mv_embed_path+'mv_embed.js"></script> '+"\n" + '<playlist id="'+this.id+'" '; @@ -178,7 +178,7 @@ mvPlayList.prototype = { embed_code+= this.data.htmlEntities(); embed_code+='<playlist/>'; } - this.cur_clip.embed.showEmbedCode(embed_code); + this.cur_clip.embed.showShare( embed_code ); }, getPlaylist:function(){ js_log("f:getPlaylist: " + this.srcType ); diff --git a/js2/mwEmbed/skins/baseSkin.js b/js2/mwEmbed/skins/baseSkin.js index dc81059256..e1d28034c1 100644 --- a/js2/mwEmbed/skins/baseSkin.js +++ b/js2/mwEmbed/skins/baseSkin.js @@ -1,397 +1 @@ -/* - * the base Skin Builder - * controlsBuilder: - * - */ -var ctrlBuilder = { - height:29, - supports:{ - 'options':true, - 'borders':true - }, - getControls:function( embedObj ){ - js_log('f:controlsBuilder:: opt:'); - this.id = (embedObj.pc)?embedObj.pc.pp.id:embedObj.id; - this.available_width = embedObj.playerPixelWidth(); - //make pointer to the embedObj - this.embedObj = embedObj; - var _this = this; - for(var i in embedObj.supports){ - _this.supports[i] = embedObj.supports[i]; - }; - - //check for close_captions tracks: - if( ( embedObj.roe || embedObj.timedTextSources() ) - && embedObj.show_meta_link ) - this.supports['closed_captions']=true; - - var o=''; - for( var i in this.components ){ - if( this.supports[i] ){ - if( this.available_width > this.components[i].w ){ - //special case with playhead don't add unless we have 60px - if( i == 'play_head' && ctrlBuilder.available_width < 60 ) - continue; - o+=this.components[i].o(); - this.available_width -= this.components[i].w; - }else{ - js_log('not enough space for control component:' + i); - } - } - } - //add the options menu - o+=this.components['mv_embedded_options'].o( embedObj ); - return o; - }, - /* - * addControlHooks - * to be run once controls are attached to the dom - */ - addControlHooks:function( embedObj ){ - //add in drag/seek hooks: - if(!embedObj.base_seeker_slider_offset && $j('#mv_seeker_slider_'+embedObj.id).get(0)) - embedObj.base_seeker_slider_offset = $j('#mv_seeker_slider_'+embedObj.id).get(0).offsetLeft; - - //js_log('looking for: #mv_seeker_slider_'+embedObj.id + "\n " + - // 'start sec: '+embedObj.start_time_sec + ' base offset: '+embedObj.base_seeker_slider_offset); - - var $tp=$j('#' + embedObj.id); - - //@todo: which object is being play()'d (or whatever) ? - //We select the element to attach the event to this way: - //$tp.find('.ui-icon-play').parent().click(function(){alert(0)}); or we can give the button itself a class - probably better. - - //add play hook for play-btn and large_play_button - $tp.find('.play-btn,.play-btn-large').unbind().btnBind().click(function(){ - $j('#' + embedObj.id).get(0).play(); - }) - //add recomend firefox if non-native playback: - if( embedObj.doNativeWarningCheck() ){ - $j('#dc_'+ embedObj.id).hover( - function(){ - if($j('#gnp_' + embedObj.id).length==0){ - $j(this).append('
    ' + - gM('mv_for_best_experience') + - '
    ' + - gM('mv_do_not_warn_again') + - '
    '); - $j('#ffwarn_'+embedObj.id).click(function(){ - if( $j(this).is(':checked') ){ - //set up a cookie for 5 days: - $j.cookie('dismissNativeWarn', true, { expires: 5 }); - //set the current instance - _global['dismissNativeWarn'] = true; - $j('#gnp_' + embedObj.id).fadeOut('slow'); - }else{ - _global['adismissNativeWarn'] = false; - $j.cookie('dismissNativeWarn', false); - } - - }); - } - if( ($j.cookie('dismissNativeWarn') !== true) && - _global['dismissNativeWarn'] === false ){ - $j('#gnp_' + embedObj.id).fadeIn('slow'); - } - }, - function(){ - $j('#gnp_' + embedObj.id).fadeOut('slow'); - } - ); - } - - if( $j.browser.msie && $j.browser.version <= 6){ - $j('#big_play_link_' + embedObj.id).pngFix(); - } - - //captions binding: - $j('#timed_text_' + embedObj.id).unbind().btnBind().click(function(){ - $j('#' + embedObj.id).get(0).showTextInterface(); - }); - - //options binding: - $j('#options_button_' + embedObj.id).unbind().btnBind().click(function(){ - $j('#' +embedObj.id).get(0).doOptionsHTML(); - }); - - //fullscreen binding: - $j('#fullscreen_'+embedObj.id).unbind().btnBind().click(function(){ - $j('#' +embedObj.id).get(0).fullscreen(); - }); - - js_log(" should add slider binding: " + $j('#mv_play_head_'+embedObj.id).length) ; -// $j('#mv_play_head_'+embedObj.id).slider({ - $tp.find( '.j-scrubber' ).slider({ - range: "min", - value: 0, - min: 0, - max: 1000, - start: function(event, ui){ - var id = (embedObj.pc!=null)?embedObj.pc.pp.id:embedObj.id; - embedObj.userSlide=true; - $j('#big_play_link_'+id).fadeOut('fast'); - //if playlist always start at 0 - embedObj.start_time_sec = (embedObj.instanceOf == 'mvPlayList')?0: - npt2seconds(embedObj.getTimeReq().split('/')[0]); - }, - slide: function(event, ui) { - var perc = ui.value/1000; - embedObj.jump_time = seconds2npt( parseFloat( parseFloat(embedObj.getDuration()) * perc ) + embedObj.start_time_sec); - //js_log('perc:' + perc + ' * ' + embedObj.getDuration() + ' jt:'+ this.jump_time); - embedObj.setStatus( gM('seek_to')+' '+embedObj.jump_time ); - //update the thumbnail / frame - if(embedObj.isPlaying==false){ - embedObj.updateThumbPerc( perc ); - } - }, - change:function(event, ui){ - //only run the onChange event if done by a user slide: - if(embedObj.userSlide){ - embedObj.userSlide=false; - embedObj.seeking=true; - //stop the monitor timer (if we can) - if(embedObj.stopMonitor) - embedObj.stopMonitor(); - - var perc = ui.value/1000; - //set seek time (in case we have to do a url seek) - embedObj.seek_time_sec = npt2seconds( embedObj.jump_time, true ); - js_log('do jump to: '+embedObj.jump_time + ' perc:' +perc + ' sts:' + embedObj.seek_time_sec); - embedObj.doSeek(perc); - } - } - }); - //@todo: identify problem with volume button jumping... - $tp.find('.k-volume-slider').slider({ - range: "min", - value: 80, - min: 0, - max: 100, - slide: function(event, ui) { - embedObj.updateVolumen(ui.value/100); - }, - change: function(event, ui){ - var level = ui.value/100; - if (level==0) { - $tp.find('.k-volume span').addClass('ui-icon-volume-off'); - }else{ - $tp.find('.k-volume span').removeClass('ui-icon-volume-off'); - } - //only run the onChange event if done by a user slide: - if(embedObj.userSlide){ - embedObj.userSlide=false; - embedObj.seeking=true; -// var perc = ui.value/100; - embedObj.updateVolumen(level); - } - } - }); - //up the z-index of the default status indicator: -// $j('#mv_play_head_'+embedObj.id + ' .ui-slider-handle').css('z-index', 4); -// $j('#mv_play_head_'+embedObj.id + ' .ui-slider-range').addClass('ui-corner-all').css('z-index', 2); - //extended class list for jQuery ui themeing (we can probably refactor this with custom buffering highliter) - $j('#' + embedObj.id + ' .j-scrubber').prepend( ctrlBuilder.getMvBufferHtml() ); - - - //options menu - $tp.find('.k-menu').hide(); - $tp.find('.k-options').click(function(){ - var $ktxt = $j(this).find('.ui-icon-k-menu'); - var $kmenu = $tp.find('.k-menu'); - if( $kmenu.is(':visible') ){ - $kmenu.fadeOut("fast",function(){ - $ktxt.html ( gM('menu_btn') ); - }); - $tp.find('.play-btn-large').fadeIn('fast'); - }else{ - $kmenu.fadeIn("fast", function(){ - $ktxt.html ( gM('close_btn') ); - }); - $tp.find('.play-btn-large').fadeOut('fast'); - } - }); - - - //videoOptions: - $tp.find('.k-player-btn').click(function(){ - embedObj.selectPlaybackMethod(); - return false; - }); - - $tp.find('.k-download-btn').click(function(){ - embedObj.showVideoDownload(); - return false; - }); - - $tp.find('.k-share-btn').click(function(){ - embedObj.showEmbedCode(); - return false; - }); - $tp.find('.k-credits-btn').click(function(){ - //@@todo show credits menu screen; - return false; - }); - - //volume binding: - $tp.find('.k-volume').unbind().btnBind().click(function(){ - $tp.toggleMute(); - }); - - var hoverOverDelay=false; - /*$j('#volume_control_'+embedObj.id).unbind().btnBind().click(function(){ - $j('#' +embedObj.id).get(0).toggleMute(); - }); - .hover( - 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']){ - $j('#vol_container_' + embedObj.id).removeClass('vol_container_top').addClass('vol_container_below'); - } - - $j('#vol_container_' + embedObj.id).fadeIn('fast'); - hoverOverDelay = true; - }, - function(){ - hoverOverDelay= false; - setTimeout(function doHideVolume(){ - if(!hoverOverDelay){ - $j('#vol_container_' + embedObj.id).fadeOut('fast'); - } - }, 500); - } - ); - //Volumen Slider - $j('#volume_bar_'+embedObj.id).slider({ - orientation: "vertical", - range: "min", - value: 80, - min: 0, - max: 100, - slide: function(event, ui) { - var perc = ui.value/100; - //js_log('update volume:' + perc); - embedObj.updateVolumen(perc); - }, - change:function(event, ui){ - var perc = ui.value/100; - if (perc==0) { - $j('#volume_control_'+embedObj.id + ' span').removeClass('ui-icon-volume-on').addClass('ui-icon-volume-off'); - }else{ - $j('#volume_control_'+embedObj.id + ' span').removeClass('ui-icon-volume-off').addClass('ui-icon-volume-on'); - } - //only run the onChange event if done by a user slide: - if(embedObj.userSlide){ - embedObj.userSlide=false; - embedObj.seeking=true; - var perc = ui.value/100; - embedObj.updateVolumen(perc); - } - } - });*/ - - }, - getMvBufferHtml:function(){ - return '
    '; - }, - components:{ - 'borders':{ - 'w':8, - 'o':function(){ - return ''; - } - }, - 'mv_embedded_options':{ - 'w':0, - 'o':function( embedObj ){ - var o= '' + - '
    ' + - '' + - '
    ' + - '
    ' + - '

    ' + gM('chose_player')+'

    ' + - '
    ' + - '
    ' + - '

    ' + gM('download_clip')+'

    ' + - '
    ' + - '
    ' + - '

    ' + gM('share_this_video') + '

    ' + - '
    ' + - '
    ' + - '

    ' + gM('video_credits') + '

    ' + - '
    ' + - '
    ' + - '
    '; - return o; - } - }, - 'pause':{ - 'w':147, //28 147 - 'o':function(){ - return '' - } - }, - 'play_head':{ // scrubber - 'w':0, //special case (takes up remaining space) - 'o':function(){ - return '
    ' - } - }, - 'time_display':{ - 'w':36, - 'o':function(){ - return '
    ' + seconds2npt ( ctrlBuilder.embedObj.getDuration() ) + '
    '; - } - }, - 'volume_control':{ - 'w':47, - 'o':function(){ - return '' + - '
    '; - - //vertical volume control: - /* return ''; - */ - } - }, - 'closed_captions':{ - 'w':24, - 'o':function(){ - return '
    ' + - '
    '; - } - }, - 'fullscreen':{ - 'w':24, - 'o':function(){ - return '' - } - }, - 'options':{ - 'w':50, - 'o':function(){ - return '' - } - } - } -} \ No newline at end of file +//just a stub right now \ No newline at end of file diff --git a/js2/mwEmbed/skins/kskin/styles.css b/js2/mwEmbed/skins/kskin/styles.css index 58ed9cfe8c..8bfd31e123 100644 --- a/js2/mwEmbed/skins/kskin/styles.css +++ b/js2/mwEmbed/skins/kskin/styles.css @@ -13,13 +13,17 @@ .k-control-bar .k-options { width:50px; height:22px; text-transform:uppercase; margin-top:-2px; border: solid 1px #aaa; border-top:none; float:right; font: bold 11px arial,sans-serif; color:#555;} span.ui-icon.ui-icon-k-menu { width:auto; padding-left:2px; background:none; outline:none; cursor:default;} .k-menu { z-index:1; width:400px; height:300px; background:#181818; position:absolute;opacity:0.9;filter:alpha(opacity=90); top:0px; left:0px; display:none} /* h, w, top inline via jq top:15px*/ + ul.k-menu-bar{ height:128px; padding: 0 0 5px;position:absolute; bottom:5px;right:0px; list-style: none outside none; background: url(images/ksprite.png) -99px -104px no-repeat;} /* eventually: mtop inline via jq */ .k-menu-bar li a { display:block; width:49px; height:32px; margin-left:1px; text-indent:99999px; background: url(images/ksprite.png) -51px -110px no-repeat; overflow:hidden;} .k-menu-bar li a:hover { background-position: -1px -110px;} + .k-menu-bar li.k-download-btn a { background-position: -51px -141px;} -.k-menu-bar li.k-download-btn a:hover { background-position: -1px -141px;} +.k-menu-bar li.k-download-btn a:hover { background-position: -1px -141px;} + .k-menu-bar li.k-share-btn a { background-position: -51px -172px;} -.k-menu-bar li.k-share-btn a:hover { background-position: -1px -172px;} +.k-menu-bar li.k-share-btn a:hover { background-position: -1px -172px;} + .k-menu-bar li.k-credits-btn a { background-position: -51px -203px;} .k-menu-bar li.k-credits-btn a:hover { background-position: -1px -203px;} -- 2.20.1