r62904 MediaWiki - Code Review archive

Repository:	MediaWiki
Revision:	< r62903‎ \| r62904 \| r62905 >
Date:	01:44, 24 February 2010
Author:	dale
Status:	deferred
Tags:
Comment:	* some menu style fixes * removed extra dc_ container * updated thumbnail logic * added stubs for "fullscreen" support
Modified paths:	/branches/js2-work/phase3/js/mwEmbed/modules/EmbedPlayer/javaEmbed.js (modified) (history) /branches/js2-work/phase3/js/mwEmbed/modules/EmbedPlayer/mw.EmbedPlayer.js (modified) (history) /branches/js2-work/phase3/js/mwEmbed/modules/EmbedPlayer/nativeEmbed.js (modified) (history) /branches/js2-work/phase3/js/mwEmbed/modules/Sequencer/mw.Sequencer.js (modified) (history) /branches/js2-work/phase3/js/mwEmbed/modules/TimedText/jquery.menu/jquery.menu.js (modified) (history) /branches/js2-work/phase3/js/mwEmbed/modules/TimedText/mw.TimedText.js (modified) (history) /branches/js2-work/phase3/js/mwEmbed/modules/TimedText/mw.TimedTextEdit.js (modified) (history) /branches/js2-work/phase3/js/mwEmbed/mwEmbed.js (modified) (history) /branches/js2-work/phase3/js/mwEmbed/skins/common/common.css (modified) (history) /branches/js2-work/phase3/js/mwEmbed/skins/ctrlBuilder.js (modified) (history) /branches/js2-work/phase3/js/mwEmbed/skins/kskin/EmbedPlayer.css (modified) (history) /branches/js2-work/phase3/js/mwEmbed/skins/kskin/kskinConfig.js (modified) (history) /branches/js2-work/phase3/js/mwEmbed/skins/mvpcf/EmbedPlayer.css (modified) (history) /branches/js2-work/phase3/js/mwEmbed/tests/Player_Themable.html (modified) (history) /branches/js2-work/phase3/js/mwEmbed/tests/selenium_tests/amw-all-providers.html (modified) (history)

Diff [purge]

Index: branches/js2-work/phase3/js/mwEmbed/tests/Player_Themable.html
—	—	@@ -9,10 +9,11 @@
10	10	<link rel="stylesheet" href="../skins/styles.css" type="text/css" media="screen" />
11	11	<link rel="stylesheet" href="../skins/mvpcf/EmbedPlayer.css" type="text/css" media="screen" />
12	12	<link rel="stylesheet" href="../skins/kskin/EmbedPlayer.css" type="text/css" media="screen" />
	13	+ <script type="text/javascript" src="../mwEmbed.js?debug=true"></script>
13	14
14		~~- <script type="text/javascript" src="../jsScriptLoader.php?debug=true&class=mwEmbed"></script>~~
15	15	-->
16		~~- <script type="text/javascript" src="../mwEmbed.js?debug=true"></script>~~
	16	+
	17	+<script type="text/javascript" src="../jsScriptLoader.php?debug=true&class=mwEmbed"></script>
17	18
18	19	</head>
19	20	<script type="text/javascript">
Index: branches/js2-work/phase3/js/mwEmbed/tests/selenium_tests/amw-all-providers.html
—	—	@@ -43,7 +43,7 @@
44	44	</tr>
45	45	<tr>
46	46	<td>click</td>
47		~~- <td>//div[@id='rsd_media_filter']/div[2]</td>~~
	47	+ <td>//div[@id='rsd_media_filter']/div</td>
48	48	<td></td>
49	49	</tr>
50	50	<tr>
Index: branches/js2-work/phase3/js/mwEmbed/skins/kskin/EmbedPlayer.css
—	—	@@ -283,10 +283,6 @@
284	284	margin: 6px 0;
285	285	}
286	286
287		~~-.k-menu-screens a {;~~
288		-
289		-}
290		-
291	287	.k-menu-screens a img {
292	288	border: none;
293	289	}
Index: branches/js2-work/phase3/js/mwEmbed/skins/kskin/kskinConfig.js
—	—	@@ -53,18 +53,7 @@
54	54	'timeDisplay': {
55	55	'w':45
56	56	},
57		-
58		- /**
59		~~- * The playhead html~~
60		~~- */~~
61		~~- /*'playHead': {~~
62		~~- 'w':0, // special case (takes up remaining space)~~
63		~~- 'o':function( ctrlObj ) {~~
64		~~- $j( '<div />' )~~
65		~~- .addClass( "play_head" )~~
66		~~- .css( "width", parseInt( ctrlObj.available_width - 10 ) + 'px' )~~
67		~~- }~~
68		~~- },*/~~
	57	+
69	58	'optionsMenu': {
70	59	'w' : 0,
71	60	'o' : function( ctrlObj ) {
—	—	@@ -111,15 +100,15 @@
112	101
113	102	var $menuScreens = $j( '<div />' )
114	103	.addClass( 'k-menu-screens' )
115		~~- .css({~~
	104	+ .css( {
116	105	'width' : ( ctrlObj.getOverlayWidth() - 75 ),
117	106	'height' : ( ctrlObj.getOverlayHeight() - ctrlObj.getControlBarHeight() )
118		~~- })~~
	107	+ } )
119	108	for ( var menuItem in ctrlObj.supportedMenuItems ) {
120		~~- $menuScreens.append(~~
	109	+ $menuScreens.append(
121	110	$j( '<div />' )
122	111	.addClass( 'menu-screen menu-' + menuItem )
123		~~- );~~
	112	+ );
124	113	}
125	114
126	115	// Add the menuScreens to the menuOverlay
Index: branches/js2-work/phase3/js/mwEmbed/skins/ctrlBuilder.js
—	—	@@ -19,10 +19,10 @@
20	20	// Parent css Class name
21	21	playerClass : 'mv-player',
22	22
23		~~- // Long string display of time value~~
	23	+ // Long string display of time value
24	24	longTimeDisp: true,
25	25
26		~~- // If the options menu outside of player~~
	26	+ // If the options menu outside of player
27	27	external_options : true,
28	28
29	29	// Default volume layout is "vertical"
—	—	@@ -161,8 +161,56 @@
162	162	}
163	163	}
164	164	},
165		-
	165	+
