From 4b1c8f81093d9905deaaf9f3b3a6aa7abf550382 Mon Sep 17 00:00:00 2001 From: Michael Dale Date: Wed, 19 Aug 2009 09:07:58 +0000 Subject: [PATCH] * updated kskin integration (still mostly broken) --- js2/mwEmbed/libEmbedVideo/embedVideo.js | 149 +++++++++++++----------- js2/mwEmbed/skins/kskin/styles.css | 139 +++++++++++----------- 2 files changed, 149 insertions(+), 139 deletions(-) diff --git a/js2/mwEmbed/libEmbedVideo/embedVideo.js b/js2/mwEmbed/libEmbedVideo/embedVideo.js index 6e4d5f772a..cf1b78cba7 100644 --- a/js2/mwEmbed/libEmbedVideo/embedVideo.js +++ b/js2/mwEmbed/libEmbedVideo/embedVideo.js @@ -47,7 +47,7 @@ loadGM({ "mv_generic_missing_plugin" : "You browser does not appear to support the following playback type : $1<\/b>
Visit the Playback Methods<\/a> page to download a player.
", "mv_for_best_experience" : "For a better video playback experience we recommend :
Firefox 3.5<\/a>.<\/b>", "mv_do_not_warn_again" : "Dissmiss for now.", - "players" : "Players" + "playerselect" : "Players" }); var default_video_attributes = { @@ -115,6 +115,13 @@ var ctrlBuilder = { 'options':true, 'borders':true }, + menu_items:[ + 'playerselect', + 'download', + 'share', + 'credits', + ], + default_menu_item:'download', getControls:function( embedObj ){ js_log('f:controlsBuilder:: opt:'); this.id = (embedObj.pc)?embedObj.pc.pp.id:embedObj.id; @@ -144,9 +151,7 @@ var ctrlBuilder = { js_log('not enough space for control component:' + i); } } - } - //add the options menu - o+=this.components['mv_embedded_options'].o( embedObj ); + } return o; }, /* @@ -300,9 +305,53 @@ var ctrlBuilder = { $j('#' + embedObj.id + ' .j-scrubber').prepend( ctrlBuilder.getMvBufferHtml() ); - //options menu - $tp.find('.k-menu').hide(); - $tp.find('.k-options').click(function(){ + //adds options and bindings: (we do this onClick for faster vidoe tag startup times) + var addMvOptions = function(){ + if($j('#' + embedObj.id + ' .k-menu').length != 0 ) + return false; + + $j('#' + embedObj.id).prepend( ctrlBuilder.components['mv_embedded_options'].o( embedObj ) ); + + //by default its hidden: + $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"); + + 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: + $tp.find('.k-options').click(function(){ + if($j('#' + embedObj.id + ' .k-menu').length == 0 ) + addMvOptions(); + var $ktxt = $j(this).find('.ui-icon-k-menu'); var $kmenu = $tp.find('.k-menu'); if( $kmenu.is(':visible') ){ @@ -316,28 +365,7 @@ var ctrlBuilder = { }); $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(){ @@ -414,25 +442,23 @@ var ctrlBuilder = { var o= '' + '
' + - '' + - '
' + - '
' + - '

' + gM('chose_player')+'

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

' + gM('download_clip')+'

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

' + gM('share_this_video') + '

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

' + gM('video_credits') + '

' + - '
' + + '
    '; + //output menu item containers: + for(i=0; i < ctrlBuilder.menu_items.length; i++){ + var mk = ctrlBuilder.menu_items[i]; + o+= '
  • ' + + '' + gM( mk ) +'
    • '; + } + o+='
' + + //we have to substract the width of the k-menu-bar + '
'; + + //output menu item containers: + for(i=0; i < ctrlBuilder.menu_items; i++){ + o+= '
'; + } + '
' + '
'; return o; @@ -2086,13 +2112,14 @@ embedVideo.prototype = { }); return false; //onclick action return false }, - selectPlaybackMethod:function(){ + selectPlaybackMethod:function( target ){ //get id (in case where we have a parent container) var this_id = (this.pc!=null)?this.pc.pp.id:this.id; var _this=this; // var out= '
'; var out= ''; + out+='

' + gM('chose_player') + '

'; var _this=this; //js_log('selected src'+ _this.media_element.selected_source.url); $j.each( this.media_element.getPlayableSources(), function(source_id, source){ @@ -2115,23 +2142,13 @@ embedVideo.prototype = { if (default_player) { -// out += ''; - out+='
' + - '

Choose Video Player

' + - '
    '; -// if( ! is_selected ) -// out+=''; -// out += source.getTitle()+ (is_selected?'':'') + ' '; - + out+='
      '; //output the player select code: var supporting_players = embedTypes.players.getMIMETypePlayers( source.getMIMEType() ); -// out+='
        '; + for(var i=0; i < supporting_players.length ; i++){ if( _this.selected_player.id == supporting_players[i].id && is_selected ){ -// out+='
      • '+ -// '' + -// supporting_players[i].getName() + - out+='
      • ' + supporting_players[i].getName() +'
        • '; + out+='
      • ' + supporting_players[i].getName() +'
        • '; }else{ //else gray plugin and the plugin with link to select // out+='
      • '+ @@ -2139,9 +2156,9 @@ embedVideo.prototype = { // ''+ // supporting_players[i].getName() + // ''+ - out+='
      • ' + - '' + - supporting_players[i].getName() + '
      • '; + out+='
      • ' + + '' + + supporting_players[i].getName() + '
      • '; } } out+='
      '; @@ -2149,7 +2166,7 @@ embedVideo.prototype = { out+= source.getTitle() + ' - no player available'; }); // out+='
'; - this.displayHTML(out); + $j(target).html(out); //set up the click bindings: $j('.sel_source').each(function(){ diff --git a/js2/mwEmbed/skins/kskin/styles.css b/js2/mwEmbed/skins/kskin/styles.css index e2108e8ef4..58ed9cfe8c 100644 --- a/js2/mwEmbed/skins/kskin/styles.css +++ b/js2/mwEmbed/skins/kskin/styles.css @@ -2,62 +2,62 @@ /* player styles */ .k-player { width:400px; height:340px; position:relative;} /* inline via jq */ .k-player * { padding:0; margin:0;} /* inline via jq */ - .k-edit-bar { } - .k-edit-bar a { width:33px; padding: 1px 0 0; display:block; text-align:center; font-weight:bold; color:#888; text-decoration:none; background:#F2F2F2;} +.k-edit-bar { } +.k-edit-bar a { width:33px; padding: 1px 0 0; display:block; text-align:center; font-weight:bold; color:#888; text-decoration:none; background:#F2F2F2;} - .k-video { width:400px; height:300px; background:#000; margin-bottom:1px;} /* h & w inline via jq */ - .k-control-bar { height:21px; padding: 2px 0 0 6px; margin-top:1px; background: url(images/ksprite.png) repeat-x 0 -81px; font: normal 11px arial,sans-serif; color:#555;} - .k-control-bar button, .k-control-bar div.ui-slider, .k-control-bar div.k-timer { float:left;} - .k-timer { margin-top:2px;} - .k-volume-slider { width:26px;} - .k-control-bar .k-options { width:50px; height:22px; 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 { width:400px; height:300px; background:#181818; position:absolute; top:0; left:0; 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-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-credits-btn a { background-position: -51px -203px;} - .k-menu-bar li.k-credits-btn a:hover { background-position: -1px -203px;} +.k-video { width:400px; height:300px; background:#000; margin-bottom:1px;} /* h & w inline via jq */ +.k-control-bar { height:21px; padding: 2px 0 0 6px; margin-top:1px; background: url(images/ksprite.png) repeat-x 0 -81px; font: normal 11px arial,sans-serif; color:#555;} +.k-control-bar button, .k-control-bar div.ui-slider, .k-control-bar div.k-timer { float:left;} +.k-timer { margin-top:2px;} +.k-volume-slider { width:26px;} +.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-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-credits-btn a { background-position: -51px -203px;} +.k-menu-bar li.k-credits-btn a:hover { background-position: -1px -203px;} .k-menu-screens { width:320px; padding: 13px 10px 15px 15px; float:left;} /* w & h inline via jq */ - .k-menu-screens h2 { padding: 0 0 5px 1px; clear:both; font-size:12px; color:#666;} - .k-menu-screens p { margin: 6px 0;} - .k-menu-screens a { ;} - .k-menu-screens a img { border:none;} - .k-menu-screens ul { padding:0; margin: 6px 0 0; list-style: none outside none;} +.k-menu-screens h2 { padding: 0 0 5px 1px; clear:both; font-size:12px; color:#666;} +.k-menu-screens p { margin: 6px 0;} +.k-menu-screens a { ;} +.k-menu-screens a img { border:none;} +.k-menu-screens ul { padding:0; margin: 6px 0 0; list-style: none outside none;} .k-edit-screen { width:370px; height:223px; padding-top:77px; text-align:center; background:#181818; color:#fff;} - .k-edit-screen div { } - .k-edit-screen a { color:#7BB8FC;} - .k-edit-screen a img { border:none;} +.k-edit-screen div { } +.k-edit-screen a { color:#7BB8FC;} +.k-edit-screen a img { border:none;} /* end player */ .k-slide-window { overflow:hidden;} -.k-screen.k-credits ul { float:left;} -.k-screen.k-credits li { height:39px; padding: 11px 11px 11px 11px; margin-bottom:12px; display:block; background:#333;} - .k-screen.k-credits li a { padding:0; background:none;} - .k-screen.k-credits li img { float:left; background:blue;} - .k-screen.k-credits li div { height:39px; padding-left:11px; floats:left; overflow:hidden;} +.k-menu-screens .menu-credits ul { float:left;} +.k-menu-screens .menu-credits li { height:39px; padding: 11px 11px 11px 11px; margin-bottom:12px; display:block; background:#333;} +.k-menu-screens .menu-credits li a { padding:0; background:none;} +.k-menu-screens .menu-credits li img { float:left; background:blue;} +.k-menu-screens .menu-credits li div { height:39px; padding-left:11px; floats:left; overflow:hidden;} - a.k-prev-credit, a.k-next-credit { width:65px; height:28px; margin: -13px auto -6px; display:block; background: url(images/ksprite.png) 0px -320px no-repeat;} - a.k-next-credit { margin: 0 0 1px; position:absolute; bottom:0; background-position: -0px -290px;} - a:hover.k-prev-credit { background-position: 0px -238px;} - a:hover.k-next-credit { background-position: 0px -260px;} +a.k-prev-credit, a.k-next-credit { width:65px; height:28px; margin: -13px auto -6px; display:block; background: url(images/ksprite.png) 0px -320px no-repeat;} +a.k-next-credit { margin: 0 0 1px; position:absolute; bottom:0; background-position: -0px -290px;} +a:hover.k-prev-credit { background-position: 0px -238px;} +a:hover.k-next-credit { background-position: 0px -260px;} - .k-logo { margin:8px 0 0 1px; display:block;} +.k-logo { margin:8px 0 0 1px; display:block;} - .k_field_wrap { border: solid 1px #444; margin-bottom:7px;} - .k-screen.k-share button { width:70px; padding:2px 5px 3px; border:1px solid #000; float:right; background: #D4D4D4 url(images/ksprite.png) no-repeat -32px 0; color:#000; float:right;} - .k-menu textarea { width:100%; height:15px; border: solid 2px #000; border-bottom:none; border-right:none; background:transparent; color:#ccc; overflow:hidden;} +.k_field_wrap { border: solid 1px #444; margin-bottom:7px;} +.k-screen.k-share button { width:70px; padding:2px 5px 3px; border:1px solid #000; float:right; background: #D4D4D4 url(images/ksprite.png) no-repeat -32px 0; color:#000; float:right;} +.k-menu textarea { width:100%; height:15px; border: solid 2px #000; border-bottom:none; border-right:none; background:transparent; color:#ccc; overflow:hidden;} - .k-screen.k-share div.ui-state-highlight { width:90px; padding:2px 5px; border-color:#554926; float:left; background:none; color:#FFE96E;} - .k-screen.k-share div.ui-state-highlight a { color:#FFE96E; font-weight:bold;} - .k-screen.k-share div.ui-state-highlight a:hover { } +.k-screen.k-share div.ui-state-highlight { width:90px; padding:2px 5px; border-color:#554926; float:left; background:none; color:#FFE96E;} +.k-screen.k-share div.ui-state-highlight a { color:#FFE96E; font-weight:bold;} +.k-screen.k-share div.ui-state-highlight a:hover { } .k-menu-screens li { height:14px; margin-bottom:6px;} .k-menu-screens li a { padding-left:22px; background:url(images/ksprite.png) no-repeat -85px -274px; text-decoration:none;} @@ -66,9 +66,6 @@ .k-options.ui-state-hover { color:blue;} -.k-players { display:none} -.k-credits { display:nones} - .ui-state-default .ui-icon, .ui-state-hover .ui-icon { background: url(images/ksprite.png) no-repeat 0 -48px;} .ui-state-default .ui-icon-play { background:url(images/ksprite.png) no-repeat 0 0;} .ui-state-hover .ui-icon-play { background-position: -16px 0;} @@ -77,34 +74,30 @@ .ui-state-hover .ui-icon-pause { background-position: -16px -17px;} - .ui-state-default .ui-icon-arrow-4-diag { background-position: 0 -32px;} /* fullscreen */ - .ui-state-hover .ui-icon-arrow-4-diag { background-position: -16px -32px;} - .ui-state-default .ui-icon-volume-on, .ui-state-hover .ui-icon-volume-off, { margin-left:-6px; background-position: -16px -48px;} - .ui-state-hover .ui-icon-volume-on, .ui-state-default .ui-icon-volume-off { margin-left:-6px; background-position: 0 -48px;} - - .k-control-bar .ui-slider { height:8px; border: solid 1px #eee; margin: 4px 10px 0 7px; position:relative; background:url(images/ksprite.png) repeat-x 0 -350px;} - .k-control-bar .ui-slider-handle { width:8px; height:8px; border: solid 1px #888; margin: -1px 0 0 -5px; display:block; position:relative; background: url(images/ksprite.png) no-repeat -67px -341px; position:absolute;} - .k-control-bar .ui-slider-range { height:8px; position:absolute; background: url(images/ksprite.png) repeat-x 0 -368px; -moz-border-radius:5px; -webkit-border-radius:5px;} - .k-control-bar .ui-slider-buffer { height:8px; position:absolute; background: url(images/ksprite.png) repeat-x 0 -359px; -moz-border-radius:5px; -webkit-border-radius:5px;} +.ui-state-default .ui-icon-arrow-4-diag { background-position: 0 -32px;} /* fullscreen */ +.ui-state-hover .ui-icon-arrow-4-diag { background-position: -16px -32px;} +.ui-state-default .ui-icon-volume-on, .ui-state-hover .ui-icon-volume-off, { margin-left:-6px; background-position: -16px -48px;} +.ui-state-hover .ui-icon-volume-on, .ui-state-default .ui-icon-volume-off { margin-left:-6px; background-position: 0 -48px;} + +.k-control-bar .ui-slider { height:8px; border: solid 1px #eee; margin: 4px 10px 0 7px; position:relative; background:url(images/ksprite.png) repeat-x 0 -350px;} +.k-control-bar .ui-slider-handle { width:8px; height:8px; border: solid 1px #888; margin: -1px 0 0 -5px; display:block; position:relative; background: url(images/ksprite.png) no-repeat -67px -341px; position:absolute;} +.k-control-bar .ui-slider-range { height:8px; position:absolute; background: url(images/ksprite.png) repeat-x 0 -368px; -moz-border-radius:5px; -webkit-border-radius:5px;} +.k-control-bar .ui-slider-buffer { height:8px; position:absolute; background: url(images/ksprite.png) repeat-x 0 -359px; -moz-border-radius:5px; -webkit-border-radius:5px;} - .k-control-bar .ui-slider.k-volume-slider { height:15px; margin: 2px 3px 0 -4px; /* ie = m: 3 3 0 -2 */ border:none; background-position: -66px -323px; -moz-border-radius:0px; -webkit-border-radius:0px;} - .k-control-bar .k-volume-slider a.ui-slider-handle { width:8px; height:18px; margin: -3px 5px 0 -1px; border:none; display:block; position:absolute; background:none;} - .k-control-bar .k-volume-slider a:hover.ui-slider-handle { border: solid 1px #999;} - .k-control-bar .k-volume-slider .ui-slider-range { height:17px; position:absolute; background: url(images/ksprite.png) repeat-x -66px -306px; -moz-border-radius:0; -webkit-border-radius:0;} - - .play-btn-large { width:120px; height:55px; background: url(images/ksprite.png) no-repeat 28px -433px; position:absolute; cursor:pointer;} /*.ui-state-default */ - .play-btn-large.ui-state-hover { background: url(images/ksprite.png) no-repeat 28px -377px; } +.k-control-bar .ui-slider.k-volume-slider { height:15px; margin: 2px 3px 0 -4px; /* ie = m: 3 3 0 -2 */ border:none; background-position: -66px -323px; -moz-border-radius:0px; -webkit-border-radius:0px;} +.k-control-bar .k-volume-slider a.ui-slider-handle { width:8px; height:18px; margin: -3px 5px 0 -1px; border:none; display:block; position:absolute; background:none;} +.k-control-bar .k-volume-slider a:hover.ui-slider-handle { border: solid 1px #999;} +.k-control-bar .k-volume-slider .ui-slider-range { height:17px; position:absolute; background: url(images/ksprite.png) repeat-x -66px -306px; -moz-border-radius:0; -webkit-border-radius:0;} - .k-volume.ui-state-hover { margin-left:6px; } +.play-btn-large { width:120px; height:55px; background: url(images/ksprite.png) no-repeat 28px -433px; position:absolute; cursor:pointer;} /*.ui-state-default */ +.play-btn-large.ui-state-hover { background: url(images/ksprite.png) no-repeat 28px -377px; } - /* move to ie css */ - .k-volume-slider span, span.ui-icon-play, span.ui-icon-volume-on, button.k-fullscreen { *margin-top:-1px;} - span.ui-icon-volume-on { *margin-left:0 !important;} - .ui-state-hover.k-volume { *margin-left:0 !important;} - span.ui-icon-k-menu { *margin-top:3px;} - .k-control-bar .ui-slider.k-volume-slider { *margin-left:-2px;} - /* end css */ +.k-volume.ui-state-hover { margin-left:6px; } - /* debug only ! */ - .k-menu-screens { display:none;} - /* end debug */ +/* move to ie css */ +.k-volume-slider span, span.ui-icon-play, span.ui-icon-volume-on, button.k-fullscreen { *margin-top:-1px;} +span.ui-icon-volume-on { *margin-left:0 !important;} +.ui-state-hover.k-volume { *margin-left:0 !important;} +span.ui-icon-k-menu { *margin-top:3px;} +.k-control-bar .ui-slider.k-volume-slider { *margin-left:-2px;} +/* end IE css */ -- 2.20.1