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.