166	166	/**
	167	+ * Do full-screen mode
	168	+ */
	169	+ toggleFullscreen: function(){
	170	+ mw.log(" ctrlBuilder :: toggle full-screen ");
	171	+
	172	+ // Add the black overlay:
	173	+ $j( '<div />' )
	174	+ .addClass( 'mw-fullscreen-overlay' )
	175	+ // Set some arbitrary high z-index
	176	+ .css('z-index', '999998' )
	177	+ .appendTo('body')
	178	+ .hide()
	179	+ .fadeIn("slow");
	180	+
	181	+ // Setup target height width based on window
	182	+ if( fullWidth )
	183	+ var fullWidth = $j(window).width() - 5 ;
	184	+
	185	+ // Animate video or poster to requested size:
	186	+ $j( this.embedPlayer ).css( {
	187	+ 'position' : 'relative',
	188	+ 'z-index' : '999999'
	189	+ } )
	190	+ // Animate a zoom ( while keeping aspect )
	191	+ .animate( {
	192	+ 'top' : '0px',
	193	+ 'left' : '0px',
	194	+ 'width' : fullWidth,
	195	+ 'height' : fullWidth * ( this.embedPlayer.height / this.embedPlayer.width )
	196	+ } );
	197	+
	198	+
	199	+ /*
	200	+ -moz-transform:scale(1.97833) translate(-5px, 4px);
	201	+ -moz-transform-origin:50.0852% 45.6621%;
	202	+ left:0;
	203	+ position:relative;
	204	+ top:0;
	205	+ */
	206	+
	207	+ // bind display control on mouse-move
	208	+
	209	+ // bind resize clip to reize window
	210	+
	211	+ // bind escape to restore clip resolution
	212	+ },
	213	+
	214	+ /**
167	215	* Get minimal width for interface overlay
168	216	*/
169	217	getOverlayWidth: function( ) {
—	—	@@ -263,12 +311,12 @@
264	312	var embedPlayer = this.embedPlayer;
265	313	var _this = this;
266	314
267		~~- $j( '#dc_' + embedPlayer.id ).hover(~~
	315	+ $j( embedPlayer ).hover(
268	316	function() {
269	317	if ( $j( '#gnp_' + embedPlayer.id ).length == 0 ) {
270	318	var toppos = ( embedPlayer.instanceOf == 'mvPlayList' ) ? 25 : 10;
271	319
272		~~- $j( this ).append(~~
	320	+ $j( this ).append(
273	321	$j('<div />')
274	322	.attr( {
275	323	'id': "gnp_" + embedPlayer.id
—	—	@@ -284,7 +332,8 @@
285	333	'right' : '10px'
286	334	})
287	335	.html( gM( 'mwe-for_best_experience' ) )
288		~~- );~~
	336	+ )
	337	+
289	338	$target_warning = $j( '#gnp_' + embedPlayer.id );
290	339
291	340	$target_warning.append(
—	—	@@ -440,9 +489,9 @@
441	490	gM( 'mwe-download' ),
442	491	'disk',
443	492	function( ) {
444		~~- ctrlObj.displayOverlay( gM('mwe-loading_txt' ) );~~
	493	+ ctrlObj.displayOverlay( gM('mwe-loading_txt' ) );
445	494	// Call show download with the target to be populated
446		~~- ctrlObj.showDownload(~~
	495	+ ctrlObj.showDownload(
447	496	ctrlObj.embedPlayer.$interface.find( '.overlay-content' )
448	497	);
449	498	}
—	—	@@ -469,10 +518,10 @@
470	519	closeMenuOverlay: function(){
471	520	var _this = this;
472	521	var embedPlayer = this.embedPlayer;
473		~~- var $overlay = embedPlayer.$interface.find( '.overlay-win,.ui-widget-overlay' );~~
	522	+ var $overlay = embedPlayer.$interface.find( '.overlay-win,.ui-widget-overlay,.ui-widget-shadow' );
474	523
475	524	$overlay.fadeOut( "slow", function() {
476		~~- $overlay.remove();~~
	525	+ $overlay.remove();
477	526	} );
478	527	// Show the big play button:
479	528	embedPlayer.$interface.find( '.play-btn-large' ).fadeIn( 'slow' );
—	—	@@ -498,7 +547,7 @@
499	548	// Check if overlay window is already present:
500	549	if ( embedPlayer.$interface.find( '.overlay-win' ).length != 0 ) {
501	550	//Update the content
502		~~- embedPlayer.$interface.find( '.overlay-win' ).html(~~
	551	+ embedPlayer.$interface.find( '.overlay-content' ).html(
503	552	overlayContent
504	553	);
505	554	return ;
—	—	@@ -525,20 +574,21 @@
526	575	.buttonHover()
527	576	.click( function() {
528	577	_this.closeMenuOverlay();
529		~~- } )~~
	578	+ } );
530	579
	580	+ var overlayMenuCss = {
	581	+ 'height' : 200,
	582	+ 'width' : 250,
	583	+ 'position' : 'absolute',
	584	+ 'left' : '10px',
	585	+ 'top': '15px',
	586	+ 'overflow' : 'auto',
	587	+ 'padding' : '4px',
	588	+ 'z-index' : 2
	589	+ };
531	590	$overlayMenu = $j('<div />')
532	591	.addClass( 'overlay-win ui-state-default ui-widget-header ui-corner-all' )
533		~~- .css({~~
534		~~- 'height' : 200,~~
535		~~- 'width' : 250,~~
536		~~- 'position' : 'absolute',~~
537		~~- 'left' : '10px',~~
538		~~- 'top': '15px',~~
539		~~- 'overflow' : 'auto',~~
540		~~- 'padding' : '4px',~~
541		~~- 'z-index' : 1~~
542		~~- })~~
	592	+ .css( overlayMenuCss )
543	593	.append(
544	594	$closeButton,
545	595	$j('<div />')
—	—	@@ -546,8 +596,20 @@
547	597	.append( overlayContent )
548	598	)
549	599
	600	+ // Clone the overlay menu css:
	601	+ var shadowCss = jQuery.extend( true, {}, overlayMenuCss );
	602	+ shadowCss['height' ] = 210;
	603	+ shadowCss['width' ] = 260;
	604	+ shadowCss[ 'z-index' ] = 1;
	605	+ $overlayShadow = $j( '<div />' )
	606	+ .addClass('ui-widget-shadow ui-corner-all')
	607	+ .css( shadowCss );
	608	+
550	609	// Append the overlay menu to the player interface
551		~~- embedPlayer.$interface.prepend( $overlayMenu )~~
	610	+ embedPlayer.$interface.prepend(
	611	+ $overlayMenu,
	612	+ $overlayShadow
	613	+ )
552	614	.find( '.overlay-win' )
553	615	.fadeIn( "slow" );
554	616
—	—	@@ -606,11 +668,7 @@
607	669	),
608	670
609	671	$j('<br />'),
610		-
611		~~- $j('<span />')~~
612		~~- .html(~~
613		~~- gM( 'mwe-read_before_embed' )~~
614		~~- ),~~
	672	+ $j('<br />'),
615	673
616	674	$j('<button />')
617	675	.addClass( 'ui-state-default ui-corner-all copycode' )
—	—	@@ -622,7 +680,8 @@
623	681	CopiedTxt = document.selection.createRange();
624	682	CopiedTxt.execCommand( "Copy" );
625	683	}
626		~~- } )~~
	684	+ } )
	685	+
627	686	);
628	687	return $shareInterface;
629	688	},
—	—	@@ -658,42 +717,61 @@
659	718	// output the player select code:
660	719	var supporting_players = mw.EmbedTypes.players.getMIMETypePlayers( source.getMIMEType() );
661	720
662		~~- for ( var i = 0; i < supporting_players.length ; i++ ) {~~
663		~~- var $playerLink = $j( '<a />')~~
664		~~- .attr({~~
665		~~- 'href' : '#',~~
666		~~- 'rel' : 'sel_source',~~
667		~~- 'id' : 'sc_' + source_id + '_' + supporting_players[i].id~~
668		~~- })~~
669		~~- .text( supporting_players[i].getName() )~~
670		~~- .click( function() {~~
671		~~- var iparts = $j( this ).attr( 'id' ).replace(/sc_/ , '' ).split( '_' );~~
672		~~- var source_id = iparts[0];~~
673		~~- var default_player_id = iparts[1];~~
674		~~- mw.log( 'source id: ' + source_id + ' player id: ' + default_player_id );~~
675		-
676		~~- embedPlayer.ctrlBuilder.closeMenuOverlay();~~
677		~~- embedPlayer.mediaElement.selectSource( source_id );~~
678		-
679		~~- mw.EmbedTypes.players.setPlayerPreference(~~
680		~~- default_player_id,~~
681		~~- embedPlayer.mediaElement.sources[ source_id ].getMIMEType()~~
	721	+ for ( var i = 0; i < supporting_players.length ; i++ ) {
	722	+
	723	+ // Add link to select the player if not already selected )
	724	+ if( embedPlayer.selected_player.id == supporting_players[i].id && is_selected ) {
	725	+ // Active player ( no link )
	726	+ $playerLine = $j( '<span />' )
	727	+ .text(
	728	+ supporting_players[i].getName()
	729	+ )
	730	+ .addClass( 'ui-state-highlight ui-corner-all' );
	731	+
	732	+ } else {
	733	+ // Non active player add link to select:
	734	+ $playerLine = $j( '<a />')
	735	+ .attr({
	736	+ 'href' : '#',
	737	+ 'rel' : 'sel_source',
	738	+ 'id' : 'sc_' + source_id + '_' + supporting_players[i].id
	739	+ })
	740	+ .addClass( 'ui-corner-all')
	741	+ .text( supporting_players[i].getName() )
	742	+ .click( function() {
	743	+ var iparts = $j( this ).attr( 'id' ).replace(/sc_/ , '' ).split( '_' );
	744	+ var source_id = iparts[0];
	745	+ var default_player_id = iparts[1];
	746	+ mw.log( 'source id: ' + source_id + ' player id: ' + default_player_id );
	747	+
	748	+ embedPlayer.ctrlBuilder.closeMenuOverlay();
	749	+ embedPlayer.mediaElement.selectSource( source_id );
	750	+
	751	+ mw.EmbedTypes.players.setPlayerPreference(
	752	+ default_player_id,
	753	+ embedPlayer.mediaElement.sources[ source_id ].getMIMEType()
	754	+ );
	755	+
	756	+ // Issue a stop
	757	+ embedPlayer.stop();
	758	+
	759	+ // Don't follow the # link:
	760	+ return false;
	761	+ } )
	762	+ .hover(
	763	+ function(){
	764	+ $j( this ).addClass('ui-state-active')
	765	+ },
	766	+ function(){
	767	+ $j( this ).removeClass('ui-state-active')
	768	+ }
682	769	);
683		-
684		~~- // Issue a stop~~
685		~~- embedPlayer.stop();~~
686		-
687		~~- // Don't follow the # link:~~
688		~~- return false;~~
689		~~- } );~~
	770	+ }
690	771
691		~~- if ( embedPlayer.selected_player.id == supporting_players[i].id && is_selected ) {~~
692		~~- $playerLink~~
693		~~- .addClass('active' );~~
694		~~- }~~
	772	+ // Add the player line to the player list:
695	773	$playerList.append(
696	774	$j( '<li />' ).append(
697		~~- $playerLink~~
	775	+ $playerLine
698	776	)
699	777	);
700	778	}
—	—	@@ -835,54 +913,29 @@
836	914	},
837	915
838	916	/**
839		~~- * The options for the player, includes player selection,~~
840		~~- * download, and share options~~
841		~~- */~~
842		~~- 'optionsMenu': {~~
843		~~- 'w' : 0,~~
844		~~- 'o' : function( ctrlObj ) {~~
845		~~- /*var o = '<div id="mv_vid_options_' + ctrlObj.embedPlayer.id + '" class="videoOptions">' +~~
846		~~- '<div class="videoOptionsTop"></div>' +~~
847		~~- '<div class="videoOptionsBox">' +~~
848		~~- '<div class="block">' +~~
849		~~- '<h6>Video Options</h6>' +~~
850		~~- '</div>' +~~
851		~~- '<div class="block">' +~~
852		~~- '<p class="short_match vo_selection"><a href="#"><span>' + gM( 'mwe-chose_player' ) + '</span></a></p>' +~~
853		~~- '<p class="short_match vo_download"><a href="#"><span>' + gM( 'mwe-download' ) + '</span></a></p>' +~~
854		~~- '<p class="short_match vo_showcode"><a href="#"><span>' + gM( 'mwe-share' ) + '</span></a></p>';~~
855		-
856		~~- // link to the stream page if we are not already there:~~
857		~~- if ( ( ctrlObj.embedPlayer.roe \|\| ctrlObj.embedPlayer.linkback ) && typeof mv_stream_interface == 'undefined' )~~
858		~~- o += '<p class="short_match"><a href="javascript:$j(\'#' + ctrlObj.id + '\').get(0).doLinkBack()"><span><strong>Source Page</strong></span></a></p>';~~
859		-
860		~~- o += '</div>' +~~
861		~~- '</div><!--videoOptionsInner-->' +~~
862		~~- '<div class="videoOptionsBot"></div>' +~~
863		~~- '</div><!--videoOptions-->';~~
864		~~- return o;~~
865		~~- */~~
866		~~- }~~
867		~~- },~~
868		-
869		- /**
870	917	* The kaltura attribution button
871	918	*/
872	919	'kalturaAttribution' : {
873	920	'w' : 28,
874	921	'o' : function( ctrlObj ){
875		~~- return $j( '<div />' )~~
876		~~- .attr( 'title', gM( 'mwe-kaltura-platform-title' ) )~~
877		~~- .addClass( 'ui-state-default ui-corner-all ui-icon_link rButton' )~~
	922	+ return $j('<a />')
	923	+ .attr({
	924	+ 'href': 'http://kaltura.com',
	925	+ 'title' : gM( 'mwe-kaltura-platform-title' ),
	926	+ 'target' : '_new'
	927	+ })
	928	+ .append(
	929	+ $j( '<div />' )
	930	+ .addClass( 'rButton' )
	931	+ .css({
	932	+ 'top' : '9px',
	933	+ 'left' : '2px'
	934	+ })
878	935	.append(
879	936	$j('<span />')
880	937	.addClass( 'ui-icon kaltura-icon' )
881	938	)
882		~~- .unbind()~~
883		~~- .buttonHover()~~
884		~~- .click( function( ) {~~
885		~~- window.location = 'http://kaltura.com';~~
886		~~- } );~~
	939	+ )
887	940	}
888	941	},
889	942
—	—	@@ -898,10 +951,17 @@
899	952	.append(
900	953	$j('<span />')
901	954	.addClass( 'ui-icon ui-icon-wrench' )
902		~~- )~~
	955	+ )
	956	+ .buttonHover()
