r71219 MediaWiki - Code Review archive

Repository:	MediaWiki
Revision:	< r71218‎ \| r71219 \| r71220 >
Date:	23:33, 17 August 2010
Author:	dale
Status:	deferred
Tags:
Comment:	* improved undo redo handling for non-change edits * improved click selection "editTool" updates * improved audio track display and edit
Modified paths:	/branches/MwEmbedStandAlone/libraries/jquery/jquery-1.4.2.js (modified) (history) /branches/MwEmbedStandAlone/modules/Sequencer/Sequencer.i18n.php (modified) (history) /branches/MwEmbedStandAlone/modules/Sequencer/actions/mw.SequencerActionsEdit.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.SequencerConfig.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/SmilPlayer.i8n.php (modified) (history) /branches/MwEmbedStandAlone/modules/SmilPlayer/mw.Smil.js (modified) (history) /branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilLayout.js (modified) (history)

Diff [purge]

Index: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilLayout.js
—	—	@@ -115,7 +115,11 @@
116	116
117	117	drawElementThumb: function( $target, $node, relativeTime ){
118	118	mw.log('SmilLayout::drawElementThumb: ' + relativeTime );
119		~~- // parse the time incase it came in as human input~~
	119	+ if( $target.length == 0 ){
	120	+ mw.log("Error drawElementThumb to empty target");
	121	+ return ;
	122	+ }
	123	+ // parse the time in case it came in as human input
120	124	relativeTime = this.smil.parseTime( relativeTime );
121	125	switch ( this.smil.getRefType( $node )){
122	126	case 'video':
—	—	@@ -125,10 +129,10 @@
126	130	// xxx we could eventually use canvas as well but for now just add it at 100%
127	131	$target.html(
128	132	this.getSmilImgHtml( $node, {
129		~~- 'width' : $target.width(),~~
130		~~- 'height' : $target.height()~~
131		~~- })~~
132		~~- );~~
	133	+ 'width' : $target.width(),
	134	+ 'height' : $target.height()
	135	+ })
	136	+ );
133	137	break;
134	138	case 'cdata_html':
135	139	// Scale down the html into the target width
—	—	@@ -136,8 +140,20 @@
137	141	this.getSmilCDATAHtml( $node, $target.width() )
138	142	)
139	143	break;
140		~~- case 'audio':~~
141		~~- // draw an audio icon in the target~~
	144	+ case 'audio':
	145	+ var titleStr = ( $node.attr('title') )? $node.attr('title') : gM( 'mwe-sequencer-untitled-audio' )
	146	+ // draw an audio icon / title the target
	147	+ $target.append(
	148	+ $j('<span />')
	149	+ .addClass( 'ui-icon ui-icon-volume-on')
	150	+ .attr('title', titleStr)
	151	+ .css( 'position', 'absolute')
	152	+ ,
	153	+ $j('<span />')
	154	+ .attr('title', titleStr)
	155	+ .css({'position': 'absolute', 'left':'16px'})
	156	+ .text( titleStr )
	157	+ )
142	158	break;
143	159	}
144	160	},
—	—	@@ -189,7 +205,7 @@
190	206	// update the drawElement
191	207	drawElement = $j( '#' + _this.smil.getPageDomId( $tmpFrameNode ) ).get(0);
192	208	drawFrame( drawElement );
193		~~- // remove the temporary node from dom~~
	209	+ // Remove the temporary node from dom
194	210	$j( drawElement ).remove();
195	211	})
196	212	}
Index: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.Smil.js
—	—	@@ -17,6 +17,8 @@
18	18	*
19	19	*/
20	20
	21	+mw.includeAllModuleMessages();
	22	+
