Finishing Up With the Visualized Time Line (0.4)

After re-reading my last release, I just wasn't going to be happy unless I finished off my pet project I undertook for the course.

In order to finish up, I not only had to finish all the features I wanted to implement but also make the code readable and understandable enough so that when the next person comes along and wants to make an edit, they will be able to.

Since I built this on the canvas it's basically just a lot of math and scaling the elements according to the size of the canvas the user wants to give the visualized time bar.

For testing purposes, 20 height by 220 width seems to be the sweet spot. You can definitely make it bigger than that but any smaller and things start to get to small/run out of room etc.

Anyways, I took all my calculations and labelled them accordingly and cleaned up any redundant or obscure calculations (as best as I could).

So last time I wanted to implement current duration, sound, and request animation frame. Sadly to say after countless hours of hacking away at request animation frame I just gave up. That's the last little bit that the next person who decides to look at my code should probably check out. Hijacking the browser's js with a setInteval isn't probably the cleanest way of implementing the plugin.

But, I did add in the mute and change volume functionality based on the design on the already existing timeline on the demo video.

I played around with the color scheme to make it similar to the normal timeline of the demo video but that can always be switched around easily by just changing the hex codes; as I said before, the code is now readable so it's simple to find out where to place the color you want.

Taking into consideration all the requests on the bug post, the next step should incorporate visualizing chapters as well.

Aside from all this, the canvas may very well not be the best way to display all the info and functionality. Since I wanted to finish up what I started, I got Noah from my Open Source class to take on hacking away at the dom elements to see what he could get accomplished. Assuming he figures it out, we would just have to incorporate my logic into his new design; should be fairly simple.

I'm going to post some mockups, link to my code, and ask for a pull right after this blog post.

It was a pleasure trying to give something back to the online community and I hope I have more time in the future to do so.





Cheers,

Chris

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:

Debug Build of Mozilla

Well after an hour of installing missing packages and redirecting my autoconf to an older version, it finally decided to make the build.

Looks like it might take awhile, so I'm just going to leave my computer on over night and check it in the morning.

If anyone has any issues building the debug build of firefox on fedora just:

Create a .mozconfig file in the root of the mozilla branch.

download autoconf-2.13, extract it, and point the AUTOCONF variable to the extracted folder's exe in .mozonfig.

Next, add the debug option to ac_add_options to .mozconfig.

Everything else is just finding the right packages and installing them.

Cheers

(Just as a little proof for class, here's it compiling)

Visual time Line Additions

-Added in a div when hovering over track event points on the time line.
-Added allowing users to click on the time line to change the current time of the media

To do:
-Add pause/play
-Add current time : duration text
-Make it look more presentable (round rectangles, better colors, etc.)

First draft on canvas

I've been fiddling around with a bunch of different concepts and ideas but this my first simple prototype.

User creates a canvas and passes the plugin the canvas name along with wanted width, height, and the same media id as popcorn is passed.

The plugin then sets itself to be run at time zero, grabs a reference to the popcorn object calling it, sets up the canvas, and sets a listener on the media element.

When the media element is done loading, it stores a reference to the media element's video duration and current time.

An interval function is set with the draw function.

The draw function calls and stores the return value getTrackEvents using the stored popcorn instance that called the plugin, draws out the appropriate timeline box, draws the cursor in the right spot using the stored duration and currentTime variables, and then draws out the spots where events are going to be called by the popcorn instance.

Pretty simplistic so far but I'm going to add more features in the next few days such as:
When mouseover the canvas check the positioning of the mouse and check that versus the X coordinates of the showing events. Create a floating div over top showing some information like literal start time, literal end time, and a description if available.

Clicking on the timeline can change the currentTime of the media element so that you can use the visualized timeline bar as a normal timeline bar. Pause/Play could be implemented as well.

Going to clean it up and make it look a bit nicer playing with some of the canvas draw functions.

Could have the the current time drawn as text.

Research some better ways rather than drawing X frames per second.



*Below are just two screen shots showing the simplistic visualized timeline so far*

DIV vs Canvas for visualized timeline

I was thinking about the advantages of the DIV vs canvas to create my visualized timeline last night and came up with an interesting point.

As discussed in my last post, I'm going to have to remove the current time cursor and add it back onto the base layer. Unless I use dynamic divs.

If I use styled divs I can set the current position cursor's div to the constantly changing current time of the media element. This would take a lot of the effort off my own code and change the div's relative position dynamically.

The steps in order to do so would be as followed:
1. Create an encapsulating div.
2. Create the wide base time line bar div.
3. Overlay the cursor div inheriting using the same Y position as the base and use it's X position as the current time variable within the media element. I can just use the duration variable in the media element to calculate the proper spot for the div in a calculation.
4. Lastly, just overlay the divs for the track event visuals with mouse over events at relative start time position for those events.

What I'll still need is:
Popcorn's media element's id to track it down on the page and get it's information.
A listener for the track events that will get their info.

The process order would be:
Create all the variables
Load all the variables on popcorn's media element
Create the event divs on addtrackevent call with mouseover event

This seems to be an a quicker and easier way to keep track of all the visuals needed to create the timeline.

Thinking out the visualized timeline

As of late, I've been diving into some of the popcorn.js to see what the best of way working out the visualized timeline would be.

I've come up with an idea of how it should work.



-Create variables to hold array of event tracks, and number of event tracks. Put number of event tracks into a safe state (0)


-When popcorn gets its media element, load the timeline data object with references to the media element (current and time), as well as a reference to the event tracks array and number of event tracks


-Draw a base for the visualized timeline that will have a current time cursor layer and event tracks layer on top


-When the current time changes, clear the layer containing the current time cursor, and add it back on at the appropriate spot.
(I'm a little worried this might be slow as every time the time changing, a removal and creation must happen)


-Whenever addTrackEvent is called, add that track into the track events array existing in the plugin, and add that track event onto the visualized timeline in the track event layer.
(This allows the plugin to keep track of track events that are created on the fly)


-A good idea would be to create a mouseover event to display a popup div with relevant data about a track event

Object for holding timeline data:
{
current: (current time in video - references video element's currentTime property)
time: (full video time - references video element's duration property)
tracks: (array holding event track objects - references a static array in the visualized timeline plugin)
nTracks: (number of tracks - references a static variables holdings number of even tracks in visualized timeline plugin)
}




So I have to figure out:
-How to get the media object upon popcorn instance creation
-How to have my plugin be notified upon track event creation/grab that track event to hold onto

I was a little worried about firing events at variable changes but I found a nice stackoverflow article showing how to create an object.watch method for the object prototype: http://stackoverflow.com/questions/1759987/detect-variable-change-in-javascript

The next few days should be interesting indeed.