Justify (Javascript Universal Smart TV Interface Framework)

Содержание:

1. Общее описание фреймворка

Justify - это фреймворк для разработки браузерных IPTV/OTT-приложений для устройств типа Set-Top Box и Smart TV (IPTV-портала), состоящий из 2-х принципиальных частей:

  • engine - пакет приложений, осуществляющий общение с API backend’а (Middleware Smarty и другие Middleware) и с API устройства, а также содержащий объявления и описания глобальных сущностей и классов;
  • templates - шаблоны интерфейса приложения, различающиеся не только внешним стилевым оформлением, но и функциональными возможностями. Каждый из них включает в себя набор экранов, наборы css-файлов и картинок, файл инициализации шаблона, а также переопределения некоторых глобальных сущностей и классов, описанных в engine.

Одна из главных целей, которой придерживались разработчики и архитекторы при создании justify - это создание максимально кастомизируемого и расширямого решения, при этом сохранив достаточно простую объектно-ориентированную архитектуру. Данные принципы помогли сделать фреймворк доступным для использования разработчиками любого уровня и квалификации.

Также кастомизация приложения происходит за счёт клиентских настроек, описываемых во внешнем файле client.js, все возможные поля и значения которого будут представлены ниже.

1.1 Термины, используемые в приложении

Устройство просмотра - Set-Top Box или Smart TV, уже адаптированный для Justify и, соответственно, имеющий JS API (приставки: amino, dune, eltex, mag, tvip, sagemcom, wrt, gdc и все приставки под ОС Android; smart TV: Samsung Smart TV (Webkit и Tizen), LG (Webos и Netcast); electron).

Дисплей - монитор устройства с его техническими характеристиками.

Шаблон - одно из уже созданных приложений на основе engine. Данные приложения могут иметь отличную от Microimpuls Middleware Smarty серверную часть, различную логику и оформление. Существуют разработанные шаблоны futiristic, classic, focus, impuls, iridium.

Пользовательские настройки - данные, которые сохраняются в ПЗУ устройства и которые имеет возможность изменять конечный пользователь приложения (данные авторизации, часовой пояс, уровень звука, размер буферизации, язык, стиль оформления и т.д.). Набор этих настроек также зависит от конкретного шаблона и от клиентских настроек.

Клиентские настройки - настройки, прописываемые в файле client.js, они же clientSettings. Каждый оператор имеет свой client.js и с помощью него настраивает нужную конфигурацию своего сервиса. Также в этом файле прописывается адрес серверной части и данные авторизации в Middleware (Client ID, API Key, API URL).

Настройки портала - имеют место только для шаблонов, использующих Microimpuls Middleware (portalSettings). В их число входят: кастомный css-файл, лого оператора, разделы, показываемые в главном меню и т.д. Конфигурируется всё это с помощью панели администратора, настройки динамически подгружаются при каждом новом запуске приложения.

Экран - экран приложения, представляет собой интерфейс пользователя, т.е. совокупность элементов управления, списков, кнопок, текстов, блоков подсказок и т.д. Является структурной единицей приложения, наследуется от класса BaseScreen.

Меню - список каких-либо элементов, включающий в себя функционал по инициализации списка, переключению между его элементами, логику скрытия пустых элементов, прокручивания спсика и т.д. Список может иметь как 1 колонку, так и быть в виде сетки.

Плеер - объект, имеющий функции для воспроизведения, перемотки, остановки и прочих действий над видео-потоками. У каждого устройства он свой и его специфика описывается в stbmediajsenginedevice<имя устройства>device.js.

1.2. Схема взаимодействия основных сущностей

_images/terms.png

2. Описание содержания и структуры engine

