After sending my previous code off for review, as I have heard and come to expect, it came back to me as “review-needs-work“.

Most of the problems were about whitespace and code style but some were about tiny errors in the code too.

Having fixed all the points (or at least I hope so!) in dseif’s review, here is the revised code:

Code on github

Demo on the internet

Unit test on the internet

Syntax errors have thrown me off but here’s to being one step closer to being a contributing developer to an open source project!


0.2 has come and gone and while I am still waiting on some more info for the manifest ticket

The Instagram plugin is up and running!

View a demo of it here: Instagram demo.

The previous trouble I had with this plugin was solved with a Ctrl-A + Del of the existing code I had and starting over again! It really is true when your prof says to write code that you’re just going to throw away.

The code that I didn’t throw away is here:popcorn.instagram.js on github. The ticket is here.

I referenced the flickr plugin code when I re-wrote the code. What made me decide to look at flickr was that it’s also a plugin that relies on getting (a lot of) image data from a service and being able to display it to the user at the specific time it is requested. After looking through the code, I realized what I was doing wrong. I was retrieving the JSON data at the specified time of the video. This isn’t the ideal way to do this since getting a response from the api and loading images take some time to load. The best way was to have the images preloaded i.e. before it is requested in the video.

I’m fairly certain that it was because I was setting it up wrong – I had my setup code in the return statement of the plugin code. My setup code should be placed before the return statement. See below.

