First steps into Butter.js
This week I have been soley working on butter.js, which is the authoring tool for Popcorn.js. We had a few meetings prior to this week about what needed to be done in butter and the direction it is heading, their is even a final cut pro plugin that a colleague of mine, Mohammed Buttu, is working on. Butter is still in the very early stages of its life, which means their are numerous bugs associated with it at the moment. Our current task for this milestone is to really iron out alot of these bugs and begin forming butter into a much more user friendly experience.
Over the last week I’ve managed to complete 3 pretty small bugs and one larger one. The smaller ones focused around removing the majority of the data out of the “accordion” (the accordion is a jquery object that allows multiple elements to live inside it which can be interchangeably shown and hidden) . The problem with the accordion was that it took up more space then it was worth, and really gave the west side of the page a very cluttered feel. Bobby wanted this data to be stripped out of the accordion and added to simple buttons that would show and hide the data when clicked.
The process of solving these bugs was pretty straight forward once I went through the butter code a bit (which took quite a while). In general, I removed the accordion and added a button to the toolbar type thing at the top of the screen. When the button was clicked, I used jquery’s dialog popup to display the information that was associated with each button. In general, we ended up with a cleaner looking interface.
The bigger ticket that I worked on was getting all of the suppported popcorn players working in butter. This was actually quite a bit of work as all of the players worked very differently as far as how they loaded and what readyStates were fired and at what points. The first player that I got working was the youtube player, which took about a day to get hacked togethor and working in butter. I assumed that since I got one player working, the others should be a breeze, which was not the case. The vimeo player was extremely finicky, for unknown reasons. It took me the better part of two days to figure out what the problem was, which ultimately fixed the soundcloud players issue as well.
The issue with vimeo and soundcloud was that they would not fire the correct readyStates when I thought they should (which I based off of how youtube worked). Basically, vimeo and soundcloud would not succesfully switch to readyState 2 until after a play was triggered on the player. This seemed sort of random to me and once I figured it out, it was a nice ole’ facepalm moment. Basically what I ended up hacking togethor was playing the video in order to pass the readyState and then pause the video as soon as it passed the check for the readyState. A bit of a hacky way to work around the issue, but it seemed like a better way of going about it then changing the way butter is doing all of its video checking and so on. The next issue that arose with this was the baseplayer, which brought along its own set of unique issues.
The baseplayer is essentially there to provide an invisisble timeline for the user to interact with. It sets up a time that continues to increment as long as the page is open and allows the user to attach popcorn events to it. The problem with this is that when you try throwing this into butter, there is no initial timeline associated with it, and therefore no timeline generated to add tracks to in butter. This is because the length of the baseplayer continues to grow the longer it is in use, so this creates a problem for users. Another problem was that there is no url or source associated with the baseplayer, which causes a problem for users stating they want to use it within butter. The ghetto solution that I came up with was simply using a keyword, which in this case was “baseplayer”, and when typed in would signify the user wanted to use the baseplayer.
The fix in general is pretty hacky, but it works. I dont know how bobby or anyone else associated with butter is going to percieve it, but well fix any issues that arise as they come. Next week I plan on continuing to bang out butter tickets, as between all of us working on butter, there has been ALOT of work done over the last week on butter and I can’t wait to see where butter is going to end up by the end of the summer!