* minor updates
authorMichael Dale <dale@users.mediawiki.org>
Wed, 19 Aug 2009 18:48:12 +0000 (18:48 +0000)
committerMichael Dale <dale@users.mediawiki.org>
Wed, 19 Aug 2009 18:48:12 +0000 (18:48 +0000)
js2/mwEmbed/example_usage/kPlayer_Simple_Video_Tag.html [new file with mode: 0644]
js2/mwEmbed/libEmbedVideo/embedVideo.js
js2/mwEmbed/mv_embed.js
js2/mwEmbed/skins/ctrlBuilder.js
js2/mwEmbed/skins/mvpcf/styles.css

diff --git a/js2/mwEmbed/example_usage/kPlayer_Simple_Video_Tag.html b/js2/mwEmbed/example_usage/kPlayer_Simple_Video_Tag.html
new file mode 100644 (file)
index 0000000..4dca7a6
--- /dev/null
@@ -0,0 +1,35 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+"http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+       <title>Simple Video Tag Usage</title>
+       <script type="text/javascript">
+               var mwConfig = {
+                       'skin_name': 'kskin',
+                       'jui_skin' : 'base'
+               };
+       </script>
+       <script type="text/javascript" src="../mv_embed.js?debug=true"></script>
+</head>
+<body>
+<h3> Simple Video Tag Usage </h3>
+once you include: mv_embed.js on any remote page you can then use the video tag like so: 
+<span id="default_attr">
+</span> <br />
+<br />
+  <table border="1" cellpadding="6" width="600">
+                   <tr>
+             <td valign="top"><video durationHint="70"
+                       style="width:400px;height:288px"
+                               poster="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/B-36_bomber.ogg/mid-B-36_bomber.ogg.jpg" 
+                               src="http://upload.wikimedia.org/wikipedia/commons/0/0d/B-36_bomber.ogg"></video></video></td>
+             <td valign="top"><b>Sample Embed</b><br />
+             Simple video Embed: 
+               <pre>&lt;video style="width:400px;height:288px" poster="http://metavid.org/w/index.php?action=ajax&rs=mv_frame_server&stream_id=71&t=1:23:16&size=400x300" 
+src="http://metavidstorage01.ucsc.edu/media/house_proceeding_07-18-06_00.ogg?t=1:23:16/1:23:44"&gt;&lt;/video&gt;</pre>
+             </td>
+             </table>
+       <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />&nbsp;
+  </body>
+</html>        
+
index 6dd6f6b..38d4879 100644 (file)
@@ -1336,15 +1336,15 @@ embedVideo.prototype = {
 
                if(this.controls){
                        js_log("f:getHTML:AddControls");
-                       html_code +='<div class="k-control-bar ui-widget-header ui-helper-clearfix">';
+                       html_code += '<div class="k-control-bar ui-widget-header ui-helper-clearfix">';
                        html_code += this.getControlsHTML();
-                       html_code +='</div>';
+                       html_code += '</div>';
                        //block out some space by encapulating the top level div
                        if($j(this).parents('.k-player').length==0){
                                $j(this).wrap('<div style="width:'+parseInt(this.width)+'px;height:'
                                        + (parseInt(this.height) + ctrlBuilder.height )+'px" ' +
                                        'id="k-player_' + this.id + '" class="k-player ui-widget"></div>'
-                                       );
+                               );
                        }
                }
 
