r79560 MediaWiki - Code Review archive

Repository:	MediaWiki
Revision:	< r79559‎ \| r79560 \| r79561 >
Date:	04:58, 4 January 2011
Author:	dale
Status:	deferred
Tags:
Comment:	* stubs for sequencer clickable timeline gui * some buffred seek cleanup and log clarity
Modified paths:	/branches/MwEmbedStandAlone/modules/MiroSubs/mw.MiroSubsConfig.js (modified) (history) /branches/MwEmbedStandAlone/modules/Sequencer/actions/mw.SequencerActionsSequence.js (modified) (history) /branches/MwEmbedStandAlone/modules/Sequencer/css/mw.style.Sequencer.css (modified) (history) /branches/MwEmbedStandAlone/modules/Sequencer/mw.Sequencer.js (modified) (history) /branches/MwEmbedStandAlone/modules/Sequencer/mw.SequencerTimeline.js (modified) (history) /branches/MwEmbedStandAlone/modules/Sequencer/tools/mw.SequencerToolEditTemplate.js (modified) (history) /branches/MwEmbedStandAlone/modules/Sequencer/tools/mw.SequencerToolLayout.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.SmilBuffer.js (modified) (history) /branches/MwEmbedStandAlone/mwEmbed.js (modified) (history)

Diff [purge]

Index: branches/MwEmbedStandAlone/mwEmbed.js
—	—	@@ -2623,16 +2623,17 @@
2624	2624	if( options['class'] ) {
2625	2625	$button.addClass( options['class'] );
2626	2626	}
2627		-
2628		-
	2627	+
2629	2628	// return the button:
2630	2629	$button.append(
2631	2630	$j('<span />').addClass( 'ui-icon ui-icon-' + options.icon ),
2632	2631	$j('<span />').addClass( 'btnText' )
2633		~~- .text( options.text )~~
2634	2632	)
2635	2633	.buttonHover(); // add buttonHover binding;
2636		~~- if( !options.text ){~~
	2634	+
	2635	+ if( options.text ){
	2636	+ $button.find('.btnText').text( options.text );
	2637	+ } else {
2637	2638	$button.css('padding', '1em');
2638	2639	}
2639	2640	return $button;
Index: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.EmbedPlayerSmil.js
—	—	@@ -86,7 +86,7 @@
87	87	if( !hideLoader ){
88	88	if( $j('#loadingSpinner_' + this.id ).length == 0 ){
89	89	$j( this ).getAbsoluteOverlaySpinner()
90		~~- .attr('id', 'loadingSpinner_' + this.id )~~
	90	+ .attr('id', 'loadingSpinner_' + this.id );
91	91	}
92	92	}
93	93	// Start seek
—	—	@@ -122,7 +122,7 @@
123	123	mw.log("EmbedPlayerSmil:: seek done");
124	124	_this.seeking = false;
125	125	_this.monitor();
126		~~- })~~
	126	+ });
