Add MENU_ITEM constant to template to allow styling of menu items with CSS

[jarred]

Currently menu items appear like they can be targeted and styled with mux-player::part(menu-item) but this fails because the part menu-item is not included in the list of parts to export.

Menu item markup

<media-chrome-menu-item type="radio" role="menuitemradio" part="menu-item radio" value="1" aria-checked="false" tabindex="-1">...</media-chrome-menu-item>

Theme parts exported

<media-theme defaultstreamtype="on-demand" defaultsubtitles="" forwardseekoffset="10" backwardseekoffset="10" exportparts="top, center, bottom, layer, media-layer, poster-layer, vertical-layer, centered-layer, gesture-layer, controller, button, range, display, control-bar, menu-button, menu, option, poster, live, play, pre-play, seek-backward, seek-forward, mute, captions, airplay, pip, fullscreen, cast, playback-rate, volume, time, title, audio-track, rendition" title="Test multiple captions and audio streams" videotitle="Test multiple captions and audio streams" style="--media-accent-color: #da2128;">
  ...
  </media-theme>

Also noticed thumb missing too, to allow for styling the thumb in the volume and time ranges.

Could someone please point me in the right direction if this isn't the place to suggest this. Thanks!

[vercel]

@jarred is attempting to deploy a commit to the Mux Team on Vercel.

A member of the Team first needs to authorize it.

[snyk-io]

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Licenses	0	0	0	0	0 issues
✅	Open Source Security	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

[ronalduQualabs]

Thanks for your work on this!

Just a little request could you update the themes gerwig and classic and add exportpart <media-time-range exportparts="thumb" ... for the thumb can be styled from the light DOM?.

[jarred]

Hi @ronalduQualabs ! No problem, have done so.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 70.75%. Comparing base (d41c5e7) to head (8d6eb3e).
⚠️ Report is 10 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1212      +/-   ##
==========================================
+ Coverage   70.73%   70.75%   +0.02%     
==========================================
  Files          37       37              
  Lines        6677     6685       +8     
  Branches      498      499       +1     
==========================================
+ Hits         4723     4730       +7     
- Misses       1951     1952       +1     
  Partials        3        3              

Files with missing lines	Coverage Δ
packages/mux-player/src/template.ts	87.26% <100.00%> (+0.24%)	⬆️

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[vercel]

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

Project	Deployment	Preview	Comments	Updated (UTC)
elements-demo-astro	Ready	Preview	Comment	Oct 20, 2025 5:41pm
elements-demo-nextjs	Error			Oct 20, 2025 5:41pm
elements-demo-svelte-kit	Ready	Preview	Comment	Oct 20, 2025 5:41pm
elements-demo-vanilla	Ready	Preview	Comment	Oct 20, 2025 5:41pm
elements-demo-vue	Ready	Preview	Comment	Oct 20, 2025 5:41pm

💡 Enable Vercel Agent with $100 free credit for automated AI reviews