Docs/improve lang import and set

[ronalduQualabs]

Improve docs for adding/setting lang support and include German option to examples.

---

Note

Medium Risk
Mostly docs/example updates, but it adds new public surface (MediaController.resolvedLang) and tweaks i18n resolution behavior, which could affect consumers relying on lang/translation fallback.

Overview
Improves internationalization guidance by documenting supported languages (including de), clarifying that language modules must load before Media Chrome when using HTML, and adding explicit examples for overriding language via the <media-controller lang> attribute or JS.

Updates the vanilla internationalization.html example to include German, reorder script loading so translations register before component init, and replace per-language buttons with a language dropdown plus display of detected vs. active language.

Adds getResolvedLanguage() in utils/i18n.ts and exposes it as a new media-controller property resolvedLang to report the effective language after fallback (e.g., base tag or en).

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

[vercel]

@ronalduQualabs 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	Scan Engine	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues

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

[codecov]

Codecov Report

❌ Patch coverage is 41.66667% with 7 lines in your changes missing coverage. Please review.
✅ Project coverage is 73.55%. Comparing base (3ea80df) to head (a8620c4).
⚠️ Report is 295 commits behind head on main.

Files with missing lines	Patch %	Lines
src/js/utils/i18n.ts	28.57%	5 Missing ⚠️
src/js/media-controller.ts	60.00%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1287      +/-   ##
==========================================
- Coverage   78.55%   73.55%   -5.00%     
==========================================
  Files          59       56       -3     
  Lines       11080    13884    +2804     
  Branches        0      783     +783     
==========================================
+ Hits         8704    10213    +1509     
- Misses       2376     3638    +1262     
- Partials        0       33      +33     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 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.

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit a8620c4. Configure here.}

[cursor]

Dropdown selection not synced with resolved language

Low Severity

The language selection dropdown defaults to "English" on load due to a hardcoded selected attribute. While updateSetLangInfo correctly identifies and displays the resolved language (e.g., from browser settings), it doesn't update the dropdown's value, leading to a mismatch between the displayed language and the dropdown's selection.

Additional Locations (1)

• examples/vanilla/internationalization.html#L130-L131

 

^{Reviewed by Cursor Bugbot for commit a8620c4. Configure here.}

[cursor]

Switching to English fails for non-English browsers

Medium Severity

Removing the lang='en' attribute from <media-controller> creates a state desync. The i18n module sets currentLang to navigator.language, but the store's mediaLang defaults to 'en' (via mediaLang ?? 'en'). When a non-English browser user selects English from the dropdown, setLanguage('en') updates currentLang, but the store's derived mediaLang remains 'en' — no state change is detected, so components never re-render and the UI stays in the previous language.

Additional Locations (1)

• examples/vanilla/internationalization.html#L154-L158

 

^{Reviewed by Cursor Bugbot for commit a8620c4. Configure here.}