r72266 MediaWiki - Code Review archive

Repository:	MediaWiki
Revision:	< r72265‎ \| r72266 \| r72267 >
Date:	07:06, 3 September 2010
Author:	dale
Status:	deferred
Tags:
Comment:	fixed some drawTrack bugs and improved wikitemplate support
Modified paths:	/branches/MwEmbedStandAlone/modules/ClipEdit/mw.ClipEdit.js (modified) (history) /branches/MwEmbedStandAlone/modules/Sequencer/mw.SequencerAddByUrl.js (modified) (history) /branches/MwEmbedStandAlone/modules/Sequencer/mw.SequencerAddMedia.js (modified) (history) /branches/MwEmbedStandAlone/modules/Sequencer/mw.SequencerServer.js (modified) (history) /branches/MwEmbedStandAlone/modules/Sequencer/mw.SequencerTimeline.js (modified) (history) /branches/MwEmbedStandAlone/modules/Sequencer/mw.SequencerTools.js (modified) (history) /branches/MwEmbedStandAlone/modules/SmilPlayer/mw.Smil.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/modules/SmilPlayer/mw.SmilTransitions.js (modified) (history) /branches/MwEmbedStandAlone/mwEmbed.js (modified) (history)

Diff [purge]

Index: branches/MwEmbedStandAlone/mwEmbed.js
—	—	@@ -1081,7 +1081,8 @@
1082	1082	'bgiframe': true,
1083	1083	'draggable': true,
1084	1084	'resizable': false,
1085		~~- 'modal': true~~
	1085	+ 'modal': true,
	1086	+ 'position' : ['center', 'center']
1086	1087	}, options );
1087	1088
1088	1089	if( ! options.title \|\| ! options.content ){
—	—	@@ -1096,9 +1097,7 @@
1097	1098	'id' : "mwTempLoaderDialog",
1098	1099	'title' : options.title
1099	1100	})
1100		~~- .css({~~
1101		~~- 'display': 'none'~~
1102		~~- })~~
	1101	+ .hide()
1103	1102	.append( options.content )
1104	1103	);
1105	1104
—	—	@@ -1129,7 +1128,16 @@
1130	1129	],
1131	1130	uiRequest
1132	1131	], function() {
1133		~~- $j( '#mwTempLoaderDialog' ).dialog( options );~~
	1132	+ var $dialog = $j( '#mwTempLoaderDialog' ).show().dialog( options );
	1133	+ // center the dialog
	1134	+ // xxx figure out why jquery ui is messing up here
	1135	+ $j( '#mwTempLoaderDialog' ).parent('.ui-dialog').css({
	1136	+ 'position' : 'absolute',
	1137	+ 'left' : '50%',
	1138	+ 'margin-left': -1 * $dialog.width()/2,
	1139	+ 'top' : '50%',
	1140	+ 'margin-top': -1 * $dialog.height()/2
	1141	+ });
1134	1142	} );
1135	1143	return $j( '#mwTempLoaderDialog' );
1136	1144	}
Index: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilBody.js
—	—	@@ -29,7 +29,8 @@
30	30	'img' : 'ref',
31	31	'textstream' : 'ref',
32	32	'video' : 'ref',
33		~~- 'smiltext' : 'ref'~~
	33	+ 'smiltext' : 'ref',
	34	+ 'mwtemplate' : 'ref'
