http://www.mediawiki.org/wiki/Special:Code/MediaWiki/68280
Revision: 68280
Author: dale
Date: 2010-06-19 18:49:03 +0000 (Sat, 19 Jun 2010)
Log Message:
-----------
stubs for improved animation transforms for smilPlayer
Modified Paths:
--------------
branches/MwEmbedStandAlone/modules/SmilPlayer/loader.js
branches/MwEmbedStandAlone/modules/SmilPlayer/mw.EmbedPlayerSmil.js
branches/MwEmbedStandAlone/modules/SmilPlayer/mw.Smil.js
branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilBody.js
branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilBuffer.js
branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilLayout.js
branches/MwEmbedStandAlone/mwEmbed.js
branches/MwEmbedStandAlone/tests/testLang.html
Added Paths:
-----------
branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilAnimate.js
Removed Paths:
-------------
branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilTiming.js
Modified: branches/MwEmbedStandAlone/modules/SmilPlayer/loader.js
===================================================================
--- branches/MwEmbedStandAlone/modules/SmilPlayer/loader.js 2010-06-19
18:47:34 UTC (rev 68279)
+++ branches/MwEmbedStandAlone/modules/SmilPlayer/loader.js 2010-06-19
18:49:03 UTC (rev 68280)
@@ -9,6 +9,7 @@
"mw.SmilLayout" : "mw.SmilLayout.js",
"mw.SmilBody" : "mw.SmilBody.js",
"mw.SmilBuffer" : "mw.SmilBuffer.js",
+ "mw.SmilAnimate" : "mw.SmilAnimate.js",
"mw.EmbedPlayerSmil" : "mw.EmbedPlayerSmil.js"
} );
@@ -22,6 +23,7 @@
"mw.SmilLayout",
"mw.SmilBody",
"mw.SmilBuffer",
+ "mw.SmilAnimate",
"mw.EmbedPlayerSmil"
];
Modified: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.EmbedPlayerSmil.js
===================================================================
--- branches/MwEmbedStandAlone/modules/SmilPlayer/mw.EmbedPlayerSmil.js
2010-06-19 18:47:34 UTC (rev 68279)
+++ branches/MwEmbedStandAlone/modules/SmilPlayer/mw.EmbedPlayerSmil.js
2010-06-19 18:49:03 UTC (rev 68280)
@@ -31,17 +31,32 @@
doEmbedPlayer: function() {
var _this = this;
mw.log("EmbedPlayerSmil::doEmbedPlayer: " + this.id ) ;
-
- // Set "loading" spinner here)
-
- // Update the embed player by rending time zero:
- this.getSmil( function( smil ){
- mw.log("EmbedPlayer:: smil loaded " );
- // Render the first frame
- smil.renderTime( 0, function(){
- mw.log("EmbedPlayerSmil::doEmbedPlayer:: render
callback ready " );
+
+ this.setCurrentTime( 0, function(){
+ mw.log("EmbedPlayerSmil::doEmbedPlayer:: render
callback ready " );
+ });
+ },
+
+ /**
+ * Seeks to the requested time and issues a callback when ready /
displayed
+ * @param {float} time Time in seconds to seek to
+ * @param {function} callback Function to be called once currentTime is
loaded and displayed
+ */
+ setCurrentTime: function( time, callback ) {
+ mw.log('EmbedPlayerSmil::setCurrentTime: ' + time );
+ // Set "loading" spinner here)
+ $j( this ).append(
+ $j( '<div />')
+ .attr('id', 'loadingSpinner_' + this.id )
+ .loadingSpinner()
+ );
+ var _this = this;
+ this.getSmil( function( smil ){
+ smil.renderTime( time, function(){
+ $j('#loadingSpinner_' + _this.id ).hide();
+ callback();
} );
- });
+ });
},
/**
@@ -63,8 +78,7 @@
}
this.$renderTarget = $j('#smilCanvas_' + this.id );
}
- return this.$renderTarget;
-
+ return this.$renderTarget;
},
play: function(){
@@ -118,14 +132,5 @@
}
// If no thumb could be found use the first frame of smil:
this.doEmbedPlayer();
- },
-
- /**
- * Seeks to the requested time and issues a callback when ready /
displayed
- * @param {float} time Time in seconds to seek to
- * @param {function} callback Function to be called once currentTime is
loaded and displayed
- */
- setCurrentTime : function( time, callback ) {
-
}
}
Modified: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.Smil.js
===================================================================
--- branches/MwEmbedStandAlone/modules/SmilPlayer/mw.Smil.js 2010-06-19
18:47:34 UTC (rev 68279)
+++ branches/MwEmbedStandAlone/modules/SmilPlayer/mw.Smil.js 2010-06-19
18:49:03 UTC (rev 68280)
@@ -7,10 +7,10 @@
*
* Sequence player wraps smil into the video tag
*
- * It lets you controls smil timeline like you would an html5 video tag element
+ * Provides an html5 video tag like api to a smil document.
*
- * It supports frame by frame rendering of "smil"
- * Its supports basic "drop frame" live playback of "smil"
+ * Supports frame by frame rendering of "smil"
+ * Supports "drop frame" realtime playback of "smil"
*
* Extends the "embedPlayer" and represents the playlist as a single video
stream
*
@@ -28,9 +28,12 @@
// Stores the mw.SmilBody object
body : null,
- // Handles buffer information display elements
+ // Stores the mw.SmilBuffer object
buffer: null,
+ // Stores the mw.SmilAnimate object
+ animate: null,
+
// Stores the smil document for this object ( for relative image paths
)
smilUrl: null,
@@ -39,7 +42,7 @@
/**
* Constructor
- * @param {Object} embedPlayer Refrence to the embedPlayer driving the
smil object
+ * @param {Object} embedPlayer Reference to the embedPlayer driving the
smil object
*/
init: function( embedPlayer ) {
mw.log(" Smil:: init with player: " + embedPlayer.id );
@@ -98,25 +101,12 @@
return ;
},
- /**
- * Get the smil html at a given time
- * @param {object} size The target size width, height
- * @param {float} time The target time to be displayed
- * @param {callback} callback Function to call once layout is ready
- * ( all images and videos are "ready to play" )
- */
- getHtmlDOM: function ( size, time, callback ){
- mw.log("getHtmlDOM:: " + size.width + ' time: ' + time);
-
- // Have the layout object return the layout HTML DOM
- return this.getLayout().getHtmlDOM( size, time );
- },
-
+
renderTime: function( time, callback ) {
// Get the render target:
var $renderTarget = this.embedPlayer.getRenderTarget();
- // Add the core layout ( not time based )
+ // Add the core layout ( not time based )
$renderTarget.append(
this.getLayout().getHtml()
)
@@ -125,9 +115,12 @@
this.getBody().renderTime( time );
// Wait until buffer is ready
- this.checkBufferTimeReady( time, callback );
+ this.getBuffer().timeIsBuffered( time, callback );
},
+ /**
+ * Get the smil buffer object
+ */
getBuffer: function(){
if( ! this.buffer ) {
this.buffer = new mw.SmilBuffer( this ) ;
@@ -135,11 +128,14 @@
return this.buffer;
},
- /**
- * Function called continuously to keep sync smil "in sync"
- */
- syncWithTime: function( time ){
- mw.log( 'smil sync: ' + time);
+ /**
+ * Get the animate object
+ */
+ getAnimate: function(){
+ if( ! this.animate ){
+ this.animate = new mw.SmilAnimate( this );
+ }
+ return this.animate;
},
/**
@@ -162,6 +158,16 @@
return this.body;
},
+ /**
+ * Function called continuously to keep sync smil "in sync"
+ * Checks buffer states...
+ */
+ syncWithTime: function( time ){
+ /* .. not yet implementd ... */
+ mw.log( 'smil sync: ' + time);
+ },
+
+
/**
* Get the duration form the
*/
@@ -175,9 +181,21 @@
this.duration = this.getBody().getDuration();
}
return this.duration;
- },
-
+ },
/**
+ * maps a smil element id to a html safe id
+ * as a decendent subname of the embedPlayer parent
+ *
+ * @param {Object} smilElement Element to get id for
+ */
+ getAssetId: function( smilElement ){
+ if(! $j( smilElement ).attr('id') ) {
+ mw.log("Error: getAssetId smilElement missing id " ) ;
+ return false;
+ }
+ return this.embedPlayer.id + '_' + $j( smilElement ).attr('id');
+ },
+ /**
* Get an absolute path to asset based on the smil URL
* @param {string} assetPath Path to asset to be transformed into url
*/
@@ -185,70 +203,71 @@
// Context url is the smil document url:
var contextUrl = mw.absoluteUrl( this.smilUrl );
return mw.absoluteUrl( assetPath, contextUrl );
- }
-}
-/**
- * Some Smil Utility functions
- */
-
-/**
- * Parse smil time function
- * http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-ClockValueSyntax
- *
- * Smil time has the following structure:
- *
- * Clock-value ::= ( Full-clock-value | Partial-clock-value |
Timecount-value )
- * Full-clock-value ::= Hours ":" Minutes ":" Seconds ("." Fraction)?
- * Partial-clock-value ::= Minutes ":" Seconds ("." Fraction)?
- * Timecount-value ::= Timecount ("." Fraction)? (Metric)?
- * Metric ::= "h" | "min" | "s" | "ms"
- * Hours ::= DIGIT+ // any positive number
- * Minutes ::= 2DIGIT // range from 00 to 59
- * Seconds ::= 2DIGIT // range from 00 to 59
- * Fraction ::= DIGIT+
- * Timecount ::= DIGIT+
- * 2DIGIT ::= DIGIT DIGIT
- * DIGIT ::= [0-9]
- *
- * @param {mixed} timeValue time value of smil structure
- * @ return {float} Seconds from time value
- */
-mw.SmilParseTime = function( timeValue ){
- // If timeValue is already a number return seconds:
- if( ! isNaN( timeValue ) ){
- return parseFloat( timeValue );
- }
- // Trim whitespace
- timeValue = $j.trim( timeValue );
-
- // First check for hh:mm:ss time:
- if ( timeValue.split( ':' ).length == 3 || timeValue.split( ':'
).length == 2 ) {
- return mw.npt2seconds( timeValue );
- }
+ },
+ /**
+ * Some Smil Utility functions
+ */
- var timeFactor = null
- // Check for metric hours
- if( timeValue.substr( -1 ) == 'h' ){
- timeFactor = 3600 ;
- }
- // Min metric
- if( timeValue.substr( -3 ) == 'min' ){
- timeFactor = 60;
- }
- // Seconds
- if( timeValue.substr( -1 ) == 's'){
- timeFactor = 1;
- }
- // Millaseconds
- if( timeValue.substr( -2 ) == 'ms'){
- timeFactor = .001;
- }
+ /**
+ * Parse smil time function
+ * http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-ClockValueSyntax
+ *
+ * Smil time has the following structure:
+ *
+ * Clock-value ::= ( Full-clock-value | Partial-clock-value |
Timecount-value )
+ * Full-clock-value ::= Hours ":" Minutes ":" Seconds ("." Fraction)?
+ * Partial-clock-value ::= Minutes ":" Seconds ("." Fraction)?
+ * Timecount-value ::= Timecount ("." Fraction)? (Metric)?
+ * Metric ::= "h" | "min" | "s" | "ms"
+ * Hours ::= DIGIT+ // any positive number
+ * Minutes ::= 2DIGIT // range from 00 to 59
+ * Seconds ::= 2DIGIT // range from 00 to 59
+ * Fraction ::= DIGIT+
+ * Timecount ::= DIGIT+
+ * 2DIGIT ::= DIGIT DIGIT
+ * DIGIT ::= [0-9]
+ *
+ * @param {mixed} timeValue time value of smil structure
+ * @ return {float} Seconds from time value
+ */
+ parseTime : function( timeValue ){
+ // If timeValue is already a number return seconds:
+ if( ! isNaN( timeValue ) ){
+ return parseFloat( timeValue );
+ }
+ // Trim whitespace
+ timeValue = $j.trim( timeValue );
- if( timeFactor){
- return parseFloat( parseFloat( timeValue ) * timeFactor );
+ // First check for hh:mm:ss time:
+ if ( timeValue.split( ':' ).length == 3 || timeValue.split(
':' ).length == 2 ) {
+ return mw.npt2seconds( timeValue );
+ }
+
+ var timeFactor = null
+ // Check for metric hours
+ if( timeValue.substr( -1 ) == 'h' ){
+ timeFactor = 3600 ;
+ }
+ // Min metric
+ if( timeValue.substr( -3 ) == 'min' ){
+ timeFactor = 60;
+ }
+ // Seconds
+ if( timeValue.substr( -1 ) == 's'){
+ timeFactor = 1;
+ }
+ // Millaseconds
+ if( timeValue.substr( -2 ) == 'ms'){
+ timeFactor = .001;
+ }
+
+ if( timeFactor){
+ return parseFloat( parseFloat( timeValue ) * timeFactor
);
+ }
+ mw.log("Error could not parse time: " + timeValue);
}
- mw.log("Error could not parse time: " + timeValue);
}
+
\ No newline at end of file
Copied: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilAnimate.js (from
rev 68179, branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilTiming.js)
===================================================================
--- branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilAnimate.js
(rev 0)
+++ branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilAnimate.js
2010-06-19 18:49:03 UTC (rev 68280)
@@ -0,0 +1,241 @@
+
+/**
+* Handles the smil animate class
+*/
+mw.SmilAnimate = function( smilObject ){
+ return this.init( smilObject );
+}
+mw.SmilAnimate.prototype = {
+
+ // Constructor:
+ init: function( smilObject ){
+ this.smil = smilObject;
+ },
+
+ /**
+ * Transform a smil element for a requested time.
+ *
+ * @param {Element} smilElement Element to be transformed
+ * @param {float} animateTime The relative time to be transfored.
+ */
+ transformElement: function( smilElement, animateTime ) {
+ var nodeName = $j( smilElement ).get(0).nodeName ;
+ mw.log("transformForTime: " + nodeName );
+ switch( nodeName.toLowerCase() ){
+ case 'smiltext':
+ return this.transformTextForTime( smilElement,
animateTime);
+ break;
+ case 'img':
+ return this.transformImageForTime( smilElement,
animateTime);
+ break;
+ }
+ },
+
+ transformTextForTime: function( textElement, animateTime ) {
+ if( $j( textElement ).children().length == 0 ){
+ // no text transform children
+ return ;
+ }
+
+ // xxx Note: we could have text transforms in the future:
+ var textCss = this.smil.getLayout().transformSmilCss(
textElement );
+
+ var bucketText = '';
+ var textBuckets = [];
+ var clearInx = 0;
+ var el = $j( textElement ).get(0);
+ for ( var i=0; i < el.childNodes.length; i++ ) {
+ var node = el.childNodes[i];
+ // Check for text Node type:
+ if( node.nodeType == 3 ) {
+ bucketText += node.nodeValue;
+ } else if( node.nodeName == 'clear'){
+ var clearTime = this.smil.parseTime( $j( node
).attr( 'begin') );
+ // append bucket
+ textBuckets.push( {
+ 'text' : bucketText,
+ 'clearTime' : clearTime
+ } );
+ // Clear the bucket text collection
+ bucketText ='';
+ }
+ }
+
+ var textValue ='';
+ // Get the text node in range given time:
+ for( var i =0; i < textBuckets.length ; i++){
+ var bucket = textBuckets[i];
+ if( animateTime < bucket.clearTime ){
+ textValue = bucket.text;
+ break;
+ }
+ }
+ // Update the text value target
+ // xxx need to profile update vs check value
+ $j( '#' + this.smil.getAssetId( textElement ) )
+ .html(
+ $j('<span />')
+ // Add the text value
+ .text( textValue )
+ .css( textCss )
+ )
+ },
+
+ transformImageForTime: function( smilImgElement, animateTime ) {
+ var _this = this;
+ if( $j( smilImgElement ).children().length == 0 ){
+ // no image transform children
+ return ;
+ }
+ // Get transform elements in range
+ $j( smilImgElement ).find( 'animate' ).each( function( inx,
animateElement ){
+ var begin = _this.smil.parseTime( $j( animateElement
).attr( 'begin') );
+ var duration = _this.smil.parseTime( $j(
animateElement ).attr( 'dur') );
+ mw.log( "b:" + begin +" < " + animateTime + " && b+d: "
+ ( begin + duration ) + " > " + animateTime );
+
+ // Check if the animate element is in range
+ var cssTransform = {};
+ if( begin < animateTime && ( begin + duration ) >
animateTime ) {
+ // Get the tranform type:
+ switch( $j( animateElement
).attr('attributeName') ){
+ case 'panZoom':
+ // Get the pan zoom css for
"this" time
+ _this.transformPanZoom (
smilImgElement, animateElement, animateTime );
+ break;
+ default:
+ mw.log("Error unrecognized
Annimation attributName: " +
+ $j( animateElement
).attr('attributeName') );
+
+ }
+ mw.log("b:transformImageForTime: " + $j(
animateElement ).attr( 'values' ) );
+ //$j( smilImgElement ).css( cssTransform );
+ }
+
+ });
+ },
+ /**
+ * get the css layout transforms for a panzoom transform type
+ *
+ * http://www.w3.org/TR/SMIL/smil-extended-media-object.html#q32
+ *
+ */
+ transformPanZoom: function( smilImgElement, animateElement, animateTime
){
+ var begin = this.smil.parseTime( $j( animateElement ).attr(
'begin') );
+ var duration = this.smil.parseTime( $j( animateElement ).attr(
'dur') );
+
+ // internal offset
+ var relativeAnimationTime = animateTime - begin;
+
+ // Get target panZoom for given animateTime
+ var animatePoints = $j( animateElement ).attr('values').split(
';' );
+
+ // Get the target intepreted value
+ var targetValue = this.getInterpetedPointsValue( animatePoints,
relativeAnimationTime, duration );
+
+ // Let Top Width Height
+ // translate values into % values
+ // NOTE this is depenent on the media being "loaded" and having
natural width and height
+ var namedValueOrder = ['left', 'top', 'width', 'height' ];
+ var htmlAsset = $j( '#' + this.smil.getAssetId( smilImgElement
) ).get(0);
+
+ var percentValues = {};
+ for( var i =0 ;i < targetValue.length ; i++ ){
+ if( targetValue[i].indexOf('%') == -1 ){
+ switch( namedValueOrder[i] ){
+ case 'left':
+ case 'width':
+ percentValues[
namedValueOrder[i] ] = parseFloat( targetValue[i] ) / htmlAsset.naturalWidth;
+ break;
+ case 'height':
+ case 'top':
+ percentValues[
namedValueOrder[i] ] = parseFloat( targetValue[i] ) / htmlAsset.naturalHeight
+ break;
+ }
+ } else {
+ percentValues[ namedValueOrder[i] ] =
parseFloat( targetValue[i] ) / 100;
+ }
+ }
+
+ // Now we have "hard" layout info try and render it.
+ this.updateElementLayout( smilImgElement, percentValues );
+ debugger;
+
+ // Now set the target value
+
+ //~first get image scale~
+
+ // check for a "viewWindow" ( if not wrap the image in a view
window )
+
+ /*
+
+ "scale mode"?
+
+ fit:
+ "width or height dominiate"?
+
+ width X percetnage "virtualPixles"
+ height relative to width
+
+ layout:
+ viewWindow ( defined in "real" pixles.
+ */
+ },
+
+ // xxx need to refactor
+ updateElementLayout: function( smilEmelent, percentValues ){
+ // get a pointer to the hmtl target:
+ var $target = $j( '#' + this.smil.getAssetId( smilEmelent ));
+
+ // get the scale via width ( need to think about this might
need to support either )
+ // width is 20% of orginal means we have to scale up 1/ .2
+
+
+ // Wrap the target and absolute the image layout ( if not
already )
+ if( $target.parent('.refTransformWrap').length === 0 ){
+ $target
+ .css({
+ 'position' : 'abolute',
+ 'width' : (1 / percentValues['width'])*100 +
'%',
+ 'height' : (1 / percentValues['height'])*100 +
'%',
+ 'top' : (-1 * percentValues['top'])*100 + '%',
+ 'left' : (-1 * percentValues['left'])*100 + '%',
+ })
+ .wrap(
+ $j( '<div />' )
+ .css( {
+ 'position' : 'relative',
+ 'overflow' : 'hidden',
+ 'width' : '100%',
+ 'height' : '100%'
+ } )
+ .addClass('refTransformWrap')
+ )
+ }
+ debugger;
+ // set up the offsets for the percentage wrap.
+
+ // scale the
+ },
+
+ /**
+ * getInterpetedPointsValue
+ */
+ getInterpetedPointsValue: function( animatePoints,
relativeAnimationTime, duration){
+ // For now only support "linear" transforms
+ // What two points are we animating between:
+ var timeInx = ( relativeAnimationTime / duration ) *
animatePoints.length ;
+ var startPointSet = animatePoints[ Math.floor( timeInx ) -1
].split( ',' );
+ var endPointSet = animatePoints[ Math.ceil( timeInx) - 1
].split( ',' );
+
+ var interptPercent = ( relativeAnimationTime / duration ) / (
animatePoints.length -1 );
+ // Interpolate between start and end points to get target
"value"
+ var targetValue = [];
+ for( var i = 0 ; i < startPointSet.length ; i++ ){
+ targetValue[ i ] = parseFloat( startPointSet[i] ) + (
parseFloat( endPointSet[i] ) - parseFloat( startPointSet[i] ) ) *
interptPercent;
+ // Retain percent messurment
+ targetValue[ i ] += ( startPointSet[i].indexOf('%') !=
-1 ) ? '%' : '';
+ }
+ return targetValue;
+ }
+
+}
\ No newline at end of file
Property changes on:
branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilAnimate.js
___________________________________________________________________
Added: svn:mergeinfo
+
/branches/REL1_15/phase3/js2/mwEmbed/modules/SmilPlayer/mw.SmilTiming.js:51646
/branches/sqlite/js2/mwEmbed/modules/SmilPlayer/mw.SmilTiming.js:58211-58321
Added: svn:eol-style
+ native
Modified: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilBody.js
===================================================================
--- branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilBody.js
2010-06-19 18:47:34 UTC (rev 68279)
+++ branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilBody.js
2010-06-19 18:49:03 UTC (rev 68280)
@@ -55,12 +55,19 @@
renderTime: function( time ){
var _this = this;
// Get all the draw elements from the body this time:
- var drawElements = this.getElementsForTime( time );
- mw.log(" got " + drawElements.length + " drawElements" );
-
- // Render the active elements using the layout engine
- $j.each( drawElements , function(inx, smilElement ) {
- _this.smil.getLayout().drawElement( smilElement, time );
+ var elementList = this.getElementsForTime( time );
+ mw.log("SmilBody::renderTime: draw " + elementList.length + "
elementList" );
+
+ $j.each( elementList , function( inx, smilElement ) {
+ // xxx need to
+ // var relativeTime = time -
smilElement.parentTimeOffset;
+ var relativeTime = time - $j( smilElement ) .data (
'parentStartOffset' );
+
+ // Render the active elements using the layout engine
+ _this.smil.getLayout().drawElement( smilElement,
relativeTime );
+
+ // Transform the elements per animate engine
+ _this.smil.getAnimate().transformElement( smilElement,
relativeTime );
} )
},
@@ -90,6 +97,11 @@
var nodeParentType = this.getNodeSmilType( $node.parent() );
var _this = this;
+ // Set startOffset to zero if not defined.
+ if( !startOffset ) {
+ startOffset = 0;
+ }
+
mw.log( "getElementsForTimeRecurse::" +
' time: ' + time +
' nodeName: ' + $j( $node ).get(0).nodeName +
@@ -111,7 +123,7 @@
}*/
// If 'par' or 'seq' recurse to get elements for layout
- if( nodeType == 'par'|| nodeType == 'seq' ) {
+ if( nodeType == 'par'|| nodeType == 'seq' ) {
if( $node.children().length ) {
$node.children().each( function( inx, childNode
){
mw.log(" recurse:: startOffset:" +
nodeType + ' start offset:' + startOffset );
@@ -126,7 +138,9 @@
}
// If the nodeType is "ref" add to this.elementsInRange array
- if( nodeType == 'ref' || nodeType == 'smilText' ) {
+ if( nodeType == 'ref' || nodeType == 'smilText' ) {
+ // Add the parent startOffset
+ $node.data('parentStartOffset', startOffset );
// Ref type get the
this.elementsInRange.push( $node );
mw.log("Add ref to elementsInRange:: " + nodeType + "
length:" + this.elementsInRange.length);
@@ -180,8 +194,8 @@
}
// Check the explicit duration attribute:
if( $node.attr('dur') ) {
- //mw.log(" return dur: " + mw.SmilParseTime(
$node.attr('dur') ) );
- $node.data('computedDuration', mw.SmilParseTime(
$node.attr('dur') ) );
+ //mw.log(" return dur: " + mw.smil.parseTime(
$node.attr('dur') ) );
+ $node.data('computedDuration', this.smil.parseTime(
$node.attr('dur') ) );
} else {
// Else return the implictDuration ( built from its
children )
if( $node.data( 'implictDuration' ) ){
Modified: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilBuffer.js
===================================================================
--- branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilBuffer.js
2010-06-19 18:47:34 UTC (rev 68279)
+++ branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilBuffer.js
2010-06-19 18:49:03 UTC (rev 68280)
@@ -15,14 +15,15 @@
/**
* Runs a callback once the buffer time is ready.
*/
- bufferTimeReady: function( time, callback ) {
+ timeIsBuffered: function( time, callback ) {
+
// Get active body elements
var activeElements = this.smil.getBody().getElementsForTime(
time );
// Check load status per temporal offset
- // setTimeout to call self untill ready
+ // setTimeout to call self until buffer is ready
- // temp hack ( assume ready ):
+ // temp ( assume ready ):
callback();
}
}
\ No newline at end of file
Modified: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilLayout.js
===================================================================
--- branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilLayout.js
2010-06-19 18:47:34 UTC (rev 68279)
+++ branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilLayout.js
2010-06-19 18:49:03 UTC (rev 68280)
@@ -24,7 +24,7 @@
},
/**
- * get Html DOM
+ * Get Html DOM
*/
getHtml: function(){
var _this = this;
@@ -59,29 +59,29 @@
},
/**
- * drawElement smilElement
+ * RenderElement smilElement at a given time.
+ * If the element does not exist in the html dom add it.
+ * Updates a given element for the requested time
*/
drawElement: function( smilElement, time ) {
var _this = this;
var regionId = $j( smilElement ).attr( 'region');
var nodeName = $j( smilElement ).get(0).nodeName ;
- mw.log("Draw: " + nodeName + ' into ' + regionId );
+ mw.log( "SmilLayout::drawElement: " + nodeName + '.' + $j(
smilElement ).attr('id' ) + ' into ' + regionId );
var $regionTarget = this.$rootLayout.find( '#' + regionId );
+
// Check for region target in $rootLayout
if( $regionTarget.length == 0 ) {
- mw.log( "Error Could not find region:" + regionId + "
for " + nodeName);
+ mw.log( "Error in SmilLayout::renderElement, Could not
find region:" + regionId + " for " + nodeName);
return ;
}
- // Check that the element does not already exist
- if( $j( smilElement ).attr('id') && $regionTarget.find( '#' +
$j( smilElement ).attr('id') ) ){
- mw.log( "Error:: SmilLayout draw element that is
already present: " + $j( smilElement ).attr('id') );
- }
- // Append the transformed Smil to its target region
- this.$rootLayout.find( '#' + regionId ).append(
- this.getSmilElementHtml( smilElement, time)
- )
+ // Check that the element is already in the dom
+ if( $regionTarget.find( '#' + this.smil.getAssetId( smilElement
) ).length == 0 ){
+ // Append the Smil to the target region
+ $regionTarget.append( this.getSmilElementHtml(
smilElement ) )
+ }
},
/**
@@ -98,78 +98,42 @@
case 'img':
return this.getSmilImgHtml( smilElement, time);
break;
- }
+ }
mw.log( "Error: Could not find smil layout transform for
element type: " + nodeName );
return $j('<span />')
.text( 'Error: unknown type:' +
nodeName );
},
+
+
+
/**
* Updates all the active elements for a given time
* @param time the requested time to be updated.
* @param deltaTarget if a delta target is supplied we add a css
animation transform for that delta
- */
updateSmilTime: function( time, deltaTarget ){
// for every active element tranform per time request
//
},
-
- /**
- * Update SmilBuffer
- * updates the buffer percentage for the entire clip set
- * ( mw.SmilBuffer )
*/
+
/**
- * buffered callback
- * utility function to run a callback once a given buffer time
- * has been reached.
- * ( mw.SmilBuffer )
- */
-
- /**
* Get a text element per given time
* xxx we need to use "relativeTime"
*/
getSmilTextHtml: function( textElement, relativeTime ) {
- var _this = this;
- mw.log( " Get TEXT Html ");
+ var _this = this;
- // Empty initial text value
- var textValue = '';
+ // Empty initial text value
+ var textValue = '';
- // Check if we have child transforms and select the transform
that is in range
- if( $j( textElement ).children().length ){
- var bucketText = '';
- var textBuckets = [];
- var clearInx = 0;
- var el = $j( textElement ).get(0);
- for ( var i=0; i < el.childNodes.length; i++ ) {
- var node = el.childNodes[i];
- // Check for text Node type:
- if( node.nodeType == 3 ) {
- bucketText += node.nodeValue;
- } else if( node.nodeName == 'clear'){
- var clearTime = mw.SmilParseTime( $j(
node ).attr( 'begin') );
- // append bucket
- textBuckets.push( {
- 'text' : bucketText,
- 'clearTime' : clearTime
- } );
- }
- }
- // Get the text node in range given time:
- for( var i =0; i < textBuckets.length ; i++){
- var bucket = textBuckets[i];
- if( relativeTime < bucket.clearTime ){
- textValue = bucket.text;
- break;
- }
- }
- } else {
- textValue = $j( textElement ).text();
+ // If the textElement has no child node directly set the text
value
+ // ( if has child nodes, text will be selected by time in
transformTextForTime )
+ if( $j( textElement ).children().length == 0 ){
mw.log( 'Direct text value to: ' + textValue);
+ textValue = $j( textElement ).text();
}
var textCss = _this.transformSmilCss( textElement );
@@ -198,14 +162,15 @@
// Return the htmlElement
return $j('<span />')
+ .attr( 'id' , this.smil.getAssetId( textElement ) )
// Wrap in font-size percentage relative to virtual size
.css( 'font-size', ( ( this.targetWidth /
this.virtualWidth )*100 ) + '%' )
- .append(
+ .html(
$j('<span />')
// Transform smil css into html css:
.css( textCss )
// Add the text value
- .text( textValue )
+ .text( textValue )
);
},
@@ -235,6 +200,7 @@
// XXX get context of smil document for relative or absolute
paths:
return $j('<img />')
.attr( {
+ 'id' : this.smil.getAssetId( imgElement
),
'src' : this.smil.getAssetUrl( $j(
imgElement ).attr( 'src' ) )
} )
.css( {
@@ -316,6 +282,7 @@
mw.log("Error: SmilLayout, could not find root-layout element "
) ;
return {};
},
+
/**
* Translate a root layout pixel point into a percent location
Modified: branches/MwEmbedStandAlone/mwEmbed.js
===================================================================
--- branches/MwEmbedStandAlone/mwEmbed.js 2010-06-19 18:47:34 UTC (rev
68279)
+++ branches/MwEmbedStandAlone/mwEmbed.js 2010-06-19 18:49:03 UTC (rev
68280)
@@ -190,7 +190,7 @@
/**
* Add a hook system for a target object / interface
*
- * This can be used as an alternative to heavy inheritance systems.
+ * depricated you should instead use jQuery's bind and trigger
*
* @param {Object} targetObj Interface Object to add hook system to.
*/
Modified: branches/MwEmbedStandAlone/tests/testLang.html
===================================================================
--- branches/MwEmbedStandAlone/tests/testLang.html 2010-06-19 18:47:34 UTC
(rev 68279)
+++ branches/MwEmbedStandAlone/tests/testLang.html 2010-06-19 18:49:03 UTC
(rev 68280)
@@ -166,15 +166,16 @@
}
//output a spacer:
o+='<tr><td colspan="6"
height="20"> </td></tr>';
- });
+ });
// remove the spiner
- $j( '.loadingSpinner').remove();
+ debugger;
+
+ $j('.loadingSpinner').remove();
//put the output into the page:
$j('#table_out').append( o );
});
}
- }//procc lang key:
-
+ }//procc lang key:
doProcLangKey( langSet.pop() );
}
});
_______________________________________________
MediaWiki-CVS mailing list
MediaWiki-CVS@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-cvs
