Skip to content

docs(design): controls#456

Merged
mihar-22 merged 2 commits intomainfrom
design/controls
Feb 12, 2026
Merged

docs(design): controls#456
mihar-22 merged 2 commits intomainfrom
design/controls

Conversation

@mihar-22
Copy link
Copy Markdown
Member

@mihar-22 mihar-22 commented Feb 5, 2026

ref: #237

Summary

Design document for the Controls component and controlsFeature for Video.js 10.

  • Defines user activity tracking and controls visibility management
  • Specifies <media-controls> and <media-controls-group> components
  • Documents feature API (userActive, controlsVisible, setUserIdleTimeout)
  • Covers accessibility (conditional role="group"), default styles, and behavior
  • Lists descoped features with rationale (lock API, CSS variables, toolbar navigation)

References

  • Researched Media Chrome, Vidstack, Base UI, and Radix for patterns
  • Aligned with WAI-ARIA group role and toolbar pattern guidelines

@vercel
Copy link
Copy Markdown

vercel bot commented Feb 5, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
vjs-10-demo-react Ignored Ignored Preview Feb 12, 2026 7:09am

Request Review

@netlify
Copy link
Copy Markdown

netlify bot commented Feb 5, 2026

Deploy Preview for vjs10-site ready!

Name Link
🔨 Latest commit d381635
🔍 Latest deploy log https://app.netlify.com/projects/vjs10-site/deploys/698d7caa2dc2ad00083d2610
😎 Deploy Preview https://deploy-preview-456--vjs10-site.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copy link
Copy Markdown
Member

@heff heff left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue(blocking): After a first pass I think we should talk through this IRL.

  • The relationship between the components is confusing me
  • It's downplaying "control bar" and making it generic, which feels like a miss to me

I also want to make sure we're on the same page about default behaviors here, for example in MC everything that's a child of the Container gets hidden by default, and it's handled as more like a layer. This design reads like it assumes we're only thinking about the control bar hiding, and not other elements like a title (top left) and share buttons (top right), which should all be hidden at the same time and with the same delay.

Comment thread internal/design/ui/controls-design.md
Comment thread internal/design/ui/controls-design.md
@mihar-22
Copy link
Copy Markdown
Member Author

mihar-22 commented Feb 6, 2026

Sounds good @heff, let's chat IRL :) This one does have some annoying details for us to align on.

@mihar-22 mihar-22 changed the title docs(design): add controls component design docs(design): controls Feb 10, 2026
…trols

- Remove hide-delay attribute from media-controls component API
- Remove hideDelay prop from React Controls.Root examples
- Remove setUserIdleTimeout from feature state interface
- Remove Container Integration section (data-user-active, data-controls-visible)
- Remove cursor-hiding CSS referencing container data-attrs
- Remove related decision sections (hide-delay placement, milliseconds, opt-out)
- Reassign auto-hide timing responsibility to controlsFeature in solution table
@mihar-22 mihar-22 merged commit 9f1c9a9 into main Feb 12, 2026
8 checks passed
@mihar-22 mihar-22 deleted the design/controls branch February 12, 2026 07:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants