npm - @videojs/react - Versions diffs - 10.0.0-beta.31 → 10.0.0-beta.32 - Mend

@videojs/react 10.0.0-beta.31 → 10.0.0-beta.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1552) hide show

package/docs/how-to/i18n-ssr.md DELETED Viewed

@@ -1,104 +0,0 @@
-# SSR and locale
-Render translated player UI on the server without a flash of English
-Video.js is English by default. Server-rendered pages that opt into another language should mount the relevant provider, output the correct `lang`, and supply translations on the first client render. Lazy `loadLocale` and browser translation fallback run after hydration, so controls briefly show English without preloaded copy.
-Read [Internationalization](../concepts/i18n.md) for provider resolution and merge order.
-## Set `<html lang>`
-Render the document language on the server:
-html
-```
-<html lang="es">
-```
-React providers use a server snapshot of `undefined` for ambient lang, then read `<html lang>` on hydration. Passing the `locale` prop explicitly avoids any mismatch.
-## Preload translations
-Import the locale pack on the server (or in a server component) and pass it to [`I18nProvider`](../reference/i18n-provider.md):
-tsx
-```
-import { I18nProvider } from '@videojs/react/i18n';
-import { VideoPlayer, VideoSkin, Video } from '@videojs/react/video';
-const loaders = {
-  es: () => import('@videojs/react/i18n/locales/es'),
-  fr: () => import('@videojs/react/i18n/locales/fr'),
-};
-export async function Player({ locale }: { locale: string }) {
-  const load = loaders[locale as keyof typeof loaders];
-  if (!load) throw new Error(`Unsupported locale: ${locale}`);
-  const { default: translations } = await load();
-  return (
-    <VideoPlayer>
-      <I18nProvider locale={locale} translations={translations}>
-        <VideoSkin>
-          <Video src="..." playsInline />
-        </VideoSkin>
-      </I18nProvider>
-    </VideoPlayer>
-  );
-}
-```
-`translations` on the first render skips the async lazy layer and Chrome-only browser translation fallback. Labels match on server and client.
-## Register on the server
-For a shipped pack, import its side-effect module in server bootstrap code before rendering players:
-ts
-```
-import '@videojs/react/i18n/locales/es/register';
-```
-For a custom pack, call [`registerI18n`](../reference/register-i18n.md) instead:
-ts
-```
-import { registerI18n } from '@videojs/react/i18n';
-import es from './locales/es';
-registerI18n('es', es);
-```
-The registry is module singleton state. Registration in server entry points carries into the client bundle when shared.
-## next-intl and app routers
-tsx
-```
-import { getLocale } from 'next-intl/server';
-const locale = await getLocale();
-const loaders = {
-  es: () => import('@videojs/react/i18n/locales/es'),
-  fr: () => import('@videojs/react/i18n/locales/fr'),
-};
-const load = loaders[locale as keyof typeof loaders];
-if (!load) throw new Error(`Unsupported locale: ${locale}`);
-const { default: translations } = await load();
-<I18nProvider locale={locale} translations={translations}>
-  ...
-</I18nProvider>
-```
-Match your app’s locale negotiation. Video.js does not replace framework i18n; it consumes the tag you pass.
-## What’s next?
-*   [Switch locale at runtime](./i18n-switch-locale.md)
-*   [Register a custom locale](./i18n-register-locale.md)

package/docs/how-to/i18n-switch-locale.md DELETED Viewed

