# Controls

User activity and controls visibility state for the player store

Read-only — tracks user activity for showing and hiding controls.

## Import

```tsx
import { controlsFeature } from '@videojs/react';
```

The `liveVideoFeatures` and `videoFeatures` [feature bundles](https://videojs.org/docs/framework/react/guides/presets) include this feature.

## API Reference

### State

| Property | Type | Description |
| --- | --- | --- |
| `userActive` | `boolean` | Whether the user has recently interacted with the player. |
| `controlsVisible` | `boolean` | Whether controls should be visible. |

### Actions

| Action | Type | Description |
| --- | --- | --- |
| `requestControlsLock` | `() => (() => void)` | Keep controls visible during a sustained interaction. The returned function releases the lock. Multiple concurrent locks are supported and each release function is idempotent. |
| `toggleControls` | `() => boolean` | Toggle controls visibility. Returns the new `controlsVisible` value. |

### Selector

Pass `selectControls` to [`usePlayer`](https://videojs.org/docs/framework/react/reference/api/use-player) to subscribe to controls state. Returns `undefined` if the controls feature is not configured.

**ControlsOverlay.tsx**

```tsx
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.controlsVisible ? 1 : 0 }}>
      {children}
    </div>
  );
}
```

---

React documentation: https://videojs.org/docs/framework/react/llms.txt
All documentation: https://videojs.org/llms.txt