Popcorn.plugin( "instagram" , function( options ) {
//code goes here

return {

// Wrong, setup code doesn't go here if it needs to be preloaded
// _setup: function( options ){
// },

start: function( event,options){},
ends: function( event,options){},
_teardown:function( options ){}

My next step in this release is to update the ticket on lighthouse.

I’m glad that I took on this plugin. I’m hoping to improve it and maybe add the option for the user to specify a # of images to retrieve and maybe show it in a scrollable div. Another request that can be made to the api is searching for images with a specified tag. I’ll try and include these in the next release.

Thanks for reading! I appreciate any comments and suggestions!

I’ve been having a difficult time trying to get the Instagram plugin to work properly. The images don’t load early enough for them to be rendered on the page in sync with the requested times. This is so disappointing since I, acting as an end user, am just waiting there wondering where is the image I’m supposed to be seeing and then suddenly I see it for 2 seconds then there goes the next image trying to load.

After some code analyzing and debugging (firebug is great, btw) I think it might have something to do with which part of the code is executed first — actually I’m pretty sure it has something to do with the running code sequence.

I’ve been looking at the source code for other plugins like flickr and and they’ve helped lots with setting up the plugin code and formatting the containing div and such so I’ll have to check back and analyze and try and figure out how to get my images preloaded before reaching the specified video time.

JSON troubles up ahead…
Read More

Just finished building Firefox on my (virtual) Linux machine! I figured building it in linux would be so much better than building in Windows and so it has saved me from the problems that other people have encountered. I actually had to build it twice because somehow my flags in the .mozconfig file didn’t apply when I first built it =S but aside from that, based loosely on Mozilla’s guide and partly on class notes, here are the steps I took to create a DEBUG build of Firefox on Ubuntu

  1. Install required tools
    sudo apt-get build-dep firefox
    sudo apt-get install libasound2-dev libcurl4-openssl-dev libnotify-dev libxt-dev libiw-dev mesa-common-dev autoconf2.13 yasm
  2. Get the source code (humphd’s mozilla-central repo OR main repo)
  3. Add the following code to a “.mozconfig” file to create a debug build (I created the file in the main “mozilla-central” folder)
    . $topsrcdir/browser/config/mozconfig
    ac_add_options --disable-optimize
    ac_add_options --enable-debug
    ac_add_options --enable-tests
  4. Run the make command (and time it to see how long it takes)
    time make -f
  5. Wait.
  6. Enjoy.

Some stats for my laptop:

  • RAM: 3.5GB
  • Processor: Intel(R) Core(TM)2 Duo CPU T8300 @ 2.40GHz

And for the Ubuntu virtual machine (virtual settings):

  • RAM: 1283mb (I initially set it up like this and forgot to increase it)
  • Processor: x 2

First try: 2 hours and 18 minutes (Release Build)

Second try: 80 minutes (Debug Build) NOTE: I also increased the RAM this time to 1.8gb and added “mk_add_options MOZ_MAKE_FLAGS=-j5” to my .mozconfig file

So I’ve now got Firefox Nightly up and running. Up next: adding “printf”s

I just filed my first ticket on the Popcorn.js bug tracking system! I’ll be creating an Instagram plugin!

I’m super excited about this since Instagram is such a fun app to use. If you don’t know about it, it’s a social image-editing/sharing/liking/commenting/tagging app which has many photo filters and a good interface for it but/and is currently iPhone only (I know what you’re thinking…)

I use it frequently and so do many others as well (starbucks, justinbieber, etc). It’s got 12 million users so surely, there’ll be use for this plugin right?

And since I stumbled on the Instagram API I thought it would be a great chance for me to create a plugin for Popcornjs – I haven’t seen anything like this for popcorn and thought it would be great to implement it AND I needed to find something new to work on for my open-source course. 2 birds, 1 stone.

I’m really looking forward to this and I’ll try and keep this blog updated with my struggles and accomplishments.

I’ll share with you my most recent picture taken during an FSOSS presentation.

Ticket #554: Add manifest data to parsers and players

I’ve chosen to work on a ticket for the Popcorn.js project. The aim of the popcorn project is to bring more user interaction into a video. Instead of adding captions at a certain time, you can show related info such as tweets, images, wiki articles, googlenews, etc etc… It’s really going to pave the way for increased user interaction and interest in the video world.

Right now, the plugins (twitter, facebook, flickr, googlemaps, etc) for popcorn have a manifest within the code. This manifest is to help the app developer integrate the plugin to their video. As per Bobby Richter (irc: secretrobotron):

Plugins have a manifest so we can glean a bunch of information about how to build an instance of one when an event is constructed

Since parsers and players (such as youtube or soundcloud) are also available in popcorn, it would also be great to have manifests included in them as well. Seems easy enough right? Well, the hard part in this is figuring out exactly what should be in the manifest?? I’ve looked over the format of manifests in plugins and I’ve kind of got an idea of the least information that a player should have.

Among the many that I looked at, I considered the Attribution plugin manifest:

manifest: {
    name: "Popcorn Attribution Plugin",
    version: "0.1",
    author: "@annasob",
    website: ""
    start              : {elem:'input', type:'text', label:'In'},
    end                : {elem:'input', type:'text', label:'Out'},
    nameofwork         : {elem:'input', type:'text', label:'Name of Work'},
    nameofworkurl      : {elem:'input', type:'text', label:'Url of Work'},
    copyrightholder    : {elem:'input', type:'text', label:'Copyright Holder'},
    copyrightholderurl : {elem:'input', type:'text', label:'Copyright Holder Url'},
    license            : {elem:'input', type:'text', label:'License type'},
    licenseurl         : {elem:'input', type:'text', label:'License URL'},
    target             : 'attribution-container'

Look at all that manifest info! (If you want to see an example of an even lengthier manifest check out the Facebook plugin).

So I thought that I could extrapolate something from the above to create a base manifest structure that the other player manifests will follow from:

manifest: {
  about: {
    name      : "VideoPlayer Name Here",
    version   : "0.0",
    container : "iframe or div"
  options: {
    width    : { elem: "input", type: "text", label: "Width" },
    height   : { elem: "input", type: "text", label: "Height" },
    name     : { elem: "input", type: "text", label: "Name" },
    src      : { elem: "input", type: "text", label: "Video Source" },
    vid-duration : { elem: "input", type: "text", label: "Duration" },

Currently, I’m not sure whether the players act like the plugins do, like if you have a plugin for flickr and an image appears at the specified time, will a player also be able to do the same thing and appear alongside another video at the appointed time?? That’s a question that I will definitely need an answer for.

As for parsers, so far I’ve got:

manifest: {
  about: {
    name      : "JSON Parser",
    full-name : "JavaScript Object Notation",
    version   : "0.0"

It’s not much as I’m unsure what else to put under parser manifest, what else do you think would be useful?

It isn’t much of a release, but I guess you could say I am releasing a proof of concept!

The syntax and structure of all this code is something I’ve never really seen before and I am doing my absolute best to understand how these plugins/parsers/players all work. Any comments, suggestions, observations at all, please comment on this post, I would love to get feedback!


After having just finished my co-op term, I’ve decided to use some of the tips I learned during that time. The one tip I’m integrating right now into my workflow is “Develop and write code on a virtual machine”. During co-op I used Ubuntu 11.04 to write code and also test it. This was actually very convenient since if  I was installing packages and such, I could create a snapshot of my machine before installing those packages and if anything went wrong after the install, then I could just revert to the previous snapshot! Very handy. It’s much like Windows Restore but by doing this on a virtual machine, my actual machine doesn’t get affected.

What I also like about using a linux based OS is that open source languages and projects work so much more seamlessly on it. Just imagine having to install Apache, MySql and PHP on a Windows machine! I did that many many years ago, and it was very confusing. (It could just be that I was young and a closet-programmer and much too eager to read documentation >_> )

Read More