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/internationalize-the-player.md ADDED Viewed

@@ -0,0 +1,358 @@
+# Internationalize the player
+Translate player labels and announcements: shipped locale packs, custom translations, runtime switching, and server rendering.
+Translate every player label, tooltip, and screen-reader announcement. The player ships translations for more than 50 locales and loads them on demand.
+## Recommended approach
+Wrap the player in the i18n provider. It resolves the locale from your page’s `lang` attribute (or an explicit override), lazy-loads the matching locale pack, and every component label follows.
+tsx
+```
+import { Container } from '@videojs/react';
+import { I18nProvider } from '@videojs/react/i18n';
+import { Video, VideoPlayer } from '@videojs/react/video';
+export default function App() {
+  return (
+    <I18nProvider locale="ja">
+      <VideoPlayer>
+        <Container>
+          <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" muted playsInline />
+        </Container>
+      </VideoPlayer>
+    </I18nProvider>
+  );
+}
+```
+Omit `locale` to follow the nearest ancestor `lang` attribute (usually `<html lang>`).
+Pick a language and every label follows — no remount:
+LanguageEnglishArabicAzerbaijaniBosnianBulgarianBanglaCatalanCzechWelshDanishGermanGreekSpanishEstonianBasquePersianFinnishFrenchScottish GaelicGalicianHebrewHindiCroatianHungarianIndonesianItalianJapaneseKoreanLithuanianLatvianMarathiNorwegian BokmålDutchNorwegian NynorskNepaliOccitanPolishBrazilian PortugueseEuropean PortugueseRomanianRussianSlovakSlovenianSerbianSwedishTeluguThaiTurkishUkrainianVietnameseChinese (China)Chinese (Taiwan)
+0:00
+0:00
+0:00
+App.tsx
+App.css
+```
+import { createPlayer } from '@videojs/react';
+import { I18nProvider, LOCALES } from '@videojs/react/i18n';
+import { Video, VideoSkin, videoFeatures } from '@videojs/react/video';
+import { useState } from 'react';
+import '@videojs/react/video/skin.css';
+import './Language.css';
+const { Player } = createPlayer({ features: videoFeatures });
+const locales = ['en', ...LOCALES] as const;
+type Locale = (typeof locales)[number];
+const languageNames = new Intl.DisplayNames(['en'], { type: 'language' });
+export default function Language() {
+  const [locale, setLocale] = useState<Locale>('en');
+  return (
+    <div className="react-i18n-language">
+      <label>
+        Language
+        <select value={locale} onChange={(event) => setLocale(event.currentTarget.value as Locale)}>
+          {locales.map((value) => (
+            <option key={value} value={value}>
+              {languageNames.of(value) ?? value}
+            </option>
+          ))}
+        </select>
+      </label>
+      <Player>
+        <I18nProvider locale={locale}>
+          <VideoSkin className="react-i18n-language__player">
+            <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" muted playsInline />
+          </VideoSkin>
+        </I18nProvider>
+      </Player>
+    </div>
+  );
+}
+```
+```
+.react-i18n-language {
+  display: grid;
+  gap: 16px;
+  padding: 16px;
+}
+.react-i18n-language label {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.react-i18n-language select {
+  padding: 4px 8px;
+}
+.react-i18n-language__player {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+}
+```
+## How it works
+*   Component labels are text descriptors — a translation key plus its English default — so everything renders in English with no setup and switches language when a translator is present. Keys are stable: `buttons.play` stays `buttons.play` even if the English wording changes.
+*   The provider resolves the locale: explicit `locale` (React) or `lang` (HTML) first, then the nearest ancestor `lang` attribute, then `'en'`. It re-resolves when the page’s `lang` changes.
+*   The provider lazy-loads the pack for the resolved locale automatically and keeps it in a layer above the shared registry ([`registerI18n`](../reference/register-i18n.md)). Translations merge along a fallback chain that follows the [BCP 47](https://www.rfc-editor.org/rfc/rfc5646) parent tags — `es-MX` checks `es`, then `en` — so a regional pack only has to carry the text that differs from its parent.
+*   Each piece of text resolves from the first source that has it:
+    1.  Overrides supplied to the current player (React `translations` prop)
+    2.  Registered custom translations
+    3.  A built-in locale pack
+    4.  The component’s English fallback
+*   `registerI18n(locale, translations)` **merges**: each call adds or replaces keys for that locale without wiping prior registrations, and later registrations win for the same key. Register a locale before the provider resolves it — a pack the provider already lazy-loaded sits above the registry and hides registry entries for that locale. Overriding a handful of strings is the same call as registering a full locale.
+*   When no shipped pack matches the locale, the provider can fall back to the browser’s on-device Translation API to machine-translate the English catalogue, with placeholders preserved.
+Translate your own UI with the same machinery:
+tsx
+```
+import { useTranslator } from '@videojs/react/i18n';
+function StartButton() {
+  const t = useTranslator();
+  return <button type="button">{t('buttons.play', { default: 'Play' })}</button>;
+}
+```
+The `default` is the English text — English ships inside component descriptors, not as a pack, so a bare `t(key)` renders the key itself under `en`. The key selects the translation once a pack is active.
+## Availability and constraints
+*   English is built in; every other locale is a lazy-loaded pack. Server rendering needs an explicit `locale` (React) since there’s no DOM to resolve from.
+*   Locale tags are [BCP 47](https://www.rfc-editor.org/rfc/rfc5646) (`es`, `pt-BR`).
+*   Translation keys are namespaced strings (`buttons.play`, `errors.network`, `menu.quality`); the full list lives at [Translation keys](../reference/translation-phrases.md) and is typed, so typos in `registerI18n` objects fail in TypeScript. The translator itself accepts any string; a mistyped `t()` key falls back to its `default`.
+*   Some strings interpolate parameters; custom translations must keep the placeholders:
+ts
+```
+// ✅
+registerI18n('es', { seek: { forward: 'Adelantar {seconds} segundos' } });
+// ❌ The interpolated value is lost
+registerI18n('es', { seek: { forward: 'Adelantar' } });
+```
+*   The Browser Translation API fallback needs Chrome with `globalThis.Translator` and downloads an on-device model on first use. It’s best-effort; ship a real pack for languages you support officially.
+## Common variations
+### Override specific strings
+Pass `translations` on [`I18nProvider`](../reference/i18n-provider.md) to scope overrides to one subtree. This layer sits above the registry and lazy packs:
+tsx
+```
+<I18nProvider locale="ja" translations={{ buttons: { play: '再生', pause: '一時停止' } }}>
+  {/* player */}
+</I18nProvider>
+```
+Nested providers inherit the parent locale when you only pass `translations`. For global overrides, call `registerI18n` instead — it merges, so only the keys you pass change.
+### Register your own locale
+Registered packs are partial: missing keys fall back through the locale chain to a shipped pack or English.
+ts
+```
+import { registerI18n, type Translations } from '@videojs/react/i18n';
+const es = {
+  buttons: {
+    play: 'Reproducir',
+    pause: 'Pausa',
+    mute: 'Silenciar',
+    unmute: 'Activar sonido',
+  },
+} satisfies Partial<Translations>;
+registerI18n('es', es);
+```
+### Register a pack with the bundle
+Skip lazy loading by registering a shipped locale at startup with a side-effect import. First paint is synchronous in that language:
+ts
+```
+import '@videojs/react/i18n/locales/ja/register';
+```
+### Switch locale at runtime
+The simplest switch updates the document language and lets providers pick it up — no remount required:
+ts
+```
+document.documentElement.lang = 'fr';
+```
+Ambient switching only applies when `I18nProvider` has no explicit `locale`. To drive it from state:
+tsx
+```
+const [locale, setLocale] = useState<'en' | 'es' | 'fr'>('en');
+<I18nProvider locale={locale}>{/* player */}</I18nProvider>
+```
+Changing `locale` lazy-loads the pack, which can briefly show English. Preload the locales your picker offers:
+tsx
+```
+import '@videojs/react/i18n/locales/es/register';
+import '@videojs/react/i18n/locales/fr/register';
+```
+Or prefetch and register right before switching when you can’t register everything up front:
+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);
+}
+```
+### 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 `I18nProvider` has an explicit `locale`, 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`.
+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.
+### Replace a component’s visible text
+Translation overrides change built-in labels everywhere they appear. To replace only one component’s visible content, set its children — and use the translation machinery when that content should still follow the active locale:
+tsx
+```
+import { LiveButton } from '@videojs/react';
+<LiveButton>On air</LiveButton>
+```
+Authored children are literal; use `useTranslator` when custom children also need localization. For state-dependent text, render one element per state and show or hide them with the component’s `data-*` state attributes (the same pattern used for icons).
+The component still derives its accessible name from media state unless you also set its label API. Keep custom visible text consistent with that name.
+### Server rendering
+Render the document language on the server (`<html lang="es">`) and make translations available before first paint so labels match on server and client:
+Import the pack on the server and pass it to the provider — `translations` on first render skips the async lazy layer entirely:
+tsx
+```
+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 (
+    <I18nProvider locale={locale} translations={translations}>
+      {/* player */}
+    </I18nProvider>
+  );
+}
+```
+Pass `locale` explicitly on the server — there’s no DOM to resolve `lang` from, and an explicit value avoids hydration mismatches. With app routers, pass the tag your framework negotiates (for next-intl, `await getLocale()`); Video.js doesn’t replace framework i18n, it consumes the tag you give it.
+## Troubleshooting
+### Labels stay in English
+No provider is mounted, or the locale never resolved: check the `locale`/`lang` value and that it matches a shipped pack (regional tags fall back — `pt-BR` works; a bare unknown tag falls through to English).
+### Some strings are translated, others aren’t
+A partial override or partial pack: missing keys fall back through the locale chain to English. Fill in the missing keys with `registerI18n`.
+### Translations flash in after load or after switching
+The lazy pack loads after first paint (or after the switch). Register the pack with the bundle (the `/register` side-effect import), or prefetch and register before changing the locale.
+### Server-rendered labels don’t match the client
+The provider resolved different locales on server and client. Pass an explicit `locale` and first-render `translations` instead of relying on ambient `lang`.
+## Related components
+*   [I18nProvider](../reference/i18n-provider.md)
+*   [media-i18n](/docs/framework/html/reference/media-i18n)
+*   [media-text](/docs/framework/html/reference/media-text)
+## Related API
+*   [registerI18n](../reference/register-i18n.md)
+*   [Translation keys](../reference/translation-phrases.md)
+*   [useTranslator](../reference/use-translator.md)
+*   [useLocale](../reference/use-locale.md)
+*   [getI18nTranslations](../reference/get-i18n-translations.md)
+## Related guides
+*   [Show captions and subtitles](./show-captions-and-subtitles.md)
+*   [Accessibility](../concepts/accessibility.md)

