From 5e9f216540e760763eac2fdf19f17e52a4943b6a Mon Sep 17 00:00:00 2001 From: Sanj Date: Fri, 18 May 2012 03:14:28 +0530 Subject: [PATCH] return this.each() to work nicely with chaining as well as multiple jquery elements --- jquery.pandoravideo.js | 103 ++++++++++++++++++++++++----------------- 1 file changed, 60 insertions(+), 43 deletions(-) diff --git a/jquery.pandoravideo.js b/jquery.pandoravideo.js index 637746b..87f79fe 100644 --- a/jquery.pandoravideo.js +++ b/jquery.pandoravideo.js @@ -1,56 +1,68 @@ 'use strict'; +/* + jQuery plugin to embed video from a pan.do/ra instance + Usage: + html: +
+ js: + $('#video').pandoravideo(); + + Options can be passed as data- attributes in the html or in an options object - read code for docs +*/ + (function($) { $.fn.pandoravideo = function(options) { //get options, giving preference, in order, to data- attributes defined on the html element, options passed when instantiatiing $(element).pandoravideo(options), defaults. var options = options || {}, namespace = options.namespace || "pandora", - $this = this; - - - var optionTypes = { - 'strings': ['api', 'base', 'resolution', 'action', 'id'], - 'integers': ['in', 'out', 'width', 'interval'], - 'arrays': ['layers', 'keys'], - 'booleans': [] - //'functions': ['callback'] FIXME: lets not. - }; + + optionTypes = { + 'strings': ['api', 'base', 'resolution', 'action', 'id'], + 'integers': ['width', 'interval'], + 'floats': ['in', 'out'], + 'arrays': ['layers', 'keys'], + 'booleans': [] + //'functions': ['callback'] FIXME: lets not. + }; - var dataOptions = $.extend(options, $this.getDataOptions(optionTypes, namespace)); + + return this.each(function() { + + var $this = $(this), + dataOptions = $.extend(options, $this.getDataOptions(optionTypes, namespace)), + opts = $.extend({ + 'id': 'ABC', //FIXME: throw an error if id is undefined at this point + 'layers': ['transcripts', 'descriptions', 'keywords', 'places'], + 'keys': ['layers'], //data keys to fetch from API call. FIXME: add more apt keys + 'api': "//pad.ma/api/", //pandora instance api end-point - see http://pad.ma/api + 'in': 0, //in point (float, in seconds) of clip + 'out': 0, //out point of clip + 'pandora_base': 'pad.ma/', //pandora instance from where to fetch video and image data + 'resolution': '480p', //resolution of video (96p, 240p, or 480p) + 'width': '640', //display (css) width + 'interval': 300, //interval (in ms) to run updatePlayer polling loop + 'action': 'get', //action POST param to send to url + 'callback': function() { $.noop(); } //function to call after done instantiating pandoraVideo object, called with the object. + }, dataOptions), + id = opts.id, + $loading = $('
').addClass("pandoraLoading").text("Loading video...").appendTo($this), + sendData = JSON.stringify({'id': id, 'keys': opts.keys}); - var opts = $.extend({ - 'id': 'ABC', //FIXME: throw an error if id is undefined at this point - 'layers': ['transcripts', 'descriptions', 'keywords', 'places'], - 'keys': ['layers'], //data keys to fetch from API call. FIXME: add more apt keys - 'api': "//pad.ma/api/", //pandora instance api end-point - see http://pad.ma/api - 'in': 0, //in point (float, in seconds) of clip - 'out': 0, //out point of clip - 'pandora_base': '//pad.ma/', //pandora instance from where to fetch video and image data - 'resolution': '480p', //resolution of video (96p, 320p, or 480p) - 'width': '640', //display (css) width - 'interval': 300, //interval (in ms) to run updatePlayer polling loop - 'action': 'get', //action POST param to send to url - 'callback': function() { $.noop(); } //function to call after done instantiating pandoraVideo object, called with the object. - }, dataOptions); + //get the pandora id and instantiate a pandoraVideo object with the current element and render it and execute optional callback + var deferred = $.post(opts.api, {'action': opts.action, 'data': sendData}, function(response) { + $loading.hide().remove(); + var pandora = new PandoraVideo(id, response.data, $this, opts); + pandora.render(); + opts.callback(pandora); + }, "json"); - //get the pandora id and instantiate a pandoraVideo object with the current element and render it and execute optional callback - var id = opts.id, - $loading = $('
').addClass("pandoraLoading").text("Loading video...").appendTo($this), - sendData = JSON.stringify({'id': id, 'keys': opts.keys}); - - var deferred = $.post(opts.api, {'action': opts.action, 'data': sendData}, function(response) { - $loading.hide().remove(); - var pandora = new PandoraVideo(id, response.data, $this, opts); - pandora.render(); - opts.callback(pandora); - }, "json"); - - deferred.error(function(data) { - alert("failed to load video data"); + deferred.error(function(data) { + alert("failed to load video data"); + }); }); }; - /* pandoraVideo class Parameters: @@ -68,7 +80,8 @@ this.o = opts; this.annotPoint = -1; this.getVideoURL = function() { - return opts.pandora_base + id + "/" + opts.resolution + ".webm"; + var rand = parseInt(Math.random() * 10000); + return "//video" + rand + "." + opts.pandora_base + id + "/" + opts.resolution + ".webm"; }; //empties element, appends video widget @@ -184,11 +197,11 @@ //first, handle if video has crossed out-point or is before in-point if (that.o.out != 0) { - if (currentTime >= that.o.out) { + if (currentTime > (that.o.out + 2)) { that.$video[0].currentTime = that.o.out; that.$video[0].pause(); } - if (currentTime <= that.o['in']) { + if (currentTime < (that.o['in'] - 2)) { that.$video[0].currentTime = that.o['in']; that.$video[0].pause(); } @@ -341,6 +354,10 @@ var attr = prefix + v; options[v] = $element.hasAttr(attr) ? parseInt($element.attr(attr)) : undefined; }); + $.each(optionTypes['floats'], function(i,v) { + var attr = prefix + v; + options[v] = $element.hasAttr(attr) ? parseFloat($element.attr(attr)) : undefined; + }); $.each(optionTypes['arrays'], function(i,v) { var attr = prefix + v; options[v] = $element.hasAttr(attr) ? $.map($element.attr(attr).split(","), $.trim) : undefined;