Permalink
Browse files

SUCK JAW IT

  • Loading branch information...
1 parent 905ca81 commit 16c22f89229b71343e7cf9e4705335c07b4730a9 @ScottDowne ScottDowne committed Apr 14, 2012
Showing with 6,649 additions and 0 deletions.
  1. +63 −0 image/popcorn.image.html
  2. +145 −0 image/popcorn.image.js
  3. +47 −0 image/popcorn.image.unit.html
  4. +102 −0 image/popcorn.image.unit.js
  5. +94 −0 index.html
  6. +66 −0 modules/locale/popcorn.locale.js
  7. +42 −0 modules/locale/popcorn.locale.unit.html
  8. +83 −0 modules/locale/popcorn.locale.unit.js
  9. +10 −0 modules/parser/data/parseMissing.json
  10. +10 −0 modules/parser/data/parserAudio.json
  11. +10 −0 modules/parser/data/parserData.json
  12. +103 −0 modules/parser/popcorn.parser.js
  13. +47 −0 modules/parser/popcorn.parser.unit.html
  14. +155 −0 modules/parser/popcorn.parser.unit.js
  15. +382 −0 modules/player/popcorn.player.js
  16. +25 −0 modules/player/popcorn.player.unit.html
  17. +332 −0 modules/player/popcorn.player.unit.js
  18. +1 −0 modules/sequence
  19. +64 −0 modules/timeline-sources/popcorn.timeline-sources.js
  20. +45 −0 modules/timeline-sources/popcorn.timeline-sources.unit.html
  21. +79 −0 modules/timeline-sources/popcorn.timeline-sources.unit.js
  22. +179 −0 players/soundcloud/popcorn.soundcloud.html
  23. +185 −0 players/soundcloud/popcorn.soundcloud.js
  24. +39 −0 players/soundcloud/popcorn.soundcloud.unit.html
  25. +251 −0 players/soundcloud/popcorn.soundcloud.unit.js
  26. +234 −0 players/vimeo/popcorn.vimeo.html
  27. +252 −0 players/vimeo/popcorn.vimeo.js
  28. +33 −0 players/vimeo/popcorn.vimeo.unit.html
  29. +434 −0 players/vimeo/popcorn.vimeo.unit.js
  30. +202 −0 players/youtube/popcorn.youtube.html
  31. +345 −0 players/youtube/popcorn.youtube.js
  32. +53 −0 players/youtube/popcorn.youtube.unit.html
  33. +661 −0 players/youtube/popcorn.youtube.unit.js
  34. +1,876 −0 popcorn.js