package/docs/how-to/migrate-from-media-chrome.md CHANGED Viewed

@@ -2,7 +2,7 @@
 Map Media Chrome's controller, elements, and attributes onto Video.js v10, where most of the work is renaming and reshaping rather than rewriting
-Video.js v10’s HTML player uses the same `media-*` custom-element convention as Media Chrome, so most of the work is **renaming and reshaping**, not rewriting. This guide maps Media Chrome’s API to Video.js v10.
+Video.js v10’s HTML player uses the same `media-*` custom-element convention as Media Chrome, so most of the work is **renaming and reshaping**, not rewriting.
 Note
@@ -10,7 +10,7 @@ Scoped to apps that compose their own player from Media Chrome elements. If you
 ## Before you begin
-Install Video.js and pick a preset and skin (see [Installation](./installation.md)). The fastest path is to start from a [preset](../concepts/presets.md), then replace its controls with your migrated markup.
+Install Video.js and choose a [preset](../concepts/presets.md) (see [Installation](./installation.md)). Start with its ready-made skin if those controls fit your player. If you need to keep a custom control bar, build it from the individual Video.js UI components instead.
 bash
@@ -49,7 +49,13 @@ export function MyPlayer() {
     <VideoPlayer>
       <Container>
         <Video src="video.mp4" />
-        <PlayButton />
+        <PlayButton
+          render={(props, state) => (
+            <button {...props} className="play-button">
+              {state.paused ? <span className="play-icon">Play</span> : <span className="pause-icon">Pause</span>}
+            </button>
+          )}
+        />
       </Container>
     </VideoPlayer>
   );
