Visualized time line coming together

From my last push to the visualized time line, I've implemented all the missing features and more.

I've faced a few more problems advancing it which include:

Using request animation frame to properly request a frame from the popcorn object instead of highjacking the the frame rate in a setInterval function.

Figure out what the best way to change audio aesthetically would be.

Should I still add the duration length at the end?


Aside from all that, I'm pretty happy with the progress from the last time. Aesthetically, it looks a hundred times better. Functionally, it's working quicker since I changed the way I did a few methods and drew out the time line.

Something I've noticed with canvas is that every draw call counts. Especially when it comes to text. This is a major problem I've realized other developers are facing especially (using in a larger scale of text but a timeline must be very quick).

Anyways, I've added:
1. Current time above the current time cursor
2. Pause/Play Button
3. Fixed the mouse over bug over the events
4. Modified the base timeline to allow for other options and easier changes in the future
5. Picked out an aesthetically pleasing color layout and timeline layout
6. Modified a lot of the code to increase frame rate

To still do:
1. Figure out what I'm going to do with the audio portion
2. Do I put in a duration length?
3. Figure out how to implement request animation frame

Few screen shots below for anyone interested: