[#915] Youtube no longer has it's internal cleanup called on end. Added width and height properties

plugins/mediaspawner/popcorn.mediaspawner.js

@@ -62,29 +62,45 @@
         target: "mediaspawner-container",
         start: {
           elem: "input",
-          type: "number",
+          type: "text",
           label: "Start"
         },
         end: {
           elem: "input",
-          type: "number",
+          type: "text",
           label: "End"
         },
         autoplay: {
-          elem: "select",
+          elem: "input",
-          options: [ "TRUE", "FALSE" ],
+          type: "checkbox",
-          label: "Autoplay Video: ",
+          label: "Autoplay Video",
+          optional: true
+        },
+        width: {
+          elem: "input",
+          type: "text",
+          label: "Media Width",
+          optional: true
+        },
+        height: {
+          elem: "input",
+          type: "text",
+          label: "Media Height",
           optional: true
         }
       }
     },
     _setup: function( options ) {
       var target = document.getElementById( options.target ),
-          caption = options.caption || "",
           mediaType,
           container,
+          capContainer,
           regexResult;
 
+      // Default width and height of media
+      options.width = options.width || "400";
+      options.height = options.height || "200";
+
       // Check if mediaSource is passed and mediaType is NOT audio/video
       if ( !options.source ) {
         Popcorn.error( "Error. Source must be specified." );
@@ -99,8 +115,17 @@
       options._container = document.createElement( "div" );
       container = options._container;
       container.id = "mediaSpawnerdiv-" + Popcorn.guid();
-      container.innerHTML = caption;
+
-      container.style.display = "none";
+      // Captions now need to be in their own container, due to the problem with flash players
+      // described in start/end
+      if ( options.caption ) {
+        capContainer = document.createElement( "div" );
+        capContainer.innerHTML = options.caption;
+        capContainer.style.display = "none";
+        options._capCont = capContainer;
+        container.appendChild( capContainer );
+      }
+
       target && target.appendChild( container );
 
       regexResult = urlRegex.exec( options.source );
@@ -137,6 +162,8 @@
             if ( mediaType === "object" ) {
               options.popcorn.controls( true );
             }
+
+            options.popcorn.media.style.visibility = "hidden";
           }
         }
 
@@ -173,19 +200,35 @@
 
     },
     start: function( event, options ) {
-      if ( options._container ) {
+      if( options._capCont ) {
-        options._container.style.display = "";
+        options._capCont.style.display = "";
       }
 
+      /* Using this style for Start/End is required because of the flash players
+       * Without it on end an internal cleanup is called, causing the flash players
+       * to be out of sync with Popcorn, as they are then rebuilt.
+       */
+      options.popcorn.media.style.width = options.width + "px";
+      options.popcorn.media.style.height = options.height + "px";
+      options.popcorn.media.style.visibility = "visible";
+
       if ( options.autoplay ) {
         options.popcorn.play();
       }
     },
     end: function( event, options ) {
-      if ( options._container ) {
+      if( options._capCont ) {
-        options._container.style.display = "none";
+        options._capCont.style.display = "none";
       }
 
+      /* Using this style for Start/End is required because of the flash players
+       * Without it on end an internal cleanup is called, causing the flash players
+       * to be out of sync with Popcorn, as they are then rebuilt.
+       */
+      options.popcorn.media.style.width = "0px";
+      options.popcorn.media.style.height = "0px";
+      options.popcorn.media.style.visibility = "hidden";
+
       // The Flash Players automagically pause themselves on end already
       if ( options.type === "object" ) {
         options.popcorn.pause();

plugins/mediaspawner/popcorn.mediaspawner.unit.html

@@ -9,6 +9,8 @@
     popcorn-api-draft.js
   -->
   <script src="../../popcorn.js"></script>
+  <script src="../../modules/player/popcorn.player.js"></script>
+  <script src="../../players/youtube/popcorn.youtube.js"></script>
   <script src="popcorn.mediaspawner.js"></script>
   <script src="popcorn.mediaspawner.unit.js"></script>
   <script src="../../test/inject.js"></script>

plugins/mediaspawner/popcorn.mediaspawner.unit.js

@@ -1,4 +1,4 @@
-asyncTest( "Popcorn MediaSpawner Plugin", 6, function() {
+asyncTest( "Popcorn MediaSpawner Plugin", 7, function() {
 
   var popped = Popcorn( "#video" ),
       eventId,
@@ -10,8 +10,9 @@ asyncTest( "Popcorn MediaSpawner Plugin", 6, function() {
     source: "http://www.youtube.com/watch?v=CXDstfD9eJ0",
     target: "youtubediv",
     start: 1,
-    end: 5,
+    end: 7,
-    caption: "This is a test. We are assuming control. We are assuming control."
+    caption: "This is a test. We are assuming control. We are assuming control.",
+    autoplay: true
   })
   .mediaspawner({
     source: [
@@ -57,6 +58,12 @@ asyncTest( "Popcorn MediaSpawner Plugin", 6, function() {
     // Checks if the Text Blog Post was successfully destroyed with _teardown
     popped.pause().removeTrackEvent( eventId );
     ok( !document.getElementById( "html5video" ).innerHTML, "html5video type from mediaspawner plugin was properly destroyed" );
+    popped.play();
+  });
+
+  popped.cue( 6, function() {
+    var youtubeInstance = popped.data.running.mediaspawner[ 0 ];
+    ok( !youtubeInstance.paused, "Youtube Video is autoplaying" );
 
     start();
   });