Controls

The Controls component provides an interactive container for all other broadcast control elements such as AudioTrigger, Fullscreen, etc.

Controls serves as the interactive layer for broadcast control actions, dynamically displayed based on the broadcast state, loading state, or presence of an error. It is designed to automatically show upon user interaction with the Container element and hides based on the Root component’s autohide property.

By default, controls are shown during hover or interaction.

Features

• Automatic conditional rendering based on user interactions
• Compatible with CSS animations for dynamic enter/exit animations

The visibility of Controls is managed automatically, relying on the autohide property of the Root component to determine how long after a user interaction to wait before hiding.

Anatomy

Import the components and piece the parts together.

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

export default () => (
  <Broadcast.Root>
    <Broadcast.Container>
      <Broadcast.Controls>
        {/* Place interactive control elements here, like enable/disable broadcast, screenshare toggle, etc. */}
      </Broadcast.Controls>
    </Broadcast.Container>
  </Broadcast.Root>
);

Props

forceMount

Ensures the component is always in the DOM, useful for animation controls.

autoHide

Defines the auto-hide delay in milliseconds after user interaction. Default is 3000ms. Set to 0 to disable auto-hide.

Data Attributes

data-livepeer-controls

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

data-visible

Reflects the visibility status of the controls. It’s "true" when the controls are currently visible (not hidden, not loading, no error present, and WebRTC is supported), and "false" when they’re not visible.

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