Dan's Programming Blog

Popcorn.js - LinkedIn Plugin

2011-04-11T19:36:00.000-07:00

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

2011-04-04T09:43:00.000-07:00

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

2011-03-24T05:59:00.000-07:00

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

2011-03-06T19:57:00.000-08:00

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

2011-03-04T11:27:00.000-08:00

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

2011-02-24T11:23:00.000-08:00

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

2011-02-10T17:57:00.000-08:00

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

Processing.js - Bug# 946

2011-02-06T13:48:00.001-08:00

This had to have been the easiest bug to fix. Yay. You can find it here: https://processing-js.lighthouseapp.com/projects/41284/tickets/946-unexpected-result-when-converting-char-to-str

Basically there's a function that takes data and outputs it as a string. The problem was that when you passed it a char, it returned the ASCII value. After going on IRC and learning how to get started, the "bazaar" discovered that one of the tests for this function had been commented out by the person who worked on it last (no wonder it passed).

So basically what I did was uncomment that, add another test that looks exactly the same as the one in the sketchpad link above, and my fix. my fix was exactly this:


--arr.push(val[i] + "");
++arr.push(val[i].toString() + "");
##return arr;
##}
##}
##else
##{
--return (val + "");
++return (val.toString() + "");

... pretty much. It's up for review. If you're reading this, feel free to review it. I put the link to my branch in the comments for the lighthouse link provided (not sure if thats what i was supposed to do).

OSD600 - Building Firefox 4 (Minefield)

2011-01-21T13:06:00.000-08:00

Okay, I got this to work but I'm not sure if it works correctly. I mean, it runs but it runs weird. Let me explain: (*Note: If you use this as a guide to try this yourself, don't follow it step by step. In fact, follow this blog or the official Simple ff build. Also, I am running Windows 7 x86*)

What You Will Need

I followed someone else's blog through most of this (). Basically you will need the Mozilla Build tools and TortoiseHg (the one that suits your OS).

Let's Get Started

Allow the build tools to install to it's default directory: C:/mozilla-build. Next, make a directory in your C:/ directory for the source code (mine is C:/OSD600. It is important to not include spaces in this path name!). For this directory, we will use TortoiseHg to clone the source code from this url: http://hg.mozilla.org/mozilla-central/. This takes a while...

Now we must make a mozconfig file. Seeing as Windows 7 won't allow you to make files without an extension, open the command line and execute these commands (this is what's in my mozconfig. Here is Mozilla's help page for mozconfig files):

echo ". $topsrcdir/browser/config/mozconfig" > mozconfig
echo "mk_add_options MOZ_OBJDIR=@TOPSRCDIR@/objdir-ff-debug" >> mozconfig
echo "ac_add_options --enable-debug"

>> mozconfig
echo "ac_add_options --disable-optimize"

 >> mozconfig

You'll also want to open it in notepad and remove the quotes. Better yet, just do echo "d" > mozconfig to make the file and do the rest in notepad. When you're done, this file should be placed in the root folder (in my case, C:/OSD600).

Now for the fun part (this is the part where the problems arise, naturally). Go to C:/mozilla-build and run one of the start-msvc.bat files. If you has Visual Studio 2010, run start-msvc10.bat. And yes, I am assuming you have Visual Studio and the required Microsoft SDKs. This .bat file should open a command window.

Now execute these commands:
cd /c/osd600 make -f client.mk build

If it works, it will build for about an hour.

When it finishes building the executable can be found in the following directory:
Depending on what directory you put in your mozconfig (at this line : mk_add_options MOZ_OBJDIR=@TOPSRCDIR@/objdir-ff-debug) it can be found at C:/OSD600/objdir-ff-debug/dist/bin/firefox.exe.

Problems

What, you think it's THAT easy? HA! This took me days!

The first error I got was this one:
--enable-application=APP was not specified

I looked online for a fix to this error but now I'm thinking that the fix was unnecessary. I think if I specified an additional option in the mozconfig, I would have fixed this error. Anyways, the fix I found was to do this:
-Make a new directory
- Go to that directory
- execute these commands:
../configure --enable-application=browser
make -f ../client.mk

This however caused more problems. So the next day I went to the original directory (OSD600) and ran the regular command: "make -f client.mk build" and for some reason it worked! ... Or so I thought. It works but I get this error message.

When I run the firefox.exe, a command line window pops up, it write a bunch of warnings, and this error window appears. If you choose "Abort" and try again or "Ignore", the error message doesn't pop up. It's just odd.

OOP344 - who needs default constructors anyway?

2010-03-22T18:30:00.000-07:00

i always had a feeling that default constructors were pointless. I don't know, something about making a function that sets everything to null seems... meaningless? Fortunately, I've learned an alternative! Let's say we have a class called, for instance, Poop (lol). Inside Poop, we want to keep color (char*) and size (int). If we were to use a default constructor AND an argument constructor, our prototypes would look like this:

Poop();
Poop(char* color, int size);

This method would leave us having to write the same constructor twice, except the argument constructor would assign values other than 0.
In order to avoid the redundancy, we can write 1 arguement constructor with this little tweek:

Poop(char* color = 0, int size = 0);

If Poop() is called without arguments, the constructor will automatically use the default values provided in the declaration! Genius, I know!

OOP344 - fardad, i accept your putint() challenge!

2010-02-08T09:26:00.000-08:00

this function was harder than i expected. In order to convert a number to a character, all you have to do is add 48 (this is because 0 on the ascii table is 48, 1 is 49, etc.). So as long as you are sending the putint function a 1 digit number, this will work. However, for the keys that are 4 digits long (i.e: RIGHT_KEY = 1077), it gets a little more complicated.

This took me a while to figure out and i must say, it's genius :). First what you have to do is: seperate the digits. This is where being good with numbers really helps.

(i'm not going to write code, instead I'll give you a mathematical view point)

if you divide a number by 10, the decimal moves one point to the left:

1077 / 10 = 107.7

In order to get the decimal point i used a float, however that caused problems because float are never exact. So, i made two temporary int variables and did this:

1. temp = 1077 <- this is the integer being sent to the function

temp / 10 = 107 <- integers truncate decimal points

temp * 10 = 1070

2. temp2 = 1077 - temp

= 7

Hooray, i got the first digit separated. Now, just do char = temp2 + 48; and your first digit is successfully converted. Repeat this process for x amount of times and your string contains a 4 digit number. BUT WAIT, how do i determine x? dividing by 10 again.

make a while loop where you divide temp by 10 while temp > 0 and do an i++ to get how many digits are in the number. you can now use i for a for loop.

There you have it, a putint function that converts an integer into a string without using extra libraries (there is no atoi() or sprintf()).

Welcome!

2010-01-11T09:27:00.000-08:00

Welcome to Dan's Programming blog!