Merge remote branch 'scott/t381' into 0.6

plugins/subtitle/popcorn.subtitle.js

@@ -15,6 +15,34 @@
             callBack( data );
           }, 1);
         }
+      },
+      createDefaultContainer = function( context ) {
+
+        // clear this function from future calls; we are done
+        createDefaultContainer = Popcorn.nop;
+
+        var updatePosition = function() {
+
+          // the video element must have height and width defined
+          context.container.style.fontSize   = "18px";
+          context.container.style.width      = context.media.offsetWidth + "px";
+          context.container.style.top        = context.position().top  + context.media.offsetHeight - context.container.offsetHeight - 40 + "px";
+          context.container.style.left       = context.position().left + "px";
+
+          setTimeout( updatePosition, 10 );
+        };
+
+        context.container = document.createElement('div');
+        context.container.id               = "subtitlediv";
+        context.container.style.position   = "absolute";
+        context.container.style.color      = "white";
+        context.container.style.textShadow = "black 2px 2px 6px";
+        context.container.style.fontWeight = "bold";
+        context.container.style.textAlign  = "center";
+
+        updatePosition();
+
+        document.body.appendChild( context.container );
       };
 
   Popcorn.getScript( "http://www.google.com/jsapi", callBack );
@@ -100,23 +128,8 @@
       _setup: function( options ) {
 
         // Creates a div for all subtitles to use
-        if ( !this.container ) {
-          this.container = document.createElement('div');
-          this.container.id = "subtitlediv";
-          this.container.style.position   = "absolute";
-          this.container.style.color      = "white";
-          this.container.style.textShadow = "black 2px 2px 6px";
-          this.container.style.fontSize   = "18px";
-          this.container.style.fontWeight = "bold";
-          this.container.style.textAlign  = "center";
-
-          // the video element must have height and width defined
-          this.container.style.width      = this.media.offsetWidth + "px";
-          this.container.style.top        = this.position().top + this.media.offsetHeight - 65 + "px";
-          this.container.style.left       = this.position().left + "px";
-
-          document.body.appendChild( this.container );
-        }
+        ( !this.container && !options.target || options.target === 'Subtitle-container' ) && 
+          createDefaultContainer( this );
 
         // if a target is specified, use that
         if ( options.target && options.target !== 'Subtitle-container' ) {
@@ -189,11 +202,6 @@
           }
         }, 5);
 
-
-
-
-
-
       },
       /**
        * @member subtitle 

plugins/subtitle/popcorn.subtitle.unit.js

@@ -1,12 +1,10 @@
 test("Popcorn Subtitle Plugin", function () {
 
   var popped = Popcorn("#video"),
-      expects = 5,
+      expects = 9,
       count = 0,
-      interval,
-      interval2,
-      interval3,
-      interval4,
+      subTop = 9001,
+      subLeft = 9001,
       subtitlediv;
 
   expect(expects);
@@ -23,61 +21,84 @@ test("Popcorn Subtitle Plugin", function () {
   plus();
 
   popped.subtitle({
-      start: 3,
+      start: 0,
+      end: 1,
       text: 'this is the first subtitle of 2011',
       language: "en",
       languagesrc: "language",
       accessibilitysrc: "accessibility"
     } )
   .subtitle({
-      start: 10,
-      end: 15,
+      start: 1,
+      end: 2,
       text: 'this is the second subtitle of 2011',
       language: "en",
       languagesrc: "language",
       accessibilitysrc: "accessibility"
     } )
 	.subtitle({
-      start: 20,
+      start: 3,
+      end: 4,
       text: 'this is the third subtitle of 2011',
       language: "en",
       languagesrc: "language",
       accessibilitysrc: "accessibility"
     } )
     .volume(0)
     .play();
-
-  interval = setInterval( function() {
-    if( popped.currentTime() >= 3 && popped.currentTime() < 10 ) {
-      subtitlediv = document.getElementById('subtitlediv'); // this div has only now been created
-      equals (subtitlediv.innerHTML, "this is the first subtitle of 2011", "subtitle displaying correct information" );
-      plus();
-      clearInterval( interval );
-    }
-  }, 500);
-
-  interval2 = setInterval( function() {
-    if( popped.currentTime() >= 10 && popped.currentTime() < 15  ) {
-      equals (subtitlediv.innerHTML, "this is the second subtitle of 2011", "subtitle displaying correct information" );
-      plus();
-      clearInterval( interval2 );
-    }
-  }, 500);
 
-  interval3 = setInterval( function() {
-    if( popped.currentTime() >= 15 && popped.currentTime() < 20 ) {
-      equals (subtitlediv.innerHTML, "" );
-      plus();
-      clearInterval( interval3 );
-    }
-  }, 500);
-
-  interval4 = setInterval( function() {
-    if( popped.currentTime() > 20) {
-      equals (subtitlediv.innerHTML, "this is the third subtitle of 2011", "subtitle displaying correct information" );
-      plus();
-      clearInterval( interval4 );
-    }
-  }, 500);
+  subtitlediv = document.getElementById('subtitlediv');
+
+  popped.exec( 0.5, function() {
+
+    // capturing location now, to check against later,
+    // a subtitle must be displayed to get valid data
+    // which is why we do this in exec
+    subLeft = subtitlediv.style.left;
+    subTop  = subtitlediv.style.top;
+
+    // changing position
+    popped.media.style.position = "absolute";
+    popped.media.style.left = "400px";
+    popped.media.style.top = "600px";
+
+    equals( subtitlediv.innerHTML, "this is the first subtitle of 2011", "subtitle displaying correct information" );
+    plus();
+  });
+
+  popped.exec( 1.5, function() {
+
+
+    // check position of subttile that should of moved with video,
+    // a subtitle must be displayed to get valid data
+    ok( subtitlediv.style.left !== subLeft, "subtitle's left position has changed" );
+    plus();
+    ok( subtitlediv.style.top !== subTop, "subtitle's top position has changed" );
+    plus();
+
+    // we know values have changed, but how accurate are they?
+    // check values against the video's values
+    // we need four checks because if we just check against video's position,
+    // and video's position hasn't updated either, we'll pass when we should fail
+    equals( subtitlediv.style.left, popped.position().left + "px", "subtitle left position moved" );
+    plus();
+    ok( Popcorn.position( subtitlediv ).top > popped.position().top, "subtitle top position moved" );
+    plus();
+
+    equals (subtitlediv.innerHTML, "this is the second subtitle of 2011", "subtitle displaying correct information" );
+    plus();
+  });
+
+  popped.exec( 2.5, function() {
+
+    equals (subtitlediv.innerHTML, "", "subtitle is clear" );
+    plus();
+  });
+
+  popped.exec( 3.5, function() {
+
+    equals (subtitlediv.innerHTML, "this is the third subtitle of 2011", "subtitle displaying correct information" );
+    plus();
+  });
+});
 
-});