r68768 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:r68767‎ | r68768 | r68769 >
Date:10:43, 30 June 2010
Author:dale
Status:deferred
Tags:
Comment:
improved transition support.
Modified paths:
  • /branches/MwEmbedStandAlone/modules/EmbedPlayer/mw.EmbedPlayerKplayer.js (modified) (history)
  • /branches/MwEmbedStandAlone/modules/SmilPlayer/loader.js (modified) (history)
  • /branches/MwEmbedStandAlone/modules/SmilPlayer/mw.EmbedPlayerSmil.js (modified) (history)
  • /branches/MwEmbedStandAlone/modules/SmilPlayer/mw.Smil.js (modified) (history)
  • /branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilAnimate.js (modified) (history)
  • /branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilBody.js (modified) (history)
  • /branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilLayout.js (modified) (history)
  • /branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilTransitions.js (modified) (history)
  • /branches/MwEmbedStandAlone/modules/SmilPlayer/mw.style.SmilLayout.css (added) (history)
  • /branches/MwEmbedStandAlone/modules/SmilPlayer/tests/VideoTransition.html (modified) (history)

Diff [purge]

Index: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilBody.js
@@ -80,6 +80,9 @@
8181 function( smilElement ){
8282 // Hide the element in the layout
8383 _this.smil.getLayout().hideElement( smilElement );
 84+
 85+ // Expire transitions if needed
 86+ _this.smil.getTransitions().elementOutOfRange( smilElement, time );
8487 }
8588 );
8689 },
Index: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilLayout.js
@@ -11,6 +11,9 @@
1212 // Stores the callback function for once assets are loaded
1313 mediaLoadedCallback : null,
1414
 15+ //Stores the current top z-index for "putting things on top"
 16+ topZindex: 1,
 17+
1518 // Constructor:
1619 init: function( smilObject ){
1720 // Setup a pointer to parent smil Object
@@ -65,6 +68,13 @@
6669 },
6770
6871 /**
 72+ * Get and increment the top zindex counter:
 73+ */
 74+ getTopZIndex: function(){
 75+ return this.topZindex++;
 76+ },
 77+
 78+ /**
6979 * Draw a smilElement to the layout.
7080 *
7181 * If the element does not exist in the html dom add it.
@@ -75,22 +85,17 @@
7686 var $targetElement = this.$rootLayout.find( '#' + this.smil.getAssetId( smilElement ) )
7787 if( $targetElement.length ){
7888 $targetElement.show();
 89+ return ;
7990 }
8091
8192 // Else draw the node into the regionTarget
8293
8394 //mw.log( "SmilLayout::drawElement: " + nodeName + '.' + $j( smilElement ).attr('id' ) + ' into ' + regionId );
84 - var regionId = $j( smilElement ).attr( 'region');
85 - if( regionId ){
86 - var $regionTarget = this.$rootLayout.find( '#' + regionId );
87 - // Check for region target in $rootLayout
88 - if( $regionTarget.length == 0 ) {
89 - mw.log( "Error in SmilLayout::renderElement, Could not find region:" + regionId );
90 - return ;
91 - }
92 - } else {
93 - // No region provided use the rootLayout:
94 - $regionTarget = this.$rootLayout;
 95+ var $regionTarget = this.getRegionTarget( smilElement );
 96+
 97+ // Make sure we have a $regionTarget
 98+ if( !$regionTarget ){
 99+ return ;
95100 }
96101
97102 // Check that the element is already in the dom
@@ -102,14 +107,33 @@
103108 _this.getSmilElementHtml( smilElement )
104109 )
105110 } else {
106 - // Make sure the element is visable ( may be faster to just call show directly)
 111+ // Make sure the element is visible ( may be faster to just call show directly)
107112 if( $targetElement.is(':hidden') ) {
108113 $targetElement.show();
109 - }
110 - }
 114+ }
 115+ }
111116 },
112117
113118 /**
 119+ * Get a region target for a given smilElement
 120+ */
 121+ getRegionTarget: function( smilElement ){
 122+ var regionId = $j( smilElement ).attr( 'region');
 123+ if( regionId ){
 124+ var $regionTarget = this.$rootLayout.find( '#' + regionId );
 125+ // Check for region target in $rootLayout
 126+ if( $regionTarget.length == 0 ) {
 127+ mw.log( "Error in SmilLayout::renderElement, Could not find region:" + regionId );
 128+ return false;
 129+ }
 130+ } else {
 131+ // No region provided use the rootLayout:
 132+ $regionTarget = this.$rootLayout;
 133+ }
 134+ return $regionTarget;
 135+ },
 136+
 137+ /**
114138 * Hide a smilElement in the layout
115139 */
116140 hideElement: function( smilElement ){
@@ -135,7 +159,7 @@
136160 case 'video':
137161 return this.getSmilVideoHtml( smilElement );
138162 break;
139 - // Smil Text: http://www.w3.org/TR/SMIL/smil-text.html (obviously we support a subset )
 163+ // Smil Text: http://www.w3.org/TR/SMIL/smil-text.html ( obviously we support a subset )
140164 case 'smiltext':
141165 return this.getSmilTextHtml( smilElement );
142166 break;
@@ -164,10 +188,7 @@
165189 'id' : this.smil.getAssetId( videoElement ),
166190 'src' : this.smil.getAssetUrl( $j( videoElement ).attr( 'src' ) )
167191 } )
168 - .css( {
169 - 'width': '100%',
170 - 'height' : '100%'
171 - } )
 192+ .addClass( 'smilFillWindow' )
