Skip to content
Permalink
Browse files

caption plugin has been completed along with unit testing

  • Loading branch information...
moussa1 committed Oct 28, 2011
1 parent dab9c4a commit 8b342d909ecdf2ca99cd0ce06823cae2ba38e5d8
@@ -17,17 +17,17 @@
text: 'this is caption #1',
color: 'red',
size: 10,
posx: 100,
posy: 100,
posx: 200,
posy: 30,
} )
.caption({
start: 7, // seconds
end: 14, // seconds
text: 'this is caption #2',
color: 'yellow',
size: 40,
posx: 0,
posy: 0,
size: 10,
posx: 30,
posy: 100,
} )
}, false);
@@ -41,7 +41,7 @@ <h1 id="qunit-header">Popcorn Caption Plug-in Demo</h1>
<div>

<video id='video'
controls height="480" width="785"
controls height="240" width="390"
poster="../../test/poster.png">

<source id='mp4'
@@ -14,8 +14,8 @@
// the video element must have height and width defined
style.width = media.offsetWidth + "px";

//style.top = position.top + "px";
//style.left = position.left + "px";
style.top = position.top + "px";
style.left = position.left + "px";

setTimeout( updatePosition, 10 );
};
@@ -119,18 +119,9 @@
newdiv.style.color = options.color;
newdiv.style.fontSize = options.size + "px";

//newdiv.style.top = "0px";
//newdiv.style.left = "0px";

newdiv.style.top = this.position().top + 1 + "px";
newdiv.style.left = this.position().left + 1 + "px";

console.log( "position", this.position());

console.log( "newdiv position", newdiv.style.top );

//newdiv.style.border = "1px solid #0000ff";

newdiv.style.top = ( options.posy > this.position().height ) ? this.position().height + "px" : options.posy + "px";
newdiv.style.left = ( options.posx > this.position().width ) ? this.position().width + "px" : options.posx + "px";

// Creates a div for all captions to use
( !this.container && ( !options.target || options.target === "caption-container" ) ) &&
createDefaultContainer( this );
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html>
<head>
<title>Popcorn caption Plug-in Test</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-api-draft.js
-->

<script src="../../popcorn.js"></script>

<script src="popcorn.caption.js"></script>
<script src="popcorn.caption.unit.js"></script>
</head>
<body>
<h1 id="qunit-header">Popcorn Caption Plugin</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture"> </div>

<video id='video'
controls preload='none'
width= '250px'
poster="../../test/poster.png">

<source id='mp4'
src="../../test/trailer.mp4"
type='video/mp4; codecs="avc1, mp4a"'>

<source id='ogv'
src="../../test/trailer.ogv"
type='video/ogg; codecs="theora, vorbis"'>

<source id='webm'
src="../../test/trailer.webm"
type='video/webm; codecs="vp8, vorbis"'>

<p>Your user agent does not support the HTML5 Video element.</p>

</video>
<video id='video2'
controls preload='none'
width= '250px'
poster="../../test/poster.png">

<source id='mp4'
src="../../test/trailer.mp4"
type='video/mp4; codecs="avc1, mp4a"'>

<source id='ogv'
src="../../test/trailer.ogv"
type='video/ogg; codecs="theora, vorbis"'>

<p>Your user agent does not support the HTML5 Video element.</p>

</video>
</body>
</html>
@@ -0,0 +1,124 @@
test("Popcorn Caption Plugin", function () {

var popped = Popcorn( "#video" ),
popped2 = Popcorn( "#video2" ),
expects = 6,
count = 0,
posx,
posy,
captiondiv,
caption2div;

expect(expects);

function plus() {
if ( ++count === expects ) {
start();
}
}

stop( 12000 );

ok ( 'caption' in popped, "caption is a method of the popped instance" );
plus();

popped.caption({
start: 0,
end: 2,
text: 'this is the first caption of 2011',
color: 'red',
size: 10,
posx: 50,
posy: 30
} )
.caption({
start: 2,
end: 4,
text: 'this is the second caption of 2011',
color: 'white',
size: 15,
posx: 100,
posy: 50
} )
.volume( 0 )
.play();

captiondiv = popped.getTrackEvent( popped.getLastTrackEventId() ).container;

popped.caption({
start: 7,
end: 9,
text: 'instance one test',
color: 'green',
size: 10,
posx: 100,
posy: 50
});

popped2.caption({
start: 7,
end: 9,
text: 'instance two test',
color: 'blue',
size: 15,
posx: 20,
posy: 20
})
.volume(0)
.play().pause();

caption2div = popped2.getTrackEvent( popped2.getLastTrackEventId() ).container;

popped.exec( 1, function() {

popped.media.pause();
equals( captiondiv.children[ 0 ].innerHTML, "this is the first caption of 2011", "caption displaying correct information" );
plus();

ok( captiondiv.children[ 0 ].style.top === "30px", "posy for caption 1 is correct" );
plus();

popped.media.play();

});

popped.exec( 4, function() {

popped.media.pause();
equals (captiondiv.children[ 1 ].innerHTML, "", "caption is clear" );
plus();

popped.media.play();

});

popped.exec( 8, function() {
popped.pause();
popped2.currentTime( 8 ).play();
});

popped2.exec( 8, function() {

popped2.pause();

//let's test to see if the posx for caption 4 for the second video is correct
ok( caption2div.children[ 0 ].style.left === "20px", "posx for caption 4 is correct" );
plus();

popped.media.play();

});

popped.exec( 10, function() {

//let's test to see if the all the caption divs disappeared at 10 seconds for video 1
//the last caption for video 1 should end at 9 seconds
ok( document.getElementById( "caption-0" ).style.display === "none" &&
document.getElementById( "caption-1" ).style.display === "none" &&
document.getElementById( "caption-2" ).style.display === "none", "All captions are no longer visible" );
plus();

});

});

0 comments on commit 8b342d9

Please sign in to comment.
You can’t perform that action at this time.