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.
matcher
patternImport the components and piece the parts together.
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-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.
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.
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.
matcher
patternImport the components and piece the parts together.
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-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.
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.