1 // PLUGIN: Code

     2 

     3 (function ( Popcorn ) {

     4 

     5   /**

     6    * Code Popcorn Plug-in

     7    *

     8    * Adds the ability to run arbitrary code (JavaScript functions) according to video timing.

     9    *

    10    * @param {Object} options

    11    *

    12    * Required parameters: start, end, template, data, and target.

    13    * Optional parameter: static.

    14    *

    15    *   start: the time in seconds when the mustache template should be rendered

    16    *          in the target div.

    17    *

    18    *   end: the time in seconds when the rendered mustache template should be

    19    *        removed from the target div.

    20    *

    21    *   onStart: the function to be run when the start time is reached.

    22    *

    23    *   onFrame: [optional] a function to be run on each paint call

    24    *            (e.g., called ~60 times per second) between the start and end times.

    25    *

    26    *   onEnd: [optional] a function to be run when the end time is reached.

    27    *

    28    * Example:

    29      var p = Popcorn('#video')

    30 

    31         // onStart function only

    32         .code({

    33           start: 1,

    34           end: 4,

    35           onStart: function( options ) {

    36             // called on start

    37           }

    38         })

    39 

    40         // onStart + onEnd only

    41         .code({

    42           start: 6,

    43           end: 8,

    44           onStart: function( options ) {

    45             // called on start

    46           },

    47           onEnd: function ( options ) {

    48             // called on end

    49           }

    50         })

    51 

    52         // onStart, onEnd, onFrame

    53         .code({

    54           start: 10,

    55           end: 14,

    56           onStart: function( options ) {

    57             // called on start

    58           },

    59           onFrame: function ( options ) {

    60             // called on every paint frame between start and end.

    61             // uses mozRequestAnimationFrame, webkitRequestAnimationFrame,

    62             // or setTimeout with 16ms window.

    63           },

    64           onEnd: function ( options ) {

    65             // called on end

    66           }

    67         });

    68   *

    69   */

    70 

    71   Popcorn.plugin( "code" , function( options ) {

    72     var running = false;

    73 

    74     // Setup a proper frame interval function (60fps), favouring paint events.

    75     var step = (function() {

    76 

    77       var buildFrameRunner = function( runner ) {

    78         return function( f, options ) {

    79 

    80           var _f = function() {

    81             running && f();

    82             running && runner( _f );

    83           };

    84 

    85           _f();

    86         };

    87       };

    88 

    89       // Figure out which level of browser support we have for this

    90       if ( window.webkitRequestAnimationFrame ) {

    91         return buildFrameRunner( window.webkitRequestAnimationFrame );

    92       } else if ( window.mozRequestAnimationFrame ) {

    93         return buildFrameRunner( window.mozRequestAnimationFrame );

    94       } else {

    95         return buildFrameRunner( function( f ) {

    96           window.setTimeout( f, 16 );

    97         });

    98       }

    99 

   100     })();

   101 

   102     if ( !options.onStart || typeof options.onStart !== "function" ) {

   103 

   104       if ( Popcorn.plugin.debug ) {

   105         throw new Error( "Popcorn Code Plugin Error: onStart must be a function." );

   106       }

   107       options.onStart = Popcorn.nop;

   108     }

   109 

   110     if ( options.onEnd && typeof options.onEnd !== "function" ) {

   111 

   112       if ( Popcorn.plugin.debug ) {

   113         throw new Error( "Popcorn Code Plugin Error: onEnd  must be a function." );

   114       }

   115       options.onEnd = undefined;

   116     }

   117 

   118     if ( options.onFrame && typeof options.onFrame !== "function" ) {

   119 

   120       if ( Popcorn.plugin.debug ) {

   121         throw new Error( "Popcorn Code Plugin Error: onFrame  must be a function." );

   122       }

   123       options.onFrame = undefined;

   124     }

   125 

   126     return {

   127       start: function( event, options ) {

   128         options.onStart( options );

   129 

   130         if ( options.onFrame ) {

   131           running = true;

   132           step( options.onFrame, options );

   133         }

   134       },

   135 

   136       end: function( event, options ) {

   137         if ( options.onFrame ) {

   138           running = false;

   139         }

   140 

   141         if ( options.onEnd ) {

   142           options.onEnd( options );

   143         }

   144       }

   145     };

   146   },

   147   {

   148     about: {

   149       name: "Popcorn Code Plugin",

   150       version: "0.1",

   151       author: "David Humphrey (@humphd)",

   152       website: "http://vocamus.net/dave"

   153     },

   154     options: {

   155       start: {

   156        elem: "input",

   157        type: "text",

   158        label: "In"

   159       },

   160       end: {

   161         elem: "input",

   162         type: "text",

   163         label: "Out"

   164       },

   165       onStart: {

   166         elem: "input",

   167         type: "function",

   168         label: "onStart"

   169       },

   170       onFrame: {

   171         elem: "input",

   172         type: "function",

   173         label: "onFrame"

   174       },

   175       onEnd: {

   176         elem: "input",

   177         type: "function",

   178         label: "onEnd"

   179       }

   180     }

   181   });

   182 })( Popcorn );