Anatomy of a Media Viewer

label

• the key in the GET string for /save in mediathread
• the label field in the assetmgr/models.py Source table
• labels are presumed to have a semi-ordering, where, e.g. the presence of a video label will supercede an image label (the image is probably just a poster image).

assetview

• a set of javascript that can handle certain mediatypes
• will often be associated with a label,
• e.g. Flowplayer assetview supports flv_pseudo, mp4 (and other) media types

Glue Points

Once you’ve made your viewer, you will need to let different parts of the code know about it. Even though these won’t do anything useful until you finish your annotator and the bookmarklet, you should connect them up first, so your code will work as you develop.

• assetmgr/models.py Asset.primary_labels
  • Add your label in order of primacy to others. Earlier labels supercede later ones.
• templates/djangosherd/annotator_resources.html
  • add any javascript files you create that need to be loaded for parsing, etc.
  • in the example below, this is image/views/fsiviewer.js and image/annotators/fsiviewer.js
• media/js/sherdjs/src/assets.js
  • this is the glue for the ‘generic asset’—you should create an instance of your assetview, like the other examples
• config/djangosherd.js DjangoSherd_adaptAsset
  • adapt your type by testing the existance of your label. The ‘asset.type’ corresponds to the this.settings key in GenericAssetView (in assets.js)

AssetView

The assetview is the code to create the DOM object that shows the asset, and provides the hooks necessary to focus and get the focus of an asset.

For video, a good example is: sherdjs/src/video/views/youtube.js

For other assets, take a look at sherdjs/src/image/views/fsiviewer.js

The most important functions are:

• this.microformat.create(obj,doc)
• this.setState(obj)
• this.getState()
• this.microformat.initialize() #this function is optional, but will often help with …initializing state (which should not occur in microformat.create() )
  These functions get called at the proper times by the framework or the annotator.

For video, setState() and getState() should be handled by sherdjs/src/video/views/video.js, and instead the most important functions are:

• this.media.seek(starttime, endtime, autoplay)
• this.media.ready() #is the player ready?
• this.media.time() #what is the current timecode in seconds?

Annotator

If you are creating another video view, then this step is unnecessary, since an annotator can span multiple assetviews. However, if you have a custom mediatype that needs to store different data in an annotation to re-focus the asset, then you need to make an annotator.

1. Glue the annotator javascript file into templates/djangosherd/annotator_resources.html

Bookmarklet

The bookmarklet is one big file at:
sherdjs/src/bookmarklets/sherd.js

There are three main sections to this file:

1. specific host handlers: this code is run when the page is at a specific hostname. It’s better to write generic handlers when possible, instead of code specific to a site.
2. asset handlers this code looks for specific HTML tags/ microformats on a page, and identifies them as assets. This is probably what you will be writing.
   • If it is an OBJECT or EMBED tag, then there’s a subsection “objects_and_embeds” and you should just create a key in the section “players” with a match() and an asset() function.
3. the Grabber object which handles the UI and dispatches to the host and asset handlers to collect assets to display to the user.