Live

​

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.