mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
101 lines
3.4 KiB
Plaintext
101 lines
3.4 KiB
Plaintext
---
|
|
title: UI Components
|
|
description: Understanding Video.js v10's primitive-based component architecture
|
|
---
|
|
|
|
import FrameworkCase from '@/components/docs/FrameworkCase.astro';
|
|
import DocsLink from '@/components/docs/DocsLink.astro';
|
|
|
|
Video.js v10 components are built from **unstyled UI primitives**, taking inspiration from projects like [shadcn/ui](https://ui.shadcn.com/) and [Base UI](https://base-ui.com/). This approach gives you control over styling and behavior while handling the complex interactions for you.
|
|
|
|
## Core Principles
|
|
|
|
### 1. Primitive-Based Design
|
|
|
|
Each primitive represents at most **one HTML element**, without internal elements.
|
|
|
|
<FrameworkCase frameworks={["react"]}>
|
|
```tsx
|
|
<TimeSlider.Root>
|
|
<TimeSlider.Track> {/* One element: the track */}
|
|
<TimeSlider.Progress /> {/* One element: the progress bar */}
|
|
<TimeSlider.Pointer /> {/* One element: hover indicator */}
|
|
</TimeSlider.Track>
|
|
<TimeSlider.Thumb /> {/* One element: the draggable thumb */}
|
|
</TimeSlider.Root>
|
|
```
|
|
</FrameworkCase>
|
|
|
|
<FrameworkCase frameworks={["html"]}>
|
|
```html
|
|
<media-time-slider>
|
|
<div class="track"> <!-- One element: the track -->
|
|
<div class="progress"></div> <!-- One element: the progress bar -->
|
|
<div class="pointer"></div> <!-- One element: hover indicator -->
|
|
</div>
|
|
<div class="thumb"></div> <!-- One element: the draggable thumb -->
|
|
</media-time-slider>
|
|
```
|
|
</FrameworkCase>
|
|
|
|
### 2. Compound Components
|
|
|
|
Complex components are broken into smaller, composable pieces. This pattern is used for:
|
|
|
|
- **Sliders** - Root, Track, Thumb, Progress, Pointer
|
|
- **Tooltips** - Root, Trigger, Positioner, Popup, Arrow, Portal
|
|
- **Popovers** - Root, Trigger, Positioner, Popup, Portal
|
|
|
|
Each piece handles one concern, but they work together seamlessly.
|
|
|
|
### 3. Built-in Accessibility
|
|
|
|
Components include proper ARIA attributes, keyboard navigation, and focus management out of the box:
|
|
|
|
- Buttons have correct roles and labels
|
|
- Sliders support arrow key navigation
|
|
- Focus is managed properly in tooltips and popovers
|
|
- Screen readers get meaningful announcements
|
|
|
|
### 4. Data Attributes for Styling
|
|
|
|
Components expose state through data attributes, allowing pure CSS state styling:
|
|
|
|
```css
|
|
/* Style based on state without JavaScript */
|
|
button[data-paused] {
|
|
/* Paused state */
|
|
}
|
|
|
|
button:not([data-paused]) {
|
|
/* Playing state */
|
|
}
|
|
```
|
|
|
|
Common data attributes:
|
|
- `data-paused` - Present when media is paused
|
|
- `data-muted` - Present when audio is muted
|
|
- `data-fullscreen` - Present when in fullscreen mode
|
|
- `data-volume-level` - Values: `high`, `medium`, `low`, `off`
|
|
|
|
## Available Components
|
|
|
|
### Simple Components
|
|
|
|
Single-element components that handle one piece of UI:
|
|
|
|
- <DocsLink slug="reference/play-button">**PlayButton**</DocsLink> - Play/pause toggle
|
|
- <DocsLink slug="reference/mute-button">**MuteButton**</DocsLink> - Audio mute toggle
|
|
- <DocsLink slug="reference/fullscreen-button">**FullscreenButton**</DocsLink> - Fullscreen toggle
|
|
- **CurrentTimeDisplay** - Current playback time
|
|
- **DurationDisplay** - Total media duration
|
|
- **PreviewTimeDisplay** - Time at hover position
|
|
|
|
### Compound Components
|
|
|
|
Multi-element components for complex interactions:
|
|
|
|
- <DocsLink slug="reference/time-slider">**TimeSlider**</DocsLink> - Seekable timeline with progress
|
|
- <DocsLink slug="reference/volume-slider">**VolumeSlider**</DocsLink> - Volume control slider
|
|
- **Tooltip** - Hover tooltips with positioning
|
|
- **Popover** - Click/hover popovers with collision detection |