Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kaltura/playkit-js-ui
UI Application Framework for the PlayKit JS Player
https://github.com/kaltura/playkit-js-ui
es6 flow-typed kaltura playkit playkit-js playkit-js-player preact redux ui
Last synced: about 1 month ago
JSON representation
UI Application Framework for the PlayKit JS Player
- Host: GitHub
- URL: https://github.com/kaltura/playkit-js-ui
- Owner: kaltura
- License: agpl-3.0
- Created: 2017-05-29T13:18:57.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-05-22T11:46:04.000Z (8 months ago)
- Last Synced: 2024-05-22T15:03:53.510Z (8 months ago)
- Topics: es6, flow-typed, kaltura, playkit, playkit-js, playkit-js-player, preact, redux, ui
- Language: TypeScript
- Homepage:
- Size: 56.8 MB
- Stars: 27
- Watchers: 17
- Forks: 14
- Open Issues: 42
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# PlayKit JS UI - UI Application Framework for the [PlayKit JS Player]
[](https://github.com/kaltura/playkit-js-ui/actions/workflows/run_canary_full_flow.yaml)
[](https://github.com/prettier/prettier)
[](https://www.npmjs.com/package/@playkit-js/playkit-js-ui)
[](https://www.npmjs.com/package/@playkit-js/playkit-js-ui/v/canary)
PlayKit JS UI is a UI Application Framework for composing PlayKit JS Player UI.
The application uses [Preact] to manage virtual DOM and provide a declarative way for building UI and [Redux] 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 in [ECMAScript6], statically analysed using [Flow] and transpiled in ECMAScript5 using [Babel].
[flow]: https://flow.org/
[ecmascript6]: https://github.com/ericdouglas/ES6-Learning#articles--tutorials
[babel]: https://babeljs.io
## Table of Contents
- [Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Installing](#installing)
- [Building](#building)
- [Embed the Player In Your Test Page](#embed-the-player-in-your-test-page)
- [Documentation](#documentation)
- [Running the Tests](#running-the-tests)
- [Compatibility](#compatibility)
- [Contributing](#contributing)
- [Versioning](#versioning)
- [License](#license)
## Getting Started
### Prerequisites
The UI Manager expects a player that implements the [PlayKit JS Player] interface.
The UI Manager depends on [Preact] and [Redux].
[playkit js player]: https://github.com/kaltura/playkit-js
[preact]: https://preactjs.com/
[redux]: http://redux.js.org/
### Installing
First, clone and run [yarn] to install dependencies:
[yarn]: https://yarnpkg.com/lang/en/
```
git clone https://github.com/kaltura/playkit-js-ui.git
cd playkit-js-ui
yarn install
```
### Building
Then, build the player
```javascript
yarn run build
```
### Embed the Player In Your Test Page
Finally, add the bundle as a script tag in your page, and initialize the player
```html
var playerConfig = {...};
var uiConfig = {targetId: "player-placeholder"};
var player = playkit.core.loadPlayer(playerConfig);
var uiManager = new playkit.ui.UIManager(player, uiConfig);
uiManager.buildDefaultUI();
player.play();
```
## Documentation
- **[Configuration](docs/configuration.md)**
- **API**
- **[Events](docs/events.md)**
- **[UI Customization](docs/ui-customization.md)**
- **[Components](docs/components.md)**
## Running the Tests
Tests can be run locally via [Karma], which will run on Chrome, Firefox and Safari.
[karma]: https://karma-runner.github.io/1.0/index.html
```
yarn run test
```
You can test individual browsers:
```
yarn run test:chrome
yarn run test:firefox
yarn run test:safari
```
### And Coding Style Tests
We use ESLint [recommended set](http://eslint.org/docs/rules/) with some additions for enforcing [Flow] types and other rules.
See [ESLint config](.eslintrc.json) for full configuration.
We also use [.editorconfig](.editorconfig) to maintain consistent coding styles and settings, please make sure you comply with the styling.
## Compatibility
TBD
## Contributing
Please read [CONTRIBUTING.md](https://gist.github.com/PurpleBooth/b24679402957c63ec426) for details on our code of conduct, and the process for submitting pull requests to us.
## Versioning
We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/kaltura/playkit-js-ui/tags).
## License
This project is licensed under the AGPL-3.0 License - see the [LICENSE.md](LICENSE.md) file for details