127	127	},
128	128
129	129	/**
—	—	@@ -155,8 +155,8 @@
156	156	var _this = this;
157	157	mw.log(" EmbedPlayerSmil::play " + _this.smilPlayTime + ' to ' + playSegmentEndTime + ' pause time: ' + this.smilPauseTime );
158	158
159		~~- // Update clock start time~~
160		~~- _this.clockStartTime = new Date().getTime()~~
	159	+ // Update clock start time;
	160	+ _this.clockStartTime = new Date().getTime();
161	161
162	162	// Update the interface
163	163	this.parent_play();
—	—	@@ -203,7 +203,7 @@
204	204	_this.smil.startBuffer();
205	205	// Start up monitor:
206	206	_this.monitor();
207		~~- })~~
	207	+ });
208	208	},
209	209
210	210	stop: function(){
Index: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilBuffer.js
—	—	@@ -4,7 +4,7 @@
5	5
6	6	mw.SmilBuffer = function( smilObject ){
7	7	return this.init( smilObject );
8		-}
	8	+};
9	9
10	10	mw.SmilBuffer.prototype = {
11	11
—	—	@@ -42,7 +42,7 @@
43	43	}
44	44
45	45	// Search for elements from the prevBufferPercent
46		~~- var bufferedStartTime = this.prevBufferPercent * _this.smil.getDuration()~~
	46	+ var bufferedStartTime = this.prevBufferPercent * _this.smil.getDuration();
47	47
48	48	//mw.log("getBufferedPercent:: bufferedStartTime: " + bufferedStartTime );
49	49
—	—	@@ -125,7 +125,7 @@
126	126	// Start loading active assets
127	127	_this.loadElement( smilElement );
128	128	}
129		~~- })~~
	129	+ });
130	130	// Loop on loading until all elements are loaded
131	131	setTimeout( function(){
132	132	if( _this.getBufferedPercent() == 1 ){
—	—	@@ -231,7 +231,7 @@
232	232	if( eventData.loaded && eventData.total ) {
233	233	_this.mediaLoadedPercent[assetId] = eventData.loaded / eventData.total;
234	234	}
235		~~- })~~
	235	+ });
236	236	}
237	237
238	238	// Set up reference to media object:
—	—	@@ -305,15 +305,17 @@
306	306	mw.log("SmilBuffer::bufferedSeekRelativeTime:" + this.smil.getSmilElementPlayerID( smilElement ) + ' relativeTime: ' + relativeTime + ' absoluteTime:' + absoluteTime );
307	307
308	308	$j( smilElement ).data('activeSeek', true);
309		~~- var instanceCallback = function(){~~
310		~~- mw.log("SmilBuffer::bufferedSeekRelativeTime: DONE ");~~
	309	+ var instanceCallback = function(){
311	310	$j( smilElement ).data('activeSeek', false);
312	311	callback();
313		~~- }~~
	312	+ };
314	313	switch( this.smil.getRefType( smilElement ) ){
315	314	case 'video':
316		~~- case 'audio':~~
317		~~- this.mediaBufferSeek( smilElement, absoluteTime, instanceCallback );~~
	315	+ case 'audio':
	316	+ this.mediaBufferSeek( smilElement, absoluteTime, function(){
	317	+ mw.log("SmilBuffer::bufferedSeekRelativeTime: callback time: " + absoluteTime + ' ready ');
	318	+ instanceCallback();
	319	+ });
318	320	break;
319	321	case 'img':
320	322	this.loadImageCallback( smilElement, instanceCallback );
—	—	@@ -425,57 +427,67 @@
426	428
427	429	mw.log("SmilBuffer::mediaBufferSeek: " + assetId + ' ctime:' + media.currentTime + ' seekTime:' + seekTime );
428	430	var mediaLoadedFlag = false;
429		~~- var mediaMetaLoaded = function(){~~
	431	+ var mediaMetaLoaded = function(){
430	432	mw.log("SmilBuffer::mediaBufferSeek: Bind against: " + $media.parent().attr('id') );
431	433	// check if we need to issue a seek
432	434	if( media.currentTime == seekTime ){
433	435	mw.log("SmilBuffer::mediaBufferSeek: Already at target time:" + assetId + ' time:' + seekTime );
434		~~- callback();~~
	436	+ if( callback )
	437	+ callback();
435	438	callback = null;
436	439	return ;
437	440	}
438	441
439	442	// Register the seeked callback ( throw away any timed out seek request )
440		~~- $media.unbind('seeked').bind('seeked', function(){~~
	443	+ $media.unbind('seeked.smilBuffer').bind('seeked.smilBuffer', function(){
441	444	mw.log("SmilBuffer::mediaBufferSeek: DONE for:" + assetId + ' time:' + media.currentTime );
442		~~- callback();~~
	445	+
	446	+ // TODO Would be great if browsers supported a mode to "stop" loading once we reach a given time
	447	+
	448	+ if( callback )
	449	+ callback();
443	450	callback = null;
444	451	});
445		~~- $media.unbind('seeking').bind( 'seeking', function(){~~
	452	+
	453	+ $media.unbind('seeking.smilBuffer').bind( 'seeking.smilBuffer', function(){
446	454	mw.log("SmilBuffer::mediaBufferSeek: SEEKING:" + assetId );
447		~~- // add a timeout re-try~~
	455	+ media.pause();
	456	+ // Add a timeout to seek request to try again
448	457	setTimeout(function(){
449	458	// if the callback has not been called retry:
450	459	if( callback ){
451		~~- mw.log("SmilBuffer::mediaBufferSeek: SEEK TimeOut ( retry ) " + assetId );~~
	460	+ mw.log("SmilBuffer::mediaBufferSeek:seeking TimeOut ( retry ) " + assetId );
452	461	mediaMetaLoaded();
453	462	} else{
454		~~- mw.log( "SmilBuffer::mediaBufferSeek: ct: " + media.currentTime + ' st:' + seekTime);~~
	463	+ mw.log( "SmilBuffer::mediaBufferSeek:seeking OK currentTime: " + media.currentTime + ' seekTime:' + seekTime);
455	464	}
456		~~- }, 1000 );~~
457		~~- })~~
458		~~- // issue a play ( makes seeks work more consistently )~~
	465	+ }, 2000 );
	466	+ });
	467	+ // issue a play ( makes seeks work more consistently than just load )
459	468	media.play();
460	469	setTimeout(function(){
461		~~- mw.log("SmilBuffer::mediaBufferSeek: set: " + assetId + ' to: ' + seekTime);~~
	470	+ mw.log("SmilBuffer::mediaBufferSeek: SET: " + assetId + ' to: ' + seekTime);
462	471	// Issue the seek
463	472	try{
464	473	media.pause();
465	474	media.currentTime = seekTime;
	475	+ media.play();
466	476	} catch ( e ){
467		~~- mw.log( 'Error: in SmilBuffer could not set currentTime' );~~
	477	+ mw.log( 'Error: in SmilBuffer could not set currentTime for ' + assetId );
468	478	}
469	479	}, 10 ); // give the browser 10ms to make sure the video tag is " really ready "
470		~~- }~~
471		~~- mw.log("SmilBuffer::mediaBufferSeek: READY State: " + $media.attr('readyState') );~~
	480	+ };
	481	+ mw.log("SmilBuffer::mediaBufferSeek: " + assetId + " READY State: " + $media.attr('readyState') );
472	482	// Read the video state: http://www.w3.org/TR/html5/video.html#dom-media-have_nothing
473	483	if( $media.attr('readyState') === 0 ){ // HAVE_NOTHING
474	484	// Check that we have metadata ( so we can issue the seek )
475		~~- $media.bind( 'loadedmetadata', function(){~~
476		~~- $media.unbind( 'loadedmetadata' );~~
	485	+ $media.bind( 'loadedmetadata.smilBuffer', function(){
	486	+ media.pause();
	487	+ $media.unbind( 'loadedmetadata.smilBuffer' );
477	488	mediaMetaLoaded();
478	489	} );
479	490	media.load();
	491	+ media.play();
480	492	}else {
481	493	// Already have metadata directly issue the seek with callback
482	494	mediaMetaLoaded();
—	—	@@ -544,4 +556,4 @@
545	557	runSeekCallback();
546	558	}
547	559	}*/
548		-}
\ No newline at end of file
	560	+};