34	35	},
35	36
36	37	// Constructor:
—	—	@@ -82,23 +83,25 @@
83	84	*/
84	85	renderTime: function( time, deltaTime ){
85	86	var _this = this;
86		~~- //mw.log( "renderTime:: " + time );~~
87		-
	87	+ mw.log( "SmilBody::renderTime:: " + time + ' delta: '+ deltaTime);
	88	+
88	89	// Get all the draw elements from the body this time:
89	90	this.getElementsForTime( time ,
90	91	/* SMIL Element in Range */
91		~~- function( smilElement) {~~
	92	+ function( smilElement) {
	93	+ mw.log("SmilBody::renderTime: Element in Range" + $j( smilElement ).attr('id'));
92	94	// var relativeTime = time - smilElement.parentTimeOffset;
93	95	var relativeTime = time - $j( smilElement ).data ( 'startOffset' );
94	96
95	97	// Render the active elements using the layout engine
96	98	_this.smil.getLayout().drawElement( smilElement );
97	99
98		~~- // Transform the elements per animate engine~~
	100	+ // Transform the elements via animate engine
99	101	_this.smil.getAnimate().animateTransform( smilElement, relativeTime, deltaTime );
100	102	},
101	103	/* SMIL Element out of range */
102	104	function( smilElement ){
	105	+ mw.log("SmilBody::renderTime: Element out of Range" + $j( smilElement ).attr('id'));
103	106	// Stop the animation or playback
104	107	_this.smil.getAnimate().pauseAnimation( smilElement )
105	108
—	—	@@ -120,6 +123,7 @@
121	124	pause: function( currentTime ){
122	125	var _this = this;
123	126	this.getElementsForTime( currentTime , function( smilElement ){
	127	+ mw.log("SmilBody::pause: Element in Range" + $j( smilElement ).attr('id'));
124	128	_this.smil.getAnimate().pauseAnimation( smilElement )
125	129	});
126	130	},
—	—	@@ -239,9 +243,16 @@
240	244	}
241	245	// Recurse on every ref element and run relevant callbacks
242	246	this.getRefElementsRecurse( this.getDom(), 0, function( $node ){
	247	+
243	248	var startOffset = $node.data( 'startOffset' );
244	249	var nodeDuration = _this.getClipDuration( $node );
245	250
	251	+ /*
	252	+ * mw.log("Checking if ref: " + $node.attr('id') + ' is in range:' + time + ' >= ' +
	253	+ $node.data( 'startOffset' ) + ' && '+ time +' < ' +startOffset + ' + ' + nodeDuration + "\n" +
	254	+ ' inrage cb: ' + typeof inRangeCallback + ' eval::' +
	255	+ ( time >= startOffset && time < ( startOffset + nodeDuration) ) + "\n\n" );
	256	+ */
246	257	// Check if element is in range:
247	258	if( time >= startOffset && time < ( startOffset + nodeDuration) ){
248	259	if( typeof inRangeCallback == 'function' ){
—	—	@@ -283,7 +294,7 @@
284	295
285	296	// Setup local pointers:
286	297	var nodeType = this.getNodeSmilType( $node );
287		-
	298	+
288	299	// If 'par' or 'seq' recurse on children
289	300	if( nodeType == 'par' \|\| nodeType == 'seq' ) {
290	301	if( $node.children().length ) {
—	—	@@ -324,7 +335,7 @@
325	336	* Returns the smil body duration
326	337	* ( wraps getDurationRecurse to get top level node duration )
327	338	*/
328		~~- getDuration: function( forceRefresh ){~~
	339	+ getDuration: function( forceRefresh ){
329	340	this.duration = this.getClipDuration( this.getDom(), forceRefresh );
330	341	return this.duration;
331	342	},
—	—	@@ -405,7 +416,7 @@
406	417	this.smil.getBuffer().loadElement( $node );
407	418	// xxx check if the type is "video or audio" else nothing to return
408	419
409		~~- var vid = $j( '#' + this.smil.getPageDomId( $node ) ).get(0);~~
	420	+ var vid = $j( '#' + this.smil.getSmilElementPlayerID( $node ) ).get(0);
410	421	if( vid.duration ){
411	422	callback( vid.duration );
412	423	}
Index: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilLayout.js
—	—	@@ -14,6 +14,18 @@
15	15	// Stores the current top z-index for "putting things on top"
16	16	topZindex: 1,
17	17
	18	+ // Font size em map
	19	+ // based on: http://style.cleverchimp.com/font_size_intervals/altintervals.html
	20	+ emFontSizeMap : {
	21	+ 'xx-small' : '.57em',
	22	+ 'x-small' : '.69em',
	23	+ 'small' : '.83em',
	24	+ 'medium' : '1em',
	25	+ 'large' : '1.2em',
	26	+ 'x-large' : '1.43em',
	27	+ 'xx-large' : '1.72em'
	28	+ },
	29	+
18	30	// Constructor:
19	31	init: function( smilObject ){
20	32	// Setup a pointer to parent smil Object
—	—	@@ -85,56 +97,93 @@
86	98	*/
87	99	drawElement: function( smilElement ) {
88	100	var _this = this;
	101	+
89	102	// Check for quick "show" path:
90		~~- var $targetElement = $j( '#' + this.smil.getPageDomId( smilElement ) );~~
	103	+ var $targetElement = $j( '#' + this.smil.getSmilElementPlayerID( smilElement ) );
91	104	if( $targetElement.length ){
92	105	$targetElement.show();
93	106	return ;
94		~~- }~~
95		-
96		~~- // Else draw the node into the regionTarget~~
97		-
98		~~- // mw.log( "SmilLayout::drawElement: " + nodeName + '.' + $j(~~
99		~~- // smilElement ).attr('id' ) + ' into ' + regionId );~~
100		~~- var $regionTarget = this.getRegionTarget( smilElement );~~
101		-
	107	+ }
	108	+ var $regionTarget = this.getRegionTarget( smilElement );
102	109	// Make sure we have a $regionTarget
103	110	if( !$regionTarget ){
104	111	return ;
105	112	}
106	113
107	114	// Append the Smil element to the target region
108		~~- _this.addSmilElementHtml($regionTarget, smilElement )~~
109		~~- mw.log( "addSmilElementHtml Added " +~~
110		~~- this.smil.getPageDomId( smilElement ) +~~
111		~~- ' to target: ' +~~
112		~~- $j( '#' + this.smil.getPageDomId( smilElement ) ).length );~~
	115	+ _this.drawPlayerSmilElement(smilElement, $regionTarget );
	116	+
113	117	},
	118	+ /**
	119	+ * Add the transformed smil element to the $regionTarget
	120	+ *
	121	+ * @param
	122	+ */
	123	+ // should be merged with addTHumb!
	124	+ drawPlayerSmilElement: function( smilElement, $regionTarget ) {
	125	+ var _this = this;
	126	+ mw.log('SmilLayout:: drawPlayerSmilElement: ' )
	127	+ var smilType = this.smil.getRefType( smilElement );
	128	+ switch( smilType ){
	129	+ // Static content can use drawSmilElementToTarget function:
	130	+ case 'mwtemplate':
	131	+ case 'img':
	132	+ case 'cdata_html':
	133	+ case 'smiltext':
	134	+ // Give the static content a getSmilElementPlayerID for player layaer control
	135	+ var $target = $j('<div />')
	136	+ .attr('id', _this.smil.getSmilElementPlayerID( smilElement ) )
	137	+ .css({
	138	+ 'width':'100%',
	139	+ 'height':'100%'
	140	+ })
	141	+ $regionTarget.append( $target )
	142	+ this.drawSmilElementToTarget( smilElement, $target );
	143	+ return ;
	144	+ break;
	145	+ case 'video':
	146	+ $regionTarget.append( this.getSmilVideoPlayerHtml( smilElement ) );
	147	+ return ;
	148	+ break;
	149	+ break;
	150	+ case 'audio':
	151	+ $regionTarget.append( this.getSmilAudioPlayerHtml( smilElement ) );
	152	+ return ;
	153	+ break;
	154	+ }
	155	+
	156	+ mw.log( "Error: Could not find smil layout transform for element type: " +
	157	+ smilType + ' of type ' + $j( smilElement ).attr( 'type' ) );
	158	+ $regionTarget.append( $j('<span />')
	159	+ .attr( 'id' , this.smil.getSmilElementPlayerID( smilElement ) )
	160	+ .text( 'Error: unknown type:' + smilType )
	161	+ )
	162	+ },
114	163
115		~~- drawElementThumb: function( $target, $node, relativeTime, callback ){~~
	164	+ drawSmilElementToTarget: function( smilElement, $target, relativeTime, callback ){
116	165	var _this = this;
117		~~- mw.log('SmilLayout::drawElementThumb: ' + $node.attr('id') + ' relative time:' + relativeTime );~~
	166	+ mw.log('SmilLayout::drawSmilElementToTarget: ' + $j(smilElement).attr('id') + ' relative time:' + relativeTime );
118	167	if( $target.length == 0 ){
119		~~- mw.log("Error drawElementThumb to empty target");~~
	168	+ mw.log("Error drawSmilElementToTarget to empty target");
120	169	return ;
121	170	}
122	171	// parse the time in case it came in as human input
123	172	relativeTime = this.smil.parseTime( relativeTime );
124	173
125	174
126		~~- switch ( this.smil.getRefType( $node ) ){~~
	175	+ switch ( this.smil.getRefType( smilElement ) ){
127	176	case 'video':
128		~~- this.getVideoCanvasThumb($target, $node, relativeTime, callback )~~
	177	+ this.getVideoCanvasThumb(smilElement, $target, relativeTime, callback )
129	178	return ;
130	179	break;
131	180	case 'img':
132		~~- // XXX should refactor and to use same path as player embed~~
133		~~- // xxx we should use canvas here but for now just hack it up:~~
134		~~- var $playerImage = this.getSmilImgHtml( $node );~~
	181	+ // xxx We should use canvas here but for now just hack it up:
135	182	$target.html(
136	183	$j('<img />')
137	184	.attr({
138		~~- 'src' : this.smil.getAssetUrl( $node.attr( 'src' ) )~~
	185	+ 'src' : this.smil.getAssetUrl(
	186	+ $j( smilElement).attr( 'src' )
	187	+ )
139	188	})
140	189	);
141	190	var img = $target.find('img').get(0)
—	—	@@ -149,20 +198,36 @@
150	199	)
151	200	// Check for panZoom attribute
152	201	//( if animation is set it will override this value )
153		~~- if( $node.attr('panZoom') ){~~
154		~~- _this.panZoomLayout( $node.get(0), $target, img );~~
	202	+ if( $j( smilElement ).attr('panZoom') ){
	203	+ _this.panZoomLayout( smilElement, $target, img );
155	204	}
156	205	if( callback )
157	206	callback();
158	207	});
159	208	return
160	209	break;
161		~~- case 'cdata_html':~~
162		~~- // Scale down the html into the target width~~
163		~~- this.addSmilCDATAHtml( $node, $target, callback );~~
	210	+ case 'mwtemplate':
	211	+ $target.loadingSpinner();
	212	+ this.addSmilTemplateHtml( smilElement, $target, callback );
	213	+ return;
164	214	break;
	215	+ case 'cdata_html':
	216	+ // Put the cdata into the smil element:
	217	+ $target.append(
	218	+ this.getSmilCDATAHtml( smilElement, $target.width() )
	219	+ );
	220	+ break;
	221	+ // Smil Text: http://www.w3.org/TR/SMIL/smil-text.html
	222	+ // We support a subset
	223	+ case 'smiltext':
	224	+ $target.append( this.getSmilTextHtml( smilElement ) ) ;
	225	+ return ;
	226	+ break;
165	227	case 'audio':
166		~~- var titleStr = ( $node.attr('title') )? $node.attr('title') : gM( 'mwe-sequencer-untitled-audio' )~~
	228	+ var titleStr = ( $j( smilElement ).attr('title') ) ?
	229	+ $j( smilElement ).attr('title') :
	230	+ gM( 'mwe-sequencer-untitled-audio' );
	231	+
167	232	// draw an audio icon / title the target
168	233	$target.append(
169	234	$j('<span />')
—	—	@@ -181,14 +246,15 @@
182	247	)
183	248	break;
184	249	}
	250	+ // assume direct callback if callback not passed in content type switch
185	251	if( callback )
186	252	callback();
187	253	},
188	254
189		~~- getVideoCanvasThumb: function($target, $node, relativeTime, callback ){~~
	255	+ getVideoCanvasThumb: function( smilElement, $target, relativeTime, callback ){
190	256	var _this = this;
191	257	var naturaSize = {};
192		~~- var drawElement = $j( '#' + this.smil.getPageDomId( $node ) ).get(0);~~
	258	+ var drawElement = $j( '#' + this.smil.getSmilElementPlayerID( smilElement ) ).get(0);
193	259
194	260	var drawFrame = function( drawElement ){
195	261	if( !drawElement ){
—	—	@@ -225,7 +291,7 @@
226	292
227	293	// check if relativeTime transform matches current absolute time then
228	294	// render directly:
229		~~- var drawTime = ( relativeTime + this.smil.parseTime( $j( $node ).attr('clipBegin') ) );~~
	295	+ var drawTime = ( relativeTime + this.smil.parseTime( $j( smilElement ).attr('clipBegin') ) );
230	296	if( this.smil.isSameFrameTime( drawElement.currentTime, drawTime ) ) {
231	297	mw.log("getVideoCanvasThumb: Draw time:" + drawTime + " matches video time drawFrame:" +drawElement.currentTime );
232	298	drawFrame( drawElement );
—	—	@@ -233,11 +299,11 @@
234	300	// check if we need to spawn a video copy for the draw request
235	301	mw.log( 'getVideoCanvasThumb: Clone object' );
236	302	// span new draw element
237		~~- var $tmpFrameNode = $node.clone();~~
238		~~- $tmpFrameNode.attr('id', $node.attr('id') + '_tmpFrameNode' );~~
	303	+ var $tmpFrameNode = $j( smilElement ).clone();
	304	+ $tmpFrameNode.attr('id', $j( smilElement).attr('id') + '_tmpFrameNode' );
239	305	this.smil.getBuffer().bufferedSeekRelativeTime( $tmpFrameNode, relativeTime, function(){
240	306	// update the drawElement
241		~~- drawElement = $j( '#' + _this.smil.getPageDomId( $tmpFrameNode ) ).get(0);~~
	307	+ drawElement = $j( '#' + _this.smil.getSmilElementPlayerID( $tmpFrameNode ) ).get(0);
242	308	drawFrame( drawElement );
243	309	// Remove the temporary node from dom
244	310	$j( drawElement ).remove();
—	—	@@ -269,65 +335,22 @@
270	336	*/
271	337	hideElement: function( smilElement ){
272	338	// Check that the element is already in the dom
273		~~- var $targetElement = this.$rootLayout.find( '#' + this.smil.getPageDomId( smilElement ) );~~
	339	+ var $targetElement = this.$rootLayout.find( '#' + this.smil.getSmilElementPlayerID( smilElement ) );
274	340	if( $targetElement.length ){
275	341	// Issue a quick hide request
276	342	$targetElement.hide();
277	343	}
278	344	},
279	345
280		- /**
281		~~- * Add the transformed smil element to the $regionTarget~~
282		- *
283		~~- * @param~~
284		~~- */~~
285		~~- addSmilElementHtml: function( $regionTarget, smilElement ) {~~
286		~~- var _this = this;~~
287		~~- var smilType = this.smil.getRefType( smilElement )~~
288		~~- switch( smilType ){~~
289		~~- // Not part of strict smil, but saves time being able have an "html"~~
290		~~- // display mode~~
291		~~- case 'cdata_html':~~
292		~~- this.addSmilCDATAHtml( smilElement, $regionTarget );~~
293		~~- return ;~~
294		~~- break;~~
295		~~- case 'video':~~
296		~~- $regionTarget.append( this.getSmilVideoHtml( smilElement ) );~~
297		~~- return ;~~
298		~~- break;~~
299		~~- case 'img':~~
300		~~- $regionTarget.append( this.getSmilImgHtml( smilElement ) );~~
301		~~- // Update the asset layout ( only img supports layout atm )~~
302		~~- _this.doSmilElementLayout( smilElement );~~
303		~~- return ;~~
304		~~- break;~~
305		~~- case 'audio':~~
306		~~- $regionTarget.append( this.getSmilAudioHtml( smilElement ) );~~
307		~~- return ;~~
308		~~- break;~~
309		~~- // Smil Text: http://www.w3.org/TR/SMIL/smil-text.html~~
310		~~- // We support a subset~~
311		~~- case 'smiltext':~~
312		~~- $regionTarget.append( this.getSmilTextHtml( smilElement ) ) ;~~
313		~~- return ;~~
314		~~- break;~~
315		~~- }~~
316		-
317		~~- mw.log( "Error: Could not find smil layout transform for element type: " +~~
318		~~- smilType + ' of type ' + $j( smilElement ).attr( 'type' ) );~~
319		~~- $regionTarget.append( $j('<span />')~~
320		~~- .attr( 'id' , this.smil.getPageDomId( smilElement ) )~~
321		~~- .text( 'Error: unknown type:' + smilType )~~
322		~~- )~~
323		~~- },~~
324	346
	347	+
325	348	/**
326	349	* Return the video
327	350	*/
328		~~- getSmilVideoHtml: function( smilElement ){~~
	351	+ getSmilVideoPlayerHtml: function( smilElement ){
329	352	return $j('<video />')
330	353	.attr( {
331		~~- 'id' : this.smil.getPageDomId( smilElement ),~~
	354	+ 'id' : this.smil.getSmilElementPlayerID( smilElement ),
332	355	'src' : this.smil.getAssetUrl( $j( smilElement ).attr( 'src' ) )
333	356	} )
334	357	.addClass( 'smilFillWindow' )
—	—	@@ -336,75 +359,103 @@
337	360	/**
338	361	* Return audio element ( by default audio tracks are hidden )
339	362	*/
340		~~- getSmilAudioHtml: function ( smilElement ){~~
	363	+ getSmilAudioPlayerHtml: function ( smilElement ){
341	364	return $j('<audio />')
342	365	.attr( {
343		~~- 'id' : this.smil.getPageDomId( smilElement ),~~
	366	+ 'id' : this.smil.getSmilElementPlayerID( smilElement ),
344	367	'src' : this.smil.getAssetUrl( $j( smilElement ).attr( 'src' ) )
345	368	} )
346	369	.css( 'display', 'none');
347	370	},
348	371
349	372	/**
350		~~- * Get Smil CDATA ( passed through jQuery .clean as part of fragment~~
351		~~- * creation ) XXX Security XXX Here we are parsing in SMIL -> HTML should be~~
352		~~- * careful about XSS or script elevation~~
353		- *
354		~~- * @@TODO check all sources are "local" only smil and enforce domain on all~~
355		~~- * asset sources~~
	373	+ * Add Smil Template to a $target
356	374	*/
357		~~- addSmilCDATAHtml: function( smilElement, $target, callback ){~~
358		~~- if( $j( smilElement).attr('type') == 'text/html' ){~~
359		~~- $target.append( this.getSmilCDATAHtml(smilElement, $target.width() ));~~
	375	+ addSmilTemplateHtml: function( smilElement, $target, callback ){
	376	+ var _this = this;
	377	+ var addTemplateHtmlToTarget = function(){
	378	+ // Add the html to the target:
	379	+ mw.log( 'addTemplateHtmlToTarget:: with width:' + $target.width() );
	380	+ $target.empty().append(
	381	+ _this.getScaledHtml(
	382	+ // The scaled template:
	383	+ $j( $j( smilElement).data('templateHtmlCache') ),
	384	+
	385	+ // The smilElement
	386	+ smilElement,
	387	+
	388	+ // The target width to be scaled
	389	+ $target.width()
	390	+ )
	391	+ );
	392	+ // Run the callback
	393	+ if( callback )
	394	+ callback();
	395	+ }
	396	+ // Check if we have the result data in the cache:
	397	+ if( $j( smilElement).data('templateHtmlCache') ){
	398	+ addTemplateHtmlToTarget()
360	399	if( callback )
361	400	callback();
362	401	return ;
363	402	}
364		~~- // Check if we need to load the content:~~
365		~~- if( $j( smilElement).attr('type') == 'application/x-wikitemplate' ){~~
366		~~- // build a wikitext call~~
367		~~- var templateKey = $j( smilElement).attr('apiTitleKey').replace('Template:', '');~~
368		~~- if(!templateKey){~~
369		~~- mw.log("Error: wikitemplate without title key")~~
370		~~- return ;~~
	403	+
	404	+ mw.log("addSmilTemplateHtml:: x-wikitemplate:: " + $j( smilElement).attr( 'apititlekey' ) + " to target:" + $target.attr('class'));;
	405	+ // build a wikitext call ( xml keys lose case when put into xml )
	406	+ var templateKey = $j( smilElement).attr( 'apititlekey' );
	407	+ if(!templateKey){
	408	+ mw.log("Error: wikitemplate without title key")
	409	+ return ;
	410	+ } else {
	411	+ templateKey = templateKey.replace('Template:', '');
	412	+ }
	413	+ var apiProviderUrl = mw.getApiProviderURL( $j( smilElement).attr('apiprovider') );
	414	+ if(!apiProviderUrl){
	415	+ mw.log("Error: wikitemplate without api provider url")
	416	+ }
	417	+
	418	+ var wikiTextTemplateCall = '{{' + templateKey ;
	419	+ var paramText = '';
	420	+ $j( smilElement).find('param').each(function( inx, paramNode ){
	421	+ paramText +='\|' + $j( paramNode ).attr('name') +
	422	+ '= ' +
	423	+ unescape( $j( paramNode ).attr('value') ) +
	424	+ "\n";
	425	+ });
	426	+ // Close up the template call
	427	+ if( paramText!= ''){
	428	+ wikiTextTemplateCall+="\n" + paramText + '}}';
	429	+ } else{
	430	+ wikiTextTemplateCall+='}}'
	431	+ }
	432	+
	433	+ var request = {
	434	+ 'action' : 'parse',
	435	+ 'text': wikiTextTemplateCall,
	436	+ };
	437	+ // Check if we have the titleKey for the sequence and use that as context title
	438	+ var titleKey = this.smil.getEmbedPlayer().apiTitleKey;
	439	+ if( titleKey ){
	440	+ request['title'] = titleKey;
	441	+ }
	442	+
	443	+ mw.getJSON( apiProviderUrl, request, function( data ){
	444	+ if( data && data.parse && data.parse.text && data.parse.text['*'] ){
	445	+ // Mediawiki protects against xss but filter the parsed text 'just in case'
	446	+ $j( smilElement).data('templateHtmlCache',
	447	+ _this.smil.getFilterdHtml( data.parse.text['*'] ).html()
	448	+ )
	449	+ // Check if we have a load callback associated with the smilElement:
	450	+ if( $j( smilElement ).data('loadCallback') ){
	451	+ $j( smilElement ).data('loadCallback')();
	452	+ }
	453	+ addTemplateHtmlToTarget();
	454	+ } else{
	455	+ mw.log("Error: addSmilCDATAHtml could not get template data from the wiki")
371	456	}
372		~~- var apiProviderUrl = mw.getApiProviderURL( $j( smilElement).attr('apiProvider') );~~
373		~~- if(!apiProviderUrl){~~
374		~~- mw.log("Error: wikitemplate without api provider url")~~
375		~~- }~~
376		-
377		~~- var wikiTextTemplateCall = '' +~~
378		~~- '{{' + templateKey + "\n";~~
379		~~- $j( smilElement).find('param').each(function( inx, paramNode ){~~
380		~~- wikiTextTemplateCall+= $j( paramNode ).attr('name') + '= ' +~~
381		~~- unescape( $j( paramNode ).attr('value') )~~
382		~~- });~~
383		-
384		~~- // Close up the template call~~
385		~~- wikiTextTemplateCall+="\n}}";~~
386		~~- var request = {~~
387		~~- 'action' : 'parse',~~
388		~~- 'text': wikiTextTemplateCall,~~
389		~~- };~~
390		~~- // Check if we have the titleKey for the sequence and use that as context title~~
391		~~- var titleKey = this.smil.getEmbedPlayer().apiTitleKey;~~
392		~~- if( titleKey ){~~
393		~~- request['title'] = titleKey;~~
394		~~- }~~
395		~~- mw.getJSON( apiProviderUrl, request, function(data){~~
396		~~- if( data && data.parse && data.parse.text && data.parse.text['*'] ){~~
397		~~- $target.html('<![CDATA[' +~~
398		~~- data.parse.text['*']~~
399		~~- + "\n]]>")~~
400		~~- $target.append( this.getSmilCDATAHtml(smilElement, $target.width() ));~~
401		~~- if( callback )~~
402		~~- callback();~~
403		~~- }~~
404		~~- mw.log("Error could not get template data")~~
405		~~- if( callback )~~
406		~~- callback();~~
407		~~- });~~
408		~~- }~~
	457	+ if( callback )
	458	+ callback();
	459	+ });
409	460	},
410	461
411	462	getSmilCDATAHtml: function( smilElement, targetWidth){
—	—	@@ -421,33 +472,27 @@
422	473	xmlCdata += node.nodeValue;
423	474	}
424	475	}
	476	+ var $htmlLayout = this.smil.getFilterdHtml( xmlCdata );
425	477
426		~~- var textCss = this.transformSmilCss( smilElement , targetWidth);~~
	478	+ // Return scaled and filtered html
	479	+ return this.getScaledHtml( $htmlLayout, smilElement, targetWidth );
	480	+ },
	481	+
	482	+ getScaledHtml: function( $htmlLayout, smilElement, targetWidth){
	483	+ var _this = this;
	484	+ var textCss = this.transformSmilCss( smilElement , targetWidth);
427	485
428		~~- // We pass the xmlCdata via jQuery fragment creation, this runs~~
429		~~- // jquery.clean()~~
430		~~- // and filters the result html.~~
431		~~- var $cdataHtml = $j( '<div />' ).append(~~
432		~~- $j( xmlCdata )~~
433		~~- )~~
434		-
435	486	// See if we need to scale
436	487	var scalePercent = ( targetWidth / this.getVirtualWidth() );
437		-
438		~~- // Links go to a new window and are disable scale down.~~
439		~~- $cdataHtml.find('a').each( function(inx, link ){~~
440		~~- if( scalePercent < 1 ){~~
441		~~- $j(link).attr('href', '#');~~
442		~~- } else {~~
443		~~- $j(link).attr('target', '_new');~~
444		~~- }~~
445		~~- });~~
446		-
	488	+
	489	+ // Don't scale fonts as dramatically:
	490	+ var fontScalePercent = Math.sqrt( scalePercent );
	491	+
	492	+ // Scale the
447	493	if( scalePercent != 1 ){
448		~~- $cdataHtml.find('img').each( function(inx, image ){~~
	494	+ $htmlLayout.find('img').each( function(inx, image ){
449	495	// make sure each image is loaded before we transform,
450		~~- // AND via the magic of closures this updates $cdataHtml output~~
451		~~- // in-place~~
	496	+ // AND updates $htmlLayout output in-place
452	497	$j( image ).load(function(){
453	498	// if the image has an height or width scale by scalePercent
454	499	if ( $j( image ).width() ){
—	—	@@ -465,17 +510,26 @@
466	511	})
467	512	});
468	513	})
	514	+ // Switch any named font-size attribute to em
	515	+ $htmlLayout.find('[style]').each( function(inx, node){
	516	+ if( $j(node).css('font-size') ){
	517	+ $j(node).css('font-size',
	518	+ ( fontScalePercent * parseFloat( $j(node).css('font-size') ) ) + 'px'
	519	+ );
	520	+ }
	521	+ })
469	522	}
	523	+
470	524
	525	+
471	526	// Return the cdata
472		~~- return $j('<div />')~~
473		~~- .attr( 'id' , this.smil.getPageDomId( smilElement ) )~~
	527	+ return $j('<div />')
474	528	// Wrap in font-size percentage relative to virtual size
475	529	.css( {
476	530	'font-size': ( scalePercent *100 ) + '%'
477	531	})
478	532	.append(
479		~~- $cdataHtml.css( textCss )~~
	533	+ $htmlLayout.css( textCss )
480	534	);
481	535	},
482	536
—	—	@@ -500,7 +554,7 @@
501	555
502	556	// Return the htmlElement
503	557	return $j('<span />')
504		~~- .attr( 'id' , this.smil.getPageDomId( textElement ) )~~
	558	+ .attr( 'id' , this.smil.getSmilElementPlayerID( textElement ) )
505	559	// Wrap in font-size percentage relative to virtual size
506	560	.css( 'font-size', ( ( this.targetWidth / this.getVirtualWidth() )*100 ) + '%' )
507	561	.html(
—	—	@@ -522,7 +576,7 @@
523	577	var _this = this;
524	578	var $image = $j('<img />')
525	579	.attr( {
526		~~- 'id' : this.smil.getPageDomId( smilImg ),~~
	580	+ 'id' : this.smil.getSmilElementPlayerID( smilImg ),
527	581	'src' : this.smil.getAssetUrl( $j( smilImg ).attr( 'src' ) )
528	582	} )
529	583	// default width 100%
—	—	@@ -533,7 +587,7 @@
534	588	doSmilElementLayout: function( smilElement ){
535	589	var _this = this;
536	590
537		~~- var img = $j( '#' + this.smil.getPageDomId( smilElement ) ).get(0);~~
	591	+ var img = $j( '#' + this.smil.getSmilElementPlayerID( smilElement ) ).get(0);
538	592	_this.getNaturalSize( img, function( naturalSize) {
539	593	_this.doAssetLayout( smilElement , naturalSize);
540	594	});
—	—	@@ -576,7 +630,7 @@
577	631	'height' : this.smil.embedPlayer.getHeight()
578	632	}
579	633	this.fitMeetBest(
580		~~- $j( '#' + this.smil.getPageDomId( smilElement ) ).get(0),~~
	634	+ $j( '#' + this.smil.getSmilElementPlayerID( smilElement ) ).get(0),
581	635	naturalSize,
582	636	targetSize
583	637	);
—	—	@@ -651,7 +705,7 @@
652	706	var _this = this;
653	707	var panZoom = $j( smilElement).attr('panZoom').split(',');
654	708	if( !img ){
655		~~- var img = $j( '#' + this.smil.getPageDomId( smilElement ) ).get(0);~~
	709	+ var img = $j( '#' + this.smil.getSmilElementPlayerID( smilElement ) ).get(0);
656	710	}
657	711
658	712	_this.getNaturalSize( img, function( natrualSize ){
—	—	@@ -886,20 +940,9 @@
887	941	cssAttributes[ smilAttributeToCss[ attr.nodeName ]] = attr.nodeValue;
888	942	}
889	943	}
890		-
891		~~- // Make the font size fixed so it can be scaled~~
892		~~- // based on:~~
893		~~- // http://style.cleverchimp.com/font_size_intervals/altintervals.html~~
894		~~- var sizeMap = {~~
895		~~- 'xx-small' : '.57em',~~
896		~~- 'x-small' : '.69em',~~
897		~~- 'small' : '.83em',~~
898		~~- 'medium' : '1em',~~
899		~~- 'large' : '1.2em',~~
900		~~- 'x-large' : '1.43em',~~
901		~~- 'xx-large' : '1.72em'~~
902		~~- }~~
903		~~- if( sizeMap[ cssAttributes['font-size'] ] ){~~
	944	+
	945	+ // convert named font sizes to em:
	946	+ if( this.emFontSizeMap[ cssAttributes['font-size'] ] ){
904	947	cssAttributes['font-size'] = sizeMap[ cssAttributes['font-size'] ];
905	948	}
906	949
Index: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilTransitions.js
—	—	@@ -27,7 +27,7 @@
28	28	if( transitionDuration > animateTime ){
29	29	var percent = animateTime / transitionDuration;
30	30	/* mw.log("SmilTransitions: " + $j( smilElement ).attr( 'transIn' ) + " in range for " +
31		~~- this.smil.getPageDomId( smilElement ) + " draw:" + percent );~~
	31	+ this.smil.getSmilElementPlayerID( smilElement ) + " draw:" + percent );
32	32	*/
33	33	this.drawTransition( percent, $transition, smilElement );
34	34	transitionInRange = true;
—	—	@@ -142,13 +142,13 @@
143	143	},
144	144	'crossfade': function( _this, percent, $transition, smilElement ){
145	145	// fade "ourselves" ... in cases of overlapping timelines this will create a true cross fade
146		~~- $j( '#' + _this.smil.getPageDomId( smilElement ) ).css( 'opacity', percent );~~
	146	+ $j( '#' + _this.smil.getSmilElementPlayerID( smilElement ) ).css( 'opacity', percent );
147	147	}
148	148	}
149	149	},
150	150
151	151	getTransitionOverlayId: function( $transition, smilElement) {
152		~~- return this.smil.getPageDomId( smilElement ) + '_' + $transition.attr('id');~~
	152	+ return this.smil.getSmilElementPlayerID( smilElement ) + '_' + $transition.attr('id');
153	153	}
154	154
155	155
Index: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilAnimate.js
—	—	@@ -20,20 +20,20 @@
21	21	* Pause any active animation or video playback
22	22	*/
23	23	pauseAnimation: function( smilElement ){
24		~~- // Check if the element is in the html dom:~~
25		~~- if( !$j ( '#' + this.smil.getPageDomId( smilElement ) ).length ){~~
	24	+ // Check if the element is in the html player dom:
	25	+ if( !$j ( '#' + this.smil.getSmilElementPlayerID( smilElement ) ).length ){
26	26	return ;
27	27	}
28	28	// Pause the animation of a given element ( presently just video )
29	29	switch( this.smil.getRefType( smilElement ) ){
30	30	case 'video':
31	31	case 'audio':
32		~~- $j ( '#' + this.smil.getPageDomId( smilElement ) ).get( 0 ).pause();~~
	32	+ $j ( '#' + this.smil.getSmilElementPlayerID( smilElement ) ).get( 0 ).pause();
33	33	break;
34	34	}
35	35	// non-video elements just pause by clearing any animation loops
36		~~- if( this.animateInterval[ this.smil.getPageDomId( smilElement ) ] ){~~
37		~~- clearInterval( this.animateInterval[ this.smil.getPageDomId( smilElement ) ] );~~
	36	+ if( this.animateInterval[ this.smil.getSmilElementPlayerID( smilElement ) ] ){
	37	+ clearInterval( this.animateInterval[ this.smil.getSmilElementPlayerID( smilElement ) ] );
38	38	}
39	39	},
40	40
—	—	@@ -46,12 +46,12 @@
47	47	// Get all the elements for the current time:
48	48	var maxOutOfSync = 0;
49	49	this.smil.getBody().getElementsForTime( time, function( smilElement ){
50		~~- //mw.log( 'check element: '+ time + ' ' + _this.smil.getPageDomId( smilElement ) );~~
	50	+ //mw.log( 'check element: '+ time + ' ' + _this.smil.getSmilElementPlayerID( smilElement ) );
51	51	// var relativeTime = time - smilElement.parentTimeOffset;
52	52	var relativeTime = time - $j( smilElement ).data ( 'startOffset' );
53	53	switch( _this.smil.getRefType( smilElement ) ){
54	54	case 'video':
55		~~- var vid = $j ( '#' + _this.smil.getPageDomId( smilElement ) ).get( 0 );~~
	55	+ var vid = $j ( '#' + _this.smil.getSmilElementPlayerID( smilElement ) ).get( 0 );
56	56	var vidTime = ( !vid \|\| !vid.currentTime )? 0 : vid.currentTime;
57	57	//mw.log( "getPlaybackSyncDelta:: video time should be: " + relativeTime + ' video time is: ' + vidTime );
58	58
—	—	@@ -105,13 +105,13 @@
106	106	// We have a delta spawn an short animateInterval
107	107
108	108	// Clear any old animation loop ( can be caused by overlapping play requests or slow animation )
109		~~- clearInterval( this.animateInterval[ this.smil.getPageDomId( smilElement ) ] );~~
	109	+ clearInterval( this.animateInterval[ this.smil.getSmilElementPlayerID( smilElement ) ] );
110	110
111	111	// Start a new animation interval
112	112	var animationStartTime = new Date().getTime();
113	113	var animateTimeDelta = 0;
114	114
115		~~- this.animateInterval[ this.smil.getPageDomId( smilElement ) ] =~~
	115	+ this.animateInterval[ this.smil.getSmilElementPlayerID( smilElement ) ] =
116	116	setInterval(
117	117	function(){
118	118	var timeElapsed = new Date().getTime() - animationStartTime;
—	—	@@ -121,7 +121,7 @@
122	122	// See if the animation has expired:
123	123	if( animateTimeDelta > deltaTime \|\| timeElapsed > deltaTime ){
124	124	// Stop animating:
125		~~- clearInterval( _this.animateInterval[ _this.smil.getPageDomId( smilElement ) ] );~~
	125	+ clearInterval( _this.animateInterval[ _this.smil.getSmilElementPlayerID( smilElement ) ] );
126	126	return ;
127	127	}
128	128
—	—	@@ -221,7 +221,7 @@
222	222	*/
223	223	transformVideoForTime: function( smilElement, animateTime, callback ){
224	224	// Get the video element
225		~~- var assetId = this.smil.getPageDomId( smilElement );~~
	225	+ var assetId = this.smil.getSmilElementPlayerID( smilElement );
226	226	var vid = $j ( '#' + assetId ).get( 0 );
227	227
228	228	var videoSeekTime = animateTime;
—	—	@@ -246,7 +246,7 @@
247	247	* Used to support video playback
248	248	*/
249	249	transformMediaForPlayback: function( smilElement, animateTime ){
250		~~- var $vid = $j ( '#' + this.smil.getPageDomId( smilElement ) );~~
	250	+ var $vid = $j ( '#' + this.smil.getSmilElementPlayerID( smilElement ) );
251	251
252	252	// Set activePlayback flag ( informs edit and buffer actions )
253	253	$j( smilElement ).data('activePlayback', true)
—	—	@@ -306,7 +306,7 @@
307	307
308	308	// Update the text value target
309	309	// xxx need to profile update vs check value
310		~~- $j( '#' + this.smil.getPageDomId( textElement ) )~~
	310	+ $j( '#' + this.smil.getSmilElementPlayerID( textElement ) )
311	311	.html(
312	312	$j('<span />')
313	313	// Add the text value
—	—	@@ -439,10 +439,10 @@
440	440
441	441	// get a pointer to the html target:
442	442	if( !$target ) {
443		~~- $target = $j( '#' + this.smil.getPageDomId( smilElement ));~~
	443	+ $target = $j( '#' + this.smil.getSmilElementPlayerID( smilElement ));
444	444	}
445	445	if( !htmlElement){
446		~~- htmlElement = $j( '#' + this.smil.getPageDomId( smilElement ) ).get(0);~~
	446	+ htmlElement = $j( '#' + this.smil.getSmilElementPlayerID( smilElement ) ).get(0);
447	447	}
448	448
449	449	// Wrap the target with its natural size ( if not already )
Index: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.Smil.js
—	—	@@ -307,7 +307,7 @@
308	308	var $smilElement = this.$dom.find( '#' + smilElementId );
309	309
310	310	// Remove from layout
311		~~- this.getLayout().getRootLayout().find( '#' + this.getPageDomId( $smilElement ) )~~
	311	+ this.getLayout().getRootLayout().find( '#' + this.getSmilElementPlayerID( $smilElement ) )
312	312	.remove();
313	313
314	314	// Remove from dom
—	—	@@ -327,8 +327,8 @@
328	328	* @param {Object}
329	329	* smilElement Element to get id for
330	330	*/
331		~~- getPageDomId : function( smilNode ) {~~
332		~~- if (! $j(smilNode).attr('id') ) {~~
	331	+ getSmilElementPlayerID : function( smilElement ) {
	332	+ if (! $j( smilElement ).attr('id') ) {
333	333	mw.log("Error: getAssetId smilElement missing id ");
334	334	return false;
335	335	}
—	—	@@ -337,7 +337,7 @@
338	338	mw.log("Error: getAssetId missing parent embedPlayer");
339	339	return false;
340	340	}
341		~~- return embedPlayer.id + '_' + $j( smilNode ).attr('id');~~
	341	+ return embedPlayer.id + '_' + $j( smilElement ).attr('id');
342	342	},
343	343
344	344	/**
—	—	@@ -367,7 +367,7 @@
368	368	getAssetUrl : function( assetPath ) {
369	369	// Context url is the smil document url:
370	370	var contextUrl = mw.absoluteUrl(this.smilContextUrl);
371		~~- var absoluteUrl = mw.absoluteUrl(assetPath, contextUrl);~~
	371	+ var absoluteUrl = mw.absoluteUrl( assetPath, contextUrl );
372	372	// Restrict any display url
373	373	if( mw.getConfig( 'SmilPlayer.AssetDomainWhiteList' ) != '*' ){
374	374	var approvedDomainList = mw.getConfig( 'SmilPlayer.AssetDomainWhiteList' );
—	—	@@ -386,6 +386,74 @@
387	387	return absoluteUrl;
388	388	},
389	389
	390	+ // filter 'raw' user htmlData
	391	+ getFilterdHtml: function( htmlData ){
	392	+ var _this = this;
	393	+ // We pass the htmlData via jQuery fragment creation, this runs
	394	+ // jquery.clean() and filters the result html of script tags and the like
	395	+ var $html = $j( '<div />' ).append(
	396	+ $j( htmlData )
	397	+ );
	398	+ // Links go to a new window and are disable when smaller than player size
	399	+ $html.find('a').each( function(inx, link ){
	400	+ if( scalePercent < 1 ){
	401	+ $j(link).attr('href', '#');
	402	+ } else {
	403	+ $j(link).attr('target', '_new');
	404	+ // Filter the link for any xss
	405	+ $j(link).attr('href',
	406	+ mw.escapeQuotesHTML( $j(link).attr('href') )
	407	+ )
	408	+ }
	409	+ });
	410	+
	411	+ // Make every asset url absolute and restrict domain of assets
	412	+ // ( if player is configured to restrict asset domains )
	413	+ $html.find('img,video,audio,track,iframe,object,embed,form').each(function(inx, node){
	414	+ if( $j(node).attr('src') ){
	415	+ $j(node).attr('src',
	416	+ _this.getAssetUrl( $j(node).attr('src') )
	417	+ )
	418	+ }
	419	+ if( $j(node).attr('data') ){
	420	+ $j(node).attr('data',
	421	+ _this.getAssetUrl( $j(node).attr('src') )
	422	+ )
	423	+ }
	424	+ // xxx don't know if we really need a form inside of smil.
	425	+ if( $j(node).attr('action') ){
	426	+ if( $j(node).attr('action').toLowerCase().indexOf('javascript') != -1 ){
	427	+ $j(node).attr('action')= null;
	428	+ } else {
	429	+ $j(node).attr('action',
	430	+ _this.getAssetUrl( $j(node).attr('src') )
	431	+ )
	432	+ }
	433	+ }
	434	+ })
	435	+
	436	+ // Script and html bindings should have been striped with $j.clean
	437	+ // but just in case remove any suspect elements with 'script' attributes
	438	+ $html.find('script,' +
	439	+ // body and frameset event attributes
	440	+ '[onload],[onunload],' +
	441	+
	442	+ // Form element events:
	443	+ '[onblur],[onchange],[onfocus],[onreset],[onselect],[onsubmit],' +
	444	+
	445	+ // Image events:
	446	+ '[onabort],' +
	447	+
	448	+ // Keyboard events
	449	+ '[onkeydown],[onkeypress],[onkeyup],',
	450	+
	451	+ // Mouse events
	452	+ '[onclick],[onclick],[ondblclick],[onmousedown],' +
	453	+ '[onmousemove],[onmouseout],[onmouseover],[onmouseup]'
	454	+ ).remove();
	455	+
	456	+ return $html;
	457	+ },
390	458	/**
391	459	* Get the smil resource type based on nodeName and type attribute
392	460	*/
—	—	@@ -407,6 +475,8 @@
408	476	if (smilType == 'ref') {
409	477	switch ($j(smilElement).attr('type')) {
410	478	case 'application/x-wikitemplate':
	479	+ smilType= 'mwtemplate';
	480	+ break;
411	481	case 'text/html':
412	482	smilType = 'cdata_html';
413	483	break;
Index: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilBuffer.js
—	—	@@ -147,26 +147,25 @@
148	148	var _this = this;
149	149
150	150	// If the element is not already in the DOM add it as an invisible element
151		~~- if( $j( '#' + this.smil.getPageDomId( smilElement ) ).length == 0 ){~~
	151	+ if( $j( '#' + this.smil.getSmilElementPlayerID( smilElement ) ).length == 0 ){
152	152	// Draw the element
153	153	_this.smil.getLayout().drawElement( smilElement );
154	154	// Hide the element ( in modern browsers this should not cause a flicker
155	155	// because DOM update are displayed at a given dom draw rate )
156	156	_this.smil.getLayout().hideElement( smilElement );
157		~~- mw.log('loadElement::Add:' + this.smil.getPageDomId( smilElement )+ ' len: ' + $j( '#' + this.smil.getPageDomId( smilElement ) ).length );~~
	157	+ mw.log('loadElement::Add:' + this.smil.getSmilElementPlayerID( smilElement )+ ' len: ' + $j( '#' + this.smil.getSmilElementPlayerID( smilElement ) ).length );
158	158	}
159	159
160	160	// Start "loading" the asset (for now just video )
161		~~- // but in theory we could set something up with large images~~
	161	+ // but in theory we could set something up with large images / templates etc.
162	162	switch( this.smil.getRefType( smilElement ) ){
163	163	case 'video':
164		~~- var vid = $j( '#' + this.smil.getPageDomId( smilElement ) ).get(0);~~
	164	+ var vid = $j( '#' + this.smil.getSmilElementPlayerID( smilElement ) ).get(0);
165	165	if( !vid ){
166	166	break;
167	167	}
168	168	// The load request does not work very well instead .play() then .pause() and seek when on display
169		~~- // vid.load();~~
170		-
	169	+ // vid.load();
171	170	// Since we can't use "load" across html5 implementations do some hacks:
172	171	if( vid.paused && this.getVideoPercetLoaded( smilElement ) == 0 ){
173	172	// Issue the load / play request
—	—	@@ -174,7 +173,7 @@
175	174	vid.volume = 0;
176	175	// XXX seek to clipBegin if provided ( we don't need to load before that point )
177	176	} else {
178		~~- //mw.log("loadElement:: pause video: " + this.smil.getPageDomId( smilElement ));~~
	177	+ //mw.log("loadElement:: pause video: " + this.smil.getSmilElementPlayerID( smilElement ));
179	178	// else we have some percentage loaded pause playback
180	179	//( should continue to load the asset )
181	180	vid.pause();
—	—	@@ -194,7 +193,7 @@
195	194	}
196	195	// for other ref types check if element is in the dom
197	196	// xxx todo hook into image loader hook
198		~~- if( $j( '#' + this.smil.getPageDomId( smilElement ) ).length == 0 ){~~
	197	+ if( $j( '#' + this.smil.getSmilElementPlayerID( smilElement ) ).length == 0 ){
199	198	return 0;
200	199	} else {
201	200	return 1;
—	—	@@ -206,7 +205,7 @@
207	206	*/
208	207	getVideoPercetLoaded: function ( smilElement ){
209	208	var _this = this;
210		~~- var assetId = this.smil.getPageDomId( smilElement );~~
	209	+ var assetId = this.smil.getSmilElementPlayerID( smilElement );
211	210	var $vid = $j( '#' + assetId );
212	211
213	212	// if the asset is not in the DOM return zero:
—	—	@@ -295,7 +294,7 @@
296	295	* Clip ready for grabbing a frame such as a canvas thumb
297	296	*/
298	297	bufferedSeekRelativeTime: function( smilElement, relativeTime, callback ){
299		~~- mw.log("SmilBuffer::bufferedSeekRelativeTime:" + this.smil.getPageDomId( smilElement ) + ' time:' + relativeTime );~~
	298	+ mw.log("SmilBuffer::bufferedSeekRelativeTime:" + this.smil.getSmilElementPlayerID( smilElement ) + ' time:' + relativeTime );
300	299
301	300	var absoluteTime = relativeTime;
302	301	if( $j( smilElement ).attr('clipBegin') ){
—	—	@@ -308,13 +307,17 @@
309	308	}
310	309	switch( this.smil.getRefType( smilElement ) ){
311	310	case 'video':
312		~~- this.videoBufferSeek( smilElement, absoluteTime, instanceCallback )~~
313		~~- break;~~
	311	+ case 'audio':
	312	+ this.mediaBufferSeek( smilElement, absoluteTime, instanceCallback )
	313	+ break;
314	314	case 'img':
315	315	this.loadImageCallback( smilElement, instanceCallback );
316	316	break;
	317	+ case 'mwtemplate':
	318	+ this.loadMwTemplate( smilElement, instanceCallback );
	319	+ break;
317	320	default:
318		~~- // Assume other formats are directly displayed~~
	321	+ // Assume other formats are non-blocking and directly displayed
319	322	instanceCallback();
320	323	break;
321	324	}
—	—	@@ -339,7 +342,7 @@
340	343	*/
341	344	canPlayVideoTime: function( smilVideoElement, time ){
342	345	var _this = this;
343		~~- var assetId = this.smil.getPageDomId( smilVideoElement );~~
	346	+ var assetId = this.smil.getSmilElementPlayerID( smilVideoElement );
344	347	var $vid = $j( '#' + assetId );
345	348	var vid = $j( '#' + assetId ).get( 0 );
346	349	// if the video element is not in the dom its not ready:
—	—	@@ -380,26 +383,35 @@
381	384	}
382	385	}, false);
383	386	},
	387	+ loadMwTemplate: function( smilElement, callback ){
	388	+ var assetId = this.smil.getSmilElementPlayerID( smilElement );
	389	+
	390	+ // Set a load callback for the asset:
	391	+ $j( smilElement ).data('loadCallback',callback);
	392	+ this.loadElement( smilElement );
	393	+ mw.log( "loadMwTemplateCallback:: drwa img: " + assetId + ' ' + $j( '#' + assetId ).length );
	394	+ },
384	395
385	396	loadImageCallback: function ( smilElement, callback ){
386		~~- var assetId = this.smil.getPageDomId( smilElement );~~
	397	+ var assetId = this.smil.getSmilElementPlayerID( smilElement );
387	398	// Make sure the image is in the dom ( load it )
388		~~- this.loadElement( smilElement );~~
389		~~- mw.log( "loadImageCallback:: drwa img: " + assetId + $j( '#' + assetId ).length );~~
	399	+ this.loadElement( smilElement );
	400	+ mw.log( "loadImageCallback:: drwa img: " + assetId + ' found:' + $j( '#' + assetId ).length );
390	401	// If we already have naturalHeight no need for loading callback
391	402	if( $j( '#' + assetId ).get(0).naturalHeight ){
	403	+ mw.log( "loadImageCallback: " +assetId + ' already ready: run callback' );
392	404	callback();
393	405	} else {
394		~~- $j( '#' + assetId ).load( callback );~~
	406	+ $j( '#' + assetId ).find('img').load( callback );
395	407	}
396	408	},
397	409
398		~~- videoBufferSeek: function ( smilElement, seekTime, callback ){~~
	410	+ mediaBufferSeek: function ( smilElement, seekTime, callback ){
399	411	var _this = this;
400		~~- //mw.log("SmilBuffer::videoBufferSeek: " + this.smil.getPageDomId( smilElement ) +' time:' + seekTime );~~
	412	+ mw.log("SmilBuffer::mediaBufferSeek: " + this.smil.getSmilElementPlayerID( smilElement ) +' time:' + seekTime );
401	413
402	414	// Get the asset target:
403		~~- var assetId = this.smil.getPageDomId( smilElement );~~
	415	+ var assetId = this.smil.getSmilElementPlayerID( smilElement );
404	416
405	417	// Make sure the target video is in the dom:
406	418	this.loadElement( smilElement );
Index: branches/MwEmbedStandAlone/modules/Sequencer/mw.SequencerAddMedia.js
—	—	@@ -177,13 +177,16 @@
178	178	this.getSmilClipFromResource ( resource, callback );
179	179	},
180	180
181		~~- getSmilClipFromWikiTemplate: function( titleKey, provider, callback){~~
	181	+ getSmilClipFromWikiTemplate: function( titleKey, providerKey, callback){
	182	+ mw.log('SequencerAddMedia::getSmilClipFromWikiTemplate: ' + titleKey + ' provider: ' + providerKey);
182	183	return $j( '<ref />' )
183	184	.attr({
184	185	'type': "application/x-wikitemplate",
185	186	'apiTitleKey' : titleKey,
186	187	// xxx For now just force commons
187		~~- 'apiProvider' : 'commons'~~
	188	+ 'apiProvider' : providerKey,
	189	+ // Set template based titles to default image duration:
	190	+ 'dur': mw.getConfig( 'Sequencer.AddMediaImageDuration' )
188	191	})
189	192	},
190	193
Index: branches/MwEmbedStandAlone/modules/Sequencer/mw.SequencerTools.js
—	—	@@ -16,7 +16,7 @@
17	17	},
18	18
19	19	// The current smil clip ( lazy init )
20		~~- currentSmilClip: null,~~
	20	+ currentsmilElement: null,
21	21
22	22	// The current selected tool ( lazy init )
23	23	currentToolId: null,
—	—	@@ -30,7 +30,7 @@
31	31	},
32	32	'duration':{
33	33	'editableAttributes' : [ 'dur' ],
34		~~- 'contentTypes': ['img']~~
	34	+ 'contentTypes': ['img', 'mwtemplate']
35	35	},
36	36	'panzoom' : {
37	37	'editWidgets' : ['panzoom'],
—	—	@@ -69,13 +69,13 @@
70	70	},
71	71	editableTypes: {
72	72	'display': {
73		~~- update: function( _this, smilClip, attributeName, value){~~
74		~~- $j( smilClip ).attr( attributeName, value);~~
	73	+ update: function( _this, smilElement, attributeName, value){
	74	+ $j( smilElement ).attr( attributeName, value);
75	75	// update the display
76	76	},
77		~~- getSmilVal : function( _this, smilClip, attributeName ){~~
78		~~- if( $j( smilClip ).attr( attributeName ) ){~~
79		~~- return $j( smilClip ).attr( attributeName )~~
	77	+ getSmilVal : function( _this, smilElement, attributeName ){
	78	+ if( $j( smilElement ).attr( attributeName ) ){
	79	+ return $j( smilElement ).attr( attributeName )
80	80	}
81	81	// Check for a default value
82	82	if( _this.editableAttributes[ attributeName ].defaultValue ){
—	—	@@ -85,23 +85,23 @@
86	86	}
87	87	},
88	88	'time' : {
89		~~- update : function( _this, smilClip, attributeName, value){~~
	89	+ update : function( _this, smilElement, attributeName, value){
90	90	// Validate time
91	91	var seconds = _this.sequencer.getSmil().parseTime( value );
92		~~- $j( smilClip ).attr( attributeName, mw.seconds2npt( seconds ) );~~
	92	+ $j( smilElement ).attr( attributeName, mw.seconds2npt( seconds ) );
93	93	// Update the clip duration :
94	94	_this.sequencer.getEmbedPlayer().getDuration( true );
95	95
96	96	// Seek to "this clip"
97	97	_this.sequencer.getEmbedPlayer().setCurrentTime(
98		~~- $j( smilClip ).data('startOffset')~~
	98	+ $j( smilElement ).data('startOffset')
99	99	);
100	100	},
101		~~- getSmilVal : function( _this, smilClip, attributeName ){~~
	101	+ getSmilVal : function( _this, smilElement, attributeName ){
102	102	var smil = _this.sequencer.getSmil();
103	103	return mw.seconds2npt(
104	104	smil.parseTime(
105		~~- $j( smilClip ).attr( attributeName )~~
	105	+ $j( smilElement ).attr( attributeName )
106	106	)
107	107	);
108	108	}
—	—	@@ -111,18 +111,18 @@
112	112	'preview' : {
113	113	'icon' : 'play',
114	114	'title' : gM('mwe-sequencer-preview'),
115		~~- 'action': function( _this, smilClip ){~~
116		~~- _this.sequencer.getPlayer().previewClip( smilClip );~~
	115	+ 'action': function( _this, smilElement ){
	116	+ _this.sequencer.getPlayer().previewClip( smilElement );
117	117	// xxx todo update preview button to "pause" / "play"
118	118	}
119	119	},
120	120	'cancel' : {
121	121	'icon': 'close',
122	122	'title' : gM('mwe-cancel'),
123		~~- 'action' : function( _this, smilClip ){~~
	123	+ 'action' : function( _this, smilElement ){
124	124	$j.each(
125	125	_this.getToolSet(
126		~~- _this.sequencer.getSmil().getRefType( smilClip )~~
	126	+ _this.sequencer.getSmil().getRefType( smilElement )
127	127	),
128	128	function( inx, toolId ){
129	129	var tool = _this.tools[toolId];
—	—	@@ -130,7 +130,7 @@
131	131	var attributeName = tool.editableAttributes[i];
132	132	var $editToolInput = $j('#' + _this.getEditToolInputId( toolId, attributeName ) );
133	133	// Restore all original attribute values
134		~~- smilClip.attr( attributeName, $editToolInput.data('initialValue') );~~
	134	+ smilElement.attr( attributeName, $editToolInput.data('initialValue') );
135	135	}
136	136	}
137	137	);
—	—	@@ -140,7 +140,7 @@
141	141
142	142	// Update the embed player
143	143	_this.sequencer.getEmbedPlayer().setCurrentTime(
144		~~- $j( smilClip ).data('startOffset')~~
	144	+ $j( smilElement ).data('startOffset')
145	145	);
146	146
147	147	// Close / empty the toolWindow
—	—	@@ -150,7 +150,7 @@
151	151	},
152	152	editWidgets: {
153	153	'panzoom' : {
154		~~- 'onChange': function( _this, target, smilClip ){~~
	154	+ 'onChange': function( _this, target, smilElement ){
155	155	var panZoomVal = $j('#' +_this.getEditToolInputId( 'panzoom', 'panZoom')).val();
156	156	mw.log("panzoom change:" + panZoomVal );
157	157
—	—	@@ -158,22 +158,22 @@
159	159	_this.sequencer.getSmil()
160	160	.getLayout()
161	161	.panZoomLayout(
162		~~- smilClip~~
	162	+ smilElement
163	163	);
164		~~- var $thumbTraget = $j( '#' + _this.sequencer.getTimeline().getTimelineClipId( smilClip ) ).find('.thumbTraget');~~
	164	+ var $thumbTraget = $j( '#' + _this.sequencer.getTimeline().getTimelineClipId( smilElement ) ).find('.thumbTraget');
165	165	// Update the timeline clip display
166	166	// xxx this should be abstracted to timeline handler for clip updates
167	167	_this.sequencer.getSmil()
168	168	.getLayout()
169	169	.panZoomLayout(
170		~~- smilClip,~~
	170	+ smilElement,
171	171	$thumbTraget,
172	172	$thumbTraget.find('img').get(0)
173	173	)
174	174	// Register the change for undo redo
175	175	_this.sequencer.getActionsEdit().registerEdit();
176	176	},
177		~~- 'draw': function( _this, target, smilClip ){~~
	177	+ 'draw': function( _this, target, smilElement ){
178	178	var orginalHelperCss = {
179	179	'position' : 'absolute',
180	180	'width' : 100,
—	—	@@ -185,7 +185,7 @@
186	186	// Add a input box binding:
187	187	$j('#' +_this.getEditToolInputId( 'panzoom', 'panZoom'))
188	188	.change(function(){
189		~~- _this.editWidgets.panzoom.onChange( _this, target, smilClip);~~
	189	+ _this.editWidgets.panzoom.onChange( _this, target, smilElement);
190	190	})
191	191
192	192	$j( target ).append(
—	—	@@ -206,7 +206,7 @@
207	207	// Restore default SMIL setting
208	208	_this.editableTypes['display'].update(
209	209	_this,
210		~~- smilClip,~~
	210	+ smilElement,
211	211	'panzoom',
212	212	_this.editableAttributes['panzoom'].defaultValue
213	213	)
—	—	@@ -233,7 +233,7 @@
234	234	);
235	235	var startPanZoomVal = '';
236	236	var setStartPanZoomVal = function(){
237		~~- startPanZoomVal = $j( smilClip ).attr( 'panZoom');~~
	237	+ startPanZoomVal = $j( smilElement ).attr( 'panZoom');
238	238	if(! startPanZoomVal ){
239	239	startPanZoomVal = _this.editableAttributes['panZoom'].defaultValue;
240	240	}
—	—	@@ -266,7 +266,7 @@
267	267	var smilPanZoomValue = pz.join(', ');
268	268
269	269	// Update the smil DOM:
270		~~- $j( smilClip ).attr( 'panZoom', smilPanZoomValue );~~
	270	+ $j( smilElement ).attr( 'panZoom', smilPanZoomValue );
271	271
272	272	// Update the user input tool input value:
273	273	$j('#' +_this.getEditToolInputId( 'panzoom', 'panZoom')).val( smilPanZoomValue );
—	—	@@ -275,7 +275,7 @@
276	276	_this.sequencer.getSmil()
277	277	.getLayout()
278	278	.panZoomLayout(
279		~~- smilClip~~
	279	+ smilElement
280	280	);
281	281	}
282	282	// Add bindings
—	—	@@ -296,7 +296,7 @@
297	297	// Restore original css for the layout helper
298	298	$j(this).css( orginalHelperCss )
299	299	// trigger the 'change'
300		~~- _this.editWidgets.panzoom.onChange( _this, target, smilClip );~~
	300	+ _this.editWidgets.panzoom.onChange( _this, target, smilElement );
301	301	}
302	302	})
303	303	.css('cursor', 'move')
—	—	@@ -318,14 +318,14 @@
319	319	// Restore original css
320	320	$j(this).css( orginalHelperCss )
321	321	// trigger the change
322		~~- _this.editWidgets.panzoom.onChange( _this, target, smilClip );~~
	322	+ _this.editWidgets.panzoom.onChange( _this, target, smilElement );
323	323	}
324	324	})
325	325
326	326	}
327	327	},
328	328	'trimTimeline' : {
329		~~- 'onChange': function( _this, target, smilClip ){~~
	329	+ 'onChange': function( _this, target, smilElement ){
330	330	var smil = _this.sequencer.getSmil();
331	331	// Update the preview thumbs
332	332
—	—	@@ -335,9 +335,9 @@
336	336	var clipDur = $j('#editTool_trim_dur').val();
337	337	if( clipDur ){
338	338	// Render a thumbnail for the updated duration
339		~~- smil.getLayout().drawElementThumb(~~
	339	+ smil.getLayout().drawSmilElementToTarget(
	340	+ smilElement,
340	341	$j( target ).find('.trimEndThumb'),
341		~~- smilClip,~~
342	342	clipDur
343	343	);
344	344	}
—	—	@@ -347,21 +347,21 @@
348	348	if( !clipBeginTime ){
349	349	$j(target).find('.trimStartThumb').hide();
350	350	} else {
351		~~- mw.log("Should update trimStartThumb::" + $j(smilClip).attr('clipBegin') );~~
	351	+ mw.log("Should update trimStartThumb::" + $j(smilElement).attr('clipBegin') );
352	352	// Render a thumbnail for relative start time = 0
353		~~- smil.getLayout().drawElementThumb(~~
354		~~- $j( target ).find('.trimStartThumb'),~~
355		~~- smilClip,~~
	353	+ smil.getLayout().drawSmilElementToTarget(
	354	+ smilElement,
	355	+ $j( target ).find('.trimStartThumb'),
356	356	0,
357	357	updateDurationThumb()
358	358	)
359	359	}
360	360	},
361	361	// Return the trimTimeline edit widget
362		~~- 'draw': function( _this, target, smilClip ){~~
	362	+ 'draw': function( _this, target, smilElement ){
363	363	var smil = _this.sequencer.getSmil();
364	364	// check if thumbs are supported
365		~~- if( _this.sequencer.getSmil().getRefType( smilClip ) == 'video' ){~~
	365	+ if( _this.sequencer.getSmil().getRefType( smilElement ) == 'video' ){
366	366	$j(target).append(
367	367	$j('<div />')
368	368	.addClass( 'trimStartThumb ui-corner-all' ),
—	—	@@ -384,7 +384,7 @@
385	385
386	386	var onInputChange = function( sliderIndex, timeValue ){
387	387	// Register the change
388		~~- _this.editWidgets.trimTimeline.onChange( _this, target, smilClip);~~
	388	+ _this.editWidgets.trimTimeline.onChange( _this, target, smilElement);
389	389	// Update the slider
390	390	if( fullClipDuration ){
391	391	$j('#'+_this.sequencer.id + '_trimTimeline' )
—	—	@@ -411,10 +411,10 @@
412	412	});
413	413
414	414	// Update the thumbnails:
415		~~- _this.editWidgets.trimTimeline.onChange( _this, target, smilClip );~~
	415	+ _this.editWidgets.trimTimeline.onChange( _this, target, smilElement );
416	416
417	417	// Get the clip full duration to build out the timeline selector
418		~~- smil.getBody().getClipAssetDuration( smilClip, function( clipDuration ) {~~
	418	+ smil.getBody().getClipAssetDuration( smilElement, function( clipDuration ) {
419	419	// update the local scope global
420	420	fullClipDuration = clipDuration;
421	421
—	—	@@ -423,7 +423,7 @@
424	424	startSlider,
425	425	startSlider + timeToSlider( smil.parseTime( $j('#editTool_trim_dur').val() ) )
426	426	];
427		~~- // Return a trim tool binded to smilClip id update value events.~~
	427	+ // Return a trim tool binded to smilElement id update value events.
428	428	$j(target).append(
429	429	$j('<div />')
430	430	.attr( 'id', _this.sequencer.id + '_trimTimeline' )
—	—	@@ -451,13 +451,13 @@
452	452	var attributeValue = 0, sliderIndex = 0;
453	453
454	454	// Update clipBegin
455		~~- _this.editableTypes['time'].update( _this, smilClip, 'clipBegin', sliderToTime( ui.values[ 0 ] ) );~~
	455	+ _this.editableTypes['time'].update( _this, smilElement, 'clipBegin', sliderToTime( ui.values[ 0 ] ) );
456	456
457	457	// Update dur
458		~~- _this.editableTypes['time'].update( _this, smilClip, 'dur', sliderToTime( ui.values[ 1 ]- ui.values[0] ) );~~
	458	+ _this.editableTypes['time'].update( _this, smilElement, 'dur', sliderToTime( ui.values[ 1 ]- ui.values[0] ) );
459	459
460	460	// update the widget display
461		~~- _this.editWidgets.trimTimeline.onChange( _this, target, smilClip);~~
	461	+ _this.editWidgets.trimTimeline.onChange( _this, target, smilElement);
462	462
463	463	// Register the edit state for undo / redo
464	464	_this.sequencer.getActionsEdit().registerEdit();
—	—	@@ -507,12 +507,12 @@
508	508	}
509	509	return toolSet;
510	510	},
511		~~- drawClipEditTools: function( smilClip, selectedToolId ){~~
	511	+ drawClipEditTools: function( smilElement, selectedToolId ){
512	512	var _this = this;
513	513
514	514	// Update the current clip and tool :
515		~~- if( smilClip ){~~
516		~~- this.setCurrentSmilClip( smilClip );~~
	515	+ if( smilElement ){
	516	+ this.setCurrentsmilElement( smilElement );
517	517	}
518	518	if( selectedToolId ){
519	519	this.setCurrentToolId( selectedToolId );
—	—	@@ -531,13 +531,13 @@
532	532	this.sequencer.getEditToolTarget().empty().append(
533	533	$toolsContainer
534	534	);
535		~~- // Get the entire tool set based on what "ref type" smilClip is:~~
	535	+ // Get the entire tool set based on what "ref type" smilElement is:
536	536	var toolSet = this.getToolSet(
537	537	this.sequencer.getSmil().getRefType(
538		~~- this.getCurrentSmilClip()~~
	538	+ this.getCurrentsmilElement()
539	539	)
540	540	);
541		~~- mw.log( 'Adding ' + toolSet.length + ' tools for ' + this.sequencer.getSmil().getRefType( this.getCurrentSmilClip() ) );~~
	541	+ mw.log( 'Adding ' + toolSet.length + ' tools for ' + this.sequencer.getSmil().getRefType( this.getCurrentsmilElement() ) );
542	542
543	543	$j.each( toolSet, function( inx, toolId ){
544	544
—	—	@@ -572,7 +572,7 @@
573	573	for( var i=0; i < tool.editableAttributes.length ; i++ ){
574	574	attributeName = tool.editableAttributes[i];
575	575	$toolContainer.append(
576		~~- _this.getEditableAttribute( smilClip, toolId, attributeName )~~
	576	+ _this.getEditableAttribute( smilElement, toolId, attributeName )
577	577	);
578	578	}
579	579
—	—	@@ -596,7 +596,7 @@
597	597	_this.editWidgets[editWidgetId].draw(
598	598	_this,
599	599	$j( '#editWidgets_' + editWidgetId ),
600		~~- smilClip~~
	600	+ smilElement
601	601	)
602	602	// Output a float divider:
603	603	$toolContainer.append( $j('<div />').addClass( 'ui-helper-clearfix' ) );
—	—	@@ -613,15 +613,15 @@
614	614	// Build out global edit Actions buttons after the container
615	615	for( var editActionId in this.editActions ){
616	616	$toolsContainer.after(
617		~~- this.getEditAction( smilClip, editActionId )~~
	617	+ this.getEditAction( smilElement, editActionId )
618	618	)
619	619	}
620	620	},
621		~~- getCurrentSmilClip: function(){~~
622		~~- return this.currentSmilClip;~~
	621	+ getCurrentsmilElement: function(){
	622	+ return this.currentsmilElement;
623	623	},
624		~~- setCurrentSmilClip: function( smilClip ){~~
625		~~- this.currentSmilClip = smilClip;~~
	624	+ setCurrentsmilElement: function( smilElement ){
	625	+ this.currentsmilElement = smilElement;
626	626	},
627	627	getCurrentToolId: function(){
628	628	return this.currentToolId;
—	—	@@ -630,7 +630,7 @@
631	631	this.currentToolId = toolId;
632	632	},
633	633
634		~~- getEditAction: function( smilClip, editActionId ){~~
	634	+ getEditAction: function( smilElement, editActionId ){
635	635	if(! this.editActions[ editActionId ]){
636	636	mw.log("Error: getEditAction: " + editActionId + ' not found ');
637	637	return ;
—	—	@@ -646,12 +646,12 @@
647	647	'margin': '5px'
648	648	})
649	649	.click( function(){
650		~~- editAction.action( _this, smilClip );~~
	650	+ editAction.action( _this, smilElement );
651	651	})
652	652	return $actionButton;
653	653	},
654	654	/* get the editiable attribute input html */
655		~~- getEditableAttribute: function( smilClip, toolId, attributeName ){~~
	655	+ getEditableAttribute: function( smilElement, toolId, attributeName ){
656	656	if( ! this.editableAttributes[ attributeName ] ){
657	657	mw.log("Error: editableAttributes : " + attributeName + ' not found');
658	658	return;
—	—	@@ -665,7 +665,7 @@
666	666	}
667	667	var initialValue = _this.editableTypes[ editType ].getSmilVal(
668	668	_this,
669		~~- smilClip,~~
	669	+ smilElement,
670	670	attributeName
671	671	);
672	672	// Set the default input size
—	—	@@ -699,7 +699,7 @@
700	700	// Run the editableType update function:
701	701	_this.editableTypes[ editType ].update(
702	702	_this,
703		~~- smilClip,~~
	703	+ smilElement,
704	704	attributeName,
705	705	$j( this ).val()
706	706	);
Index: branches/MwEmbedStandAlone/modules/Sequencer/mw.SequencerServer.js
—	—	@@ -77,7 +77,7 @@
78	78	},
79	79	// Check if the server exists / is configured
80	80	isConfigured: function( ){
81		~~- if( !this.apiType \|\| !this.apiUrl \|\| !this.titleKey){~~
	81	+ if( !this.apiUrl \|\| !this.titleKey){
82	82	return false;
83	83	}
84	84	return true;
Index: branches/MwEmbedStandAlone/modules/Sequencer/mw.SequencerTimeline.js
—	—	@@ -114,8 +114,10 @@
115	115	// Draw all the tracks
116	116	$j.each(smilSequenceTracks, function( trackIndex, smilSequenceTrack ){
117	117	trackStack++;
	118	+ mw.log("!!!t++ inx: " + trackIndex + ' stack:' + trackStack);
118	119	_this.drawSequenceTrack( trackIndex, smilSequenceTrack, function(){
119	120	trackStack--;
	121	+ mw.log("t-- inx: " + trackIndex + ' stack:' + trackStack);
120	122	if( trackStack == 0 && callback ){
121	123	callback();
122	124	}
—	—	@@ -159,7 +161,7 @@
160	162	*/
161	163	drawTrackClips: function( $clipTrackSet, smilSequenceTrack, callback ){
162	164	var _this = this;
163		~~- mw.log( 'drawTrackClips:: existing length: ' +~~
	165	+ mw.log( 'SequncerTimeline:: drawTrackClips: existing length: ' +
164	166	$clipTrackSet.children().length + ' id: ' + $clipTrackSet.attr('id') );
165	167	// Setup a local pointer to the smil engine:
166	168	var smil = this.sequencer.getSmil();
—	—	@@ -168,18 +170,20 @@
169	171
170	172	var seqOrder = 0;
171	173	var reOrderTimelineFlag = false;
172		-
	174	+
173	175	// Get all the refs that are children of the smilSequenceTrack with associated offsets and durations
174	176	// for now assume all tracks start at zero time:
175	177	var startOffset = 0;
176	178	var thumbRenderStack = 0;
177		~~- smil.getBody().getRefElementsRecurse( smilSequenceTrack, startOffset, function( $node ){~~
	179	+ var trackRendering = false;
	180	+ smil.getBody().getRefElementsRecurse( smilSequenceTrack, startOffset, function( smilElement ){
	181	+ mw.log("SequncerTimeline:: drawTrackClips node type: " + $j(smilElement).get(0).nodeName.toLowerCase() );
178	182	var reRenderThumbFlag = false;
179	183	// Draw the node onto the timeline if the clip is not already there:
180		~~- var $timelineClip = $clipTrackSet.find( '#' + _this.getTimelineClipId( $node ) )~~
	184	+ var $timelineClip = $clipTrackSet.find( '#' + _this.getTimelineClipId( smilElement ) )
181	185	if( $timelineClip.length == 0 ){
182		~~- mw.log("SequencerTimeline::drawTrackClips: ADD: " + _this.getTimelineClipId( $node ) + ' to ' + $clipTrackSet.attr('id') );~~
183		~~- $timelineClip = _this.getTimelineClip( smilSequenceTrack, $node );~~
	186	+ mw.log("SequencerTimeline::drawTrackClips: ADD: " + _this.getTimelineClipId( smilElement ) + ' to ' + $clipTrackSet.attr('id') );
	187	+ $timelineClip = _this.getTimelineClip( smilSequenceTrack, smilElement );
184	188	// Set the index order on the clip
185	189
186	190	$timelineClip.data( 'indexOrder', $clipTrackSet.children().length );
—	—	@@ -196,41 +200,27 @@
197	201	reRenderThumbFlag = true;
198	202	} else {
199	203	// Confirm clip is in the correct indexOrder
200		~~- // mw.log( 'indexOrder::' + $timelineClip.attr('id') + ' '+ $timelineClip.data('indexOrder') + ' == ' + $node.data('indexOrder'));~~
201		~~- if( $timelineClip.data('indexOrder') != $node.data('indexOrder') ){~~
	204	+ // mw.log( 'indexOrder::' + $timelineClip.attr('id') + ' '+ $timelineClip.data('indexOrder') + ' == ' + smilElement.data('indexOrder'));
	205	+ if( $timelineClip.data('indexOrder') != $j( smilElement).data('indexOrder') ){
202	206	reOrderTimelineFlag = true;
203	207	}
204	208	}
205	209
206	210	// xxx Check if the start time was changed to set reRenderThumbFlag
207		~~- if ( reRenderThumbFlag ){~~
	211	+ if ( reRenderThumbFlag ){
	212	+ trackRendering = true;
208	213	thumbRenderStack++;
209		~~- // Issue a relative draw Thumb request for the start time~~
210		~~- smil.getBuffer().bufferedSeekRelativeTime( $node, 0, function(){~~
211		~~- // Update the timeline clip layout~~
212		-
213		~~- mw.log("getTrackClipInterface::bufferedSeekRelativeTime for " + smil.getPageDomId( $node ));~~
214		~~- _this.drawClipThumb( $node , 0, function(){~~
215		~~- // Clip is ready decrement the thum render queue~~
216		~~- thumbRenderStack--;~~
217		-
218		~~- // XXX this is now called in a few places need to refactor to call i~~
219		~~- if( $node.attr('panZoom') ){~~
220		~~- var $thumbTarget = $j( '#' + _this.getTimelineClipId( $node ) ).find('.thumbTraget');~~
221		~~- _this.sequencer.getSmil().getLayout().panZoomLayout( $node.get(0),~~
222		~~- $thumbTarget,~~
223		~~- $thumbTarget.find('img').get(0)~~
224		~~- );~~
225		~~- }~~
226		~~- // check if all the sequence track thumbs have been rendered can issue the sequence render callback:~~
227		~~- if( thumbRenderStack == 0 ){~~
228		~~- callback();~~
229		~~- }~~
230		~~- });~~
231		-
232		~~- // Check for panZoom attribute~~
233		-
234		~~- });~~
	214	+ // Update the timeline clip layout
	215	+ mw.log("getTrackClipInterface::bufferedSeekRelativeTime for " + smil.getSmilElementPlayerID( smilElement ));
	216	+ _this.drawClipThumb( smilElement , 0, function(){
	217	+ // Clip is ready decrement the thum render queue
	218	+ thumbRenderStack--;
	219	+ // Check if all the sequence track thumbs have been rendered can issue the sequence render callback:
	220	+ if( thumbRenderStack == 0 ){
	221	+ mw.log("SequencerTimeline:: Done with all thumb for" + $clipTrackSet.attr('id'));
	222	+ callback();
	223	+ }
	224	+ });
235	225	}
236	226
237	227
—	—	@@ -276,6 +266,13 @@
277	267	$j( keyBindings ).bind('delete', function(){
278	268	_this.removeSelectedClips();
279	269	});
	270	+
	271	+ if(!trackRendering){
	272	+ mw.log("SequencerTimeline:: trackNot rendering run drawTrack callback");
	273	+ if( callback )
	274	+ callback();
	275	+ }
	276	+
280	277	},
281	278
282	279	getTrackSetId:function( trackIndex ){
—	—	@@ -358,8 +355,8 @@
359	356	editClip: function( selectedClip ){
360	357	var smil = this.sequencer.getSmil();
361	358	// get the smil element for the edit tool:
362		~~- var smilClip = smil.$dom.find( '#' + $j( selectedClip ).data('smilId') );~~
363		~~- this.sequencer.getTools().drawClipEditTools( smilClip );~~
	359	+ var smilElement = smil.$dom.find( '#' + $j( selectedClip ).data('smilId') );
	360	+ this.sequencer.getTools().drawClipEditTools( smilElement );
364	361	},
365	362
366	363	/**
—	—	@@ -408,12 +405,13 @@
409	406	* Insert a smilClip to the smil dom and sequencer and display the edit
410	407	* interface with a 'cancel' insert button
411	408	*/
412		~~- insertSmilClipEdit: function( smilClip, trackIndex, clipIndex ){~~
	409	+ insertSmilClipEdit: function( smilElement, trackIndex, clipIndex ){
413	410	var _this = this;
	411	+ mw.log("SequencerTimeline:: insertSmilClipEdit ");
414	412	// Handle optional arguments
415	413	if( typeof trackIndex == 'undefined' ){
416	414	// default audio to audio track
417		~~- if( _this.sequencer.getSmil().getRefType( smilClip ) == 'audio' ){~~
	415	+ if( _this.sequencer.getSmil().getRefType( smilElement ) == 'audio' ){
418	416	trackIndex = this.getTrackIndexType('audio');
419	417	} else {
420	418	trackIndex = this.getTrackIndexType('video');
—	—	@@ -425,24 +423,24 @@
426	424	return ;
427	425	}
428	426
429		~~- // Before insert ensure the smilClip has an id:~~
430		~~- this.sequencer.getSmil().getBody().assignIds( $j( smilClip ) );~~
	427	+ // Before insert ensure the smilElement has an id:
	428	+ this.sequencer.getSmil().getBody().assignIds( $j( smilElement ) );
431	429
432	430	// Add the smil resource to the smil track
433	431	var $smilSequenceTrack = $j( this.sequencer.getSmil().getBody().getSeqElements()[ trackIndex ] );
434	432	if( typeof clipIndex == 'undefined' \|\| clipIndex >= $smilSequenceTrack.children().length ){
435	433	$smilSequenceTrack.append(
436		~~- $j( smilClip ).get(0)~~
	434	+ $j( smilElement ).get(0)
437	435	)
438	436	} else {
439	437	$smilSequenceTrack.children().eq( clipIndex ).before(
440		~~- $j( smilClip ).get(0)~~
	438	+ $j( smilElement ).get(0)
441	439	)
442	440	}
443	441
444	442	// Update the dom timeline
445	443	_this.drawTimeline(function(){
446		-
	444	+
447	445	// Invalidate / update embedPlayer duration / clip offsets
448	446	_this.sequencer.getEmbedPlayer().getDuration( true );
449	447
—	—	@@ -450,9 +448,9 @@
451	449	_this.sequencer.getActionsEdit().registerEdit();
452	450
453	451	// Select the current clip
454		~~- var $timelineClip = $clipTrackSet.find('#' + _this.getTimelineClipId( smilClip ) )~~
	452	+ var $timelineClip = $clipTrackSet.find('#' + _this.getTimelineClipId( smilElement ) )
455	453	if( $timelineClip.length == 0 ){
456		~~- mw.log("Error: insertSmilClipEdit: could not find clip: " + _this.getTimelineClipId( smilClip ) );~~
	454	+ mw.log("Error: insertSmilClipEdit: could not find clip: " + _this.getTimelineClipId( smilElement ) );
457	455	}
458	456	_this.getTimelineContainer().find( '.selectedClip' ).removeClass( 'selectedClip' );
459	457	$timelineClip.addClass( 'selectedClip' );
—	—	@@ -619,12 +617,12 @@
620	618	});
621	619	},
622	620
623		~~- getTimelineClipId: function( $node ){~~
624		~~- return this.sequencer.getSmil().getPageDomId( $node ) + '_timelineClip';~~
	621	+ getTimelineClipId: function( smilElement ){
	622	+ return this.sequencer.getSmil().getSmilElementPlayerID( smilElement ) + '_timelineClip';
625	623	},
626	624
627	625	// Draw a clip thumb into the timeline clip target
628		~~- drawClipThumb: function ( $node , relativeTime, callback ){~~
	626	+ drawClipThumb: function ( smilElement , relativeTime, callback ){
629	627	var _this = this;
630	628	var smil = this.sequencer.getSmil();
631	629
—	—	@@ -635,7 +633,7 @@
636	634	'cursor' : 'pointer'
637	635	};
638	636
639		~~- var $timelineClip = $j( '#' + _this.getTimelineClipId( $node ) );~~
	637	+ var $timelineClip = $j( '#' + _this.getTimelineClipId( smilElement ) );
640	638	// Add Thumb target and remove loader
641	639	$timelineClip.empty().append(
642	640
—	—	@@ -696,10 +694,10 @@
697	695	// remove loader
698	696	.find('.loadingSpinner').remove();
699	697
700		~~- var $thumbTarget = $j( '#' + _this.getTimelineClipId( $node ) ).find('.thumbTraget');~~
	698	+ var $thumbTarget = $j( '#' + _this.getTimelineClipId( smilElement ) ).find('.thumbTraget');
701	699
702	700	// Check for a "poster" image use that temporarily while we wait for the video to seek and draw
703		~~- if( $node.attr('poster') ){~~
	701	+ if( $j( smilElement ) .attr('poster') ){
704	702	var img = new Image();
705	703	$j( img )
706	704	.css( {
—	—	@@ -709,7 +707,7 @@
710	708	'left': '0px',
711	709	'height': _this.timelineThumbSize.height
712	710	})
713		~~- .attr( 'src', smil.getAssetUrl( $node.attr('poster') ) )~~
	711	+ .attr( 'src', smil.getAssetUrl( smilElement.attr('poster') ) )
714	712	.load( function(){
715	713	if( $thumbTarget.children().length == 0 ){
716	714	$thumbTarget.html( img );
—	—	@@ -730,9 +728,9 @@
731	729	}
732	730
733	731	// Buffer the asset then render it into the layout target:
734		~~- smil.getBuffer().bufferedSeekRelativeTime( $node, relativeTime, function(){~~
	732	+ smil.getBuffer().bufferedSeekRelativeTime( smilElement, relativeTime, function(){
735	733	// Add the seek, Add to canvas and draw thumb request
736		~~- smil.getLayout().drawElementThumb( $thumbTarget, $node, relativeTime, function(){~~
	734	+ smil.getLayout().drawSmilElementToTarget( smilElement, $thumbTarget, relativeTime, function(){
737	735	// Run the callback and un-set it for the current closure
738	736	if( callback ){
739	737	callback();
Index: branches/MwEmbedStandAlone/modules/Sequencer/mw.SequencerAddByUrl.js
—	—	@@ -43,7 +43,7 @@
44	44	foundImportUrl = true;
45	45	mw.log( "addByUrlDialog: matching host getResourceFromUrl::"
46	46	+ mw.parseUri( provider.detailsUrl ).host
47		~~- + ' == ' + mw.parseUri( url).host );~~
	47	+ + ' == ' + mw.parseUri( importUrl ).host );
48	48
49	49	// Do special check for mediawiki templates and pages as 'special' smil types
50	50	if( provider.lib == 'mediaWiki' ){
—	—	@@ -75,7 +75,7 @@
76	76	});
77	77	});
78	78	} else if( titleKey.indexOf('Template:') == 0 ) {
79		~~- // Parse any paramters we can find:~~
	79	+ // Parse any parameters we can find:
80	80	var apiProvider = '';
81	81	if( mw.parseUri(provider.apiUrl ).host == 'commons.wikimedia.org' ){
82	82	apiProvider = 'commons'
—	—	@@ -84,7 +84,7 @@
85	85	// into a provider class
86	86	apiProvider = 'local';
87	87	}
88		~~- // Get the rendered page text:~~
	88	+ // Get template smilClip:
89	89	var smilClip = _this
90	90	.sequencer
91	91	.getAddMedia()
Index: branches/MwEmbedStandAlone/modules/ClipEdit/mw.ClipEdit.js
—	—	@@ -171,10 +171,10 @@
172	172	* Edit the "duration" of a given resource
173	173	*
174	174	* supports resource types:
175		~~- * ['image', 'template']~~
	175	+ * ['image', 'mwtemplate']
176	176	*/
177	177	'duration': {
178		~~- 'media' : ['image', 'template'],~~
	178	+ 'media' : ['image', 'mwtemplate'],
179	179	'doEdit':function( _this, target ) {
180	180	function doUpdateDur( inputElm ) {
181	181	mw.log( "update duration:" + $j( inputElm ).val() );

Status & tagging log

13:59, 3 September 2010 😂 (talk | contribs) changed the status of r72266 [removed: new added: deferred]