172193 },
173194
174195 /**
@@ -251,10 +272,7 @@
252273 'id' : this.smil.getAssetId( imgElement ),
253274 'src' : this.smil.getAssetUrl( $j( imgElement ).attr( 'src' ) )
254275 } )
255 - .css( {
256 - 'width': '100%',
257 - 'height' : '100%'
258 - })
 276+ .addClass( 'smilFillWindow' )
259277 },
260278
261279 /**
Index: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilTransitions.js
@@ -1,51 +1,124 @@
22 /**
3 -* Handles the smil transistions
 3+* Handles the smil transitions
44 */
55 mw.SmilTransitions = function( smilObject ){
66 return this.init( smilObject );
77 }
88 mw.SmilTransitions.prototype = {
99
10 - init: function( smilObject ){
 10+ init: function( smilObject ) {
1111 this.smil = smilObject;
1212 },
1313
1414 // Generates a transition overlay based on the transition type
15 - getTransitionOverlay: function( smilElement, animateTime ) {
 15+ transformTransitionOverlay: function( smilElement, animateTime ) {
 16+ mw.log('SmilTransitions::transformTransitionOverlay:' + animateTime);
 17+
1618 // Get the transition type and id:
17 - var tranType = transitionId = false;
 19+ var transitionInRange = false;
1820
19 - if( $j( smilElement ).attr( 'transIn' ) ){
20 - tranType = 'transIn';
21 - transitionId = $j( smilElement ).attr( 'transIn' );
 21+ if( $j( smilElement ).attr( 'transIn' ) ){
 22+ $transition = this.smil.$dom.find( '#' + $j( smilElement ).attr( 'transIn' ) );
 23+ // Check if the transition is in range
 24+ var duration = this.smil.parseTime( $transition.attr('dur') );
 25+ if( duration > animateTime ){
 26+ var percent = animateTime/ duration;
 27+ this.drawTransition( percent, $transition, smilElement );
 28+ transitionInRange = true;
 29+ } else {
 30+ // Hide this overlay
 31+ $j( '#' + this.getTransitionOverlayId( $transition, smilElement ) ).hide();
 32+ }
2233 }
2334
2435 if( $j( smilElement ).attr( 'transOut' ) ){
25 - tranType = 'transOut';
26 - transitionId = $j( smilElement ).attr( 'transOut' );
 36+ $transition = this.smil.$dom.find( '#' + $j( smilElement ).attr( 'transOut' ) );
 37+ // Check if the transition is in range
 38+ var duration = this.smil.parseTime( $transition.attr('dur') );
 39+ var nodeDuration = this.smil.getBody().getNodeDuration( smilElement );
 40+ if( animateTime > ( nodeDuration - duration ) ){
 41+ var percent = animateTime - ( nodeDuration - duration ) / duration;
 42+ this.drawTransition( percent, $transition, smilElement );
 43+ transitionInRange = true;
 44+ } else {
 45+ // Hide this overlay
 46+ $j( '#' + this.getTransitionOverlayId( $transition, smilElement ) ).hide();
 47+ }
2748 }
28 -
29 - if( !tranType || !transitionId ){
30 - // No transition ( smilElement )
31 - return ;
 49+ return transitionInRange;
 50+ },
 51+
 52+ /**
 53+ * elementOutOfRange check if an elements transition overlays are out of range and hide them
 54+ */
 55+ elementOutOfRange: function ( smilElement, time ){
 56+ // for now just hide
 57+ if( $j( smilElement ).attr( 'transIn' ) ){
 58+ $j( '#' + this.getTransitionOverlayId(
 59+ this.smil.$dom.find( '#' + $j( smilElement ).attr( 'transIn' ) ),
 60+ smilElement
 61+ )
 62+ ).hide();
3263 }
33 -
34 - // Get the transition element
35 - $transition = this.smil.$dom.find( '#' + transitionId );
36 - if( ! $transition.attr('dur') ){
37 - mw.log( "Error: transition " + transitionId + "does not have duration " );
38 - return ;
 64+ if( $j( smilElement ).attr( 'transOut' ) ){
 65+ $j( '#' + this.getTransitionOverlayId(
 66+ this.smil.$dom.find( '#' + $j( smilElement ).attr( 'transOut' ) ),
 67+ smilElement
 68+ )
 69+ ).hide();
3970 }
40 - // Get the transision type
41 - if( ! $transition.attr('type' ) {
42 - mw.log( "Error: transition " + transitionId + "does not have type " );
 71+ },
 72+
 73+ /**
 74+ * Updates a transition to a requested percent
 75+ */
 76+ drawTransition: function( percent, $transition, smilElement ){
 77+ mw.log( 'SmilTransitions::drawTransition::' + $transition.attr('id') );
 78+ // Map draw request to correct transition handler:
 79+ if( ! this.transitionFunctionMap[ $transition.attr('type') ]
 80+ ||
 81+ ! this.transitionFunctionMap[ $transition.attr('type') ][ $transition.attr( 'subtype' ) ] ){
 82+ mw.log( "Error no support for transition " +
 83+ $transition.attr('type') + " with subtype: " + $transition.attr( 'subtype' ) );
4384 return ;
44 - }
45 - // Check if the transition is in range
46 - var duration = this.smil.parseTime( $transition.attr('dur') );
47 - if( tranType == 'transIn' && duration > animateTime ){
48 -
49 - }
 85+ }
 86+ // Run the transitionFunctionMap update:
 87+ this.transitionFunctionMap[ $transition.attr('type') ]
 88+ [ $transition.attr( 'subtype' ) ]
 89+ (this, percent, $transition, smilElement )
 90+ },
 91+
 92+ /**
 93+ * Maps all supported transition function types
 94+ */
 95+ transitionFunctionMap : {
 96+ 'fade' : {
 97+ 'fadeFromColor': function( _this, percent, $transition, smilElement ){
 98+ // Add the overlay if missing
 99+ var transitionOverlayId = _this.getTransitionOverlayId( $transition, smilElement );
 100+ if( $j( '#' + transitionOverlayId ).length == 0 ){
 101+
 102+ // Add the transition to the smilElements "region"
 103+ // xxx might want to have layout drive the draw a bit more
 104+ _this.smil.getLayout().getRegionTarget( smilElement ).append(
 105+ $j('<div />')
 106+ .attr('id', transitionOverlayId)
 107+ .addClass( 'smilFillWindow' )
 108+ .addClass( 'smilTransitionOverlay' )
 109+ .css( 'background-color', $transition.attr( 'fadeColor'))
 110+ );
 111+ mw.log('fadeFromColor:: added: ' + transitionOverlayId);
 112+ }
 113+ // Update transition based on interpolation percentage:
 114+ // Invert the percentage:
 115+ var percent = 1 - percent;
 116+ $j( '#' + transitionOverlayId ).css( 'opacity', percent );
 117+ }
 118+ }
 119+ },
 120+
 121+ getTransitionOverlayId: function( $transition, smilElement) {
 122+ return this.smil.getAssetId( smilElement ) + '_' + $transition.attr('id');
50123 }
51124
52125
Index: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.SmilAnimate.js
@@ -10,7 +10,6 @@
1111 init: function( smilObject ){
1212 this.smil = smilObject;
1313
14 - // xxx possible option?
1514 this.framerate = mw.getConfig( 'SmilPlayer.framerate' );
1615
1716 this.callbackRate = 1000 / this.framerate;
@@ -18,17 +17,32 @@
1918 },
2019
2120 /**
 21+ * Pause any active animation or video playback
 22+ */
 23+ pauseAnimation: function(){
 24+
 25+ },
 26+
 27+ /**
2228 * Animate a smil transform per supplied time.
 29+ * @param {Element} smilElement Smil element to be animated
 30+ * @param {float} animateTime Float time target for element transform
 31+ * @param {float} deltaTime Extra time interval to be animated between animateTransform calls
2332 */
2433 animateTransform: function( smilElement, animateTime, deltaTime ){
2534 var _this = this;
2635
27 - // If deltaTime is zero, then we should just transformElement directly:
 36+ // check for deltaTime to animate over, if zero, then we should just transformElement directly:
2837 if( !deltaTime || deltaTime === 0 ){
2938 _this.transformElement( smilElement, animateTime );
3039 return ;
 40+ } else if( this.smil.getRefType( smilElement ) == 'video' ){
 41+ // If we have a animation delta time, for some types such as video we should not transform
 42+ this.transformVideoForPlayback( smilElement, animateTime );
 43+ return;
3144 }
3245
 46+
3347 // Check if the current smilElement has any transforms to be done
3448 if( ! this.checkForTransformUpdate( smilElement, animateTime, deltaTime ) ){
3549 // xxx no animate loop needed for element: smilElement
@@ -57,6 +71,7 @@
5872 return ;
5973 }
6074
 75+ // Check if there is lag in animations
6176 if( Math.abs( timeElapsed - animateTimeDelta ) > 100 ){
6277 mw.log( "Error more than 100ms lag within animateTransform loop: te:" + timeElapsed +
6378 ' td:' + animateTimeDelta + ' diff: ' + Math.abs( timeElapsed - animateTimeDelta ) );
@@ -76,7 +91,15 @@
7792 // Get the node type:
7893 var refType = this.smil.getRefType( smilElement )
7994
80 - // NOTE: our img node check sort of avoids deltaTime check but its assumed to not matter much
 95+ // Let transition check for updates
 96+ if( refType == 'img' || refType=='video' ){
 97+ if( $j( smilElement ).attr('transIn') || $j( smilElement ).attr('transOut') ){
 98+ return true;
 99+ }
 100+ }
 101+
 102+
 103+ // NOTE: our img node check avoids deltaTime check but its assumed to not matter much
81104 // since any our supported keyframe granularity will be equal to deltaTime ie 1/4 a second.
82105 if( refType == 'img' ){
83106 // Confirm a child animate is in-range
@@ -86,7 +109,7 @@
87110 return true;
88111 }
89112 }
90 - }
 113+ }
91114
92115 // Check if we need to do a smilText clear:
93116 if( refType == 'smiltext' ){
@@ -115,22 +138,26 @@
116139 * @param {float} animateTime The relative time to be transformed.
117140 */
118141 transformElement: function( smilElement, animateTime ) {
119 - //mw.log("transformForTime: " + nodeName + ' t:' + animateTime );
 142+ mw.log("SmilAnimate::transformForTime:" + animateTime );
120143 switch( this.smil.getRefType( smilElement ) ){
121144 case 'smiltext':
122 - return this.transformTextForTime( smilElement, animateTime );
 145+ this.transformTextForTime( smilElement, animateTime );
123146 break;
124147 case 'img':
125 - return this.transformImageForTime( smilElement, animateTime );
 148+ this.transformImageForTime( smilElement, animateTime );
126149 break;
127150 case 'video':
128 - return this.transformVideoForTime( smilElement, animateTime );
 151+ this.transformVideoForTime( smilElement, animateTime );
129152 break;
130 - }
 153+ }
 154+ // Update the smil Element transition:
 155+ this.smil.getTransitions().transformTransitionOverlay( smilElement, animateTime );
131156 },
132157
133158 /**
134159 * Transform video for time
 160+ * @param {Element} smilElement Smil video element to be transformed
 161+ * @param {time} animateTime Relative time to be transformed
135162 */
136163 transformVideoForTime: function( smilElement, animateTime ){
137164 // Get the video element
@@ -144,18 +171,14 @@
145172 mw.log( "transformVideoForTime:: seek complete ");
146173 });
147174 },
 175+ /**
 176+ * Used to support video playback
 177+ */
 178+ transformVideoForPlayback: function( smilElement, animateTime ){
 179+ // xxx should fire buffer delay for now just play:
 180+ $j ( '#' + this.smil.getAssetId( smilElement ) ).get( 0 ).play();
 181+ },
148182
149 - // Transitions should probably be moved to seperate class
150 - updateTransitions: function( smilElement, animateTime ){
151 - if( $j(smilElement).attr( 'transIn' ) ){
152 - // check if in range
153 - if( $j(smilElement).attr( 'transIn' )
154 - }
155 - if( $j(smilElement).attr( 'transOut' ) ){
156 -
157 - }
158 - },
159 -
160183 /**
161184 * Transform Text For Time
162185 */
@@ -209,7 +232,7 @@
210233 }
211234
212235 var animateInRange = _this.getSmilAnimateInRange( smilImgElement, animateTime, function( animateElement ){
213 - //mw.log('animateInRange callback::' + $j( animateElement ).attr( 'attributeName' ) );
 236+ // mw.log('animateInRange callback::' + $j( animateElement ).attr( 'attributeName' ) );
214237 switch( $j( animateElement ).attr( 'attributeName' ) ) {
215238 case 'panZoom':
216239 // Get the pan zoom css for "this" time
@@ -260,7 +283,7 @@
261284 animateInRange = true;
262285 if( callback ) {
263286 callback( animateElement );
264 - }
 287+ }
265288 }
266289 });
267290 return animateInRange;
Index: branches/MwEmbedStandAlone/modules/SmilPlayer/loader.js
@@ -15,10 +15,11 @@
1616
1717 "mw.Smil" : "mw.Smil.js",
1818 "mw.SmilLayout" : "mw.SmilLayout.js",
 19+ "mw.style.SmilLayout" : "mw.style.SmilLayout.css",
1920 "mw.SmilBody" : "mw.SmilBody.js",
2021 "mw.SmilBuffer" : "mw.SmilBuffer.js",
2122 "mw.SmilAnimate" : "mw.SmilAnimate.js",
22 -
 23+ "mw.SmilTransitions" : "mw.SmilTransitions.js",
2324 "mw.EmbedPlayerSmil" : "mw.EmbedPlayerSmil.js"
2425 } );
2526
@@ -28,15 +29,16 @@
2930 "mw.SmilHooks",
3031 "mw.Smil",
3132 "mw.SmilLayout",
 33+ "mw.style.SmilLayout",
3234 "mw.SmilBody",
3335 "mw.SmilBuffer",
3436 "mw.SmilAnimate",
 37+ "mw.SmilTransitions",
3538 "mw.EmbedPlayerSmil"
3639 ];
3740
3841 // Add smil library set if needed
39 - if( mw.CheckElementForSMIL( playerElement ) ) {
40 - // If the swarm transport is enabled add mw.SwarmTransport to the request.
 42+ if( mw.CheckElementForSMIL( playerElement ) ) {
4143 $j.merge(resourceRequest, smilPlayerLibrarySet);
4244 }
4345 } );
Index: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.Smil.js
@@ -34,6 +34,9 @@
3535 // Stores the mw.SmilAnimate object
3636 animate: null,
3737
 38+ // Stores the mw.SmilTransisions object
 39+ transitions: null,
 40+
