LGI

com.epam.lgi

Table of contents

• Getting started
• Running the App
• Developing the App
• Components
  • Background
  • Channel Bar
  • List
  • Loading Indicator
  • Main Menu
  • Navbar
  • PlayerProgress
  • Video
  • WarningModal
• Domain
• Lib
• Screens
  • Apps Screen
  • Base Screen
  • Details Screen
  • Home Screen
  • MoviesScreen
  • SettingsScreen
  • SplashScreen
  • VODScreen
• Services
  • Channels service
  • Player
• Themes
• Additional
  • Animation

Getting started

Before you follow the steps below, make sure you have the Lightning-CLI installed globally on your system

npm install -g @lightningjs/cli

Running the App

1. Install the NPM dependencies by running npm install

2. Build the App using the Lightning-CLI by running lng build inside the root of your project

3. Fire up a local webserver and open the App in a browser by running lng serve inside the root of your project

Developing the App

During development you can use the watcher functionality of the Lightning-CLI.

TLDR; The most suitable case for functionality check is to use the lng dev command

• use lng watch to automatically rebuild your App whenever you make a change in the src or static folder
• use lng dev to start the watcher and run a local webserver / open the App in a browser at the same time

Windows users may experience issues with locking of the dist directory. In order to fix that issues please run npm run cleanup command

You may consider to use VSCode IDEsince the project contains configuration presets for running and debugging of the app. This approach also helps to reduce the directory lock issue mentioned above.

Setup tunnel and proxy

To easily access the different microservices the refapp connects to, it is best to setup an stunnel and proxy. The refapp code accesses these services on the same host and port where the javascript and HTML files are hosted, thereby avoiding any CORS issues.

the proxy

lng serve will automatically proxy all requests it cannot handle to http://127.0.0.1:50050. This is configured inside .env as such:

LNG_SERVE_PROXY="http://127.0.0.1:50050"

the stunnel

Next is to setup your tunnel to your RPI or box. Run the following on your development station:

export BOXIP=192.168.1.250
ssh -o UserKnownHostsFile=/dev/null -o StrictHostKeyChecking=no -L 50050:127.0.0.1:50050 root@$BOXIP

This makes sure that all local requests on port 50050 are routed through the stunnel to the RPI. There the request is forwarded to 127.0.0.1 port 50050. On usual reference images that is the port where the lighttpd service is running on. It is configured to route the appropriate requests to the relevant microservices (both running locally or remote).

websockets through stunnel

HTTP requests to microservices are routed through lng serve and then through the stunnel. Sadly, websocket connections are not supported by the lng serve proxy. Luckily, CORS does not apply on websockets. So websocket connections should go through the stunnel directly, in other words: connect to 127.0.0.1:50050. This is happening for ThunderJS which uses websocket connections to the rdkservices running on the RPI.

Documentation

Use lng docs to open up the Lightning-SDK documentation. Also check out https://github.com/rdkcentral/Lightning-SDK for more detailed information about Lightning SDK.

Components

Background

Background is a component that allows to quickly add a common bottom layer to any screen.

Channel Bar

Channel bar is a component which provides you possibility to navigate among channels while you are watching some event and player is top view. It also shows channel name and logo, start and end time of currently playing event on each channel.

List

List is a component which provides ability to organize similar items as a grid structure. This component uses Lightning's mechanism to create a grid from items that developer provides.

Loading Indicator

Component is used for show during time-consuming operations (such as requests to server or processing big data packs).

Main Menu

Main Menu component is used for navigating among main 'big' components like AppsScreen, MoviesScreen and so on.

Navbar

Navbar component is a container for all navigation bar components (background, bottom line, menu) and used for setting and updating of Menu items

PlayerProgress

PlayerProgress component shows title, progress and current time of the video which is currently playing.

Video

Video component extends MediaPlayer component to fix positioning of the video

WarningModal

WarningModal is a component which can be used for different purposes from showing errors to showing some information about system and other things.

Domain

Used for store domain properties. It can be used for switch to custom domains if needs.

Lib

Here is navigation functional. Navigation module is used for showing specific components in proper order. Router component is used for that. Router is configured from RoutingMap. Developer can describe desired behaviour using methods navigate(urlFromRoutingMap) for navigate to specified url, navigateForward() and navigateBackward() for navigate through screens stack.

Example:

setupRouter(app, document.location.hash)

navigate('home')
navigateForward()
navigateBackward()

Screens

AppsScreen

Apps components is a collection of different applications and services that are integrated in our application.

BaseScreen

DetailsScreen

Detail page component is used for showing information about movies in VODScreen.

HomeScreen

Screen which is used as initial screen after loading. Contains video player and channel bar.

MoviesScreen

Movies screen is a collection of movies. It has Recommended section which shows you assets based on what you have seen recently, and section with all movies.

SettingsScreen

Settings screen is used for displaying some app settings.

SplashScreen

Splash screen shows loading animation while app is launching.

VODScreen

VOD screen is used for playback of selected movie and updating of progress bar.

Services

Channels Service

Service is used for getting and parsing list of channels and programs.

Player

Provide players and common interface to use them. Initialization Example:

import { init as initPlayers } from './services/player'

initPlayers({
  ipPlayerMode: 'sessionManager',
  endpoint: // here has to be your raspberry ip like this 'http://192.168.1.102:8080'
})

Then you can use it

import * as player  from '@/services/player/'
//entry has to contain field locator, it would be video resource ip you want to play
// entry = {
//   locator: "ip_of_resource"
// }
await player.playIP(entry)

Start/Pause player

player.play()
player.pause()

To get metadata of current video, use

player.getPlaybackState() // returns promise with current position, duration and other

Themes

Can be used for quick customization of application. Just describe new theme and set it as active.

Additional

Animation

Here is used Lightning animations. More information can be found in Lightning manual. Example:

anim = this.animation({
  duration: durationInSeconds, repeat: repeatCount, actions:[{t: animatedObjectName, p:propertyToAnimate, v:{0: startValue, 1: finishValue}}]
})

anim.start()
anim.stop()