Структурно engine состоит из следующих js-скриптов и каталогов:

  • app.js - описывает глобальное пространство имен App - объект, через который осуществляется доступ ко всем частям приложения (экранам и переопределенным классам engine). Содержит в себе объекты-экземпляры классов всех экранов, дисплея, плеера и т.д., используемых в шаблоне.
  • application.js - скрипт, описывающий сущность BaseApplication - стороннее подключаемое приложение или web-страница.
  • data.js - сущность BaseData, набор функций, производящих общение с backend-частью Middleware.
  • device.js - объявление и определение класса Device - методов работы с API устройства просмотра. Данный скрипт является родительским для всех остальных device.js каждого устройства (размещаемых в директории engine/device), описывающих работу с каждым конкретным устройством, а также заглушкой для запуска портала в браузере - его методы вызываются в случае, если устройство просмотра не было определено и по умолчанию было задано как ‘mag’. При попытке воспроизведения потока в браузере пользователь увидит эмулятор плеера, в остальном работа портала не будет отличаться от обычной.
  • display.js - сущность BaseDisplay, представляет собой набор переменных и методов для задания и определения конфигураций дисплея, а также методы по работе с нажатиями клавиш и управления экранами (сущностями, наследуемыми от BaseScreen).
  • helper.js - описание класса Helper, содержащего все основные и вспомогательные функции для работы с DOM-элементами, массивами, строками и т.д.
  • keytable.js - сущность BaseKeyTable, класс для работы с таблицами кодов клавиш каждого устройства.
  • lang.js - сущность BaseLang, позволяющая менять языковую локализацию приложения каждого шаблона.
  • logger.js - класс Logger для работы с отладочной консолью (предназначена только для debug-режима, активируется в файле client.js или с помощью магической комбинации клавиш 01011970, по умолчанию отключена).
  • menu.js - сущность BaseMenu, описывающая поведение различных списков в приложении, а также предоставляющая широкий набор методов для работы с ними.
  • player.js - сущность BasePlayer, является родительской для плеера внутри каждого шаблона.
  • screen.js - сущность BaseScreen, описывает экран приложения, содержащий пользовательский интерфейс и логику обработки кнопок пульта.
  • settings.js - сущность BaseSettings, содержит константы и методы для работы с пользовательскими настройками приложения (язык, время, буфферизация и т.д.), которые в дальнейшем могут переопределяться в зависимости от шаблона. Набор настроек также кастомизируем с помощью файла client.js.
  • каталог backends - содержит сторонние data.js, то есть наборы методов для работы со сторонними системами Middleware.
  • каталог device - содержит файлы device.js для каждого поддерживаемого устройства.
  • каталог thirdparty - содержит сторонние библиотеки, необходимые для реализации некоторых функций, отсутствующих на старых устройствах с устаревшей реализацией Javascript.
  • client.js - файл, содержащий настройки оператора clientSettings.
_images/interaction-scheme.png

2.1. Механизм определения шаблона

Как было описано выше, engine представляет собой ряд сущностей, составляющих основу портального приложения. Все они, взаимодействуя друг с другом на протяжении сессии, образуют жизненный цикл приложения. Практически все данные, используемые сервисом - динамические, то есть они запрашиваются с сервера или высчитываются при каждом новом запуске (исключением, пожалуй, являются только данные авторизации и пользовательские настройки - они записываются в куки устройства). Ниже представлена примерная схема, по которой происходит процесс инициализации приложения, определения шаблона, типа устройства просмотра и подключение и подгрузка нужных скриптов (другими словами, всё, что происходит до запуска init.js каждого шаблона).

_images/index-redirect.png

Работа шаблона начинается с файла stb\index.html.

  1. На основе clientSettings и настроек, сохраняемых в памяти устройства, определяется шаблон и производится редирект на stb\templates\<имя шаблона>\index.html.
  2. Определяется тип устройства и производится редирект на stb\templates\<имя шаблона>\default\index.html.
  3. Далее управление переходит файлу stb\templates\<имя шаблона>\default\media\js\init.js.

2.2. Механизм инициализации приложения

Работа любого шаблона начинается с его init.js, а именно, с вызова функции window.onload(), в которой в дальнейшем происходит инициализация устройства, плеера, экранов, событий, настроек и других единиц, требующихся шаблону. Завершается, как правило, работа функции window.onload() открытием экрана авторизации или же открытием главного меню приложения, в случае отсутствия первого.

На рисунке ниже представлена типичная схема работы window.onload() шаблона Justify.

_images/init-scheme.png

2.3. Механизм инициализации устройства

Ещё один интересный процесс, на котором стоит заострить внимание - процесс инициализации устройства. Его суть заключается в определении типа устройства, на котором было запущено приложение, и на основании этого добавляется нужный ../engine/device/<имя устройства>/device.js, содержащий переопределение функций основного device.js. Соответственно, в случае необходимости адаптации приложения под новый тип устройства, необходимо создать новый ../engine/device/<имя устройства>/device.js, в котором все требуемые функции будут переопределены с учётом API нового устройства.

2.A. Документация по коду Engine (JSDoc)

Документация доступна по ссылке: https://microimpuls.github.io/justify-engine-main-jsdoc/

3. Документация по коду шаблонов

3.1. Шаблон Impuls

3.1.A. Документация по коду основных классов (JSDoc)

Документация доступна по ссылке: https://microimpuls.github.io/justify-impuls-main-jsdoc/

3.1.B. Документация по коду экранов (JSDoc)

Документация доступна по ссылке: https://microimpuls.github.io/justify-impuls-screens-jsdoc/

3.2. Шаблон Futuristic

В разработке

3.3. Шаблон Classic

В разработке

3.4. Шаблон Iridium

В разработке

3.5. Шаблон Focus

В разработке

4. Установка и настройка приложения, использующего Justify

Документация по установке и настройке портала на HTTP-сервере для возможности загрузки портала устройством через браузер доступна по ссылке: http://mi-smarty-docs.readthedocs.io/ru/latest/portal_setup.html