@@ -1,197 +0,0 @@
-# Switch locale dynamically
-Change the player language at runtime in HTML and React
-Video.js starts in English and re-resolves translations when you opt into another active locale.
-## Prerequisites
-*   A target locale from a shipped lazy-loaded pack, a registered custom pack, or a Chrome browser translation fallback
-## Ambient `<html lang>`
-The simplest switch updates the document language and lets providers pick it up:
-ts
-```
-document.documentElement.lang = 'fr';
-```
-Note
-Ambient switching only applies when `I18nProvider` has no explicit `locale` prop.
-An [`I18nProvider`](../reference/i18n-provider.md) without `locale` reads `<html lang>`. Updating it is enough when you are not forcing an explicit locale.
-## Set text direction
-`lang` identifies the content language. `dir` controls text and layout direction. Browsers do not infer one from the other, so set both when the locale applies to the whole document:
-ts
-```
-document.documentElement.lang = 'ar';
-document.documentElement.dir = 'rtl';
-```
-Set `dir` back to `ltr` when you switch to a left-to-right language. This prevents the previous direction from remaining active.
-When React’s `locale` is explicit, the player applies its resolved `lang` and `dir` to the container. A `lang` or `dir` passed to that container overrides the rendered DOM boundary only; translations still come from `I18nProvider locale`.
-In HTML, `<media-i18n lang>` sets the provider locale and derives its direction. An explicit `dir` on `<media-i18n>` overrides that derived direction.
-Providers without an explicit locale inherit ambient document language and direction. In that case, set `lang` and `dir` on `<html>` or another ancestor:
-html
-```
-<html lang="ar" dir="rtl">
-```
-RTL preserves playback control ordering and time-semantic media icons while mirroring menu motion and navigation chevrons. Horizontal time and volume sliders retain a physical left-to-right value scale: Left Arrow decreases the value, Right Arrow increases it, and the minimum remains on the left.
-## Explicit provider language
-tsx
-```
-import { useState } from 'react';
-import { I18nProvider } from '@videojs/react/i18n';
-import { VideoPlayer, VideoSkin, Video } from '@videojs/react/video';
-function App() {
-  const [locale, setLocale] = useState<'en' | 'es' | 'fr'>('en');
-  return (
-    <>
-      <button type="button" onClick={() => setLocale('es')}>
-        Español
-      </button>
-      <VideoPlayer>
-        <I18nProvider locale={locale}>
-          <VideoSkin>
-            <Video src="..." playsInline />
-          </VideoSkin>
-        </I18nProvider>
-      </VideoPlayer>
-    </>
-  );
-}
-```
-Changing `locale` triggers lazy `loadLocale` for built-in packs.
-## Avoid flash while switching
-Async lazy loads and browser translation fallback can briefly show English. Preload copy before the active locale changes with one of three common patterns:
-### Preload at bootstrap
-Side-effect locale modules register shipped packs before the provider renders. Preload every language in a fixed picker to avoid the async gap.
-tsx
-```
-import '@videojs/react/i18n/locales/es/register';
-import '@videojs/react/i18n/locales/fr/register';
-// Switching locale is instant: no remount, no lazy-load gap
-<I18nProvider locale={userLocale}>
-  <VideoSkin>...</VideoSkin>
-</I18nProvider>
-```
-### Prefetch before switching
-When you cannot register every locale up front, import and register immediately before updating `locale`:
-tsx
-```
-import { registerI18n } from '@videojs/react/i18n';
-const loaders = {
-  es: () => import('@videojs/react/i18n/locales/es'),
-  fr: () => import('@videojs/react/i18n/locales/fr'),
-};
-async function switchTo(next: keyof typeof loaders) {
-  const { default: translations } = await loaders[next]();
-  registerI18n(next, translations);
-  setLocale(next);
-}
-<I18nProvider locale={locale}>
-  ...
-</I18nProvider>
-```
-You still pay the import cost once per locale, but later switches to the same tag stay synchronous.
-### Scoped overrides with `translations`
-Pass `translations` on [`I18nProvider`](../reference/i18n-provider.md) when overrides should apply to one subtree only, or when you want copy colocated with the switch handler:
-tsx
-```
-const loaders = {
-  es: () => import('@videojs/react/i18n/locales/es'),
-  fr: () => import('@videojs/react/i18n/locales/fr'),
-};
-async function switchTo(next: string) {
-  const load = loaders[next as keyof typeof loaders];
-  if (!load) throw new Error(`Unsupported locale: ${next}`);
-  const { default: translations } = await load();
-  setState({ locale: next, translations });
-}
-<I18nProvider locale={state.locale} translations={state.translations}>
-  ...
-</I18nProvider>
-```
-Approach
-Scope
-Best for
-Side-effect locale imports
-Global, all providers
-Language picker with a fixed set of shipped locales
-`registerI18n` before switch
-Global, all providers
-On-demand prefetch before changing `locale`
-`I18nProvider translations`
-Single provider subtree
-Scoped overrides, SSR first paint
-Note
-`registerI18n` merges into the global registry. Repeated calls add or replace keys for the same tag, they do not wipe other locales. Registry updates notify mounted providers via `onI18nRegistryChange`, so late registrations still refresh wired controls.
-Tip
-For server-rendered first paint, see [SSR and hydration](./i18n-ssr.md).
-## Browser translation fallback
-If a switched locale has no registered or shipped pack, Video.js can use Chrome’s [Browser Translation API](https://developer.mozilla.org/en-US/docs/Web/API/Translator) when the browser exposes `globalThis.Translator` and already has the target model installed. This is automatic after lazy loading is attempted.
-Do not rely on it for instant switching. Preload or register reviewed packs when the language picker should update without a flash of English.
-## What’s next?
-*   [SSR with locale](./i18n-ssr.md)
-*   [`useLocale`](../reference/use-locale.md): Read the active locale in React