Controls
The Controls component provides an interactive container for all other media control elements such as Play, Fullscreen, etc.
Controls serves as the interactive layer for media control actions, dynamically displayed based on the media state, loading state, or presence of an error. It is designed to automatically show upon user interaction with the Container element and hides based on the Root component’s autohide property.
By default, controls are shown during hover or interaction, mimicking the behavior of standard media players.
Features
- Automatic conditional rendering based on user interactions
- Click/touch to pause/play media
- Compatible with CSS animations for dynamic enter/exit animations
The visibility of Controls is managed automatically, relying on the
autohide property of the Root component to determine how long after a user
interaction to wait before hiding.
Anatomy
Import the components and piece the parts together.
import * as Player from "@livepeer/react/player";
export default () => (
<Player.Root>
<Player.Container>
<Player.Controls>
{/* Place interactive control elements here, like play/pause buttons, progress bars, etc. */}
</Player.Controls>
</Player.Container>
</Player.Root>
);
Props
forceMount
Ensures the component is always in the DOM, useful for animation controls.
autoHide
Defines the auto-hide delay in milliseconds after user interaction. Default is 3000ms. Set to 0 to disable auto-hide.
Data Attributes
data-livepeer-controls
Identifies the control component within the Player.
data-visible
Indicates if the controls are visible ("true") or not ("false"), useful for
CSS-based animations.