21	23	/* Add the hooks needed for playback */
22	24	mw.Smil = function(options) {
23	25	return this.init(options);
Index: branches/MwEmbedStandAlone/modules/SmilPlayer/SmilPlayer.i8n.php
—	—	@@ -2,5 +2,6 @@
3	3	$messages = array();
4	4
5	5	$messages['en'] = array(
6		~~- 'mwe-embedplayer-ogg-player-smilPlayer' => 'SMIL Player'~~
	6	+ 'mwe-embedplayer-ogg-player-smilPlayer' => 'SMIL Player',
	7	+ 'mwe-smilplayer-untitled-audio' => 'Untitled audio'
7	8	);
\ No newline at end of file
Index: branches/MwEmbedStandAlone/modules/Sequencer/mw.Sequencer.js
—	—	@@ -266,7 +266,7 @@
267	267	.append(
268	268	$j('<div />')
269	269	.addClass( "ui-layout-center mwseq-edit" )
270		~~- .html( this.getEditTools().defaultText ),~~
	270	+ .html( gM('mwe-sequencer-no_selected_resource') ),
271	271	$j('<div />')
272	272	.addClass( "ui-layout-east mwseq-player" )
273	273	.text( gM('mwe-sequencer-loading-player') ),
Index: branches/MwEmbedStandAlone/modules/Sequencer/css/mw.style.Sequencer.css
—	—	@@ -22,14 +22,16 @@
23	23	list-style-position: inside;
24	24	cursor: hand;
25	25	cursor: pointer;
26		~~- margin:0px;~~
	26	+ margin-top:4px;
	27	+ margin-bottom: 0px;
27	28	padding: 4px;
28	29	}
29	30
30	31	.mwe-sequencer .trackNames{
31	32	background-color: #EEE;
32	33	border: solid thin #999;
33		~~- padding:4px~~
	34	+ padding:4px;
	35	+ margin-top: 4px;
34	36	}
35	37
36	38	.mwe-sequencer .timelineClip{
—	—	@@ -39,7 +41,6 @@
40	42	border: 2px solid #555;
41	43	overflow: hidden;
42	44	width:120px;
43		~~- height:90px;~~
44	45
45	46	display: inline-block;
46	47	position: relative;
Index: branches/MwEmbedStandAlone/modules/Sequencer/Sequencer.i18n.php
—	—	@@ -14,6 +14,7 @@
15	15	'mwe-sequencer-loading-asset' => 'Loading asset ...',
16	16
17	17	'mwe-sequencer-no_selected_resource' => '<h3>No resource selected</h3> Select a clip to enable editing.',
	18	+ 'mwe-sequencer-error_edit_multiple' => '<h3>Multiple resources selected</h3> Select a single clip to edit it.',
18	19	'mwe-sequencer-no-sequence-start-new' => 'Empty sequence, [$1 browser for assets] to create a new sequence',
19	20	'mwe-sequencer-video-track' => 'Video track',
20	21	'mwe-sequencer-audio-track' => 'Audio track',
—	—	@@ -86,8 +87,7 @@
87	88	'mwe-sequencer-pixle2sec' => 'pixels to seconds',
88	89	'mwe-sequencer-rmclip' => 'Remove clip',
89	90	'mwe-sequencer-clip_in' => 'clip in',
90		~~- 'mwe-sequencer-clip_out' => 'clip out',~~
91		~~- 'mwe-sequencer-error_edit_multiple' => '<h3>Multiple resources selected</h3> Select a single clip to edit it.',~~
	91	+ 'mwe-sequencer-clip_out' => 'clip out',
92	92	'mwe-sequencer-editor_options' => 'Editor options',
93	93	'mwe-sequencer-editor_mode' => 'Editor mode',
94	94	'mwe-sequencer-simple_editor_desc' => 'simple editor (iMovie style)',
Index: branches/MwEmbedStandAlone/modules/Sequencer/actions/mw.SequencerActionsEdit.js
—	—	@@ -47,7 +47,14 @@
48	48	* Apply a smil xml transform state ( to support undo / redo )
49	49	*/
50	50	registerEdit: function(){
51		~~- mw.log( 'ActionsEdit::registerEdit: stacksize' + this.editStack.length + ' editIndex: ' + this.editIndex );~~
	51	+ //mw.log( 'ActionsEdit::registerEdit: stacksize' + this.editStack.length + ' editIndex: ' + this.editIndex );
	52	+ // Make sure the edit is distinct from the latest in the stack:
	53	+ var currentXML = this.sequencer.getSmil().getXMLString();
	54	+ if( currentXML == this.editStack[ this.editStack-1 ] ){
	55	+ mw.log("ActionsEdit::registerEdit on identical smil xml state ( no edit stack modification ) ")
	56	+ return ;
	57	+ }
	58	+
52	59	// Throw away any edit history after the current editIndex:
53	60	if( this.editStack.length && this.editIndex > this.editStack.length ) {
54	61	this.editStack = this.editStack.splice(0, this.editIndex);
—	—	@@ -56,7 +63,7 @@
57	64	// @@TODO could save space to just compute the diff in JS and store that
58	65	// ie: http://code.google.com/p/google-diff-match-patch/
59	66	// ( instead of the full xml text with "key-pages" every 10 edits or something like that.
60		~~- this.editStack.push( this.sequencer.getSmil().getXMLString() );~~
	67	+ this.editStack.push( currentXML );
61	68
62	69	// Update the editIndex
63	70	this.editIndex = this.editStack.length - 1;
Index: branches/MwEmbedStandAlone/modules/Sequencer/mw.SequencerTools.js
—	—	@@ -14,7 +14,6 @@
15	15	init: function( sequencer ){
16	16	this.sequencer = sequencer;
17	17	},
18		~~- defaultText : gM('mwe-sequencer-no_selected_resource'),~~
19	18	tools:{
20	19	'trim':{
21	20	'title': gM('mwe-sequencer-cliptool-trim'),
—	—	@@ -132,14 +131,16 @@
133	132	// Return the trimTimeline edit widget
134	133	'draw': function( _this, target, smilClip ){
135	134	var smil = _this.sequencer.getSmil();
136		~~- // For now just have a thumbnail and a slider~~
137		~~- $j(target).append(~~
138		~~- $j('<div />')~~
139		~~- .addClass( 'trimStartThumb ui-corner-all' ),~~
140		~~- $j('<div />')~~
141		~~- .addClass( 'trimEndThumb ui-corner-all' ),~~
142		~~- $j('<div />').addClass('ui-helper-clearfix')~~
143		~~- )~~
	135	+ // check if thumbs are supported
	136	+ if( _this.sequencer.getSmil().getRefType( smilClip ) == 'video' ){
	137	+ $j(target).append(
	138	+ $j('<div />')
	139	+ .addClass( 'trimStartThumb ui-corner-all' ),
	140	+ $j('<div />')
	141	+ .addClass( 'trimEndThumb ui-corner-all' ),
	142	+ $j('<div />').addClass('ui-helper-clearfix')
	143	+ )
	144	+ }
144	145
145	146	// Add a trim binding:
146	147	$j('#editTool_trim_clipBegin,#editTool_trim_dur').change(function(){
—	—	@@ -148,7 +149,7 @@
149	150	// Update the thumbnails:
150	151	_this.editWidgets.trimTimeline.update( _this, target, smilClip);
151	152
152		~~- // get the clip full duration to build out the timeline selector~~
	153	+ // Get the clip full duration to build out the timeline selector
153	154	smil.getBody().getClipAssetDuration( smilClip, function( fullClipDuration ) {
154	155
155	156	var sliderToTime = function( sliderval ){
—	—	@@ -227,6 +228,7 @@
228	229	// get the toolId based on what "ref type" smilClip is:
229	230	switch( this.sequencer.getSmil().getRefType( smilClip ) ){
230	231	case 'video':
	232	+ case 'audio':
231	233	toolId = 'trim';
232	234	break;
233	235	default:
—	—	@@ -243,7 +245,9 @@
244	246	var tool = this.tools[ toolId ];
245	247
246	248	// Append the title:
247		~~- $target.empty().append(~~
	249	+ $target.empty().append(
	250	+ $j('<div />').addClass( 'editToolsContainer' )
	251	+ ,
248	252	$j('<h3 />' ).append(
249	253	tool.title
250	254	)
Index: branches/MwEmbedStandAlone/modules/Sequencer/mw.SequencerConfig.js
—	—	@@ -27,6 +27,6 @@
28	28	"Sequencer.TimelineTrackHeight" : 100,
29	29
30	30	// Default timeline "audio / collapsed" size
31		~~- "Sequencer.TimelineColapsedTrackSize" : 30~~
	31	+ "Sequencer.TimelineColapsedTrackSize" : 35
32	32	})
33	33
\ No newline at end of file
Index: branches/MwEmbedStandAlone/modules/Sequencer/mw.SequencerTimeline.js
—	—	@@ -69,14 +69,18 @@
70	70	var timelineHeight = mw.getConfig( 'Sequencer.TimelineTrackHeight' );
71	71	var smilSequenceTracks = this.sequencer.getSmil().getBody().getSeqElements();
72	72	$j.each(smilSequenceTracks, function( trackIndex, smilSequenceTrack ){
73		~~- if( $j( smilSequenceTrack).attr('tracktype') == 'audio' ){~~
74		~~- timelineHeight+= mw.getConfig( 'Sequencer.TimelineColapsedTrackSize')~~
75		~~- }else{~~
76		~~- timelineHeight+= mw.getConfig( 'Sequencer.TimelineTrackHeight' )~~
77		~~- }~~
	73	+ timelineHeight+= _this.getSequenceTrackHeight( smilSequenceTrack )
78	74	})
79	75	return timelineHeight;
80	76	},
	77	+ // xxx may need to refactor to store collapsed expanded state info
	78	+ getSequenceTrackHeight: function( smilSequenceTrack ){
	79	+ if( $j( smilSequenceTrack).attr('tracktype') == 'audio' ){
	80	+ return mw.getConfig( 'Sequencer.TimelineColapsedTrackSize')
	81	+ }else{
	82	+ return mw.getConfig( 'Sequencer.TimelineTrackHeight' )
	83	+ }
	84	+ },
81	85	// Get the selected sequence track index ( for now its always zero )
82	86	getSelectedTrackIndex: function(){
83	87	return 0;
—	—	@@ -148,8 +152,10 @@
149	153	mw.log("ADD: " + _this.getTimelineClipId( $node ) + ' to ' + $clipTrackSet.attr('id') );
150	154	// Draw the node onto the timeline if the clip is not already there:
151	155	var $timelineClip = $clipTrackSet.find( '#' + _this.getTimelineClipId( $node ) )
152		~~- if( $timelineClip.length == 0 ){~~
153		~~- $timelineClip = _this.getTimelineClip( $clipTrackSet, $node );~~
	156	+ if( $timelineClip.length == 0 ){
	157	+ $timelineClip = _this.getTimelineClip( smilSequenceTrack, $node );
	158	+ // Set the index order on the clip
	159	+ $timelineClip.data( 'indexOrder', $clipTrackSet.children().length );
154	160	if( $previusClip ){
155	161	$previusClip.after(
156	162	$timelineClip
—	—	@@ -225,19 +231,16 @@
226	232	*/
227	233	getClipTrackSet: function( trackIndex, smilSequenceTrack ){
228	234	var _this = this;
229		-
230		~~- var trackHeight = ( $j( smilSequenceTrack).attr('tracktype') == 'audio' )?~~
231		~~- mw.getConfig( 'Sequencer.TimelineColapsedTrackSize') :~~
232		~~- mw.getConfig( 'Sequencer.TimelineTrackHeight' )~~
233		-
	235	+
234	236	return $j('<ul />')
235	237	.attr( 'id', this.getTrackSetId( trackIndex ))
236	238	.data( 'trackIndex', trackIndex )
237	239	.addClass( 'clipTrackSet ui-corner-all' )
238		~~- .css( 'height', trackHeight )~~
	240	+ .css( 'height', _this.getSequenceTrackHeight( smilSequenceTrack ) )
239	241	// Add "sortable
240	242	.sortable({
241	243	placeholder: "clipSortTarget timelineClip ui-corner-all",
	244	+ forcePlaceholderSize: true,
242	245	opacity: 0.6,
243	246	tolerance: 'pointer',
244	247	cursor: 'move',
—	—	@@ -281,15 +284,16 @@
282	285	'width' : ( ( this.timelineThumbSize.width + 16) * trackClipCount) + 'px'
283	286	});
284	287	},
285		~~- getTimelineClip: function( $clipTrackSet, $node ){~~
	288	+ getTimelineClip: function( smilSequenceTrack, $node ){
286	289	var _this = this;
	290	+
287	291	return $j('<li />')
288	292	.attr('id', _this.getTimelineClipId( $node ) )
289	293	.data( {
290		~~- 'smilId': $node.attr('id'),~~
291		~~- 'indexOrder' : $clipTrackSet.children().length~~
	294	+ 'smilId': $node.attr('id'),
292	295	})
293		~~- .addClass('timelineClip ui-corner-all')~~
	296	+ .css( 'height', this.getSequenceTrackHeight( smilSequenceTrack) - 10 )
	297	+ .addClass( 'timelineClip ui-corner-all' )
294	298	.loadingSpinner()
295	299	.click(function(){
296	300	//Add clip to selection
—	—	@@ -451,6 +455,7 @@
452	456	* Handle multiple selections based on what clips was just "cliked"
453	457	*/
454	458	handleMultiSelect: function( clickClip ){
	459	+ var _this = this;
455	460	var keyBindings = this.sequencer.getKeyBindings();
456	461	var $target = this.getTimelineContainer();
457	462	var smil = this.sequencer.getSmil();
—	—	@@ -508,7 +513,32 @@
509	514	});
510	515	}
511	516
512		~~- // xxx check if selected clip has changed hide tool edit interface~~
	517	+ // Update the edit Tools window
	518	+ var $selectedClips = _this.getTimelineContainer().find('.selectedClip');
	519	+ // zero clips selected
	520	+ var $toolTarget = _this.sequencer.getEditToolTarget();
	521	+
	522	+ //( on an edit screen update the edit screen per selection )
	523	+ if( $toolTarget.find( '.editToolsContainer' ).length != 0 ){
	524	+ // multiple clips selected
	525	+ if( $selectedClips.length == 0 ){
	526	+ // Update edit window to no selected clips
	527	+ $toolTarget.empty().append(
	528	+ gM( 'mwe-sequencer-no_selected_resource' ),
	529	+ $j('<div />').addClass('editToolsContainer')
	530	+ )
	531	+ } else if( $selectedClips.length > 1 ){
	532	+ $toolTarget.empty().append(
	533	+ gM( 'mwe-sequencer-error_edit_multiple' ),
	534	+ $j('<div />').addClass('editToolsContainer')
	535	+ )
	536	+ } else {
	537	+ // A single clip is selected edit that clip
	538	+ _this.editClip( clickClip );
	539	+ }
	540	+ // Register the edit tools update for undo
	541	+ _this.sequencer.getActionsEdit().registerEdit();
	542	+ }
513	543	},
514	544
515	545	/**
—	—	@@ -534,6 +564,12 @@
535	565	var _this = this;
536	566	var smil = this.sequencer.getSmil();
537	567
	568	+ var clipButtonCss = {
	569	+ 'position' : 'absolute',
	570	+ 'bottom' : '2px',
	571	+ 'padding' : '2px',
	572	+ 'cursor' : 'pointer'
	573	+ };
538	574
539	575	var $timelineClip = $j( '#' + _this.getTimelineClipId( $node ) );
540	576	// Add Thumb target and remove loader
—	—	@@ -544,12 +580,9 @@
545	581
546	582	// Edit clip button:
547	583	$j('<div />')
548		~~- .css({~~
549		~~- 'position' : 'absolute',~~
550		~~- 'right' : '32px',~~
551		~~- 'bottom' : '5px',~~
552		~~- 'padding' : '2px',~~
553		~~- 'cursor' : 'pointer'~~
	584	+ .css( clipButtonCss )
	585	+ .css({
	586	+ 'right' : '32px'
554	587	})
555	588	.addClass( 'clipEditLink ui-state-default ui-corner-all' )
556	589	.append(
—	—	@@ -564,12 +597,9 @@
565	598
566	599	// Remove clip button:
567	600	$j('<div />')
568		~~- .css({~~
569		~~- 'position' : 'absolute',~~
570		~~- 'right' : '5px',~~
571		~~- 'bottom' : '5px',~~
572		~~- 'padding' : '2px',~~
573		~~- 'cursor' : 'pointer'~~
	601	+ .css( clipButtonCss )
	602	+ .css({
	603	+ 'right' : '5px'
574	604	})
575	605	.addClass( 'clipRemoveLink ui-state-default ui-corner-all' )
576	606	.append(
—	—	@@ -580,7 +610,7 @@
581	611	.buttonHover()
582	612	.click( function(){
583	613	// Remove the associated clip:
584		~~- _this.getTimelineContainer().removeClass( 'selectedClip' );~~
	614	+ _this.getTimelineContainer().find('.selectedClip').removeClass( 'selectedClip' );
585	615	$timelineClip.addClass( 'selectedClip' );
586	616	_this.removeSelectedClips();
587	617	})
—	—	@@ -624,6 +654,7 @@
625	655	}
626	656	}, 5000);
627	657	}
	658	+
628	659	// Buffer the asset then render it into the layout target:
629	660	smil.getBuffer().bufferedSeek( $node, relativeTime, function(){
630	661	// Add the seek, add to canvas and draw thumb request
—	—	@@ -653,19 +684,17 @@
654	685	$j('<span />').addClass( 'ui-icon ui-icon-volume-on'),
655	686	$j('<span />').text( gM( 'mwe-sequencer-audio-track' ) )
656	687	)
657		~~- $trackNameContainer.css({~~
658		~~- 'height' : mw.getConfig( 'Sequencer.TimelineColapsedTrackSize')~~
659		~~- });~~
660	688	} else {
661	689	// for now default to "video" tracktype
662	690	$trackNameTitle.append(
663	691	$j('<span />').addClass( 'ui-icon ui-icon-video'),
664	692	$j('<span />').text( gM( 'mwe-sequencer-video-track' ) )
665	693	)
666		~~- $trackNameContainer.css({~~
667		~~- 'height' : mw.getConfig( 'Sequencer.TimelineTrackHeight' )~~
668		~~- });~~
669	694	}
	695	+ // Set track name height
	696	+ $trackNameContainer.css({
	697	+ 'height' : this.getSequenceTrackHeight( smilSequenceTrack )
	698	+ });
670	699
671	700	// Add the track title as a title attribute
672	701	if ( $j( smilSequenceTrack ).attr('title') ){
Index: branches/MwEmbedStandAlone/libraries/jquery/jquery-1.4.2.js
—	—	@@ -1820,7 +1820,7 @@
1821	1821
1822	1822	// Only trigger if we've ever bound an event for it
1823	1823	if ( jQuery.event.global[ type ] ) {
1824		~~- jQuery.each( jQuery.cache, function() {~~
	1824	+ jQuery.each( jQuery.cache, function() {
1825	1825	if ( this.events && this.events[type] ) {
1826	1826	jQuery.event.trigger( event, data, this.handle.elem );
1827	1827	}

Status & tagging log

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