- 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
- 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.
- Added comments
- 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?
- 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 email@example.com.
- Added Google Analytics and metatags
- 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!
- 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 )
- tweaked the way the riffs display under the movie, from alternating divs to paragraphs with alternating classes.
- 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