| Index: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilBody.js |
| — | — | @@ -88,7 +88,7 @@ |
| 89 | 89 | |
| 90 | 90 | /** |
| 91 | 91 | * getElementsForTimeRecurse |
| 92 | | - * @param {Object} $node NOde to recursively search for elements in the given time range |
| | 92 | + * @param {Object} $node Node to recursively search for elements in the given time range |
| 93 | 93 | */ |
| 94 | 94 | getElementsForTimeRecurse: function( $node, time, startOffset){ |
| 95 | 95 | // Setup local pointers: |
| — | — | @@ -102,13 +102,13 @@ |
| 103 | 103 | startOffset = 0; |
| 104 | 104 | } |
| 105 | 105 | |
| 106 | | - mw.log( "getElementsForTimeRecurse::" + |
| | 106 | + /*mw.log( "getElementsForTimeRecurse::" + |
| 107 | 107 | ' time: ' + time + |
| 108 | 108 | ' nodeName: ' + $j( $node ).get(0).nodeName + |
| 109 | 109 | ' nodeType: ' + nodeType + |
| 110 | 110 | ' nodeDur: ' + nodeDuration + |
| 111 | 111 | ' offset: ' + startOffset |
| 112 | | - ); |
| | 112 | + );*/ |
| 113 | 113 | |
| 114 | 114 | // If startOffset is > time skip node and all its children |
| 115 | 115 | if( startOffset > time ){ |
| — | — | @@ -143,7 +143,7 @@ |
| 144 | 144 | $node.data('parentStartOffset', startOffset ); |
| 145 | 145 | // Ref type get the |
| 146 | 146 | this.elementsInRange.push( $node ); |
| 147 | | - mw.log("Add ref to elementsInRange:: " + nodeType + " length:" + this.elementsInRange.length); |
| | 147 | + //mw.log("Add ref to elementsInRange:: " + nodeType + " length:" + this.elementsInRange.length); |
| 148 | 148 | } |
| 149 | 149 | |
| 150 | 150 | // Return the node Duration for tracking startOffset |
| Index: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilLayout.js |
| — | — | @@ -43,12 +43,12 @@ |
| 44 | 44 | mw.log( "SmilLayout::getRootLayout:" ); |
| 45 | 45 | if( !this.$rootLayout ){ |
| 46 | 46 | this.$rootLayout = $j('<div />' ) |
| 47 | | - .attr('rel', 'root-layout' ) |
| 48 | | - .css( { |
| 49 | | - 'position': 'absolute', |
| 50 | | - 'width' : '100%', |
| 51 | | - 'height' : '100%' |
| 52 | | - }); |
| | 47 | + .addClass( 'smilRootLayout' ) |
| | 48 | + .css( { |
| | 49 | + 'position': 'absolute', |
| | 50 | + 'width' : '100%', |
| | 51 | + 'height' : '100%' |
| | 52 | + }); |
| 53 | 53 | |
| 54 | 54 | // Update the root layout css |
| 55 | 55 | this.$rootLayout.css( _this.getRootLayoutCss() ) |
| — | — | @@ -236,8 +236,10 @@ |
| 237 | 237 | this.$dom.find( 'region' ).each( function( inx, regionElement ) { |
| 238 | 238 | $layoutContainer.append( |
| 239 | 239 | $j( '<div />' ) |
| 240 | | - .attr('rel', 'region' ) |
| 241 | | - .css( 'position', 'absolute' ) |
| | 240 | + .addClass('smilRegion' ) |
| | 241 | + .css({ |
| | 242 | + 'position' : 'absolute' |
| | 243 | + }) |
| 242 | 244 | // Transform the smil attributes into html attributes |
| 243 | 245 | .attr( _this.transformSmilAttributes( regionElement ) ) |
| 244 | 246 | // Transform the css attributes into percentages |
| Index: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilAnimate.js |
| — | — | @@ -94,9 +94,9 @@ |
| 95 | 95 | mw.log( "b:" + begin +" < " + animateTime + " && b+d: " + ( begin + duration ) + " > " + animateTime ); |
| 96 | 96 | |
| 97 | 97 | // Check if the animate element is in range |
| 98 | | - var cssTransform = {}; |
| 99 | | - if( begin < animateTime && ( begin + duration ) > animateTime ) { |
| 100 | | - // Get the tranform type: |
| | 98 | + var cssTransform = {}; |
| | 99 | + if( begin <= animateTime && ( begin + duration ) >= animateTime ) { |
| | 100 | + // Get the transform type: |
| 101 | 101 | switch( $j( animateElement ).attr('attributeName') ){ |
| 102 | 102 | case 'panZoom': |
| 103 | 103 | // Get the pan zoom css for "this" time |
| — | — | @@ -129,12 +129,12 @@ |
| 130 | 130 | // Get target panZoom for given animateTime |
| 131 | 131 | var animatePoints = $j( animateElement ).attr('values').split( ';' ); |
| 132 | 132 | |
| 133 | | - // Get the target intepreted value |
| 134 | | - var targetValue = this.getInterpetedPointsValue( animatePoints, relativeAnimationTime, duration ); |
| | 133 | + // Get the target interpreted value |
| | 134 | + var targetValue = this.getInterpolatePointsValue( animatePoints, relativeAnimationTime, duration ); |
| 135 | 135 | |
| 136 | 136 | // Let Top Width Height |
| 137 | 137 | // translate values into % values |
| 138 | | - // NOTE this is depenent on the media being "loaded" and having natural width and height |
| | 138 | + // NOTE this is dependent on the media being "loaded" and having natural width and height |
| 139 | 139 | var namedValueOrder = ['left', 'top', 'width', 'height' ]; |
| 140 | 140 | var htmlAsset = $j( '#' + this.smil.getAssetId( smilImgElement ) ).get(0); |
| 141 | 141 | |
| — | — | @@ -157,8 +157,7 @@ |
| 158 | 158 | } |
| 159 | 159 | |
| 160 | 160 | // Now we have "hard" layout info try and render it. |
| 161 | | - this.updateElementLayout( smilImgElement, percentValues ); |
| 162 | | - debugger; |
| | 161 | + this.updateElementLayout( smilImgElement, percentValues ); |
| 163 | 162 | |
| 164 | 163 | // Now set the target value |
| 165 | 164 | |
| — | — | @@ -171,9 +170,9 @@ |
| 172 | 171 | "scale mode"? |
| 173 | 172 | |
| 174 | 173 | fit: |
| 175 | | - "width or height dominiate"? |
| | 174 | + "width or height dominate"? |
| 176 | 175 | |
| 177 | | - width X percetnage "virtualPixles" |
| | 176 | + width X percentage "virtualPixles" |
| 178 | 177 | height relative to width |
| 179 | 178 | |
| 180 | 179 | layout: |
| — | — | @@ -181,25 +180,35 @@ |
| 182 | 181 | */ |
| 183 | 182 | }, |
| 184 | 183 | |
| 185 | | - // xxx need to refactor |
| 186 | | - updateElementLayout: function( smilEmelent, percentValues ){ |
| 187 | | - // get a pointer to the hmtl target: |
| 188 | | - var $target = $j( '#' + this.smil.getAssetId( smilEmelent )); |
| | 184 | + // xxx need to refactor move to "smilLayout" |
| | 185 | + updateElementLayout: function( smilElement, percentValues ){ |
| 189 | 186 | |
| 190 | | - // get the scale via width ( need to think about this might need to support either ) |
| 191 | | - // width is 20% of orginal means we have to scale up 1/ .2 |
| 192 | | - |
| 193 | | - |
| | 187 | + mw.log("updateElementLayout::" + percentValues.top + ' ' + percentValues.left + ' ' + percentValues.width + ' ' + percentValues.height ); |
| | 188 | + // get a pointer to the html target: |
| | 189 | + var $target = $j( '#' + this.smil.getAssetId( smilElement )); |
| | 190 | + |
| | 191 | + var htmlAsset = $j( '#' + this.smil.getAssetId( smilElement ) ).get(0); |
| | 192 | + |
| | 193 | + // find if we are height or width bound |
| | 194 | + |
| | 195 | + // Setup target height width based target region size |
| | 196 | + var fullWidth = $target.parents('.smilRegion').width() ; |
| | 197 | + var fullHeight = $target.parents('.smilRegion').height() ; |
| | 198 | + var targetWidth = fullWidth; |
| | 199 | + var targetHeight = targetWidth * ( |
| | 200 | + ( percentValues['height'] * htmlAsset.naturalHeight ) |
| | 201 | + / |
| | 202 | + ( percentValues['width'] * htmlAsset.naturalWidth ) |
| | 203 | + ) |
| | 204 | + // Check if it exceeds the height constraint: |
| | 205 | + var sourceScale = ( targetHeight < fullHeight ) |
| | 206 | + ? (1 / percentValues['width'] ) |
| | 207 | + : (1 / percentValues['height'] ) |
| | 208 | + |
| | 209 | + |
| 194 | 210 | // Wrap the target and absolute the image layout ( if not already ) |
| 195 | 211 | if( $target.parent('.refTransformWrap').length === 0 ){ |
| 196 | | - $target |
| 197 | | - .css({ |
| 198 | | - 'position' : 'abolute', |
| 199 | | - 'width' : (1 / percentValues['width'])*100 + '%', |
| 200 | | - 'height' : (1 / percentValues['height'])*100 + '%', |
| 201 | | - 'top' : (-1 * percentValues['top'])*100 + '%', |
| 202 | | - 'left' : (-1 * percentValues['left'])*100 + '%', |
| 203 | | - }) |
| | 212 | + $target |
| 204 | 213 | .wrap( |
| 205 | 214 | $j( '<div />' ) |
| 206 | 215 | .css( { |
| — | — | @@ -210,29 +219,45 @@ |
| 211 | 220 | } ) |
| 212 | 221 | .addClass('refTransformWrap') |
| 213 | 222 | ) |
| 214 | | - } |
| 215 | | - debugger; |
| | 223 | + } |
| | 224 | + // run the css transform |
| | 225 | + $target.css({ |
| | 226 | + 'position' : 'absolute', |
| | 227 | + 'width' : sourceScale *100 + '%', |
| | 228 | + 'height': sourceScale *100 + '%', |
| | 229 | + 'top' : (-1 * percentValues['top'])*100 + '%', |
| | 230 | + 'left' : (-1 * percentValues['left'])*100 + '%', |
| | 231 | + }) |
| | 232 | + |
| 216 | 233 | // set up the offsets for the percentage wrap. |
| 217 | 234 | |
| 218 | 235 | // scale the |
| 219 | 236 | }, |
| 220 | 237 | |
| 221 | 238 | /** |
| 222 | | - * getInterpetedPointsValue |
| | 239 | + * getInterpolatePointsValue |
| | 240 | + * @param animatePoints Set of points to be interpolated |
| 223 | 241 | */ |
| 224 | | - getInterpetedPointsValue: function( animatePoints, relativeAnimationTime, duration){ |
| | 242 | + getInterpolatePointsValue: function( animatePoints, relativeAnimationTime, duration ){ |
| 225 | 243 | // For now only support "linear" transforms |
| 226 | 244 | // What two points are we animating between: |
| 227 | 245 | var timeInx = ( relativeAnimationTime / duration ) * animatePoints.length ; |
| 228 | | - var startPointSet = animatePoints[ Math.floor( timeInx ) -1 ].split( ',' ); |
| 229 | | - var endPointSet = animatePoints[ Math.ceil( timeInx) - 1 ].split( ',' ); |
| | 246 | + // if timeInx is zero just return the first point: |
| | 247 | + if( timeInx == 0 ){ |
| | 248 | + return animatePoints[0].split(','); |
| | 249 | + } |
| | 250 | + // make sure we are in bounds: |
| | 251 | + var startInx = ( Math.floor( timeInx ) -1 ); |
| | 252 | + startInx = ( startInx < 0 ) ? 0 : startInx; |
| | 253 | + var startPointSet = animatePoints[ startInx ].split( ',' ); |
| | 254 | + var endPointSet = animatePoints[ Math.ceil( timeInx) -1 ].split( ',' ); |
| 230 | 255 | |
| 231 | 256 | var interptPercent = ( relativeAnimationTime / duration ) / ( animatePoints.length -1 ); |
| 232 | 257 | // Interpolate between start and end points to get target "value" |
| 233 | 258 | var targetValue = []; |
| 234 | 259 | for( var i = 0 ; i < startPointSet.length ; i++ ){ |
| 235 | 260 | targetValue[ i ] = parseFloat( startPointSet[i] ) + ( parseFloat( endPointSet[i] ) - parseFloat( startPointSet[i] ) ) * interptPercent; |
| 236 | | - // Retain percent messurment |
| | 261 | + // Retain percent measurement |
| 237 | 262 | targetValue[ i ] += ( startPointSet[i].indexOf('%') != -1 ) ? '%' : ''; |
| 238 | 263 | } |
| 239 | 264 | return targetValue; |
| Index: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.EmbedPlayerSmil.js |
| — | — | @@ -46,14 +46,15 @@ |
| 47 | 47 | mw.log('EmbedPlayerSmil::setCurrentTime: ' + time ); |
| 48 | 48 | // Set "loading" spinner here) |
| 49 | 49 | $j( this ).append( |
| 50 | | - $j( '<div />') |
| | 50 | + $j( '<div />') |
| 51 | 51 | .attr('id', 'loadingSpinner_' + this.id ) |
| 52 | 52 | .loadingSpinner() |
| 53 | 53 | ); |
| 54 | 54 | var _this = this; |
| 55 | 55 | this.getSmil( function( smil ){ |
| 56 | 56 | smil.renderTime( time, function(){ |
| 57 | | - $j('#loadingSpinner_' + _this.id ).hide(); |
| | 57 | + mw.log("renderTime callback"); |
| | 58 | + $j('#loadingSpinner_' + _this.id ).remove(); |
| 58 | 59 | callback(); |
| 59 | 60 | } ); |
| 60 | 61 | }); |
| — | — | @@ -82,9 +83,51 @@ |
| 83 | 84 | }, |
| 84 | 85 | |
| 85 | 86 | play: function(){ |
| 86 | | - mw.log("EmbedPlayerSmil::play (not yet supported)" ); |
| | 87 | + mw.log(" EmbedPlayerSmil::play " ); |
| | 88 | + // call the parent |
| | 89 | + this.parent_play(); |
| | 90 | + |
| | 91 | + this.clockStartTime = new Date().getTime(); |
| | 92 | + |
| | 93 | + |
| | 94 | + this.getSmil( function( smil ){ |
| | 95 | + this.smil = smil; |
| | 96 | + }) |
| | 97 | + // Start up monitor: |
| | 98 | + this.monitor(); |
| 87 | 99 | }, |
| | 100 | + |
| 88 | 101 | /** |
| | 102 | + * Preserves the pause time across for timed playback |
| | 103 | + */ |
| | 104 | + pause:function() { |
| | 105 | + mw.log( 'EmbedPlayerSmil::pause at time' + this.currentTime); |
| | 106 | + var ct = new Date(); |
| | 107 | + this.pauseTime = this.currentTime; |
| | 108 | + mw.log( 'pause time: ' + this.pauseTime ); |
| | 109 | + }, |
| | 110 | + |
| | 111 | + /** |
| | 112 | + * Get the embed player time |
| | 113 | + */ |
| | 114 | + getPlayerElementTime: function() { |
| | 115 | + mw.log('html:monitor: '+ this.currentTime + ' ct:' + new Date().getTime() + ' - ' + this.clockStartTime); |
| | 116 | + this.currentTime = ( ( new Date().getTime() - this.clockStartTime ) / 1000 ) + this.pauseTime; |
| | 117 | + return this.currentTime; |
| | 118 | + }, |
| | 119 | + |
| | 120 | + /** |
| | 121 | + * Monitor function render a given time |
| | 122 | + */ |
| | 123 | + monitor: function(){ |
| | 124 | + mw.log("time::" + this.getPlayerElementTime()); |
| | 125 | + /*this.smil.renderTime( , function(){ |
| | 126 | + |
| | 127 | + });*/ |
| | 128 | + this.parent_monitor(); |
| | 129 | + }, |
| | 130 | + |
| | 131 | + /** |
| 89 | 132 | * Get the smil object. If the smil object does not exist create one with the source url: |
| 90 | 133 | * @param callback |
| 91 | 134 | */ |