Since our initial launch of the Livepeer Player and in-browser Broadcast libraries, the Livepeer Studio team has been collecting feedback and iterating on developer experience, performance, and customizability. Today weโre ringing in February with the launch of the Livepeer Kit - a ground-up rewrite of our React library.
๐บ ๐๐ฆ๐ฉ๐ฅ๐๐ฆ๐๐ง๐ญ๐๐ญ๐ข๐จ๐ง ๐๐ฎ๐ข๐๐๐ฌ ๐๐ง๐ ๐๐๐๐๐ซ๐๐ง๐๐:
๐ ๐๐๐ฃ๐จ๐ซ ๐๐ก๐๐ง๐ ๐๐ฌ
๐
๐๐๐๐๐๐๐ค: The Player and Broadcast components are not very composable
๐๐ก๐ข๐ฉ๐ฉ๐๐: Weโve decomposed the previous livepeer-react monolith into libraries of primitives, so that you have full control over your usersโ experience. You can use Player primitives to build a media playback experience, and Broadcast primitives to build an in-browser broadcasting experience.
๐
๐๐๐๐๐๐๐ค: livepeer-react encapsulates a lot of application logic (fetching data from the backend, auto-upload, etc), leading to confusing integration pathways
๐๐ก๐ข๐ฉ๐ฉ๐๐: Weโve decoupled data fetching from the Player and Broadcast with a shared helper library and improved the interaction between the Player and Livepeer SDKs, to provide a more flexible and cohesive experience. The only web requests are for pure playback or broadcasting (WHEP/WHIP and metrics reporting) - there are no more API requests to Livepeer Studio from any components. This means that you do not need to configure a LivepeerProvider with an API key. Keep those keys on the backend.
๐
๐๐๐๐๐๐๐ค: The styling is difficult and hard to rework (and not compatible with Server Components)
๐๐ก๐ข๐ฉ๐ฉ๐๐: The components are now completely unstyled, and the docs will provide examples of how to style them similarly to how they were in the previous releases. You can copy-pasta and then tweak from there.
๐ก ๐๐ญ๐ก๐๐ซ ๐๐ฆ๐ฉ๐ซ๐จ๐ฏ๐๐ฆ๐๐ง๐ญ๐ฌ
๐๐จ๐ฆ๐ฉ๐จ๐ฌ๐๐๐ฅ๐ ๐๐จ๐ฆ๐ฉ๐จ๐ง๐๐ง๐ญ๐ฌ - all components are extremely narrow in their scope, and support the asChild pattern popularized by Radix UI. When asChild is set to true, we will not render a default DOM element, instead cloning the part's child and passing it the props and behavior required to make it functional.
๐๐ฎ๐ญ๐จ๐ฆ๐๐ญ๐ข๐ ๐ฉ๐จ๐ฌ๐ญ๐๐ซ ๐ข๐ฆ๐๐ ๐๐ฌ - if you pass in the playback info response directly into getSrc, it will automatically parse the thumbnail image and pass it into the poster for the video.
๐๐๐ฌ๐ฎ๐ฆ๐ ๐ฉ๐ซ๐จ๐ ๐ซ๐๐ฌ๐ฌ ๐จ๐ง ๐๐๐ฅ๐ฅ๐๐๐๐ค - when an error happens during playback for any reason, we resume playback where it left off.
๐๐ซ๐ข๐ง๐ ๐ฒ๐จ๐ฎ๐ซ ๐จ๐ฐ๐ง ๐๐จ๐ฆ๐ฉ๐จ๐ง๐๐ง๐ญ๐ฌ - useMediaContext is now much easier to use - since the <Player.Root /> is now just a simple React Context provider, you can build out your own components inside of it which consume the video controller.