Play

The PlayPauseTrigger component enables users to toggle playback and the PlayingIndicator provides a visual cue for the current playback state.

PlayPauseTrigger and PlayingIndicator integrate together to form the typical play/pause interaction for media players. They do not have to be used together and can combine with other components.

Features

• Controls the playback state and conditionally renders based on playing status, customizable with the matcher pattern
• Keyboard hotkeys and adheres to WAI-ARIA design patterns

Anatomy

Import the components and piece the parts together.

import * as Player from "@livepeer/react/player";

export default () => (
  <Player.Root>
    <Player.Container>
      <Player.PlayPauseTrigger />
      <Player.PlayingIndicator />
    </Player.Container>
    <Player.Container>
      <Player.Controls>
        <Player.PlayPauseTrigger />
        <Player.PlayingIndicator />
      </Player.Controls>
    </Player.Container>
  </Player.Root>
);

Props

PlayPauseTrigger

Accepts all props for a typical button element.

PlayingIndicator

forceMount

Ensures the component is always mounted, beneficial for animation consistency.

matcher

Defines the condition under which the PlayingIndicator displays, using a boolean or a custom function for tailored visibility logic.

Data Attributes

PlayPauseTrigger

data-livepeer-play-pause-trigger

Identifies the play/pause button within the Player.

data-playing

Shows the playback status ("true" for playing, "false" for paused).

data-visible

Signifies if the indicator is visible ("true") or hidden ("false"), useful for CSS-based animations and visibility adjustments.

PlayingIndicator

data-livepeer-playing-indicator

Marks the playing status indicator component.

data-playing

Shows the playback status ("true" for playing, "false" for paused).

data-visible

Signifies if the indicator is visible ("true") or hidden ("false"), useful for CSS-based animations.