Index: branches/MwEmbedStandAlone/modules/MiroSubs/mw.MiroSubsConfig.js
—	—	@@ -41,8 +41,8 @@
42	42
43	43	// Check both the user name and subtitles have been set:
44	44	var isConfigReady = function(){
45		~~- if( _this.config.username~~
46		~~- &&~~
	45	+ if( _this.config.username
	46	+ &&
47	47	_this.config.subtitles
48	48	){
49	49	callback( _this.config );
—	—	@@ -90,8 +90,8 @@
91	91	});
92	92	}
93	93	},
94		- /*
95		~~- * present a language selection dialog~~
	94	+ /**
	95	+ * Present a language selection dialog
96	96	*
97	97	* issue the callback with the selected language code.
98	98	* @param {function} callback
—	—	@@ -125,13 +125,6 @@
126	126	});
127	127	},
128	128
129		- /**
130		~~- * Present a dialog to get the target language~~
131		~~- */~~
132		~~- getTargetLanguageDialog: function( callback ){~~
133		-
134		~~- },~~
135		-
136	129	getDefaultConfig: function(){
137	130	var _this = this;
138	131	return {
Index: branches/MwEmbedStandAlone/modules/Sequencer/mw.Sequencer.js
—	—	@@ -317,7 +317,7 @@
318	318
319	319	/* timeline container */
320	320	'south__minSize' : 160,
321		~~- 'south__size' : 200,~~
	321	+ 'south__size' : 220,
322	322	'south__onresize' : function(){
323	323	_this.getTimeline().resizeTimeline();
324	324	}
Index: branches/MwEmbedStandAlone/modules/Sequencer/css/mw.style.Sequencer.css
—	—	@@ -9,11 +9,25 @@
10	10	.mwe-sequencer .trackNameContainer{
11	11	overflow:hidden;
12	12	}
	13	+.mwe-sequencer .trackNamesTools {
	14	+ margin: 3px;
	15	+ background-color: #CCC;
	16	+}
	17	+.mwe-sequencer .clickableTimeline{
	18	+ background-color: #CCC;
	19	+ position: relative;
	20	+ cursor : crosshair;
	21	+}
	22	+
13	23	.mwe-sequencer .clipTrackSetContainer{
14	24	overflow-x: scroll;
15	25	overflow-y: hidden !important;
16	26	}
17	27
	28	+.mwe-sequencer .clipTrackSetContainer, .mwe-sequencer .trackNamesContainer{
	29	+ padding-top:2px !important;;
	30	+}
	31	+
18	32	.mwe-sequencer .clipTrackSet{
19	33	background-color: #EEE;
20	34	border: solid thin #999;
Index: branches/MwEmbedStandAlone/modules/Sequencer/tools/mw.SequencerToolLayout.js
—	—	@@ -50,16 +50,38 @@
51	51	// Register the change for undo redo
52	52	_this.sequencer.getActionsEdit().registerEdit();
53	53	},
54		-
	54	+ /**
	55	+ * TODO should combine with onPanzoomChange above
	56	+ */
55	57	'onRotateChange': function( _this, smilElement ){
56	58	var rotateVal = $j('#' +_this.getEditToolInputId( 'layout', 'rotate')).val();
	59	+ // Update smil value:
	60	+ $j(smilElement).attr( 'rotate', rotateVal );
	61	+
	62	+ // Update rotate display
	63	+ _this.sequencer.getSmil()
	64	+ .getLayout()
	65	+ .rotateLayout(
	66	+ smilElement
	67	+ );
	68	+
	69	+ // Update the timeline clip display
	70	+ var $thumbTraget = $j( '#' + _this.sequencer.getTimeline().getTimelineClipId( smilElement ) ).find('.thumbTraget');
	71	+ _this.sequencer.getSmil()
	72	+ .getLayout()
	73	+ .rotateLayout(
	74	+ smilElement,
	75	+ $thumbTraget,
	76	+ $thumbTraget.find('img').get(0)
	77	+ );
	78	+
57	79	// Register the change for undo redo
58	80	_this.sequencer.getActionsEdit().registerEdit();
59	81	},
60	82
61	83	//Rest layout button? ( restores default position )
62	84	// presently NOT CALLED.
63		~~- 'getRestLayoutBtn': function(){~~
	85	+ 'getRestLayoutBtn': function( _this, smilElement ){
64	86	$j.button({
65	87	'icon' : 'arrow-4',
66	88	'text' : gM( 'mwe-sequencer-tools-panzoomhelper-resetlayout' )
—	—	@@ -68,13 +90,7 @@
69	91	.css('float', 'left')
70	92	.hide()
71	93	.click(function(){
72		~~- // Restore default SMIL setting~~
73		~~- _this.editableTypes['display'].update(~~
74		~~- _this,~~
75		~~- smilElement,~~
76		~~- 'panzoom',~~
77		~~- _this.editableAttributes['panzoom'].defaultValue~~
78		~~- );~~
	94	+ // TODO: Restore default SMIL setting
79	95	});
80	96	},
81	97	'getOrginalHelperCss': function( _this ){
—	—	@@ -286,7 +302,7 @@
287	303	$playerUI.find('.layoutHelper').hide();
288	304	}
289	305
290		~~- $j(_this).bind('toolSelect', function(){~~
	306	+ $j( _this ).bind('toolSelect.seqTools', function(){
291	307	if( _this.getCurrentToolId() == 'layout'){
292	308	$playerUI.find('.layoutHelper').fadeIn('fast');
293	309	} else {
Index: branches/MwEmbedStandAlone/modules/Sequencer/tools/mw.SequencerToolEditTemplate.js
—	—	@@ -89,8 +89,6 @@
90	90	.css('clear', 'both')
91	91	);
92	92	}
93		-
94		-
95	93	});
96	94	}
97	95	}
Index: branches/MwEmbedStandAlone/modules/Sequencer/tools/mw.SequencerTools.js
—	—	@@ -43,7 +43,7 @@
44	44	update: function( _this, smilElement, paramName, value){
45	45	// Check if the param already exists
46	46	$paramNode = $j( smilElement ).find( "[name='"+ paramName + "']" );
47		~~- if( $paramNode.length == 0){~~
	47	+ if( $paramNode.length == 0 ){
48	48	$j( smilElement ).append(
49	49	$j('<param />').attr({
50	50	'name': paramName,
—	—	@@ -225,7 +225,7 @@
226	226	var _this = this;
227	227
228	228	// If tools are displayed update them
229		~~- if( this.sequencer.getEditToolTarget().find('.editToolsContainer').lenght ){~~
	229	+ if( this.sequencer.getEditToolTarget().find('.editToolsContainer').length ){
230	230	this.drawClipEditTools();
231	231	};
232	232
—	—	@@ -243,7 +243,7 @@
244	244	},
245	245	drawClipEditTools: function( smilElement, selectedToolId ){
246	246	var _this = this;
247		-
	247	+ mw.log( "SequencerTool:: drawClipEditTools:" + smilElement + ' :' + selectedToolId );
248	248	// Update the current clip and tool :
249	249	if( smilElement ){
250	250	this.setCurrentsmilElement( smilElement );
—	—	@@ -275,14 +275,13 @@
276	276	this.getCurrentsmilElement()
277	277	)
278	278	);
279		~~- mw.log( 'Adding ' + toolSet.length + ' tools for ' +~~
	279	+ mw.log( 'SequencerTools::drawClipEditTools: Adding ' + toolSet.length + ' tools for ' +
280	280	this.sequencer.getSmil().getRefType( this.getCurrentsmilElement() ) +
281	281	' current tool: ' + _this.getCurrentToolId()
282	282	);
283		-
	283	+
284	284	var toolTabIndex = 0;
285	285	$j.each( toolSet, function( inx, toolId ){
286		-
287	286	var tool = _this.tools[ toolId ];
288	287	if( _this.getCurrentToolId() == toolId){
289	288	toolTabIndex = inx;
—	—	@@ -333,7 +332,7 @@
334	333	.attr('id', 'editWidgets_' + editWidgetId)
335	334	);
336	335	// Draw the binded widget:
337		~~- _this.editWidgets[editWidgetId].draw(~~
	336	+ _this.editWidgets[ editWidgetId ].draw(
338	337	_this,
339	338	$j( '#editWidgets_' + editWidgetId ),
340	339	smilElement
—	—	@@ -343,17 +342,18 @@
344	343	}
345	344	}
346	345	});
347		-
	346	+
348	347	// Add tab bindings
349	348	$toolsContainer.tabs({
350	349	select: function( event, ui ) {
351	350	_this.setCurrentToolId( $j( ui.tab ).attr('href').replace('#tooltab_', '') );
352		~~- // trigger select tool event:~~
353		~~- $j( _this ).trigger( 'toolSelect' );~~
354	351	},
355	352	selected : toolTabIndex
356	353	});
357	354
	355	+ // Update the selected tool
	356	+ _this.setCurrentToolId( toolSet[ toolTabIndex ] );
	357	+
358	358	var $editActions = $j('<div />')
359	359	.css({
360	360	'position' : 'absolute',
—	—	@@ -391,6 +391,7 @@
392	392	},
393	393	setCurrentToolId: function( toolId ){
394	394	this.currentToolId = toolId;
	395	+ $j( this ).trigger( 'toolSelect' );
395	396	},
396	397
397	398	getEditAction: function( smilElement, editActionId ){
—	—	@@ -410,7 +411,7 @@
411	412	})
412	413	.click( function(){
413	414	return editAction.action( this, _this, smilElement );
414		~~- })~~
	415	+ });
415	416	return $actionButton;
416	417	},
417	418	/* get the editiable attribute input html */
—	—	@@ -458,7 +459,7 @@
459	460	$j( this ).val()
460	461	);
461	462	}
462		~~- })~~
	463	+ });
463	464	},
464	465	getInputBox: function( config ){
465	466	var _this = this;
Index: branches/MwEmbedStandAlone/modules/Sequencer/actions/mw.SequencerActionsSequence.js
—	—	@@ -99,7 +99,6 @@
100	100	.sequencerInput( _this.sequencer )
101	101	);
102	102	// XXX todo we should have an autocomplete on sequence name!
103		-
104	103	var buttons = {};
105	104	buttons[ gM('mwe-cancel') ] = function(){ $j( this ).dialog( 'cancel' ); };
106	105
Index: branches/MwEmbedStandAlone/modules/Sequencer/mw.SequencerTimeline.js
—	—	@@ -14,12 +14,17 @@
15	15	// Pointer to the track layout
16	16	trackLayout: null,
17	17
18		~~- //Default height width of timeline clip:~~
19		~~- timelineThumbSize: {~~
	18	+ // Default height width and spacing timeline clip:
	19	+ timelineThumbLayout: {
20	20	'height': 90,
21		~~- 'width' : 120~~
	21	+ 'width' : 120,
	22	+ 'spacing': 14
22	23	},
23		-
	24	+
	25	+ // The timeline layout mode
	26	+ // Can be "clip" ( like iMovie ) or "time" ( like finalCut )
	27	+ timelineMode: 'clip',
	28	+
24	29	// Store the max track length
25	30	maxTrackLength: 0,
26	31
—	—	@@ -31,6 +36,7 @@
32	37	return this.sequencer.getContainer().find('.mwseq-timeline');
33	38	},
34	39
	40	+
35	41	/**
36	42	* Get the timelineTracksContainer
37	43	*/
—	—	@@ -45,7 +51,7 @@
46	52	.addClass( 'ui-layout-west trackNamesContainer'),
47	53
48	54	$j('<div />')
49		~~- .addClass( 'ui-layout-center clipTrackSetContainer')~~
	55	+ .addClass( 'ui-layout-center clipTrackSetContainer')
50	56	)
51	57	.css( 'height', this.getTimelineContainerHeight() )
52	58	);
—	—	@@ -58,58 +64,194 @@
59	65	'west__maxSize' : 325
60	66	} );
61	67	}
	68	+
