Content rendering

There are nine scripts that deal with content rendering. These are located under the javascripts/contentRendering folder.

ContentCache.js

This is a simple caching layer for content objects. If the requested content object isn't already loaded, then it makes an AJAX call to get it. The method to use is:

ContentCache.load(id, callback);

An example:

ContentCache.load(123, function(content) {
    console.log(content);
});

ContentLayoutManager.js

This is used to create the layout when viewing audio or video content. It deals with the creation of the Transcription/Definitions/Annotations tabs for both desktop and mobile. It is only used in VideoRenderer.js.

Example 1: Single panel

var $container = $("#container");
var layout = ContentLayoutManager.onePanel($container);

The resulting layout variable will look like this:

{
    $player: [JQuery wrapper of main div]
}

Example 2: Two panels, one tab

var $container = $("#container");
var tabNames = ["Transcription"];
var layout = ContentLayoutManager.twoPanel($container, tabNames);

The resulting layout variable will look like this:

{
    $player: [JQuery wrapper for main div],
    $Transcription: [JQuery wrapper for side container]
}

Example 3: Two panels, two tabs

var $container = $("#container");
var tabNames = ["Transcription", "Definitions"];
var layout = ContentLayoutManager.twoPanel($container, tabNames);

The resulting layout variable will look like this:

{
    $player: [JQuery wrapper for main div],
    Transcription: {
        $tab: [JQuery wrapper for Bootstrap tab]
        $content: [JQuery wrapper for tab content div]
    },
    Definitions: {
        $tab: [JQuery wrapper for Bootstrap tab]
        $content: [JQuery wrapper for tab content div]
    }
}

ContentRenderer.js

This is used for rendering content. It will call the appropriate specific renderer depending on the content type.

ContentRenderer.render({});

The following are parameters that you can set:

Parameter name	Possible values	Effect
content	[Object]	Renders the given content
content	[Number]	Retrieves the content by the given ID and renders it
holder	[Element]	The element where the content should be rendered.
aspectRatio	[Number]	When rendering video, this is the aspect ratio (width / height) of the video. Use Ayamel.aspectRatios for common preset ratios.
courseId	[Number]	(optional) Renders the content in the context of this course.
annotate	[Boolean]	(optional) If true, renders and set annotations. Defaults to false.
open	[Boolean]	(optional) If true, clicking on image annotations opens the images in a new window/tab.
startTime	[Number]	(optional) The time where the audio/video should start. Defaults to 0.
endTime	[Number]	(optional) The time where the audio/video should end. Defaults to media end.
screenAdaption	[Object]	(optional) Parameters for adjust the video to fit in the screen. See detail below.
callback	[Object]	(optional) A function which is called when the rendering is complete. The data that is passed into the callback varies depending on the content being rendered.

Screen Adaption

This is an object with the following properties:

• fit - Adjust the size so that it can fit in the window.
• scroll - Scroll so that the video is entirely contained in the window.
• padding - Extra vertical padding added to the video container.

{
    fit: true,
    scroll: false,
    padding: 61
}

ContentThumbnails.js

This little utility deals with figuring out what image to use as a thumbnail for a content object, whether it's the content's defined thumbnail or a placeholder.

var thumbnailURL = ContentThumbnails.resolve(content);

ImageRenderer.js

This deals with the rendering of images. Used by ContentRenderer.js.

An Image object is passed back via the callback function.

QuestionSetRenderer.js

This deals with the rendering of question sets. Used by ContentRenderer.js.

No data is passed back in the callback function.

TextRenderer.js

This deals with the rendering of text. Used by ContentRenderer.js.

Data passed back in the callback is an object containing the following:

Object key	Description
manifests	The array of AnnotationManifest objects used in annotating the text.
layout	{ $textHolder: (The single panel layout containing the pre element) }

TranscriptPlayer.js

The transcript display widget. Used by VideoRenderer.js and AnnotationTextEditor.js.

Creating

var transcriptPlayer = new TranscriptPlayer({
    $holder: [JQuery wrapper],
    syncButton: [Boolean],
    captionTracks: [Array of TextTrack],
    filter: [Function]
});

Parameter	Description
$holder	Where the transcript player will be rendered
syncButton	Whether or not to include a sync button. Defaults to false
captionTracks	The TextTrack objects to display
filter	A function which is called when the user clicks on a cue.

The filter function has the following signature:

function (cue, $cueHolder)

Events

You can add event listeners via addEventListener. The only event emitted is "cueClick".

Adding tracks

You can add tracks to the transcript player with the following method:

transcriptPlayer.addTrack(textTrack);

Highlighting cues at a certain time

The transcript player will highlight active cues at a particular time. You just have to tell it what time:

transcriptPlayer.currentTime = 123;

Updating

To update the transcript player to match the text tracks which might have changed. Note that this method can take up to a couple seconds, so never update real-time.

transcriptPlayer.update();

VideoRenderer.js

This deals with the rendering of video and audio. Used by ContentRenderer.js.

Data passed back in the callback is an object containing the following:

Object key	Description
transcripts	An array of Resource objects which refer to the caption tracks.
captionTracks	An array of TextTrack objects which are the caption tracks.
manifests	The array of AnnotationManifest objects used in annotating.
layout	The layout object generated from ContentLayoutManager.js
transcriptPlayer	The transcript player
videoPlayer	The Ayamel.js media player
translator	The TextTranslator object used when translating the caption tracks
annotator	The TextAnnotator object used when annotating the caption tracks