View
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Popcorn Image Plug-in Demo</title>
+ <script src="../../popcorn.js"></script>
+ <script src="popcorn.image.js"></script>
+ <script>
+ document.addEventListener( "DOMContentLoaded", function() {
+
+ var p = Popcorn( "#video" )
+ .volume( 0 )
+ .play()
+ .image({
+ // seconds
+ start: 5,
+ // seconds
+ end: 15,
+ href: "http://www.drumbeat.org/",
+ src: "https://www.drumbeat.org/media//images/drumbeat-logo-splash.png",
+ text: "DRUMBEAT",
+ target: "imagediv"
+ })
+ .image({
+ // seconds
+ start: 5,
+ // seconds
+ end: 45,
+ // no href
+ src: "http://patriciabergeron.net/wp-content/uploads/web.made_.movie_marquee.gif",
+ target: "imagediv"
+ });
+ }, false);
+
+ </script>
+</head>
+<body>
+ <h1 id="qunit-header">Popcorn Image Plug-in Demo</h1>
+ <p> Two images will appear at 5 seconds.</p>
+ <p> First one (with an overlayed text) will disappear at 15 seconds.</p>
+ <p> Second one (without an overlayed text) will disappear at 45 seconds.</p>
+ <div>
+ <video id="video"
+ controls
+ 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>
+ </div>
+ <div style="width:400px; height:400px" id="imagediv">
+ </div>
+
+</body>
+</html>
View
@@ -0,0 +1,145 @@
+// PLUGIN: IMAGE
+
+(function ( Popcorn ) {
+
+/**
+ * Images popcorn plug-in
+ * Shows an image element
+ * Options parameter will need a start, end, href, target and src.
+ * Start is the time that you want this plug-in to execute
+ * End is the time that you want this plug-in to stop executing
+ * href is the url of the destination of a anchor - optional
+ * Target is the id of the document element that the iframe needs to be attached to,
+ * this target element must exist on the DOM
+ * Src is the url of the image that you want to display
+ * text is the overlayed text on the image - optional
+ *
+ * @param {Object} options
+ *
+ * Example:
+ var p = Popcorn('#video')
+ .image({
+ start: 5, // seconds
+ end: 15, // seconds
+ href: 'http://www.drumbeat.org/',
+ src: 'http://www.drumbeat.org/sites/default/files/domain-2/drumbeat_logo.png',
+ text: 'DRUMBEAT',
+ target: 'imagediv'
+ } )
+ *
+ */
+ Popcorn.plugin( "image", {
+ manifest: {
+ about: {
+ name: "Popcorn image Plugin",
+ version: "0.1",
+ author: "Scott Downe",
+ website: "http://scottdowne.wordpress.com/"
+ },
+ options: {
+ start: {
+ elem: "input",
+ type: "number",
+ label: "In"
+ },
+ end: {
+ elem: "input",
+ type: "number",
+ label: "Out"
+ },
+ href: {
+ elem: "input",
+ type: "url",
+ label: "anchor URL",
+ optional: true
+ },
+ target: "image-container",
+ src: {
+ elem: "input",
+ type: "url",
+ label: "Source URL"
+ },
+ text: {
+ elem: "input",
+ type: "text",
+ label: "TEXT",
+ optional: true
+ }
+ }
+ },
+ _setup: function( options ) {
+ var img = document.createElement( "img" ),
+ target = document.getElementById( options.target );
+
+ options.anchor = document.createElement( "a" );
+ options.anchor.style.position = "relative";
+ 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 );
+
+ img.addEventListener( "load", function() {
+
+ // borders look really bad, if someone wants it they can put it on their div target
+ img.style.borderStyle = "none";
+
+ options.anchor.href = options.href || options.src || "#";
+ options.anchor.target = "_blank";
+
+ var fontHeight, divText;
+
+
+ // If display text was provided, display it:
+ if ( options.text ) {
+ fontHeight = ( img.height / 12 ) + "px";
+ divText = document.createElement( "div" );
+
+ Popcorn.extend( divText.style, {
+ color: "black",
+ fontSize: fontHeight,
+ fontWeight: "bold",
+ position: "relative",
+ textAlign: "center",
+ width: img.width + "px",
+ zIndex: "10"
+ });
+
+ divText.innerHTML = options.text || "";
+ divText.style.top = ( img.height / 2 ) - ( divText.offsetHeight / 2 ) + "px";
+ options.anchor.appendChild( divText );
+ }
+
+ options.anchor.appendChild( img );
+ }, false );
+
+ img.src = options.src;
+ },
+
+ /**
+ * @member image
+ * The start function will be executed when the currentTime
+ * of the video reaches the start time provided by the
+ * options variable
+ */
+ start: function( event, options ) {
+ options.anchor.style.display = "inline";
+ },
+ /**
+ * @member image
+ * The end function will be executed when the currentTime
+ * of the video reaches the end time provided by the
+ * options variable
+ */
+ end: function( event, options ) {
+ options.anchor.style.display = "none";
+ },
+ _teardown: function( options ) {
+ document.getElementById( options.target ) && document.getElementById( options.target ).removeChild( options.anchor );
+ }
+ });
+})( Popcorn );
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Popcorn Image 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.image.js"></script>
+ <script src="popcorn.image.unit.js"></script>
+ <script src="../../test/inject.js"></script>
+</head>
+<body>
+ <h1 id="qunit-header">Popcorn Image Plug-in Test</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
+ 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 idl"webm"
+ src="../../test/trailer.webm"
+ type='video/webm; codecs="vp8, vorbis"'>
+
+ <p>Your user agent does not support the HTML5 Video element.</p>
+
+ </video>
+ <div id="imagediv"></div>
+ <div id="zerostart"></div>
+</body>
+</html>
View
@@ -0,0 +1,102 @@
+asyncTest( "Popcorn Image Plugin", function() {
+
+ var popped = Popcorn( "#video" ),
+ expects = 9,
+ count = 0,
+ setupId,
+ imagediv = document.getElementById( "imagediv" ),
+ sources = [
+ "https://www.drumbeat.org/media//images/drumbeat-logo-splash.png",
+ "http://www.petmountain.com/category/mini/organic-dog-supplies/520/organic-dog-supplies.jpg",
+ "http://www.botskool.com/sites/default/files/images/javascript.png"
+ ];
+
+ expect( expects );
+
+ function plus() {
+ if ( ++count === expects ) {
+ popped.destroy();
+ start();
+ }
+ }
+
+ ok( "image" in popped, "image is a method of the popped instance" );
+ plus();
+
+ equal( imagediv.innerHTML, "", "initially, there is nothing inside the imagediv" );
+ plus();
+
+ popped.image({
+ start: 1,
+ end: 3,
+ href: "http://www.drumbeat.org/",
+ src: sources[ 0 ],
+ text: "DRUMBEAT",
+ target: "imagediv"
+ })
+ .image({
+ start: 4,
+ end: 6,
+ src: sources[ 1 ],
+ target: "imagediv"
+ })
+ .image({
+ start: 5,
+ end: 6,
+ src: sources[ 2 ],
+ target: "imagediv"
+ });
+
+ setupId = popped.getLastTrackEventId();
+
+ popped.cue( 2, function() {
+ ok( imagediv.children[ 0 ].style.display !== "none", "inline", "Div contents are displayed" );
+ plus();
+ equal( imagediv.querySelector("img").nodeName, "IMG", "An image exists" );
+ plus();
+ });
+
+ popped.cue( 3, function() {
+ equal( imagediv.children[ 0 ].style.display, "none", "Div contents are hidden again" );
+ plus();
+ });
+
+ popped.cue( 5, function() {
+ [].forEach.call( document.querySelectorAll( "#imagediv a img" ), function( img, idx ) {
+ ok( img.src === sources[ idx ], "Image " + idx + " is in the right order" );
+ plus();
+ });
+ });
+
+ popped.cue( 7, function() {
+ popped.pause().removeTrackEvent( setupId );
+ ok( !imagediv.children[ 2 ], "removed image was properly destroyed" );
+ plus();
+ });
+
+ popped.volume( 0 ).play();
+});
+
+
+asyncTest( "Zerostart doesn't rehide", 1, function() {
+ var popped = Popcorn( "#video" ),
+ zerostart = document.getElementById( "zerostart" );
+
+ popped.on( "canplayall", function() {
+ popped.currentTime(0);
+
+ popped.image({
+ start: 0,
+ end: 3,
+ src: "https://www.drumbeat.org/media/images/drumbeat-logo-splash.png",
+ target: "zerostart"
+ });
+
+ popped.cue( 1, function() {
+ ok( zerostart.children[ 0 ].style.display !== "none", "display area displayed at start: 0 without re-hiding" );
+ start();
+ });
+
+ popped.play();
+ });
+});
Oops, something went wrong.

0 comments on commit 16c22f8

Please sign in to comment.