Adding Language Support

Media Chrome supports multiple languages for its UI components. By default, it uses English, but you can include additional languages by loading the corresponding language module.

Currently, the supported languages are:

• Chinese (Simplified) (zh-CN)
• Chinese (Traditional) (zh-TW)
• English (default)
• French (fr)
• German (de)
• Portuguese (pt)
• Spanish (es)

To add support for a specific language in an HTML file, include the corresponding language module using a <script> tag:

<script type="module" src="https://cdn.jsdelivr.net/npm/media-chrome@4/dist/lang/pt.js"></script>

Replace pt.js with the appropriate language code (es.js, fr.js, etc.) for other languages.

Note: This only works with the non-bundled version of Media Chrome (https://cdn.jsdelivr.net/npm/media-chrome@4) and not the /+esm version. This is required because the i18n.js module must be imported separately to properly manage state.

If you are working with JavaScript, you can import the language module as follows:

import "media-chrome/lang/pt.js";

Again, replace pt.js with the desired language code.

Media Chrome automatically detects the user’s preferred language based on their browser settings. If the corresponding language file has been imported, the UI will switch to that language.

Note: When using HTML, make sure the language file <script> tag is loaded before the main Media Chrome script so the translations are registered before the components initialize.

If the user’s preferred language is not available, the UI will fall back to English.

You can also override the language explicitly by setting the lang attribute on the <media-controller> element after the language file has been loaded:

<script type="module" src="https://cdn.jsdelivr.net/npm/media-chrome@4/dist/lang/es.js"></script>

<media-controller lang="es">
  ...
</media-controller>

Or dynamically via JavaScript after the language module is imported:

import "media-chrome/lang/es.js";

const controller = document.querySelector("media-controller");
controller.setAttribute("lang", "es");

This is useful when you want to set the language programmatically regardless of the user’s browser settings.

If you want to add support for a new language, you can create your own language file by extending an existing one, such as es.js. Here’s how:

1. Copy the contents of an existing language file (e.g., es.js).

2. Modify the translations to match your desired language.

3. Save it as a new file, e.g., it.js for Italian.

4. Import it into your project using:

   import "./path-to-your-lang/it.js";

5. Ensure the browser can detect and apply the language based on user preferences.

Want to share your translation? Create a fork of the muxinc/media-chrome repository, add your language file to src/js/lang/, and open a Pull Request.