Jan. 6:

- Created basic site with tabletopjs + popcornjs

- data gets entered via Google form → Google spreadsheet

- tabletopjs pulls data from Google spreadsheet based on spreadsheet key/column names

- popcornjs syncs that data with YouTube video playout

Jan. 8:

- Added ability to have multiple characters: http://jsfiddle.net/jrstahl/KbXAB/2/

- Note to self: Anytime you change the form it rewrites all the headers in the spreadsheet. Ugh.

Jan. 9:

- Added comments

Jan 10:

- Moved page from /test to riffs.jrstahl.com and redirected old page there

- Set up CSS so it’s actually a template for a website (rather than a mishmash of random elements on a page) that can be filled in with real design as we go - totally has not been tested across browsers though (need to at least look at it in IE for the margins/padding bs that happens there). Just did a standard static template - was going to do a responsive template and then realized that I don’t think the YouTube video will play out on mobile/iPad anyway so what’s the point?

- Note to self: Need to check if this can work on mobile/iPad - I think it’s converting the YouTube video to html5 somewhere on the line?

Jan 11:

- Made end time optional - added underscore js because that seemed like the quickest way to deal with finding empty values: http://jsfiddle.net/jrstahl/V9kMV/1/

Note: could do a better calculation here, but for now am just defaulting to 5s display

- Removed characters and added alternating div location: http://jsfiddle.net/jrstahl/ADXK6/1/ 

- Fixed spreadsheet rewriting headers every time form was updated (by using the actual header names instead of setting my own, which was dumb)

- Added ability to request changes/removal. Until there’s a better solution, I figured it would be worth making a way to at least allow editing somehow. it’s just a form that emails trumpyismagic@gmail.com.

Jan 12:

- Added Google Analytics and metatags

Jan 13:

- Added display for most recent riff. For some reason I cannot get it to trigger an onclick update of the video’s currentTime. This should be easy!

Jan 14:

- Got the most recent riff to trigger a time update onclick. Just had to define the pvid variable globally. - https://mail.mozilla.org/private/community-popcorn/2012-September/000201.html 

- Added a display below the video so you can see where riffs are and aren’t. Did it by drawing on a canvas and converting startTimes to x variables. - http://jsfiddle.net/jrstahl/6ZazM/2/ (- http://www.codecademy.com/courses/web-beginner-en-SWM11/0/4 )

Jan 15:

- tweaked the way the riffs display under the movie, from alternating divs to paragraphs with alternating classes.

Jan. 18

- tweaked the canvas display so it doesn’t rely on manually inputting the time by preloading video metadata - http://jsfiddle.net/popcornjs/z7fAF/ - problem is it doesn’t always load fast enough; needs to be set up as an async function I think, but I don’t even really know what that means


1) Doublecheck this across browsers - so far I haven’t heard from anyone that it’s massively broken for them, so that’s a good sign - Google form doesn’t play nice in Safari, who knew. Worth a look. And video may not load on iPad.

2) Sit down and actually think through requirements for making this work better and how to achieve them. Top level consideration: can it stay in tabletop+popcorn, does it need to come out of tabletop and use the spreadsheets API instead, or does it need to stop relying on Google Drive altogether and be pulled into a database.

Resources where people have figured out useful things:

Overlaying onto video in popcorn: http://bcmoney-mobiletv.com/blog/2012/03/09/popcorn-js-embedded-video-semantically-enhanced-content/

Rebecca says look at this for other ideas about interfacing with community:


Look at how SoundCloud does commenting…

YouTube on iPad: https://github.com/lasconic/popcorn-js/tree/master/players/youtube 

https://github.com/mozilla/popcorn-js/blob/master/wrappers/youtube/popcorn.HTMLYouTubeVideoElement.js + http://stackoverflow.com/questions/16661217/popcorn-js-on-mobile-browser-youtube-play-button-does-not-appear 

https://github.com/mozilla/popcorn-js/issues/320 ← basically, this is a known issue at this point