Merge pull request #91 from secretrobotron/t1132

[t1132] image plugin fix for target === media elem

plugins/image/popcorn.image.html

@@ -12,13 +12,13 @@
       .play()
       .image({
       	// seconds
-        start: 5,
+        start: 1,
         // seconds
         end: 15,
         href: "http://www.drumbeat.org/",
         src: "https://www.drumbeat.org/media//images/drumbeat-logo-splash.png",
         text: "DRUMBEAT",
-        target: "imagediv"
+        target: "video"
       })
       .image({
       	// seconds

plugins/image/popcorn.image.js

@@ -28,6 +28,58 @@
       } )
  *
  */
+
+  var VIDEO_OVERLAY_Z = 2000,
+      CHECK_INTERVAL_DURATION = 10;
+
+  function trackMediaElement( mediaElement ) {
+    var checkInterval = -1,
+        container = document.createElement( "div" ),
+        videoZ = getComputedStyle( mediaElement ).zIndex;
+
+    container.setAttribute( "data-popcorn-helper-container", true );
+
+    container.style.position = "absolute";
+
+    if ( !isNaN( videoZ ) ) {
+      container.style.zIndex = videoZ + 1;
+    }
+    else {
+      container.style.zIndex = VIDEO_OVERLAY_Z;
+    }
+
+    document.body.appendChild( container );
+
+    function check() {
+      var mediaRect = mediaElement.getBoundingClientRect(),
+          containerRect = container.getBoundingClientRect();
+
+      if ( containerRect.left !== mediaRect.left ) {
+        container.style.left = mediaRect.left + "px";
+      }
+      if ( containerRect.top !== mediaRect.top ) {
+        container.style.top = mediaRect.top + "px";
+      }
+    }
+
+    return {
+      element: container,
+      start: function() {
+        checkInterval = setInterval( check, CHECK_INTERVAL_DURATION );
+      },
+      stop: function() {
+        clearInterval( checkInterval );
+        checkInterval = -1;
+      },
+      destroy: function() {
+        document.body.removeChild( container );
+        if ( checkInterval !== -1 ) {
+          clearInterval( checkInterval );
+        }
+      }
+    };
+  }
+
   Popcorn.plugin( "image", {
       manifest: {
         about: {
@@ -78,12 +130,22 @@
         options.anchor.style.textDecoration = "none";
         options.anchor.style.display = "none";
 
-
         if ( !target && Popcorn.plugin.debug ) {
           throw new Error( "target container doesn't exist" );
         }
-        // add the widget's div to the target div
-        target && target.appendChild( options.anchor );
+
+        // add the widget's div to the target div.
+        // if target is <video> or <audio>, create a container and routinely 
+        // update its size/position to be that of the media
+        if ( target ) {
+          if ( [ "VIDEO", "AUDIO" ].indexOf( target.nodeName ) > -1 ) {
+            options.trackedContainer = trackMediaElement( target );
+            options.trackedContainer.element.appendChild( options.anchor );
+          }
+          else {
+            target.appendChild( options.anchor );
+          }          
+        }
 
         img.addEventListener( "load", function() {
 
@@ -133,6 +195,9 @@
        */
       start: function( event, options ) {
         options.anchor.style.display = "inline";
+        if ( options.trackedContainer ) {
+          options.trackedContainer.start();
+        }
       },
       /**
        * @member image
@@ -142,9 +207,17 @@
        */
       end: function( event, options ) {
         options.anchor.style.display = "none";
+        if ( options.trackedContainer ) {
+          options.trackedContainer.stop();
+        }
       },
       _teardown: function( options ) {
-        document.getElementById( options.target ) && document.getElementById( options.target ).removeChild( options.anchor );
+        if ( options.trackedContainer ) {
+          options.trackedContainer.destroy();
+        }
+        else if ( options.anchor.parentNode ) {
+          options.anchor.parentNode.removeChild( options.anchor );
+        }
       }
   });
 })( Popcorn );

plugins/image/popcorn.image.unit.js

@@ -153,3 +153,23 @@ asyncTest( "size test", 4, function() {
     popped.play();
   });
 });
+
+asyncTest( "media element target test", 2, function() {
+  var popped = Popcorn( "#video" );
+  popped.on( "canplayall", function() {
+    popped.image({
+      start: 1,
+      end: 4,
+      src: "https://www.drumbeat.org/media/images/drumbeat-logo-splash.png",
+      target: "video"
+    });
+    popped.pause();
+    popped.currentTime( 2 );
+    ok( document.querySelector( "div[data-popcorn-helper-container]" ), "helper element was created" );
+    popped.currentTime( 5 );
+    popped.destroy();
+    ok( !document.querySelector( "div[data-popcorn-helper-container]" ), "helper element was removed" );
+    start();
+  });
+
+});