Friday 14 October 2011

Charging ahead

After a few missteps and misunderstandings it looks like I now have a handle on what to do for slideshow.js, hopefully I'll have enough time to get something ready for 0.2.  It appears that my initial understanding of how slideshow will operate was totally off;  as it stands I will only need to work on one file called popcorn.slideshow.js that will be responsible for playing the slides created by the user using slideshare; with the slideshow itself being provided to my application via a link from the slideshare site.   All the events such as the time interval to pass between each slide or if the slideshow is manual or auto will be set when the slideshow is created in slideshare. Slideshow is only responsible for playing the slide and attaching popcorn events with Baseplayer.js handling the video events (play, pause, mute, etc..) that  the user may wish to include with their slideshow.


I've looked at the different players and plugins for ideas on how to implement this and off the players currently in popcorn, it looks like the Vimeo and Youtube players are the closest to what I'm doing for slideshow.js.    Both are embedding videos from an external sources and adding in additional functionality via the plugins.  Of course mine will be embedding a slideshow with some video elements (which makes looking at how these players run a pretty good idea).  The Vimeo player itself has an anonymous constructor that accepts up to three parameters that relate to how the vimeo video will be played as well as the link to the video iteslf

(ie: from an html page creating an instance of the Vimeo player -->var player = Popcorn( Popcorn.slideshow( "player_1", "http://player.vimeo.com/video/11127501")

This won't be unlike how slideshow will work(intially anyway).   The html page will create an instance of slideshow.js which will contain point to a link to a slideshare slideshow which will in this case contain a link to a slideshow which will be embedded into the html page.   When I last looked at the slideshow site, they do provide you with the javascript to add to your website to show a slideshow in your website so there's another resource I can use.


I'm currently going through the vimeo player code right now and cutting and pasting bits of it to see how it works as well as the html file that runs it so I have an idea on how to create my own html file to test if my slideshow player is running.   I have yet to create a unit test, I'll work on one soon enough right now I'd like to play around with cutting and pasting code from the vimeo and youtube players onto slideshow.js and slideshow.html and try to see if I can figure out how to load a slideshare slideshow.

Monday 3 October 2011

plan for tackling slideshow

I spent Friday going over baseplayer.js and wrapping my head around it's different functionality and getting an idea on how to setup the logic and flow of slideshow.js.

Basically, the slideshow player will have 2 files.  slideshow.js will be responsible for playing the slideshows and slideshowmaker.js will be responsible for letting the users create slideshows.   The slideshows themselves will be composed of 2 files.   One will be the movie file itself which will contain the slideshow.   The slideshow itself is essentially a movie file where the individual frames serve the purpose of the individual slides.   The other file will be a configuration file which will contain text that points to the main slideshow file but also contains information on how slideshow.js will play that slideshow (ie: will the slideshow be a manual or automated slideshow and if automated how many seconds will pass before showing each frame.)

So if the config file states that the slideshow will be played in manual mode, the slideshow will wait for the user to press a key before moving on to the next slide.  In auto mode slideshow.js will look for an entry indicating how many seconds must pass before the next slide is shown

So I'm thinking the logic for slideshow.js will go like this:

open and read the slideshow configuration file
open up the slideshow movie file that the configuration file points to and show the first frame/slide

check configuration file to determine if slideshow will run auto or manual

if auto
    call baseplayer.autoplay and set it to on
    set local variable to hold the amount of time to pass between each slide
   
    use baseplayer.timeupdate function to check how long the movie frame has been paused and compares it with the value stored in the local
    variable. (ie:  if the config file says 3 seconds between each slide, then slideshow.js uses timeupdate to check if 3 seconds has passed before showing the next slide.)
   
else (if manual)
    call baseplayer.autoplay and set it to off
    wait for user keypress
    once the user hits a key, move to the next slide


I'm planning on getting started working on slideshow.js during this week  to try to get this in as part of my 0.1/0.2 submission for Oct 20. I'm thinking testing it using a hardcoded config file and a test movie file that slideshow.js will go through frame by frame to test its reading of the config file, it's handling of both auto and manual modes and that it can read and display the movie files.   First goal though is definitely having something that reads and displays the slideshow movie files.   I haven't had a chance to run my idea through Dave Seifried though, he wasn't in IRC today and I couldn't find his email anywhere on his blog but I'll run this by him tomorrow either through IRC if I catch him there or after getting his email from someone.  Hopefully though I'm on the right track with my ideas.

On a side note, on Thursday night I created a folder called slideshow on git and inside it I created a file called slideshow.js.  I sent it up to my github account where it ended up on branch 0.6.  I'll need to clarify if I should have it on branch 0.7.   It's no big deal though as the file itself is empty save for a few comments