r82483 MediaWiki - Code Review archive

Repository:	MediaWiki
Revision:	< r82482‎ \| r82483 \| r82484 >
Date:	20:40, 19 February 2011
Author:	dale
Status:	deferred
Tags:
Comment:	* improved source switching * removed legacy mw.style prefix for style sheets * added sourceChange event ** control bar refresh of sources select once source changes tweeks the width of the source switch
Modified paths:	/trunk/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/EmbedPlayer.php (modified) (history) /trunk/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/resources/MediaElement.js (modified) (history) /trunk/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/resources/mw.EmbedPlayer.js (modified) (history) /trunk/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/resources/mw.EmbedPlayerNative.js (modified) (history) /trunk/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/resources/skins/EmbedPlayer.css (added) (history) /trunk/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/resources/skins/kskin/PlayerSkinKskin.css (added) (history) /trunk/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/resources/skins/kskin/mw.PlayerSkinKskin.js (modified) (history) /trunk/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/resources/skins/kskin/mw.style.PlayerSkinKskin.css (deleted) (history) /trunk/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/resources/skins/mvpcf/PlayerSkinMvpcf.css (added) (history) /trunk/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/resources/skins/mvpcf/mw.style.PlayerSkinMvpcf.css (deleted) (history) /trunk/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/resources/skins/mw.PlayerControlBuilder.js (modified) (history) /trunk/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/resources/skins/mw.style.EmbedPlayer.css (deleted) (history) /trunk/extensions/TimedMediaHandler/MwEmbedModules/TimedText/resources/mw.TimedText.js (modified) (history) /trunk/extensions/TimedMediaHandler/TimedMediaHandler.i18n.php (modified) (history) /trunk/extensions/TimedMediaHandler/WebVideoTranscode/WebVideoTranscode.php (modified) (history)

Diff [purge]

Index: trunk/extensions/TimedMediaHandler/TimedMediaHandler.i18n.php
—	—	@@ -32,9 +32,11 @@
33	33	'timedmedia-oggThumb-version' => 'OggHandler requires oggThumb version $1 or later.',
34	34	'timedmedia-oggThumb-failed' => 'oggThumb failed to create the thumbnail.',
35	35
36		~~- // source~~
37		~~- 'timedmedia-source-file' => 'Source',~~
38		~~- 'timedmedia-source-file-desc' => 'Source $1, $2 × $3 ($4)',~~
	36	+ // Original uploaded asset
	37	+ 'timedmedia-ogg' => 'Ogg',
	38	+ 'timedmedia-webm' => 'WebM',
	39	+ 'timedmedia-source-file' => '$1 source',
	40	+ 'timedmedia-source-file-desc' => 'Original $1, $2 × $3 ($4)',
39	41
40	42	// derivative timedmedia-derivative-desc-220_200kbs.ogv
41	43	'timedmedia-derivative-220_200kbs.ogv' => 'Ogg 200P',
—	—	@@ -84,6 +86,8 @@
85	87	'timedmedia-more' => '{{Identical\|More...}}',
86	88	'timedmedia-dismiss' => '{{Identical\|Close}}',
87	89	'timedmedia-download' => '{{Identical\|Download}}',
	90	+ 'timedmedia-source-file' => 'The source file
	91	+* $1 file type webm or ogg',
88	92	'timedmedia-source-file-desc' => 'Source file description. Paramaters:
89	93	* $1 file type ie webm or ogg
90	94	* $2 resolution width
Index: trunk/extensions/TimedMediaHandler/WebVideoTranscode/WebVideoTranscode.php
—	—	@@ -151,7 +151,7 @@
152	152	$wgLang->formatNum( $file->getHeight() ),
153	153	$wgLang->formatBitrate( $file->getHandler()->getBitrate( $file ) )
154	154	),
155		~~- 'data-shorttitle' => wfMsg('timedmedia-source-file'),~~
	155	+ 'data-shorttitle' => wfMsg('timedmedia-source-file', wfMsg( 'timedmedia-' . $file->getHandler()->getMetadataType() ) ),
156	156	'data-size' => $file->getWidth() . 'x' . $file->getHeight()
157	157	// TODO add some title and data about the file
158	158	);
Index: trunk/extensions/TimedMediaHandler/MwEmbedModules/TimedText/resources/mw.TimedText.js
—	—	@@ -288,7 +288,7 @@
289	289	},
290	290	getInterfaceSizePercent: function( size ) {
291	291	// Some arbitrary scale relative to window size ( 400px wide is text size 105% )
292		~~- var textSize = size.width / 5;~~
	292	+ var textSize = size.width / 3.8;
293	293	if( textSize < 95 ) textSize = 95;
294	294	if( textSize > 200 ) textSize = 200;
295	295	return textSize;
—	—	@@ -366,7 +366,7 @@
367	367	_this.embedPlayer.controlBuilder.showControlBar( true );
368	368	},
369	369	'closeMenuCallback' : function(){
370		~~- _this.embedPlayer.controlBuilder.hideControlBar( true );~~
	370	+ _this.embedPlayer.controlBuilder.keepControlBarOnScreen = false;
371	371	}
372	372	} );
373	373	});
Index: trunk/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/EmbedPlayer.php
—	—	@@ -36,7 +36,7 @@
37	37	'jquery.menu',
38	38	'jquery.ui.slider'
39	39	),
40		~~- 'styles' => "resources/skins/mw.style.EmbedPlayer.css",~~
	40	+ 'styles' => "resources/skins/EmbedPlayer.css",
41	41	'messageFile' => 'EmbedPlayer.i18n.php',
42	42	),
43	43
—	—	@@ -51,9 +51,9 @@
52	52	"mw.IFramePlayerApiClient" => array( 'scripts' => "resources/iframeApi/mw.IFramePlayerApiClient.js" ),
53	53
54	54	"mw.PlayerSkinKskin" => array( 'scripts' => "resources/skins/kskin/mw.PlayerSkinKskin.js",
55		~~- 'styles' => "resources/skins/kskin/mw.style.PlayerSkinKskin.css"),~~
	55	+ 'styles' => "resources/skins/kskin/PlayerSkinKskin.css"),
56	56
57	57	"mw.PlayerSkinMvpcf" => array( 'scripts'=> "resources/skins/mvpcf/mw.PlayerSkinMvpcf.js",
58		~~- 'styles'=> "resources/skins/mvpcf/mw.style.PlayerSkinMvpcf.css"),~~
	58	+ 'styles'=> "resources/skins/mvpcf/PlayerSkinMvpcf.css"),
