@videojs/react 10.0.0-beta.26 → 10.0.0-beta.28

package/dist/default/__generated__/skins/default-video/styles/styles.css

@@ -0,0 +1,514 @@
+@layer videojs.base, videojs.theme, videojs.components;
+@layer videojs.base {
+  @scope (.media-skin) {
+    :scope,
+    *,
+    ::before,
+    ::after {
+      box-sizing: border-box;
+    }
+
+    button {
+      font: inherit;
+      color: inherit;
+      letter-spacing: inherit;
+    }
+
+    svg {
+      display: block;
+    }
+
+    [hidden] {
+      /* Hidden must override component display styles. */
+      display: none !important;
+    }
+  }
+}
+
+@layer videojs.theme {
+  .media-theme-default {
+    --media-controls-color: oklch(1 0 0);
+    --media-controls-gap: 0.25rem;
+    --media-controls-padding: 0.25rem;
+    --media-control-size: 2.25rem;
+    --media-control-hover-background: oklch(1 0 0 / 0.12);
+    --media-font-family: ui-sans-serif, system-ui, sans-serif;
+    --media-font-size: 0.875rem;
+    --media-icon-size: 1.125rem;
+    --media-radius-pill: 9999px;
+    --media-radius-surface: 0.5rem;
+    --media-shadow-color: oklch(0 0 0 / 0.35);
+    --media-slider-buffer-background: oklch(1 0 0 / 0.3);
+    --media-slider-thumb-size: 0.75rem;
+    --media-slider-track-background: oklch(1 0 0 / 0.2);
+    --media-slider-track-size: 0.25rem;
+    --media-surface-backdrop-blur: 12px;
+    --media-surface-background: oklch(0.2 0 0 / 0.72);
+    --media-surface-border: oklch(1 0 0 / 0.16);
+  }
+}
+
+@layer videojs.components {
+  @scope (.media-skin-video) {
+    .media-button {
+      width: var(--media-control-size);
+      height: var(--media-control-size);
+      cursor: pointer;
+      border-radius: var(--media-radius-pill);
+      color: inherit;
+      outline-offset: -2px;
+      background-color: #0000;
+      border-style: solid;
+      border-width: 0;
+      outline: 2px solid #0000;
+      flex-shrink: 0;
+      place-items: center;
+      padding: 0;
+      display: grid;
+    }
+
+    @media (hover: hover) {
+      .media-button:hover {
+        background-color: var(--media-control-hover-background);
+      }
+    }
+
+    .media-button:focus-visible {
+      background-color: var(--media-control-hover-background);
+      outline-offset: 2px;
+      outline-color: currentColor;
+    }
+
+    .media-button[aria-disabled='true'] {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    .media-button[aria-expanded='true'] {
+      background-color: var(--media-control-hover-background);
+    }
+
+    .media-button-icon {
+      width: var(--media-icon-size);
+      height: var(--media-icon-size);
+      filter: drop-shadow(0 1px 0 var(--media-shadow-color));
+    }
+
+    .media-fullscreen-enter-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-fullscreen-button) {
+      &:not([data-fullscreen]) .media-fullscreen-enter-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-fullscreen-exit-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-fullscreen-button) {
+      &[data-fullscreen] .media-fullscreen-exit-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-pause-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-play-button) {
+      &[data-started]:not([data-paused]):not([data-ended]) .media-pause-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-play-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-play-button) {
+      &:not([data-ended]):not([data-started]) .media-play-icon,
+      &:not([data-ended])[data-paused] .media-play-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-restart-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-play-button) {
+      &[data-ended] .media-restart-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-seek-backward-icon {
+      scale: -1 1;
+    }
+
+    .media-seek-button-label {
+      font-variant-numeric: tabular-nums;
+    }
+
+    .media-volume-high-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-mute-button) {
+      &:not([data-muted]):not([data-volume-level='low']) .media-volume-high-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-volume-low-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-mute-button) {
+      &:not([data-muted])[data-volume-level='low'] .media-volume-low-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+
+    .media-volume-off-icon {
+      opacity: 0;
+      display: none;
+    }
+
+    @scope (.media-mute-button) {
+      &[data-muted] .media-volume-off-icon {
+        opacity: 1;
+        display: block;
+      }
+    }
+  }
+}
+
+@layer videojs.components {
+  @scope (.media-skin-video) {
+    .media-container {
+      isolation: isolate;
+      border-radius: var(--media-radius-surface);
+      background-color: #000;
+      width: 100%;
+      height: 100%;
+      display: block;
+      position: relative;
+      overflow: hidden;
+      container: media-container / inline-size;
+    }
+
+    .media-container:before {
+      pointer-events: none;
+      background-image: var(--media-poster-placeholder, none);
+      background-size: var(--media-object-fit, contain);
+      background-position: var(--media-object-position, center);
+      opacity: 0;
+      filter: blur(var(--media-poster-placeholder-blur, 20px));
+      content: '';
+      background-repeat: no-repeat;
+      transition-property: opacity;
+      transition-duration: 0.25s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      position: absolute;
+      inset: 0;
+    }
+
+    .media-container:has(:is(img[data-visible]:not([data-loaded]))):before {
+      content: '';
+      opacity: 1;
+    }
+
+    .media-container video {
+      border-radius: inherit;
+      object-fit: var(--media-object-fit, contain);
+      object-position: var(--media-object-position, center);
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+  }
+}
+
+@layer videojs.components {
+  @scope (.media-skin-video) {
+    .media-controls {
+      inset-inline: var(--media-controls-gap);
+      bottom: var(--media-controls-gap);
+      z-index: 10;
+      align-items: center;
+      gap: var(--media-controls-gap);
+      border-radius: var(--media-radius-pill);
+      background-color: var(--media-surface-background);
+      padding: var(--media-controls-padding);
+      font-family: var(--media-font-family);
+      font-size: var(--media-font-size);
+      color: var(--media-controls-color);
+      box-shadow:
+        0 0 #0000,
+        0 0 #0000,
+        0 0 #0000,
+        0 0 #0000,
+        0 0 0 1px var(--media-surface-border),
+        0 2px 8px var(--media-shadow-color);
+      backdrop-filter: blur(var(--media-surface-backdrop-blur));
+      line-height: 1;
+      display: flex;
+      position: absolute;
+    }
+
+    .media-controls-group-primary {
+      align-items: center;
+      gap: var(--media-controls-gap);
+      display: flex;
+    }
+
+    .media-controls-group-time {
+      align-items: center;
+      gap: var(--media-controls-gap);
+      flex: 1;
+      display: flex;
+    }
+
+    .media-time {
+      font-variant-numeric: tabular-nums;
+    }
+  }
+}
+
+@layer videojs.components {
+  @scope (.media-skin-video) {
+    .media-overlay {
+      pointer-events: none;
+      border-radius: inherit;
+      background-image: linear-gradient(to top, oklch(0% 0 0 / 0.5), oklch(0% 0 0 / 0.3) 25%, #0000);
+      position: absolute;
+      inset: 0;
+    }
+  }
+}
+
+@layer videojs.components {
+  @scope (.media-skin-video) {
+    .media-surface {
+      background-color: var(--media-surface-background);
+      color: var(--media-controls-color);
+      box-shadow:
+        0 0 #0000,
+        0 0 #0000,
+        0 0 #0000,
+        0 0 #0000,
+        0 0 0 1px var(--media-surface-border),
+        0 2px 8px var(--media-shadow-color);
+      backdrop-filter: blur(var(--media-surface-backdrop-blur));
+    }
+
+    .media-tooltip {
+      border-radius: var(--media-radius-pill);
+      white-space: nowrap;
+      border-style: solid;
+      border-width: 0;
+      margin: 0;
+      padding-block: 0.35rem;
+      padding-inline: 0.625rem;
+    }
+
+    .media-tooltip[data-open] {
+      align-items: center;
+      gap: 0.25rem;
+      display: flex;
+    }
+
+    .media-tooltip-shortcut {
+      font-size: 0.75em;
+      font-weight: 600;
+    }
+
+    .media-volume-popover {
+      border-radius: var(--media-radius-pill);
+      border-style: solid;
+      border-width: 0;
+      margin: 0;
+      padding-block: 0.75rem;
+    }
+  }
+}
+
+@layer videojs.components {
+  @scope (.media-skin-video) {
+    .media-poster {
+      pointer-events: none;
+      border-radius: inherit;
+      object-fit: var(--media-object-fit, contain);
+      object-position: var(--media-object-position, center);
+      width: 100%;
+      height: 100%;
+      transition-property: opacity;
+      transition-duration: 0.25s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      position: absolute;
+      inset: 0;
+    }
+
+    .media-poster:not([data-visible]) {
+      opacity: 0;
+    }
+
+    .media-poster:before {
+      pointer-events: none;
+      background-image: var(--media-poster-placeholder, none);
+      background-size: var(--media-object-fit, contain);
+      background-position: var(--media-object-position, center);
+      content: '';
+      filter: blur(var(--media-poster-placeholder-blur, 20px));
+      background-repeat: no-repeat;
+      position: absolute;
+      inset: 0;
+    }
+
+    .media-poster ::slotted(img) {
+      border-radius: inherit;
+      object-fit: var(--media-object-fit, contain);
+      object-position: var(--media-object-position, center);
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      inset: 0;
+    }
+
+    .media-poster[data-visible]:not([data-loaded]) {
+      opacity: 0;
+    }
+  }
+}
+
+@layer videojs.components {
+  @scope (.media-skin-video) {
+    .media-slider {
+      min-height: var(--media-control-size);
+      cursor: pointer;
+      outline-style: none;
+      flex: 1;
+      justify-content: center;
+      align-items: center;
+      min-width: 5rem;
+      display: flex;
+      position: relative;
+    }
+
+    .media-slider[data-orientation='vertical'] {
+      height: 5rem;
+      width: var(--media-control-size);
+      min-width: 0;
+    }
+
+    .media-slider-buffer {
+      width: var(--media-slider-buffer);
+      border-radius: inherit;
+      background-color: var(--media-slider-buffer-background);
+      inset-block: 0;
+      position: absolute;
+      left: 0;
+    }
+
+    .media-slider-buffer[data-orientation='vertical'] {
+      height: var(--media-slider-buffer);
+      inset-inline: 0;
+      width: auto;
+      top: auto;
+      bottom: 0;
+    }
+
+    .media-slider-fill {
+      width: var(--media-slider-fill);
+      border-radius: inherit;
+      inset-block: 0;
+      background-color: currentColor;
+      position: absolute;
+      left: 0;
+    }
+
+    .media-slider-fill[data-orientation='vertical'] {
+      height: var(--media-slider-fill);
+      inset-inline: 0;
+      width: auto;
+      top: auto;
+      bottom: 0;
+    }
+
+    .media-slider-preview {
+      position: relative;
+    }
+
+    .media-slider-thumb {
+      top: 50%;
+      left: var(--media-slider-fill);
+      width: var(--media-slider-thumb-size);
+      height: var(--media-slider-thumb-size);
+      border-radius: var(--media-radius-pill);
+      background-color: currentColor;
+      position: absolute;
+      translate: -50% -50%;
+    }
+
+    .media-slider-thumb[data-orientation='vertical'] {
+      top: calc(100% - var(--media-slider-fill));
+      left: 50%;
+    }
+
+    .media-slider-track {
+      height: var(--media-slider-track-size);
+      border-radius: var(--media-radius-pill);
+      background-color: var(--media-slider-track-background);
+      width: 100%;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .media-slider-track[data-orientation='vertical'] {
+      height: 100%;
+      width: var(--media-slider-track-size);
+    }
+
+    .media-slider-value {
+      font-variant-numeric: tabular-nums;
+    }
+
+    .media-spinner-icon {
+      width: var(--media-icon-size);
+      height: var(--media-icon-size);
+      filter: drop-shadow(0 1px 0 var(--media-shadow-color));
+    }
+
+    .media-thumbnail {
+      border-radius: var(--media-radius-surface);
+      position: absolute;
+      bottom: calc(100% + 0.75rem);
+      overflow: hidden;
+    }
+
+    .media-thumbnail-image {
+      max-width: 12rem;
+      max-height: 7rem;
+      display: block;
+    }
+  }
+}
+

package/dist/default/__generated__/skins/default-video/styles/theme.css

@@ -0,0 +1,22 @@
+@layer videojs.theme {
+  .media-theme-default {
+    --media-controls-color: oklch(1 0 0);
+    --media-controls-gap: 0.25rem;
+    --media-controls-padding: 0.25rem;
+    --media-control-size: 2.25rem;
+    --media-control-hover-background: oklch(1 0 0 / 0.12);
+    --media-font-family: ui-sans-serif, system-ui, sans-serif;
+    --media-font-size: 0.875rem;
+    --media-icon-size: 1.125rem;
+    --media-radius-pill: 9999px;
+    --media-radius-surface: 0.5rem;
+    --media-shadow-color: oklch(0 0 0 / 0.35);
+    --media-slider-buffer-background: oklch(1 0 0 / 0.3);
+    --media-slider-thumb-size: 0.75rem;
+    --media-slider-track-background: oklch(1 0 0 / 0.2);
+    --media-slider-track-size: 0.25rem;
+    --media-surface-backdrop-blur: 12px;
+    --media-surface-background: oklch(0.2 0 0 / 0.72);
+    --media-surface-border: oklch(1 0 0 / 0.16);
+  }
+}

package/dist/default/i18n/context.js

@@ -1,5 +1,4 @@
-"use client";
-import { createTranslator, getI18nTranslations, onI18nRegistryChange } from "@videojs/core/i18n";
+import { DEFAULT_LOCALE, createTranslator, getI18nTranslations, onI18nRegistryChange } from "@videojs/core/i18n";
 import { createContext, useContext, useEffect, useMemo, useReducer } from "react";
 //#region src/i18n/context.tsx
 /** React context carrying the active translator and locale. @public */
@@ -17,7 +16,7 @@ function useTranslator() {
 		return onI18nRegistryChange(() => invalidateRegistry());
 	}, []);
 	const fallback = useMemo(() => {
-		return createTranslator(getI18nTranslations("en"), "en");
+		return createTranslator(getI18nTranslations(DEFAULT_LOCALE), DEFAULT_LOCALE);
 	}, [registryEpoch]);
 	if (!ctx) return fallback;
 	return ctx.translator;
@@ -28,7 +27,7 @@ function useTranslator() {
 * @public
 */
 function useLocale() {
-	return useContext(I18nContext)?.locale ?? "en";
+	return useContext(I18nContext)?.locale ?? DEFAULT_LOCALE;
 }
 //#endregion
 export { I18nContext, LocaleRootContext, useLocale, useTranslator };

package/dist/default/i18n/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/i18n/context.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createTranslator,\n  getI18nTranslations,\n  type Locale,\n  onI18nRegistryChange,\n  type Translations,\n  type Translator,\n} from '@videojs/core/i18n';\nimport { createContext, useContext, useEffect, useMemo, useReducer } from 'react';\n\nexport type AddLocaleRoot = () => () => void;\n\nexport interface I18nContextValue {\n  translator: Translator;\n  locale: Locale;\n  /** True when a provider received an explicit locale prop. */\n  localeFromProp: boolean;\n  /** Overrides passed to this provider. */\n  translations?: Partial<Translations>;\n  /** Callback inherited by nested locale roots. */\n  onActiveLocaleChange?: (locale: Locale) => void;\n}\n\n/** React context carrying the active translator and locale. @public */\nexport const I18nContext = createContext<I18nContextValue | null>(null);\n\nexport const LocaleRootContext = createContext<AddLocaleRoot | undefined>(undefined);\n\n/**\n * Returns the translator for the nearest `I18nProvider`, or English defaults when none is mounted.\n *\n * @public\n */\nexport function useTranslator(): Translator {\n  const ctx = useContext(I18nContext);\n  const [registryEpoch, invalidateRegistry] = useReducer((epoch: number) => epoch + 1, 0);\n\n  useEffect(() => {\n    return onI18nRegistryChange(() => invalidateRegistry());\n  }, []);\n\n  const fallback = useMemo(() => {\n    void registryEpoch;\n    return createTranslator(getI18nTranslations('en'), 'en');\n  }, [registryEpoch]);\n\n  if (!ctx) {\n    return fallback;\n  }\n  return ctx.translator;\n}\n\n/**\n * Returns the active BCP 47 locale tag from the nearest `I18nProvider`, or `'en'` when none is mounted.\n *\n * @public\n */\nexport function useLocale(): Locale {\n  const ctx = useContext(I18nContext);\n  return ctx?.locale ?? 'en';\n}\n"],"mappings":";;;;;AA0BA,MAAa,cAAc,cAAuC,IAAI;AAEtE,MAAa,oBAAoB,cAAyC,KAAA,CAAS;;;;;;AAOnF,SAAgB,gBAA4B;CAC1C,MAAM,MAAM,WAAW,WAAW;CAClC,MAAM,CAAC,eAAe,sBAAsB,YAAY,UAAkB,QAAQ,GAAG,CAAC;CAEtF,gBAAgB;EACd,OAAO,2BAA2B,mBAAmB,CAAC;CACxD,GAAG,CAAC,CAAC;CAEL,MAAM,WAAW,cAAc;EAE7B,OAAO,iBAAiB,oBAAoB,IAAI,GAAG,IAAI;CACzD,GAAG,CAAC,aAAa,CAAC;CAElB,IAAI,CAAC,KACH,OAAO;CAET,OAAO,IAAI;AACb;;;;;;AAOA,SAAgB,YAAoB;CAElC,OADY,WAAW,WACd,CAAC,EAAE,UAAU;AACxB"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/i18n/context.tsx"],"sourcesContent":["import {\n  createTranslator,\n  DEFAULT_LOCALE,\n  getI18nTranslations,\n  type Locale,\n  onI18nRegistryChange,\n  type Translations,\n  type Translator,\n} from '@videojs/core/i18n';\nimport { createContext, useContext, useEffect, useMemo, useReducer } from 'react';\n\nexport type AddLocaleRoot = () => () => void;\n\nexport interface I18nContextValue {\n  translator: Translator;\n  locale: Locale;\n  /** True when a provider received an explicit locale prop. */\n  localeFromProp: boolean;\n  /** Overrides passed to this provider. */\n  translations?: Partial<Translations>;\n  /** Callback inherited by nested locale roots. */\n  onActiveLocaleChange?: (locale: Locale) => void;\n}\n\n/** React context carrying the active translator and locale. @public */\nexport const I18nContext = createContext<I18nContextValue | null>(null);\n\nexport const LocaleRootContext = createContext<AddLocaleRoot | undefined>(undefined);\n\n/**\n * Returns the translator for the nearest `I18nProvider`, or English defaults when none is mounted.\n *\n * @public\n */\nexport function useTranslator(): Translator {\n  const ctx = useContext(I18nContext);\n  const [registryEpoch, invalidateRegistry] = useReducer((epoch: number) => epoch + 1, 0);\n\n  useEffect(() => {\n    return onI18nRegistryChange(() => invalidateRegistry());\n  }, []);\n\n  const fallback = useMemo(() => {\n    void registryEpoch;\n    return createTranslator(getI18nTranslations(DEFAULT_LOCALE), DEFAULT_LOCALE);\n  }, [registryEpoch]);\n\n  if (!ctx) {\n    return fallback;\n  }\n  return ctx.translator;\n}\n\n/**\n * Returns the active BCP 47 locale tag from the nearest `I18nProvider`, or `'en'` when none is mounted.\n *\n * @public\n */\nexport function useLocale(): Locale {\n  const ctx = useContext(I18nContext);\n  return ctx?.locale ?? DEFAULT_LOCALE;\n}\n"],"mappings":";;;;AAyBA,MAAa,cAAc,cAAuC,IAAI;AAEtE,MAAa,oBAAoB,cAAyC,KAAA,CAAS;;;;;;AAOnF,SAAgB,gBAA4B;CAC1C,MAAM,MAAM,WAAW,WAAW;CAClC,MAAM,CAAC,eAAe,sBAAsB,YAAY,UAAkB,QAAQ,GAAG,CAAC;CAEtF,gBAAgB;EACd,OAAO,2BAA2B,mBAAmB,CAAC;CACxD,GAAG,CAAC,CAAC;CAEL,MAAM,WAAW,cAAc;EAE7B,OAAO,iBAAiB,oBAAoB,cAAc,GAAG,cAAc;CAC7E,GAAG,CAAC,aAAa,CAAC;CAElB,IAAI,CAAC,KACH,OAAO;CAET,OAAO,IAAI;AACb;;;;;;AAOA,SAAgB,YAAoB;CAElC,OADY,WAAW,WACd,CAAC,EAAE,UAAU;AACxB"}

package/dist/default/i18n/create-i18n.js

@@ -1,4 +1,3 @@
-"use client";
 import { I18nContext, LocaleRootContext, useLocale, useTranslator } from "./context.js";
 import { getProviderRootProps } from "./get-provider-root-props.js";
 import { useAmbientLang } from "./use-ambient-lang.js";

package/dist/default/i18n/create-i18n.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-i18n.js","names":["defaultLoader"],"sources":["../../../src/i18n/create-i18n.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createTranslator,\n  loadLocale as defaultLoader,\n  type FlatTranslations,\n  type Locale,\n  type Translations,\n} from '@videojs/core/i18n';\nimport { effectiveLocale } from '@videojs/utils/dom';\nimport { type Context, type ReactNode, type RefObject, useContext, useMemo } from 'react';\n\nimport { I18nContext, type I18nContextValue, LocaleRootContext, useLocale, useTranslator } from './context';\nimport { getProviderRootProps, type I18nProviderRootProps } from './get-provider-root-props';\nimport { useAmbientLang } from './use-ambient-lang';\nimport { useLangRootElement } from './use-lang-root-element';\nimport { useLazyTranslations } from './use-lazy-translations';\nimport { useLocaleRootNotifications } from './use-locale-root-notifications';\nimport { useMergedTranslations } from './use-merged-translations';\n\nexport interface CreateI18nOptions {\n  /** Override lazy loading of shipped locale packs (tests or custom loaders). */\n  loader?: (tag: string) => Promise<Partial<FlatTranslations> | undefined>;\n}\n\nexport interface I18nProviderProps {\n  /**\n   * Forces the active locale. Omit to inherit the nearest non-empty `lang` by walking DOM\n   * ancestors from {@link langRootRef} when set, otherwise from `document.documentElement`\n   * (typically `<html lang>`). Updates when any `lang` attribute changes anywhere under `<html>`,\n   * or when subtree moves alter which ancestor supplies `lang`. For SSR, pass `locale` explicitly.\n   */\n  locale?: Locale;\n  /**\n   * Element whose ancestor chain is searched for a non-empty `lang` when {@link locale} is\n   * omitted—for example a ref to your player shell `HTMLElement`.\n   */\n  langRootRef?: RefObject<Element | null>;\n  /**\n   * Per-locale string overrides merged on top of the global registry and any lazy built-in\n   * packs for {@link locale}. Applies to translated\n   * `aria-label` values and tooltip copy for skin controls wired through `useTranslator`.\n   *\n   * @example\n   * ```tsx\n   * <I18nProvider locale=\"ja\" translations={{ buttons: { play: '再生', pause: '一時停止' } }}>\n   *   <VideoSkin />\n   * </I18nProvider>\n   * ```\n   */\n  translations?: Partial<Translations>;\n  children: ReactNode;\n  /** Fires when the resolved locale changes (caption selection hooks may use this later). */\n  onActiveLocaleChange?: (locale: Locale) => void;\n}\n\nexport type { I18nContextValue } from './context';\n\nexport interface CreateI18nResult {\n  I18nContext: Context<I18nContextValue | null>;\n  I18nProvider: (props: I18nProviderProps) => ReactNode;\n  useTranslator: typeof useTranslator;\n  useLocale: typeof useLocale;\n}\n\n/**\n * Creates an i18n provider and hooks for the shared React i18n context.\n *\n * @param options - Optional hooks such as custom built-in locale loading.\n * @public\n */\nexport function createI18n(options?: CreateI18nOptions): CreateI18nResult {\n  const loader = options?.loader ?? defaultLoader;\n\n  function I18nProviderRoot({\n    locale: localeProp,\n    langRootRef,\n    parentLocale,\n    localeFromProp = localeProp !== undefined,\n    translations: translationsProp,\n    children,\n    onActiveLocaleChange,\n    parentAddLocaleRoot,\n  }: I18nProviderRootProps): ReactNode {\n    const langRootElement = useLangRootElement(langRootRef, parentAddLocaleRoot);\n    const ambientLang = useAmbientLang(langRootRef !== undefined, langRootElement);\n    const resolvedLocale = useMemo(\n      () => effectiveLocale<Locale>(localeProp, ambientLang ?? parentLocale),\n      [localeProp, ambientLang, parentLocale]\n    );\n\n    const addLocaleRoot = useLocaleRootNotifications(resolvedLocale, onActiveLocaleChange);\n    const lazyLayer = useLazyTranslations(resolvedLocale, loader);\n    const translations = useMergedTranslations(resolvedLocale, lazyLayer, translationsProp);\n\n    const translator = useMemo(() => createTranslator(translations, resolvedLocale), [translations, resolvedLocale]);\n\n    const value = useMemo<I18nContextValue>(\n      () => ({\n        translator,\n        locale: resolvedLocale,\n        localeFromProp,\n        ...(translationsProp !== undefined ? { translations: translationsProp } : {}),\n        ...(onActiveLocaleChange !== undefined ? { onActiveLocaleChange } : {}),\n      }),\n      [translator, resolvedLocale, localeFromProp, translationsProp, onActiveLocaleChange]\n    );\n\n    return (\n      <LocaleRootContext.Provider value={addLocaleRoot}>\n        <I18nContext.Provider value={value}>{children}</I18nContext.Provider>\n      </LocaleRootContext.Provider>\n    );\n  }\n\n  function I18nProvider(props: I18nProviderProps): ReactNode {\n    const parent = useContext(I18nContext);\n    const parentAddLocaleRoot = useContext(LocaleRootContext);\n\n    const rootProps = getProviderRootProps(props, parent, parentAddLocaleRoot);\n    if (!rootProps) return props.children;\n\n    return <I18nProviderRoot {...rootProps} />;\n  }\n\n  return { I18nContext, I18nProvider, useTranslator, useLocale };\n}\n\nconst defaultI18n = createI18n();\n\n/**\n * Resolves locale and supplies a typed translator to descendants. Mount this explicitly for\n * translated controls, forced locales, SSR copy, or locale-aware player roots.\n *\n * @public\n */\nexport const I18nProvider = defaultI18n.I18nProvider;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAuEA,SAAgB,WAAW,SAA+C;CACxE,MAAM,SAAS,SAAS,UAAUA;CAElC,SAAS,iBAAiB,EACxB,QAAQ,YACR,aACA,cACA,iBAAiB,eAAe,KAAA,GAChC,cAAc,kBACd,UACA,sBACA,uBACmC;EACnC,MAAM,kBAAkB,mBAAmB,aAAa,mBAAmB;EAC3E,MAAM,cAAc,eAAe,gBAAgB,KAAA,GAAW,eAAe;EAC7E,MAAM,iBAAiB,cACf,gBAAwB,YAAY,eAAe,YAAY,GACrE;GAAC;GAAY;GAAa;EAAY,CACxC;EAEA,MAAM,gBAAgB,2BAA2B,gBAAgB,oBAAoB;EAErF,MAAM,eAAe,sBAAsB,gBADzB,oBAAoB,gBAAgB,MACa,GAAG,gBAAgB;EAEtF,MAAM,aAAa,cAAc,iBAAiB,cAAc,cAAc,GAAG,CAAC,cAAc,cAAc,CAAC;EAE/G,MAAM,QAAQ,eACL;GACL;GACA,QAAQ;GACR;GACA,GAAI,qBAAqB,KAAA,IAAY,EAAE,cAAc,iBAAiB,IAAI,CAAC;GAC3E,GAAI,yBAAyB,KAAA,IAAY,EAAE,qBAAqB,IAAI,CAAC;EACvE,IACA;GAAC;GAAY;GAAgB;GAAgB;GAAkB;EAAoB,CACrF;EAEA,OACE,oBAAC,kBAAkB,UAAnB;GAA4B,OAAO;GACjC,UAAA,oBAAC,YAAY,UAAb;IAA6B;IAAQ;GAA+B,CAAA;EAC1C,CAAA;CAEhC;CAEA,SAAS,aAAa,OAAqC;EAIzD,MAAM,YAAY,qBAAqB,OAHxB,WAAW,WAGyB,GAFvB,WAAW,iBAEiC,CAAC;EACzE,IAAI,CAAC,WAAW,OAAO,MAAM;EAE7B,OAAO,oBAAC,kBAAD,EAAkB,GAAI,UAAY,CAAA;CAC3C;CAEA,OAAO;EAAE;EAAa;EAAc;EAAe;CAAU;AAC/D;;;;;;;AAUA,MAAa,eARO,WAQQ,CAAA,CAAY"}
+{"version":3,"file":"create-i18n.js","names":["defaultLoader"],"sources":["../../../src/i18n/create-i18n.tsx"],"sourcesContent":["import {\n  createTranslator,\n  loadLocale as defaultLoader,\n  type FlatTranslations,\n  type Locale,\n  type Translations,\n} from '@videojs/core/i18n';\nimport { effectiveLocale } from '@videojs/utils/dom';\nimport { type Context, type ReactNode, type RefObject, useContext, useMemo } from 'react';\n\nimport { I18nContext, type I18nContextValue, LocaleRootContext, useLocale, useTranslator } from './context';\nimport { getProviderRootProps, type I18nProviderRootProps } from './get-provider-root-props';\nimport { useAmbientLang } from './use-ambient-lang';\nimport { useLangRootElement } from './use-lang-root-element';\nimport { useLazyTranslations } from './use-lazy-translations';\nimport { useLocaleRootNotifications } from './use-locale-root-notifications';\nimport { useMergedTranslations } from './use-merged-translations';\n\nexport interface CreateI18nOptions {\n  /** Override lazy loading of shipped locale packs (tests or custom loaders). */\n  loader?: (tag: string) => Promise<Partial<FlatTranslations> | undefined>;\n}\n\nexport interface I18nProviderProps {\n  /**\n   * Forces the active locale. Omit to inherit the nearest non-empty `lang` by walking DOM\n   * ancestors from {@link langRootRef} when set, otherwise from `document.documentElement`\n   * (typically `<html lang>`). Updates when any `lang` attribute changes anywhere under `<html>`,\n   * or when subtree moves alter which ancestor supplies `lang`. For SSR, pass `locale` explicitly.\n   */\n  locale?: Locale;\n  /**\n   * Element whose ancestor chain is searched for a non-empty `lang` when {@link locale} is\n   * omitted—for example a ref to your player shell `HTMLElement`.\n   */\n  langRootRef?: RefObject<Element | null>;\n  /**\n   * Per-locale string overrides merged on top of the global registry and any lazy built-in\n   * packs for {@link locale}. Applies to translated\n   * `aria-label` values and tooltip copy for skin controls wired through `useTranslator`.\n   *\n   * @example\n   * ```tsx\n   * <I18nProvider locale=\"ja\" translations={{ buttons: { play: '再生', pause: '一時停止' } }}>\n   *   <VideoSkin />\n   * </I18nProvider>\n   * ```\n   */\n  translations?: Partial<Translations>;\n  children: ReactNode;\n  /** Fires when the resolved locale changes (caption selection hooks may use this later). */\n  onActiveLocaleChange?: (locale: Locale) => void;\n}\n\nexport type { I18nContextValue } from './context';\n\nexport interface CreateI18nResult {\n  I18nContext: Context<I18nContextValue | null>;\n  I18nProvider: (props: I18nProviderProps) => ReactNode;\n  useTranslator: typeof useTranslator;\n  useLocale: typeof useLocale;\n}\n\n/**\n * Creates an i18n provider and hooks for the shared React i18n context.\n *\n * @param options - Optional hooks such as custom built-in locale loading.\n * @public\n */\nexport function createI18n(options?: CreateI18nOptions): CreateI18nResult {\n  const loader = options?.loader ?? defaultLoader;\n\n  function I18nProviderRoot({\n    locale: localeProp,\n    langRootRef,\n    parentLocale,\n    localeFromProp = localeProp !== undefined,\n    translations: translationsProp,\n    children,\n    onActiveLocaleChange,\n    parentAddLocaleRoot,\n  }: I18nProviderRootProps): ReactNode {\n    const langRootElement = useLangRootElement(langRootRef, parentAddLocaleRoot);\n    const ambientLang = useAmbientLang(langRootRef !== undefined, langRootElement);\n    const resolvedLocale = useMemo(\n      () => effectiveLocale<Locale>(localeProp, ambientLang ?? parentLocale),\n      [localeProp, ambientLang, parentLocale]\n    );\n\n    const addLocaleRoot = useLocaleRootNotifications(resolvedLocale, onActiveLocaleChange);\n    const lazyLayer = useLazyTranslations(resolvedLocale, loader);\n    const translations = useMergedTranslations(resolvedLocale, lazyLayer, translationsProp);\n\n    const translator = useMemo(() => createTranslator(translations, resolvedLocale), [translations, resolvedLocale]);\n\n    const value = useMemo<I18nContextValue>(\n      () => ({\n        translator,\n        locale: resolvedLocale,\n        localeFromProp,\n        ...(translationsProp !== undefined ? { translations: translationsProp } : {}),\n        ...(onActiveLocaleChange !== undefined ? { onActiveLocaleChange } : {}),\n      }),\n      [translator, resolvedLocale, localeFromProp, translationsProp, onActiveLocaleChange]\n    );\n\n    return (\n      <LocaleRootContext.Provider value={addLocaleRoot}>\n        <I18nContext.Provider value={value}>{children}</I18nContext.Provider>\n      </LocaleRootContext.Provider>\n    );\n  }\n\n  function I18nProvider(props: I18nProviderProps): ReactNode {\n    const parent = useContext(I18nContext);\n    const parentAddLocaleRoot = useContext(LocaleRootContext);\n\n    const rootProps = getProviderRootProps(props, parent, parentAddLocaleRoot);\n    if (!rootProps) return props.children;\n\n    return <I18nProviderRoot {...rootProps} />;\n  }\n\n  return { I18nContext, I18nProvider, useTranslator, useLocale };\n}\n\nconst defaultI18n = createI18n();\n\n/**\n * Resolves locale and supplies a typed translator to descendants. Mount this explicitly for\n * translated controls, forced locales, SSR copy, or locale-aware player roots.\n *\n * @public\n */\nexport const I18nProvider = defaultI18n.I18nProvider;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAqEA,SAAgB,WAAW,SAA+C;CACxE,MAAM,SAAS,SAAS,UAAUA;CAElC,SAAS,iBAAiB,EACxB,QAAQ,YACR,aACA,cACA,iBAAiB,eAAe,KAAA,GAChC,cAAc,kBACd,UACA,sBACA,uBACmC;EACnC,MAAM,kBAAkB,mBAAmB,aAAa,mBAAmB;EAC3E,MAAM,cAAc,eAAe,gBAAgB,KAAA,GAAW,eAAe;EAC7E,MAAM,iBAAiB,cACf,gBAAwB,YAAY,eAAe,YAAY,GACrE;GAAC;GAAY;GAAa;EAAY,CACxC;EAEA,MAAM,gBAAgB,2BAA2B,gBAAgB,oBAAoB;EAErF,MAAM,eAAe,sBAAsB,gBADzB,oBAAoB,gBAAgB,MACa,GAAG,gBAAgB;EAEtF,MAAM,aAAa,cAAc,iBAAiB,cAAc,cAAc,GAAG,CAAC,cAAc,cAAc,CAAC;EAE/G,MAAM,QAAQ,eACL;GACL;GACA,QAAQ;GACR;GACA,GAAI,qBAAqB,KAAA,IAAY,EAAE,cAAc,iBAAiB,IAAI,CAAC;GAC3E,GAAI,yBAAyB,KAAA,IAAY,EAAE,qBAAqB,IAAI,CAAC;EACvE,IACA;GAAC;GAAY;GAAgB;GAAgB;GAAkB;EAAoB,CACrF;EAEA,OACE,oBAAC,kBAAkB,UAAnB;GAA4B,OAAO;GACjC,UAAA,oBAAC,YAAY,UAAb;IAA6B;IAAQ;GAA+B,CAAA;EAC1C,CAAA;CAEhC;CAEA,SAAS,aAAa,OAAqC;EAIzD,MAAM,YAAY,qBAAqB,OAHxB,WAAW,WAGyB,GAFvB,WAAW,iBAEiC,CAAC;EACzE,IAAI,CAAC,WAAW,OAAO,MAAM;EAE7B,OAAO,oBAAC,kBAAD,EAAkB,GAAI,UAAY,CAAA;CAC3C;CAEA,OAAO;EAAE;EAAa;EAAc;EAAe;CAAU;AAC/D;;;;;;;AAUA,MAAa,eARO,WAQQ,CAAA,CAAY"}

package/dist/default/i18n/locales/id/register.js

@@ -0,0 +1,8 @@
+import { registerI18n } from "@videojs/core/i18n";
+import translations from "@videojs/core/i18n/locales/id";
+//#region src/i18n/locales/id/register.ts
+/** Generated by packages/core/scripts/generate-i18n-locales.ts — do not edit. */
+registerI18n("id", translations);
+//#endregion
+
+//# sourceMappingURL=register.js.map

package/dist/default/i18n/locales/id/register.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"register.js","names":[],"sources":["../../../../../src/i18n/locales/id/register.ts"],"sourcesContent":["/** Generated by packages/core/scripts/generate-i18n-locales.ts — do not edit. */\nimport { registerI18n } from '@videojs/core/i18n';\nimport translations from '@videojs/core/i18n/locales/id';\n\nregisterI18n('id', translations);\n"],"mappings":";;;;AAIA,aAAa,MAAM,YAAY"}

