@liveryvideo/interactive
v3.8.0
Published
Livery video interactive application for use in web browsers.
Downloads
38
Keywords
Readme
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
Publishing
Prerequisite
- Make a release branch from development
- Set a desired package version in the
package.json
- Merge all feature branches into the release branch
Pipeline Trigger
- Merge ~~feature~~ release PR into
development
- Go to CircleCI project, select
development
branch, and press Trigger Pipeline - In your local machine run
npm deploy
- ~~Add
version
parameter. Accepts string value.patch
,minor
, ormajor
should be mainly used but a custom string is also supported~~
If you want to deploy a test package
- add preId to the version in the package.json, like so
1.0.0-rc.1
- Add a tag, when deploying a package
npm publish --tag rc
- To install this specific version, users will have to run:
npm install @liveryvideo/[email protected]
~~Pull Request Trigger~~
- ~~Merge feature PR into
development
~~ - ~~Merge
development
PR intomain
. Themain
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:
- Beta: https://beta.d3laskrvv57qvc.amplifyapp.com/?livery_interactive=latest;dev-stable;____8SDWDJfHfXtGwM0AAA==
- Embed: https://embed.livery.live/?id=5ddb98f5e4b0937e6a4507f2&v=beta&livery_interactive=latest;dev-stable;____8SDWDJfHfXtGwM0AAA==
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
Contributors
Contributors names and contact info
License
This project is licensed under the MIT License