Enabled

The EnabledTrigger and EnabledIndicator components provide broadcasters with interactive controls and visual cues to manage the “enabled” state of the broadcast.

The EnabledTrigger and EnabledIndicator components offer broadcasters an interactive button (EnabledTrigger) to toggle the “enabled” state of the broadcast and a visual representation (EnabledIndicator) of this state. These React components utilize @radix-ui/react-presence for conditional rendering, ensuring accurate display based on the broadcast’s enabled state.

Toggling “enabled” turns WHIP WebRTC ingest on or off, which when “on” the Broadcast component will make a POST request with an SDP payload to the WHIP endpoint. When “off”, it will stop sending data to the WebRTC ingest.

Introduction

EnabledTrigger

EnabledTrigger acts as an interactive button, enabling broadcasters to toggle the enabled state of their broadcast. It provides an intuitive control for starting or stopping the broadcast stream.

Props

The component accepts all props suitable for a button element.

EnabledIndicator

EnabledIndicator provides a visual cue regarding the enabled state of the broadcast, indicating whether the broadcast is active. It can be configured to appear only when the broadcast is enabled or disabled, based on the matcher prop.

Props

The component accepts all props appropriate for a div element, along with specific props:

forceMount

A boolean that, when true, ensures the component is always mounted. This is particularly useful for managing animations with external animation libraries and ensuring visibility during dynamic broadcast scenarios.

matcher

A prop intended to define the circumstances under which the EnabledIndicator should be visible. It can be a boolean that directly corresponds to the enabled state or a function providing custom logic for visibility determination based on the enabled state.

Usage

Here’s a generalized example of how the EnabledTrigger and EnabledIndicator components might be used within the broadcast interface:

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

function BroadcastComponent() {
  return (
    <Broadcast.Root>
      <Broadcast.EnabledTrigger>Toggle Broadcast</Broadcast.EnabledTrigger>
      <Broadcast.EnabledIndicator matcher={true}>
        {/* Visual cue for broadcast active state */}
      </Broadcast.EnabledIndicator>
    </Broadcast.Root>
  );
}

In this example, EnabledTrigger provides a button to start or stop the broadcast, and EnabledIndicator displays a visual cue based on the broadcast’s enabled state.

Data Attributes

Both components assign several data attributes to their underlying elements to reflect the current state, user interactions, and visibility conditions.

EnabledTrigger

data-livepeer-controls-enabled-trigger

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

data-enabled

Indicates the current broadcast state, "true" when broadcasting is enabled and "false" when it is disabled.

EnabledIndicator

data-livepeer-controls-enabled-indicator

Identifies the component’s role as a visual indicator of the broadcast state within the broadcast interface.

data-enabled

Shows the current broadcast state, "true" when broadcasting is enabled and "false" when it is disabled.

data-visible

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

This is often used for dynamically applying enter/exit CSS animations.