diff --git a/README.md b/README.md index 0761ea7..85b9820 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,18 @@ -# tvDemo -A NodeJS version of the AppleTV demo project +# tvDemo Introduction + +**tvDemo** is a test project (written with NodeJS, ExpressJS and EJS) for the new Apple tvOS. This is actually a modification to the demo code that Apple uses to give an overview of the template functionality of tvOS. I thought the best way to get to grips with it was to try and using some other technolgies to create a duplicate app, and though now whwre near perfect, it does appear to work and I do lile the user of EJS to render the TVML templates. + + +## Prerequisites +Yo will need the latest (at the moment) beta of XCode 7.1 as well as this project if you want to run the code and see what it does (you don't need a physical developer kit to run the app as XCode has a simulator). + +You should create a simple Swift tvOS app project (as explained in the developer docs) and then just set the following to connect to the server when it is running: + +``` + static let TVBaseURL = "http://localhost:9001/" + static let TVBootURL = "\(AppDelegate.TVBaseURL)js/application.js" + +``` + +Setting tvBaselURL to wherever the Node server is running. + diff --git a/app.js b/app.js new file mode 100644 index 0000000..871c00b --- /dev/null +++ b/app.js @@ -0,0 +1,26 @@ +/** + * This is the main Node app.js + * This is the first file that is run when the server starts + * + * developed by Steve Rogers (@sarmcon) + * Oct 2015 + */ + +var express = require('express'), + app = express(); + +// set the view engine to ejs +app.set('view engine', 'ejs'); +app.set('views', __dirname + '/views'); + + +// set up our static file route +app.use(express.static(__dirname + '/public')); + +// set up our routes +app.use(require('./routers/tvml')) + +// Start our Server +var server = app.listen(9001, function () { + console.log('Node tvOS sample app now listening on port: %s', server.address().port); +}); diff --git a/lib/storage.js b/lib/storage.js new file mode 100644 index 0000000..25c71d2 --- /dev/null +++ b/lib/storage.js @@ -0,0 +1,35 @@ +/** + * storage.js + + * a quick and dirty helper module to store temp vars while the app is running + * should probably use somthing a bit better - but you get the idea! + * + * developed by Steve Rogers (@sarmcon) + * Oct 2015 + */ +var store={}; + + +/** + * Exported Functions + */ +exports.get = getData; +exports.set = saveData; + + +/** + * Save a value to our temp store + * @param key + * @param value + */ +function saveData(key, value){ + store[key] = value; +} + +/** + * Get a value to our temp store + * @param key + */ +function getData(key){ + return store[key]||false; +} \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..b565cbf --- /dev/null +++ b/package.json @@ -0,0 +1,15 @@ +{ + "name": "tott", + "version": "1.0.0", + "description": "A Test Node TV Server", + "main": "app.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "Steve Rogers", + "license": "ISC", + "dependencies": { + "ejs": "^2.3.4", + "express": "^4.13.3" + } +} diff --git a/public/js/Presenter.js b/public/js/Presenter.js new file mode 100644 index 0000000..7cc6dcc --- /dev/null +++ b/public/js/Presenter.js @@ -0,0 +1,112 @@ +/* + * Presenter.js + * + * from Original Apple example code - modfied to use XMLHttpRequest loading in rResouceLoader + * + */ + +var Presenter = { + + // The default Presenter + defaultPresenter: function(xml) { + if(this.loadingIndicatorVisible) { + navigationDocument.replaceDocument(xml, this.loadingIndicator); + this.loadingIndicatorVisible = false; + } else { + navigationDocument.pushDocument(xml); + } + }, + + // modal presenter + modalDialogPresenter: function(xml) { + navigationDocument.presentModal(xml); + }, + + // menu bar presenter + menuBarItemPresenter: function(xml, ele) { + + var feature = ele.parentNode.getFeature("MenuBarDocument"); + if (feature) { + var currentDoc = feature.getDocument(ele); + if (!currentDoc) { + feature.setDocument(xml, ele); + } + } + }, + + + // document load event handler + load: function(event) { + console.log(event); + + var self = this, + ele = event.target, + templateURL = ele.getAttribute("template"), + presentation = ele.getAttribute("presentation"); + + if (templateURL) { + + self.showLoadingIndicator(presentation); + + // modified to use our XMLHttpRequest Loader + resourceLoader.loadResource(templateURL, function(doc) { + + doc.addEventListener("select", self.load.bind(self)); + doc.addEventListener("highlight", self.load.bind(self)); + + if (self[presentation] instanceof Function) { + self[presentation].call(self, doc, ele); + } else { + self.defaultPresenter.call(self, doc); + } + + }); + } + }, + + // generate doc from TVML code + makeDocument: function(resource) { + if (!Presenter.parser) { + Presenter.parser = new DOMParser(); + } + + var doc = Presenter.parser.parseFromString(resource, "application/xml"); + return doc; + }, + + + // display a loading indicator + showLoadingIndicator: function(presentation) { + + if (!this.loadingIndicator) { + this.loadingIndicator = this.makeDocument(this.loadingTemplate); + } + + if (!this.loadingIndicatorVisible && presentation != "modalDialogPresenter" && presentation != "menuBarItemPresenter") { + navigationDocument.pushDocument(this.loadingIndicator); + this.loadingIndicatorVisible = true; + } + }, + + // remove loading indicator + removeLoadingIndicator: function() { + if (this.loadingIndicatorVisible) { + navigationDocument.removeDocument(this.loadingIndicator); + this.loadingIndicatorVisible = false; + } + }, + + /** + * @description Instead of a loading a template from the server, it can stored in a property + * or variable for convenience. This is generally employed for templates that can be reused and + * aren't going to change often, like a loadingIndicator. + */ + loadingTemplate: ` + + + + Loading... + + + ` +} diff --git a/public/js/ResourceLoader.js b/public/js/ResourceLoader.js new file mode 100644 index 0000000..4f00bba --- /dev/null +++ b/public/js/ResourceLoader.js @@ -0,0 +1,34 @@ +/* + * ResourceLoader.js + * + * Helper to load our requested resource using XMLHttpRequest + */ + + +function ResourceLoader(baseurl) { + this.BASEURL = baseurl; +} + + +/** + * This will load the specified resource and then invoke the callback + * This version uses the XMLHttpRequest method as we do not need to parse the result before using + * as EJS does this for us. + */ +ResourceLoader.prototype.loadResource = function(url, callback) { + + var self = this; + + var templateXHR = new XMLHttpRequest(); + templateXHR.responseType = "document"; + templateXHR.addEventListener("load", function() { + callback.call(self,templateXHR.responseXML); + }, false); + + templateXHR.open("GET", `${self.BASEURL}` + url, true); + templateXHR.send(); + return templateXHR; + +} + + diff --git a/public/js/application.js b/public/js/application.js new file mode 100644 index 0000000..5b6173b --- /dev/null +++ b/public/js/application.js @@ -0,0 +1,58 @@ +/** + * application.js + * + * This is the entry point to the application and handles the initial loading of required JavaScript files. + * + * developed by Steve Rogers (@sarmcon) + * Oct 2015 + */ +var resourceLoader; + + /** + * Run when the App launches + */ + App.onLaunch = function(options){ + + var javascriptFiles = [ + `${options.BASEURL}js/ResourceLoader.js`, + `${options.BASEURL}js/Presenter.js` + ]; + + evaluateScripts(javascriptFiles, function(success) { + + if(success){ + resourceLoader = new ResourceLoader(options.BASEURL); + resourceLoader.loadResource("", function(doc) { + doc.addEventListener("select", Presenter.load.bind(Presenter)); + navigationDocument.pushDocument(doc); + }); + } else { + var alert = createAlert("Evaluate Scripts Error", "There was an error attempting to evaluate the external JavaScript files.\n\n Please check your network connection and try again later."); + navigationDocument.presentModal(alert); + + throw ("Playback Example: unable to evaluate scripts."); + } + + }); + + } + + /** + * This convenience function returns an alert template, which can be used to present errors to the user. + */ +var createAlert = function(title, description) { + + var alertString = ` + + + ${title} + ${description} + + ` + + var parser = new DOMParser(); + + var alertDoc = parser.parseFromString(alertString, "application/xml"); + + return alertDoc +} \ No newline at end of file diff --git a/routers/tvml.js b/routers/tvml.js new file mode 100644 index 0000000..a4a1f38 --- /dev/null +++ b/routers/tvml.js @@ -0,0 +1,125 @@ +/** + * This is the router for all the TVML requests + * Basic but functional + * + * developed by Steve Rogers (@sarmcon) + * Oct 2015 + */ + var express = require('express'), + router = express.Router(), + db = require('../lib/storage'); + + +// Lets put some request debugging in +router.use(function (req, res, next) { + console.log("Request--> " + req.originalUrl); + next(); +}); + + +/** + * Our TVML Routes + */ +router.get('/tvml/Alert.xml.js', function (req, res) { + res.render('tvml/Alert'); +}); + +router.get('/tvml/AlertWithDescription.xml.js', function (req, res) { + res.render('tvml/AlertWithDescription'); +}); + +router.get('/tvml/AlertWithShelf.xml.js', function (req, res) { + res.render('tvml/AlertWithShelf',{baseURL: db.get("baseURL")}); +}); + +router.get('/tvml/Catalog.xml.js', function (req, res) { + res.render('tvml/Catalog',{baseURL: db.get("baseURL")}); +}); + +router.get('/tvml/Compilation.xml.js', function (req, res) { + res.render('tvml/Compilation',{baseURL: db.get("baseURL")}); +}); + +router.get('/tvml/DescriptiveAlert.xml.js', function (req, res) { + res.render('tvml/DescriptiveAlert'); +}); + +router.get('/tvml/Form.xml.js', function (req, res) { + res.render('tvml/Form'); +}); + +router.get('/tvml/ListItemExamples.xml.js', function (req, res) { + res.render('tvml/ListItemExamples',{baseURL: db.get("baseURL")}); +}); + +router.get('/tvml/ListWithBanner.xml.js', function (req, res) { + res.render('tvml/ListWithBanner',{baseURL: db.get("baseURL")}); +}); + +router.get('/tvml/Loading.xml.js', function (req, res) { + res.render('tvml/Loading'); +}); + +router.get('/tvml/Main.xml.js', function (req, res) { + res.render('tvml/Main',{baseURL: db.get("baseURL")}); +}); + +router.get('/tvml/MenuBar.xml.js', function (req, res) { + res.render('tvml/MenuBar',{baseURL: db.get("baseURL")}); +}); + +router.get('/tvml/Parade.xml.js', function (req, res) { + res.render('tvml/Parade', {baseURL: db.get("baseURL")}); +}); + +router.get('/tvml/Product.xml.js', function (req, res) { + res.render('tvml/Product',{baseURL: db.get("baseURL")}); +}); + +router.get('/tvml/ProductBundle.xml.js', function (req, res) { + res.render('tvml/ProductBundle',{baseURL: db.get("baseURL")}); +}); + +router.get('/tvml/Rating.xml.js', function (req, res) { + res.render('tvml/Rating'); +}); + +router.get('/tvml/Search.xml.js', function (req, res) { + res.render('tvml/Search',{baseURL: db.get("baseURL")}); +}); + +router.get('/tvml/Stack.xml.js', function (req, res) { + res.render('tvml/Stack',{baseURL: db.get("baseURL")}); +}); + +router.get('/tvml/Stack_DarkTheme.xml.js', function (req, res) { + res.render('tvml/Stack_DarkTheme',{baseURL: db.get("baseURL")}); +}); + +router.get('/tvml/Stack_LightTheme.xml.js', function (req, res) { + res.render('tvml/Stack_LightTheme',{baseURL: db.get("baseURL")}); +}); + +router.get('/tvml/Stack_Room.xml.js', function (req, res) { + res.render('tvml/Stack_Room',{baseURL: db.get("baseURL")}); +}); + +router.get('/tvml/Stack_Separator.xml.js', function (req, res) { + res.render('tvml/Stack_Separator',{baseURL: db.get("baseURL")}); +}); + + +/** + * And Our Default Route + */ +router.get('/', function (req, res) { + + // record the application base URL here + db.set("baseURL", req.protocol + '://' + req.get('host')); + console.log("setting the baseURL: " + db.get("baseURL")); + + res.render('tvml/index',{baseURL: db.get("baseURL")}); +}); + +// export +module.exports = router \ No newline at end of file diff --git a/views/tvml/Alert.ejs b/views/tvml/Alert.ejs new file mode 100644 index 0000000..c837324 --- /dev/null +++ b/views/tvml/Alert.ejs @@ -0,0 +1,13 @@ + + + + Confirmation + Are you sure? + + + + \ No newline at end of file diff --git a/views/tvml/AlertWithDescription.ejs b/views/tvml/AlertWithDescription.ejs new file mode 100644 index 0000000..413d9d6 --- /dev/null +++ b/views/tvml/AlertWithDescription.ejs @@ -0,0 +1,13 @@ + + + + Title + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + + + + \ No newline at end of file diff --git a/views/tvml/AlertWithShelf.ejs b/views/tvml/AlertWithShelf.ejs new file mode 100644 index 0000000..65606f7 --- /dev/null +++ b/views/tvml/AlertWithShelf.ejs @@ -0,0 +1,55 @@ + + + + + + + Title + +
+ + + Title 1 + + + + Title 2 + + + + Title 3 + + + + Title 4 + + + + Title 5 + + Title + Text 1 + Text 2 + Centered Text + + +
+ + + + + \ No newline at end of file diff --git a/views/tvml/Catalog.ejs b/views/tvml/Catalog.ejs new file mode 100644 index 0000000..e47ee3a --- /dev/null +++ b/views/tvml/Catalog.ejs @@ -0,0 +1,156 @@ + + + + + + + + Title + + +
+
+ Section Header +
+ + Title 1 + 6 + + +
+ + + Title 1 + + + + Title 2 + + + + Title 3 + + + + Title 4 + + + + Title 5 + + + + Title 6 + +
+ + + + + Title 2 + 8 + + +
+ + + Title 1 + + + + Title 2 + + + + Title 3 + + + + Title 4 + + + + Title 5 + + + + Title 6 + + + + Title 7 + + + + Title 8 + +
+ + + + + Title 3 + 12 + + +
+ + + Title 1 + + + + Title 2 + + + + Title 3 + + + + Title 4 + + + + Title 5 + + + + Title 6 + + + + Title 7 + + + + Title 8 + + + + Title 9 + + + + Title 10 + + + + Title 11 + + + + Title 12 + +
+ + + +
+ + + \ No newline at end of file diff --git a/views/tvml/Compilation.ejs b/views/tvml/Compilation.ejs new file mode 100644 index 0000000..b807758 --- /dev/null +++ b/views/tvml/Compilation.ejs @@ -0,0 +1,103 @@ + + + + + + + + + + + + + + Title 1 + + + + Title 2 + + + + Title 3 + + + + +
+ Title + Subtitle + + Text 1 + Text 2 + +
+
+
+ Title +
+ + 1 + Title 1 + Subtitle 1 + Right label 1 + + + 2 + Title 2 + Subtitle 2 + Right label 2 + + + 3 + Title 3 + Subtitle 3 + Right label 3 + + + 4 + Title 4 + Subtitle 4 + Right label 4 + + + 5 + Title 5 + Subtitle 5 + Right label 5 + + + 6 + Title 6 + Subtitle 6 + Right label 6 + + + 7 + Title 7 + Subtitle 7 + Right label 7 + + + 8 + Title 8 + Subtitle 8 + Right label 8 + + + 9 + Title 9 + Subtitle 9 + Right label 9 + +
+ + + \ No newline at end of file diff --git a/views/tvml/DescriptiveAlert.ejs b/views/tvml/DescriptiveAlert.ejs new file mode 100644 index 0000000..f974ff4 --- /dev/null +++ b/views/tvml/DescriptiveAlert.ejs @@ -0,0 +1,17 @@ + + + + Lorem Ipsum + + Lorem ipsum dolor sit amet, turpis non wisi metus egestas velit sagittis, wisi faucibus eget aliquet dolor convallis, sociis felis blandit, enim purus vestibulum nulla sit cupiditate. Elit praesent bibendum ante, a feugiat nunc molestie ad dolor. Tincidunt suscipit amet nunc, sed dignissim praesent velit ut quisque, erat eu at lacus, tempor leo a ipsum nulla aenean. Nam nulla, varius hendrerit etiam, justo fringilla et in, consequat mauris lacus vehicula cras, gravida proin vitae. Vehicula adipiscing eget, leo ipsum. Sunt nisl, sollicitudin pharetra, ullamcorper pretium lacus sed fermentum imperdiet, integer ut justo at pellentesque. Et erat vulputate ac magna curabitur, sociosqu tristique wisi, sodales eleifend. Suscipit quis placerat vel non aliquam, sapien ultrices enim nulla, nibh fringilla risus condimentum. Eu donec congue montes velit pellentesque eu, dui consectetuer mollis orci ipsum, enim vivamus, ullamcorper maxime. Tellus elit vel lacus sed. Cras est massa elit a in atque, ac justo ipsum nibh augue tortor eget, integer laoreet sagittis urna cras lacinia mi, vel non sed tempus in. Et nullam rutrum dui, condimentum sem, sodales neque integer nunc, quis ligula duis mus quam varius netus. Fermentum netus arcu sit. Nunc vestibulum duis porta etiam, ut ipsum id, sollicitudin id ad. Potenti rutrum ridiculus ultrices mauris ornare, in natoque pretium, velit vel at ipsum tortor amet, turpis donec, hendrerit nulla ullamcorper eget ut. Platea est a nunc, porta blandit elit quis elit a, sit vestibulum nulla eget facilisis facilisis accumsan, erat turpis integer viverra maecenas rerum et. Rutrum non tempus, porta rutrum nec et volutpat, viverra laoreet erat semper, proin urna mauris sagittis rhoncus. Massa dignissim per ut id donec ultrices, non adipiscing dis neque ultricies lectus ullamcorper, vel amet sapien et, suspendisse mollis sit in vel, quis et ut accumsan consectetuer. Semper sodales vivamus libero, amet eu vestibulum dolor enim fusce fusce, faucibus maecenas quam turpis vel. Sapien pede dis, leo ante et sit rutrum. Pellentesque sollicitudin in nec sed libero augue, elit aliquam wisi lectus, neque quam nec vitae, diam ligula tortor, suspendisse aliquet quis. Sapien in lacinia auctor, felis quisque iaculis arcu accumsan, vel mattis id id, purus donec arcu tempor quam nec. A convallis vel nonummy, habitasse amet integer, dui arcu et maecenas, vestibulum curabitur commodo sit. Vivamus leo fringilla porttitor, etiam class quis risus blandit. Blandit blandit arcu augue, at vitae et nascetur mauris pulvinar cum. Ac nec tincidunt justo alias, urna leo nam non platea nec elementum. Est magna in. Massa ac. Ornare enim vestibulum, aenean nibh, nunc eget maecenas neque, suscipit molestie. Sed at lorem et, nonummy sit quis fringilla suscipit cras, leo cras sem nulla, mauris aliquam mauris pede ut purus aliquam. Ultricies in ut. Aliquam egestas erat augue in nibh nunc, nunc curabitur senectus turpis, vestibulum duis eget rhoncus metus, diam mattis, tellus magna potenti in et volutpat. Risus pede sed lectus penatibus, litora ut at, interdum sapien vestibulum duis, sapien ac cum fermentum, dictumst dolor interdum luctus vulputate conubia. Tortor nec in, curabitur sagittis class dapibus. Feugiat tincidunt, tellus pede est sem sed netus erat. Felis euismod amet felis. Leo nonummy erat, eu orci praesent consectetuer, elementum amet tristique metus ac. Vestibulum ultrices vivamus, aenean tempus luctus. Pellentesque sem feugiat, sodales sollicitudin, est amet ornare. Quidem vulputate ridiculus augue wisi ac, quis at libero blandit, non ultrices metus feugiat laboriosam vel consequatur, odio ac ut aliquam potenti, ut fermentum consectetuer sapien mauris bibendum. Pretium ullamcorper commodo est donec ac, ultrices eu laoreet fringilla erat auctor, in a non nullam pellentesque placerat. Urna lacus id phasellus, magnis vestibulum justo tellus urna, lectus donec urna. Culpa lacus mollis bibendum mi vel, libero ligula maecenas, vestibulum sociosqu dignissim fermentum, metus tempus sapien lectus. Vitae sem quisque, vestibulum habitant integer bibendum mauris feugiat, lectus nibh nunc odio pellentesque tortor, est scelerisque volutpat, diam vel magna turpis. Sem dolor feugiat ut luctus eu, id ligula arcu diam etiam lacus. Justo mi nisl sed. Quis nec vestibulum vestibulum amet pede posuere, risus est. Nunc nunc consequat ullamcorper eu, dui suspendisse, posuere nullam vel. Fermentum id pellentesque, ut ante eu elit, curabitur mauris felis vestibulum montes integer diam. Vitae et duis dictum non condimentum. + + + + + + + \ No newline at end of file diff --git a/views/tvml/Form.ejs b/views/tvml/Form.ejs new file mode 100644 index 0000000..6d36b1c --- /dev/null +++ b/views/tvml/Form.ejs @@ -0,0 +1,22 @@ + + + + + + + + Title + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + + Placeholder text + + + \ No newline at end of file diff --git a/views/tvml/ListItemExamples.ejs b/views/tvml/ListItemExamples.ejs new file mode 100644 index 0000000..2d9456b --- /dev/null +++ b/views/tvml/ListItemExamples.ejs @@ -0,0 +1,133 @@ + + + + + + + + + + + + +
+ List Item Examples +
+
+
+ Default List Items +
+ + Title + + + Title + Subtitle + + + Chevron + + + + Right text + Right + +
+
+
+ List Items with Images +
+ + + Square + + + + Poster + + + + Title + Subtitle + + + + Title + +
+
+
+ Custom List Items +
+ + Secondary text w/ image + + Right + + + + + Title + + Text 1 + Text 2 + + + + + + vs + + + Title + Right + + + Title + Subtitle + +
+ + + \ No newline at end of file diff --git a/views/tvml/ListWithBanner.ejs b/views/tvml/ListWithBanner.ejs new file mode 100644 index 0000000..fd7a6a6 --- /dev/null +++ b/views/tvml/ListWithBanner.ejs @@ -0,0 +1,84 @@ + + + + + + + + + +
+ Title +
+ + + + Common Related Title + Common Related Subtitle + Lorem ipsum Sociis mauris in integer, a dolor netus non dui aliquet, sagittis felis sodales, dolor sociis mauris, vel eu libero cras. Interdum at. Eget habitasse elementum est, ipsum purus pede porttitor class, ut adipiscing, aliquet sed auctor, imperdiet arcu per diam dapibus libero duis. Enim eros in vel, volutpat. + + +
+
+ Section Title +
+ + Title 1 + + + + Related Title 1 + Related Subtitle 1 + Lorem ipsum Sociis mauris in integer, a dolor netus non dui aliquet, sagittis felis sodales, dolor sociis mauris, vel eu libero cras. Interdum at. Eget habitasse elementum est, ipsum purus pede porttitor class, ut adipiscing, aliquet sed auctor, imperdiet arcu per diam dapibus libero duis. Enim eros in vel, volutpat. + + + + + Title 2 + + + + Related Title 2 + Related Subtitle 2 + Lorem ipsum Sociis mauris in integer, a dolor netus non dui aliquet, sagittis felis sodales, dolor sociis mauris, vel eu libero cras. Interdum at. Eget habitasse elementum est, ipsum purus pede porttitor class, ut adipiscing, aliquet sed auctor, imperdiet arcu per diam dapibus libero duis. Enim eros in vel, volutpat. + + + + + Title 3 + + + + Related Title 3 + Related Subtitle 3 + Lorem ipsum Sociis mauris in integer, a dolor netus non dui aliquet, sagittis felis sodales, dolor sociis mauris, vel eu libero cras. Interdum at. Eget habitasse elementum est, ipsum purus pede porttitor class, ut adipiscing, aliquet sed auctor, imperdiet arcu per diam dapibus libero duis. Enim eros in vel, volutpat. + + + + + Title 4 + + + + Related Title 4 + Related Subtitle 4 + Lorem ipsum Sociis mauris in integer, a dolor netus non dui aliquet, sagittis felis sodales, dolor sociis mauris, vel eu libero cras. Interdum at. Eget habitasse elementum est, ipsum purus pede porttitor class, ut adipiscing, aliquet sed auctor, imperdiet arcu per diam dapibus libero duis. Enim eros in vel, volutpat. + + + + + Title 5 + + + Title 6 + + + Title 7 + + + Title 8 + +
+ + + \ No newline at end of file diff --git a/views/tvml/Loading.ejs b/views/tvml/Loading.ejs new file mode 100644 index 0000000..b163ad8 --- /dev/null +++ b/views/tvml/Loading.ejs @@ -0,0 +1,8 @@ + + + + + Loading... + + + \ No newline at end of file diff --git a/views/tvml/Main.ejs b/views/tvml/Main.ejs new file mode 100644 index 0000000..440606b --- /dev/null +++ b/views/tvml/Main.ejs @@ -0,0 +1,27 @@ + + + + + + + + + + + +
+ + Tab 1 + + + Tab 2 + + + Tab 3 + +
+ + + \ No newline at end of file diff --git a/views/tvml/MenuBar.ejs b/views/tvml/MenuBar.ejs new file mode 100644 index 0000000..eba7129 --- /dev/null +++ b/views/tvml/MenuBar.ejs @@ -0,0 +1,13 @@ + + + + + + Tab 1 + + + Tab 2 + + + + \ No newline at end of file diff --git a/views/tvml/Parade.ejs b/views/tvml/Parade.ejs new file mode 100644 index 0000000..8813b84 --- /dev/null +++ b/views/tvml/Parade.ejs @@ -0,0 +1,50 @@ + + + + +
+ Parade Preview +
+
+ + Title 1 + + + + + + + + + + + + + Title 2 + + + Title 3 + + + Title 4 + + + Title 5 + + + Title 6 + +
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/views/tvml/Product.ejs b/views/tvml/Product.ejs new file mode 100644 index 0000000..3e43238 --- /dev/null +++ b/views/tvml/Product.ejs @@ -0,0 +1,215 @@ + + + + + + + + + + + + + +
+ Header +
+ Text 1 + Text 2 + Text 3 + + + + Title + + Text 1 + Text 2 + Text 3 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + + + + Title 1 + + + + Title 2 + + + + Title 3 + + + + + +
+ Shelf Header +
+
+ + + Title 1 + + + + Title 2 + + + + Title 3 + + + + Title 4 + + + + Title 5 + + + + Title 6 + + + + Title 7 + + + + Title 8 + + + + Title 9 + + + + Title 10 + + + + Title 11 + + + + Title 12 + + + + Title 13 + + + + Title 14 + +
+ + +
+ Title +
+
+ + + Title 1 + Subtitle 1 + + + + Title + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + + + + Subtitle + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + +
+ + +
+ Title +
+
+ + + Adam Gooseff + + + + Ailish Kimber + + + + Allen Buchinski + + + + Dave Elfving + + + + Ethan Izzarelli + + + + Euna Kwon + + + + Fritz Ogden + + + + Gilbert Solano + + + + Jamie Wong + + + + Joyce Sihn + + + + Vivian Li + + + + Paul Cashman + + + + Stephanie Vidal + + + + Yumi Asai + + + + Rachel Roth + + + + Mike Stern + +
+ + + \ No newline at end of file diff --git a/views/tvml/ProductBundle.ejs b/views/tvml/ProductBundle.ejs new file mode 100644 index 0000000..2fe998d --- /dev/null +++ b/views/tvml/ProductBundle.ejs @@ -0,0 +1,224 @@ + + + + + + + + + + + + + Title + Subtitle + Text + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + + + + Title 1 + + + + Title 2 + + + Text + Title 3 + + + + + +
+ Shelf Header +
+
+ + + Title 1 + + + + + +
+ Info Header 1 +
+ +
+ Title 1 +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + + + + + + + Title 2 + + +
+ Info Header 2 +
+ +
+ Title 2 +
+ A line of text + + + + + + + Title 3 + + +
+ Info Header 3 +
+ +
+ Title 3 +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + + + + + + + Title 4 + + +
+ Info Header 4 +
+ +
+ Title 4 +
+ + A line of text + + + + + + + + Title 5 + + +
+ Info Header 5 +
+ +
+ Title 5 +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + + + + + + + Title 6 + + +
+ Info Header 6 +
+ +
+ + A line of text + + + +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + + + + +
+ + +
+ Shelf Header +
+
+ + + Title 1 + + + + Title 2 + + + + Title 3 + + + + Title 4 + + + + Title 5 + + + + Title 6 + + + + Title 7 + +
+ + +
+ Shelf Header +
+
+ + Title + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + + + Title 1 + Subtitle 1 + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + + + Title 2 + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + + + Subtitle 3 + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + +
+ + + \ No newline at end of file diff --git a/views/tvml/Rating.ejs b/views/tvml/Rating.ejs new file mode 100644 index 0000000..1194afb --- /dev/null +++ b/views/tvml/Rating.ejs @@ -0,0 +1,7 @@ + + + + Rate Lorem Ipsum + + + \ No newline at end of file diff --git a/views/tvml/Search.ejs b/views/tvml/Search.ejs new file mode 100644 index 0000000..18e9566 --- /dev/null +++ b/views/tvml/Search.ejs @@ -0,0 +1,99 @@ + + + + + + + + + +
+
+ Suggestions +
+ + "arc" + + + arcade + +
+ + + +
+ Shelf Title +
+
+ + + Title 1 + + + + Title 2 + + + + Title 3 + + + + Title 4 + + + + Title 5 + + + + Title 6 + + + + Title 7 + +
+ + +
+ Grid Title +
+
+ + + Title 1 + + + + Title 2 + + + + Title 3 + + + + Title 4 + + + + Title 5 + + + + Title 6 + + + + Title 7 + +
+ + + + \ No newline at end of file diff --git a/views/tvml/Stack.ejs b/views/tvml/Stack.ejs new file mode 100644 index 0000000..d9b362b --- /dev/null +++ b/views/tvml/Stack.ejs @@ -0,0 +1,180 @@ + + + + + + + + +
+ + + + Title 1 + Subtitle 1 + + + + + + Title 2 + Subtitle 2 + + + + + + Title 3 + Subtitle 3 + + +
+ + +
+ Shelf title +
+
+ + + Title 1 + + + + Title 2 + + + + Title 3 + + + + Title 4 + + + + Title 5 + + + + Title 6 + + + + Title 7 + +
+ + +
+ Row 1 +
+
+ + + Title 1 + + + + Title 2 + + + + Title 3 + + + + Title 4 + + + + Title 5 + + + + Title 6 + + + + Title 7 + + + + Title 8 + + + + Title 9 + + + + Title 10 + +
+ + +
+ + + Title 1 + + + + Title 2 + + + + Title 3 + + + + Title 4 + + + + Title 5 + +
+ + +
+ Row 2 +
+
+ + + + Title + Subtitle + + + + + Title + Subtitle + Subtitle 2 + + + + Title + Subtitle + Subtitle 2 + +
+ + + + \ No newline at end of file diff --git a/views/tvml/Stack_DarkTheme.ejs b/views/tvml/Stack_DarkTheme.ejs new file mode 100644 index 0000000..5a44ebb --- /dev/null +++ b/views/tvml/Stack_DarkTheme.ejs @@ -0,0 +1,117 @@ + + + + + + + + + + + Lorem Ipsum Dolor + Lorem Ipsum + + + + Title 1 + + + + Title 2 + + + + Title 3 + + + + + +
+ Shelf title +
+
+ + + Title 1 + + + + Title 2 + + + + Title 3 + + + + Title 4 + + + + Title 5 + + + + Title 6 + + + + Title 7 + +
+ + +
+ Shelf title +
+
+ + + Title 1 + + + + Title 2 + + + + Title 3 + + + + Title 4 + + + + Title 5 + + + + Title 6 + + + + Title 7 + + + + Title 8 + + + + Title 9 + + + + Title 10 + +
+ + + + \ No newline at end of file diff --git a/views/tvml/Stack_LightTheme.ejs b/views/tvml/Stack_LightTheme.ejs new file mode 100644 index 0000000..7e523d2 --- /dev/null +++ b/views/tvml/Stack_LightTheme.ejs @@ -0,0 +1,111 @@ + + + + + + + + + Lorem Ipsum Dolor + Lorem Ipsum + + + + Title 1 + + + + Title 2 + + + + Title 3 + + + + + +
+ Shelf title +
+
+ + + Title 1 + + + + Title 2 + + + + Title 3 + + + + Title 4 + + + + Title 5 + + + + Title 6 + + + + Title 7 + +
+ + +
+ Shelf title +
+
+ + + Title 1 + + + + Title 2 + + + + Title 3 + + + + Title 4 + + + + Title 5 + + + + Title 6 + + + + Title 7 + + + + Title 8 + + + + Title 9 + +
+ + + + \ No newline at end of file diff --git a/views/tvml/Stack_Room.ejs b/views/tvml/Stack_Room.ejs new file mode 100644 index 0000000..730485c --- /dev/null +++ b/views/tvml/Stack_Room.ejs @@ -0,0 +1,95 @@ + + + + + + + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + + + +
+ Shelf title +
+
+ + + Title 1 + + + + Title 2 + + + + Title 3 + + + + Title 4 + + + + Title 5 + + + + Title 6 + + + + Title 7 + +
+ + +
+ Shelf title +
+
+ + + Title 1 + + + + Title 2 + + + + Title 3 + + + + Title 4 + + + + Title 5 + + + + Title 6 + + + + Title 7 + +
+ + + + diff --git a/views/tvml/Stack_Separator.ejs b/views/tvml/Stack_Separator.ejs new file mode 100644 index 0000000..220ef46 --- /dev/null +++ b/views/tvml/Stack_Separator.ejs @@ -0,0 +1,173 @@ + + + + + + + + +
+ + + + + + + + + +
+ + + + + +
+ Shelf title +
+
+ + + Title 1 + + + + Title 2 + + + + Title 3 + + + + Title 4 + + + + Title 5 + + + + Title 6 + + + + Title 7 + + + + Title 8 + + + + Title 9 + + + + Title 10 + + + + Title 11 + + + + Title 12 + + + + Title 13 + + + + Title 14 + +
+ + +
+ + + Title 1 + + + + Title 2 + + + + Title 3 + + + + Title 4 + + + + Title 5 + +
+ + +
+ Shelf title +
+
+ + + Title 1 + + + + Title 2 + + + + Title 3 + + + + Title 4 + + + + Title 5 + + + + Title 6 + + + + Title 7 + + + + Title 8 + + + + Title 9 + + + + Title 10 + +
+ + + + \ No newline at end of file diff --git a/views/tvml/index.ejs b/views/tvml/index.ejs new file mode 100644 index 0000000..90a10a2 --- /dev/null +++ b/views/tvml/index.ejs @@ -0,0 +1,217 @@ + + + + + + + +
+ Template Examples +
+
+ + Alert + + + + An alert template displays a message on screen and asks the user to perform some action, such as confirm a purchase or destructive action. + + + + + Alert with Description + + + + This variation of the alert template uses a description to provide added detail for the user. + + + + + Alert with Shelf + + + + This variation of the alert template presents a shelf of items to the user. + + + + + Catalog + + + + A catalog template allows you to display groupings of related items, such as genres of movies or TV shows. + + + + + Compilation + + + + A compilation template displays elements contained by an item, such as songs in an album or tracks in a playlist. It’s most commonly used to display audio-related content. + + + + + Descriptive Alert + + + + A descriptive alert template shows a lengthy message on screen and may ask the user to perform some action, such as agreeing to terms and conditions or a licensing agreement. + + + + + Form + + + + A form template displays a keyboard and one or more text fields where the user can enter information, such as a name and email address. + + + + + List Item Examples + + + + A list template shows a list of items on the right, such as movies or TV shows. + + + + + List with Banner Image + + + + A list template shows a list of items on the right, such as movies or TV shows. + + + + + Loading + + + + A loading template temporarily displays a progress indicator and some descriptive text while your content is retrieved from the server. + + + + + Main + + + + A main template displays a full-screen image with a menu along the bottom. It’s commonly used for the home screen of a movie, with menu options for playing the movie and accessing chapters or extras. + + + + + Menu Bar + + + + A menu bar template is designed for top-level navigation, as an entry page to your content. It includes a menu of items across the top. Focus on an item to display its related content below the menu. + + + + + Parade + + + + A parade template shows rotating previews for a focused grouping of content, such as movies or albums in a particular genre. + + + + + Product + + + + A product template promotes movies, TV shows, or other products. It typically includes a product image, background, and descriptive information. A shelf below the product content displays related products and the user can scroll down to bring up more information, like cast and crew listings, ratings, or reviews. + + + + + Product Bundle + + + + A product bundle template promotes a series of related TV shows, movies, or other products. It typically includes an image, background, and descriptive information. A shelf below the content displays the products contained by the bundle, such as the episodes of a TV season. The user can scroll down to bring up more information, such as cast and crew listings, ratings, or reviews. + + + + + Rating + + + + A rating template allows the user to adjust the rating of a particular item, such as a movie or song. + + + + + Search + + + + A search template lets users search your content and view found results. It includes a search field, a keyboard, and a list of results. + + + + + Stack + + + + A stack template shows stacked rows of items beneath a banner, such as movies, TV shows, or products. + + + + + Stack with Dark Theme + + + + This version of the stack template uses the dark theme to automatically adjust text color to display properly on a dark background. It also uses an alternate version of the banner element to display a large background image at the top of the page with actionable buttons. + + + + + Stack with Light Theme + + + + This version of the stack template uses the light theme to automatically adjust text color to display properly on a light background. It also uses an alternate version of the banner element to display a small image at the top of the page with text and actionable buttons. + + + + + Stack Room + + + + This version of the stack template uses a banner element to display a large background image at the top of the page with a full description. + + + + + Stack Separator + + + + This version of the stack template shows an example of a separator element and a button, which can be used to alter the content being presented to the user. + + + +
+ + + \ No newline at end of file