MediaPlus - Technical Details

In my previous post, I had written about a MediaPlus - a browser bookmarklet. MediaPlus lets you control media content on websites better. This post talks about some of the interesting technical challenges that were encountered when rewriting it from FlashPlus.

The Basics
MediaPlus can be installed by dragging the MediaPlus link to the browser bookmarks/favorites bar. When this bookmark is clicked while browsing a web page, a javascript file is inserted into that web page. This script is responsible for all the magic from drawing borders around elements to making videos full screen. Once the bookmarklet is loaded, it loads additional javascript and css modules dynamically.

Element Selectors
When the mouse is moved over supported (flash, video, canvas, iframes, silverlight) target elements on a web page, the border that lights up around the element with the toolbox at the bottom is the element selector. These element selectors are not one single div (with a border and the height and width of the target element), but four [divs] around the corners of the element (very similar to the Aardvark bookmarklet). Though a single element would do the job just as well, placing it below or above would interfere with mouse events of the target element. Additional jquery "mouseenter" events are directly added to these target elements to show up the selector. The selector element is redrawn around the target element every time the mouse enters a different target element.

Proxy Substitutes
The structure explained above seems to work for all elements except embedded flash, as some browsers draw flash above all elements to prevent clickjacking. Object and Embed tags also cannot hold data. Just for the case of Flash, a proxy <div> is placed on top of the flash. To allow the Flash element to capture its mouse events as usual, the proxy div is "sent to back" as soon as the mouse enters it, bringing the Flash Element to the top.

Moving and Resizing Elements

When an element is resized or moved from its position, three things happen .

• A new proxy element <img> with the dimensions of the original target element is inserted in its place to ensure that the parent of the target element does not collapse when the target element is moved out of its child hierarchy.
• The element is given an absolute position to allow the drag.
• The element is also re-attached directly under the body to ensure that overflow:hidden in the parent element does not prevent the target element from being moved around.

When an element is reattached into the DOM hierarchy, it is reset. This is the reason for flash videos or games to restart when they are moved or re-sized. Unlike the older FlashPlus, this version ensures that only those elements that are moved are re-attached and hence restarted. This also ensures that the original page layout is undisturbed.

Next Action
Some actions like full screen or switch off lights hide all other elements. To restore the page to the state prior to the action, the bookmarklet link has to be clicked again. A button on the page could have done this job, but placing one may look ugly, especially when a video is full screen. Hence, some commands like full screen or switch-off-lights define a "next-action" that is executed when the bookmarklet is clicked again.

Support for tags
This newer version has a better support for tags, and the actions that can be performed on tags. Every tag is defined by a separate object that in turn declares the commands or actions (like move, full-screen, download) that can be performed on the object. Common actions are added using a mixin like pattern.



To look at how MediaPlus works under the cover, you can check out the source code here.