Interlochen Media - tvOS TVML UI Prototype [Swiftoberfest]

Key Information

Register
Submit
The challenge is finished.

Challenge Overview

As part of the Swiftoberfest program, Interlochen Center for the Arts is building out an iOS media player application and corresponding AppleTV application.  These apps will allow anyone in the world to view live performances, view past performances, radio streaming, etc and we need your help to build out a AppleTV TVML Prototype!
 
This is one part of a series of upcoming challenges that we'll be launching over the next few weeks.
 

This application should be prototyped using AppleTV's TVML with a javascript backend.  Here is the Apple TV markup Language Reference.  Apple has provided us with a library of templates to use to build the UIs.  Please use those templates and follow guidelines.  We have referenced the templates we expect below.  Please build the UIs for these screens, include the interactions, page transitions, etc.  I have included a base project to work off.  This project includes an xcode project container and a separate project for the markup.  The iOS container is currently setup to reference to markup running on your localhost:8080.  The markup package has a tvml template for the main catalogTemplate already and javascript files to manage running the application.  The attached code packages are based off of the This TVML Tutorial  - please use this as a starting point.

On all Lists of data in the specifications below, Please create a json file in a data folder in the markup package and use Javascript to call that json.  You will need to build the json to match the requirements below (for example:  A video should have a title, subtitle, description, date, duration, video link, image link).  Create each list to show 20 records and create the json long enough to demo scrolling.  Please also include "infinite scrolling" in all lists, meaning that if the user gets NEAR the bottom of the list, it will load another 20 results.  Sort all lists by "most recent date first."

Please implement the example URLs and get them to play correctly in the application.  The example for "Performances" already works.  Please get the "Featured" and radio broadcast URLs to work in the application.  (Webcams will come later).

Interlochen Apple TV Templates :

 

01 - loadingTemplate

-- title : Loading Content

 

02 - catalogTemplate

First screen user sees after the app loads

 

Left Side:

-- list item names:

---- Featured    (example: https://livestream.com/accounts/11307406/events/3805293/player?width=560&height=315&autoPlay=true&mute=false)

---- Performances    (example:  https://player.vimeo.com/external/135871105.hd.mp4?s=04f3bcc100d2bcf485d3a72369d614e3a7fbe6f2)

---- Radio Broadcasts    (examples: ) 

---- Web Cams    (example:  https://player.vimeo.com/external/135871105.hd.mp4?s=04f3bcc100d2bcf485d3a72369d614e3a7fbe6f2)

-- Selecting a list item name populates the Related Content area with videos or audio content

 

Right Side:

-- each item in Related Content will show:

---- Screenshot

---- Title

---- Date in this format: May 22, 2015

-- Selecting a screenshot displays compilationTemplate

 

03 - compilationTemplate

displayed when user selects content on catalogTemplate

Left Side:

-- Header displays Title of content

-- Subtitle displays list item name from compilationTemplate, e.g. Featured

-- display row of text showing content date  

----- date is displayed in this format: May 22, 2015  (include the time for Featured content that is in the future)

-- Duration: (30 min.)

-- Description displays content description

-- Display a Section of the content’s  list items showing Title and playing time

 

Right Side:

-- Screenshot

-- selecting the Screenshot plays the content

 

04 - alertTemplate

displayed when user selects content that is not yet available

-- Title:  Live Webcast Not Yet Available

-- Description : This webcast will be available on December 24, 2015

-- Button :  OK

 


Final Submission Guidelines

 

ELIGIBLE EVENTS:

2016 TopCoder(R) Open

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30052220