# HG changeset patch # User hamidouk # Date 1319013467 -7200 # Node ID e03b41037be142e1942eebf2b41642e9586590f0 # Parent a66b10b06c0190d2322efe98c4ccca54c3d407ba added popcorn code plugin to the build. diff -r a66b10b06c01 -r e03b41037be1 sbin/build/client.xml --- a/sbin/build/client.xml Wed Oct 19 10:37:15 2011 +0200 +++ b/sbin/build/client.xml Wed Oct 19 10:37:47 2011 +0200 @@ -70,7 +70,7 @@ - + diff -r a66b10b06c01 -r e03b41037be1 src/js/popcorn.code.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/js/popcorn.code.js Wed Oct 19 10:37:47 2011 +0200 @@ -0,0 +1,182 @@ +// PLUGIN: Code + +(function ( Popcorn ) { + + /** + * Code Popcorn Plug-in + * + * Adds the ability to run arbitrary code (JavaScript functions) according to video timing. + * + * @param {Object} options + * + * Required parameters: start, end, template, data, and target. + * Optional parameter: static. + * + * start: the time in seconds when the mustache template should be rendered + * in the target div. + * + * end: the time in seconds when the rendered mustache template should be + * removed from the target div. + * + * onStart: the function to be run when the start time is reached. + * + * onFrame: [optional] a function to be run on each paint call + * (e.g., called ~60 times per second) between the start and end times. + * + * onEnd: [optional] a function to be run when the end time is reached. + * + * Example: + var p = Popcorn('#video') + + // onStart function only + .code({ + start: 1, + end: 4, + onStart: function( options ) { + // called on start + } + }) + + // onStart + onEnd only + .code({ + start: 6, + end: 8, + onStart: function( options ) { + // called on start + }, + onEnd: function ( options ) { + // called on end + } + }) + + // onStart, onEnd, onFrame + .code({ + start: 10, + end: 14, + onStart: function( options ) { + // called on start + }, + onFrame: function ( options ) { + // called on every paint frame between start and end. + // uses mozRequestAnimationFrame, webkitRequestAnimationFrame, + // or setTimeout with 16ms window. + }, + onEnd: function ( options ) { + // called on end + } + }); + * + */ + + Popcorn.plugin( "code" , function( options ) { + var running = false; + + // Setup a proper frame interval function (60fps), favouring paint events. + var step = (function() { + + var buildFrameRunner = function( runner ) { + return function( f, options ) { + + var _f = function() { + running && f(); + running && runner( _f ); + }; + + _f(); + }; + }; + + // Figure out which level of browser support we have for this + if ( window.webkitRequestAnimationFrame ) { + return buildFrameRunner( window.webkitRequestAnimationFrame ); + } else if ( window.mozRequestAnimationFrame ) { + return buildFrameRunner( window.mozRequestAnimationFrame ); + } else { + return buildFrameRunner( function( f ) { + window.setTimeout( f, 16 ); + }); + } + + })(); + + if ( !options.onStart || typeof options.onStart !== "function" ) { + + if ( Popcorn.plugin.debug ) { + throw new Error( "Popcorn Code Plugin Error: onStart must be a function." ); + } + options.onStart = Popcorn.nop; + } + + if ( options.onEnd && typeof options.onEnd !== "function" ) { + + if ( Popcorn.plugin.debug ) { + throw new Error( "Popcorn Code Plugin Error: onEnd must be a function." ); + } + options.onEnd = undefined; + } + + if ( options.onFrame && typeof options.onFrame !== "function" ) { + + if ( Popcorn.plugin.debug ) { + throw new Error( "Popcorn Code Plugin Error: onFrame must be a function." ); + } + options.onFrame = undefined; + } + + return { + start: function( event, options ) { + options.onStart( options ); + + if ( options.onFrame ) { + running = true; + step( options.onFrame, options ); + } + }, + + end: function( event, options ) { + if ( options.onFrame ) { + running = false; + } + + if ( options.onEnd ) { + options.onEnd( options ); + } + } + }; + }, + { + about: { + name: "Popcorn Code Plugin", + version: "0.1", + author: "David Humphrey (@humphd)", + website: "http://vocamus.net/dave" + }, + options: { + start: { + elem: "input", + type: "text", + label: "In" + }, + end: { + elem: "input", + type: "text", + label: "Out" + }, + onStart: { + elem: "input", + type: "function", + label: "onStart" + }, + onFrame: { + elem: "input", + type: "function", + label: "onFrame" + }, + onEnd: { + elem: "input", + type: "function", + label: "onEnd" + } + } + }); +})( Popcorn );