Fixed nodelist support for safari, youtube defaults its height and wi…

…dth [#782]
visivid · Nov 1, 2011 · 2c8864a · 2c8864a
2 parents ff60bcf + 3ff377d
commit 2c8864a
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 4 deletions.
diff --git a/players/youtube/popcorn.youtube.js b/players/youtube/popcorn.youtube.js
@@ -30,6 +30,8 @@ Popcorn.player( "youtube", {
           params,
           attributes,
           src,
+          width,
+          height,
           query;
 
       // expose a callback to this scope, that is called from the global callback youtube calls
@@ -204,8 +206,12 @@ Popcorn.player( "youtube", {
       src = /^.*(?:\/|v=)(.{11})/.exec( media.src )[ 1 ];
       query = ( media.src.split( "?" )[ 1 ] || "" ).replace( /v=.{11}/, "" );
 
+      // setting youtube player's height and width, default to 560 x 315
+      width = media.style.width ? ""+media.offsetWidth : "560";
+      height = media.style.height ? ""+media.offsetHeight : "315";
+
       swfobject.embedSWF( "//www.youtube.com/e/" + src + "?" + query + "&enablejsapi=1&playerapiid=" + container.id + "&version=3",
-                          container.id, media.offsetWidth, media.offsetHeight, "8", null, flashvars, params, attributes );
+                          container.id, width, height, "8", null, flashvars, params, attributes );
     };
 
     if ( !window.swfobject ) {

diff --git a/players/youtube/popcorn.youtube.unit.html b/players/youtube/popcorn.youtube.unit.html
@@ -34,6 +34,8 @@ <h2 id="qunit-userAgent"></h2>
   <div id="video" style="width: 360px; height: 300px" ></div>
   <div id="video2" style="width: 360px; height: 300px" ></div>
   <div id="video3" style="width: 360px; height: 300px" ></div>
+  <div id="video4"></div>
+  <div id="video5" style="width: 0px; height: 0px" ></div>
 </body>
 </html>
 
diff --git a/players/youtube/popcorn.youtube.unit.js b/players/youtube/popcorn.youtube.unit.js
@@ -407,3 +407,31 @@ test( "Controls and Annotations toggling", function() {
 
 });
 
+test( "Player height and width", function() {
+
+  QUnit.reset();
+
+  expect( 4 );
+
+  stop( 10000 );
+  var popcorn1 = Popcorn.youtube( "#video4", "http://www.youtube.com/watch?v=9oar9glUCL0" ),
+      popcorn2 = Popcorn.youtube( "#video5", "http://www.youtube.com/watch?v=9oar9glUCL0" ),
+      readyStatePoll = function() {
+
+        if ( popcorn1.media.readyState !== 4 && popcorn2.media.readyState !== 4 ) {
+
+          setTimeout( readyStatePoll, 10 );
+        } else {
+
+          equal( popcorn1.media.children[ 0 ].width, 560, "Youtube player default width is 560" );
+          equal( popcorn1.media.children[ 0 ].height, 315, "Youtube player default height is 315" );
+
+          equal( popcorn2.media.children[ 0 ].width, 0, "Youtube player explicit width is 0" );
+          equal( popcorn2.media.children[ 0 ].height, 0, "Youtube player explicit height is 0" );
+          start();
+        }
+      };
+
+  readyStatePoll();
+});
+
diff --git a/popcorn.js b/popcorn.js
@@ -1665,10 +1665,18 @@
 
           basePlayer[ val ] = (function( value ) {
 
-            return function() {
+            // this is a stupid ugly kludgy hack in honour of Safari
+            // in Safari a NodeList is a function, not an object
+            if ( "length" in container[ value ] && !container[ value ].call ) {
 
-              return container[ value ].apply( container, arguments );
-            };
+              return container[ value ];
+            } else {
+
+              return function() {
+
+                return container[ value ].apply( container, arguments );
+              };
+            }
           }( val ));
         } else {