@liveryvideo/interactive NPM

Livery Interactive Client

This is a frontend application for Livery interactive video client

Getting Started

Dependencies

node
nvm
yarn@1

Installing

nvm use
yarn install

Executing program

yarn start

Testing

This project used jest for unit testing and cypress for e2e testing

Run all unit tests

yarn test

Run logic tests

yarn test:application

Run ui tests

yarn test:ui

Run e2e tests

yarn cy:run
yarn cy:open

Open e2e dashboard

yarn cy:open

Cloud Cypress dashboard

Publishing

Pipeline Trigger

Merge feature PR into development
Go to CircleCI project, select development branch, and press Trigger Pipeline
Add version parameter. Accepts string value. patch, minor, or major should be mainly used but a custom string is also supported

Pull Request Trigger

Merge feature PR into development
Merge development PR into main. The main branch will trigger the increment_package_version CircleCI job
Defaults to patch updates. Add [npm minor] or [npm major] to the latest commit message to trigger the equivalent version updates
For PRs: add the [npm X] tag to the merge commit of the PR to trigger the expected version update

Usage

This interactive client can be embedded within the Livery Video Player two ways: iFrame and web component.

iFrame

The project's build flow is set up to generate a deployable bundle to any environment handled in Ex Machina's devops panel. All files and assets are deployed to the specified environment and loaded within the iFrame.

Example test URL: https://embed.livery.live/?id=5ddb98f5e4b0937e6a4507f2&livery_interactive=https://dev-stable.interactive.livery.live?livery_tenantid=____8SDWDJfHfXtGwM0AAA==

The livery_interactive query parameter can be replaced with any URL and that URL will be loaded in the iFrame.

Web component

The project's build flow is set up to generate a package that gets published to NPM that can then be loaded by the video player. This package injects the interactive client into a custom element added by the video player.

Package URL: https://www.npmjs.com/package/@liveryvideo/interactive

Example test URLs:

The livery_interactive query parameter is split into <package version>;<region>;<tenant ID>. Package version is the version published to NPM or latest. Region is the environment name that the backend is hosted on (for example dev-stable for backend.dev-stable.interactive.livery.live). Tenant ID is the id of the tenant to be used.

To test and develop the web component locally a proxy (ie. Charles Proxy) has to be used to map https://cdn.jsdelivr.net/npm/@liveryvideo/interactive@latest to a local build of the package.

0 - install and set up charles notion 1 - add cdn.jsdelivr.net tp SSL proxy. 2 - run build:package_hot command 3 - map https://cdn.jsdelivr.net/npm/@liveryvideo/interactive@latest to http://localhost:8080/index.js 4 - open dev/dev-stable and source code should be from your local machine