package/dist/default/i18n/locales/id.js

@@ -0,0 +1,2 @@
+import id_default from "@videojs/core/i18n/locales/id";
+export { id_default as default };

package/dist/default/i18n/locales/lt/register.js

@@ -0,0 +1,8 @@
+import { registerI18n } from "@videojs/core/i18n";
+import translations from "@videojs/core/i18n/locales/lt";
+//#region src/i18n/locales/lt/register.ts
+/** Generated by packages/core/scripts/generate-i18n-locales.ts — do not edit. */
+registerI18n("lt", translations);
+//#endregion
+
+//# sourceMappingURL=register.js.map

package/dist/default/i18n/locales/lt/register.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"register.js","names":[],"sources":["../../../../../src/i18n/locales/lt/register.ts"],"sourcesContent":["/** Generated by packages/core/scripts/generate-i18n-locales.ts — do not edit. */\nimport { registerI18n } from '@videojs/core/i18n';\nimport translations from '@videojs/core/i18n/locales/lt';\n\nregisterI18n('lt', translations);\n"],"mappings":";;;;AAIA,aAAa,MAAM,YAAY"}

package/dist/default/i18n/locales/lt.js

@@ -0,0 +1,2 @@
+import lt_default from "@videojs/core/i18n/locales/lt";
+export { lt_default as default };

