Merge remote-tracking branch 'dseif/t541' into develop

jbuck · Jun 23, 2011 · d530037 · d530037
2 parents cb0df2a + 25fe840
commit d530037
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 27 deletions.
diff --git a/players/baseplayer/popcorn.baseplayer.html b/players/baseplayer/popcorn.baseplayer.html
@@ -87,4 +87,4 @@
           This demo showcases basic functionality of a player. It is a shell of an HTMLMediaElement with basic timing routines.<br />
           At 2 seconds, the phrase "2 seconds reached" will appear beside 'Event Output'<br />
     </body>
-</html>
+</html>
diff --git a/players/baseplayer/popcorn.baseplayer.js b/players/baseplayer/popcorn.baseplayer.js
@@ -6,6 +6,7 @@
   Popcorn.baseplayer.init = function() {
     this.readyState = 0;
     this.currentTime = 0;
+    this.baselineTime = new Date();
     this.duration = 0;
     this.paused = 1;
     this.ended = 0;
@@ -45,19 +46,20 @@
     },
 
     timeupdate: function() {
-      // The player was paused since the last time update
-      if ( this.paused ) {
-        return;
-      }
 
       // So we can refer to the instance when setTimeout is run
       var self = this;
-      this.currentTime += 0.015;
 
-      this.dispatchEvent( "timeupdate" );
-      setTimeout( function() {
+      if( !this.paused ) {
+        this.currentTime += ( new Date() - this.baselineTime ) / 1000;
+        this.dispatchEvent( "timeupdate" );
+      }
+
+      this.baselineTime = new Date();
+
+      setTimeout(function() {
         self.timeupdate.call( self );
-      }, 15 );
+      }, 50 );
     },
 
     // By default, assumes this.resource is a DOM Element
@@ -68,11 +70,11 @@
 
     // Add an event listener to the object
     addEventListener: function( evtName, fn ) {
-      if ( !this._events[evtName] ) {
-        this._events[evtName] = [];
+      if ( !this._events[ evtName ] ) {
+        this._events[ evtName ] = [];
       }
 
-      this._events[evtName].push( fn );
+      this._events[ evtName ].push( fn );
       return fn;
     },
 
@@ -94,7 +96,7 @@
         }
       }
 
-      Popcorn.forEach( this._events[eventName], function( val ) {
+      Popcorn.forEach( this._events[ eventName ], function( val ) {
         val.call( self, evt, self );
       });
     },
@@ -127,13 +129,13 @@
 
       if ( elem.currentStyle ) {
         // IE syntax
-        return elem.currentStyle[prop];
+        return elem.currentStyle[ prop ];
       } else if ( global.getComputedStyle ) {
         // Firefox, Chrome et. al
         return doc.defaultView.getComputedStyle( elem, null ).getPropertyValue( prop );
       } else {
         // Fallback, just in case
-        return elem.style[prop];
+        return elem.style[ prop ];
       }
     }
   };

diff --git a/players/baseplayer/popcorn.baseplayer.unit.html b/players/baseplayer/popcorn.baseplayer.unit.html
@@ -32,6 +32,15 @@
       height: 250px;
       background: #FFAAAA;
     }
+
+    #video {
+      position: absolute;
+      left:620px;
+      top: 260px;
+      width: 300px;
+      height: 175px;
+      background: #FFAAAA;
+    }
   </style>
 </head>
 <body>
@@ -43,5 +52,23 @@ <h2 id="qunit-userAgent"></h2>
   <div id="qunit-fixture">  </div>
 
   <span id="player_1">This is a container for the player, auto-sized for testing purposes.</span>
+  <div >
+    <video id='video'
+      controls
+      width= '250px'
+      poster="../../test/poster.png">
+
+      <source id='mp4'
+        src="../../test/trailer.mp4"
+        type='video/mp4; codecs="avc1, mp4a"'>
+
+      <source id='ogv'
+        src="../../test/trailer.ogv"
+        type='video/ogg; codecs="theora, vorbis"'>
+
+      <p>Your user agent does not support the HTML5 Video element.</p>
+
+    </video>
+  </div>
 </body>
 </html>
diff --git a/players/baseplayer/popcorn.baseplayer.unit.js b/players/baseplayer/popcorn.baseplayer.unit.js
@@ -55,7 +55,7 @@ test( "API", function () {
   stop( 10000 );
 
   Popcorn.forEach( members, function ( type, prop ) {
-    ok( typeof player[prop] === type, "player." + prop + " is type: " + type );
+    ok( typeof player[ prop ] === type, "player." + prop + " is type: " + type );
     plus();
   });
 });
@@ -78,18 +78,18 @@ test( "Default Functionality", function () {
     }
   }
 
-  player._resource = document.getElementById('player_1');
+  player._resource = document.getElementById( 'player_1' );
   dimensions = player.getBoundingClientRect();
 
   Popcorn.forEach( expectedVals, function() {
-    expects+= 2;
+    expects += 2;
   });
 
   expect( expects );
   stop( 1000 );
 
   Popcorn.forEach( expectedVals, function( val, prop ) {
-    equals( player.getStyle( prop ), val+'px', "Style '" + prop + "' correctly got" );
+    equals( player.getStyle( prop ), val + 'px', "Style '" + prop + "' correctly got" );
     plus();
 
     equals( dimensions[prop], val, "Bounding Client " + prop + " works" );
@@ -119,16 +119,16 @@ test( "Default Functionality", function () {
 
     player.pause();
   });
-
   player.play();
 });
 
 
 test( "Extension and Method Overriding", function () {
-  var expects = 4,
+  var expects = 5,
       count = 0,
       player = Popcorn.baseplayer(),
       playerForPopcorn = Popcorn.baseplayer(),
+      player2 = Popcorn("#video"),
       popcorn;
 
   function plus() {
@@ -137,7 +137,7 @@ test( "Extension and Method Overriding", function () {
     }
   }
 
-  expect(expects);
+  expect( expects );
   stop( 4000 );
 
   Popcorn.extend( player, {
@@ -150,7 +150,7 @@ test( "Extension and Method Overriding", function () {
       plus();
 
       // Must dispatch event so event listeners can work!
-      this.dispatchEvent("timeupdate");
+      this.dispatchEvent( "timeupdate" );
 
       // We don't want to cue custom timing loop using setTimeout because we only want this to run once
     }
@@ -162,12 +162,15 @@ test( "Extension and Method Overriding", function () {
   });
 
   popcorn = Popcorn( playerForPopcorn )
-            .exec( 2, function() {
-              ok( true, "Exec triggereed from popcorn after 2 seconds" );
-              plus();
-            });
+  .exec( 2, function() {
+    ok( Math.abs( player2.currentTime() - playerForPopcorn.currentTime ) < 0.2, "Time update is within a reasonable range" );
+    plus();
+    ok( true, "Exec triggereed from popcorn after 2 seconds" );
+    plus();
+  });
 
   player.load();
+  player2.play();
   player.play();
 
   // Each player will define its own criteria for when readyState should be changed