59	59	);
60	60	?>
\ No newline at end of file
Index: trunk/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/resources/MediaElement.js
—	—	@@ -37,6 +37,7 @@
38	38	init: function( videoElement ) {
39	39	var _this = this;
40	40	mw.log( "EmbedPlayer::mediaElement:init:" + videoElement.id );
	41	+ this.parentEmbedId = videoElement.id;
41	42	this.sources = new Array();
42	43
43	44	// Process the videoElement as a source element:
—	—	@@ -113,9 +114,9 @@
114	115	* source_id Id of the source to select.
115	116	* @return {MediaSource} The selected mediaSource or null if not found
116	117	*/
117		~~- getSourceById:function( source_id ) {~~
	118	+ getSourceById:function( sourceId ) {
118	119	for ( var i = 0; i < this.sources.length ; i++ ) {
119		~~- if ( this.sources[i].id == source_id ) {~~
	120	+ if ( this.sources[i].id == sourceId ) {
120	121	return this.sources[i];
121	122	}
122	123	}
—	—	@@ -128,18 +129,32 @@
129	130	* @param {Number}
130	131	* index Index of source element to set as selectedSource
131	132	*/
132		~~- selectSource:function( index ) {~~
	133	+ setSourceByIndex: function( index ) {
133	134	mw.log( 'EmbedPlayer::mediaElement:selectSource:' + index );
	135	+ var oldSrc = this.selectedSource.getSrc()
134	136	var playableSources = this.getPlayableSources();
135	137	for ( var i = 0; i < playableSources.length; i++ ) {
136	138	if ( i == index ) {
137		~~- this.selectedSource = playableSources[i];~~
138		~~- // Update the user selected format:~~
139		~~- mw.EmbedTypes.getMediaPlayers().setFormatPreference( playableSources[i].mimeType );~~
	139	+ this.selectedSource = playableSources[i];
140	140	break;
141	141	}
142	142	}
	143	+ if( oldSrc != this.selectedSource.getSrc() ){
	144	+ $( '#' + this.parentEmbedId ).trigger( 'SourceChange');
	145	+ }
143	146	},
	147	+ /**
	148	+ * Sets a the selected source to passed in source object
	149	+ * @param {Object} Source
	150	+ */
	151	+ setSource: function( source ){
	152	+ var oldSrc = this.selectedSource.getSrc();
	153	+ this.selectedSource = source;
	154	+ if( oldSrc != this.selectedSource.getSrc() ){
	155	+ $( '#' + this.parentEmbedId ).trigger( 'SourceChange');
	156	+ }
	157	+ },
	158	+
144	159
145	160	/**
146	161	* Selects the default source via cookie preference, default marked, or by
—	—	@@ -175,6 +190,9 @@
176	191	if( _this.selectedSource ){
177	192	return true;
178	193	}
	194	+
	195	+ // Set via embed resolution relative to display size
	196	+
179	197
180	198	// Set via marked default:
181	199	for ( var source = 0; source < playableSources.length; source++ ) {
Index: trunk/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/resources/mw.EmbedPlayer.js
—	—	@@ -803,7 +803,7 @@
804	804	mw.log( 'EmbedPlayer::checkPlayerSources: ' + this.id );
805	805	var _this = this;
806	806
807		~~- // Allow plugins to block on sources lookup:~~
	807	+ // Allow plugins to block on sources lookup ( cases where we just have an api key for example )
808	808	$( _this ).triggerQueueCallback( 'CheckPlayerSourcesEvent', function(){
809	809	_this.setupSourcePlayer();
810	810	});
—	—	@@ -1046,7 +1046,7 @@
1047	1047	* overwritten by client that supports frame serving)
1048	1048	*/
1049	1049	setCurrentTime: function( time, callback ) {
1050		~~- mw.log( 'Error: base embed setCurrentTime can not frame serve (override via plugin)' );~~
	1050	+ mw.log( 'Error: setCurrentTime not overriden' );
1051	1051	},
1052	1052
1053	1053	/**
Index: trunk/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/resources/skins/mw.style.EmbedPlayer.css
—	—	@@ -1,35 +0,0 @@
2		~~-.player_select_list {~~
3		~~- color:white;~~
4		~~- font-size:10pt;~~
5		~~-/* display:none;*/~~
6		-}
7		~~-.player_select_list a:visited {~~
8		~~- color:white;~~
9		-}
10		~~-.mv_playhead {~~
11		~~- position:absolute;~~
12		~~- top:0;~~
13		~~- left:0;~~
14		~~- width:17px;~~
15		~~- height:21px;~~
16		~~- /http://art.gnome.org/themes/gtk2/~~
17		-}
18		~~-.mv_status {~~
19		~~- font-family:"Times New Roman", Times, serif;~~
20		~~- font-size:14px;~~
21		~~- float:left;~~
22		-}
23		~~-.set_ogg_player_pref{~~
24		~~- text-align:left;~~
25		-}
26		-
27		~~-.large_play_button {~~
28		~~- display:block;~~
29		~~- width: 130px;~~
30		~~- height: 96px;~~
31		~~- margin: auto;~~
32		~~-/* margin: -202px 0 0 154px;*/~~
33		~~- position: absolute;~~
34		~~- z-index: 3;~~
35		~~- cursor: pointer;~~
36		-}
Index: trunk/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/resources/skins/kskin/mw.style.PlayerSkinKskin.css
—	—	@@ -1,432 +0,0 @@
2		-/*
3		~~-* K-skin player~~
4		~~-*/~~
5		~~-.k-player {~~
6		~~- color: #FFF;~~
7		~~- background-color: #000;~~
8		-}
9		~~-.k-player .ui-widget-content {~~
10		~~- color: #999;~~
11		-}
12		~~-.k-player .ui-widget-content a{~~
13		~~- color: #999;~~
14		-}
15		~~-/* large play button */~~
16		~~-.k-player .play-btn-large {~~
17		~~- width: 70px;~~
18		~~- height: 55px;~~
19		~~- background: url(images/ksprite.png) no-repeat 0px -433px;~~
20		~~- position: absolute;~~
21		~~- cursor: pointer;~~
22		~~- border: none;~~
23		-}
24		~~-@print {~~
25		~~- .k-player .play-btn-large {~~
26		~~- display: none;~~
27		~~- }~~
28		-}
29		~~-/.ui-state-default /~~
30		~~-.k-player .play-btn-large:hover {~~
31		~~- background: url(images/ksprite.png) no-repeat 0px -377px;~~
32		-}
33		-
34		~~-/* control icons: */~~
35		~~-.k-player .ui-state-default .ui-icon,.k-player .ui-state-hover .ui-icon{~~
36		~~- background: transparent url(images/ksprite.png) no-repeat scroll 0 -48px;~~
37		-}
38		-
39		~~-.k-player .ui-state-default .ui-icon-arrow-4-diag {~~
40		~~- background-position: 0 -32px;~~
41		-}
42		~~-/* fullscreen */~~
43		~~-.k-player .ui-state-hover .ui-icon-arrow-4-diag {~~
44		~~- background-position: -16px -32px;~~
45		-}
46		-
47		~~-.k-player .ui-state-hover .ui-icon-volume-on{~~
48		~~- background-position: -16px -48px;~~
49		-}
50		-
51		~~-/* cc icon */~~
52		~~-.k-player .ui-state-default .ui-icon-comment {~~
53		~~- background-position: 0px -65px;~~
54		-}
55		~~-.k-player .ui-state-hover .ui-icon-comment {~~
56		~~- background-position: -17px -65px;~~
57		-}
58		-
59		~~-.k-player .ui-state-default .ui-icon-play {~~
60		~~- background: url(images/ksprite.png) no-repeat 0 0;~~
61		-}
62		-
63		~~-.k-player .ui-state-hover .ui-icon-play {~~
64		~~- background-position: -16px 0;~~
65		-}
66		-
67		~~-.k-player .ui-state-default .ui-icon-pause {~~
68		~~- background: url(images/ksprite.png) no-repeat 0 -17px;~~
69		-}
70		-
71		~~-.k-player .ui-state-hover .ui-icon-pause {~~
72		~~- background-position: -16px -17px;~~
73		-}
74		-
75		~~-.k-player .control-bar {~~
76		~~- border:1px solid #c8c8c8;~~
77		~~- border-top: 0px;~~
78		~~- border-right: 0px;~~
79		~~- height: 21px;~~
80		~~- padding: 2px 0 0 6px;~~
81		~~- margin-top: 0px;~~
82		~~- background: url(images/ksprite.png) repeat-x 0 -81px;~~
83		~~- font: normal 11px arial, sans-serif;~~
84		~~- color: #555;~~
85		-}
86		-
87		~~-.k-player .play_head {~~
88		~~- background: url("images/ksprite.png") repeat-x scroll 0 -350px~~
89		~~- transparent;~~
90		~~- display: inline;~~
91		~~- float: left;~~
92		~~- margin-left: 10px;~~
93		~~- border: 1px solid #EEEEEE;~~
94		~~- height: 8px;~~
95		~~- margin: 5px 2px 0 0px;~~
96		~~- position: relative;~~
97		-}
98		-
99		~~-.k-player .play_head .ui-slider-handle {~~
100		~~- background: url("images/ksprite.png") no-repeat scroll -67px -341px~~
101		~~- transparent;~~
102		~~- border: 1px solid #888888;~~
103		~~- display: block;~~
104		~~- height: 8px;~~
105		~~- margin: -1px 0 0 -5px;~~
106		~~- position: absolute;~~
107		~~- top: 0;~~
108		~~- width: 8px;~~
109		~~- cursor: pointer;~~
110		~~- -moz-border-radius:5px 5px 5px 5px;~~
111		-}
112		~~-.k-player .ui-corner-all {~~
113		~~- -moz-border-radius:5px 5px 5px 5px;~~
114		-}
115		~~-.k-player .time-disp {~~
116		~~- border: medium none;~~
117		~~- display: inline;~~
118		~~- color: #555555;~~
119		~~- font: 11px arial, sans-serif;~~
120		~~- line-height: 20px;~~
121		~~- overflow: hidden;~~
122		~~- width: 48px;~~
123		~~- float: right;~~
124		-}
125		-
126		~~-.k-player .source-switch{~~
127		~~- border: medium none;~~
128		~~- display: inline;~~
129		~~- color: #555555;~~
130		~~- font: 11px arial, sans-serif;~~
131		~~- line-height: 20px;~~
132		~~- overflow: hidden;~~
133		~~- width: 50px;~~
134		~~- cursor: pointer;~~
135		~~- float: right;~~
136		-}
137		-
138		-
139		~~-.k-player .lButton {~~
140		~~- cursor: pointer;~~
141		~~- float: left;~~
142		~~- list-style: none outside none;~~
143		~~- margin: 2px;~~
144		~~- padding: 0px 0;~~
145		~~- width: 24px;~~
146		~~- height: 16px;~~
147		~~- position: relative;~~
148		~~- background: none repeat scroll 0 0 transparent;~~
149		~~- border: medium none;~~
150		-}
151		-
152		~~-.k-player .rButton {~~
153		~~- cursor: pointer;~~
154		~~- float: right;~~
155		~~- list-style: none outside none;~~
156		~~- margin-top: 2px;~~
157		~~- padding: 0px 0;~~
158		~~- width: 22px;~~
159		~~- height: 16px;~~
160		~~- position: relative;~~
161		~~- background: none repeat scroll 0 0 transparent;~~
162		~~- border: medium none;~~
163		-}
164		-
165		~~-.k-player .k-options {~~
166		~~- border: 1px solid #AAAAAA !important;~~
167		~~- color: #555555;~~
168		~~- float: right;~~
169		~~- height: 21px;~~
170		~~- margin-top: -2px;~~
171		~~- margin-right: 0px;~~
172		~~- width: 50px;~~
173		~~- float: right;~~
174		~~- background: none repeat scroll 0 0 transparent;~~
175		~~- font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;~~
176		~~- font-size: 11px;~~
177		~~- text-transform: uppercase;~~
178		~~- text-align:center;~~
179		-}
180		-
181		~~-.k-player .k-options span {~~
182		~~- position: relative;~~
183		~~- top: 4px;~~
184		-}
185		-
186		~~-.k-player .k-menu-screens {~~
187		~~- float: left;~~
188		~~- font-size: 11px;~~
189		~~- text-align: left;~~
190		~~- padding: 13px 10px 15px 15px;~~
191		-}
192		-
193		~~-.k-player ul.k-menu-bar {~~
194		~~- background: url("images/ksprite.png") no-repeat scroll -99px -104px~~
195		~~- transparent;~~
196		~~- bottom: 5px;~~
197		~~- height: 128px;~~
198		~~- list-style: none outside none;~~
199		~~- padding: 0 0 5px;~~
200		~~- position: absolute;~~
201		~~- right: 0;~~
202		-}
203		-
204		~~-.k-player .k-menu {~~
205		~~- background: none repeat scroll 0 0 #181818;~~
206		~~- border: medium none;~~
207		~~- display: none;~~
208		~~- left: 0;~~
209		~~- position: absolute;~~
210		~~- top: 0;~~
211		~~- z-index: 2;~~
212		-}
213		-
214		~~-.k-player .k-menu-bar li a {~~
215		~~- background: url("images/ksprite.png") no-repeat scroll -51px -110px~~
216		~~- transparent;~~
217		~~- display: block;~~
218		~~- height: 32px;~~
219		~~- margin-left: 1px;~~
220		~~- overflow: hidden;~~
221		~~- text-indent: 99999px;~~
222		~~- width: 49px;~~
223		-}
224		-
225		~~-.k-menu-bar li a:hover {~~
226		~~- background-position: -1px -110px;~~
227		-}
228		-
229		~~-.k-menu-bar li.k-download-btn a {~~
230		~~- background-position: -51px -203px;~~
231		-}
232		-
233		~~-.k-menu-bar li.k-download-btn a:hover {~~
234		~~- background-position: -1px -203px;~~
235		-}
236		-
237		~~-.k-menu-bar li.k-share-btn a {~~
238		~~- background-position: -51px -172px;~~
239		-}
240		-
241		~~-.k-menu-bar li.k-share-btn a:hover {~~
242		~~- background-position: -1px -172px;~~
243		-}
244		-
245		~~-.k-menu-bar li.k-credits-btn a {~~
246		~~- background-position: -51px -141px;~~
247		-}
248		-
249		~~-.k-menu-bar li.k-credits-btn a:hover {~~
250		~~- background-position: -1px -141px;~~
251		-}
252		-
253		-
254		-
255		~~-.k-menu-screens p {~~
256		~~- margin: 6px 0;~~
257		-}
258		-
259		~~-.k-menu-screens a img {~~
260		~~- border: none;~~
261		-}
262		-
263		~~-.k-menu-screens ul {~~
264		~~- padding: 0;~~
265		~~- margin: 6px 0 0;~~
266		~~- list-style: none outside none;~~
267		-}
268		-
269		~~-.k-edit-screen {~~
270		~~- width: 370px;~~
271		~~- height: 223px;~~
272		~~- padding-top: 77px;~~
273		~~- text-align: center;~~
274		~~- background: #181818;~~
275		~~- color: #fff;~~
276		-}
277		-
278		~~-.k-edit-screen div {~~
279		-
280		-}
281		-
282		~~-.k-edit-screen a {~~
283		~~- color: #7BB8FC;~~
284		-}
285		-
286		~~-.k-edit-screen a img {~~
287		~~- border: none;~~
288		-}
289		-
290		-
291		~~-.k-menu-screens h2, .k-menu-screens h3 {~~
292		~~- padding: 0 0 5px 1px;~~
293		~~- clear: both;~~
294		~~- font-size: 12px;~~
295		~~- color: #999;~~
296		-}
297		-
298		~~-.k-menu-screens p {~~
299		~~- margin: 6px 0;~~
300		-}
301		-
302		~~-.k-menu-screens a img {~~
303		~~- border: none;~~
304		-}
305		-
306		~~-.k-menu-screens ul {~~
307		~~- padding: 0;~~
308		~~- margin: 6px 0 0;~~
309		~~- list-style: none outside none;~~
310		-}
311		-
312		~~-.k-menu-screens li {~~
313		~~- margin-bottom: 6px;~~
314		-}
315		-
316		~~-.k-menu-screens li a {~~
317		~~- padding-left: 22px;~~
318		~~- background: url(images/ksprite.png) no-repeat -85px -274px;~~
319		~~- text-decoration: none;~~
320		~~- color: #BBB;~~
321		-}
322		-
323		~~-.k-menu-screens li a.active,.k-menu-screens li a:hover .active {~~
324		~~- background-position: -85px -247px;~~
325		-}
326		-
327		~~-.k-menu-screens li a:hover {~~
328		~~- background-position: -85px -260px;~~
329		-}
330		-
331		~~-.k-menu textarea {~~
332		~~- background: none repeat scroll 0 0 transparent;~~
333		~~- border-color: #000000 -moz-use-text-color -moz-use-text-color #000000;~~
334		~~- border-style: solid none none solid;~~
335		~~- border-width: 2px medium medium 2px;~~
336		~~- color: #CCCCCC;~~
337		~~- font: 11px arial, sans-serif;~~
338		~~- overflow: hidden;~~
339		~~- padding-left: 2px;~~
340		~~- width: 95%;~~
341		-}
342		-
343		~~-.menu-screen.menu-share button {~~
344		~~- background: url("images/ksprite.png") no-repeat scroll 0 -81px #D4D4D4;~~
345		~~- border: 1px solid #000000;~~
346		~~- color: #000000;~~
347		~~- float: right;~~
348		~~- height: 34px;~~
349		~~- padding: 0 5px 3px;~~
350		~~- width: 84px;~~
351		~~- font-size: 1em;~~
352		-}
353		-
354		~~-.k-player .menu-screen {~~
355		~~- height: 100%;~~
356		~~- overflow-y: auto;~~
357		~~- overflow-x: hidden;~~
358		-}
359		-
360		-
361		~~-.k-player .menu-screen.menu-share div.ui-state-highlight {~~
362		~~- background: none repeat scroll 0 0 transparent;~~
363		~~- border-color: #554926;~~
364		~~- color: #FFE96E;~~
365		~~- float: left;~~
366		~~- padding: 2px 5px;~~
367		-}
368		-
369		~~-.k-player .menu-screen.menu-share div.ui-state-highlight a {~~
370		~~- color: #FFE96E;~~
371		~~- font-weight: bold;~~
372		-}
373		-
374		~~-.k-player .volume_control {~~
375		~~- margin-right: 2px;~~
376		~~- width: 16px;~~
377		-}
378		-
379		~~-.k-player .volume_control span {~~
380		~~- margin-right: 0px;~~
381		-}
382		-
383		~~-.k-player .volume-slider {~~
384		~~- width: 20px;~~
385		-}
386		-
387		~~-.k-player .volume-slider .ui-slider-range {~~
388		~~- -moz-border-radius: 0 0 0 0;~~
389		~~- background: url("images/ksprite.png") repeat-x scroll -66px -306px~~
390		~~- transparent;~~
391		~~- height: 17px;~~
392		~~- position: absolute;~~
393		-}
394		-
395		~~-.k-player .volume-slider a.ui-slider-handle {~~
396		~~- background: none repeat scroll 0 0 transparent;~~
397		~~- border: medium none;~~
398		~~- display: block;~~
399		~~- height: 18px;~~
400		~~- margin: -3px 5px 0 -1px;~~
401		~~- position: absolute;~~
402		~~- width: 8px;~~
403		-}
404		-
405		~~-.k-player .credits_box {~~
406		~~- background-attachment:scroll;~~
407		~~- background-color:white;~~
408		~~- background-image:none;~~
409		~~- background-position:0 0;~~
410		~~- bottom:30px;~~
411		~~- left:15px;~~
412		~~- position:absolute;~~
413		~~- right:30px;~~
414		~~- top:48px;~~
415		-}
416		~~-.k-player .credits_box a{~~
417		~~- color:#666;~~
418		-}
419		~~-.k-player .creditline img {~~
420		~~- float: left;~~
421		~~- width: 90px;~~
422		~~- margin: 4px;~~
423		-}
424		-
425		~~-.k-player .k-attribution{~~
426		~~- position:absolute;~~
427		~~- bottom: 15px;~~
428		~~- right : 30px;~~
429		~~- background: url("images/kaltura_open_source_video_platform.png");~~
430		~~- width : 51px;~~
431		~~- height : 12px;~~
432		~~- cursor: pointer;~~
433		-}
Index: trunk/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/resources/skins/kskin/PlayerSkinKskin.css
—	—	@@ -0,0 +1,432 @@
	2	+/*
	3	+* K-skin player
	4	+*/
	5	+.k-player {
	6	+ color: #FFF;
	7	+ background-color: #000;
	8	+}
	9	+.k-player .ui-widget-content {
	10	+ color: #999;
	11	+}
	12	+.k-player .ui-widget-content a{
	13	+ color: #999;
	14	+}
	15	+/* large play button */
	16	+.k-player .play-btn-large {
	17	+ width: 70px;
	18	+ height: 55px;
	19	+ background: url(images/ksprite.png) no-repeat 0px -433px;
	20	+ position: absolute;
	21	+ cursor: pointer;
	22	+ border: none;
	23	+}
	24	+@print {
	25	+ .k-player .play-btn-large {
	26	+ display: none;
	27	+ }
	28	+}
	29	+/.ui-state-default /
	30	+.k-player .play-btn-large:hover {
	31	+ background: url(images/ksprite.png) no-repeat 0px -377px;
	32	+}
	33	+
	34	+/* control icons: */
	35	+.k-player .ui-state-default .ui-icon,.k-player .ui-state-hover .ui-icon{
	36	+ background: transparent url(images/ksprite.png) no-repeat scroll 0 -48px;
	37	+}
	38	+
	39	+.k-player .ui-state-default .ui-icon-arrow-4-diag {
	40	+ background-position: 0 -32px;
	41	+}
	42	+/* fullscreen */
	43	+.k-player .ui-state-hover .ui-icon-arrow-4-diag {
	44	+ background-position: -16px -32px;
	45	+}
	46	+
	47	+.k-player .ui-state-hover .ui-icon-volume-on{
	48	+ background-position: -16px -48px;
	49	+}
	50	+
	51	+/* cc icon */
	52	+.k-player .ui-state-default .ui-icon-comment {
	53	+ background-position: 0px -65px;
	54	+}
	55	+.k-player .ui-state-hover .ui-icon-comment {
	56	+ background-position: -17px -65px;
	57	+}
	58	+
	59	+.k-player .ui-state-default .ui-icon-play {
	60	+ background: url(images/ksprite.png) no-repeat 0 0;
	61	+}
	62	+
	63	+.k-player .ui-state-hover .ui-icon-play {
	64	+ background-position: -16px 0;
	65	+}
	66	+
	67	+.k-player .ui-state-default .ui-icon-pause {
	68	+ background: url(images/ksprite.png) no-repeat 0 -17px;
	69	+}
	70	+
	71	+.k-player .ui-state-hover .ui-icon-pause {
	72	+ background-position: -16px -17px;
	73	+}
	74	+
	75	+.k-player .control-bar {
	76	+ border:1px solid #c8c8c8;
	77	+ border-top: 0px;
	78	+ border-right: 0px;
	79	+ height: 21px;
	80	+ padding: 2px 0 0 6px;
	81	+ margin-top: 0px;
	82	+ background: url(images/ksprite.png) repeat-x 0 -81px;
	83	+ font: normal 11px arial, sans-serif;
	84	+ color: #555;
	85	+}
	86	+
	87	+.k-player .play_head {
	88	+ background: url("images/ksprite.png") repeat-x scroll 0 -350px
	89	+ transparent;
	90	+ display: inline;
	91	+ float: left;
	92	+ margin-left: 10px;
	93	+ border: 1px solid #EEEEEE;
	94	+ height: 8px;
	95	+ margin: 5px 2px 0 0px;
	96	+ position: relative;
	97	+}
	98	+
	99	+.k-player .play_head .ui-slider-handle {
	100	+ background: url("images/ksprite.png") no-repeat scroll -67px -341px
	101	+ transparent;
	102	+ border: 1px solid #888888;
	103	+ display: block;
	104	+ height: 8px;
	105	+ margin: -1px 0 0 -5px;
	106	+ position: absolute;
	107	+ top: 0;
	108	+ width: 8px;
	109	+ cursor: pointer;
	110	+ -moz-border-radius:5px 5px 5px 5px;
	111	+}
	112	+.k-player .ui-corner-all {
	113	+ -moz-border-radius:5px 5px 5px 5px;
	114	+}
	115	+.k-player .time-disp {
	116	+ border: medium none;
	117	+ display: inline;
	118	+ color: #555555;
	119	+ font: 11px arial, sans-serif;
	120	+ line-height: 20px;
	121	+ overflow: hidden;
	122	+ width: 48px;
	123	+ float: right;
	124	+}
	125	+
	126	+.k-player .source-switch{
	127	+ border: medium none;
	128	+ display: inline;
	129	+ color: #555555;
	130	+ font: 11px arial, sans-serif;
	131	+ line-height: 20px;
	132	+ overflow: hidden;
	133	+ width: 65px;
	134	+ cursor: pointer;
	135	+ float: right;
	136	+}
	137	+
	138	+
	139	+.k-player .lButton {
	140	+ cursor: pointer;
	141	+ float: left;
	142	+ list-style: none outside none;
	143	+ margin: 2px;
	144	+ padding: 0px 0;
	145	+ width: 24px;
	146	+ height: 16px;
	147	+ position: relative;
	148	+ background: none repeat scroll 0 0 transparent;
	149	+ border: medium none;
	150	+}
	151	+
	152	+.k-player .rButton {
	153	+ cursor: pointer;
	154	+ float: right;
	155	+ list-style: none outside none;
	156	+ margin-top: 2px;
	157	+ padding: 0px 0;
	158	+ width: 22px;
	159	+ height: 16px;
	160	+ position: relative;
	161	+ background: none repeat scroll 0 0 transparent;
	162	+ border: medium none;
	163	+}
	164	+
	165	+.k-player .k-options {
	166	+ border: 1px solid #AAAAAA !important;
	167	+ color: #555555;
	168	+ float: right;
	169	+ height: 21px;
	170	+ margin-top: -2px;
	171	+ margin-right: 0px;
	172	+ width: 50px;
	173	+ float: right;
	174	+ background: none repeat scroll 0 0 transparent;
	175	+ font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;
	176	+ font-size: 11px;
	177	+ text-transform: uppercase;
	178	+ text-align:center;
	179	+}
	180	+
	181	+.k-player .k-options span {
	182	+ position: relative;
	183	+ top: 4px;
	184	+}
	185	+
	186	+.k-player .k-menu-screens {
	187	+ float: left;
	188	+ font-size: 11px;
	189	+ text-align: left;
	190	+ padding: 13px 10px 15px 15px;
	191	+}
	192	+
	193	+.k-player ul.k-menu-bar {
	194	+ background: url("images/ksprite.png") no-repeat scroll -99px -104px
	195	+ transparent;
	196	+ bottom: 5px;
	197	+ height: 128px;
	198	+ list-style: none outside none;
	199	+ padding: 0 0 5px;
	200	+ position: absolute;
	201	+ right: 0;
	202	+}
	203	+
	204	+.k-player .k-menu {
	205	+ background: none repeat scroll 0 0 #181818;
	206	+ border: medium none;
	207	+ display: none;
	208	+ left: 0;
	209	+ position: absolute;
	210	+ top: 0;
	211	+ z-index: 2;
	212	+}
	213	+
	214	+.k-player .k-menu-bar li a {
	215	+ background: url("images/ksprite.png") no-repeat scroll -51px -110px
	216	+ transparent;
	217	+ display: block;
	218	+ height: 32px;
	219	+ margin-left: 1px;
	220	+ overflow: hidden;
	221	+ text-indent: 99999px;
	222	+ width: 49px;
	223	+}
	224	+
	225	+.k-menu-bar li a:hover {
	226	+ background-position: -1px -110px;
	227	+}
	228	+
	229	+.k-menu-bar li.k-download-btn a {
	230	+ background-position: -51px -203px;
	231	+}
	232	+
	233	+.k-menu-bar li.k-download-btn a:hover {
	234	+ background-position: -1px -203px;
	235	+}
	236	+
	237	+.k-menu-bar li.k-share-btn a {
	238	+ background-position: -51px -172px;
	239	+}
	240	+
	241	+.k-menu-bar li.k-share-btn a:hover {
	242	+ background-position: -1px -172px;
	243	+}
	244	+
	245	+.k-menu-bar li.k-credits-btn a {
	246	+ background-position: -51px -141px;
	247	+}
	248	+
	249	+.k-menu-bar li.k-credits-btn a:hover {
	250	+ background-position: -1px -141px;
	251	+}
	252	+
	253	+
	254	+
	255	+.k-menu-screens p {
	256	+ margin: 6px 0;
	257	+}
	258	+
	259	+.k-menu-screens a img {
	260	+ border: none;
	261	+}
	262	+
	263	+.k-menu-screens ul {
	264	+ padding: 0;
	265	+ margin: 6px 0 0;
	266	+ list-style: none outside none;
	267	+}
	268	+
	269	+.k-edit-screen {
	270	+ width: 370px;
	271	+ height: 223px;
	272	+ padding-top: 77px;
	273	+ text-align: center;
	274	+ background: #181818;
	275	+ color: #fff;
	276	+}
	277	+
	278	+.k-edit-screen div {
	279	+
	280	+}
	281	+
	282	+.k-edit-screen a {
	283	+ color: #7BB8FC;
	284	+}
	285	+
	286	+.k-edit-screen a img {
	287	+ border: none;
	288	+}
	289	+
	290	+
	291	+.k-menu-screens h2, .k-menu-screens h3 {
	292	+ padding: 0 0 5px 1px;
	293	+ clear: both;
	294	+ font-size: 12px;
	295	+ color: #999;
	296	+}
	297	+
	298	+.k-menu-screens p {
	299	+ margin: 6px 0;
	300	+}
	301	+
	302	+.k-menu-screens a img {
	303	+ border: none;
	304	+}
	305	+
	306	+.k-menu-screens ul {
	307	+ padding: 0;
	308	+ margin: 6px 0 0;
	309	+ list-style: none outside none;
	310	+}
	311	+
	312	+.k-menu-screens li {
	313	+ margin-bottom: 6px;
	314	+}
	315	+
	316	+.k-menu-screens li a {
	317	+ padding-left: 22px;
	318	+ background: url(images/ksprite.png) no-repeat -85px -274px;
	319	+ text-decoration: none;
	320	+ color: #BBB;
	321	+}
	322	+
	323	+.k-menu-screens li a.active,.k-menu-screens li a:hover .active {
	324	+ background-position: -85px -247px;
	325	+}
	326	+
	327	+.k-menu-screens li a:hover {
	328	+ background-position: -85px -260px;
	329	+}
	330	+
	331	+.k-menu textarea {
	332	+ background: none repeat scroll 0 0 transparent;
	333	+ border-color: #000000 -moz-use-text-color -moz-use-text-color #000000;
	334	+ border-style: solid none none solid;
	335	+ border-width: 2px medium medium 2px;
	336	+ color: #CCCCCC;
	337	+ font: 11px arial, sans-serif;
	338	+ overflow: hidden;
	339	+ padding-left: 2px;
	340	+ width: 95%;
	341	+}
	342	+
	343	+.menu-screen.menu-share button {
	344	+ background: url("images/ksprite.png") no-repeat scroll 0 -81px #D4D4D4;
	345	+ border: 1px solid #000000;
	346	+ color: #000000;
	347	+ float: right;
	348	+ height: 34px;
	349	+ padding: 0 5px 3px;
	350	+ width: 84px;
	351	+ font-size: 1em;
	352	+}
	353	+
	354	+.k-player .menu-screen {
	355	+ height: 100%;
	356	+ overflow-y: auto;
	357	+ overflow-x: hidden;
	358	+}
	359	+
	360	+
	361	+.k-player .menu-screen.menu-share div.ui-state-highlight {
	362	+ background: none repeat scroll 0 0 transparent;
	363	+ border-color: #554926;
	364	+ color: #FFE96E;
	365	+ float: left;
	366	+ padding: 2px 5px;
	367	+}
	368	+
	369	+.k-player .menu-screen.menu-share div.ui-state-highlight a {
	370	+ color: #FFE96E;
	371	+ font-weight: bold;
	372	+}
	373	+
	374	+.k-player .volume_control {
	375	+ margin-right: 2px;
	376	+ width: 16px;
	377	+}
	378	+
	379	+.k-player .volume_control span {
	380	+ margin-right: 0px;
	381	+}
	382	+
	383	+.k-player .volume-slider {
	384	+ width: 20px;
	385	+}
	386	+
	387	+.k-player .volume-slider .ui-slider-range {
	388	+ -moz-border-radius: 0 0 0 0;
	389	+ background: url("images/ksprite.png") repeat-x scroll -66px -306px
	390	+ transparent;
	391	+ height: 17px;
	392	+ position: absolute;
	393	+}
	394	+
	395	+.k-player .volume-slider a.ui-slider-handle {
	396	+ background: none repeat scroll 0 0 transparent;
	397	+ border: medium none;
	398	+ display: block;
	399	+ height: 18px;
	400	+ margin: -3px 5px 0 -1px;
	401	+ position: absolute;
	402	+ width: 8px;
	403	+}
	404	+
	405	+.k-player .credits_box {
	406	+ background-attachment:scroll;
	407	+ background-color:white;
	408	+ background-image:none;
	409	+ background-position:0 0;
	410	+ bottom:30px;
	411	+ left:15px;
	412	+ position:absolute;
	413	+ right:30px;
	414	+ top:48px;
	415	+}
	416	+.k-player .credits_box a{
	417	+ color:#666;
	418	+}
	419	+.k-player .creditline img {
	420	+ float: left;
	421	+ width: 90px;
	422	+ margin: 4px;
	423	+}
	424	+
	425	+.k-player .k-attribution{
	426	+ position:absolute;
	427	+ bottom: 15px;
	428	+ right : 30px;
	429	+ background: url("images/kaltura_open_source_video_platform.png");
	430	+ width : 51px;
	431	+ height : 12px;
	432	+ cursor: pointer;
	433	+}
Property changes on: trunk/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/resources/skins/kskin/PlayerSkinKskin.css
___________________________________________________________________
Added: svn:eol-style
1	434	+ native
Added: svn:mime-type
2	435	+ text/plain
Index: trunk/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/resources/skins/kskin/mw.PlayerSkinKskin.js
—	—	@@ -216,7 +216,7 @@
217	217	this.showControlBar();
218	218
219	219	// Set close overlay menu flag:
220		~~- this.displayOptionsMenuFlag = false;~~
	220	+ this.keepControlBarOnScreen = false;
221	221	},
222	222
223	223	/**
—	—	@@ -235,7 +235,7 @@
236	236	$(this.embedPlayer).trigger( 'displayMenuOverlay' );
237	237
238	238	// Set the Options Menu display flag to true:
239		~~- this.displayOptionsMenuFlag = true;~~
	239	+ this.keepControlBarOnScreen = true;
240	240	},
241	241
242	242	/**
Index: trunk/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/resources/skins/EmbedPlayer.css
—	—	@@ -0,0 +1,35 @@
	2	+.player_select_list {
	3	+ color:white;
	4	+ font-size:10pt;
	5	+/* display:none;*/
	6	+}
	7	+.player_select_list a:visited {
	8	+ color:white;
	9	+}
	10	+.mv_playhead {
	11	+ position:absolute;
	12	+ top:0;
	13	+ left:0;
	14	+ width:17px;
	15	+ height:21px;
	16	+ /http://art.gnome.org/themes/gtk2/
	17	+}
	18	+.mv_status {
	19	+ font-family:"Times New Roman", Times, serif;
	20	+ font-size:14px;
	21	+ float:left;
	22	+}
	23	+.set_ogg_player_pref{
	24	+ text-align:left;
	25	+}
	26	+
	27	+.large_play_button {
	28	+ display:block;
	29	+ width: 130px;
	30	+ height: 96px;
	31	+ margin: auto;
	32	+/* margin: -202px 0 0 154px;*/
	33	+ position: absolute;
	34	+ z-index: 3;
	35	+ cursor: pointer;
	36	+}
Property changes on: trunk/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/resources/skins/EmbedPlayer.css
___________________________________________________________________
Added: svn:eol-style
1	37	+ native
Added: svn:executable
2	38	+ *
Added: svn:mime-type
3	39	+ text/plain
Index: trunk/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/resources/skins/mw.PlayerControlBuilder.js
—	—	@@ -637,27 +637,11 @@
638	638	});
639	639	});
640	640
641		~~- var bindSpaceUp = function(){~~
642		~~- $(window).bind('keyup.mwPlayer', function(e) {~~
643		~~- if(e.keyCode == 32) {~~
644		~~- if(embedPlayer.paused) {~~
645		~~- embedPlayer.play();~~
646		~~- } else {~~
647		~~- embedPlayer.pause();~~
648		~~- }~~
649		~~- return false;~~
650		~~- }~~
651		~~- });~~
652		~~- };~~
653		-
654		~~- var bindSpaceDown = function() {~~
655		~~- $(window).unbind('keyup.mwPlayer');~~
656		~~- };~~
657	641	// Add hide show bindings for control overlay (if overlay is enabled )
658	642	if( ! _this.checkOverlayControls() ) {
659	643	$interface
660	644	.show()
661		~~- .hover( bindSpaceUp, bindSpaceDown );~~
	645	+ .hover( _this.bindSpaceUp, _this.bindSpaceDown );
662	646
663	647	} else { // hide show controls:
664	648
—	—	@@ -673,22 +657,8 @@
674	658	// ( once the user touched the video "don't hide" )
675	659	} );
676	660
677		~~- // Add a special absolute overlay for hover ( to keep menu displayed~~
678		-
679		~~- $interface.hoverIntent({~~
680		~~- 'sensitivity': 100,~~
681		~~- 'timeout' : 1000,~~
682		~~- 'over' : function(){~~
683		~~- // Show controls with a set timeout ( avoid fade in fade out on short mouse over )~~
684		~~- _this.showControlBar();~~
685		~~- bindSpaceUp();~~
686		~~- },~~
687		~~- 'out' : function(){~~
688		~~- _this.hideControlBar();~~
689		~~- bindSpaceDown();~~
690		~~- }~~
691		~~- });~~
692		-
	661	+ // Add a special absolute overlay for hover
	662	+ _this.addControlBarHover();