package/dist/default/icons/dist/react/default/airplay-enter.js.map

@@ -1 +1 @@
-{"version":3,"file":"airplay-enter.js","names":[],"sources":["../../../../../../../icons/dist/react/default/airplay-enter.js"],"sourcesContent":["import { jsx, jsxs } from \"react/jsx-runtime\";\nconst AirPlayEnterIcon = (props) => /* @__PURE__ */ jsxs(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: 18, height: 18, fill: \"currentColor\", \"aria-hidden\": \"true\", viewBox: \"0 0 18 18\", ...props, children: [\n  /* @__PURE__ */ jsx(\"path\", { d: \"M14.5 2A3.5 3.5 0 0 1 18 5.5v5l-.005.18a3.5 3.5 0 0 1-3.027 3.288L13 12h1.5a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 14.5 4h-11A1.5 1.5 0 0 0 2 5.5v5A1.5 1.5 0 0 0 3.5 12H5l-1.968 1.967A3.5 3.5 0 0 1 0 10.5v-5A3.5 3.5 0 0 1 3.5 2z\" }),\n  /* @__PURE__ */ jsx(\"path\", { d: \"M8.631 10.902a.5.5 0 0 1 .738 0l4.363 4.76a.5.5 0 0 1-.369.838H4.637a.5.5 0 0 1-.369-.838z\" })\n] });\nexport default AirPlayEnterIcon;\n"],"mappings":";;AACA,MAAM,oBAAoB,UAA0B,qBAAK,OAAO;CAAE,OAAO;CAA8B,OAAO;CAAI,QAAQ;CAAI,MAAM;CAAgB,eAAe;CAAQ,SAAS;CAAa,GAAG;CAAO,UAAU,CACnM,oBAAI,QAAQ,EAAE,GAAG,uOAAuO,CAAC,GACzP,oBAAI,QAAQ,EAAE,GAAG,6FAA6F,CAAC,CACjI;AAAE,CAAC"}
+{"version":3,"file":"airplay-enter.js","names":[],"sources":["../../../../../../../icons/dist/react/default/airplay-enter.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst AirPlayEnterIcon = (props) => /* @__PURE__ */ _jsxs(\"svg\", {\n\txmlns: \"http://www.w3.org/2000/svg\",\n\twidth: 18,\n\theight: 18,\n\tfill: \"currentColor\",\n\t\"aria-hidden\": \"true\",\n\tviewBox: \"0 0 18 18\",\n\t...props,\n\tchildren: [/* @__PURE__ */ _jsx(\"path\", { d: \"M14.5 2A3.5 3.5 0 0 1 18 5.5v5l-.005.18a3.5 3.5 0 0 1-3.027 3.288L13 12h1.5a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 14.5 4h-11A1.5 1.5 0 0 0 2 5.5v5A1.5 1.5 0 0 0 3.5 12H5l-1.968 1.967A3.5 3.5 0 0 1 0 10.5v-5A3.5 3.5 0 0 1 3.5 2z\" }), /* @__PURE__ */ _jsx(\"path\", { d: \"M8.631 10.902a.5.5 0 0 1 .738 0l4.363 4.76a.5.5 0 0 1-.369.838H4.637a.5.5 0 0 1-.369-.838z\" })]\n});\nexport default AirPlayEnterIcon;\n"],"mappings":";;AACA,MAAM,oBAAoB,UAA0B,qBAAM,OAAO;CAChE,OAAO;CACP,OAAO;CACP,QAAQ;CACR,MAAM;CACN,eAAe;CACf,SAAS;CACT,GAAG;CACH,UAAU,CAAiB,oBAAK,QAAQ,EAAE,GAAG,uOAAuO,CAAC,GAAmB,oBAAK,QAAQ,EAAE,GAAG,6FAA6F,CAAC,CAAC;AAC1Z,CAAC"}