@@ -67,19 +73,7 @@ import { videoFeatures } from '@videojs/react/video';
 const { Player } = createPlayer({ features: videoFeatures });
 ```
-Where Media Chrome asks you to restyle a shadow root, Video.js components take a `render` prop, so you supply the element and Video.js supplies the behavior and state:
-tsx
-```
-<PlayButton
-  render={(props, state) => (
-    <button {...props}>{state.paused ? 'Play' : 'Pause'}</button>
-  )}
-/>
-```
-Read player state with [`usePlayer`](../reference/use-player.md), [`useMedia`](../reference/use-media.md), and [`useStore`](../reference/use-store.md).
+Read player state with [`usePlayer`](../reference/use-player.md), [`useMedia`](../reference/use-media.md), and [`useStore`](../reference/use-store.md). Player hooks must run in a descendant component rendered inside `VideoPlayer` or the `Player` returned by `createPlayer`. A hook in the same component that returns the provider is still outside that provider.
 ## Map controller attributes
@@ -139,9 +133,9 @@ Set the signed seek amount per element.
 `defaultsubtitles`
-`media-captions-button` or player state
+`<track default>` for authored tracks
-Partial: captions can be toggled, but “on by default” isn’t a flag yet.
+Add `default` to an authored captions or subtitles track. Tracks discovered from a provider or manifest don’t have one generic player-level default flag.
 `defaultstreamtype`
@@ -159,7 +153,7 @@ Live-edge behavior lives in the playback engine, not a UI attribute.
 i18n translator
-Localization is configured through the [translator and locale registry](../concepts/i18n.md).
+Localization is configured through the [translator and locale registry](./internationalize-the-player.md).
 ### Hotkeys
@@ -274,16 +268,26 @@ inside `media-menu`
 Unchanged names: `media-play-button`, `media-mute-button`, `media-fullscreen-button`, `media-pip-button`, `media-airplay-button`, `media-cast-button`, `media-captions-button`, `media-playback-rate-button`, `media-tooltip`, and `media-thumbnail`.
-Sliders are compound in both, using `media-slider-track`, `media-slider-fill`, and `media-slider-thumb`.
+Caution
+Matching tag names do not mean matching appearance. Media Chrome buttons include default icons and styles. Individual Video.js buttons provide behavior, state, and an accessible name, but no visible content or finished styling. Add text, an SVG, or a `<media-icon>`, plus your own CSS. Without visible content, a button can work while showing nothing. Sliders also need their child elements and CSS. Use a ready-made skin when you want finished controls.
+Video.js sliders use `media-slider-track`, `media-slider-fill`, and `media-slider-thumb`. See [`media-time-slider`](../reference/time-slider.md) and [`media-volume-slider`](../reference/volume-slider.md) for copy-paste markup and CSS.
+React buttons do not include visible content either. Use a button’s `render` prop to add it, as shown in [Map the controller](#map-the-controller). Build sliders from parts such as `TimeSlider.Track`, `TimeSlider.Fill`, and `TimeSlider.Thumb`, then add your own CSS.
 These are PascalCase components rather than tags — `TimeSlider`, `VolumeSlider`, `BufferingIndicator`, `Poster`, `QualityRadioGroup` — and the compound parts are namespaced, so `media-slider-track` becomes `TimeSlider.Track`. See the [UI components](../concepts/ui-components.md) concept for the full set.
-`Poster` is the one rename that changes shape. It *is* the image rather than a wrapper around one, so `media-poster-image`’s attributes go straight on it:
+`Poster` is the one rename that changes shape. Put the poster URL on `VideoPlayer`; `Poster` renders the image and accepts image attributes such as `alt`, `srcSet`, and `sizes`:
 tsx
 ```
