PlayKit JS UI is a UI Application Framework for composing PlayKit JS Player UI.

The application usesPreact to manage virtual DOM and provide a declarative way for building UI andRedux to manage a predictable state container.

The PlayKit JS UI framework enables an easy and intuitive way of customize the UI to any purpose and design, either by simple CSS definitions or by letting application define it's entire layout.

The UI framework exposes a UIManager that handles the life cycle of the UI, and and a library of components which is used to build the UI layout, where each component is responsible of a specific functionality.

Components library contains any need of the UI, but can be extended to include any additional component an application will require.

The library also exposes its default presets, which can be used as-is™ or extended.

PlayKit JS UI is written inECMAScript6, statically analysed usingFlow and transpiled in ECMAScript5 usingBabel.

• Getting Started
  • Prerequisites
  • Installing
  • Building
  • Embed the Player In Your Test Page
• Documentation
• Running the Tests
• Compatibility
• Contributing
• Versioning
• License

The UI Manager expects a player that implements thePlayKit JS Player interface.

The UI Manager depends onPreact andRedux.

First, clone and runyarn to install dependencies:

git clone https://github.com/kaltura/playkit-js-ui.gitcd playkit-js-uiyarn install

Then, build the player

yarnrunbuild

Finally, add the bundle as a script tag in your page, and initialize the player

<scripttype="text/javascript"src="/PATH/TO/FILE/playkit.js"></script><scripttype="text/javascript"src="/PATH/TO/FILE/playkit-ui.js"></script><divid="player-placeholder"style="height:360px;width:640px"><scripttype="text/javascript">varplayerConfig={...};varuiConfig={targetId:"player-placeholder"};varplayer=playkit.core.loadPlayer(playerConfig);varuiManager=newplaykit.ui.UIManager(player,uiConfig);uiManager.buildDefaultUI();player.play();</script></div>

• Configuration
• API
• Events
• UI Customization
• Components

Tests can be run locally viaKarma, which will run on Chrome, Firefox and Safari.

yarn run test

You can test individual browsers:

yarn run test:chromeyarn run test:firefoxyarn run test:safari

We use ESLintrecommended set with some additions for enforcingFlow types and other rules.

SeeESLint config for full configuration.

We also use.editorconfig to maintain consistent coding styles and settings, please make sure you comply with the styling.

TBD

Please readCONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

We useSemVer for versioning. For the versions available, see thetags on this repository.

This project is licensed under the AGPL-3.0 License - see theLICENSE.md file for details