TimeDisplay

The elapsed and total time, with a button that switches between elapsed and remaining time.

import { TimeDisplay } from 'react-media-kit'

import { TimeDisplay } from 'react-media-kit'

<TimeDisplay.Root className="time">
  <TimeDisplay.Toggle className="time-toggle">
    <TimeDisplay.Timer />
    <span aria-hidden="true"> / </span>
    <TimeDisplay.Duration />
  </TimeDisplay.Toggle>
</TimeDisplay.Root>

.time-toggle {
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

Render these inside Player.Root, next to a Media.Video or Media.Audio.

Anatomy

How the parts nest.

<TimeDisplay.Root>
  <TimeDisplay.Toggle>
    <TimeDisplay.Timer />
    <TimeDisplay.Duration />
  </TimeDisplay.Toggle>
</TimeDisplay.Root>

API reference

Parts accept the attributes of the element they render, plus a ref, except where noted. Every part that renders an element also sets the media state attributes. Passing aria-label replaces a default label.

TimeDisplay.Root

renders <div>

Groups the time parts and remembers whether TimeDisplay.Timer shows elapsed or remaining time.

Prop	Type	Default	Description
initialMode	"elapsed" \| "remaining"	"elapsed"	Which time `TimeDisplay.Timer` shows first.

TimeDisplay.Toggle

renders <button>

Switches TimeDisplay.Timer between elapsed and remaining time. It must be inside TimeDisplay.Root, and usually wraps the timer. Its aria-label is "See remaining time", or "See elapsed time" while remaining time shows.

Data attribute	Description
data-elapsed-mode	The timer shows elapsed time.

Your onClick runs before the built-in one; call event.preventDefault() in it to skip the built-in behavior.

TimeDisplay.Timer

renders <time>

Shows the current time, either elapsed or remaining with a - prefix. It starts in the mode set by initialMode, and TimeDisplay.Toggle switches it. Outside TimeDisplay.Root it always shows elapsed time.

The component sets children and dateTime itself.

TimeDisplay.Duration

renders <time>

The total duration of the media.

The component sets children and dateTime itself.

Media state attributes

Five of these describe loading, and exactly one of them is set at a time. The other three mark features the browser lacks. Use them to hide controls that can’t work, or to style the player while it loads.

Data attribute	Description
data-media-pending	Loading hasn’t started. This is the initial state.
data-media-loading	The media has started loading.
data-media-metadata-loaded	The duration and dimensions are known, but there isn’t enough data to play yet.
data-media-playable	The media can play. It stays set if playback later stalls to buffer.
data-media-error	The media element reported an error, such as a network or decoding failure. A blocked `play()` call doesn’t set it; use `onError` for that.
data-fullscreen-unsupported	The browser can’t go fullscreen, or support hasn’t been detected yet.
data-pip-unsupported	Picture-in-picture isn’t available, such as for audio, or support hasn’t been detected yet.
data-volume-change-unsupported	The browser doesn’t let scripts set the volume, such as on iOS, or support hasn’t been detected yet.