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
Methods
(static) reload(optionsopt, reloadDataopt)
Reloads the application with the provided options and data.
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
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');
}
});