Popcorn.js - LinkedIn Plugin

Make a LinkedIn plugin... sounds easy, no? I figured if I made a Facebook plugin, this will be a walk in the part. Well Facebook developers can sleep easier knowing that I have greater respect for them.

What's are some of the most terrible things you can do to a user? Have meaningless error messages coupled with poor/scattered documentation. Most of the time spent making this plugin was spent on searching their website and asking myself "WHY?".

My error, as I found out after days of searching, was cause by an application id variable that was never set. This is why, if you look at my html code
( https://github.com/DanVentura/popcorn-js/commit/7443a2960ca27cbd09bd283c850a0cf27049acbe ) I have to set the app_id variable before calling popcorn.linkedin.js. Simple, right? Try figuring that out when you only have THIS to go on:

U.match(M) is null

}function f(U){return U.match(M)[1] 

"function f(U)"... Gee, they just come right out and say it don't they? LOL

Fortunately, for those who wish to use my plugin, I've included a helpful error message with a link to the page where you can get an api_key. The one included in the html code from my demo on matrix is valid for all of the matrix domain, so go nuts.

Anyways, here's how you can put a LinkedIn share button with your popcorn video:

var p = Popcorn('#video')
.linkedin({
  type    : 'share',
  url     : "http://www.google.ca",
  counter : "right",
  target  : 'sharediv'
} );

Modifying Firefox Source Code - Tabs

Made a few modifications to Minefield as requested from OSD600. The first modification was to make new tabs appear next to your current tab rather than at the end of list. This was easy, considering we did this in class. Here's my diff:

diff -r 4e4c7457e8f7 browser/base/content/tabbrowser.xml
--- a/browser/base/content/tabbrowser.xml    Sat Apr 02 11:48:22 2011 -0400
+++ b/browser/base/content/tabbrowser.xml    Sun Apr 03 23:42:38 2011 -0400
@@ -1327,27 +1327,25 @@
            // activeness in the tab switcher.
            b.docShell.isActive = false;

            // Check if we're opening a tab related to the current tab and
            // move it to after the current tab.
            // aReferrerURI is null or undefined if the tab is opened from
            // an external application or bookmark, i.e. somewhere other
            // than the current tab.
-            if ((aRelatedToCurrent == null ? aReferrerURI : aRelatedToCurrent) &&
-                Services.prefs.getBoolPref("browser.tabs.insertRelatedAfterCurrent")) {
+
              let newTabPos = (this._lastRelatedTab ||
                               this.selectedTab)._tPos + 1;
              if (this._lastRelatedTab)
                this._lastRelatedTab.owner = null;
              else
                t.owner = this.selectedTab;
              this.moveTabTo(t, newTabPos);
              this._lastRelatedTab = t;
-            }

            return t;
          ]]>
       
     

      
      

Sure I could have just commented those lines out, but what are the odds I'm going to change it back?
The next mod was to change the controls for changing tabs by number. The original controls is to use Ctrl + #; I changed it to Alt + #. This isn't an efficient patch however, this is what Dave would call "repairing with a hammer" haha:

diff -r 4e4c7457e8f7 browser/base/content/browser-sets.inc
--- a/browser/base/content/browser-sets.inc    Sat Apr 02 11:48:22 2011 -0400
+++ b/browser/base/content/browser-sets.inc    Sun Apr 03 23:42:38 2011 -0400
@@ -354,21 +354,17 @@
#endif
#ifdef XP_UNIX
    
#endif

    
    

-#ifdef XP_GNOME
#define NUM_SELECT_TAB_MODIFIER alt
-#else
-#define NUM_SELECT_TAB_MODIFIER accel
-#endif

#expand
...

That's not the full diff, some of the tags didn't render as text. But the part I changed remains: change NUM_SELECT_TAB_MODIFIER from accel to alt.
I learned a few shortcuts while reading the source as well. For example, Ctrl+k will put focus on the Google search bar at the top right, and Alt+Home will redirect you to your home page.

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 :)

Popcornjs - bug #127... again

Remember how I said I finished my bug? Well... I lied, lol. Upon receiving a "review-needs-work" status, and gaining a better understanding of javascript from class, I looked over my code and found that I needed to do it again.

My Example
Let's say you've got two subtitles: one starts at 3 seconds and has no end specified, the other starts at 10 and ends at 15. Now, if you set the first subtitle's end to the end of the video, the second subtitle will never disappear. I had to somehow arrange that an endless subtitle has it's end set to the end of the video ONLY if there isn't another subtitle coming up. Seeing as I don't have access to the next subtitle while I'm creating them (naturally), I had to do a little bit of backwards work.

Solution
(from popcorn.js):

if ( currentSubtitle ) {
  previousSubtitle = currentSubtitle;
}
currentSubtitle = options;

if ( previousSubtitle && previousSubtitle.noEnd ) {
  previousSubtitle.noEnd = false;
  previousSubtitle.end = currentSubtitle.start;
  Popcorn.removeTrackEvent( this, Popcorn.getLastTrackEventId( this ) );
  Popcorn.addTrackEvent( this, previousSubtitle );
}
setup._setup.call( this, currentSubtitle );
Popcorn.addTrackEvent( this, currentSubtitle );

Confused? Here's what's happening:
This chunk of code is run once for each subtitle. Earlier, if it doesn't find an end options.noEnd is set which allows the end to be the end of the video (in popcorn.subtitle.js). So the first time through, (creating the endless one) the subtitle will be continuous and added to the list of track events.

...Follow me so far? Good.

The second time it runs through, it will see that there is a previous subtitle with noEnd set. It will remove the previous subtitle from the track list, change it's end to the start time of the current subtitle, and re-add it to the track list. Then business continues as usual for the current subtitle.

Wanna see my genious for yourself?
https://github.com/DanVentura/popcorn-js/tree/bug127/plugins/subtitle
Have fun ;)

Popcorn.js - bug # 127

I finally finished my first bug for popcorn.js. The bug I was assigned was to make it easier to specify subtitles, found here: https://webmademovies.lighthouseapp.com/projects/63272-popcorn-js/tickets/bins/261878

Basically, when making subtitles you have to specify an 'in' and an 'out' so it knows what time in the video to show up and disappear. They wanted to be able to make a subtitle continuous by not specifying an 'out'. For example, if a subtitle immediately follows another subtitle, it would be redundant to specify the 'out' as the next subtitle's 'in'.

Now, this seems easy... just get the 'in' from the next subtitle, right? HA! Too bad I didn't find a way to access the next subtitle within the first subtitle. Fortunately I found a workaround: if you set the 'out' to a greater value than the next subtitle's 'out' (even if you set it to 1000000), it should seamlessly go into the next subtitle without any problems.

As I mentioned before, I don't have access to the next subtitle (cause it doesn't exist when you're creating the first). I figured that the fix would be to set the missing 'out' element to the maximum value available... the video duration.

options.out = this.video.duration

Yet another problem... fantastic. For some odd reason, if you call this statement for the very first subtitle in the video, this.video.duration is 0. This is because this.video.readyState is not 4. In other words, the video isn't ready yet. I have discovered the folly of Javascript, it's too fast for itself LOL.

Fortunately I found a "start:" function, which is called when the subtitle is put into the video. By the time this function is called, the readyState is 4 and video.duration returns as expected. There was also some other problems but if you're interested check out my branch.

I liked this bug. It taught me a lot about Popcorn.js and JavaScript :D