Startpage for TV Application

Abstract

V naší práci implementujeme konfigurovatelnou TV aplikaci pro set-top box zařízení, v kontextu zabudovaného webového prohlížeče. Práce je vedena dle zákaznického zadání a plně integrovaná do velké IPTV platformy. Má formu komplexního výchozího menu, jehož první sekcí je interaktivní dlaždicová struk- tura obsahující pohyblivý video přehrávač. Ostatní sekce obsahují menší ap- likace, nebo podsekce menu. Základem jsou moduly, které transformují zdroje dat na dlaždice. Ty jsou pak projektovány na horizontální karusely dle dynam- ické konfigurace. Navrhli jsme vhodně definované rozhraní k integrování nových modulů. Necelých dvacet jich je připraveno k okamžitému použití. Poskytují různé druhy parametrizovatelných dlaždic, například živé programy, s možností je přímo pustit či nahrát. Naše vrstva uživatelského rozhraní využívá knihoven React a Redux a je navržena jako jednostránková aplikace. Pro předvídatelnost, jakákoli změna stavu aplikace je řešena prostřednictvím vytvoření akce, která je zpracována pouze pure funkcemi. Nedostatečný výkon set-top boxů nás přivedl k implementaci pomocí immutable stavu aplikace, po kterých se pruměrná doba rendrování našich React komponent zkrátila o více než polovinu. iii

In this thesis we implement configurable set-top box TV application in context of an embedded web browser. Work is executed in accord with strict customer requirements and fully integrated into large IPTV platform. It takes form of a complex start-up menu, whose first section is an interactive tile grid with tile- scaled video player. Other sections contain smaller applications or sub-sections. We build upon modules that transform data sources into tiles. They are then pro- jected to horizontal carousels according to dynamic configuration. A well defined interface to integrate new modules is provided. Almost twenty different modules are ready for immediate use. They provide various parametrized tiles such as live programmes that can be directly started or recorded. Our user interface layer, using React and Redux libraries, leverages the single page application paradigm. For predictability, any modification of application state is made by emitting ac- tions handled solely by pure functions. Set-top box performance issues forced us to implement an immutable state optimization that cut the average render time of our React components by more than a half. ii