3841 // Stores the smil document for this object ( for relative image paths )
3942 smilUrl: null,
4043
@@ -167,6 +170,15 @@
168171 }
169172 return this.body;
170173 },
 174+ /**
 175+ * Get the transitions object
 176+ */
 177+ getTransitions: function(){
 178+ if( !this.transitions ){
 179+ this.transitions = new mw.SmilTransitions( this );
 180+ }
 181+ return this.transitions;
 182+ },
171183
172184 /**
173185 * Function called continuously to keep sync smil "in sync"
Index: branches/MwEmbedStandAlone/modules/SmilPlayer/tests/VideoTransition.html
@@ -10,7 +10,7 @@
1111 $j( "#seekInputTime" ).blur( function(){
1212 var smilVid = $j('#videoTransition').get(0);
1313 $j('#seekInProgress').show();
14 - smilVid.setCurrentTime( parseFloat( $j(this).val() ), function(){
 14+ smilVid.setCurrentTime( parseFloat( $j(this).val() ), function() {
1515 $j('#seekInProgress').hide();
1616 });
1717 });
Index: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.style.SmilLayout.css
@@ -0,0 +1,7 @@
 2+.smilFillWindow{
 3+ position : absolute;
 4+ width : 100%;
 5+ height : 100%;
 6+ top : 0px;
 7+ left : 0px;
 8+}
\ No newline at end of file
Index: branches/MwEmbedStandAlone/modules/SmilPlayer/mw.EmbedPlayerSmil.js
@@ -121,7 +121,8 @@
122122 */
123123 pause: function() {
124124 mw.log( 'EmbedPlayerSmil::pause at time' + this.smilPlayTime );
125 - this.smilPauseTime = this.smilPlayTime;
 125+ this.smilPauseTime = this.smilPlayTime;
 126+
126127 // Update the interface
127128 this.parent_pause();
128129 },
Index: branches/MwEmbedStandAlone/modules/EmbedPlayer/mw.EmbedPlayerKplayer.js
@@ -49,10 +49,10 @@
5050
5151 //flashvars.host = "www.kaltura.com";
5252 flashvars.externalInterfaceDisabled = 'false';
53 - //flashvars.skinPath = playerPath + '/skin.swf';
 53+ flashvars.skinPath = playerPath + '/skin.swf';
5454
5555 flashvars["full.skinPath"] = playerPath + '/LightDoodleskin.swf';
56 -
 56+
5757 var params = { };
5858 params.quality = "best";
5959 params.wmode = "opaque";

Status & tagging log