bitmovin-player-ui
bitmovin-player-ui copied to clipboard
Rewrite rendering layer with Preact
We are looking to rewrite the rendering layer of the UI for v3 (#111) with the following goals:
- integrates nicely into the current
Component
/Container
architecture- probably replaces the
Component.toDomElement
function - does not unnecessarily blow up the file structure
- probably replaces the
- improves rendering performance
- DOM tree should only contain active/visible elements (instead of just being hidden via CSS like now)
- how to handle CSS animations/transitions (e.g. fade-outs)?
- how to handle child elements / container children?
- allows dynamic reconfiguration
- allows changing language / updating labels on the fly
- global generic configuration per
Component
viaUIConfig
, overridable on instance level
- usage of an external library explicitly desired
- must not add much weight, i.e. increase in output file size
Internal evaluations have shown that Preact could be the right library to use as a rendering layer because it's very small and has shown promising performance improvements.
We have not yet decided how to integrate it and are looking for opinions, proposals and PRs. Any help is appreciated!
A small demo on using Preact for the Label
component: https://github.com/bitmovin/bitmovin-player-ui/tree/feature/preact-label