Popcorn.js - Facebook plugin

I've been meaning to make this blog post for weeks now but kept putting it off. I made a facebook plugin :). This was pretty easy considering facebook provides a page full of plugins ( http://developers.facebook.com/docs/plugins/ ). In fact, it's so easy I'll do it right now

Now I know where all those blasted "like" buttons keep coming from...

Now we can put like buttons and all sorts of stuff around the Popcorn video player. But why hard code a plugin tag?
Why make an iframe with 10 attributes when I can do this?:

var p = Popcorn('#video')
      .volume(0)
      .play()
      .facebook({
        id: "fb-like",
        type: "LIKE",
        target: 'likediv'
      } );

That is the code for a like button. I can add as many or as little options as I want. By default, the extra style options are set to false. I chose to do this because (unlike a certain piece of software I can mention) I think if the user wants extras, they should request extras. I think it's unfair for a user to be bombarded with useless crap they don't need (I love you too, Windows Messenger 2011 :P).

Anyway, as of now the plugin supports 4 social plugins: like button, like box, activity feed and facepile. The other ones require registration of some kind and I have yet to develop a workaround for that.

So yeah, take a look: https://github.com/DanVentura/popcorn-js/tree/t331/plugins/facebook

Popcorn.js - Automated Plugin Unit Tests

I took the liberty of developing a unit test page for plugins. Originally, I just made a series of links that load the selected unit test into an iframe and called it a day. I knew it was too easy. Why not make them automated?

This was all made possible by this function: window.setTimeout(). Something I didn't know about setTimeout is that it runs "asynchronously", kind of like a thread in Java. I found this out when I put it in a for loop.

for (var i = 0; i < numOfTests; i++){
  setTimeout(function(){output.src = testUrl[i];}, 5000);
}

This produced some very odd results because setTimeout didn't find it necessary to care about the nice for loop I put it in. Either i would always equal the same number, or it would equal all sorts of random numbers (negative ones included). Fortunately I found a fix on the web using closures:

for ( var i = 0, delay = 0; i < 10; delay += testDur[i], i++ ) {
  (function ( j ) {
   setTimeout(function() {
      setTest( j );
    }, delay);
  })( i );
}

By doing this, the value of i (at the time it is called in the for loop) is saved within the closure. So now you can call setTimeout and be confident your iterator is working for you. I learned a lot today :)

Popcorn.js - There's a first for everything

Well, my reading week has been rather productive. Most of my work was for another class, but I managed to squeeze in some javascript. I made an xml parser in c++ that imports collada models into directx. Fun, lol. After that, I made some unit tests for the popcorn subtitle plugin for the first time. The tests only check that the subtitles say what they're supposed to say at the right time.

After the tests were passed, I stumbled across a bug! When the testing is finished, the results are outputted above the video, which causes the video to move further down the page (naturally). I noticed the subtitles didn't move with the video. This means that if the subtitles are aligned to the bottom of the video before testing, then when the testing is finished the subtitles end up in the middle of the video. This makes sense considering the subtitles are inside of a div with an absolute position.

So I got to file my first bug :)