Skip to content

Commit

Permalink
Fixed size problems in players, allowing subtitles to be used with th…
Browse files Browse the repository at this point in the history 
…e players. Modified muted attribute to be coerced into a boolean value [#843]
  • Loading branch information
Christopher De Cairos committed Jan 19, 2012
2 parents ec4d55e + 0e027e2 commit 2aaf4b1
Show file tree
Hide file tree
Showing 7 changed files with 117 additions and 39 deletions.
4 changes: 2 additions & 2 deletions players/vimeo/popcorn.vimeo.js
View file
Expand Up @@ -29,8 +29,8 @@
media.appendChild( vimeoContainer );

// setting vimeo player's height and width, default to 560 x 315
width = media.style.width ? ""+media.offsetWidth : "560";
height = media.style.height ? ""+media.offsetHeight : "315";
width = media.style.width ? "" + media.offsetWidth : "560";
height = media.style.height ? "" + media.offsetHeight : "315";

var vimeoInit = function() {

Expand Down
1 change: 1 addition & 0 deletions players/vimeo/popcorn.vimeo.unit.html
View file
Expand Up @@ -26,5 +26,6 @@ <h2 id="qunit-userAgent"></h2>

<div id="player_1" style="width: 400px; height: 400px;"></div>
<div id="player_2" style="width: 400px; height: 400px;"></div>
<div id="player_3" ></div>
</body>
</html>
46 changes: 37 additions & 9 deletions players/vimeo/popcorn.vimeo.unit.js
View file
Expand Up @@ -45,7 +45,7 @@ test( "Update Timer", function() {
forwardEnd = false,
backwardStart = false,
backwardEnd = false,
wrapperRunning = { one: false, two: false, };
wrapperRunning = { one: false, two: false };

function plus() {
if ( ++count === expects ) {
Expand Down Expand Up @@ -268,17 +268,17 @@ test( "Plugin Factory", function() {

ok( "media" in this, "executor instance has `media` property" );
plus();
ok( Object.prototype.toString.call( popped.media ) === "[object Object]", "video property is a HTML DIV element" );
ok( typeof popped.media === "object", "video property is a HTML DIV element" );
plus();

ok( "data" in this, "executor instance has `data` property" );
plus();
ok( Object.prototype.toString.call( popped.data ) === "[object Object]", "data property is an object" );
ok( typeof popped.data === "object", "data property is an object" );
plus();

ok( "trackEvents" in this.data, "executor instance has `trackEvents` property" );
plus();
ok( Object.prototype.toString.call( popped.data.trackEvents ) === "[object Object]", "executor trackEvents property is an object" )
ok( typeof popped.data.trackEvents === "object", "executor trackEvents property is an object" );
plus();
},
end: function() {
Expand Down Expand Up @@ -314,17 +314,17 @@ test( "Plugin Factory", function() {

ok( "media" in this, "complicator instance has `media` property" );
plus();
ok( Object.prototype.toString.call( popped.media ) === "[object Object]", "video property is a HTMLVideoElement" );
ok( typeof popped.media === "object", "video property is a HTMLVideoElement" );
plus();

ok( "data" in this, "complicator instance has `data` property" );
plus();
ok( Object.prototype.toString.call( popped.data ) === "[object Object]", "complicator data property is an object" );
ok( typeof popped.data === "object", "complicator data property is an object" );
plus();

ok( "trackEvents" in this.data, " complicatorinstance has `trackEvents` property" );
plus();
ok( Object.prototype.toString.call( popped.data.trackEvents ) === "[object Object]", "complicator trackEvents property is an object" )
ok( typeof popped.data.trackEvents === "object", "complicator trackEvents property is an object" );
plus();
},
end: function() {
Expand Down Expand Up @@ -389,11 +389,11 @@ test( "Popcorn vimeo Plugin Url Regex Test", function() {
var urlTests = [
{ name: "standard",
url: "http://player.vimeo.com/video/6960892",
expected: "http://player.vimeo.com/video/6960892",
expected: "http://player.vimeo.com/video/6960892"
},
{ name: "short url",
url: "http://vimeo.com/6960892",
expected: "http://vimeo.com/6960892",
expected: "http://vimeo.com/6960892"
}
];

Expand Down Expand Up @@ -422,3 +422,31 @@ test( "Popcorn vimeo Plugin Url Regex Test", function() {
});
});
});

test( "Popcorn Vimeo Plugin offsetHeight && offsetWidth Test", function() {

QUnit.reset();
var popped,
elem,
expects = 2,
count = 0;

expect( expects );

function plus() {
if ( ++count === expects ) {
start();
}
}
popped = Popcorn.vimeo( "#player_3", "http://player.vimeo.com/video/6960892" );

popped.listen( "loadeddata", function() {
elem = document.querySelector( "div#player_3 object" );
equals( elem.height, popped.media.offsetHeight, "The media object is reporting the correct offsetHeight" );
plus();
equals( elem.width, popped.media.offsetWidth, "The media object is reporting the correct offsetWidth" );
plus();
});

stop();
});
5 changes: 2 additions & 3 deletions players/youtube/popcorn.youtube.js
View file
Expand Up @@ -192,7 +192,6 @@ Popcorn.player( "youtube", {
media.duration = youtubeObject.getDuration();
media.dispatchEvent( "durationchange" );
volumeupdate();

media.dispatchEvent( "loadeddata" );
};

Expand All @@ -216,8 +215,8 @@ Popcorn.player( "youtube", {
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";
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, width, height, "8", null, flashvars, params, attributes );
Expand Down
7 changes: 4 additions & 3 deletions players/youtube/popcorn.youtube.unit.html
View file
Expand Up @@ -4,7 +4,7 @@
<title>Popcorn YouTube Player</title>
<link rel="stylesheet" href="../../test/qunit/qunit.css" type="text/css" media="screen">
<script src="../../test/qunit/qunit.js"></script>
<!--
<!--
do not move - this must be called immediately prior to popcorn.js.
-->
<script src="../../popcorn.js"></script>
Expand All @@ -18,11 +18,11 @@ <h2 id="qunit-banner"></h2>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture"></div>

<p>
Note about this set of tests:
</p>

<p>
The test assumes that the YouTube video is mostly loaded, before it is run.
Therefore, if failures occur for the first time, just run it again. Likely,
Expand All @@ -36,6 +36,7 @@ <h2 id="qunit-userAgent"></h2>
<div id="video3" style="width: 360px; height: 300px" ></div>
<div id="video4"></div>
<div id="video5" style="width: 0px; height: 0px" ></div>
<div id="video6" style="width: 360px; height: 300px"></div>
</body>
</html>

81 changes: 60 additions & 21 deletions players/youtube/popcorn.youtube.unit.js
View file
Expand Up @@ -12,7 +12,7 @@ test("Update Timer", function () {
forwardEnd = false,
backwardStart = false,
backwardEnd = false,
wrapperRunning = { one: false, two: false, };
wrapperRunning = { one: false, two: false };

function plus() {
if ( ++count === expects ) {
Expand Down Expand Up @@ -166,7 +166,7 @@ test("Update Timer", function () {
p2.play();
});

p2.currentTime(3);
p2.volume( 0 ).currentTime(3);

});

Expand Down Expand Up @@ -207,17 +207,17 @@ test("Plugin Factory", function () {

ok( "media" in this, "executor instance has `media` property" );
plus();
ok( Object.prototype.toString.call(popped.media) === "[object Object]", "video property is a HTML DIV element" );
ok( typeof popped.media === "object", "video property is a HTML DIV element" );
plus();

ok( "data" in this, "executor instance has `data` property" );
plus();
ok( Object.prototype.toString.call(popped.data) === "[object Object]", "data property is an object" );
ok( typeof popped.data === "object", "data property is an object" );
plus();

ok( "trackEvents" in this.data, "executor instance has `trackEvents` property" );
plus();
ok( Object.prototype.toString.call(popped.data.trackEvents) === "[object Object]", "executor trackEvents property is an object" )
ok( typeof popped.data.trackEvents === "object", "executor trackEvents property is an object" );
plus();
},
end: function () {
Expand Down Expand Up @@ -253,17 +253,17 @@ test("Plugin Factory", function () {

ok( "media" in this, "complicator instance has `media` property" );
plus();
ok( Object.prototype.toString.call(popped.media) === "[object Object]", "video property is a HTMLVideoElement" );
ok( typeof popped.media === "object", "video property is a HTMLVideoElement" );
plus();

ok( "data" in this, "complicator instance has `data` property" );
plus();
ok( Object.prototype.toString.call(popped.data) === "[object Object]", "complicator data property is an object" );
ok( typeof popped.data === "object", "complicator data property is an object" );
plus();

ok( "trackEvents" in this.data, " complicatorinstance has `trackEvents` property" );
plus();
ok( Object.prototype.toString.call(popped.data.trackEvents) === "[object Object]", "complicator trackEvents property is an object" )
ok( typeof popped.data.trackEvents === "object", "complicator trackEvents property is an object" );
plus();
},
end: function () {
Expand All @@ -285,7 +285,7 @@ test("Plugin Factory", function () {
end: 5
});

popped.currentTime(0).play();
popped.volume( 0 ).currentTime( 0 ).play();

});

Expand Down Expand Up @@ -318,7 +318,7 @@ test( "Popcorn YouTube Plugin Url and Duration Tests", function() {
popcorn.pause();
});

popcorn.play();
popcorn.volume( 0 ).play();
});

test( "Popcorn YouTube Plugin Url Regex Test", function() {
Expand All @@ -328,28 +328,28 @@ test( "Popcorn YouTube Plugin Url Regex Test", function() {
var urlTests = [
{ name: 'standard',
url: 'http://www.youtube.com/watch?v=9oar9glUCL0',
expected: 'http://www.youtube.com/watch?v=9oar9glUCL0',
expected: 'http://www.youtube.com/watch?v=9oar9glUCL0'
},
{ name: 'share url',
url: 'http://youtu.be/9oar9glUCL0',
expected: 'http://youtu.be/9oar9glUCL0',
expected: 'http://youtu.be/9oar9glUCL0'
},
{ name: 'long embed',
url: 'http://www.youtube.com/embed/9oar9glUCL0',
expected: 'http://www.youtube.com/embed/9oar9glUCL0',
expected: 'http://www.youtube.com/embed/9oar9glUCL0'
},
{ name: 'short embed 1 (e)',
url: 'http://www.youtube.com/e/9oar9glUCL0',
expected: 'http://www.youtube.com/e/9oar9glUCL0',
expected: 'http://www.youtube.com/e/9oar9glUCL0'
},
{ name: 'short embed 2 (v)',
url: 'http://www.youtube.com/v/9oar9glUCL0',
expected: 'http://www.youtube.com/v/9oar9glUCL0',
expected: 'http://www.youtube.com/v/9oar9glUCL0'
},
{ name: 'contains underscore',
url: 'http://www.youtube.com/v/GP53b__h4ew',
expected: 'http://www.youtube.com/v/GP53b__h4ew',
},
expected: 'http://www.youtube.com/v/GP53b__h4ew'
}
];

var count = 0,
Expand All @@ -373,7 +373,7 @@ test( "Popcorn YouTube Plugin Url Regex Test", function() {

start();
}
});
}).volume( 0 );
});
});

Expand All @@ -387,13 +387,15 @@ test( "Controls and Annotations toggling", function() {
targetDiv = document.getElementById( "video" );
testTarget = targetDiv.querySelector( "object" ).data;

popcorn.volume( 0 );

ok( !/controls/.test( testTarget ), "controls are defaulted to 1 ( displayed )" );
ok( !/iv_load_policy/.test( testTarget ), "annotations ( iv_load_policy ) are defaulted to ( enabled )" );

targetDiv.innerHTML = "";

popcorn = Popcorn.youtube( "#video", "http://www.youtube.com/watch?v=9oar9glUCL0&controls=1&iv_load_policy=1" );

popcorn.volume( 0 );
testTarget = targetDiv.querySelector( "object" ).data;
ok( /controls=1/.test( testTarget ), "controls is set to 1 ( displayed )" );
ok( /iv_load_policy=1/.test( testTarget ), "annotations ( iv_load_policy ) is set to 1 ( enabled )" );
Expand Down Expand Up @@ -432,9 +434,47 @@ test( "Player height and width", function() {
}
};

popcorn1.volume( 0 );
popcorn2.volume( 0 );

readyStatePoll();
});

test( "Popcorn Youtube Plugin offsetHeight && offsetWidth Test", function() {

QUnit.reset();
var popped,
elem,
expects = 2,
count = 0;

expect( expects );

function plus() {
if ( ++count === expects ) {
start();
}
}
popped = Popcorn.youtube( "#video6", "http://www.youtube.com/watch?v=9oar9glUCL0" );

var runner = function() {
popped.volume( 0 );
elem = document.querySelector( "div#video6 object" );
equals( elem.height, popped.media.offsetHeight, "The media object is reporting the correct offsetHeight" );
plus();
equals( elem.width, popped.media.offsetWidth, "The media object is reporting the correct offsetWidth" );
plus();
};

if ( popped.readyState >= 2 ) {
runner();
} else {
popped.listen( "loadeddata", runner);
}

stop( 10000 );
});

test( "Player Errors", function() {
QUnit.reset();
expect( 1 );
Expand All @@ -445,5 +485,4 @@ test( "Player Errors", function() {
ok( true, "error trigger by invalid URL" );
start();
});
});

});
12 changes: 11 additions & 1 deletion popcorn.js
View file
Expand Up @@ -1818,13 +1818,23 @@
set: function( val ) {

// make sure val is a number
muted = +val;
muted = !!val;
basePlayer.dispatchEvent( "volumechange" );
return muted;
},
configurable: true
});

Popcorn.forEach( [ "offsetWidth", "offsetHeight" ], function( prop ) {
Popcorn.player.defineProperty( basePlayer, prop, {

get: function() {
return +container[ prop ];
}

});
});

// Adds an event listener to the object
basePlayer.addEventListener = function( evtName, fn ) {

Expand Down

0 comments on commit 2aaf4b1

Please sign in to comment.