Controls
User activity and controls visibility state for the player store
Read-only — tracks user activity for showing and hiding controls.
State
| State | Type | Description |
|---|---|---|
userActive | boolean | Whether the user has recently interacted |
controlsVisible | boolean | Whether controls should be visible (active or paused) |
Selector
Pass selectControls to usePlayer to subscribe to controls state. Returns undefined if the controls feature is not configured.
import { selectControls, usePlayer } from '@videojs/react';
function ControlsOverlay({ children }: { children: React.ReactNode }) {
const controls = usePlayer(selectControls);
if (!controls) return null;
return (
<div style={{ opacity: controls.visible ? 1 : 0 }}>
{children}
</div>
);
}API Reference
Parameters
| Parameter | Type | Default | Details |
|---|---|---|---|
state* | object | — |
Return Value
MediaControlsState | undefined