PlayKit JS UI Managers - Kaltura UI Managers for the [Kaltura Player JS]
- playkit-js-ui-managers
playkit-js-ui-managers is a kaltura player plugin that groups several UI services, in order to simplify and facilitate the customization of the kaltura player UI by providing a simple and clean API.
Each service manages a different area of UI functionality.
It relies on kaltura player core API for managing UI features.
playkit-js-ui-managers is written in ECMAScript6 (*.js
) and TypeScript (*.ts
) (strongly typed superset of ES6),
and transpiled in ECMAScript5 using Babel and the TypeScript compiler.
Webpack is used to build the distro bundle and serve the local development environment.
services
-
Side Panels
Manages and controls the side panel, including:
-
When an item is activated in a panel, the other items in that panel are automatically deactivated.
-
Automatically deactivates a panel when its counter panel is activated.
Full API documentation can be found here
-
-
Upper bar manager
Manages and controls the upper bar menu, including:
-
Setting the order in which icons are shown.
-
Increasing and decreasing the number of icons that appear depending on the size of the player\
Full API documentation can be found here
-
Getting started with development
# First, checkout the repository and install the required dependencies
git clone https://github.com/kaltura/playkit-js-ui-managers.git
# Navigate to the repo dir
cd playkit-js-ui-managers
# Run dev-server for demo page (recompiles on file-watch, and write to actual dist fs artifacts)
npm run dev
# Before submitting a PR - Run the pre commit command
npm run pre:commit
# this command will run:
# 1. types check
# 2. lint check
# 3. generate/update types
# 4. generate/update docs
The dev server will host files on port 8000. Once started, the demo can be found running at http://localhost:8000/.
Before submitting a PR, please see our contribution guidelines.
Linter (ESlint)
Run linter:
npm run lint:check
Run linter with auto-fix mode:
npm run lint:fix
Formatting Code
Run prettier to format code
npm run prettier:fix
Type Check
Run type-check to verify TypeScript types
npm run types:check
Automated tests (Mocha/Karma)
Run all tests at once:
npm test
Run unit tests in watch mode:
npm run test:watch
Design
An overview of this project's design, can be found here.
API docs
Usage guide
Demo
https://kaltura.github.io/playkit-js-ui-managers/demo/index.html
Compatibility
playkit-js-ui-managers is only compatible with browsers supporting MediaSource extensions (MSE) API with 'video/MP4' mime-type inputs.
playkit-js-ui-managers is supported on:
- Chrome 39+ for Android
- Chrome 39+ for Desktop
- Firefox 41+ for Android
- Firefox 42+ for Desktop
- IE11 for Windows 8.1+
- Edge for Windows 10+
- Safari 8+ for MacOS 10.10+
- Safari for ipadOS 13+
License
playkit-js-ui-managers is released under Apache 2.0 License