zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(site): reset installation guide to implemented features (#707)

Browse Source 
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Darius Cepulis
2026-03-04 11:14:41 -06:00
committed by GitHub
co-authored by Claude Opus 4.6
parent 4b282ff074
commit 2db6be75be
17 changed files with 211 additions and 463 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/content/docs/concepts/ui-components.mdx
-92
View File
@@ -1,92 +0,0 @@
---
title: UI components
description: Primitive-based component architecture for building accessible, composable video player controls
---
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
- **Popovers** - Root, Trigger, Positioner, Popup
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
### Compound components
Multi-element components for complex interactions