693	663	}
694	664
695	665	// Add recommend firefox if we have non-native playback:
—	—	@@ -712,9 +682,72 @@
713	683
714	684	mw.log('trigger::addControlBindingsEvent');
715	685	$( embedPlayer ).trigger( 'addControlBindingsEvent');
	686	+
	687	+ // TODO should break out all control components into their own class and have them work with bindings
	688	+ $( embedPlayer ).bind('SourceChange', function(){
	689	+ if( _this.supportedComponets['sourceSwitch'] ){
	690	+ _this.refreshSwitchSourceMenu();
	691	+ }
	692	+ })
716	693	},
717		-
	694	+ bindSpaceUp : function(){
	695	+ var embedPlayer = this.embedPlayer;
	696	+ $(window).bind('keyup.mwPlayer', function(e) {
	697	+ if(e.keyCode == 32) {
	698	+ if(embedPlayer.paused) {
	699	+ embedPlayer.play();
	700	+ } else {
	701	+ embedPlayer.pause();
	702	+ }
	703	+ return false;
	704	+ }
	705	+ });
	706	+ },
	707	+ bindSpaceDown : function() {
	708	+ $(window).unbind('keyup.mwPlayer');
	709	+ },
	710	+ addControlBarHover: function(){
	711	+ var _this = this;
	712	+ this.embedPlayer.$interface.hoverIntent({
	713	+ 'sensitivity': 100,
	714	+ 'timeout' : 1000,
	715	+ 'over' : function(){
	716	+ // Show controls with a set timeout ( avoid fade in fade out on short mouse over )
	717	+ _this.showControlBar();
	718	+ _this.bindSpaceUp();
	719	+ },
	720	+ 'out' : function(){
	721	+ _this.hideControlBar();
	722	+ _this.bindSpaceDown();
	723	+ }
	724	+ });
	725	+ },
	726	+
