r77318 MediaWiki - Code Review archive

Repository:	MediaWiki
Revision:	< r77317‎ \| r77318 \| r77319 >
Date:	03:16, 26 November 2010
Author:	dale
Status:	deferred
Tags:
Comment:	* moved panzoom control to on-top of video player * stubs to support panzoom on videos ( instead of just images )
Modified paths:	/branches/MwEmbedStandAlone/libraries/jquery/plugins/jquery.menu/jquery.menu.js (modified) (history) /branches/MwEmbedStandAlone/modules/EmbedPlayer/mw.EmbedPlayer.js (modified) (history) /branches/MwEmbedStandAlone/modules/Sequencer/mw.Sequencer.js (modified) (history) /branches/MwEmbedStandAlone/modules/Sequencer/mw.SequencerTimeline.js (modified) (history) /branches/MwEmbedStandAlone/modules/Sequencer/remotes/mw.MediaWikiRemoteSequencer.js (modified) (history) /branches/MwEmbedStandAlone/modules/Sequencer/tools/mw.SequencerTools.js (modified) (history) /branches/MwEmbedStandAlone/modules/SmilPlayer/mw.EmbedPlayerSmil.js (modified) (history) /branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilAnimate.js (modified) (history) /branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilBody.js (modified) (history) /branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilBuffer.js (modified) (history) /branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilLayout.js (modified) (history) /branches/MwEmbedStandAlone/mwEmbedFrame.php (modified) (history)

Diff [purge]

Index: branches/MwEmbedStandAlone/mwEmbedFrame.php
—	—	@@ -9,12 +9,25 @@
10	10	* <iframe src="mwEmbedFrame.php?src={SRC URL}&poster={POSTER URL}&width={WIDTH}etc"> </iframe>
11	11	*/
12	12
	13	+
13	14	// Setup the mwEmbedFrame
14	15	$myMwEmbedFrame = new mwEmbedFrame();
15	16
	17	+// @@TODO temporary HACK to override to kalturaIframe
	18	+// ( need to refactor embedFrame into a more abstract class )
	19	+// @@TODO Need a php based configuration system for modules so they
	20	+// can extend / override entry points
	21	+if( isset( $myMwEmbedFrame->kwidgetid ) ){
	22	+ require( dirname( __FILE__ ) . '/modules/KalturaSupport/kalturaIframe.php');
	23	+ exit(1);
	24	+}
	25	+
16	26	// Do mwEmbedFrame video output:
17	27	$myMwEmbedFrame->outputIFrame();
18	28
	29	+// Direct link list
	30	+
	31	+
19	32	/**
20	33	* mwEmbed iFrame class
21	34	*/
—	—	@@ -35,7 +48,7 @@
36	49	);
37	50	var $playerIframeId = 'iframeVid';
38	51	var $debug = false;
39		-
	52	+
40	53	// When used in direct source mode the source asset.
41	54	// NOTE: can be an array of sources in cases of "many" sources set
42	55	var $sources = array();
—	—	@@ -44,29 +57,30 @@
45	58	//parse input:
46	59	$this->parseRequest();
47	60	}
48		-
	61	+