@@ -1548,8 +1548,8 @@ embedVideo.prototype = {
        getPlayButton:function(id){
                if(!id)id=this.id;
                return '<div title="' + gM('play_clip') + '" class="ui-state-default play-btn-large" '+
-                       'style="left:'+((this.playerPixelWidth()-130)/2)+'px;'+
-                       'top:' + ((this.playerPixelHeight()-96)/2) + 'px;">'+
+                       'style="left:'+((this.playerPixelWidth()-120)/2)+'px;'+
+                       'top:' + ((this.playerPixelHeight()-56)/2) + 'px;">'+
                        '</div>';
        },
        doLinkBack:function(){
@@ -1576,19 +1576,26 @@ embedVideo.prototype = {
        showShare:function($target){    
                var     embed_code = this.getEmbeddingHTML();
                var o = '';
-               if(this.linkback){
-                       o+='<a class="email" href="'+this.linkback+'">Share Clip via Link</a> '+
-                       '<p>or</p> ';
-               }
-               o+='<span style="color:#FFF;font-size:14px;">Embed Clip in Blog or Site</span><br>'+
-                               '<span style="color:#FFF;font-size:12px;"><a style="color:red" href="http://metavid.org/wiki/Security_Notes_on_Remote_Embedding">'+
-                                       'Read This</a> before embeding.</span>'+
-                               '<div class="embed_code"> '+
-                                       '<textarea onClick="this.select();" id="embedding_user_html_' + this.id + '" name="embed">' +
-                                               embed_code+
-                                       '</textarea> '+
-                                       '<button onClick="$j(\'#' + this.id + '\').get(0).copyText(); return false;" class="copy_to_clipboard">Copy to Clipboard</button> '+
-                               '</div>';                       
+                //@todo: hook events to two a's for swapping in and out code for link vs. embed;
+                //       hook events for changing active class of li based on a.
+               o+= '<h2>Share This Video</h2>\n' +
+                       ' <ul>\n' +
+                       '  <li><a href="#" id="k-share-embed" class="active">Embed on your site or blog</a></li>\n';
+               if(this.linkback) {
+                 o+=   '  <li><a href="#" id="k-share-link">' + this.linkback + '</a></li>\n';
+                }
+               o+=     ' </ul>\n' +
+                       ' <div class="k_field_wrap"><textarea>' + embed_code + '</textarea></div>\n' +
+                       ' <button class="ui-state-default ui-corner-all"> Copy Code </button>\n' +
+                       ' <div class="ui-state-highlight ui-corner-all"><a href="http://metavid.org/wiki/Security_Notes_on_Remote_Embedding" target="_blank">' +
+                               'Read This</a> before embeding!</div>\n' +
+                       '</div>'
+
+//                '<textarea onClick="this.select();" id="embedding_user_html_' + this.id + '" name="embed">' +
+//                        embed_code+
+//                '</textarea> '+
+//                '<button onClick="$j(\'#' + this.id + '\').get(0).copyText(); return false;" class="copy_to_clipboard">Copy to Clipboard</button> '+
+
                js_log("should set share: " + o);
                $target.html(o);                
        },
@@ -2122,6 +2129,8 @@ embedVideo.prototype = {
        setStatus:function(value){
                var id = (this.pc)?this.pc.pp.id:this.id;
                //update status:
+               //check if short or long time desc: 
+               
                //$j('#mv_time_'+id).html(value);
                $j('#'+this.id + ' .k-timer').html(value);
        }
index 3fa4710..179bb51 100644 (file)
@@ -28,7 +28,8 @@ var MV_EMBED_VERSION = '1.0r19';
  * @@ more config valuse on the way ;)
  */
 var defaultMwConfig = {
-       'skin_name': 'mvpcf',
+       'skin_name': 'kskin',
+       'jui_skin': 'redmond',
        'video_size':'400x300'
 }
 
@@ -49,7 +50,7 @@ var mediaWiki_mvEmbed_path = 'js2/mwEmbed/';
 var global_player_list = new Array(); //the global player list per page
 var global_req_cb = new Array(); //the global request callback array
 var _global = this; //global obj
-var mv_init_done=false;
+var mv_init_done = false;
 var global_cb_count =0;
 
 /*parseUri class parses URIs:*/
@@ -62,7 +63,7 @@ if( !mv_embed_path ){
 }
 
 //setup the skin path:
-var mv_jquery_skin_path = mv_embed_path + 'jquery/jquery.ui/themes/redmond/';
+var mv_jquery_skin_path = mv_embed_path + 'jquery/jquery.ui/themes/' +mwConfig['jui_skin'] + '/';
 var mv_skin_img_path = mv_embed_path + 'skins/' + mwConfig['skin_name'] + '/images/';
 var mv_default_thumb_url = mv_skin_img_path + 'vid_default_thumb.jpg';
 
index 1045474..5fa2031 100644 (file)
@@ -1,6 +1,10 @@
 //set the dismissNativeWarn flag:
 _global['dismissNativeWarn'] = false;
 
+var baseSkin = function(){
+       return this.init();
+}
+
 var ctrlBuilder = {
        height:29,
        supports:{
@@ -14,6 +18,8 @@ var ctrlBuilder = {
                'credits',
        ],      
        default_menu_item:'download',
+       //define skin path 
+               
        getControls:function( embedObj ){
                js_log('f:controlsBuilder:: opt:');
                this.id = (embedObj.pc)?embedObj.pc.pp.id:embedObj.id;
@@ -410,7 +416,7 @@ var ctrlBuilder = {
                        'w':50,
                        'o':function(){
                                return '<button class="ui-state-default ui-corner-bl k-options" title="'+ gM('player_options') + '" >' +
-                                                       '<span class="ui-icon ui-icon-k-menu">'+ gM('menu_btn') + '</span>'
+                                                       gM('menu_btn') +
                                                '</button>'
                        }
                }
index f0f979a..8f98781 100644 (file)
@@ -130,7 +130,8 @@ div.floatleft, table.floatleft {
 */
 
 
-.videoPlayer .lButton {
+/*.videoPlayer .lButton {*/
+.k-player button{
        cursor:pointer;
        float:left;
        list-style:none outside none;
@@ -138,7 +139,7 @@ div.floatleft, table.floatleft {
        padding:4px 0;
        width: 24px;
        height:16px;
-       position:relative;
+       /*position:relative;*/
 }
 .videoPlayer .rButton {
        cursor:pointer;
@@ -156,13 +157,13 @@ div.floatleft, table.floatleft {
        height: 100%;
        width: 100%;
 }
-.videoPlayer .volume_icon {
-       float: right;
+/*.videoPlayer .volume_icon {*/
+.k-volume{
+       float: left;
        display: inline;
        width: 22px;
        height: 29px;
-       padding: 0 0 0 0;
-       
+       padding: 0 0 0 0;       
 }
 .volume_on {   
        background: url(images/player_volume_tag.png) 0 8px no-repeat;
@@ -189,8 +190,8 @@ div.floatleft, table.floatleft {
        cursor: pointer;
 }
 
-
-.videoPlayer .time {
+.k-timer{
+/*.videoPlayer .time {*/
        line-height: 32px;
        height: 29px;
        overflow: visible;
@@ -201,7 +202,8 @@ div.floatleft, table.floatleft {
        border:none;
 }
 
-.videoPlayer .play_head{
+/*.videoPlayer .play_head{*/
+.j-scrubber{
        float: left;
        display: inline;        
        height: 10px;
@@ -209,7 +211,8 @@ div.floatleft, table.floatleft {
        margin-top:10px;        
 }
 
-.play_head .ui-slider-handle{
+/*.play_head .ui-slider-handle{*/
+.j-scrubber .ui-slider-handle{
        width:10px;
        height:15px;
        margin-left:-5px;
@@ -741,120 +744,6 @@ ui-widget-overlay{
        left:-1px;              
 }
 
-
-/*** 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-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; border:none; 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 { width:36px; margin-top:2px; overflow:hidden;}
-  .k-volume-slider { width:26px;}
-  .k-control-bar .k-options { width:50px; height:22px; margin-top:-2px; border: solid 1px #aaa !important; border-top:none; float:right; font: bold 11px arial,sans-serif; color:#555;}
-   .k-player span.ui-icon.ui-icon-k-menu { width:auto; padding-left:2px; text-indent:0; background:none; outline:none; cursor:default;}
-
- .k-menu { width:400px; height:300px; border:none; background:#181818; position:absolute; top:0; left:0; z-index:999; 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-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;}
-
-/* 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;}
- 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_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-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;}
-.k-menu-screens li a.active, .k-menu-screens li a:hover.active  { background-position: -85px -247px;}
-.k-menu-screens li a:hover { background-position: -85px -260px;}
-
-.k-options.ui-state-hover { color:blue;}
-
-.k-players { display:none}
-.k-credits { display:nones}
-
-.k-player .ui-state-default .ui-icon, .k-player .ui-state-hover .ui-icon { background: url(images/ksprite.png) no-repeat 0 -48px;}
-.k-player .ui-state-default .ui-icon-play { background:url(images/ksprite.png) no-repeat 0 0;}
-.k-player .ui-state-hover .ui-icon-play { background-position: -16px 0;}
-
-.k-player .ui-state-default .ui-icon-pause { background:url(images/ksprite.png) no-repeat 0 -17px;}
-.k-player .ui-state-hover .ui-icon-pause { background-position: -16px -17px;}
- .k-player .ui-state-default .ui-icon-arrow-4-diag { background-position: 0 -32px;} /* fullscreen */
- .k-player .ui-state-hover .ui-icon-arrow-4-diag { background-position: -16px -32px;}
- .k-player .ui-state-default .ui-icon-volume-on,  .k-player .ui-state-hover .ui-icon-volume-off,  { margin-left:-6px; background-position: -16px -48px;}
- .k-player .ui-state-hover .ui-icon-volume-on, .k-player .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; top:0;      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; border:none; 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-volume.ui-state-hover { margin-left:6px; }
-
-
- /* redmond overrides */
- .k-player button.ui-state-default, button.ui-state-hover { background:none; border:none;}
-
- /* end redmond overrides*/
-
-
- /* 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 */
-
-
-/*** end player ***/
\ No newline at end of file
+.play-btn{
+       width: 24px;
+}
\ No newline at end of file