718	727	/**
	728	+ * Show the control bar
	729	+ */
	730	+ showControlBar: function( keepOnScreen ){
	731	+ var animateDuration = 'fast';
	732	+ if(! this.embedPlayer )
	733	+ return ;
	734	+ if( keepOnScreen ){
	735	+ this.keepControlBarOnScreen = true;
	736	+ }
	737	+
	738	+ if( this.embedPlayer.getPlayerElement && ! this.embedPlayer.isPersistentNativePlayer() ){
	739	+ $( this.embedPlayer.getPlayerElement() ).css( 'z-index', '1' );
	740	+ }
	741	+ mw.log( 'PlayerControlBuilder:: ShowControlBar' );
	742	+
	743	+ // Show interface controls
	744	+ this.embedPlayer.$interface.find( '.control-bar' )
	745	+ .fadeIn( animateDuration );
	746	+
	747	+ // Trigger the screen overlay with layout info:
	748	+ $( this.embedPlayer ).trigger( 'onShowControlBar', {'bottom' : this.getHeight() + 15 } );
	749	+ },
	750	+
	751	+ /**
719	752	* Hide the control bar.
720	753	*/
721	754	hideControlBar : function( forceClose ){
—	—	@@ -737,6 +770,10 @@
738	771	// Hide the control bar
739	772	this.embedPlayer.$interface.find( '.control-bar')
740	773	.fadeOut( animateDuration );
	774	+
	775	+ // rebind the hover
	776	+ this.addControlBarHover();
	777	+
741	778	//mw.log('about to trigger hide control bar')
742	779	// Allow interface items to update:
743	780	$( this.embedPlayer ).trigger('onHideControlBar', {'bottom' : 15} );
—	—	@@ -744,30 +781,6 @@
745	782	},
746	783
747	784	/**
748		~~- * Show the control bar~~
749		~~- */~~
750		~~- showControlBar: function( keepOnScreen ){~~
751		~~- var animateDuration = 'fast';~~
752		~~- if(! this.embedPlayer )~~
753		~~- return ;~~
754		~~- if( keepOnScreen ){~~
755		~~- this.keepControlBarOnScreen = true;~~
756		~~- }~~
757		-
758		~~- if( this.embedPlayer.getPlayerElement && ! this.embedPlayer.isPersistentNativePlayer() ){~~
759		~~- $( this.embedPlayer.getPlayerElement() ).css( 'z-index', '1' );~~
760		~~- }~~
761		~~- mw.log( 'PlayerControlBuilder:: ShowControlBar' );~~
762		-
763		~~- // Show interface controls~~
764		~~- this.embedPlayer.$interface.find( '.control-bar' )~~
765		~~- .fadeIn( animateDuration );~~
766		-
767		~~- // Trigger the screen overlay with layout info:~~
768		~~- $( this.embedPlayer ).trigger( 'onShowControlBar', {'bottom' : this.getHeight() + 15 } );~~
769		~~- },~~
770		-
771		- /**
772	785	* Checks if the browser supports overlays and the controlsOverlay is
773	786	* set to true for the player or via config
774	787	*/
—	—	@@ -1348,7 +1361,7 @@
1349	1362	.text( gM( 'mwe-embedplayer-choose_player' ) )
1350	1363	);
1351	1364
1352		~~- $j.each( embedPlayer.mediaElement.getPlayableSources(), function( sourceId, source ) {~~
	1365	+ $j.each( embedPlayer.mediaElement.getPlayableSources(), function( sourceIndex, source ) {
1353	1366
1354	1367	var isPlayable = (typeof mw.EmbedTypes.getMediaPlayers().defaultPlayer( source.getMIMEType() ) == 'object' );
1355	1368	var is_selected = ( source.getSrc() == embedPlayer.mediaElement.selectedSource.getSrc() );
—	—	@@ -1387,15 +1400,15 @@
1388	1401	.attr({
1389	1402	'href' : '#',
1390	1403	'rel' : 'sel_source',
1391		~~- 'id' : 'sc_' + sourceId + '_' + supportingPlayers[i].id~~
	1404	+ 'id' : 'sc_' + sourceIndex + '_' + supportingPlayers[i].id
1392	1405	})
1393	1406	.addClass( 'ui-corner-all')
1394	1407	.text( supportingPlayers[i].getName() )
1395	1408	.click( function() {
1396	1409	var iparts = $( this ).attr( 'id' ).replace(/sc_/ , '' ).split( '_' );
1397		~~- var sourceId = iparts[0];~~
	1410	+ var sourceIndex = iparts[0];
1398	1411	var player_id = iparts[1];
1399		~~- mw.log( 'source id: ' + sourceId + ' player id: ' + player_id );~~
	1412	+ mw.log( 'source id: ' + sourceIndex + ' player id: ' + player_id );
1400	1413
1401	1414	embedPlayer.controlBuilder.closeMenuOverlay();
1402	1415
—	—	@@ -1404,12 +1417,12 @@
1405	1418	_this.restoreWindowPlayer();
1406	1419	}
1407	1420
1408		~~- embedPlayer.mediaElement.selectSource( sourceId );~~
	1421	+ embedPlayer.mediaElement.setSourceByIndex( sourceIndex );
1409	1422	var playableSources = embedPlayer.mediaElement.getPlayableSources();
1410	1423
1411	1424	mw.EmbedTypes.getMediaPlayers().setPlayerPreference(
1412	1425	player_id,
1413		~~- playableSources[ sourceId ].getMIMEType()~~
	1426	+ playableSources[ sourceIndex ].getMIMEType()
1414	1427	);
1415	1428
1416	1429	// Issue a stop
—	—	@@ -1523,23 +1536,57 @@
1524	1537	);
1525	1538	}
1526	1539	},
	1540	+ refreshSwitchSourceMenu: function(){
	1541	+ mw.log( 'PlayerControlBuilder::refreshSwitchSourceMenu' );
	1542	+ // Refresh the menu
	1543	+ this.embedPlayer.$interface.find('.source-switch')
	1544	+ .after( this.getComponent( 'sourceSwitch') )
	1545	+ .remove()
	1546	+ },
	1547	+
1527	1548	getSwichSourceMenu: function(){
1528		~~- // for each source with "native playback"~~
	1549	+ var _this = this;
	1550	+ var embedPlayer = this.embedPlayer;
	1551	+ // for each source with "native playback"
1529	1552	$sourceMenu = $j('<ul />');
1530		~~- $j.each( this.embedPlayer.mediaElement.getPlayableSources(), function( sourceId, source ) {~~
1531		~~- //var isSelected = ( source.getSrc() == this.embedPlayer.mediaElement.selectedSource.getSrc() );~~
	1553	+
	1554	+ // local function to closure the source variable scope:
	1555	+ function addToSourceMenu( source ){
	1556	+ // Check if source is selected:
	1557	+ var icon =( source.getSrc() == embedPlayer.mediaElement.selectedSource.getSrc() ) ? 'bullet' : 'radio-on';
	1558	+ $sourceMenu.append(
	1559	+ $.getLineItem( source.shorttitle, icon, function(){
	1560	+ mw.log( 'PlayerControlBuilder::SwichSourceMenu: ' + source.getSrc() );
	1561	+
	1562	+ // TODO this logic should be in mw.EmbedPlayer
	1563	+ embedPlayer.mediaElement.setSource( source );
	1564	+ if( ! _this.embedPlayer.isStopped() ){
	1565	+ // Get the exact play time from the video element ( instead of parent embed Player )
	1566	+ var oldMediaTime = _this.embedPlayer.getPlayerElement().currentTime;
	1567	+ var oldPaused = _this.embedPlayer.paused
	1568	+ // Do a live switch
	1569	+ embedPlayer.switchPlaySrc(source.getSrc(), function( vid ){
	1570	+ // issue a seek
	1571	+ embedPlayer.setCurrentTime( oldMediaTime );
	1572	+ // reflect pause state
	1573	+ if( oldPaused ){
	1574	+ embedPlayer.pause();
	1575	+ }
	1576	+ });
	1577	+ }
	1578	+ })
	1579	+ )
	1580	+ }
	1581	+ $j.each( this.embedPlayer.mediaElement.getPlayableSources(), function( sourceIndex, source ) {
1532	1582	// Output the player select code:
1533	1583	var supportingPlayers = mw.EmbedTypes.getMediaPlayers().getMIMETypePlayers( source.getMIMEType() );
1534	1584	for ( var i = 0; i < supportingPlayers.length ; i++ ) {
1535	1585	if( supportingPlayers[i].library == 'Native' ){
1536		~~- $sourceMenu.append(~~
1537		~~- $.getLineItem( source.shorttitle, 'video', function(){~~
1538		~~- mw.log("Selected source");~~
1539		~~- })~~
1540		~~- )~~
	1586	+ addToSourceMenu( source );
1541	1587	}
1542	1588	}
1543	1589	});
	1590	+
1544	1591	return $sourceMenu;
1545	1592	},
1546	1593
—	—	@@ -1786,7 +1833,7 @@
1787	1834	},
1788	1835
1789	1836	'sourceSwitch' : {
1790		~~- 'w' : 50,~~
	1837	+ 'w' : 65,
1791	1838	'o' : function( ctrlObj ){
1792	1839	// Stream switching widget ( display the current selected stream text )
1793	1840	return $( '<div />' )
—	—	@@ -1796,7 +1843,7 @@
1797	1844	).menu( {
1798	1845	'content' : ctrlObj.getSwichSourceMenu(),
1799	1846	'zindex' : mw.getConfig( 'EmbedPlayer.FullScreenZIndex' ) + 2,
1800		~~- 'width' : 75,~~
	1847	+ 'width' : 115,
1801	1848	'positionOpts' : {
1802	1849	'posY' : 'top',
1803	1850	'directionV' : 'up',
—	—	@@ -1806,7 +1853,7 @@
1807	1854	ctrlObj.showControlBar( true );
1808	1855	},
1809	1856	'closeMenuCallback' : function(){
1810		~~- ctrlObj.hideControlBar( true );~~
	1857	+ ctrlObj.keepControlBarOnScreen = false;
1811	1858	}
1812	1859	} );
1813	1860	}
—	—	@@ -1894,7 +1941,7 @@
1895	1942	.css({
1896	1943	"position" : 'absolute',
1897	1944	"left" : '33px',
1898		~~- "right" : ( ( embedPlayer.getPlayerWidth() - ctrlObj.available_width ) - 10) + 'px'~~
	1945	+ "right" : ( ( embedPlayer.getPlayerWidth() - ctrlObj.available_width ) - 30) + 'px'
1899	1946	})
1900	1947	// Playhead binding
1901	1948	.slider( sliderConfig );
Index: trunk/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/resources/skins/mvpcf/mw.style.PlayerSkinMvpcf.css
—	—	@@ -1,169 +0,0 @@
2		-/**
3		~~- * reference player skin~~
4		~~- */~~
5		-
6		-
7		~~-/.ui-state-default /~~
8		~~-.mv-player a:link {color: #2060c1; text-decoration: underline;}~~
9		~~-.mv-player a:visited {color: #2060c1; text-decoration: underline;}~~
10		~~-/a:visited {color: #75a5e4; text-decoration: underline;}/ /Not sure if you want this/~~
11		~~-.mv-player a:hover {color: #75a5e4; text-decoration: underline;}~~
12		~~-.mv-player img, .mv-player img a, .mv-player img a:hover {border: 0;}~~
13		-
14		-
15		~~-.mv-player .video {~~
16		~~- display: block;~~
17		~~- position: relative;~~
18		~~- font-size: 1px;~~
19		~~- height: 305px;~~
20		-}
21		~~-.mv-player .control-bar {~~
22		~~- height: 29px;~~
23		~~- z-index: 2;~~
24		-}
25		~~-.mv-player .controlInnerSmall {~~
26		~~-/* width: 430px;*/~~
27		~~- height: 29px;~~
28		~~- float: left;~~
29		~~- display: inline;~~
30		-}
31		-
32		~~-.mv-player .lButton {~~
33		~~- cursor:pointer;~~
34		~~- float:left;~~
35		~~- list-style:none outside none;~~
36		~~- margin:2px;~~
37		~~- padding:4px 0;~~
38		~~- width: 24px;~~
39		~~- height:16px;~~
40		~~- position:relative;~~
41		-}
42		~~-.mv-player .rButton {~~
43		~~- cursor:pointer;~~
44		~~- float:right;~~
45		~~- list-style:none outside none;~~
46		~~- margin:2px;~~
47		~~- padding:4px 0;~~
48		~~- width: 23px;~~
49		~~- height:16px;~~
50		~~- position:relative;~~
51		-}
52		-
53		~~-.mv-player .volume_icon {~~
54		~~- float: right;~~
55		~~- display: inline;~~
56		~~- width: 22px;~~
57		~~- height: 29px;~~
58		~~- padding: 0 0 0 0;~~
59		-
60		-}
61		-
62		~~-.mv-player .vol_container{~~
63		~~- z-index:99;~~
64		~~- width:23px;~~
65		~~- height:75px;~~
66		~~- width:23px;~~
67		~~- background: #CCC;~~
68		-}
69		~~-.mv-player .vol_container_below{~~
70		~~- top:30px;~~
71		-}
72		~~-.mv-player .vol_container_top{~~
73		~~- top:-77px;~~
74		-}
75		~~-.mv-player .vol_container .volume-slider{~~
76		~~- margin-top:5px;~~
77		~~- height:65px;~~
78		~~- width:10px;~~
79		~~- margin-left: auto ;~~
80		~~- margin-right: auto ;~~
81		-}
82		~~-.mv-player .vol_container .ui-slider-handle{~~
83		~~- cursor : pointer;~~
84		~~- width:10px;~~
85		~~- height:10px;~~
86		~~- position:absolute;~~
87		~~- left:-1px;~~
88		-}
89		-
90		~~-.mv-player .time-disp {~~
91		~~- line-height: 32px;~~
92		~~- height: 29px;~~
93		~~- overflow: visible;~~
94		~~- font-size: 10.2px;~~
95		~~- width: 85px;~~
96		~~- float: right;~~
97		~~- display: inline;~~
98		~~- border:none;~~
99		-}
100		-
101		~~-.mv-player .play_head{~~
102		~~- float: left;~~
103		~~- display: inline;~~
104		~~- height: 10px;~~
105		~~- margin-left:8px;~~
106		~~- margin-top:10px;~~
107		~~- position:relative;~~
108		-}
109		-
110		~~-.mv-player .play_head .ui-slider-handle{~~
111		~~- width:10px;~~
112		~~- height:15px;~~
113		~~- margin-left:-5px;~~
114		~~- margin-top: -0px;~~
115		~~- z-index: 2;~~
116		-}
117		-
118		~~-.mv-player .inOutSlider .ui-slider-handle{~~
119		~~- width:8px;~~
120		~~- cusror: move;~~
121		-}
122		-
123		~~-.mv-player .overlay-win textarea {~~
124		~~- background:none repeat scroll 0 0 transparent;~~
125		~~- border: 2px solid #333;~~
126		~~- color: #fff;~~
127		~~- font: 11px arial,sans-serif;~~
128		~~- height:15px;~~
129		~~- overflow:hidden;~~
130		~~- padding-left:2px;~~
131		~~- width:97%;~~
132		-}
133		-
134		~~-.mv-player .overlay-win div.ui-state-highlight {~~
135		~~- background:none repeat scroll 0 0 transparent;~~
136		~~- border-color:#554926;~~
137		~~- color:#FFE96E;~~
138		~~- float:left;~~
139		~~- padding:2px 5px;~~
140		-}
141		-
142		~~-.mv-player .videoOptionsComplete div.ui-state-highlight a {~~
143		~~- color:#eee;~~
144		~~- font-weight:bold;~~
145		-}
146		-
147		~~-.mv-player .overlay-win h2{~~
148		~~- font-size: 115%;~~
149		-}
150		-
151		~~-.mv-player .overlay-win{~~
152		~~- font-family : arial,sans-serif;~~
153		~~- font-size : 85%;~~
154		-}
155		~~-.mv-player .overlay-win a{~~
156		~~- text-decoration: none;~~
157		-}
158		-
159		~~-.mv-player .overlay-win ul{~~
160		~~- padding-left: 15px;~~
161		-}
162		-
163		~~-.mv-player a:hover {}~~
164		-
165		~~-.mv-player .overlay-win ul li span { font-weight:bold; color:#fff;}~~
166		-
167		~~-.mv-player .overlay-win h2 { font-size:16px;}~~
168		~~-.mv-player .overlay-win h3 { font-size:14px;}~~
169		-
170		~~-.active { font-size: 12px; }~~
Index: trunk/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/resources/skins/mvpcf/PlayerSkinMvpcf.css
—	—	@@ -0,0 +1,169 @@
	2	+/**
	3	+ * reference player skin
	4	+ */
	5	+
	6	+
	7	+/.ui-state-default /
	8	+.mv-player a:link {color: #2060c1; text-decoration: underline;}
	9	+.mv-player a:visited {color: #2060c1; text-decoration: underline;}
	10	+/a:visited {color: #75a5e4; text-decoration: underline;}/ /Not sure if you want this/
	11	+.mv-player a:hover {color: #75a5e4; text-decoration: underline;}
	12	+.mv-player img, .mv-player img a, .mv-player img a:hover {border: 0;}
	13	+
	14	+
	15	+.mv-player .video {
	16	+ display: block;
	17	+ position: relative;
	18	+ font-size: 1px;
	19	+ height: 305px;
	20	+}
	21	+.mv-player .control-bar {
	22	+ height: 29px;
	23	+ z-index: 2;
	24	+}
	25	+.mv-player .controlInnerSmall {
	26	+/* width: 430px;*/
	27	+ height: 29px;
	28	+ float: left;
	29	+ display: inline;
	30	+}
	31	+
	32	+.mv-player .lButton {
	33	+ cursor:pointer;
	34	+ float:left;
	35	+ list-style:none outside none;
	36	+ margin:2px;
	37	+ padding:4px 0;
	38	+ width: 24px;
	39	+ height:16px;
	40	+ position:relative;
	41	+}
	42	+.mv-player .rButton {
	43	+ cursor:pointer;
	44	+ float:right;
	45	+ list-style:none outside none;
	46	+ margin:2px;
	47	+ padding:4px 0;
	48	+ width: 23px;
	49	+ height:16px;
	50	+ position:relative;
	51	+}
	52	+
	53	+.mv-player .volume_icon {
	54	+ float: right;
	55	+ display: inline;
	56	+ width: 22px;
	57	+ height: 29px;
	58	+ padding: 0 0 0 0;
	59	+
	60	+}
	61	+
	62	+.mv-player .vol_container{
	63	+ z-index:99;
	64	+ width:23px;
	65	+ height:75px;
	66	+ width:23px;
	67	+ background: #CCC;
	68	+}
	69	+.mv-player .vol_container_below{
	70	+ top:30px;
	71	+}
	72	+.mv-player .vol_container_top{
	73	+ top:-77px;
	74	+}
	75	+.mv-player .vol_container .volume-slider{
	76	+ margin-top:5px;
	77	+ height:65px;
	78	+ width:10px;
	79	+ margin-left: auto ;
	80	+ margin-right: auto ;
	81	+}
	82	+.mv-player .vol_container .ui-slider-handle{
	83	+ cursor : pointer;
	84	+ width:10px;
	85	+ height:10px;
	86	+ position:absolute;
	87	+ left:-1px;
	88	+}
	89	+
	90	+.mv-player .time-disp {
	91	+ line-height: 32px;
	92	+ height: 29px;
	93	+ overflow: visible;
	94	+ font-size: 10.2px;
	95	+ width: 85px;
	96	+ float: right;
	97	+ display: inline;
	98	+ border:none;
	99	+}
	100	+
	101	+.mv-player .play_head{
	102	+ float: left;
	103	+ display: inline;
	104	+ height: 10px;
	105	+ margin-left:8px;
	106	+ margin-top:10px;
	107	+ position:relative;
	108	+}
	109	+
	110	+.mv-player .play_head .ui-slider-handle{
	111	+ width:10px;
	112	+ height:15px;
	113	+ margin-left:-5px;
	114	+ margin-top: -0px;
	115	+ z-index: 2;
	116	+}
	117	+
	118	+.mv-player .inOutSlider .ui-slider-handle{
	119	+ width:8px;
	120	+ cusror: move;
	121	+}
	122	+
	123	+.mv-player .overlay-win textarea {
	124	+ background:none repeat scroll 0 0 transparent;
	125	+ border: 2px solid #333;
	126	+ color: #fff;
	127	+ font: 11px arial,sans-serif;
	128	+ height:15px;
	129	+ overflow:hidden;
	130	+ padding-left:2px;
	131	+ width:97%;
	132	+}
	133	+
	134	+.mv-player .overlay-win div.ui-state-highlight {
	135	+ background:none repeat scroll 0 0 transparent;
	136	+ border-color:#554926;
	137	+ color:#FFE96E;
	138	+ float:left;
	139	+ padding:2px 5px;
	140	+}
	141	+
	142	+.mv-player .videoOptionsComplete div.ui-state-highlight a {
	143	+ color:#eee;
	144	+ font-weight:bold;
	145	+}
	146	+
	147	+.mv-player .overlay-win h2{
	148	+ font-size: 115%;
	149	+}
	150	+
	151	+.mv-player .overlay-win{
	152	+ font-family : arial,sans-serif;
	153	+ font-size : 85%;
	154	+}
	155	+.mv-player .overlay-win a{
	156	+ text-decoration: none;
	157	+}
	158	+
	159	+.mv-player .overlay-win ul{
	160	+ padding-left: 15px;
	161	+}
	162	+
	163	+.mv-player a:hover {}
	164	+
	165	+.mv-player .overlay-win ul li span { font-weight:bold; color:#fff;}
	166	+
	167	+.mv-player .overlay-win h2 { font-size:16px;}
	168	+.mv-player .overlay-win h3 { font-size:14px;}
	169	+
	170	+.active { font-size: 12px; }
Property changes on: trunk/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/resources/skins/mvpcf/PlayerSkinMvpcf.css
___________________________________________________________________
Added: svn:eol-style
1	171	+ native
Added: svn:mime-type
2	172	+ text/plain
Index: trunk/extensions/TimedMediaHandler/MwEmbedModules/EmbedPlayer/resources/mw.EmbedPlayerNative.js
—	—	@@ -318,7 +318,9 @@
319	319	this.getPlayerElement();
320	320	if( _this.playerElement.readyState >= 1 ){
321	321	if( _this.playerElement.currentTime == time ){
322		~~- callback();~~
	322	+ if( callback ){
	323	+ callback();
	324	+ }
323	325	return;
324	326	}
325	327	var once = function( event ) {
—	—	@@ -389,7 +391,9 @@
390	392	this.duration = 0;
391	393	this.currentTime = 0;
392	394	this.previousTime = 0;
393		~~- var vid = this.getPlayerElement();~~
	395	+ var vid = this.getPlayerElement();
	396	+
	397	+ // iOS and Chrome have broken source switch system work around their bugs here:
394	398	if ( vid ) {
395	399	try {
396	400	// issue a play request on the source
—	—	@@ -405,18 +409,10 @@
406	410	// Local scope update source and play function to work around google chrome bug
407	411	var updateSrcAndPlay = function() {
408	412	var vid = _this.getPlayerElement();
409		~~- if (!vid){~~
410		~~- mw.log( 'Error: switchPlaySrc no vid');~~
411		~~- return ;~~
412		~~- }~~
413	413	vid.src = src;
414	414	// Give iOS 50ms to figure out the src got updated ( iPad OS 4.0 )
415	415	setTimeout(function() {
416	416	var vid = _this.getPlayerElement();
417		~~- if (!vid){~~
418		~~- mw.log( 'Error: switchPlaySrc no vid');~~
419		~~- return ;~~
420		~~- }~~
421	417	vid.load();
422	418	vid.play();
423	419	// Wait another 100ms then bind the end event and any custom events
—	—	@@ -430,7 +426,6 @@
431	427	if(typeof doneCallback == 'function' ){
432	428	doneCallback();
433	429	}
434		~~- return false;~~
435	430	});
436	431	if (typeof switchCallback == 'function') {
437	432	switchCallback(vid);

Follow-up revisions

Revision	Commit summary	Author	Date
r82484	r82483: Update for Translatewiki	raymond	20:51, 19 February 2011

Status & tagging log

16:32, 2 March 2011 Reedy (talk | contribs) changed the status of r82483 [removed: new added: deferred]