LiveIndicator is designed to provide a clear, visual cue of the live status
of the media playback.
Features
- Conditional rendering based on live playback status, customizable with the
matcher pattern
- Adheres to WAI-ARIA design patterns
- Compatible with CSS animations for dynamic enter/exit animations
Anatomy
Import the components and piece the parts together.
import * as Player from "@livepeer/react/player";
export default () => (
<Player.Root>
<Player.Container>
<Player.LiveIndicator />
</Player.Container>
<Player.Container>
<Player.Controls>
<Player.LiveIndicator />
</Player.Controls>
</Player.Container>
</Player.Root>
);
Props
forceMount
Keeps the component always mounted, aiding in managing animations.
matcher
Determines when the LiveIndicator is shown, accepting a boolean or a function
for customized visibility logic.
Data Attributes
data-livepeer-live-indicator
Designates the live indicator component within the Player.
data-live
Denotes the live status ("true" for live, "false" for not live).
data-visible
Signifies if the indicator is visible ("true") or hidden ("false"), useful
for CSS-based animations. 