49	62	// Parse the embedFrame request and sanitize input
50	63	private function parseRequest(){
51		~~- // Check for / attribute type request and update "REQUEST" global~~
	64	+ // Check for / attribute type request and update "REQUEST" global
52	65	// ( uses kaltura standard entry_id/{entryId} request )
53	66	// normalize to the REQUEST object
54		~~- // @@FIXME: this should be moved over to a kaltura specific iframe implementation~~
55		~~- if( $_SERVER['REQUEST_URI'] ){~~
56		~~- $kalturaUrlMap = Array(~~
	67	+ // @@FIXME: this should be moved over to a kaltura specific iframe implementation
	68	+ if( $_SERVER['PATH_INFO'] ){
	69	+ $kalturaUrlMap = Array(
57	70	'entry_id' => 'kentryid',
58	71	'uiconf_id' => 'kuiconfid',
59	72	'wid' => 'kwidgetid',
60	73	'playlist_id' => 'kplaylistid'
61	74	);
62		~~- $urlParts = explode( '/', $_SERVER['REQUEST_URI'] );~~
	75	+ $urlParts = explode( '/', $_SERVER['PATH_INFO'] );
63	76	foreach( $urlParts as $inx => $urlPart ){
64	77	foreach( $kalturaUrlMap as $urlKey => $reqeustAttribute ){
65		~~- if( $urlPart == $reqeustAttribute && isset( $urlParts[$inx+1] ) ){~~
	78	+ if( $urlPart == $urlKey && isset( $urlParts[$inx+1] ) ){
66	79	$_REQUEST[ $reqeustAttribute ] = $urlParts[$inx+1];
67	80	}
68	81	}
69	82	}
70	83	}
	84	+
71	85	// Check for attributes
72	86	foreach( $this->playerAttributes as $attributeKey){
73	87	if( isset( $_REQUEST[ $attributeKey ] ) ){
—	—	@@ -78,7 +92,7 @@
79	93	if( isset( $_REQUEST['debug'] ) ){
80	94	$this->debug = true;
81	95	}
82		-
	96	+
83	97	// Process the special "src" attribute
84	98	if( isset( $_REQUEST['src'] ) ){
85	99	if( is_array( $_REQUEST['src'] ) ){
—	—	@@ -89,10 +103,10 @@
90	104	$this->sources = array( htmlspecialchars( $_REQUEST['src'] ) );
91	105	}
92	106	}
93		-
	107	+
94	108	}
95	109	private function getVideoTag( ){
96		~~- // Add default video tag with 100% width / height~~
	110	+ // Add default video tag with 100% width / height
97	111	// ( parent embed is responsible for setting the iframe size )
98	112	$o = '<video id="' . htmlspecialchars( $this->playerIframeId ) . '" style="width:100%;height:100%"';
99	113	foreach( $this->playerAttributes as $attributeKey){
—	—	@@ -110,12 +124,12 @@
111	125	}
112	126	$o.= '</video>';
113	127	return $o;
114		~~- }~~
115		-
	128	+ }
	129	+
116	130	function outputIFrame( ){
117	131	// Setup the embed string based on attribute set:
118	132	$embedResourceList = 'window.jQuery,mwEmbed,mw.style.mwCommon,$j.fn.menu,mw.style.jquerymenu,mw.EmbedPlayer,mw.EmbedPlayerNative,mw.EmbedPlayerJava,mw.PlayerControlBuilder,$j.fn.hoverIntent,mw.style.EmbedPlayer,$j.cookie,$j.ui,mw.style.ui_redmond,$j.widget,$j.ui.mouse,mw.PlayerSkinKskin,mw.style.PlayerSkinKskin,mw.TimedText,mw.style.TimedText,$j.ui.slider';
119		-
	133	+
120	134	if( isset( $this->kentryid ) ){
121	135	$embedResourceList.= ',' . implode(',', array(
122	136	'KalturaClientBase',
—	—	@@ -125,7 +139,7 @@
126	140	'KalturaAccessControl',
127	141	'MD5',
128	142	'mw.KWidgetSupport',
129		~~- 'mw.KAnalytics',~~
	143	+ 'mw.KAnalytics',
130	144	'mw.KDPMapping',
131	145	'mw.MobileAdTimeline',
132	146	'mw.KAds'
—	—	@@ -145,18 +159,18 @@
146	160	left:0px;
147	161	bottom:0px;
148	162	right:0px;
149		-
	163	+ overflow:hidden;
150	164	}
151	165	</style>
152		~~- <script type="text/javascript" src="<?php echo str_replace( 'mwEmbedFrame.php', '', $_SERVER['SCRIPT_NAME'] ); ?>ResourceLoader.php?class=<?php~~
153		~~- // @@TODO we should move this over to using the mwEmbedLoader.js so we don't have to mannage the resource list in two places.~~
154		~~- // ( this will matter less once we migrate to the new mediaWiki resource loader framework)~~
	166	+ <script type="text/javascript" src="<?php echo str_replace( 'mwEmbedFrame.php', '', $_SERVER['SCRIPT_NAME'] ); ?>ResourceLoader.php?class=<?php
	167	+ // @@TODO we should move this over to using the mwEmbedLoader.js so we don't have to mannage the resource list in two places.
	168	+ // ( this will matter less once we migrate to the new mediaWiki resource loader framework)
155	169	echo $embedResourceList;
156	170	if( $this->debug ){
157	171	echo '&debug=true';
158		~~- }~~
	172	+ }
159	173	?>"></script>
160		-
	174	+
161	175	<script type="text/javascript">
162	176	//Set some iframe embed config:
163	177	// We can't support full screen in object context since it requires outer page DOM control
—	—	@@ -164,21 +178,21 @@
165	179
166	180	// Enable the iframe player server:
167	181	mw.setConfig( 'EmbedPlayer.EnableIFramePlayerServer', true );
168		-
	182	+
169	183	mw.ready(function(){
170		~~- // Bind window resize to reize the player:~~
	184	+ // Bind window resize to reize the player:
171	185	$j(window).resize(function(){
172	186	$j( '#<?php echo htmlspecialchars( $this->playerIframeId )?>' )
173	187	.get(0).resizePlayer({
174	188	'width' : $j(window).width(),
175	189	'height' : $j(window).height()
176		~~- });~~
	190	+ });
177	191	});
178	192	});
179	193	</script>
180		-
	194	+
181	195	</head>
182		~~- <body>~~
	196	+ <body>
183	197	<?
184	198	// Check if we have a way to get sources:
185	199	if( isset( $this->apiTitleKey ) \|\| isset( $this->kentryid ) \|\| count( $this->sources ) != 0 ) {
—	—	@@ -186,7 +200,7 @@
187	201	} else {
188	202	echo "Error: mwEmbedFrame missing required parameter for video sources</body></html>";
189	203	exit(1);
190		~~- }~~
	204	+ }
191	205	?>
192	206	</body>
193	207	</html>
Index: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilBody.js
—	—	@@ -416,7 +416,7 @@
417	417	this.smil.getBuffer().loadElement( $node );
418	418	// xxx check if the type is "video or audio" else nothing to return
419	419
420		~~- var vid = $j( '#' + this.smil.getSmilElementPlayerID( $node ) ).get(0);~~
	420	+ var vid = $j( '#' + this.smil.getSmilElementPlayerID( $node ) ).find('audio,video').get(0);
421	421	if( vid.duration ){
422	422	callback( vid.duration );
423	423	}
Index: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilLayout.js
—	—	@@ -126,33 +126,34 @@
127	127	var _this = this;
128	128	mw.log('SmilLayout:: drawPlayerSmilElement: ' );
129	129	var smilType = this.smil.getRefType( smilElement );
	130	+
	131	+ // Give the static content a getSmilElementPlayerID for player layer control
	132	+ var $target = $j('<div />')
	133	+ .attr('id', _this.smil.getSmilElementPlayerID( smilElement ) )
	134	+ .css({
	135	+ 'width':'100%',
	136	+ 'height':'100%',
	137	+ 'position' : 'absolute',
	138	+ 'top' : '0px',
	139	+ 'left' : '0px'
	140	+ })
	141	+ $regionTarget.append( $target );
	142	+
130	143	switch( smilType ){
131	144	// Static content can use drawSmilElementToTarget function:
132	145	case 'mwtemplate':
133	146	case 'img':
134	147	case 'cdata_html':
135	148	case 'smiltext':
136		~~- // Give the static content a getSmilElementPlayerID for player layer control~~
137		~~- var $target = $j('<div />')~~
138		~~- .attr('id', _this.smil.getSmilElementPlayerID( smilElement ) )~~
139		~~- .css({~~
140		~~- 'width':'100%',~~
141		~~- 'height':'100%',~~
142		~~- 'position' : 'absolute',~~
143		~~- 'top' : '0px',~~
144		~~- 'left' : '0px'~~
145		~~- })~~
146		~~- $regionTarget.append( $target );~~
147	149	this.drawSmilElementToTarget( smilElement, $target );
148	150	return ;
149	151	break;
150	152	case 'video':
151		~~- $regionTarget.append( this.getSmilVideoPlayerHtml( smilElement ) );~~
	153	+ $target.append( this.getSmilVideoPlayerHtml( smilElement ) );
152	154	return ;
153	155	break;
154		~~- break;~~
155	156	case 'audio':
156		~~- $regionTarget.append( this.getSmilAudioPlayerHtml( smilElement ) );~~
	157	+ $target.append( this.getSmilAudioPlayerHtml( smilElement ) );
157	158	return ;
158	159	break;
159	160	}
—	—	@@ -356,7 +357,6 @@
357	358	getSmilVideoPlayerHtml: function( smilElement ){
358	359	return $j('<video />')
359	360	.attr( {
360		~~- 'id' : this.smil.getSmilElementPlayerID( smilElement ),~~
361	361	'src' : this.smil.getAssetUrl( $j( smilElement ).attr( 'src' ) )
362	362	} )
363	363	.addClass( 'smilFillWindow' )
—	—	@@ -368,7 +368,6 @@
369	369	getSmilAudioPlayerHtml: function ( smilElement ){
370	370	return $j('<audio />')
371	371	.attr( {
372		~~- 'id' : this.smil.getSmilElementPlayerID( smilElement ),~~
373	372	'src' : this.smil.getAssetUrl( $j( smilElement ).attr( 'src' ) )
374	373	} )
375	374	.css( {
—	—	@@ -616,24 +615,30 @@
617	616	_this.doAssetLayout( smilElement , naturalSize);
618	617	});
619	618	},
620		~~- // xxx should really use a callback instead of failing if the media is not~~
621		~~- // loaded~~
622		~~- getNaturalSize: function( img , callback){~~
	619	+
	620	+ /**
	621	+ * Get the natural size of a media asset
	622	+ * @param img
	623	+ * @param callback
	624	+ * @return
	625	+ */
	626	+ getNaturalSize: function( media , callback){
623	627	// note this just works for images atm
624		~~- if( !img ){~~
	628	+ if( !media ){
625	629	mw.log("Error getNaturalSize for null image ");
626	630	callback( false );
	631	+ return ;
627	632	}
628		~~- if( img.naturalWidth ){~~
	633	+ if( media.naturalWidth ){
629	634	callback( {
630		~~- 'width' : img.naturalWidth,~~
631		~~- 'height' : img.naturalHeight~~
	635	+ 'width' : media.naturalWidth,
	636	+ 'height' : media.naturalHeight
632	637	} )
633	638	} else {
634		~~- $j( img ).load(function(){~~
	639	+ $j( media ).load(function(){
635	640	callback( {
636		~~- 'width' : this.naturalWidth,~~
637		~~- 'height' : this.naturalHeight~~
	641	+ 'width' : media.naturalWidth,
	642	+ 'height' : media.naturalHeight
638	643	} )
639	644	});
640	645	}
—	—	@@ -728,18 +733,18 @@
729	734	/**
730	735	* layout function
731	736	*/
732		~~- panZoomLayout: function( smilElement, $target, img ){~~
	737	+ panZoomLayout: function( smilElement, $target, layoutElement ){
733	738	var _this = this;
734	739	//mw.log( 'panZoomLayout:' + $j( smilElement).attr('id') );
735	740	var panZoom = $j( smilElement).attr('panZoom').split(',');
736		~~- if( !img ){~~
737		~~- var img = $j( '#' + this.smil.getSmilElementPlayerID( smilElement ) ).find('img').get(0);~~
738		~~- if( !img){~~
739		~~- mw.log('Error getting image for ' + $j( smilElement).attr('id') );~~
	741	+ if( !layoutElement ){
	742	+ var layoutElement = $j( '#' + this.smil.getSmilElementPlayerID( smilElement ) ).find('img,video').get(0);
	743	+ if( !layoutElement){
	744	+ mw.log('Error getting layoutElement for ' + $j( smilElement).attr('id') );
740	745	}
741	746	}
742	747
743		~~- _this.getNaturalSize( img, function( natrualSize ){~~
	748	+ _this.getNaturalSize( layoutElement, function( natrualSize ){
744	749	// Check if the transfrom is needed:
745	750	if( parseInt( panZoom.left ) == 0
746	751	&&
—	—	@@ -758,7 +763,7 @@
759	764	var percentValues = _this.smil.getAnimate().getPercentFromPanZoomValues( panZoom, natrualSize );
760	765	//mw.log('panZoomLayout::' + 'l:' + percentValues.left + ' t:' + percentValues.top + ' w:' + percentValues.width + ' h:' + percentValues.height );
761	766	// Update the layout via the animation engine updateElementLayout method
762		~~- _this.smil.getAnimate().updateElementLayout( smilElement, percentValues, $target, img );~~
	767	+ _this.smil.getAnimate().updateElementLayout( smilElement, percentValues, $target, layoutElement );
763	768	});
764	769	},
765	770	/**
Index: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilAnimate.js
—	—	@@ -28,7 +28,8 @@
29	29	switch( this.smil.getRefType( smilElement ) ){
30	30	case 'video':
31	31	case 'audio':
32		~~- $j ( '#' + this.smil.getSmilElementPlayerID( smilElement ) ).get( 0 ).pause();~~
	32	+ $j ( '#' + this.smil.getSmilElementPlayerID( smilElement ) )
	33	+ .find('audio,video').get( 0 ).pause();
33	34	break;
34	35	}
35	36	// non-video elements just pause by clearing any animation loops
—	—	@@ -51,7 +52,8 @@
52	53	switch( _this.smil.getRefType( smilElement ) ){
53	54	case 'auido':
54	55	case 'video':
55		~~- var media = $j ( '#' + _this.smil.getSmilElementPlayerID( smilElement ) ).get( 0 );~~
	56	+ var media = $j ( '#' + _this.smil.getSmilElementPlayerID( smilElement ) )
	57	+ .find('audio,video').get( 0 );
56	58	var mediaTime = ( !media \|\| !media.currentTime )? 0 : media.currentTime;
57	59	//mw.log( "getPlaybackSyncDelta:: mediaeo time should be: " + relativeTime + ' video time is: ' + vidTime );
58	60
—	—	@@ -236,7 +238,7 @@
237	239	transformMediaForTime: function( smilElement, animateTime, callback ){
238	240	// Get the video element
239	241	var assetId = this.smil.getSmilElementPlayerID( smilElement );
240		~~- var media = $j ( '#' + assetId ).get( 0 );~~
	242	+ var media = $j( assetId ).find('audio,video').get( 0 );
241	243	if( !media ){
242	244	mw.log("Error: transformMediaForTime could not find media asest: " +assetId );
243	245	}
—	—	@@ -268,7 +270,7 @@
269	271	$j( smilElement ).data('activePlayback', true)
270	272
271	273	// Make the video is being displayed and get a pointer to the video element:
272		~~- var media = $media.show().get( 0 );~~
	274	+ var media = $media.show().find('audio,video').get( 0 );
273	275
274	276	// Set volume to master volume
275	277	media.volume = this.smil.embedPlayer.volume;
—	—	@@ -419,7 +421,7 @@
420	422	// NOTE this is dependent on the media being "loaded" and having natural width and height
421	423	this.smil.getLayout().getNaturalSize(smilImgElement, function( naturalSize ){
422	424	var percentValues = _this.getPercentFromPanZoomValues( targetValue, naturalSize );
423		~~- // Now we have "hard" layout info try and render it.~~
	425	+ // Now we have naturalSize layout info try and render it.
424	426	_this.updateElementLayout( smilImgElement, percentValues );
425	427	});
426	428	},
Index: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.EmbedPlayerSmil.js
—	—	@@ -62,6 +62,9 @@
63	63	this.setCurrentTime( this.smilPlayTime, function(){
64	64	mw.log("EmbedPlayerSmil::doEmbedHTML:: render callback ready " );
65	65	});
	66	+
	67	+ // Be sure the interface does not have black background
	68	+ this.$interface.css('background', 'none');
66	69	},
67	70
68	71	/**
Index: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilBuffer.js
—	—	@@ -15,10 +15,10 @@
16	16	assetLoadingCallbacks : [],
17	17
18	18	// Stores the percentage loaded of active video elements
19		~~- videoLoadedPercent: {},~~
	19	+ mediaLoadedPercent: {},
20	20
21	21	// Stores seek listeners for active video elements
22		~~- videoSeekListeners: {},~~
	22	+ mediaSeekListeners: {},
23	23
24	24	// Stores the previous percentage buffered ( so we know what elements to check )
25	25	prevBufferPercent : 0,
—	—	@@ -162,7 +162,8 @@
163	163	switch( this.smil.getRefType( smilElement ) ){
164	164	case 'audio':
165	165	case 'video':
166		~~- var media = $j( '#' + this.smil.getSmilElementPlayerID( smilElement ) ).get(0);~~
	166	+ var media = $j( '#' + this.smil.getSmilElementPlayerID( smilElement ) )
	167	+ .find('audio,video').get(0);
167	168	if( !media ){
168	169	break;
169	170	}
—	—	@@ -209,42 +210,41 @@
210	211	getMediaPercetLoaded: function ( smilElement ){
211	212	var _this = this;
212	213	var assetId = this.smil.getSmilElementPlayerID( smilElement );
213		~~- var $vid = $j( '#' + assetId );~~
	214	+ var $media = $j( '#' + assetId ).find('audio,video');
214	215
215	216	// if the asset is not in the DOM return zero:
216		~~- if( $vid.length == 0 ){~~
	217	+ if( $media.length == 0 ){
217	218	return 0 ;
218	219	}
219	220	// check if 100% has already been loaded:
220		~~- if( _this.videoLoadedPercent[ assetId ] == 1 ){~~
	221	+ if( _this.mediaLoadedPercent[ assetId ] == 1 ){
221	222	return 1;
222	223	}
223	224
224	225	// Check if we have a loader registered
225		~~- if( !this.videoLoadedPercent[ assetId ] ){~~
	226	+ if( !this.mediaLoadedPercent[ assetId ] ){
226	227	// firefox loading based progress indicator:
227		~~- $vid.unbind('progress').bind('progress', function( e ) {~~
228		~~- // jQuery does not copy over the eventData .loaded and .total~~
	228	+ $media.unbind('progress').bind('progress', function( e ) {
229	229	var eventData = e.originalEvent;
230	230	//mw.log("Video loaded progress:" + assetId +' ' + (eventData.loaded / eventData.total ) );
231	231	if( eventData.loaded && eventData.total ) {
232		~~- _this.videoLoadedPercent[assetId] = eventData.loaded / eventData.total;~~
	232	+ _this.mediaLoadedPercent[assetId] = eventData.loaded / eventData.total;
233	233	}
234	234	})
235	235	}
236	236
237		~~- // Set up reference to video object:~~
238		~~- var vid = $vid.get(0);~~
	237	+ // Set up reference to media object:
	238	+ var media = $media.get(0);
239	239	// Check for buffered attribute ( not all browsers support the progress event )
240		~~- if( vid && vid.buffered && vid.buffered.end && vid.duration ) {~~
241		~~- _this.videoLoadedPercent[ assetId ] = ( vid.buffered.end(0) / vid.duration);~~
	240	+ if( media && media.buffered && media.buffered.end && media.duration ) {
	241	+ _this.mediaLoadedPercent[ assetId ] = ( media.buffered.end(0) / media.duration);
242	242	}
243	243
244		~~- if( !_this.videoLoadedPercent[ assetId ] ){~~
	244	+ if( !_this.mediaLoadedPercent[ assetId ] ){
245	245	return 0;
246	246	} else {
247		~~- // Return the updated videoLoadedPercent~~
248		~~- return _this.videoLoadedPercent[ assetId ];~~
	247	+ // Return the updated mediaLoadedPercent
	248	+ return _this.mediaLoadedPercent[ assetId ];
249	249	}
250	250	},
251	251
—	—	@@ -297,12 +297,12 @@
298	298	* Clip ready for grabbing a frame such as a canvas thumb
299	299	*/
300	300	bufferedSeekRelativeTime: function( smilElement, relativeTime, callback ){
301		~~- mw.log("SmilBuffer::bufferedSeekRelativeTime:" + this.smil.getSmilElementPlayerID( smilElement ) + ' time:' + relativeTime );~~
302		-
303	301	var absoluteTime = relativeTime;
304	302	if( $j( smilElement ).attr('clipBegin') ){
305	303	absoluteTime += this.smil.parseTime( $j( smilElement ).attr('clipBegin') );
306	304	}
	305	+ mw.log("SmilBuffer::bufferedSeekRelativeTime:" + this.smil.getSmilElementPlayerID( smilElement ) + ' relativeTime: ' + relativeTime + ' absoluteTime:' + absoluteTime );
	306	+
307	307	$j( smilElement ).data('activeSeek', true);
308	308	var instanceCallback = function(){
309	309	$j( smilElement ).data('activeSeek', false);
—	—	@@ -340,31 +340,31 @@
341	341	// by default return true
342	342	return true;
343	343	},
344		-
	344	+
345	345	/**
346	346	* Register a video loading progress indicator and check the time against the requested time
347	347	*/
348	348	canPlayMediaTime: function( smilVideoElement, time ){
349	349	var _this = this;
350	350	var assetId = this.smil.getSmilElementPlayerID( smilVideoElement );
351		~~- var $vid = $j( '#' + assetId );~~
	351	+ var $media = $j( '#' + assetId ).find('audio,video');
352	352	var vid = $j( '#' + assetId ).get( 0 );
353	353	// if the video element is not in the dom its not ready:
354		~~- if( $vid.length == 0 \|\| !$vid.get(0) ){~~
	354	+ if( $media.length == 0 \|\| !$media.get(0) ){
355	355	return false;
356	356	}
357	357	/* if we have no metadata return false */
358		~~- if( $vid.attr('readyState') == 0 ){~~
	358	+ if( $media.attr('readyState') == 0 ){
359	359	return false;
360	360	}
361	361	/* if we are asking about a time close to the current time use ready state */
362		~~- if( Math.abs( $vid.attr('currentTime') - time ) < 1 ){~~
	362	+ if( Math.abs( $media.attr('currentTime') - time ) < 1 ){
363	363	// also see: http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#dom-media-have_metadata
364		~~- if( $vid.attr('readyState') > 2 ){~~
	364	+ if( $media.attr('readyState') > 2 ){
365	365	return true;
366	366	}
367	367	}
368		~~- // Check if _this.videoLoadedPercent is in range of duration~~
	368	+ // Check if _this.mediaLoadedPercent is in range of duration
369	369	// xxx might need to take into consideration startOfsset
370	370	if( _this.getMediaPercetLoaded( smilVideoElement ) > vid.duration / time ){
371	371	return true;
—	—	@@ -382,8 +382,8 @@
383	383	var vid = $j ( '#' + assetId).get(0);
384	384	vid.addEventListener( 'seeked', function(){
385	385	// Run the callback
386		~~- if( _this.videoSeekListeners[ assetId ].callback ) {~~
387		~~- _this.videoSeekListeners[ assetId ].callback();~~
	386	+ if( _this.mediaSeekListeners[ assetId ].callback ) {
	387	+ _this.mediaSeekListeners[ assetId ].callback();
388	388	}
389	389	}, false);
390	390	},
—	—	@@ -419,27 +419,26 @@
420	420
421	421	// Make sure the target video is in the dom:
422	422	this.loadElement( smilElement );
423		-
424		~~- var $vid = $j ( '#' + assetId);~~
425		~~- var vid = $vid.get(0);~~
	423	+ var $media = $j( '#' + assetId ).find('audio,video');
	424	+ var media = $media.get(0);
426	425	// Add the asset to the loading set (if not there already )
427		~~- _this.addAssetLoading( $vid.attr('id' ) );~~
	426	+ _this.addAssetLoading( assetId );
428	427	var seekCallbackDone = false;
429	428	var runSeekCallback = function(){
430	429
431	430	// Register an object for the current asset seek Listener
432		~~- if( ! _this.videoSeekListeners[ assetId ] ){~~
433		~~- _this.videoSeekListeners[ assetId ]= {};~~
	431	+ if( ! _this.mediaSeekListeners[ assetId ] ){
	432	+ _this.mediaSeekListeners[ assetId ]= {};
434	433	};
435	434
436		~~- if( ! _this.videoSeekListeners[ assetId ].listen ){~~
437		~~- _this.videoSeekListeners[ assetId ].listen = true;~~
	435	+ if( ! _this.mediaSeekListeners[ assetId ].listen ){
	436	+ _this.mediaSeekListeners[ assetId ].listen = true;
438	437	_this.registerVideoSeekListener( assetId );
439	438	}
440	439	// Update the current context callback
441		~~- _this.videoSeekListeners[ assetId ].callback = function(){~~
	440	+ _this.mediaSeekListeners[ assetId ].callback = function(){
442	441	// Seek has completed open up seek Listeners for future seeks
443		~~- _this.videoSeekListeners[ assetId ].listen = false;~~
	442	+ _this.mediaSeekListeners[ assetId ].listen = false;
444	443
445	444	// Set this asset to ready ( asset ready set )
446	445	_this.assetReady( assetId );
—	—	@@ -454,16 +453,16 @@
455	454
456	455	// Issue the seek if the vid still exists
457	456	try{
458		~~- vid.currentTime = seekTime;~~
	457	+ media.currentTime = seekTime;
459	458	} catch ( e ){
460	459	mw.log( 'Error: in SmilBuffer could not set currentTime' );
461	460	}
462	461	}
463	462
464	463	// Read the video state: http://www.w3.org/TR/html5/video.html#dom-media-have_nothing
465		~~- if( $vid.attr('readyState') == 0 /* HAVE_NOTHING */ ){~~
	464	+ if( $media.attr('readyState') == 0 /* HAVE_NOTHING */ ){
466	465	// Check that we have metadata ( so we can issue the seek )
467		~~- $vid.unbind( 'loadedmetadata' ).bind( 'loadedmetadata', function(){~~
	466	+ $media.unbind( 'loadedmetadata' ).bind( 'loadedmetadata', function(){
468	467	runSeekCallback();
469	468	} );
470	469	}else {
Index: branches/MwEmbedStandAlone/modules/EmbedPlayer/mw.EmbedPlayer.js
—	—	@@ -362,6 +362,7 @@
363	363	return ;
364	364	// If we don't have a native player don't wait for metadata
365	365	if( !mw.EmbedTypes.players.isSupportedPlayer( 'oggNative') &&
	366	+ !mw.EmbedTypes.players.isSupportedPlayer( 'webmNative') &&
366	367	!mw.EmbedTypes.players.isSupportedPlayer( 'h264Native' ) )
367	368	{
368	369	return false;
—	—	@@ -1539,6 +1540,7 @@
1540	1541	} else {
1541	1542	this.controlBuilder.resizePlayer( size, animate);
1542	1543	}
	1544	+ $j( this ).trigger( 'onResizePlayer', size )
1543	1545	},
1544	1546
1545	1547	/**
Index: branches/MwEmbedStandAlone/modules/Sequencer/mw.Sequencer.js
—	—	@@ -1,5 +1,4 @@
2	2	/**
3		~~- * Main Sequence Editor Driver~~
4	3	*/
5	4
6	5	mw.includeAllModuleMessages();
—	—	@@ -12,7 +11,7 @@
13	12	$.fn.sequencer = function( options ) {
14	13	// Debugger
15	14	if( $j( this.selector ).length == 0 ){
16		~~- mw.log("Sequencer::Error missing target container");~~
	15	+ mw.log("mw.Sequencer::Error missing target container");
17	16	return;
18	17	}
19	18	var seqContainer = $j( this.selector ).get(0);
—	—	@@ -47,7 +46,7 @@
48	47	};
49	48	} )( jQuery );
50	49
51		~~-//Wrap in mw closure to avoid global leakage~~
	50	+// Wrap in mw closure to avoid global variables
52	51	( function( mw ) {
53	52
54	53	/**
Index: branches/MwEmbedStandAlone/modules/Sequencer/tools/mw.SequencerTools.js
—	—	@@ -35,7 +35,7 @@
36	36	'panzoom' : {
37	37	'editWidgets' : ['panzoom'],
38	38	'editableAttributes' : [ 'panZoom' ],
39		~~- 'contentTypes': [ 'img'], // xxx todo add video support~~
	39	+ 'contentTypes': [ 'img', 'video' ],
40	40	'supportsKeyFrames' : 'true'
41	41	},
42	42	'templateedit' : {
—	—	@@ -280,6 +280,7 @@
281	281	'editType' : 'hidden'
282	282	}
283	283	}
	284	+ // crossfade presently not supported
284	285	/*,
285	286	'crossfade' : {
286	287	'extends': 'fade',
—	—	@@ -334,7 +335,7 @@
335	336	getBindedTranstionEdit: function( _this, smilElement, transitionType ){
336	337	var _editTransitions = this;
337	338	var $editTransitionsSet = $j('<div />');
338		~~- // return the empty div on empty transtionType~~
	339	+ // Return the empty div on empty transtionType
339	340	if( transitionType == '' ){
340	341	return $editTransitionsSet
341	342	}
—	—	@@ -490,7 +491,6 @@
491	492	}
492	493	}
493	494	},
494		-
495	495	'onChange': function( _this, smilElement ){
496	496	// Update the sequence duration :
497	497	_this.sequencer.getEmbedPlayer().getDuration( true );
—	—	@@ -674,16 +674,20 @@
675	675	)
676	676	// Register the change for undo redo
677	677	_this.sequencer.getActionsEdit().registerEdit();
678		~~- },~~
	678	+ },
679	679	'draw': function( _this, target, smilElement ){
680	680	var orginalHelperCss = {
681	681	'position' : 'absolute',
682		~~- 'width' : 100,~~
683		~~- 'height' : 75,~~
684		~~- 'top' : 50,~~
685		~~- 'left' : 70,~~
686		~~- 'font-size' : 'x-small'~~
	682	+ 'width' : 120,
	683	+ 'height' : 100,
	684	+ 'color' : 'red',
	685	+ 'font-size' : 'x-small',
	686	+ 'opacity' : .6,
	687	+ 'border' : 'dashed',
	688	+ 'left' : _this.sequencer.getEmbedPlayer().getPlayerWidth()/2 - 60,
	689	+ 'top' : _this.sequencer.getEmbedPlayer().getPlayerHeight()/2 - 50
687	690	};
	691	+
688	692	// Add a input box binding:
689	693	$j('#' +_this.getEditToolInputId( 'panzoom', 'panZoom'))
690	694	.change(function(){
—	—	@@ -694,45 +698,58 @@
695	699	$j('<h3 />').html(
696	700	gM('mwe-sequencer-tools-panzoomhelper-desc')
697	701	)
698		~~- ,~~
699		~~- /xxx Keep aspect button ?/~~
700		~~- // Rest layout button ( restores default position )~~
701		~~- $j.button({~~
702		~~- 'icon' : 'arrow-4',~~
703		~~- 'text' : gM( 'mwe-sequencer-tools-panzoomhelper-resetlayout' )~~
704		~~- })~~
705		~~- .attr('id', 'panzoomResetLayout')~~
706		~~- .css('float', 'left')~~
707		~~- .hide()~~
708		~~- .click(function(){~~
709		~~- // Restore default SMIL setting~~
710		~~- _this.editableTypes['display'].update(~~
711		~~- _this,~~
712		~~- smilElement,~~
713		~~- 'panzoom',~~
714		~~- _this.editableAttributes['panzoom'].defaultValue~~
715		~~- )~~
716		~~- })~~
717		~~- ,~~
	702	+ );
	703	+ var $playerUI = _this.sequencer.getEmbedPlayer().$interface;
	704	+ // Remove any old layout helper:
	705	+ $playerUI.find('.panzoomHelper').remove();
	706	+
	707	+ // Append the resize helper as an overlay on the player:
	708	+ $playerUI.append(
718	709	$j('<div />')
719		~~- .css({~~
720		~~- 'border' : '1px solid #DDDDDD',~~
721		~~- 'float' : 'left',~~
722		~~- 'position' : 'relative',~~
723		~~- 'width': '240px',~~
724		~~- 'height' : '180px',~~
725		~~- 'overflow' : 'hidden'~~
726		~~- })~~
727		~~- .append(~~
728		~~- $j('<div />')~~
729		~~- .css( orginalHelperCss )~~
730		~~- .attr({~~
731		~~- 'id': "panzoomHelper"~~
732		~~- })~~
733		~~- .addClass("ui-widget-content")~~
734		~~- .text( gM('mwe-sequencer-tools-panzoomhelper') )~~
	710	+ .css( orginalHelperCss )
	711	+ .addClass("ui-widget-content panzoomHelper")
	712	+ .text( gM('mwe-sequencer-tools-panzoomhelper') )
	713	+ );
	714	+
	715	+ // Only show when the panzoom tool is selected
	716	+ if( _this.getCurrentToolId() != 'panzoom'){
	717	+ $playerUI.find('.panzoomHelper').hide()
	718	+ }
	719	+ $j(_this).bind('toolSelect', function(){
	720	+ if( _this.getCurrentToolId() == 'panzoom'){
	721	+ $playerUI.find('.panzoomHelper').fadeIn('fast')
	722	+ } else {
	723	+ $playerUI.find('.panzoomHelper').fadeOut('fast')
	724	+ }
	725	+ });
	726	+ // Bind to resize player events to keep the helper centered
	727	+ $j( _this.sequencer.getEmbedPlayer() ).bind('onResizePlayer', function(event, size){
	728	+ $playerUI.find('.panzoomHelper').css( {
	729	+ 'left' : size.width/2 - 60,
	730	+ 'top' : size.height/2 - 50
	731	+ });
	732	+ });
	733	+
	734	+
	735	+ /xxx Keep aspect button ?/
	736	+ // Rest layout button ( restores default position )
	737	+ /*$j.button({
	738	+ 'icon' : 'arrow-4',
	739	+ 'text' : gM( 'mwe-sequencer-tools-panzoomhelper-resetlayout' )
	740	+ })
	741	+ .attr('id', 'panzoomResetLayout')
	742	+ .css('float', 'left')
	743	+ .hide()
	744	+ .click(function(){
	745	+ // Restore default SMIL setting
	746	+ _this.editableTypes['display'].update(
	747	+ _this,
	748	+ smilElement,
	749	+ 'panzoom',
	750	+ _this.editableAttributes['panzoom'].defaultValue
735	751	)
736		~~- );~~
	752	+ })*/
	753	+
737	754	var startPanZoomVal = '';
738	755	var setStartPanZoomVal = function(){
739	756	startPanZoomVal = $j( smilElement ).attr( 'panZoom');
—	—	@@ -781,7 +798,7 @@
782	799	);
783	800	}
784	801	// Add bindings
785		~~- $j('#panzoomHelper')~~
	802	+ $playerUI.find('.panzoomHelper')
786	803	.draggable({
787	804	containment: 'parent',
788	805	start: function( event, ui){
—	—	@@ -804,8 +821,8 @@
805	822	.css('cursor', 'move')
806	823	.resizable({
807	824	handles : 'all',
808		~~- maxWidth : 170,~~
809		~~- maxHeight: 130,~~
	825	+ maxWidth : 250,
	826	+ maxHeight: 180,
810	827	aspectRatio: 4/3,
811	828	start: function( event, ui){
812	829	setStartPanZoomVal();
—	—	@@ -986,10 +1003,6 @@
987	1004	})
988	1005	);
989	1006	});
990		~~- // On resize event~~
991		-
992		~~- // Fill in timeline images~~
993		-
994	1007	}
995	1008	}
996	1009	},
—	—	@@ -1134,6 +1147,8 @@
1135	1148	$toolsContainer.tabs({
1136	1149	select: function(event, ui) {
1137	1150	_this.setCurrentToolId( $j( ui.tab ).attr('href').replace('#tooltab_', '') );
	1151	+ // trigger select tool event:
	1152	+ $j( _this ).trigger( 'toolSelect' );
1138	1153	},
1139	1154	selected : toolTabIndex
1140	1155	});
Index: branches/MwEmbedStandAlone/modules/Sequencer/mw.SequencerTimeline.js
—	—	@@ -224,7 +224,6 @@
225	225	trackRendering = true;
226	226	thumbRenderStack++;
227	227	// Update the timeline clip layout
228		~~- mw.log("getTrackClipInterface::bufferedSeekRelativeTime for " + smil.getSmilElementPlayerID( smilElement ));~~
229	228	_this.drawClipThumb( smilElement , 0, function(){
230	229	// Clip is ready decrement the thum render queue
231	230	thumbRenderStack--;
Index: branches/MwEmbedStandAlone/modules/Sequencer/remotes/mw.MediaWikiRemoteSequencer.js
—	—	@@ -75,7 +75,7 @@
76	76	// pause event should fire
77	77	mw.remoteSequencerAddEditOverlay( embedPlayerId );
78	78
79		~~- // show the credits screen after 3 seconds 1/2 seconds~~
	79	+ // show the credits screen after 3.5 seconds
80	80	setTimeout(function(){
81	81	$j( embedPlayer ).siblings( '.kalturaEditOverlay' ).fadeOut( 'fast' );
82	82	embedPlayer.$interface.find('.k-menu').fadeIn('fast');
Index: branches/MwEmbedStandAlone/libraries/jquery/plugins/jquery.menu/jquery.menu.js
—	—	@@ -92,7 +92,7 @@
93	93	var menu = this;
94	94	var caller = $(caller);
95	95
96		~~- mw.log( 'target container: ' + options.targetMenuContainer );~~
	96	+ mw.log( 'jQuery.Menu:: target container: ' + options.targetMenuContainer );
97	97
98	98	var callerClassList = 'fg-menu-container ui-widget ui-widget-content ui-corner-all';
99	99	if( options.targetMenuContainer ) {

Status & tagging log

21:52, 3 December 2010 Reedy (talk | contribs) changed the status of r77318 [removed: new added: deferred]