Status

​

Features

• Synchronizes broadcast status with a visual indicator

​

Anatomy

Import the components and piece the parts together.

import * as Broadcast from "@livepeer/react/broadcast";

export default () => (
  <Broadcast.Root>
    <Broadcast.Container>
      <Broadcast.StatusIndicator />
    </Broadcast.Container>
    <Broadcast.Container>
      <Broadcast.Controls>
        <Broadcast.StatusIndicator />
      </Broadcast.Controls>
    </Broadcast.Container>
  </Broadcast.Root>
);

​

Props

​

forceMount

A boolean that, when true, ensures the component is always mounted. This is particularly useful for managing animations with external animation libraries.

​

matcher

A prop required to define the conditions under which the StatusIndicator should be visible. It can be a specific BroadcastStatus value or a function that provides custom logic for visibility determination based on the broadcast status.

The status can be of the type: "live" | "pending" | "idle"

​

Data Attributes

​

data-livepeer-controls-status-indicator

Serves to identify the component’s role within the broadcast interface.

​

data-status

Shows the current broadcast status as a string.

The status can be of the type: "live" | "pending" | "idle"

​

data-visible

Reflects the visibility status of the indicator, with "true" meaning it’s currently visible based on the matcher or broadcast status and "false" denoting it’s not visible.