-<Poster src="/poster.jpg" alt="" />
+<VideoPlayer poster="/poster.jpg">
+  <Container>
+    <Poster alt="" />
+  </Container>
+</VideoPlayer>
 ```
 ## Rewrite your styles
@@ -295,27 +299,81 @@ css
 ```
 /* Media Chrome */
 media-play-button[mediapaused] .play-icon { display: inline; }
+```
-/* Video.js */
-media-play-button[data-paused] .play-icon { display: inline; }
+css
+```
+/* Video.js React: target the className on your rendered button */
+.play-button[data-paused] .play-icon { display: inline; }
 ```
 Continuous values use CSS custom properties: sliders expose `--media-slider-fill` and `--media-slider-pointer`.
+### Map theme variables by meaning
+Media Chrome and Video.js both use names beginning with `--media-`, but that shared prefix is a naming convention, not a compatibility layer. Keep a variable only when its documented meaning matches.
+Media Chrome theme variable
+Packaged Video.js skin
+Migration
+`--media-accent-color` or `--media-range-bar-color`
+`--media-accent-color`
+Closest match for slider fills and accented controls.
+`--media-primary-color`
+no direct equivalent
+Often colors every control icon in Media Chrome; Video.js’s accent variable has narrower semantics.
+`--media-secondary-color`
+no direct equivalent
+Author CSS or eject when you need this palette role.
+`--media-control-background`
+no direct equivalent
+Author CSS or eject.
+`--media-control-hover-background`
+no direct equivalent
+Author CSS or eject.
+`--media-range-track-height`
+no direct equivalent
+Author slider CSS or eject.
+The packaged Video.js skins expose `--media-accent-color`, `--media-accent-text-color`, `--media-border-radius`, and `--media-scale-unit` for broad customization. Do not assume another Media Chrome variable will work because its name starts with `--media-`.
 ## Themes become skins
 Media Chrome’s `<template>`\-based themes (`media-theme`) become Video.js [skins](../concepts/skins.md) and [presets](../concepts/presets.md). Start from a preset, then eject and customize with [Customize skins](./customize-skins.md), rather than authoring a template.
+React skins do not use Shadow DOM. Use `render` props when you build individual controls. Eject a ready-made skin when you need to change its control set or layout.
 ## Known gaps
 These Media Chrome features have no direct equivalent yet. Several can be approximated; see [Workarounds](#workarounds).
 *   No configurable `autohide` delay or disable switch (`autohide="-1"`), and no `autohideovercontrols` ([#1728](https://github.com/videojs/v10/issues/1728))
 *   No `defaultduration` placeholder before the media loads ([#1729](https://github.com/videojs/v10/issues/1729))
-*   No preference persistence, so Media Chrome’s `novolumepref`, `nomutedpref`, and `nosubtitleslangpref` opt-outs have nothing to opt out of. Persistence is out of scope for GA; tracked at [#944](https://github.com/videojs/v10/issues/944), with subtitle language at [#1423](https://github.com/videojs/v10/issues/1423)
+*   Volume and muted preferences are not persisted across sessions, so Media Chrome’s `novolumepref` and `nomutedpref` opt-outs have nothing to opt out of ([#944](https://github.com/videojs/v10/issues/944)). Video.js can choose an initial subtitle track from the locale, but it does not yet remember the viewer’s later language choice ([#1786](https://github.com/videojs/v10/issues/1786)).
 *   No `breakpoints` or container-breakpoint attributes; use CSS container queries instead
 *   No `seektoliveoffset` or `noautoseektolive` controls, and live-edge offset and tolerance aren’t configurable ([#1730](https://github.com/videojs/v10/issues/1730))
-*   Chapters render, but there’s no active-chapter state, no `chapterchange` event, and no menu to jump between them ([#1873](https://github.com/videojs/v10/issues/1873))
+*   Chapters render and each time-slider segment reflects `data-active`, but there’s no player-level active chapter value, `chapterchange` event, or menu to jump between them ([#1873](https://github.com/videojs/v10/issues/1873))
 *   Cue points are not supported ([#1442](https://github.com/videojs/v10/issues/1442))
 Chapters themselves do work. Add a default `<track kind="chapters">` and the packaged skins segment the time slider and show the chapter title on hover, via `media-time-slider-chapters` and `media-time-slider-chapter-title`.
@@ -324,40 +382,7 @@ Chapters themselves do work. Add a default `<track kind="chapters">` and the pac
 ### Disable autohide (`autohide="-1"`)
-The skin hides controls by removing `data-visible` from the root `<media-controls>`. Which element then fades depends on the player’s width: below `32rem` it’s the `--primary` and `--secondary` groups inside the root, and at or above `32rem` it’s the root itself. Override both, plus the hidden cursor, in your player CSS:
-css
-```
-.media-default-skin--video .media-controls--root:not([data-visible]) {
-  opacity: 1;
-  scale: 1;
-  filter: none;
-  pointer-events: auto;
-  .media-controls--primary,
-  .media-controls--secondary {
-    opacity: 1;
-    scale: 1;
-    filter: none;
-    pointer-events: auto;
-  }
-}
-.media-default-skin--video:has(.media-controls--root:not([data-visible])) {
-  cursor: auto;
-}
-```
-Two things make this fragile. It matches the skin’s own selectors exactly, so it only wins on source order — load your stylesheet after the skin’s. And the class names are the default skin’s; the minimal skin fades `.media-minimal-skin--video .media-controls` instead, with no groups to reach.
-To change the *delay* rather than disable it, note that the idle timer is a constant inside `controlsFeature`. Fork that feature, swap it into a custom feature list, and pass that list to `createPlayer`:
-ts
-```
-const features = videoFeatures.map((f) => (f.name === 'controls' ? myControlsFeature : f));
-```
+Packaged skins don’t expose an autohide switch. Eject the closest skin and remove its hidden-control styles. That’s safer than overriding internal selectors in a skin you don’t own.
 ### Breakpoints
@@ -383,19 +408,25 @@ tsx
 ```
 import { selectVolume, usePlayer } from '@videojs/react';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 function PersistVolume() {
   const volume = usePlayer(selectVolume);
+  const [readyToSave, setReadyToSave] = useState(false);
   useEffect(() => {
     const saved = localStorage.getItem('vjs:volume');
-    if (saved) volume.setVolume(Number(saved));
+    if (saved !== null) {
+      const savedVolume = Number(saved);
+      if (Number.isFinite(savedVolume)) volume.setVolume(savedVolume);
+    }
+    setReadyToSave(true);
   }, []);
   useEffect(() => {
+    if (!readyToSave) return;
     localStorage.setItem('vjs:volume', String(volume.volume));
-  }, [volume.volume]);
+  }, [readyToSave, volume.volume]);
   return null;
 }