TVML integration Guide v1.0.0

Initial Setup

Adding vilynx previews on tvOs is very simple and doesn't require any changes to your application's core code.

You’ll need to include the Vilynx TVJS script, enter your user key (which you can obtain from your User details in the Vilynx Dashboard) and add the vilynx_media parameter to your Media Content. Please refer to the following instructions for information on how to integrate Vilynx previews into your tvOS App.

1. Load the VilynxOTTScript

Load the following script on your App.onLaunch function:

Script url → static.vilynx.com/ott/tvOsVpg.1.0.0.min.js

An example of this can be seen here:

App.onLaunch = function () {
    const vilynxOttScriptUrl = "https://static.vilynx.com/ott/tvOsVpg.1.0.0.min.js";
    var jsFilesArray = [vilynxOttScriptUrl];

    evaluateScripts(javascriptFiles, function (success) {
        if (success) {
            //All the script are injected
            vilynxGallery = new vilynxGallery();// Create a new Vilynx Gallery instance
            vilynxGallery.key = 'e685ff41322653a80f121a2957bc6d57'//Your user key
            var extension = "templates/main_template.xml"; //Get your TVML template
            getDocument(extension);

        } else {
            throw ("Playback Example: unable to evaluate scripts.");
        }
    });
}

2. Modify your TVML layout

The second step is to add the vilynx_media parameter to the media contents in which you want to enable the previews.

Your mediaContent can be as you want, but it should contain at least the playbackMode="onFocus", the vilynx_media and include an image element.

To do so, please follow this format on your TVML layout:

<!--  Your TVML code -->
    <lockup>
        <mediaContent playbackMode="onFocus" vilynx_media="videoGUID or videoUrl">
            <img src="example.com/newsImage.jpg" width="250" height="141">
            <title>This is a title</title>
        </mediaContent>
    </lockup>
<!-- More TVML code -->

Remember that you will have to pass the video url or GUID that identifies that video so that the API can understand which teaser to display.

3. Execute vilynxGallery.animateMedia()

Finally, before inserting your TVML layout, you need to execute the following function:

CopyvilynxGallery.animateMedia(document);

And that should be it. The VilynxGallery OTT plugin will take care of showing the teasers to animate your thumbnails.

Integration examples

The following integration example should help you understand the three steps described above. If you need more help to integrate the OTT plugin send us an email to info@vilynx.com

On the next snippet, is a example of TVJS code for the integration:

var vilynxGallery;

App.onLaunch = function () {
    const vilynxOttScriptUrl = "https://static.vilynx.com/ott/tvOsVpg.1.0.0.min.js";
    var jsFilesArray = [vilynxOttScriptUrl];

    evaluateScripts(javascriptFiles, function (success) {
        if (success) {
            //All the script are injected
            vilynxGallery = new vilynxGallery();// Create a new Vilynx Gallery instance
            vilynxGallery.key = 'e685ff41322653a80f121a2957bc6d57'//Your user key
            var extension = "templates/main_template.xml"; //Get your TVML template
            getDocument(extension);

        } else {
            throw ("Playback Example: unable to evaluate scripts.");
        }
    });
}

/* fetch a document page from a remote server */
function getDocument(extension) {
    var templateXHR = new XMLHttpRequest();
    var url = baseURL + extension;
    loadingTemplate();
    templateXHR.responseType = "document";
    templateXHR.addEventListener("load", function() {pushPage(templateXHR.responseXML);}, false);
    templateXHR.open("GET", url, true);
    templateXHR.send();
}

/* This function will inject a loaded xml doc into de main view */
function pushPage(document){
    var currentDoc = getActiveDocument();

    //Once the TVML is loaded and before injecting it into the page, we will let vilynx take control of all the media elements
    vilynxGallery.animateMedia(document);

    // Inject or replace
    if (currentDoc.getElementsByTagName("loadingTemplate").item(0) == null) {
        console.log("no loading");
        navigationDocument.pushDocument(document);

    } else {
        navigationDocument.replaceDocument(document, currentDoc);
        console.log("loading");
    }
}