​

Features

• Automatic conditional rendering based on fullscreen status and browser API availability, customizable with the matcher pattern
• Handles all browser APIs back to IE11, with special handling for iOS
• Compatible with CSS animations for dynamic enter/exit animations

​

Anatomy

Import the components and piece the parts together.

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

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

​

Props

​

FullscreenIndicator

​

forceMount

A boolean that, when true, keeps the component mounted at all times, useful for controlling animations with external libraries.

​

matcher

A prop to define the condition under which the FullscreenIndicator should be visible. It can be a boolean directly matching the fullscreen state or a function providing custom logic to determine visibility.

​

FullscreenIndicator

​

forceMount

A boolean that, when true, keeps the component mounted at all times, useful for controlling animations with external libraries.

​

matcher

A prop to define the condition under which the FullscreenIndicator should be visible. It can be a boolean directly matching the fullscreen state or a function providing custom logic to determine visibility.

​

Data Attributes

​

FullscreenIndicator

​

data-livepeer-controls-fullscreen-indicator

Indicates the component’s role.

​

data-fullscreen

Shows the current fullscreen state ("true" or "false").

​

data-visible

Reflects whether the indicator is currently visible ("true" or "false").

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

​

FullscreenTrigger

​

data-livepeer-controls-fullscreen-trigger

Indicates the component’s role.

​

data-fullscreen-state

Shows the current fullscreen state ("true" or "false"). lscreen state ("true" or "false").