Skip to content

Popcorn Maker – Mobile Edition

June 26, 2012

About 2 weeks ago Robert Stanica and I signed up for a presentation at CDOT, as all of the various teams here present weekly on new and exciting things that they have been working on. Seeing as we haven’t presented and it was about 2 months into the summer I figured it was a good idea we get something out there. Initially I figured we would present on what we have been working on thus far, mostly CSS work from Rob and various JavaScript bug fixes from me. Over the past year I’ve done similar presentations and wanted to go for something different this time, so I proposed to Rob that we get Popcorn Maker working on the iPad ( this was Friday June 15th when I came up with this idea ). Rob jumped at the idea and was as stoked as I was to get working on it. Sadly because of how busy we have all been with Popcorn Maker and getting 0.5.2 out the door, we didn’t get a chance to work on this until Tuesday of this week and even that was a half day at best. The real work began on Wednesday.

The morning of Wednesday June 20th we split up the work as best we could and it made sense that Rob would tackle the CSS issues and I would dive into the JavaScript.  At this point Popcorn Maker actually didn’t load at all, and we were looking at an empty template, which is a pretty rough place to start. I had a good idea that because we were running on a mobile device we weren’t able to begin preloading the video on page load, so we never actually got any information about the video and in turn couldn’t load any of our UI ( our timeline is built and sized according to the duration of the video ). To get around this Rob designed a snazzy looking splash screen that would provide the user with a message and a start button. I created a button that when pressed would quickly play and pause the video ( triggering a load ) and the UI would then be built. The video loading has to be initiated by a users action as this stops sites from eating up users bandwidth by playing media in the background. My next main task was to hook up some touch events, which I had no experience with.

Initially I looked into some JavaScript libraries to handle as much of the touch event work as possible as I figured it would be quite messy. I found hammer.js and it looked pretty promising; I had access to dragging, swiping, gestures, and clicks. I began trying to use the library but found it to actually be more a nuisance then a help. There were a few issues here, one being that I couldn’t listen for touch events on the window with hammer, couldn’t destroy any created listeners, and found trying to debug with hammer to be an overall pain. If I had more time this might have been a different story or if I could of asked someone who has used it a few questions, but we had less than a day at this point so off I went to write my own stuff. This essentially entailed handling various listeners for `touchstart`, `touchmove`, `touchend`, `gesturechange`, and a few more. Basically touch start, move, and end mapped pretty close to mouse down, move, and up. I had to implement some hacky workarounds for figuring out the mouse position from touch events and properly handle multiple touches it they existed. Midway through the day I tried to make our scroll/zoom bars work with touch events but it turned out to be a giant worm hole and abandoned it after a few hours of trying in order to get more important features in. I was also able to implement a pinching gesture for resizing a trackevent. I went for the pinch instead of using our trackevent handles because I figured it would make the app feel more native on the iPad. By about 7pm I had all our touch events working ( at least the ones we were going to showcase in the presentation, by no means were they all implemented ).

One big blocker that we ran into was dragging and dropping new trackevents from the tray to the timeline. It’s funny because we actually almost decided to run without the ability to create new ones for the presentation but decided to implement a hack to create a new one on click at the last minute. This meant that you didn’t have to drag and drop to create the event, but could just click on its title and it would create an event at the videos currentTime with sane defaults. This wasn’t a future proof solution but it at least made the app some what feature complete.

At about 11pm we had saving, exporting, and logging working and rounded off all of the sharp edges that we created in the process ( its FULL of bugs ). We made a bookmark to the iPads homescreen so it felt more like a native app and removed some of the browsers UI which was nice. In the end I am really proud of what Rob and I did in <24 hours, we worked great as a team as we each brought our own set of skills to the table and worked in parallel most of the day and a half. I remember hearing a while ago that a good group/team member is someone you agree with about 70% of the time and Rob seems to fall into that category. It’s great to have someone there to tell you “Man that looks crappy” and be able to take what I’ve been working on and add some CSS polish to it. I think Rob and I make a great team and I’m looking forward to seeing what we can create.

Our presentation went pretty well and I think everyone liked seeing Popcorn Maker run on mobile devices, it’s something that we’ve wanted for a while. After the presentation Rob and I did a bit more work and made trackevent resizing and dragging REALLY smooth by adding gpu acceleration ( Rob blogged about this ). We also added gpu acceleration to track movement as well, so dragging a trackevent outside of the current viewing area doesn’t cause the screen to tear anymore.

Moving forward, Rob and I now have to go ahead and file some bugs about everything that we’ve noticed and get some feedback on ideas we have about how to restructure the UI. In the end I think this was a great experience and was a great break from the rush to get Popcorn Maker 0.5.1 and 0.5.2 out the door and ready for Mozilla’s story camp.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: