ReviewTube: A brief tour of our sample application

To help put our ideas in very concrete terms, I've written a sample application as a companion to this article. It's called ReviewTube (see Figure 2). A working example with the complete source code is available at joeberkovitz.com/blog/reviewtube. I recommend taking several minutes to play with it, since I'll often refer to its features. For completeness, and to set the stage for some later topics, here's a lightning tour of its features.

Figure 2. ReviewTube application

What does ReviewTube do?

In short, ReviewTube is a site that allows users to create, edit, and view time-based comments for videos hosted by YouTube.com. Any visitor to the site may view such a video; the comments automatically appear and disappear beneath the video at the correct times during playback as closed captions. Only registered users may create new comments. Note that any registered user may add captions to any video, making ReviewTube a kind of collaborative annotation system.

Figure 3 shows a simple block diagram of the ReviewTube application.

Figure 3. Block diagram of the ReviewTube application

Video browsing and searching. ReviewTube videos may be accessed through the following:

• Top 25 Videos list, ranked by the number of ReviewTube captions
• Recent Videos list, ranked by the last time at which a ReviewTube caption was added
• Search Result list, resulting from a YouTube search using one or more tag terms (such videos may or may not already be in ReviewTube)
• User list, showing all ReviewTube videos to which a user has contributed captions (clicking a user's name anywhere in the UI will navigate to the corresponding User List)

Video display. Upon selecting a video from one of the above lists or supplying a specific YouTube URL, the video is loaded into a player. Under the player is an area in which active captions are displayed along with the name of the user who created them. Below that is a strip containing a slider control for adjusting the video playback time, which also shows the load progress and the time offsets of all captions. Finally there is a scrollable list box showing a list of all captions in time order; clicking a caption positions the video at the corresponding time.

Comment editing. A signed-in user may add a new comment at the current playback point. Users may also edit or remove any comment that they have created. New captions, edits, and removals are reflected immediately, even while server database operations are pending. Signing in or out causes the caption editing aspects of the UI to dynamically appear or disappear as appropriate.

Status display. Most ReviewTube actions involve operations on web services on the YouTube or ReviewTube servers, which may take several seconds to complete. While such operations are pending, a blue label appears in the upper right of the screen providing status information on what is happening. This kind of feedback often contributes greatly to making an application feel responsive.

Signin, signout, and registration. At the top of the screen is an interface for signing in, registering as a new user, and signing out. Signing in and registration are carried out through additional pop-up dialog boxes that display error messages and status.

Server communication. The ReviewTube app talks to two different servers: www.youtube.com and the ReviewTube server (a custom Rails application with its own XML/REST web services). YouTube.com supplies the video media and metadata, while the database on ReviewTube only stores the extra information about comments and registered users.

Page 4 of 9

Previous Page

Next Page