package/dist/default/icons/dist/react/default/airplay-exit.js

@@ -9,9 +9,8 @@ const AirPlayExitIcon = (props) => /* @__PURE__ */ jsxs("svg", {
 	viewBox: "0 0 18 18",
 	...props,
 	children: [
-		/* @__PURE__ */ jsx("style", { children: "@keyframes media-icon--airplay__triangle{0%{translate:0 0}to{translate:0-2px}}@keyframes media-icon--airplay__fill{0%{fill-opacity:0}to{fill-opacity:.2}}" }),
+		/* @__PURE__ */ jsx("style", { children: "@keyframes media-icon--airplay__triangle{0%{translate:0 0}to{translate:0-2px}}@keyframes media-icon--airplay__fill{0%{opacity:0}to{opacity:.2}}@media (prefers-reduced-motion:reduce){:root{--media-icon--airplay__fill-animation:none;--media-icon--airplay__triangle-animation:none}}" }),
 		/* @__PURE__ */ jsx("path", {
-			fillOpacity: .2,
 			d: "M14.5 2A3.5 3.5 0 0 1 18 5.5v5a3.5 3.5 0 0 1-3.032 3.468L9.354 8.354a.5.5 0 0 0-.708 0l-5.615 5.614A3.5 3.5 0 0 1 0 10.5v-5A3.5 3.5 0 0 1 3.5 2z",
 			style: { animation: "var(--media-icon--airplay__fill-animation, media-icon--airplay__fill 1s ease-in-out infinite alternate)" }
 		}),