62	69	return this.getTimelineContainer().find( '.timelineTrackContainer');
63	70	},
64		-
	71	+ getTrackNamesContainer: function(){
	72	+ return this.getTracksContainer().find('.trackNamesContainer');
	73	+ },
	74	+ getClipTrackSetContainer: function(){
	75	+ return this.getTracksContainer().find('.clipTrackSetContainer');
	76	+ },
65	77	/**
66	78	* Gets a clickable timeline
67	79	*/
68	80	getClickableTimeline: function(){
69		~~- if( this.getTimelineContainer().find('.clickableTimeline').length == 0 ){~~
70		~~- this.getTimelineContainer().append(~~
71		~~- $j('<div />')~~
72		~~- .addClass('clickableTimeline')~~
	81	+ if( this.getClipTrackSetContainer().find('.clickableTimeline').length == 0 ){
	82	+ this.getClipTrackSetContainer().append(
	83	+ $j('<ul />')
	84	+ .addClass( 'clickableTimeline' )
73	85	.css({
74		~~- 'width' : this.getTrackWidth( trackIndex )~~
	86	+ 'height' : '16px',
	87	+ 'width' : this.getLongestTrackWidth()
75	88	})
76	89	);
77		~~- }~~
78		~~- return this.getTimelineContainer().find('.clickableTimeline');~~
	90	+ }
	91	+ return this.getClipTrackSetContainer().find('.clickableTimeline');
79	92	},
80		~~- drawClickableTimeline: function(){~~
81		~~- // Append the timeline to the clickable timeline:~~
82		~~- this.getClickableTimeline().append(~~
83		~~- // get the duration~~
	93	+ drawTimelineTools: function(){
	94	+ var _this = this;
	95	+
	96	+ // Some tool icons
	97	+ this.getTrackNamesContainer().append(
	98	+ this.getTrackNamesTools()
84	99	);
85	100
	101	+ // Clickable timeline
86	102	var updateClickableTimeline = function(){
87		~~- // update the clickable timeline~~
	103	+ var timelineWidth = _this.getLongestTrackWidth();
	104	+ _this.setupClickableTimeline( timelineWidth );
	105	+ };
	106	+ // Bind the update event to every time the duration is re-calculated
	107	+ $j( this.sequencer.getEmbedPlayer() ).bind( 'durationchange', updateClickableTimeline );
	108	+ updateClickableTimeline();
	109	+ },
	110	+
	111	+ /**
	112	+ * TrackNameTools ( should refactor into a new class ( once we have more interactive tools )
	113	+ */
	114	+ trackNamesTools:{
	115	+ 'save': {
	116	+ 'icon' : 'disk',
	117	+ 'title' : gM('mwe-sequencer-menu-sequence-save-desc'),
	118	+ 'action': function(_this ){
	119	+ _this.sequencer.getActionsSequence().save();
	120	+ }
88	121	}
89		~~- // Bind the update event to every time the duration is re-calculated~~
90		~~- $j( this.sequencer.getEmbedPlayer() ).bind( 'durationchange', updateClickableTimeline )~~
91		~~- updateClickableTimeline();~~
	122	+ },
	123	+ getTrackNamesTools: function(){
	124	+ var _this = this;
	125	+ // For now just a save button:
	126	+ var $trackTools = $j('<div />')
	127	+ .addClass('trackNamesTools');
92	128
	129	+ $j.each(this.trackNamesTools, function(toolId, tool){
	130	+ $trackTools.append(
	131	+ $j.button({
	132	+ 'icon': tool.icon
	133	+ })
	134	+ .attr('title', tool.title)
	135	+ // Turn it into a mini-button
	136	+ .css({
	137	+ 'padding-top': 0,
	138	+ 'padding-bottom': 0,
	139	+ 'height' : 16
	140	+ })
	141	+ .click(function(){
	142	+ tool.action( _this )
	143	+ })
	144	+ )
	145	+ });
	146	+
	147	+ return $trackTools;
93	148	},
94	149
	150	+ updateTimelinePlayMarker: function( playTime ){
	151	+ var $timelinePlayMarker = _this.getClickableTimeline().find( '.timelinePlayMarker' );
	152	+ },
	153	+
	154	+ timelineOffset2Time: function( pixleOffset ){
	155	+ pixleOffset - 10 / ( _this.timelineThumbLayout.width + 14 )
	156	+ },
	157	+
	158	+ setupClickableTimeline: function( timelineWidth ){
	159	+ var _this = this;
	160	+ var smil = this.sequencer.getSmil();
	161	+ // Get the Get Clickable Timeline
	162	+ var $clickTimeline = _this.getClickableTimeline().empty()
	163	+ .css( 'width', timelineWidth );
	164	+
	165	+
	166	+ // Setup click binding
	167	+ $clickTimeline.click(function( event ){
	168	+ var timelineOffset = event.pageX - $clickTimeline.offset().left;
	169	+ // Get the mouse offset get which clip we are associated with
	170	+ mw.log("clicked: " + timelineOffset );
	171	+ _this.updateTimelinePlayMarker(
	172	+ timelineOffset2Time( timelineOffset )
	173	+ )
	174	+ });
	175	+
	176	+ // Add TimelinePlayMarker
	177	+ $clickTimeline.append(
	178	+ $j('<div />')
	179	+ .addClass('timelinePlayMarker')
	180	+ .css({
	181	+ 'height': this.getTimelineContainerHeight(),
	182	+ 'left' : 10,
	183	+ 'position' : 'absolute',
	184	+ 'width' : 2,
	185	+ 'z-index' : 2
	186	+ })
	187	+ .append(
	188	+ $j('<span />')
	189	+ .addClass( 'ui-icon ui-icon-triangle-1-s' )
	190	+ .css({
	191	+ 'position' : 'absolute',
	192	+ 'left' : '-8px',
	193	+ 'top' : '10px',
	194	+ 'z-index' : 3
	195	+ }),
	196	+
	197	+ $j('<div />')
	198	+ .css({
	199	+ 'position' : 'absolute',
	200	+ 'top' : '10px',
	201	+ 'height' : '100%',
	202	+ 'width' : 2,
	203	+ 'background-color' : '#AAF'
	204	+ })
	205	+ )
	206	+ );
	207	+
	208	+ // For now base the timeline
	209	+ if( this.timelineMode == 'clip' ){
	210	+ // xxx TODO better support multiple tracks
	211	+ var smilSequenceTracks = this.sequencer.getSmil().getBody().getSeqElements();
	212	+
	213	+ // Output a time for each clip ( right now just assume first track ( 0 )
	214	+ var clipInx = 0;
	215	+ var startOffset = 0;
	216	+ smil.getBody().getRefElementsRecurse( smilSequenceTracks[0], startOffset, function( smilElement ){
	217	+ mw.log(" offset:" + startOffset + ' clipDur: ' + smil.getBody().getClipDuration( smilElement ) + ' so:' + $j( smilElement ).data( 'startOffset' ) );
	218	+ $j('<span />')
	219	+ .css({
	220	+ 'position': 'absolute',
	221	+ 'border-left' : 'solid thin #999',
	222	+ 'left' : 10 + ( _this.timelineThumbLayout.width + 14 ) * clipInx
	223	+ })
	224	+ .text(
	225	+ mw.seconds2npt(
	226	+ $j( smilElement ).data( 'startOffset' )
	227	+ )
	228	+ )
	229	+ .appendTo( $clickTimeline );
	230	+
	231	+ clipInx++;
	232	+ });
	233	+ }
	234	+ },
	235	+
95	236	resizeTimeline: function(){
96	237	this.trackLayout.resizeAll();
97	238	},
98	239	getTimelineContainerHeight: function(){
99	240	var _this = this;
100	241	// Start with vertical space for one more track + timeline
101		~~- var timelineHeight = 60;~~
	242	+ var timelineHeight = 80;
102	243	var smilSequenceTracks = this.sequencer.getSmil().getBody().getSeqElements();
103	244	$j.each(smilSequenceTracks, function( trackIndex, smilSequenceTrack ){
104		~~- timelineHeight+= _this.getSequenceTrackHeight( smilSequenceTrack )~~
105		~~- })~~
	245	+ timelineHeight+= _this.getSequenceTrackHeight( smilSequenceTrack );
	246	+ });
106	247	return timelineHeight;
107	248	},
	249	+
108	250	// xxx may need to refactor to store collapsed expanded state info
109	251	getSequenceTrackHeight: function( smilSequenceTrack ){
110	252	if( $j( smilSequenceTrack).attr('tracktype') == 'audio' ){
111		~~- return mw.getConfig( 'Sequencer.TimelineColapsedTrackSize')~~
	253	+ return mw.getConfig( 'Sequencer.TimelineColapsedTrackSize');
112	254	}else{
113		~~- return mw.getConfig( 'Sequencer.TimelineTrackHeight' )~~
	255	+ return mw.getConfig( 'Sequencer.TimelineTrackHeight' );
114	256	}
115	257	},
116	258	/*
—	—	@@ -140,8 +282,8 @@
141	283	var _this = this;
142	284
143	285	// draw clickable timeline
	286	+ _this.drawTimelineTools();
144	287
145		-
146	288	// xxx TODO better support multiple tracks :::
147	289	var smilSequenceTracks = this.sequencer.getSmil().getBody().getSeqElements();
148	290
—	—	@@ -155,7 +297,7 @@
156	298	callback();
157	299	}
158	300	});
159		~~- })~~
	301	+ });
160	302	},
161	303
162	304	drawSequenceTrack: function( trackIndex, smilSequenceTrack, callback){
—	—	@@ -167,10 +309,10 @@
168	310
169	311	// Add sequence track name if not present
170	312	var $clipTrackName = $j( '#' + this.getTrackNameInterfaceId( trackIndex ) );
171		~~- if( $clipTrackName.length == 0 ) {~~
172		~~- this.getTracksContainer().find('.trackNamesContainer').append(~~
	313	+ if( $clipTrackName.length == 0 ) {
	314	+ this.getTrackNamesContainer().append(
173	315	this.getTrackNameInterface( trackIndex, smilSequenceTrack )
174		~~- )~~
	316	+ );
175	317	$clipTrackName = $j( '#' + this.getTrackNameInterfaceId( trackIndex ) );
176	318	}
177	319
—	—	@@ -182,20 +324,20 @@
183	325	mw.seconds2npt(
184	326	_this.sequencer.getSmil().getBody().getClipDuration( $j( smilSequenceTrack ) )
185	327	)
186		~~- ).fadeIn( 'slow')~~
187		~~- })~~
188		~~- }~~
	328	+ ).fadeIn( 'slow');
	329	+ });
	330	+ };
189	331	// Bind the update event to every time the duration is re-calculated
190		~~- $j( this.sequencer.getEmbedPlayer() ).bind( 'durationchange', updateTrackDuration )~~
	332	+ $j( this.sequencer.getEmbedPlayer() ).bind( 'durationchange', updateTrackDuration );
191	333	updateTrackDuration();
192	334
193	335	// Add Sequence track container if not present
194		~~- var $clipTrackSet = $j( '#' + this.getTrackSetId( trackIndex ))~~
	336	+ var $clipTrackSet = $j( '#' + this.getTrackSetId( trackIndex ));
195	337	mw.log( "SequenceTimeline::drawSequenceTrack: id: " + $clipTrackSet.length );
196	338	if( $clipTrackSet.length == 0 ) {
197		~~- this.getTracksContainer().find('.clipTrackSetContainer').append(~~
	339	+ this.getClipTrackSetContainer().append(
198	340	this.getClipTrackSet( trackIndex , smilSequenceTrack)
199		~~- )~~
	341	+ );
200	342	$clipTrackSet = $j( '#' + this.getTrackSetId( trackIndex ));
201	343	}
202	344	// Draw sequence track clips ( checks for dom updates to smilSequenceTrack )
—	—	@@ -226,7 +368,7 @@
227	369	mw.log("SequncerTimeline:: drawTrackClips node type: " + $j(smilElement).get(0).nodeName.toLowerCase() );
228	370	var reRenderThumbFlag = false;
229	371	// Draw the node onto the timeline if the clip is not already there:
230		~~- var $timelineClip = $clipTrackSet.find( '#' + _this.getTimelineClipId( smilElement ) )~~
	372	+ var $timelineClip = $clipTrackSet.find( '#' + _this.getTimelineClipId( smilElement ) );
231	373	if( $timelineClip.length == 0 ){
232	374	mw.log("SequencerTimeline::drawTrackClips: ADD: " + _this.getTimelineClipId( smilElement ) + ' to ' + $clipTrackSet.attr('id') );
233	375	$timelineClip = _this.getTimelineClip( smilSequenceTrack, smilElement );
—	—	@@ -236,7 +378,7 @@
237	379	if( $previusClip ){
238	380	$previusClip.after(
239	381	$timelineClip
240		~~- )~~
	382	+ );
241	383	} else {
242	384	// Add to the start of the track set:
243	385	$clipTrackSet.prepend(
—	—	@@ -280,7 +422,7 @@
281	423	if( reOrderTimelineFlag ){
282	424	// move every node in-order to the end.
283	425	smil.getBody().getRefElementsRecurse( smilSequenceTrack, startOffset, function( $node ){
284		~~- var $timelineClip = $clipTrackSet.find('#' + _this.getTimelineClipId( $node ) )~~
	426	+ var $timelineClip = $clipTrackSet.find('#' + _this.getTimelineClipId( $node ) );
285	427	$timelineClip.appendTo( $clipTrackSet );
286	428	});
287	429	// Update the order for all clips
—	—	@@ -296,7 +438,7 @@
297	439	var keyBindings = this.sequencer.getKeyBindings();
298	440	$j( keyBindings ).bind('escape', function(){
299	441	// If a clips are selected deselect
300		~~- var selectedClips = _this.getTimelineContainer().find( '.selectedClip' )~~
	442	+ var selectedClips = _this.getTimelineContainer().find( '.selectedClip' );
301	443	if( selectedClips.length ){
302	444	selectedClips.removeClass( 'selectedClip' );
303	445	return false;
—	—	@@ -342,13 +484,13 @@
343	485	cursor: 'move',
344	486	helper: function( event, helper ){
345	487	// xxx might need some fixes for multi-track
346		~~- var $selected = _this.getTimelineContainer().find( '.selectedClip' )~~
	488	+ var $selected = _this.getTimelineContainer().find( '.selectedClip' );
347	489	if ( $selected.length === 0 \|\| $selected.length == 1) {
348	490	return $j( helper );
349	491	}
350	492	return $j('<ul />')
351	493	.css({
352		~~- 'width' : (_this.timelineThumbSize.width + 16) * $selected.length~~
	494	+ 'width' : (_this.timelineThumbLayout.width + 16) * $selected.length
353	495	})
354	496	.append( $selected.clone() );
355	497	},
—	—	@@ -364,21 +506,22 @@
365	507	_this.handleReorder( ui.item );
366	508	}
367	509	}
368		~~- })~~
	510	+ });
369	511	},
370	512	// expand the track size by clip length + 1
371	513	expandTrackSetSize: function ( trackIndex ){
372		~~- //mw.log("SequencerTimeline::expandTrackSetSize: " + this.timelineThumbSize.width + ' tcc: ' + trackClipCount + ' ::' + ( ( this.timelineThumbSize.width + 16) * (trackClipCount + 2) ) );~~
	514	+ //mw.log("SequencerTimeline::expandTrackSetSize: " + this.timelineThumbLayout.width + ' tcc: ' + trackClipCount + ' ::' + ( ( this.timelineThumbLayout.width + 16) * (trackClipCount + 2) ) );
373	515	this.getTracksContainer().find('.clipTrackSet').css({
374	516	'width' : this.getTrackWidth( trackIndex, 2 ) + 'px'
375	517	});
376	518	},
	519	+
377	520	/**
378	521	* Get the width of a given sequence track
379	522	* @param {Number} trackIndex
380	523	* the track to get the width for
381	524	* @param {Number=} extraClips
382		~~- * Optional how many extra clips to~~
	525	+ * Optional how many extra clips to give the width
383	526	*/
384	527	getTrackWidth: function( trackIndex, extraClips ){
385	528	if( !extraClips ){
—	—	@@ -386,12 +529,31 @@
387	530	}
388	531	// TOOD make this use the trackIndex
389	532	var trackClipCount = this.getTimelineContainer().find( '.clipTrackSet' ).children().length;
390		~~- return ( (this.timelineThumbSize.width + 16) * (trackClipCount + extraClips ) )~~
	533	+ return ( (this.timelineThumbLayout.width + 16) * (trackClipCount + extraClips ) );
391	534	},
	535	+
	536	+ /**
	537	+ * Get the longest track width
	538	+ * @return
	539	+ * @type number
	540	+ */
	541	+ getLongestTrackWidth: function(){
	542	+ var _this = this;
	543	+ var smilSequenceTracks = this.sequencer.getSmil().getBody().getSeqElements();
	544	+ // Find the longest track:
	545	+ var longestWidth = 0;
	546	+ $j.each(smilSequenceTracks, function( trackIndex, smilSequenceTrack ){
	547	+ var curTrackWidth = _this.getTrackWidth( trackIndex )
	548	+ if( curTrackWidth > longestWidth )
	549	+ longestWidth = curTrackWidth;
	550	+ });
	551	+ return longestWidth;
	552	+ },
	553	+
392	554	restoreTrackSetSize: function ( trackIndex ){
393	555	var trackClipCount = this.getTimelineContainer().find( '.clipTrackSet' ).children().length;
394	556	this.getTracksContainer().find('.clipTrackSet').css({
395		~~- 'width' : ( ( this.timelineThumbSize.width + 16) * trackClipCount) + 'px'~~
	557	+ 'width' : ( ( this.timelineThumbLayout.width + 16) * trackClipCount) + 'px'
396	558	});
397	559	},
398	560	getTimelineClip: function( smilSequenceTrack, $node ){
—	—	@@ -410,12 +572,12 @@
411	573	},
412	574	// calls the edit interface passing in the selected clip:
413	575	editClip: function( selectedClip ){
	576	+ mw.log("SequencerTimeline::editClip" + $j( selectedClip ).data('smilId') );
414	577	// commit any input changes
415	578	$j( document.activeElement ).change();
416	579
417		~~- var smil = this.sequencer.getSmil();~~
418		~~- // get the smil element for the edit tool:~~
419		~~- var smilElement = smil.$dom.find( '#' + $j( selectedClip ).data('smilId') );~~
	580	+ // Get the smil element for the edit tool:
	581	+ var smilElement = this.sequencer.getSmil().$dom.find( '#' + $j( selectedClip ).data('smilId') );
420	582	this.sequencer.getTools().drawClipEditTools( smilElement );
421	583	},
422	584
—	—	@@ -491,11 +653,11 @@
492	654	if( typeof clipIndex == 'undefined' \|\| clipIndex >= $smilSequenceTrack.children().length ){
493	655	$smilSequenceTrack.append(
494	656	$j( smilElement ).get(0)
495		~~- )~~
	657	+ );
496	658	} else {
497	659	$smilSequenceTrack.children().eq( clipIndex ).before(
498	660	$j( smilElement ).get(0)
499		~~- )~~
	661	+ );
