ATV

A minimalistic JavaScript SDK for Apple TV application development. It assumes the code is run in an environment where TVMLKit JS is present (or at least mocked).

Extends

Members

(static) _

Internal alias to lodash library
Source:

(static) Ajax :module:ajax

Ajax wrapper using Promises
Source:
Type:

(static) Handler :module:handler

Basic event handling including some default ones
Source:
Type:

(static) LZString

Internal alias to lz-string compression library
Source:

(static) Menu :module:menu

TVML menu template creation with few utility methods
Source:
Type:

(static) Navigation :module:navigation

Page level navigation methods.
Source:
Type:

(static) Page :module:page

Page Creation
Source:
Type:

(static) Parser :module:parser

A minimalistic parser wrapper using the builtin DOMParser
Source:
Type:

(static) Settings :module:settings

Apple TV settings object with some basic helpers
Source:
Type:

Methods

(static) reload(optionsopt, reloadDataopt)

Reloads the application with the provided options and data.
Source:
Parameters:
Name Type Attributes Description
options Object <optional>
Options value. {when: 'now'} // or 'onResume'
reloadData Object <optional>
Custom data that needs to be passed while reloading the app
Fires:
Example
ATV.reload({when: 'now'}, {customData});

(static) start(cfg)

Starts the Apple TV application after applying the relevant configuration options
Source:
Parameters:
Name Type Description
cfg Object Configuration options
Fires:
Example
// create your pages
let SearchPage = ATV.Page.create({ page configurations });
let HomePage = ATV.Page.create({ page configurations });
let MoviesPage = ATV.Page.create({ page configurations });
let TVShowsPage = ATV.Page.create({ page configurations });
let LoginPage = ATV.Page.create({ page configurations });

// template functions
const loaderTpl = (data) => `<document>
    <loadingTemplate>
        <activityIndicator>
            <title>${data.message}</title>
        </activityIndicator>
    </loadingTemplate>
</document>`;

const errorTpl = (data) => `<document>
    <descriptiveAlertTemplate>
          <title>${data.title}</title>
          <description>${data.message}</description>
      </descriptiveAlertTemplate>
  </document>`;

// Global TVML styles
let globalStyles = `
.text-bold {
    font-weight: bold;
}
.text-white {
    color: rgb(255, 255, 255);
}
.dark-background-color {
    background-color: #091a2a;
}
.button {
    background-color: rgba(0, 0, 0, 0.1);
    tv-tint-color: rgba(0, 0, 0, 0.1);
}
`;

// start your application by passing configurations
ATV.start({
    style: globalStyles,
    menu: {
        attributes: {},
        items: [{
            id: 'search',
            name: 'Search',
            page: SearchPage
        }, {
            id: 'homepage',
            name: 'Home',
            page: HomePage,
            attributes: {
                autoHighlight: true // auto highlight on navigate
            }
        }, {
            id: 'movies',
            name: 'Movies',
            page: MoviesPage
        }, {
            id: 'tvshows',
            name: 'TV Shows',
            page: TVShowsPage
        }]
    },
    templates: {
        // loader template
        loader: loaderTpl,
        // global error template
        error: errorTpl,
        // xhr status based error messages
        status: {
            '404': () => errorTpl({
                title: '404',
                message: 'The given page was not found'
            }),
            '500': () => errorTpl({
                title: '500',
                message: 'An unknown error occurred, please try again later!'
            })
        }
    },
    // global event handlers that will be called for each of the pages
    handlers: {
        select: {
            globalSelecthandler(e) {
                let element = e.target;
                let someElementTypeCheck = element.getAttribute('data-my-attribute');

                if (elementTypeCheck) {
                    // perform action
                }
            }
        }
    },
    onLaunch(options) {
        // navigate to menu page
        ATV.Navigation.navigateToMenuPage();
        // or you can navigate to previously created page
        // ATV.Navigation.navigate('login');
    }
});