Internationalization

[mihar-22]

Implement internationalization (i18n) support for Video.js 10, enabling components to display localized text. The system is tree-shakeable, works without a provider, and allows skins to define their own translation types.

Goals

• Tree-shakeable: Components provide own defaults
• Optional: Works without provider (falls back to defaults)
• Extensible: Skins define own translation types
• Simple: String interpolation with {param} syntax

References

• Notion: Core Design Doc (Internationalization)

Usage

Translator

import { createTranslator } from '@videojs/core';

const t = createTranslator({
  Play: 'Reproducir',
  Pause: 'Pausa',
  'Cast to {device}': 'Transmitir a {device}',
});

t('Play'); // 'Reproducir'
t('Cast to {device}', { device: 'TV' }); // 'Transmitir a TV'
t('Unknown'); // 'Unknown' (fallback to key)

React

interface SkinTranslations extends CoreTranslations {
  'Skip Intro'?: string;
  'Next Episode'?: string;
}

const { I18nProvider, useTranslator } = createI18nHooks<SkinTranslations>();

<I18nProvider translations={{ Play: 'Reproducir' }}>
  <Player />
</I18nProvider>

function PlayButton() {
  const t = useTranslator();
  const label = paused ? t('Play') : t('Pause');
}

HTML

<media-container lang="es">
  <media-play-button></media-play-button>
</media-container>

---

Tasks

Core (@videojs/core)

• Implement createTranslator(translations) factory
• Define CoreTranslations interface with base strings
• Support {param} interpolation syntax
• Fallback to key when translation missing

React (@videojs/react)

• Implement createI18nHooks<T>() factory
• I18nProvider component with context
• useTranslator() hook with fallback when no provider

HTML (@videojs/html)

• getTranslations(lang) lookup
• registerTranslations(lang, translations) for custom languages
• Read lang attribute from ancestor elements

Testing

• Core unit tests

---

Acceptance Criteria

• Translator works without provider
• {param} interpolation works
• React: typed translations via generic
• HTML: inherits lang from ancestor
• Tree-shakeable

[mihar-22]

Cool library I came across: https://generaltranslation.com/en-US/docs/platform