500	662	}
501	663
502	664	// Update the dom timeline
—	—	@@ -630,7 +792,7 @@
631	793	// select all non-selected between max or min
632	794	$target.find( '.timelineClip' ).each( function( inx, curClip) {
633	795	if( inx > minOrder && inx < maxOrder ){
634		~~- $j(curClip).addClass( 'selectedClip')~~
	796	+ $j(curClip).addClass( 'selectedClip');
635	797	}
636	798	});
637	799	}
—	—	@@ -648,12 +810,12 @@
649	811	$toolTarget.empty().append(
650	812	gM( 'mwe-sequencer-no_selected_resource' ),
651	813	$j('<div />').addClass('editToolsContainer')
652		~~- )~~
	814	+ );
653	815	} else if( $selectedClips.length > 1 ){
654	816	$toolTarget.empty().append(
655	817	gM( 'mwe-sequencer-error_edit_multiple' ),
656	818	$j('<div />').addClass('editToolsContainer')
657		~~- )~~
	819	+ );
658	820	} else {
659	821	// A single clip is selected edit that clip
660	822	_this.editClip( clickClip );
—	—	@@ -717,7 +879,7 @@
718	880	.buttonHover()
719	881	.click( function(){
720	882	_this.getTimelineContainer().find('.selectedClip').removeClass( 'selectedClip' );
721		~~- _this.editClip( $timelineClip )~~
	883	+ _this.editClip( $timelineClip );
722	884	$timelineClip.addClass( 'selectedClip' );
723	885	// Seek to the edit clip
724	886	_this.seekToStartOfClip( $timelineClip );
—	—	@@ -761,7 +923,7 @@
762	924	if( smil.getRefType( smilElement ) == 'audio' ){
763	925	smil.getLayout().drawSmilElementToTarget( smilElement, $thumbTarget, relativeTime, callback );
764	926	} else {
765		~~- _this.drawClipThumbImage( $thumbTarget, smilElement, relativeTime, callback )~~
	927	+ _this.drawClipThumbImage( $thumbTarget, smilElement, relativeTime, callback );
766	928	}
767	929	},
768	930	/**
—	—	@@ -779,7 +941,7 @@
780	942	'position' : 'absolute',
781	943	'opacity' : '.9',
782	944	'left': '0px',
783		~~- 'height': _this.timelineThumbSize.height~~
	945	+ 'height': _this.timelineThumbLayout.height
784	946	})
785	947	.attr( 'src', smil.getAssetUrl( smilElement.attr('poster') ) )
786	948	.load( function(){
—	—	@@ -812,7 +974,7 @@
813	975	callback = null;
814	976	}
815	977	});
816		~~- })~~
	978	+ });
817	979	},
818	980	/**
819	981	* Gets an sequence track control interface
—	—	@@ -824,7 +986,7 @@
825	987
826	988	var $trackNameContainer = $j('<div />')
827	989	.attr('id', this.getTrackNameInterfaceId( trackIndex ) )
828		~~- .addClass('trackNames ui-corner-all')~~
	990	+ .addClass('trackNames ui-corner-all');
829	991
830	992	var $trackNameTitle =
831	993	$j('<a />')
—	—	@@ -835,13 +997,13 @@
836	998	$trackNameTitle.append(
837	999	$j('<span />').addClass( 'ui-icon ui-icon-volume-on'),
838	1000	$j('<span />').text( gM( 'mwe-sequencer-audio-track' ) )
839		~~- )~~
	1001	+ );
840	1002	} else {
841	1003	// for now default to "video" tracktype
842	1004	$trackNameTitle.append(
843	1005	$j('<span />').addClass( 'ui-icon ui-icon-video'),
844	1006	$j('<span />').text( gM( 'mwe-sequencer-video-track' ) )
845		~~- )~~
	1007	+ );
846	1008	}
847	1009	// Set track name height
848	1010	$trackNameContainer.css({
—	—	@@ -861,7 +1023,7 @@
862	1024	,
863	1025	$j( '<span />').addClass('trackDuration')
864	1026
865		~~- )~~
	1027	+ );
866	1028	// Wrap the track name in a box that matches the trackNames
867	1029	return $trackNameContainer;
868	1030	},
—	—	@@ -875,7 +1037,7 @@
876	1038	}
877	1039	return $j( smilSequenceTrack ).data('id');
878	1040	}
879		-}
	1041	+};
880	1042
881	1043
882	1044	} )( window.mw );
\ No newline at end of file

Status & tagging log

01:19, 8 January 2011 Reedy (talk | contribs) changed the status of r79560 [removed: new added: deferred]