903	957	// Options binding:
904	958	.menu( {
905		~~- 'content' : ctrlObj.getOptionsMenu(),~~
	959	+ 'content' : ctrlObj.getOptionsMenu(),
	960	+ 'positionOpts': {
	961	+ 'directionV' : 'up',
	962	+ 'offsetY' : 32,
	963	+ 'directionH' : 'left',
	964	+ 'offsetX' : -28
	965	+ }
906	966	} );
907	967	}
908	968	},
—	—	@@ -965,7 +1025,19 @@
966	1026	.buttonHover()
967	1027	.click( function() {
968	1028	ctrlObj.embedPlayer.showTextInterface();
	1029	+ } )
	1030	+ /*
	1031	+ * menu:
	1032	+ .menu( {
	1033	+ 'content' : gM('mwe-loading_txt')
	1034	+ 'positionOpts': {
	1035	+ 'directionV' : 'up',
	1036	+ 'offsetY' : 32,
	1037	+ 'directionH' : 'left',
	1038	+ 'offsetX' : -28
	1039	+ }
969	1040	} );
	1041	+ */
970	1042	}
971	1043	},
972	1044
Index: branches/js2-work/phase3/js/mwEmbed/skins/common/common.css
—	—	@@ -478,9 +478,21 @@
479	479	margin-top: -6px !important;
480	480	margin-left: 3px !important;
481	481	}
482		~~-mw-buffer{~~
	482	+.mw-buffer{
483	483	width:0px;
484	484	height:100%;
485	485	z-index:1;
486	486	top:0px;
	487	+}
	488	+
	489	+.mw-fullscreen-overlay {
	490	+ background: rgb(0, 0, 0) none repeat scroll 0% 0%;
	491	+ position: fixed;
	492	+ top: 0pt;
	493	+ left: 0pt;
	494	+ width: 100%;
	495	+ height: 100%;
	496	+ -moz-background-clip: border;
	497	+ -moz-background-origin: padding;
	498	+ -moz-background-inline-policy: continuous;
487	499	}
\ No newline at end of file
Index: branches/js2-work/phase3/js/mwEmbed/skins/mvpcf/EmbedPlayer.css
—	—	@@ -26,20 +26,7 @@
27	27	.mv-player a:hover {color: #75a5e4; text-decoration: underline;}
28	28	.mv-player img, .mv-player img a, .mv-player img a:hover {border: 0;}
29	29
30		~~-.mv-player h1, .mv-player h2, .mv-player h3, .mv-player h4, .mv-player h5, .mv-player h6 {~~
31		~~- color:#222;~~
32		~~- font-family:arial,sans-serif;~~
33		~~- margin: 5px 0; padding: 0;~~
34		-}
35		~~-.mv-player h1 {font-size: 24px;}~~
36		~~-.mv-player h2 {font-size: 18px;}~~
37		~~-.mv-player h3 {font-size: 16px;}~~
38		~~-.mv-player h4 {font-size: 14px;}~~
39		~~-.mv-player h5 {font-size: 13px; text-align: center;}~~
40		~~-.mv-player h6 {font-size: 13px; color: #6c6c6c; padding: 10px 20px 0px 20px; text-transform: uppercase;}~~
41	30
42		-
43		-
44	31	.mv-player .video {
45	32	display: block;
46	33	position: relative;
—	—	@@ -168,29 +155,20 @@
169	156	}
170	157
171	158
172		~~-.mv-player .videoOptionsComplete textarea {~~
	159	+.mv-player .overlay-win textarea {
173	160	background:none repeat scroll 0 0 transparent;
174	161	border-color:#333 -moz-use-text-color -moz-use-text-color #333;
175	162	border-style:solid none none solid;
176	163	border-width:2px medium medium 2px;
177		~~- color:#CCCCCC;~~
	164	+ color:#222;
178	165	font:11px arial,sans-serif;
179	166	height:15px;
180	167	overflow:hidden;
181	168	padding-left:2px;
182	169	width:100%;
183	170	}
184		~~-.mv-player .videoOptionsComplete .copycode {~~
185		~~- background:url("images/ksprite.png") no-repeat scroll 0 -81px #D4D4D4;~~
186		~~- border:1px solid #000000;~~
187		~~- color:#000000;~~
188		~~- float:right;~~
189		~~- height:24px;~~
190		~~- padding:0 5px 3px;~~
191		~~- width:84px;~~
192		~~- font-size:1em;~~
193		-}
194		~~-.mv-player .videoOptionsComplete div.ui-state-highlight {~~
	171	+
	172	+.mv-player .overlay-win div.ui-state-highlight {
195	173	background:none repeat scroll 0 0 transparent;
196	174	border-color:#554926;
197	175	color:#FFE96E;
—	—	@@ -202,83 +180,20 @@
203	181	font-weight:bold;
204	182	}
205	183
206		~~-.videoComplete{~~
207		~~- position: absolute;~~
208		~~- top:0px;~~
209		~~- left:0px;~~
210		~~- z-index: 10;~~
211		~~- font-size:16px;~~
212		~~- overflow: hidden;~~
213		~~- background:transparent url(images/transparent_bg.png) repeat scroll 0 0;~~
	184	+.mv-player .overlay-win h2{
	185	+ font-size: 115%;
214	186	}
215		~~-.videoComplete .videoOptionsComplete {~~
216		~~- background:transparent url('images/player_video_options_bg.png') no-repeat scroll 0pt;~~
217		~~- color:#7A7A7A;~~
218		~~- font-size:10pt;~~
219		~~- height:158px;~~
220		~~- left:10%;~~
221		~~- overflow:auto;~~
222		~~- padding:19px;~~
223		~~- position:relative;~~
224		~~- top:16%;~~
225		~~- width:283px;~~
226		-}
227		~~-.videoComplete .videoOptionsComplete p { text-align: center; margin: 3px 0; padding: 0; }~~
228		~~-.videoComplete .videoOptionsComplete a {~~
229		~~- color: white;~~
230		~~-/* font-size: 22px;*/~~
231		~~- font-size:12px;~~
232		~~- text-decoration: underline;~~
233		-}
234		~~-.videoComplete .videoOptionsComplete a.active{~~
235		~~- color: #bbf;~~
236		-}
237		~~-.videoComplete .videoOptionsComplete a.email {~~
238		~~- font-size:16px;~~
239		~~- background: url(images/ico_mail.png) right 0px no-repeat;~~
240		~~- padding: 0 50px 0 0;~~
241		-}
242	187
243		~~-.videoComplete div.embed_code textarea {~~
244		~~- margin: 8px 0 8px 0;~~
245		~~- padding: 3px;~~
246		~~- width: 258px;~~
247		~~- height: 54px;~~
248		~~- border: 1px solid #dadada;~~
249		~~- font-family: Arial;~~
250		~~- color: #777;~~
251		~~- font-size: 11px;~~
	188	+.mv-player .overlay-win{
	189	+ font-family : arial,sans-serif;
	190	+ font-size : 85%;
252	191	}
253		~~-.videoComplete div.embed_code button.copy_to_clipboard {~~
254		~~- background: #dddddd url(images/button_to_clipboard.png) 0 0 repeat-x;~~
255		~~- border: 1px solid #3b4552;~~
256		~~- text-align: center;~~
257		~~- padding: 2px 4px;~~
258		~~- margin: 0 0 6px 0;~~
259		~~- float: right;~~
260		~~- display: inline;~~
	192	+.mv-player .overlay-win a{
	193	+ text-decoration: none;
261	194	}
262	195
263		-
264		~~-/Video options/~~
265		~~-.videoOptions {~~
266		~~- display: none;~~
267		~~- width: 183px;~~
268		~~- overflow: hidden;~~
269		~~- position: absolute;~~
270		~~- z-index: 9999;~~
271		~~-/* margin: 0 0 0 230px;*/~~
	196	+.mv-player .overlay-win ul{
	197	+ padding-left: 15px;
272	198	}
273		~~-*:first-child+html .videoOptions {margin-top: -20px;}~~
274		~~-.videoOptionsTop {~~
275		~~- width: 183px;~~
276		~~- height: 32px;~~
277		~~- position: relative;~~
278		~~- z-index: 3;~~
279		~~- background: url(images/player_options_top.png) 0 0 no-repeat;~~
280		-}
281	199
282		~~- 'font-family' : 'arial,sans-serif',~~
283		~~- 'font-size' : '80%'~~
284	200
285		-
Index: branches/js2-work/phase3/js/mwEmbed/modules/TimedText/jquery.menu/jquery.menu.js
—	—	@@ -45,7 +45,7 @@
46	46	$.fn.menu = function( options ) {
47	47	var caller = this;
48	48	var options = options;
49		~~- if( ! caller.m ) {~~
	49	+ if( ! caller.m ) {
50	50	caller.m = new Menu(caller, options);
51	51	allUIMenus.push( caller.m );
52	52
—	—	@@ -75,8 +75,9 @@
76	76	}
77	77
78	78	//Else process the request:
79		~~- if( options == 'show' )~~
	79	+ if( options == 'show' ){
80	80	caller.m.showMenu();
	81	+ }
81	82
82	83	return this;
83	84	};
—	—	@@ -89,10 +90,17 @@
90	91
91	92	var callerClassList = 'fg-menu-container ui-widget ui-widget-content ui-corner-all';
92	93	if( options.targetMenuContainer ) {
93		~~- var container = $( options.targetMenuContainer ).addClass( callerClassList ).html( options.content );~~
	94	+ var container = $( options.targetMenuContainer )
	95	+ .addClass( callerClassList )
	96	+ .html( options.content )
94	97	}else{
95	98	var container = $('<div>').addClass( callerClassList ).html( options.content );
96	99	}
	100	+ // some custom css:
	101	+ container.css( {
	102	+ 'left' : '0px',
	103	+ 'z-index': 2
	104	+ } );
97	105
98	106	this.menuOpen = false;
99	107	this.menuExists = false;
—	—	@@ -529,7 +537,7 @@
530	538	- detectH/V: detect the viewport horizontally / vertically
531	539	- linkToFront: copy the menu link and place it on top of the menu (visual effect to make it look like it overlaps the object) */
532	540
533		~~-Menu.prototype.setPosition = function(widget, caller, options) {~~
	541	+Menu.prototype.setPosition = function(widget, caller, options) {
534	542	var el = widget;
535	543	var referrer = caller;
536	544	var dims = {
—	—	@@ -542,7 +550,7 @@
543	551	var xVal, yVal;
544	552
545	553	var helper = $( '<div class="positionHelper">' );
546		~~- // Hard code width heigh of button if unset ( crazy IE )~~
	554	+ // Hard code width height of button if unset ( crazy IE )
547	555	if( isNaN( dims.refW ) \|\| isNaN( dims.refH ) ) {
548	556	dims.refH = 16;
549	557	dims.refW = 23;
—	—	@@ -555,10 +563,10 @@
556	564	'height': dims.refH
557	565	});
558	566	el.wrap( helper );
559		-
	567	+ xVal = yVal = 0;
560	568	// get X pos
561	569	switch(options.positionOpts.posX) {
562		~~- case 'left': xVal = 0;~~
	570	+ case 'left': xVal = 0;
563	571	break;
564	572	case 'center': xVal = dims.refW / 2;
565	573	break;
—	—	@@ -568,21 +576,20 @@
569	577
570	578	// get Y pos
571	579	switch(options.positionOpts.posY) {
572		~~- case 'top': yVal = 0;~~
	580	+ case 'top' : yVal = 0;
573	581	break;
574		~~- case 'center': yVal = dims.refH / 2;~~
	582	+ case 'center' : yVal = dims.refH / 2;
575	583	break;
576		~~- case 'bottom': yVal = dims.refH;~~
	584	+ case 'bottom' : yVal = dims.refH;
577	585	break;
578		~~- };~~
579		-
	586	+ };
580	587	// add the offsets (zero by default)
581	588	xVal += options.positionOpts.offsetX;
582	589	yVal += options.positionOpts.offsetY;
583	590
584	591	// position the object vertically
585	592	if (options.positionOpts.directionV == 'up') {
586		~~- el.css({ top: 'auto', bottom: yVal });~~
	593	+ el.css( { top: 'auto', bottom: yVal } );
587	594	if (options.positionOpts.detectV && !fitVertical(el)) {
588	595	el.css({ bottom: 'auto', top: yVal });
589	596	}
—	—	@@ -725,4 +732,4 @@
726	733	return result;
727	734	};
728	735
729		~~-} )(jQuery);~~
\ No newline at end of file
	736	+} )(jQuery);
\ No newline at end of file
Index: branches/js2-work/phase3/js/mwEmbed/modules/TimedText/mw.TimedText.js
—	—	@@ -210,7 +210,17 @@
211	211	mw.log( "TimedText:bindMenu:" + target );
212	212	_this.menuTarget = target;
213	213	var $menuButton = this.embedPlayer.$interface.find( '.timed-text' );
214		-
	214	+
	215	+ var positionOpts = null;
	216	+ if( this.embedPlayer.supports[ 'overlays' ] ){
	217	+ var positionOpts = {
	218	+ 'directionV' : 'up',
	219	+ 'offsetY' : 32,
	220	+ 'directionH' : 'left',
	221	+ 'offsetX' : -28
	222	+ };
	223	+ }
	224	+
215	225	// Else bind and show the menu
216	226	// We already have a loader in embedPlayer so the delay of
217	227	// setupTextSources is already taken into account
—	—	@@ -219,8 +229,8 @@
220	230	$menuButton.unbind().menu( {
221	231	'content' : _this.getMainMenu(),
222	232	'crumbDefaultText' : ' ',
223		~~- 'targetMenuContainer' : _this.menuTarget,~~
224	233	'autoShow' : autoShow,
	234	+ 'positionOpts' : positionOpts,
225	235	'backLinkText' : gM( 'mwe-back-btn' )
226	236	} );
227	237	});
Index: branches/js2-work/phase3/js/mwEmbed/modules/TimedText/mw.TimedTextEdit.js
—	—	@@ -396,7 +396,7 @@
397	397	return $langMenu;
398	398	},
399	399	getLangMenuItem: function( langKey , source_icon) {
400		~~- return this.parentTimedText.getLi(~~
	400	+ return $j.getLineItem(
401	401	langKey + ' - ' + unescape( mw.languages[ langKey ] ),
402	402	source_icon,
403	403	function() {
Index: branches/js2-work/phase3/js/mwEmbed/modules/EmbedPlayer/mw.EmbedPlayer.js
—	—	@@ -1697,7 +1697,7 @@
1698	1698	};
1699	1699	mw.getJSON( mw.commons_api_url, request, function( data ) {
1700	1700	// empty the videos:
1701		~~- $j( '#dc_' + _this.id + ' .related_vids ul' ).html( ' ' );~~
	1701	+ $j( '#' + _this.id + ' .related_vids ul' ).html( ' ' );
1702	1702
1703	1703	for ( var j in data.query.pages ) {
1704	1704	// Setup poster default:
—	—	@@ -1719,7 +1719,7 @@
1720	1720	' <a title="' + title_str + '" target="_blank" ' +
1721	1721	'href="' + descriptionurl + '">' + title_str + '</a>' +
1722	1722	'</li>';
1723		~~- $j( '#dc_' + _this.id + ' .related_vids ul' ).append( liout ) ;~~
	1723	+ $j( '#' + _this.id + ' .related_vids ul' ).append( liout ) ;
1724	1724	}
1725	1725	}
1726	1726	};
—	—	@@ -1762,21 +1762,24 @@
1763	1763	this.$interface.find( '.play-btn-large' ).hide();
1764	1764
1765	1765	// Add black background
1766		~~- $j( '#dc_' + this.id ).append( '<div id="black_back_' + this.id + '" ' +~~
1767		~~- 'style="z-index:-2;position:absolute;background:#000;' +~~
1768		~~- 'top:0px;left:0px;width:' + parseInt( this.width ) + 'px;' +~~
1769		~~- 'height:' + parseInt( this.height ) + 'px;">' +~~
1770		~~- '</div>' );~~
	1766	+ $j( '#' + this.id ).append( '<div id="black_back_' + this.id + '" ' +
	1767	+ 'style="z-index:-2;position:absolute;background:#000;' +
	1768	+ 'top:0px;left:0px;width:' + parseInt( this.width ) + 'px;' +
	1769	+ 'height:' + parseInt( this.height ) + 'px;">' +
	1770	+ '</div>' );
1771	1771
1772	1772	if ( this.apiTitleKey ) {
1773		~~- $j( '#dc_' + this.id ).append(~~
1774		~~- '<div class="related_vids" >' +~~
1775		~~- '<h1>' + gM( 'mwe-related_videos' ) + '</h1>' +~~
1776		~~- '<ul>' +~~
1777		~~- '</ul>' +~~
1778		~~- '</div>' );~~
	1773	+ $j( '#' + this.id ).append(
	1774	+ $j( '<div />' )
	1775	+ .addClass( 'related_vids' ),
	1776	+
	1777	+ $j('<h2 />' )
	1778	+ .text( gM( 'mwe-related_videos' ) ),
	1779	+
	1780	+ $j('<ul />')
	1781	+ );
1779	1782	$j( '#img_thumb_' + this.id ).fadeOut( "fast" );
1780		~~- $j( '#dc_' + _this.id + ' .related_vids ul' ).html( gM( 'mwe-loading_txt' ) );~~
	1783	+ $j( '#' + _this.id + ' .related_vids ul' ).html( gM( 'mwe-loading_txt' ) );
1781	1784	this.getRelatedFromTitleKey();
1782	1785	} else {
1783	1786	this.showNearbyClips();
—	—	@@ -1790,13 +1793,20 @@
1791	1794	showNearbyClips: function() {
1792	1795	var _this = this;
1793	1796	// add the liks_info_div black back
1794		~~- $j( '#dc_' + this.id ).append( '<div id="liks_info_' + this.id + '" ' +~~
1795		~~- 'style="width:' + parseInt( parseInt( this.width ) / 2 ) + 'px;' +~~
1796		~~- 'height:' + parseInt( parseInt( this.height ) ) + 'px;' +~~
1797		~~- 'position:absolute;top:10px;overflow:auto' +~~
1798		~~- 'width: ' + parseInt( ( ( parseInt( this.width ) / 2 ) -15 ) ) + 'px;' +~~
1799		~~- 'left:' + parseInt( ( ( parseInt( this.width ) / 2 ) + 15 ) ) + 'px;">' +~~
1800		~~- '</div>'~~
	1797	+ $j( this ).append(
	1798	+ $j( '<div />' )
	1799	+ .attr( {
	1800	+ 'id' : 'liks_info_' + this.id
	1801	+ })
	1802	+ .css({
	1803	+ 'width' : parseInt( parseInt( this.width ) / 2 ) + 'px',
	1804	+ 'height' : parseInt( parseInt( this.height ) ) + 'px',
	1805	+ 'position' : 'absolute',
	1806	+ 'top' : '10px',
	1807	+ 'overflow' : 'auto',
	1808	+ 'width' : parseInt( ( ( parseInt( this.width ) / 2 ) -15 ) ) ,
	1809	+ 'left' : parseInt( ( ( parseInt( this.width ) / 2 ) + 15 ) )
	1810	+ })
1801	1811	);
1802	1812	// start animation (make thumb small in upper left add in div for "loading"
1803	1813	$j( '#img_thumb_' + this.id ).animate( {
—	—	@@ -1990,7 +2000,9 @@
1991	2001	var _this = this;
1992	2002	mw.log( 'f:showThumbnail' + this.thumbnail_disp );
1993	2003	this.ctrlBuilder.closeMenuOverlay();
1994		~~- $j( '#' + this.id ).html( this.getThumbnailHTML() );~~
	2004	+ // update the thumbnail html:
	2005	+ this.updateThumbnailHTML();
	2006	+
1995	2007	this.paused = true;
1996	2008	this.thumbnail_disp = true;
1997	2009	// Make sure the ctrlBuilder bindings are up-to-date
—	—	@@ -2037,9 +2049,7 @@
2038	2050	this.$interface = $j(this).parent('.interface_wrap');
2039	2051
2040	2052	// Update Thumbnail for the "player"
2041		~~- $j( this ).html(~~
2042		~~- this.getThumbnailHTML()~~
2043		~~- )~~
	2053	+ this.updateThumbnailHTML();
2044	2054
2045	2055	// Add controls if enabled:
2046	2056	if ( this.controls ) {
—	—	@@ -2110,7 +2120,7 @@
2111	2121	*
2112	2122	* @param {Object} options Options for rendred timeline thumb
2113	2123	*/
2114		~~- renderTimelineThumbnail:function( options ) {~~
	2124	+ renderTimelineThumbnail: function( options ) {
2115	2125	var my_thumb_src = this.mediaElement.getThumbnailURL();
2116	2126	// check if our thumbnail has a time attribute:
2117	2127	if ( my_thumb_src.indexOf( 't=' ) !== -1 ) {
—	—	@@ -2134,7 +2144,7 @@
2135	2145	* Update Thumb time with npt formated time
2136	2146	* @param {String} time NPT formated time to update thumbnail
2137	2147	*/
2138		~~- updateThumbTimeNPT:function( time ) {~~
	2148	+ updateThumbTimeNPT: function( time ) {
2139	2149	this.updateThumbTime( mw.npt2seconds( time ) - parseInt( this.startOffset ) );
2140	2150	},
2141	2151
—	—	@@ -2198,7 +2208,7 @@
2199	2209	if ( this.thumbnail_disp ) {
2200	2210	mw.log( 'set to thumb:' + src );
2201	2211	this.thumbnail_updating = true;
2202		~~- $j( '#dc_' + this.id ).append(~~
	2212	+ $j( this ).append(
2203	2213	$j('<img />')
2204	2214	.attr({
2205	2215	'src' : src,
—	—	@@ -2239,46 +2249,32 @@
2240	2250	* playing, configuring the player, inline cmml display, HTML linkback,
2241	2251	* download, and embed code.
2242	2252	*/
2243		~~- getThumbnailHTML : function () {~~
2244		~~- mw.log( 'embedPlayer:getThumbnailHTML::' + this.id );~~
	2253	+ updateThumbnailHTML : function () {
	2254	+ mw.log( 'embedPlayer:updateThumbnailHTML::' + this.id );
2245	2255	var thumb_html = '';
2246	2256	var class_atr = '';
2247	2257	var style_atr = '';
2248	2258	this.thumbnail = this.mediaElement.getThumbnailURL();
2249		-
	2259	+
2250	2260	// put it all in the div container dc_id
2251		~~- $thumb = $j('<div />')~~
2252		~~- .attr({~~
2253		~~- 'id' : 'dc_' + this.id~~
2254		~~- })~~
2255		~~- .css({~~
2256		~~- 'position' : 'absolute',~~
2257		~~- 'overflow' : 'hidden',~~
2258		~~- 'top' : '0px',~~
2259		~~- 'left': '0px',~~
2260		~~- 'width' : this.getPlayerWidth() + 'px',~~
2261		~~- 'height' : this.getPlayerHeight() + 'px',~~
2262		~~- 'z-index' : '0'~~
2263		~~- })~~
2264		~~- .append(~~
	2261	+ $j( this ).html(
2265	2262	$j( '<img />' )
2266	2263	.css({
2267	2264	'position' : 'relative',
2268		~~- 'width' : this.getPlayerWidth() + 'px',~~
2269		~~- 'height' : this.getPlayerHeight() + 'px'~~
	2265	+ 'width' : '100%',
	2266	+ 'height' : '100%'
2270	2267	})
2271	2268	.attr({
2272	2269	'id' : 'img_thumb_' + this.id,
2273	2270	'src' : this.thumbnail
2274	2271	})
2275		~~- );~~
	2272	+ );
2276	2273
2277	2274	if ( this.controls == true ) {
2278		~~- $thumb.append(~~
	2275	+ $j( this ).append(
2279	2276	this.ctrlBuilder.getComponent( 'playButtonLarge' )
2280	2277	);
2281		~~- }~~
2282		~~- return $thumb;~~
	2278	+ }
2283	2279	},
2284	2280
2285	2281	/**
—	—	@@ -2351,7 +2347,6 @@
2352	2348	var _this = this;
2353	2349	mw.log('showTextInterface:');
2354	2350
2355		-
2356	2351	var $menu = $j( '#timedTextMenu_' + this.id );
2357	2352	//This may be unnessesary .. we just need to show a spiner somewhere
2358	2353	if ( $menu.length != 0 ) {
Index: branches/js2-work/phase3/js/mwEmbed/modules/EmbedPlayer/javaEmbed.js
—	—	@@ -179,21 +179,9 @@
180	180	} else {
181	181	this.playerElement = $j( '#' + this.pid ).get( 0 );
182	182	}
183		~~- },~~
	183	+ },
184	184
185	185	/**
186		~~- * Show the Thumbnail~~
187		~~- */~~
188		~~- showThumbnail:function() {~~
189		~~- // empty out player html (jquery with java applets does mix) :~~
190		~~- var pelm = document.getElementById( 'dc_' + this.id );~~
191		~~- if ( pelm ) {~~
192		~~- pelm.innerHTML = '';~~
193		~~- }~~
194		~~- this.parent_showThumbnail();~~
195		~~- },~~
196		-
197		- /**
198	186	* Issue the doPlay request to the playerElement
199	187	* calls parent_play to update interface
200	188	*/
Index: branches/js2-work/phase3/js/mwEmbed/modules/EmbedPlayer/nativeEmbed.js
—	—	@@ -29,7 +29,7 @@
30	30	supports: {
31	31	'playHead' : true,
32	32	'pause' : true,
33		~~- 'fullscreen' : false,~~
	33	+ 'fullscreen' : true,
34	34	'timeDisplay' : true,
35	35	'volumeControl' : true,
36	36
—	—	@@ -195,6 +195,7 @@
196	196	_this.doSeekedCallback( position, callback );
197	197	}
198	198	},
	199	+
199	200	/**
200	201	* Do the seek request with a callback
201	202	*
—	—	@@ -282,6 +283,13 @@
283	284	},
284	285
285	286	/**
	287	+ * Fullscreen for "video" with control overlays:
	288	+ */
	289	+ fullscreen: function(){
	290	+ this.ctrlBuilder.toggleFullscreen();
	291	+ },
	292	+
	293	+ /**
286	294	* Update Volume
287	295	*
288	296	* @param {Float} percentage Value between 0 and 1 to set audio volume
Index: branches/js2-work/phase3/js/mwEmbed/modules/Sequencer/mw.Sequencer.js
—	—	@@ -1651,9 +1651,8 @@
1652	1652	// override renderDisplay
1653	1653	renderDisplay:function() {
1654	1654	mw.log( 'mvSequence:renderDisplay' );
1655		~~- // setup layout for title and dc_ clip container~~
1656		~~- $j( this ).html( '<div id="dc_' + this.id + '" style="width:' + this.width + 'px;' +~~
1657		~~- 'height:' + ( this.height ) + 'px;position:relative;" />' );~~
	1655	+ // Clear out the render:
	1656	+ $j( this ).html( '' );
1658	1657
1659	1658	this.setupClipDisplay();
1660	1659	}
Index: branches/js2-work/phase3/js/mwEmbed/mwEmbed.js
—	—	@@ -2768,3 +2768,7 @@
2769	2769	mwCheckBody();
2770	2770	}, 250);
2771	2771
	2772	+// If window.jQuery is already avaliable set no conflict before setup
	2773	+if( window.jQuery ){
	2774	+ window['$j'] = jQuery.noConflict();
	2775	+}
\ No newline at end of file

Status & tagging log

03:16, 5 March 2010 😂 (talk | contribs) changed the status of r62904 [removed: new added: deferred]