feat(packages): add quality menu UI

[sampotts]

Stacked PR on top of #1693

Summary

• Add the UI for quality selection
• Add icons for quality, speed and captions to the menu (original icons in Figma)
• Add a badge component to display the bit rate where required
• Minor styling updates to the menu
• Tighten up transition timing and reduce exit transition duration
• Fix issue where the settings menu wouldn't show in Tailwind skins

Screenshots

You can see it in the Sandbox but anyhow:

Default

Minimal

---

Note

Medium Risk
Touches playback rendition selection (selectVideoRendition) across many skin entry points; regressions would affect adaptive streaming UX but follow established radio-group patterns with tests.

Overview
Adds video quality selection to the settings menu across HTML custom elements, React presets, and default/minimal skins, wired to existing QualityRadioGroupCore / selectQuality player state.

New media-quality-radio-group / useQualityOptions mirror playback-rate and captions: Auto plus renditions with optional tier (e.g. HD, 4K) and bitrate badges when multiple streams share a resolution. Settings rows gain Quality (with switches icon), plus speed and captions-off icons on Speed/Captions; submenu separators and refreshed menu/popup styling (max height, transitions, badge CSS/Tailwind) apply to all three submenus.

Menu item plumbing extends type="quality" for hint labels (Auto / current rendition) and availability gating so the gear control only appears when at least one setting is available.

^{Reviewed by Cursor Bugbot for commit 238ed70. Bugbot is set up for automated code reviews on this repo. Configure here.}

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
v10-sandbox	Ready	Preview, Comment	Jun 17, 2026 4:06am

[luwes]

👍

[mihar-22]

great work, looks beautiful 🖼️