Migration guide for the 4.0.0 release of Livepeer React.
Livepeer React v4.0.0+
was a complete rewrite of the library to support
video primitives.
This migration guide is designed to assist you in transitioning from the
previous version of the @livepeer/react
library to the new major release. This
update is a significant overhaul aimed at addressing several key issues with the
previous releases.
<Player />
and
<Broadcast />
primitives based on
Radix UI.asChild
pattern, where the component will instead clone the part’s child and passing
it the props and behavior required to make it functional.<FullscreenTrigger asChild>{...}</FullscreenTrigger>
will
not render a DOM element, and instead copy all of it’s properties to the
child component, which will behave as a fullscreen trigger.Video
component).Replace your usage of the single <Player />
and <Broadcast />
components
with the new composable primitives. These include:
<Player.Root />
<Player.Container />
<Player.Video />
<Player.Controls />
<Player.LoadingIndicator />
<Player.FullscreenTrigger />
Check out our complete example for how these can be composed to build a video player, modeled after the 3.x versions of the Player.
<Broadcast.Root />
<Broadcast.Container />
<Broadcast.Video />
<Broadcast.Controls />
<Broadcast.SourceSelect />
<Broadcast.VideoEnabledIndicator />
Check out the complete example for how these can be composed to build a complete in-browser broadcast experience.
useCreateAsset
, useStream
, etc.livepeer
JS SDK (or
another SDK, depending on your applications’s API
language) for data fetching and interaction.
asChild
pattern for more control over the rendering of components.getSrc
.useMediaContext
for building custom components. See the implementation
of the primitives as an example of how to implement them.autoUrlUpload
and direct IPFS playback. See
below for recommendations for how to migrate from this.use client
and use server
directives in the
output. This means that you can directly import the client components into a
RSC and you don’t need to wrap them. If you don’t use React Server
Components, this doesn’t affect you.The React Native package has been deprecated. Consider seeking alternative solutions or consulting the team for future support plans.
autoUrlUpload
To replace the usage of autoUrlUpload
, use the following pseudocode as a guide
for how the logic used to work on the frontend.
Migration guide for the 4.0.0 release of Livepeer React.
Livepeer React v4.0.0+
was a complete rewrite of the library to support
video primitives.
This migration guide is designed to assist you in transitioning from the
previous version of the @livepeer/react
library to the new major release. This
update is a significant overhaul aimed at addressing several key issues with the
previous releases.
<Player />
and
<Broadcast />
primitives based on
Radix UI.asChild
pattern, where the component will instead clone the part’s child and passing
it the props and behavior required to make it functional.<FullscreenTrigger asChild>{...}</FullscreenTrigger>
will
not render a DOM element, and instead copy all of it’s properties to the
child component, which will behave as a fullscreen trigger.Video
component).Replace your usage of the single <Player />
and <Broadcast />
components
with the new composable primitives. These include:
<Player.Root />
<Player.Container />
<Player.Video />
<Player.Controls />
<Player.LoadingIndicator />
<Player.FullscreenTrigger />
Check out our complete example for how these can be composed to build a video player, modeled after the 3.x versions of the Player.
<Broadcast.Root />
<Broadcast.Container />
<Broadcast.Video />
<Broadcast.Controls />
<Broadcast.SourceSelect />
<Broadcast.VideoEnabledIndicator />
Check out the complete example for how these can be composed to build a complete in-browser broadcast experience.
useCreateAsset
, useStream
, etc.livepeer
JS SDK (or
another SDK, depending on your applications’s API
language) for data fetching and interaction.
asChild
pattern for more control over the rendering of components.getSrc
.useMediaContext
for building custom components. See the implementation
of the primitives as an example of how to implement them.autoUrlUpload
and direct IPFS playback. See
below for recommendations for how to migrate from this.use client
and use server
directives in the
output. This means that you can directly import the client components into a
RSC and you don’t need to wrap them. If you don’t use React Server
Components, this doesn’t affect you.The React Native package has been deprecated. Consider seeking alternative solutions or consulting the team for future support plans.
autoUrlUpload
To replace the usage of autoUrlUpload
, use the following pseudocode as a guide
for how the logic used to work on the frontend.