​
Features

  • Automatic display of friendly time from state store
  • Handles live and static assets (e.g. no fixed duration vs fixed duration)

​
Anatomy

Import the components and piece the parts together. 
import * as Player from "@livepeer/react/player";

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

​
Props

The component accepts all props suitable for a span element, except for children, since the formatted time will be rendered as the only child.

​
Data Attributes

​
data-livepeer-controls-time

Serves to identify the component’s role in the playback interface.

​
data-duration

Displays the total duration of the media.

​
data-progress

Indicates the current progress of the media playback, usually represented as a percentage or time elapsed.

​
data-live

Shows the live state of the media, "true" for live streams and "false" for pre-recorded content.