| Index: trunk/phase3/js2/mwEmbed/skins/kskin/styles.css |
| — | — | @@ -2,62 +2,62 @@ |
| 3 | 3 | /* player styles */
|
| 4 | 4 | .k-player { width:400px; height:340px; position:relative;} /* inline via jq */
|
| 5 | 5 | .k-player * { padding:0; margin:0;} /* inline via jq */
|
| 6 | | - .k-edit-bar { }
|
| 7 | | - .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;}
|
| | 6 | +.k-edit-bar { }
|
| | 7 | +.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;}
|
| 8 | 8 |
|
| 9 | | - .k-video { width:400px; height:300px; background:#000; margin-bottom:1px;} /* h & w inline via jq */
|
| 10 | | - .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;}
|
| 11 | | - .k-control-bar button, .k-control-bar div.ui-slider, .k-control-bar div.k-timer { float:left;}
|
| 12 | | - .k-timer { margin-top:2px;}
|
| 13 | | - .k-volume-slider { width:26px;}
|
| 14 | | - .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;}
|
| 15 | | - span.ui-icon.ui-icon-k-menu { width:auto; padding-left:2px; background:none; outline:none; cursor:default;}
|
| 16 | | - .k-menu { width:400px; height:300px; background:#181818; position:absolute; top:0; left:0; display:none} /* h, w, top inline via jq top:15px*/
|
| 17 | | - 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 */
|
| 18 | | - .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;}
|
| 19 | | - .k-menu-bar li a:hover { background-position: -1px -110px;}
|
| 20 | | - .k-menu-bar li.k-download-btn a { background-position: -51px -141px;}
|
| 21 | | - .k-menu-bar li.k-download-btn a:hover { background-position: -1px -141px;}
|
| 22 | | - .k-menu-bar li.k-share-btn a { background-position: -51px -172px;}
|
| 23 | | - .k-menu-bar li.k-share-btn a:hover { background-position: -1px -172px;}
|
| 24 | | - .k-menu-bar li.k-credits-btn a { background-position: -51px -203px;}
|
| 25 | | - .k-menu-bar li.k-credits-btn a:hover { background-position: -1px -203px;}
|
| | 9 | +.k-video { width:400px; height:300px; background:#000; margin-bottom:1px;} /* h & w inline via jq */
|
| | 10 | +.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;}
|
| | 11 | +.k-control-bar button, .k-control-bar div.ui-slider, .k-control-bar div.k-timer { float:left;}
|
| | 12 | +.k-timer { margin-top:2px;}
|
| | 13 | +.k-volume-slider { width:26px;}
|
| | 14 | +.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;}
|
| | 15 | +span.ui-icon.ui-icon-k-menu { width:auto; padding-left:2px; background:none; outline:none; cursor:default;}
|
| | 16 | +.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*/
|
| | 17 | +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 */
|
| | 18 | +.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;}
|
| | 19 | +.k-menu-bar li a:hover { background-position: -1px -110px;}
|
| | 20 | +.k-menu-bar li.k-download-btn a { background-position: -51px -141px;}
|
| | 21 | +.k-menu-bar li.k-download-btn a:hover { background-position: -1px -141px;}
|
| | 22 | +.k-menu-bar li.k-share-btn a { background-position: -51px -172px;}
|
| | 23 | +.k-menu-bar li.k-share-btn a:hover { background-position: -1px -172px;}
|
| | 24 | +.k-menu-bar li.k-credits-btn a { background-position: -51px -203px;}
|
| | 25 | +.k-menu-bar li.k-credits-btn a:hover { background-position: -1px -203px;}
|
| 26 | 26 |
|
| 27 | 27 | .k-menu-screens { width:320px; padding: 13px 10px 15px 15px; float:left;} /* w & h inline via jq */
|
| 28 | | - .k-menu-screens h2 { padding: 0 0 5px 1px; clear:both; font-size:12px; color:#666;}
|
| 29 | | - .k-menu-screens p { margin: 6px 0;}
|
| 30 | | - .k-menu-screens a { ;}
|
| 31 | | - .k-menu-screens a img { border:none;}
|
| 32 | | - .k-menu-screens ul { padding:0; margin: 6px 0 0; list-style: none outside none;}
|
| | 28 | +.k-menu-screens h2 { padding: 0 0 5px 1px; clear:both; font-size:12px; color:#666;}
|
| | 29 | +.k-menu-screens p { margin: 6px 0;}
|
| | 30 | +.k-menu-screens a { ;}
|
| | 31 | +.k-menu-screens a img { border:none;}
|
| | 32 | +.k-menu-screens ul { padding:0; margin: 6px 0 0; list-style: none outside none;}
|
| 33 | 33 |
|
| 34 | 34 | .k-edit-screen { width:370px; height:223px; padding-top:77px; text-align:center; background:#181818; color:#fff;}
|
| 35 | | - .k-edit-screen div { }
|
| 36 | | - .k-edit-screen a { color:#7BB8FC;}
|
| 37 | | - .k-edit-screen a img { border:none;}
|
| | 35 | +.k-edit-screen div { }
|
| | 36 | +.k-edit-screen a { color:#7BB8FC;}
|
| | 37 | +.k-edit-screen a img { border:none;}
|
| 38 | 38 |
|
| 39 | 39 | /* end player */
|
| 40 | 40 |
|
| 41 | 41 | .k-slide-window { overflow:hidden;}
|
| 42 | | -.k-screen.k-credits ul { float:left;}
|
| 43 | | -.k-screen.k-credits li { height:39px; padding: 11px 11px 11px 11px; margin-bottom:12px; display:block; background:#333;}
|
| 44 | | - .k-screen.k-credits li a { padding:0; background:none;}
|
| 45 | | - .k-screen.k-credits li img { float:left; background:blue;}
|
| 46 | | - .k-screen.k-credits li div { height:39px; padding-left:11px; floats:left; overflow:hidden;}
|
| | 42 | +.k-menu-screens .menu-credits ul { float:left;}
|
| | 43 | +.k-menu-screens .menu-credits li { height:39px; padding: 11px 11px 11px 11px; margin-bottom:12px; display:block; background:#333;}
|
| | 44 | +.k-menu-screens .menu-credits li a { padding:0; background:none;}
|
| | 45 | +.k-menu-screens .menu-credits li img { float:left; background:blue;}
|
| | 46 | +.k-menu-screens .menu-credits li div { height:39px; padding-left:11px; floats:left; overflow:hidden;}
|
| 47 | 47 |
|
| 48 | | - 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;}
|
| 49 | | - a.k-next-credit { margin: 0 0 1px; position:absolute; bottom:0; background-position: -0px -290px;}
|
| 50 | | - a:hover.k-prev-credit { background-position: 0px -238px;}
|
| 51 | | - a:hover.k-next-credit { background-position: 0px -260px;}
|
| | 48 | +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;}
|
| | 49 | +a.k-next-credit { margin: 0 0 1px; position:absolute; bottom:0; background-position: -0px -290px;}
|
| | 50 | +a:hover.k-prev-credit { background-position: 0px -238px;}
|
| | 51 | +a:hover.k-next-credit { background-position: 0px -260px;}
|
| 52 | 52 |
|
| 53 | | - .k-logo { margin:8px 0 0 1px; display:block;}
|
| | 53 | +.k-logo { margin:8px 0 0 1px; display:block;}
|
| 54 | 54 |
|
| 55 | | - .k_field_wrap { border: solid 1px #444; margin-bottom:7px;}
|
| 56 | | - .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;}
|
| 57 | | - .k-menu textarea { width:100%; height:15px; border: solid 2px #000; border-bottom:none; border-right:none; background:transparent; color:#ccc; overflow:hidden;}
|
| | 55 | +.k_field_wrap { border: solid 1px #444; margin-bottom:7px;}
|
| | 56 | +.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;}
|
| | 57 | +.k-menu textarea { width:100%; height:15px; border: solid 2px #000; border-bottom:none; border-right:none; background:transparent; color:#ccc; overflow:hidden;}
|
| 58 | 58 |
|
| 59 | | - .k-screen.k-share div.ui-state-highlight { width:90px; padding:2px 5px; border-color:#554926; float:left; background:none; color:#FFE96E;}
|
| 60 | | - .k-screen.k-share div.ui-state-highlight a { color:#FFE96E; font-weight:bold;}
|
| 61 | | - .k-screen.k-share div.ui-state-highlight a:hover { }
|
| | 59 | +.k-screen.k-share div.ui-state-highlight { width:90px; padding:2px 5px; border-color:#554926; float:left; background:none; color:#FFE96E;}
|
| | 60 | +.k-screen.k-share div.ui-state-highlight a { color:#FFE96E; font-weight:bold;}
|
| | 61 | +.k-screen.k-share div.ui-state-highlight a:hover { }
|
| 62 | 62 |
|
| 63 | 63 | .k-menu-screens li { height:14px; margin-bottom:6px;}
|
| 64 | 64 | .k-menu-screens li a { padding-left:22px; background:url(images/ksprite.png) no-repeat -85px -274px; text-decoration:none;}
|
| — | — | @@ -66,9 +66,6 @@ |
| 67 | 67 |
|
| 68 | 68 | .k-options.ui-state-hover { color:blue;}
|
| 69 | 69 |
|
| 70 | | -.k-players { display:none}
|
| 71 | | -.k-credits { display:nones}
|
| 72 | | -
|
| 73 | 70 | .ui-state-default .ui-icon, .ui-state-hover .ui-icon { background: url(images/ksprite.png) no-repeat 0 -48px;}
|
| 74 | 71 | .ui-state-default .ui-icon-play { background:url(images/ksprite.png) no-repeat 0 0;}
|
| 75 | 72 | .ui-state-hover .ui-icon-play { background-position: -16px 0;} |
| — | — | @@ -77,34 +74,30 @@ |
| 78 | 75 | .ui-state-hover .ui-icon-pause { background-position: -16px -17px;} |
| 79 | 76 | |
| 80 | 77 |
|
| 81 | | - .ui-state-default .ui-icon-arrow-4-diag { background-position: 0 -32px;} /* fullscreen */
|
| 82 | | - .ui-state-hover .ui-icon-arrow-4-diag { background-position: -16px -32px;}
|
| 83 | | - .ui-state-default .ui-icon-volume-on, .ui-state-hover .ui-icon-volume-off, { margin-left:-6px; background-position: -16px -48px;}
|
| 84 | | - .ui-state-hover .ui-icon-volume-on, .ui-state-default .ui-icon-volume-off { margin-left:-6px; background-position: 0 -48px;}
|
| 85 | | -
|
| 86 | | - .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;}
|
| 87 | | - .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;}
|
| 88 | | - .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;} |
| 89 | | - .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;}
|
| | 78 | +.ui-state-default .ui-icon-arrow-4-diag { background-position: 0 -32px;} /* fullscreen */
|
| | 79 | +.ui-state-hover .ui-icon-arrow-4-diag { background-position: -16px -32px;}
|
| | 80 | +.ui-state-default .ui-icon-volume-on, .ui-state-hover .ui-icon-volume-off, { margin-left:-6px; background-position: -16px -48px;}
|
| | 81 | +.ui-state-hover .ui-icon-volume-on, .ui-state-default .ui-icon-volume-off { margin-left:-6px; background-position: 0 -48px;}
|
| | 82 | + |
| | 83 | +.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;}
|
| | 84 | +.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;}
|
| | 85 | +.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;} |
| | 86 | +.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;}
|
| 90 | 87 |
|
| 91 | | - .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;}
|
| 92 | | - .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;}
|
| 93 | | - .k-control-bar .k-volume-slider a:hover.ui-slider-handle { border: solid 1px #999;}
|
| 94 | | - .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;}
|
| | 88 | +.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;}
|
| | 89 | +.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;}
|
| | 90 | +.k-control-bar .k-volume-slider a:hover.ui-slider-handle { border: solid 1px #999;}
|
| | 91 | +.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;}
|
| 95 | 92 |
|
| 96 | | - .play-btn-large { width:120px; height:55px; background: url(images/ksprite.png) no-repeat 28px -433px; position:absolute; cursor:pointer;} /*.ui-state-default */
|
| 97 | | - .play-btn-large.ui-state-hover { background: url(images/ksprite.png) no-repeat 28px -377px; }
|
| | 93 | +.play-btn-large { width:120px; height:55px; background: url(images/ksprite.png) no-repeat 28px -433px; position:absolute; cursor:pointer;} /*.ui-state-default */
|
| | 94 | +.play-btn-large.ui-state-hover { background: url(images/ksprite.png) no-repeat 28px -377px; }
|
| 98 | 95 |
|
| 99 | | - .k-volume.ui-state-hover { margin-left:6px; }
|
| | 96 | +.k-volume.ui-state-hover { margin-left:6px; }
|
| 100 | 97 |
|
| 101 | | - /* move to ie css */
|
| 102 | | - .k-volume-slider span, span.ui-icon-play, span.ui-icon-volume-on, button.k-fullscreen { *margin-top:-1px;}
|
| 103 | | - span.ui-icon-volume-on { *margin-left:0 !important;}
|
| 104 | | - .ui-state-hover.k-volume { *margin-left:0 !important;}
|
| 105 | | - span.ui-icon-k-menu { *margin-top:3px;}
|
| 106 | | - .k-control-bar .ui-slider.k-volume-slider { *margin-left:-2px;}
|
| 107 | | - /* end css */
|
| 108 | | -
|
| 109 | | - /* debug only ! */
|
| 110 | | - .k-menu-screens { display:none;}
|
| 111 | | - /* end debug */
|
| | 98 | +/* move to ie css */
|
| | 99 | +.k-volume-slider span, span.ui-icon-play, span.ui-icon-volume-on, button.k-fullscreen { *margin-top:-1px;}
|
| | 100 | +span.ui-icon-volume-on { *margin-left:0 !important;}
|
| | 101 | +.ui-state-hover.k-volume { *margin-left:0 !important;}
|
| | 102 | +span.ui-icon-k-menu { *margin-top:3px;}
|
| | 103 | +.k-control-bar .ui-slider.k-volume-slider { *margin-left:-2px;}
|
| | 104 | +/* end IE css */
|
| Index: trunk/phase3/js2/mwEmbed/libEmbedVideo/embedVideo.js |
| — | — | @@ -47,7 +47,7 @@ |
| 48 | 48 | "mv_generic_missing_plugin" : "You browser does not appear to support the following playback type : <b>$1<\/b><br \/>Visit the <a href=\"http : \/\/commons.wikimedia.org\/wiki\/Commons : Media_help\">Playback Methods<\/a> page to download a player.<br \/>", |
| 49 | 49 | "mv_for_best_experience" : "For a better video playback experience we recommend : <br \/><b><a href=\"http : \/\/www.mozilla.com\/en-US\/firefox\/upgrade.html?from=mwEmbed\">Firefox 3.5<\/a>.<\/b>", |
| 50 | 50 | "mv_do_not_warn_again" : "Dissmiss for now.", |
| 51 | | - "players" : "Players" |
| | 51 | + "playerselect" : "Players" |
| 52 | 52 | }); |
| 53 | 53 | |
| 54 | 54 | var default_video_attributes = { |
| — | — | @@ -115,6 +115,13 @@ |
| 116 | 116 | 'options':true, |
| 117 | 117 | 'borders':true |
| 118 | 118 | }, |
| | 119 | + menu_items:[ |
| | 120 | + 'playerselect', |
| | 121 | + 'download', |
| | 122 | + 'share', |
| | 123 | + 'credits', |
| | 124 | + ], |
| | 125 | + default_menu_item:'download', |
| 119 | 126 | getControls:function( embedObj ){ |
| 120 | 127 | js_log('f:controlsBuilder:: opt:'); |
| 121 | 128 | this.id = (embedObj.pc)?embedObj.pc.pp.id:embedObj.id; |
| — | — | @@ -144,9 +151,7 @@ |
| 145 | 152 | js_log('not enough space for control component:' + i); |
| 146 | 153 | } |
| 147 | 154 | } |
| 148 | | - } |
| 149 | | - //add the options menu |
| 150 | | - o+=this.components['mv_embedded_options'].o( embedObj ); |
| | 155 | + } |
| 151 | 156 | return o; |
| 152 | 157 | }, |
| 153 | 158 | /* |
| — | — | @@ -300,9 +305,53 @@ |
| 301 | 306 | $j('#' + embedObj.id + ' .j-scrubber').prepend( ctrlBuilder.getMvBufferHtml() ); |
| 302 | 307 | |
| 303 | 308 | |
| 304 | | - //options menu |
| 305 | | - $tp.find('.k-menu').hide(); |
| 306 | | - $tp.find('.k-options').click(function(){ |
| | 309 | + //adds options and bindings: (we do this onClick for faster vidoe tag startup times) |
| | 310 | + var addMvOptions = function(){ |
| | 311 | + if($j('#' + embedObj.id + ' .k-menu').length != 0 ) |
| | 312 | + return false; |
| | 313 | + |
| | 314 | + $j('#' + embedObj.id).prepend( ctrlBuilder.components['mv_embedded_options'].o( embedObj ) ); |
| | 315 | + |
| | 316 | + //by default its hidden: |
| | 317 | + $tp.find('.k-menu').hide(); |
| | 318 | + |
| | 319 | + //output menu-items: |
| | 320 | + for(i=0; i < ctrlBuilder.menu_items.length ; i++){ |
| | 321 | + $tp.find('.k-player-btn').click(function(){ |
| | 322 | + $target = $j('#' + embedObj.id + ' .k-menu-screens .menu-player'); |
| | 323 | + //gennerate the menu if not already done: |
| | 324 | + if( $target.children().length == 0 ) |
| | 325 | + embedObj.selectPlaybackMethod(); |
| | 326 | + |
| | 327 | + //now slide in the item: |
| | 328 | + if( $target.is(':visible') ) |
| | 329 | + $target.slideOut("fast"); |
| | 330 | + else |
| | 331 | + $target.slideIn("fast"); |
| | 332 | + |
| | 333 | + return false; |
| | 334 | + }); |
| | 335 | + } |
| | 336 | + $tp.find('.k-download-btn').click(function(){ |
| | 337 | + embedObj.showVideoDownload(); |
| | 338 | + return false; |
| | 339 | + }); |
| | 340 | + |
| | 341 | + $tp.find('.k-share-btn').click(function(){ |
| | 342 | + embedObj.showEmbedCode(); |
| | 343 | + return false; |
| | 344 | + }); |
| | 345 | + $tp.find('.k-credits-btn').click(function(){ |
| | 346 | + //@@todo show credits menu screen; |
| | 347 | + return false; |
| | 348 | + }); |
| | 349 | + } |
| | 350 | + |
| | 351 | + //options menu display: |
| | 352 | + $tp.find('.k-options').click(function(){ |
| | 353 | + if($j('#' + embedObj.id + ' .k-menu').length == 0 ) |
| | 354 | + addMvOptions(); |
| | 355 | + |
| 307 | 356 | var $ktxt = $j(this).find('.ui-icon-k-menu'); |
| 308 | 357 | var $kmenu = $tp.find('.k-menu'); |
| 309 | 358 | if( $kmenu.is(':visible') ){ |
| — | — | @@ -316,29 +365,8 @@ |
| 317 | 366 | }); |
| 318 | 367 | $tp.find('.play-btn-large').fadeOut('fast'); |
| 319 | 368 | } |
| 320 | | - }); |
| | 369 | + }); |
| 321 | 370 | |
| 322 | | - |
| 323 | | - //videoOptions: |
| 324 | | - $tp.find('.k-player-btn').click(function(){ |
| 325 | | - embedObj.selectPlaybackMethod(); |
| 326 | | - return false; |
| 327 | | - }); |
| 328 | | - |
| 329 | | - $tp.find('.k-download-btn').click(function(){ |
| 330 | | - embedObj.showVideoDownload(); |
| 331 | | - return false; |
| 332 | | - }); |
| 333 | | - |
| 334 | | - $tp.find('.k-share-btn').click(function(){ |
| 335 | | - embedObj.showEmbedCode(); |
| 336 | | - return false; |
| 337 | | - }); |
| 338 | | - $tp.find('.k-credits-btn').click(function(){ |
| 339 | | - //@@todo show credits menu screen; |
| 340 | | - return false; |
| 341 | | - }); |
| 342 | | - |
| 343 | 371 | //volume binding: |
| 344 | 372 | $tp.find('.k-volume').unbind().btnBind().click(function(){ |
| 345 | 373 | $tp.toggleMute(); |
| — | — | @@ -414,25 +442,23 @@ |
| 415 | 443 | var o= '' + |
| 416 | 444 | '<div class="k-menu ui-widget-content" ' + |
| 417 | 445 | 'style="width:' + embedObj.playerPixelWidth() + 'px; height:' + embedObj.playerPixelHeight() + 'px;">' + |
| 418 | | - '<ul class="k-menu-bar">' + |
| 419 | | - '<li class="k-players-btn"><a href="#player" title="'+ gM('players') +'">'+ gM('players') +'</a></li>' + |
| 420 | | - '<li class="k-download-btn"><a href="#player" title="'+ gM('download')+'">'+gM('download')+'</a></li>' + |
| 421 | | - '<li class="k-share-btn"><a href="#player" title="'+ gM('share')+'">'+gM('share')+'</a></li>' + |
| 422 | | - '<li class="k-credits-btn"><a href="#credits" title="'+ gM('credits')+'">'+gM('credits')+'</a></li>' + |
| 423 | | - '</ul>' + |
| 424 | | - '<div class="k-menu-screens" style="width:' + embedObj.playerPixelWidth() + 'px; height:' + embedObj.playerPixelHeight() + 'px;">' + |
| 425 | | - '<div class="k-screen k-players">' + |
| 426 | | - '<h2>' + gM('chose_player')+'</h2>' + |
| 427 | | - '</div>' + |
| 428 | | - '<div class="k-screen k-download">' + |
| 429 | | - '<h2>' + gM('download_clip')+'</h2>' + |
| 430 | | - '</div>' + |
| 431 | | - '<div class="k-screen k-players">' + |
| 432 | | - '<h2>' + gM('share_this_video') + '</h2>' + |
| 433 | | - '</div>' + |
| 434 | | - '<div class="k-screen k-players">' + |
| 435 | | - '<h2>' + gM('video_credits') + '</h2>' + |
| 436 | | - '</div>' + |
| | 446 | + '<ul class="k-menu-bar">'; |
| | 447 | + //output menu item containers: |
| | 448 | + for(i=0; i < ctrlBuilder.menu_items.length; i++){ |
| | 449 | + var mk = ctrlBuilder.menu_items[i]; |
| | 450 | + o+= '<li class="k-' + mk + '-btn">' + |
| | 451 | + '<a href="#" title="' + gM( mk ) +'">' + gM( mk ) +'</a></li>'; |
| | 452 | + } |
| | 453 | + o+='</ul>' + |
| | 454 | + //we have to substract the width of the k-menu-bar |
| | 455 | + '<div class="k-menu-screens" style="width:' + ( embedObj.playerPixelWidth() -75) + |
| | 456 | + 'px; height:' + (embedObj.playerPixelHeight() - ctrlBuilder.height) + 'px;">'; |
| | 457 | + |
| | 458 | + //output menu item containers: |
| | 459 | + for(i=0; i < ctrlBuilder.menu_items; i++){ |
| | 460 | + o+= '<div class="menu-' + ctrlBuilder.menu_items[i] + '"></div>'; |
| | 461 | + } |
| | 462 | + |
| 437 | 463 | '</div>' + |
| 438 | 464 | '</div>'; |
| 439 | 465 | return o; |
| — | — | @@ -2086,13 +2112,14 @@ |
| 2087 | 2113 | }); |
| 2088 | 2114 | return false; //onclick action return false |
| 2089 | 2115 | }, |
| 2090 | | - selectPlaybackMethod:function(){ |
| | 2116 | + selectPlaybackMethod:function( target ){ |
| 2091 | 2117 | //get id (in case where we have a parent container) |
| 2092 | 2118 | var this_id = (this.pc!=null)?this.pc.pp.id:this.id; |
| 2093 | 2119 | |
| 2094 | 2120 | var _this=this; |
| 2095 | 2121 | // var out= '<span style="color:#FFF;background-color:black;"><blockquote style="background-color:black;">'; |
| 2096 | 2122 | var out= ''; |
| | 2123 | + out+='<h2>' + gM('chose_player') + '</h2>'; |
| 2097 | 2124 | var _this=this; |
| 2098 | 2125 | //js_log('selected src'+ _this.media_element.selected_source.url); |
| 2099 | 2126 | $j.each( this.media_element.getPlayableSources(), function(source_id, source){ |
| — | — | @@ -2115,23 +2142,13 @@ |
| 2116 | 2143 | |
| 2117 | 2144 | if (default_player) |
| 2118 | 2145 | { |
| 2119 | | -// out += '<img src="'+image_src+'"/>'; |
| 2120 | | - out+='<div class="k-screen k-players">' + |
| 2121 | | - ' <h2>Choose Video Player</h2>' + |
| 2122 | | - ' <ul>'; |
| 2123 | | -// if( ! is_selected ) |
| 2124 | | -// out+='<a href="#" class="sel_source" id="sc_' + source_id + '_' + default_player.id +'">'; |
| 2125 | | -// out += source.getTitle()+ (is_selected?'</a>':'') + ' '; |
| 2126 | | - |
| | 2146 | + out+=' <ul>'; |
| 2127 | 2147 | //output the player select code: |
| 2128 | 2148 | var supporting_players = embedTypes.players.getMIMETypePlayers( source.getMIMEType() ); |
| 2129 | | -// out+='<div id="player_select_list_' + source_id + '" class="player_select_list"><ul>'; |
| | 2149 | + |
| 2130 | 2150 | for(var i=0; i < supporting_players.length ; i++){ |
| 2131 | 2151 | if( _this.selected_player.id == supporting_players[i].id && is_selected ){ |
| 2132 | | -// out+='<li style="border-style:dashed;margin-left:20px;">'+ |
| 2133 | | -// '<img border="0" width="16" height="16" src="' + mv_skin_img_path + 'plugin.png">' + |
| 2134 | | -// supporting_players[i].getName() + |
| 2135 | | - out+='<li>' + supporting_players[i].getName() +'</li>'; |
| | 2152 | + out+='<li>' + supporting_players[i].getName() +'</li>'; |
| 2136 | 2153 | }else{ |
| 2137 | 2154 | //else gray plugin and the plugin with link to select |
| 2138 | 2155 | // out+='<li style="margin-left:20px;">'+ |
| — | — | @@ -2139,9 +2156,9 @@ |
| 2140 | 2157 | // '<img border="0" width="16" height="16" src="' + mv_skin_img_path + 'plugin_disabled.png">'+ |
| 2141 | 2158 | // supporting_players[i].getName() + |
| 2142 | 2159 | // '</a>'+ |
| 2143 | | - out+='<li>' + |
| 2144 | | - '<a href="#" id="dc_' + source_id + '_' + supporting_players[i].id +'">' + |
| 2145 | | - supporting_players[i].getName() + '</a><li>'; |
| | 2160 | + out+='<li>' + |
| | 2161 | + '<a href="#" id="dc_' + source_id + '_' + supporting_players[i].id +'">' + |
| | 2162 | + supporting_players[i].getName() + '</a><li>'; |
| 2146 | 2163 | } |
| 2147 | 2164 | } |
| 2148 | 2165 | out+='</ul></div>'; |
| — | — | @@ -2149,7 +2166,7 @@ |
| 2150 | 2167 | out+= source.getTitle() + ' - no player available'; |
| 2151 | 2168 | }); |
| 2152 | 2169 | // out+='</blockquote></span>'; |
| 2153 | | - this.displayHTML(out); |
| | 2170 | + $j(target).html(out); |
| 2154 | 2171 | |
| 2155 | 2172 | //set up the click bindings: |
| 2156 | 2173 | $j('.sel_source').each(function(){ |