{"id":22327171,"url":"https://github.com/kaltura/playkit-js-ui","last_synced_at":"2025-07-29T17:34:08.379Z","repository":{"id":23963562,"uuid":"92741858","full_name":"kaltura/playkit-js-ui","owner":"kaltura","description":"UI Application Framework for the PlayKit JS Player","archived":false,"fork":false,"pushed_at":"2025-07-21T09:41:20.000Z","size":59875,"stargazers_count":30,"open_issues_count":48,"forks_count":15,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-07-21T09:58:08.743Z","etag":null,"topics":["es6","flow-typed","kaltura","playkit","playkit-js","playkit-js-player","preact","redux","ui"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kaltura.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-05-29T13:18:57.000Z","updated_at":"2025-07-21T09:41:24.000Z","dependencies_parsed_at":"2023-10-16T03:23:17.639Z","dependency_job_id":"c569123c-5379-432d-baf1-bf32b531bd7c","html_url":"https://github.com/kaltura/playkit-js-ui","commit_stats":{"total_commits":1062,"total_committers":25,"mean_commits":42.48,"dds":0.8022598870056497,"last_synced_commit":"b6e14e14f979fe2a36c9bc8d844d3d110494cad4"},"previous_names":[],"tags_count":250,"template":false,"template_full_name":null,"purl":"pkg:github/kaltura/playkit-js-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaltura%2Fplaykit-js-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaltura%2Fplaykit-js-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaltura%2Fplaykit-js-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaltura%2Fplaykit-js-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kaltura","download_url":"https://codeload.github.com/kaltura/playkit-js-ui/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaltura%2Fplaykit-js-ui/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266982185,"owners_count":24016343,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-25T02:00:09.625Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["es6","flow-typed","kaltura","playkit","playkit-js","playkit-js-player","preact","redux","ui"],"created_at":"2024-12-04T03:08:38.201Z","updated_at":"2025-07-29T17:34:07.876Z","avatar_url":"https://github.com/kaltura.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PlayKit JS UI - UI Application Framework for the [PlayKit JS Player]\n\n[![Build Status](https://github.com/kaltura/playkit-js-ui/actions/workflows/run_canary_full_flow.yaml/badge.svg)](https://github.com/kaltura/playkit-js-ui/actions/workflows/run_canary_full_flow.yaml)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![](https://img.shields.io/npm/v/@playkit-js/playkit-js-ui/latest.svg)](https://www.npmjs.com/package/@playkit-js/playkit-js-ui)\n[![](https://img.shields.io/npm/v/@playkit-js/playkit-js-ui/canary.svg)](https://www.npmjs.com/package/@playkit-js/playkit-js-ui/v/canary)\n\nPlayKit JS UI is a UI Application Framework for composing PlayKit JS Player UI.\n\nThe application uses [Preact] to manage virtual DOM and provide a declarative way for building UI and [Redux] to manage a predictable state container.\n\nThe 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.\n\nThe 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.\n\nComponents library contains any need of the UI, but can be extended to include any additional component an application will require.\n\nThe library also exposes its default presets, which can be used as-is\u0026trade; or extended.\n\nPlayKit JS UI is written in [ECMAScript6], statically analysed using [Flow] and transpiled in ECMAScript5 using [Babel].\n\n[flow]: https://flow.org/\n[ecmascript6]: https://github.com/ericdouglas/ES6-Learning#articles--tutorials\n[babel]: https://babeljs.io\n\n## Table of Contents\n\n- [Getting Started](#getting-started)\n  - [Prerequisites](#prerequisites)\n  - [Installing](#installing)\n  - [Building](#building)\n  - [Embed the Player In Your Test Page](#embed-the-player-in-your-test-page)\n- [Documentation](#documentation)\n- [Running the Tests](#running-the-tests)\n- [Compatibility](#compatibility)\n- [Contributing](#contributing)\n- [Versioning](#versioning)\n- [License](#license)\n\n## Getting Started\n\n### Prerequisites\n\nThe UI Manager expects a player that implements the [PlayKit JS Player] interface.\n\nThe UI Manager depends on [Preact] and [Redux].\n\n[playkit js player]: https://github.com/kaltura/playkit-js\n[preact]: https://preactjs.com/\n[redux]: http://redux.js.org/\n\n### Installing\n\nFirst, clone and run [yarn] to install dependencies:\n\n[yarn]: https://yarnpkg.com/lang/en/\n\n```\ngit clone https://github.com/kaltura/playkit-js-ui.git\ncd playkit-js-ui\nyarn install\n```\n\n### Building\n\nThen, build the player\n\n```javascript\nyarn run build\n```\n\n### Embed the Player In Your Test Page\n\nFinally, add the bundle as a script tag in your page, and initialize the player\n\n```html\n\u003cscript type=\"text/javascript\" src=\"/PATH/TO/FILE/playkit.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"/PATH/TO/FILE/playkit-ui.js\"\u003e\u003c/script\u003e\n\u003cdiv id=\"player-placeholder\" style=\"height:360px;width:640px\"\u003e\n  \u003cscript type=\"text/javascript\"\u003e\n    var playerConfig = {...};\n    var uiConfig = {targetId: \"player-placeholder\"};\n    var player = playkit.core.loadPlayer(playerConfig);\n    var uiManager = new playkit.ui.UIManager(player, uiConfig);\n    uiManager.buildDefaultUI();\n    player.play();\n  \u003c/script\u003e\n\u003c/div\u003e\n```\n\n## Documentation\n\n- **[Configuration](docs/configuration.md)**\n- **API**\n- **[Events](docs/events.md)**\n- **[UI Customization](docs/ui-customization.md)**\n- **[Components](docs/components.md)**\n\n## Running the Tests\n\nTests can be run locally via [Karma], which will run on Chrome, Firefox and Safari.\n\n[karma]: https://karma-runner.github.io/1.0/index.html\n\n```\nyarn run test\n```\n\nYou can test individual browsers:\n\n```\nyarn run test:chrome\nyarn run test:firefox\nyarn run test:safari\n```\n\n### And Coding Style Tests\n\nWe use ESLint [recommended set](http://eslint.org/docs/rules/) with some additions for enforcing [Flow] types and other rules.\n\nSee [ESLint config](.eslintrc.json) for full configuration.\n\nWe also use [.editorconfig](.editorconfig) to maintain consistent coding styles and settings, please make sure you comply with the styling.\n\n## Compatibility\n\nTBD\n\n## Contributing\n\nPlease 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.\n\n## Versioning\n\nWe 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).\n\n## License\n\nThis project is licensed under the AGPL-3.0 License - see the [LICENSE.md](LICENSE.md) file for details\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaltura%2Fplaykit-js-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkaltura%2Fplaykit-js-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaltura%2Fplaykit-js-ui/lists"}