@theoplayer/web-ui 2.1.3 → 2.3.0

package/dist/THEOplayerUI.d.ts

@@ -1,9 +1,9 @@
 /*!
- * THEOplayer Open Video UI for Web (v2.1.3)
+ * THEOplayer Open Video UI for Web (v2.3.0)
  * License: MIT
  */
 import * as lit from 'lit';
-import { LitElement, HTMLTemplateResult, TemplateResult, PropertyValues } from 'lit';
+import { LitElement, HTMLTemplateResult, PropertyValues, TemplateResult } from 'lit';
 import { ChromelessPlayer, MediaTrack, TextTrack, TextTracksList, EdgeStyle, VideoQuality, THEOplayerError, VendorCast, CastState, UIPlayerConfiguration, SourceDescription } from 'theoplayer/chromeless';
 import * as lit_html from 'lit-html';
 import { Ref } from 'lit/directives/ref.js';
@@ -79,6 +79,7 @@ declare class Button extends LitElement {
      */
     get disabled(): boolean;
     set disabled(value: boolean);
+    accessor ariaLabel: string | null;
     private _enable;
     private _disable;
     private readonly _onClick;
@@ -157,6 +158,7 @@ declare class PlayButton extends Button {
      * This reflects `player.ended`.
      */
     accessor ended: boolean;
+    accessor lang: string;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
     private readonly _onPlay;
@@ -165,7 +167,7 @@ declare class PlayButton extends Button {
     private _updateEnded;
     private readonly _updateDisabled;
     protected handleClick(): void;
-    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    willUpdate(changedProperties: PropertyValues): void;
     private _updateAriaLabel;
     protected render(): HTMLTemplateResult;
 }
@@ -189,11 +191,12 @@ declare class MuteButton extends Button {
      * Can be "off" (muted), "low" (volume < 50%) or "high" (volume >= 50%).
      */
     accessor volumeLevel: VolumeLevel;
+    accessor lang: string;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
     private readonly _updateFromPlayer;
     protected handleClick(): void;
-    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    willUpdate(changedProperties: PropertyValues): void;
     private _updateAriaLabel;
     protected render(): HTMLTemplateResult;
 }
@@ -211,15 +214,15 @@ declare global {
 declare class SeekButton extends Button {
     static styles: lit.CSSResult[];
     private _player;
-    connectedCallback(): void;
     /**
      * The offset (in seconds) by which to seek forward (if positive) or backward (if negative).
      */
     accessor seekOffset: number;
+    accessor lang: string;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
     protected handleClick(): void;
-    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    willUpdate(changedProperties: PropertyValues): void;
     private _updateAriaLabel;
     protected render(): lit_html.TemplateResult<1>;
 }
@@ -256,6 +259,7 @@ declare class TimeDisplay extends LitElement {
      * The stream type, either "vod", "live" or "dvr".
      */
     accessor streamType: StreamType;
+    accessor lang: string;
     private accessor _currentTime;
     private accessor _duration;
     private accessor _endTime;
@@ -563,8 +567,10 @@ declare global {
  * This button must be placed inside a {@link Menu | `<theoplayer-menu>`}.
  */
 declare class CloseMenuButton extends Button {
-    connectedCallback(): void;
     protected handleClick(): void;
+    accessor lang: string;
+    willUpdate(changedProperties: PropertyValues): void;
+    private _updateAriaLabel;
     protected render(): HTMLTemplateResult;
 }
 declare global {
@@ -578,8 +584,8 @@ declare global {
  * and switches to that track when clicked.
  */
 declare class MediaTrackRadioButton extends RadioButton {
-    private _track;
-    private accessor _trackLabel;
+    private accessor _track;
+    accessor lang: string;
     /**
      * The media track that is controlled by this radio button.
      */
@@ -620,6 +626,7 @@ declare class TrackRadioGroup extends LitElement {
      * Can only be used with the `"subtitles"` track type.
      */
     accessor showOffButton: boolean;
+    accessor lang: string;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
     private _getTracksList;
@@ -639,8 +646,8 @@ declare global {
  * `<theoplayer-text-track-radio-button>` -A radio button that shows the label of a given text track, and switches to that track when clicked.
  */
 declare class TextTrackRadioButton extends RadioButton {
-    private _track;
-    private accessor _trackLabel;
+    private accessor _track;
+    accessor lang: string;
     /**
      * The text track that is controlled by this radio button.
      */
@@ -662,6 +669,7 @@ declare global {
  * A radio button that disables the active subtitle track when clicked.
  */
 declare class TextTrackOffRadioButton extends RadioButton {
+    accessor lang: string;
     private _trackList;
     get trackList(): TextTracksList | undefined;
     set trackList(trackList: TextTracksList | undefined);
@@ -734,6 +742,7 @@ declare global {
  * in a human-readable format.
  */
 declare class TextTrackStyleDisplay extends LitElement {
+    accessor lang: string;
     private _player;
     private _property;
     private _textTrackStyle;
@@ -763,6 +772,7 @@ declare global {
  */
 declare class TextTrackStyleMenu extends MenuGroup {
     static styles: lit.CSSResult[];
+    accessor lang: string;
     protected render(): TemplateResult;
 }
 declare global {
@@ -778,6 +788,7 @@ declare global {
  */
 declare class LanguageMenu extends MenuGroup {
     static styles: lit.CSSResult[];
+    accessor lang: string;
     private _player;
     private _audioTrackList;
     private _textTrackList;
@@ -804,10 +815,12 @@ declare class LanguageMenuButton extends MenuButton {
     private _player;
     private _audioTrackList;
     private _textTrackList;
-    connectedCallback(): void;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
+    accessor lang: string;
     private readonly _updateTracks;
+    willUpdate(changedProperties: PropertyValues): void;
+    private _updateAriaLabel;
     protected render(): HTMLTemplateResult;
 }
 declare global {
@@ -853,7 +866,9 @@ declare global {
  * @attribute menu - The ID of the playback rate menu.
  */
 declare class PlaybackRateMenuButton extends MenuButton {
-    connectedCallback(): void;
+    accessor lang: string;
+    willUpdate(changedProperties: PropertyValues): void;
+    private _updateAriaLabel;
     protected render(): HTMLTemplateResult;
 }
 declare global {
@@ -868,6 +883,7 @@ declare global {
  * @slot `heading` - A slot for the menu's heading.
  */
 declare class PlaybackRateMenu extends Menu {
+    accessor lang: string;
     protected renderMenuHeading(): HTMLTemplateResult;
     protected renderMenuContent(): HTMLTemplateResult;
 }
@@ -881,6 +897,7 @@ declare global {
  * A control that displays the current playback rate of the player.
  */
 declare class PlaybackRateDisplay extends LitElement {
+    accessor lang: string;
     /**
      * The current playback rate.
      */
@@ -905,6 +922,7 @@ declare class ActiveQualityDisplay extends LitElement {
      * The list of target video qualities.
      */
     accessor targetVideoQualities: VideoQuality[] | undefined;
+    accessor lang: string;
     protected render(): HTMLTemplateResult;
 }
 declare global {
@@ -919,8 +937,8 @@ declare global {
  */
 declare class QualityRadioButton extends RadioButton {
     private _track;
-    private _quality;
-    private accessor _qualityLabel;
+    private accessor _quality;
+    accessor lang: string;
     /**
      * The video track containing the quality being controlled.
      */
@@ -952,6 +970,7 @@ declare class QualityRadioGroup extends LitElement {
     private _player;
     private _videoTracks;
     private accessor _track;
+    accessor lang: string;
     protected firstUpdated(): void;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
@@ -970,6 +989,7 @@ declare global {
  * A button that resets the text track style.
  */
 declare class TextTrackStyleResetButton extends Button {
+    accessor lang: string;
     private _player;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
@@ -990,6 +1010,7 @@ declare global {
  */
 declare class SettingsMenu extends MenuGroup {
     static styles: lit.CSSResult[];
+    accessor lang: string;
     protected render(): TemplateResult;
 }
 declare global {
@@ -1004,7 +1025,9 @@ declare global {
  * @attribute `menu` - The ID of the settings menu.
  */
 declare class SettingsMenuButton extends MenuButton {
-    connectedCallback(): void;
+    accessor lang: string;
+    willUpdate(changedProperties: PropertyValues): void;
+    private _updateAriaLabel;
     protected render(): HTMLTemplateResult;
 }
 declare global {
@@ -1023,8 +1046,9 @@ declare class FullscreenButton extends Button {
      * Whether the player is in fullscreen mode.
      */
     accessor fullscreen: boolean;
+    accessor lang: string;
     protected handleClick(): void;
-    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    willUpdate(changedProperties: PropertyValues): void;
     private _updateAriaLabel;
     protected render(): HTMLTemplateResult;
 }
@@ -1034,6 +1058,58 @@ declare global {
     }
 }
 
+/**
+ * A button that toggles stereoscopic VR mode.
+ *
+ * The button is only shown when the current source supports VR (e.g. a 360° video),
+ * and is disabled when the device cannot present VR content.
+ */
+declare class VRButton extends Button {
+    private _player;
+    connectedCallback(): void;
+    get player(): ChromelessPlayer | undefined;
+    set player(player: ChromelessPlayer | undefined);
+    /**
+     * Whether stereoscopic VR mode is currently active.
+     */
+    accessor stereo: boolean;
+    accessor lang: string;
+    private readonly _updateFromPlayer;
+    protected handleClick(): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    private _updateAriaLabel;
+    protected render(): HTMLTemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-vr-button': VRButton;
+    }
+}
+
+/**
+ * A compass that indicates the current viewing direction of a 360° (VR) video.
+ *
+ * @cssproperty `--theoplayer-vr-compass-size` - The size (diameter) of the compass. Defaults to `26px`.
+ * @cssproperty `--theoplayer-vr-compass-color` - The color of the compass border, center dot and pointer.
+ *   Defaults to `#fff`.
+ * @cssproperty `--theoplayer-vr-compass-fov-color` - The color of the field-of-view indicator.
+ *   Defaults to `rgba(255, 255, 255, 0.75)`.
+ */
+declare class VRCompass extends LitElement {
+    static styles: lit.CSSResult[];
+    private _player;
+    private accessor _yaw;
+    get player(): ChromelessPlayer | undefined;
+    set player(player: ChromelessPlayer | undefined);
+    private readonly _updateFromPlayer;
+    protected render(): HTMLTemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-vr-compass': VRCompass;
+    }
+}
+
 declare class ColorStops {
     private _stops;
     constructor();
@@ -1278,6 +1354,7 @@ declare class TimeRange extends Range {
     disconnectedCallback(): void;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
+    accessor lang: string;
     /**
      * The stream type, either "vod", "live" or "dvr".
      */
@@ -1320,6 +1397,7 @@ declare class VolumeRange extends Range {
     private _player;
     constructor();
     connectedCallback(): void;
+    accessor lang: string;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
     private readonly _updateFromPlayer;
@@ -1358,6 +1436,7 @@ declare class ErrorDisplay extends LitElement {
      * Whether the player is in fullscreen mode.
      */
     accessor fullscreen: boolean;
+    accessor lang: string;
     protected render(): lit_html.TemplateResult<1>;
 }
 declare global {
@@ -1402,7 +1481,8 @@ declare class ChromecastButton extends CastButton {
     connectedCallback(): void;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
-    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    accessor lang: string;
+    willUpdate(changedProperties: PropertyValues): void;
     private _updateAriaLabel;
     protected render(): lit_html.TemplateResult<1>;
 }
@@ -1430,6 +1510,7 @@ declare class ChromecastDisplay extends LitElement {
     static styles: lit.CSSResult[];
     private _player;
     private _castApi;
+    accessor lang: string;
     private accessor _receiverName;
     connectedCallback(): void;
     get player(): ChromelessPlayer | undefined;
@@ -1452,7 +1533,8 @@ declare class AirPlayButton extends CastButton {
     connectedCallback(): void;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
-    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    accessor lang: string;
+    willUpdate(changedProperties: PropertyValues): void;
     private _updateAriaLabel;
     protected render(): lit_html.TemplateResult<1>;
 }
@@ -1529,7 +1611,6 @@ declare class LiveButton extends Button {
     static styles: lit.CSSResult[];
     private _player;
     private _liveThreshold;
-    connectedCallback(): void;
     /**
      * Whether the player is paused.
      */
@@ -1550,11 +1631,14 @@ declare class LiveButton extends Button {
      * Whether the player is considered to be playing at the live point.
      */
     accessor live: boolean;
+    accessor lang: string;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
     private readonly _updatePaused;
     private readonly _updateLive;
     protected handleClick(): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    private _updateAriaLabel;
     protected render(): HTMLTemplateResult;
 }
 declare global {
@@ -1599,7 +1683,9 @@ declare class AdDisplay extends LitElement {
     static styles: lit.CSSResult[];
     private _player;
     private _ads;
-    private accessor _text;
+    private accessor _currentAd;
+    private accessor _totalAds;
+    accessor lang: string;
     connectedCallback(): void;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
@@ -1620,6 +1706,7 @@ declare class AdCountdown extends LitElement {
     private _player;
     private _ads;
     private accessor _maxRemainingDuration;
+    accessor lang: string;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
     private readonly _onAdChange;
@@ -1646,6 +1733,7 @@ declare class AdClickThroughButton extends LinkButton {
      */
     get clickThrough(): string | null;
     set clickThrough(clickThrough: string | null);
+    accessor lang: string;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
     private readonly _updateFromPlayer;
@@ -1682,6 +1770,7 @@ declare class AdSkipButton extends Button {
     private _ads;
     private accessor _showCountdown;
     private accessor _timeToSkip;
+    accessor lang: string;
     connectedCallback(): void;
     get player(): ChromelessPlayer | undefined;
     set player(player: ChromelessPlayer | undefined);
@@ -1696,6 +1785,75 @@ declare global {
     }
 }
 
+/**
+ * A radio button that shows the label of a given video quality, and switches the video track's
+ * {@link theoplayer!MediaTrack.targetQuality | target quality} to that quality when clicked.
+ */
+declare abstract class AbstractQualitySelector extends RadioButton {
+    private _player;
+    private _theoLive;
+    protected _badNetworkMode: boolean;
+    accessor lang: string;
+    get player(): ChromelessPlayer | undefined;
+    set player(player: ChromelessPlayer | undefined);
+    private readonly handleEnterBadNetworkMode_;
+    private readonly handleExitBadNetworkMode_;
+    handleEnterBadNetworkMode(): void;
+    handleExitBadNetworkMode(): void;
+    protected abstract handlePlayer(): void;
+}
+
+declare class AutomaticQualitySelector extends AbstractQualitySelector {
+    handleEnterBadNetworkMode(): void;
+    handleExitBadNetworkMode(): void;
+    protected handlePlayer(): void;
+    private update_;
+    protected handleChange(): void;
+    protected render(): HTMLTemplateResult;
+}
+
+/**
+ * A menu button that opens a {@link BadNetworkModeMenu}.
+ *
+ * @attribute `menu` - The ID of the bad network menu.
+ */
+declare class BadNetworkModeButton extends MenuButton {
+    static styles: lit.CSSResult[];
+    private _player;
+    private _theoLive;
+    private accessor _inBadNetworkMode;
+    private readonly handleEnterBadNetworkMode_;
+    private readonly handleExitBadNetworkMode_;
+    accessor lang: string;
+    get player(): ChromelessPlayer | undefined;
+    set player(player: ChromelessPlayer | undefined);
+    willUpdate(changedProperties: PropertyValues): void;
+    private _updateAriaLabel;
+    protected render(): HTMLTemplateResult;
+}
+
+declare class BadNetworkModeSelector extends AbstractQualitySelector {
+    handleEnterBadNetworkMode(): void;
+    handleExitBadNetworkMode(): void;
+    protected handlePlayer(): void;
+    private update_;
+    protected handleChange(): void;
+    protected render(): HTMLTemplateResult;
+}
+
+declare class BadNetworkModeMenu extends LitElement {
+    static styles: lit.CSSResult[];
+    private readonly _radioGroupRef;
+    protected firstUpdated(): void;
+    private readonly _onChange;
+    protected render(): HTMLTemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'theolive-bad-network-menu': BadNetworkModeMenu;
+    }
+}
+
 type Constructor<T> = abstract new (...args: any[]) => T;
 
 /** @internal */
@@ -1710,6 +1868,7 @@ interface StateReceiverPropertyMap {
     targetVideoQualities: VideoQuality[] | undefined;
     error: THEOplayerError | undefined;
     previewTime: number;
+    lang: string;
 }
 /**
  * A custom element that automatically receives selected state updates
@@ -1849,6 +2008,7 @@ declare class UIContainer extends LitElement {
     private _deviceType;
     private _streamType;
     private _fluid;
+    private _language;
     private _userIdle;
     private _userIdleTimeout;
     private _isUserActive;
@@ -1893,6 +2053,15 @@ declare class UIContainer extends LitElement {
      */
     get fluid(): boolean;
     set fluid(value: boolean);
+    /**
+     * The language of this element.
+     *
+     * When set, this also updates the {@link Locale} of the UI if one is registered with {@link addLocale}.
+     *
+     * @see {@link HTMLElement.lang}
+     */
+    get lang(): string;
+    set lang(value: string | null);
     /**
      * Whether the player's audio is muted.
      */
@@ -1999,6 +2168,7 @@ declare class UIContainer extends LitElement {
     private tryInitializePlayer_;
     protected createRenderRoot(): HTMLElement | DocumentFragment;
     protected firstUpdated(): void;
+    protected updated(): void;
     disconnectedCallback(): void;
     private readonly _onMutation;
     private readonly _onSlotChange;
@@ -2020,7 +2190,15 @@ declare class UIContainer extends LitElement {
     private readonly _onMenuPointerDown;
     private readonly _onMenuClick;
     private readonly _onEnterFullscreen;
+    private _enterFullscreen;
     private readonly _onExitFullscreen;
+    private _exitFullscreen;
+    /**
+     * On iOS, presenting stereoscopic VR requires the player to fill the screen.
+     */
+    private _vrFullscreen;
+    private _vrWasFullscreen;
+    private readonly _onVrStateChange;
     private readonly _onFullscreenChange;
     private readonly _exitFullscreenOnEsc;
     private readonly _updateAspectRatio;
@@ -2136,6 +2314,7 @@ declare class DefaultUI extends LitElement {
     private _appliedExtensions;
     private _configuration;
     private _source;
+    private _language;
     private _userIdleTimeout;
     private _deviceType;
     private _dvrThreshold;
@@ -2174,6 +2353,15 @@ declare class DefaultUI extends LitElement {
      * Whether to automatically adjust the player's height to fit the video's aspect ratio.
      */
     accessor fluid: boolean;
+    /**
+     * The language of this element.
+     *
+     * When set, this also updates the {@link Locale} of the UI if one is registered with {@link addLocale}.
+     *
+     * @see {@link HTMLElement.lang}
+     */
+    get lang(): string;
+    set lang(value: string | null);
     /**
      * Whether the player's audio is muted.
      *
@@ -2278,19 +2466,6 @@ type Extension = (ui: DefaultUI) => void;
  */
 declare function registerExtension(extension: Extension): void;
 
-declare class BadNetworkModeMenu extends LitElement {
-    static styles: lit.CSSResult[];
-    private readonly _radioGroupRef;
-    protected firstUpdated(): void;
-    private readonly _onChange;
-    protected render(): HTMLTemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'theolive-bad-network-menu': BadNetworkModeMenu;
-    }
-}
-
 /**
  * `<theolive-default-ui>` - A default UI for THEOlive.
  */
@@ -2354,6 +2529,7 @@ declare enum Attribute {
     REMAINING = "remaining",
     REMAINING_WHEN_LIVE = "remaining-when-live",
     SHOW_DURATION = "show-duration",
+    STEREO = "stereo",
     SEEK_OFFSET = "seek-offset",
     MENU = "menu",
     MENU_OPENED = "menu-opened",
@@ -2372,14 +2548,435 @@ declare enum Attribute {
     SHOW_AD_MARKERS = "show-ad-markers",
     CLICKTHROUGH = "clickthrough",
     PROPERTY = "property",
-    VALUE = "value"
+    VALUE = "value",
+    LANG = "lang"
+}
+
+interface Locale {
+    /**
+     * The {@link HTMLElement.ariaLabel | `aria-label`} for a {@link PlayButton} when it is showing a "play" button,
+     * i.e. when the player is paused.
+     */
+    playAria: string;
+    /**
+     * The {@link HTMLElement.ariaLabel | `aria-label`} for a {@link PlayButton} when it is showing a "pause" button
+     * i.e. when the player is playing.
+     */
+    pauseAria: string;
+    /**
+     * The {@link HTMLElement.ariaLabel | `aria-label`} for a {@link PlayButton} when it is showing a "replay" button
+     * i.e. when the player is paused at the end of the stream.
+     */
+    replayAria: string;
+    /**
+     * The {@link HTMLElement.ariaLabel | `aria-label`} for a {@link MuteButton} when it is showing a "mute" button.
+     */
+    muteAria: string;
+    /**
+     * The {@link HTMLElement.ariaLabel | `aria-label`} for a {@link MuteButton} when it is showing an "unmute" button.
+     */
+    unmuteAria: string;
+    /**
+     * The {@link HTMLElement.ariaLabel | `aria-label`} for a {@link VolumeRange}.
+     */
+    volumeAria: string;
+    /**
+     * The {@link HTMLElement.ariaLabel | `aria-label`} for a {@link TimeRange}.
+     */
+    seekAria: string;
+    /**
+     * The {@link HTMLElement.ariaLabel | `aria-label`} for a {@link SeekButton} with a positive {@link SeekButton.seekOffset}.
+     *
+     * @param offset An offset that was formatted with {@link formatDuration}.
+     */
+    seekForwardAria(offset: string): string;
+    /**
+     * The {@link HTMLElement.ariaLabel | `aria-label`} for a {@link SeekButton} with a negative {@link SeekButton.seekOffset}.
+     *
+     * @param offset An offset that was formatted with {@link formatDuration}.
+     */
+    seekBackwardAria(offset: string): string;
+    /**
+     * The text on a {@link LiveButton}, e.g. "LIVE".
+     */
+    live: string;
+    /**
+     * The {@link HTMLElement.ariaLabel | `aria-label`} for a {@link LiveButton}.
+     */
+    seekToLiveAria: string;
+    /**
+     * The {@link HTMLElement.ariaLabel | `aria-label`} for a {@link FullscreenButton}.
+     */
+    fullscreenAria: string;
+    /**
+     * The {@link HTMLElement.ariaLabel | `aria-label`} for a {@link FullscreenButton} when in fullscreen mode.
+     */
+    fullscreenExitAria: string;
+    /**
+     * The {@link HTMLElement.ariaLabel | `aria-label`} for a {@link VRButton}.
+     */
+    vrAria: string;
+    /**
+     * The {@link HTMLElement.ariaLabel | `aria-label`} for a {@link VRButton} when VR (stereo) mode is active.
+     */
+    vrExitAria: string;
+    /**
+     * The {@link HTMLElement.ariaLabel | `aria-label`} for a {@link VRButton} when no VR capable device is available.
+     */
+    vrUnavailableAria: string;
+    /**
+     * The {@link HTMLElement.ariaLabel | `aria-label`} for an {@link AirPlayButton}.
+     */
+    airplayAria: string;
+    /**
+     * The {@link HTMLElement.ariaLabel | `aria-label`} for an {@link AirPlayButton} when it is connected to AirPlay.
+     */
+    airplayConnectedAria: string;
+    /**
+     * The {@link HTMLElement.ariaLabel | `aria-label`} for a {@link ChromecastButton}.
+     */
+    chromecastAria: string;
+    /**
+     * The {@link HTMLElement.ariaLabel | `aria-label`} for a {@link ChromecastButton} when it is connected to Chromecast.
+     */
+    chromecastConnectedAria: string;
+    /**
+     * The heading for a {@link ChromecastDisplay} when playing on Chromecast.
+     * This heading precedes the name of the connected Chromecast receiver.
+     */
+    chromecastHeading: string;
+    /**
+     * The default receiver name for a {@link ChromecastDisplay} when playing on a Chromecast receiver with an unknown name.
+     * This follows the {@link chromecastHeading}.
+     */
+    chromecastDefaultReceiverName: string;
+    /**
+     * The {@link HTMLElement.ariaValueText | `aria-valuetext`} for a {@link TimeDisplay} and {@link TimeRange}
+     * when it has both a valid time and duration to display.
+     *
+     * Examples:
+     * - "5 seconds" and "10 seconds" &rarr; "5 seconds of 10 seconds"
+     *
+     * @param time A time duration that was formatted with {@link formatDuration} or {@link formatRemainingDuration}.
+     * @param totalDuration A total duration that was formatted with {@link formatDuration} or {@link formatRemainingDuration}.
+     */
+    timeOfTotalAria(time: string, totalDuration: string): string;
+    /**
+     * The {@link HTMLElement.ariaLabel | `aria-label`} for a {@link TimeDisplay}.
+     */
+    playbackTimeAria: string;
+    /**
+     * The {@link HTMLElement.ariaValueText | `aria-valuetext`} for a {@link TimeDisplay} and {@link TimeRange}
+     * when it does not have a valid time to display.
+     */
+    unknownTimeAria: string;
+    /**
+     * The text on an {@link AdDisplay}, e.g. "Ad".
+     */
+    adText: string;
+    /**
+     * The text on an {@link AdDisplay} when playing multiple ads in an ad break, e.g. "Ad X of Y".
+     *
+     * @param currentAd The number of the currently playing ad.
+     * @param totalAds The total number of ads in the current ad break.
+     */
+    adBreakText(currentAd: number, totalAds: number): string;
+    /**
+     * The text on an {@link AdClickThroughButton}, e.g. "Visit Advertiser".
+     */
+    adClickThroughText: string;
+    /**
+     * The text on an {@link AdCountdown}, e.g. "Content will resume in X seconds".
+     *
+     * @param remainingDuration The remaining time until the content can be resumed, after being formatted with {@link formatNarrowDuration}.
+     */
+    adCountdownText(remainingDuration: string): string;
+    /**
+     * The text on an {@link AdSkipButton}, e.g. "Skip Ad".
+     */
+    adSkipButtonText: string;
+    /**
+     * The text on an {@link AdSkipButton} when it is showing a countdown.
+     *
+     * @param remainingDuration The remaining time until the ad can be skipped, after being formatted with {@link formatNarrowDuration}.
+     */
+    adSkipCountdownText(remainingDuration: string): string;
+    /**
+     * The announcement message on a {@link THEOliveDefaultUI} when the stream is loading.
+     */
+    liveStreamLoading: string;
+    /**
+     * The announcement message on a {@link THEOliveDefaultUI} when the stream is offline and hasn't started yet.
+     */
+    liveStreamOffline: string;
+    /**
+     * The {@link HTMLElement.ariaLabel | `aria-label`} for a {@link CloseMenuButton}.
+     */
+    closeMenuAria: string;
+    /**
+     * The {@link HTMLElement.ariaLabel | `aria-label`} for a {@link LanguageMenuButton}.
+     */
+    openLanguageMenuAria: string;
+    /**
+     * The heading for a {@link LanguageMenu}.
+     */
+    languageMenuHeading: string;
+    /**
+     * The section header for audio tracks in a {@link LanguageMenu}.
+     */
+    audioMenuHeading: string;
+    /**
+     * The section header for subtitle tracks in a {@link LanguageMenu}.
+     */
+    subtitleMenuHeading: string;
+    /**
+     * The label for a {@link TextTrackOffRadioButton} to disable the active subtitle track.
+     */
+    subtitleOff: string;
+    /**
+     * The {@link HTMLElement.ariaLabel | `aria-label`} for a {@link PlaybackRateMenuButton}.
+     */
+    openPlaybackRateMenuAria: string;
+    /**
+     * The heading for a {@link PlaybackRateMenu}.
+     */
+    playbackRateMenuHeading: string;
+    /**
+     * Formats the given playback rate for a {@link PlaybackRateMenu} and {@link PlaybackRateDisplay}.
+     *
+     * Examples:
+     * - `1` &rarr; "Normal"
+     * - `1.5` &rarr; "1.5x"
+     *
+     * @param rate The playback rate.
+     */
+    formatPlaybackRate(rate: number): string;
+    /**
+     * The {@link HTMLElement.ariaLabel | `aria-label`} for a {@link SettingsMenuButton}.
+     */
+    openSettingsMenuAria: string;
+    /**
+     * The heading for a {@link SettingsMenu}.
+     */
+    settingsMenuHeading: string;
+    /**
+     * The text for the quality option in a {@link SettingsMenu}.
+     */
+    qualityMenuHeading: string;
+    /**
+     * The heading for a {@link TextTrackStyleMenu}.
+     */
+    textTrackStyleMenuHeading: string;
+    /**
+     * The heading for the font family style option in a {@link TextTrackStyleMenu}.
+     */
+    textTrackStyleFontFamily: string;
+    /**
+     * The heading for the font color style option in a {@link TextTrackStyleMenu}.
+     */
+    textTrackStyleFontColor: string;
+    /**
+     * The heading for the font opacity style option in a {@link TextTrackStyleMenu}.
+     */
+    textTrackStyleFontOpacity: string;
+    /**
+     * The heading for the font size style option in a {@link TextTrackStyleMenu}.
+     */
+    textTrackStyleFontSize: string;
+    /**
+     * The heading for the background color style option in a {@link TextTrackStyleMenu}.
+     */
+    textTrackStyleBackgroundColor: string;
+    /**
+     * The heading for the background opacity style option in a {@link TextTrackStyleMenu}.
+     */
+    textTrackStyleBackgroundOpacity: string;
+    /**
+     * The heading for the window color style option in a {@link TextTrackStyleMenu}.
+     */
+    textTrackStyleWindowColor: string;
+    /**
+     * The heading for the window opacity style option in a {@link TextTrackStyleMenu}.
+     */
+    textTrackStyleWindowOpacity: string;
+    /**
+     * The heading for the edge style option in a {@link TextTrackStyleMenu}.
+     */
+    textTrackStyleEdgeStyle: string;
+    /**
+     * The label for the default style option in a {@link TextTrackStyleRadioGroup}.
+     */
+    textTrackStyleDefaultLabel: string;
+    /**
+     * The label for a {@link TextTrackStyleDisplay} when it is showing a style option
+     * that does not match any predefined values.
+     */
+    textTrackStyleCustomLabel: string;
+    /**
+     * The label for a {@link TextTrackStyleResetButton} to reset the text track style.
+     */
+    textTrackStyleResetLabel: string;
+    /**
+     * The labels for font family style options in a {@link TextTrackStyleRadioGroup},
+     * keyed by the original English label (e.g. "Default" or "Monospace Serif").
+     */
+    fontFamilyLabels: Record<KnownFontFamily, string>;
+    /**
+     * The labels for color style options in a {@link TextTrackStyleRadioGroup},
+     * keyed by the original English label (e.g. "White", "Black" or "Red").
+     */
+    colorLabels: Record<KnownColor, string>;
+    /**
+     * The labels for edge style options in a {@link TextTrackStyleRadioGroup},
+     * keyed by an {@link EdgeStyle} value.
+     */
+    edgeStyleLabels: Record<EdgeStyle, string>;
+    /**
+     * The label for an {@link ActiveQualityDisplay} or {@link QualityRadioButton} when it is showing the "Automatic" quality selection option.
+     */
+    automaticQualityLabel: string;
+    /**
+     * The label for a {@link ActiveQualityDisplay} when it is showing a quality selection option
+     * without any usable label.
+     */
+    unknownQualityLabel: string;
+    /**
+     * The label for an {@link AutomaticQualitySelector} for THEOlive's {@link BadNetworkModeMenu}.
+     */
+    highQualityLabel: string;
+    /**
+     * The label for a {@link BadNetworkModeSelector} for THEOlive's {@link BadNetworkModeMenu}.
+     */
+    lowQualityLabel: string;
+    /**
+     * The heading for an {@link ErrorDisplay}.
+     */
+    errorHeading: string;
+    /**
+     * The {@link HTMLElement.ariaLabel | `aria-label`} for a {@link BadNetworkModeButton}.
+     */
+    openBadNetworkModeMenuAria: string;
+    /**
+     * Formats the given time duration as a human-readable string.
+     *
+     * This is optional. If not provided, a default {@link Intl.DurationFormat} with the {@link Intl.DurationFormatStyle | `"long"` style} is used.
+     *
+     * Examples:
+     * - `{ seconds: 5 }` &rarr; "5 seconds"
+     * - `{ minutes: 2, seconds: 10 }` &rarr; "2 minutes and 10 seconds"
+     *
+     * @param duration A duration, compatible with {@link Intl.DurationFormat.format}.
+     */
+    formatDuration(duration: Duration): string;
+    /**
+     * Formats the given time duration as a narrow human-readable string.
+     *
+     * This is optional. If not provided, a default {@link Intl.DurationFormat} with the {@link Intl.DurationFormatStyle | `"narrow"` style} is used.
+     *
+     * Examples:
+     * - `{ seconds: 5 }` &rarr; "5s"
+     * - `{ minutes: 2, seconds: 10 }` &rarr; "2m 10s"
+     *
+     * @param duration A duration, compatible with {@link Intl.DurationFormat.format}.
+     */
+    formatNarrowDuration(duration: Duration): string;
+    /**
+     * Formats the given remaining time duration as a human-readable string.
+     *
+     * Examples:
+     * - "5 seconds" &rarr; "5 seconds remaining"
+     * - "2 minutes and 10 seconds" &rarr; "2 minutes and 10 seconds remaining"
+     *
+     * @param duration A duration that was formatted with {@link formatDuration}.
+     */
+    formatRemainingDuration(duration: string): string;
+    /**
+     * Formats the given percentage as a human-readable string.
+     *
+     * This is optional. If not provided, a default {@link Intl.NumberFormat} with the {@link Intl.NumberFormatOptions.style | `"percent"` style} is used.
+     *
+     * Examples:
+     * - `0.75` &rarr; "75%"
+     * - `1.0` &rarr; "100%"
+     *
+     * @param percentage A percentage, between `0.0` and `1.0`.
+     */
+    formatPercentage(percentage: number): string;
+    /**
+     * Formats a bandwidth value.
+     *
+     * This is optional. If not provided, a default {@link Intl.NumberFormat} with the {@link Intl.NumberFormatOptions.style | `"unit"` style} is used
+     * that dynamically picks between the `"kilobit-per-second"` or `"megabit-per-second"` {@link Intl.NumberFormatOptions.unit | unit}s.
+     *
+     * Examples:
+     * - `150_000` &rarr; "150kb/s"
+     * - `2_500_000` &rarr; "2.5Mb/s"
+     *
+     * @param bandwidth A bandwidth value, in bits per second.
+     */
+    formatBandwidth(bandwidth: number): string;
+    /**
+     * Formats a language name.
+     *
+     * This is optional. If not provided, a default {@link Intl.DisplayNames} with the {@link Intl.DisplayNamesOptions.type | `"language"` type} is used.
+     *
+     * Examples for an English locale:
+     * - `"en"` &rarr; "English"
+     * - `"fr"` &rarr; "French"
+     * - `"pt-BR"` &rarr; "Brazilian Portuguese"
+     *
+     * Examples for a French locale:
+     * - `"en"` &rarr; "anglais"
+     * - `"fr"` &rarr; "français"
+     * - `"pt-BR"` &rarr; "portugais brésilien"
+     *
+     * @param languageCode
+     * @return A localized language name, or `undefined` if the language code is unknown.
+     */
+    formatLanguage(languageCode: string): string | undefined;
 }
+/**
+ * A duration, compatible with {@link Intl.DurationFormat.format} and {@link Temporal.Duration}.
+ */
+interface Duration {
+    hours: number;
+    minutes: number;
+    seconds: number;
+}
+/**
+ * The known font families for a {@link TextTrackStyleRadioGroup}.
+ */
+type KnownFontFamily = 'Monospace Serif' | 'Proportional Serif' | 'Monospace Sans' | 'Proportional Sans';
+/**
+ * The known colors for a {@link TextTrackStyleRadioGroup}.
+ */
+type KnownColor = 'White' | 'Yellow' | 'Green' | 'Cyan' | 'Blue' | 'Magenta' | 'Red' | 'Black';
+/**
+ * A partial {@link Locale}.
+ */
+type PartialLocale = Partial<Locale> & {
+    fontFamilyLabels?: Partial<Locale['fontFamilyLabels']>;
+    colorLabels?: Partial<Locale['colorLabels']>;
+    edgeStyleLabels?: Partial<Locale['edgeStyleLabels']>;
+};
+
+/**
+ * Register a new locale with the given name.
+ *
+ * The locale's name should preferably be a BCP 47 language identifier, so it can be set as
+ * a valid [`lang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/lang)
+ * of the UI.
+ *
+ * @param name The name of the locale.
+ * @param locale The locale.
+ */
+declare function addLocale(name: string, locale: PartialLocale): void;
 
 /**
  * The version of Open Video UI for Web.
  */
 declare const version: string;
 
-export { ActiveQualityDisplay, AdClickThroughButton, AdCountdown, AdDisplay, AdSkipButton, AirPlayButton, Attribute, Button, CastButton, ChromecastButton, ChromecastDisplay, CloseMenuButton, ColorStops, ControlBar, DefaultUI, DurationDisplay, ErrorDisplay, ExtensionSlot, FullscreenButton, GestureReceiver, LanguageMenu, LanguageMenuButton, LinkButton, LiveButton, LoadingIndicator, MediaTrackRadioButton, Menu, MenuButton, MenuGroup, MuteButton, PlayButton, PlaybackRateDisplay, PlaybackRateMenu, PlaybackRateMenuButton, PlaybackRateRadioGroup, PreviewThumbnail, PreviewTimeDisplay, QualityRadioButton, QualityRadioGroup, RadioButton, RadioGroup, Range, SeekButton, SettingsMenu, SettingsMenuButton, SlotContainer, StateReceiverMixin, THEOliveDefaultUI, TextTrackOffRadioButton, TextTrackRadioButton, TextTrackStyleDisplay, TextTrackStyleMenu, TextTrackStyleRadioGroup, TextTrackStyleResetButton, TimeDisplay, TimeRange, TrackRadioGroup, UIContainer, VolumeRange, buttonTemplate, linkButtonTemplate, menuGroupTemplate, menuTemplate, registerExtension, stateReceiver, version };
-export type { ButtonOptions, Constructor, DeviceType, Extension, MenuGroupOptions, MenuOptions, StateReceiverElement, StateReceiverPropertyMap, StreamType, TextTrackStyleMap, TextTrackStyleOption, TrackType, VolumeLevel };
+export { ActiveQualityDisplay, AdClickThroughButton, AdCountdown, AdDisplay, AdSkipButton, AirPlayButton, Attribute, AutomaticQualitySelector, BadNetworkModeButton, BadNetworkModeMenu, BadNetworkModeSelector, Button, CastButton, ChromecastButton, ChromecastDisplay, CloseMenuButton, ColorStops, ControlBar, DefaultUI, DurationDisplay, ErrorDisplay, ExtensionSlot, FullscreenButton, GestureReceiver, LanguageMenu, LanguageMenuButton, LinkButton, LiveButton, LoadingIndicator, MediaTrackRadioButton, Menu, MenuButton, MenuGroup, MuteButton, PlayButton, PlaybackRateDisplay, PlaybackRateMenu, PlaybackRateMenuButton, PlaybackRateRadioGroup, PreviewThumbnail, PreviewTimeDisplay, QualityRadioButton, QualityRadioGroup, RadioButton, RadioGroup, Range, SeekButton, SettingsMenu, SettingsMenuButton, SlotContainer, StateReceiverMixin, THEOliveDefaultUI, TextTrackOffRadioButton, TextTrackRadioButton, TextTrackStyleDisplay, TextTrackStyleMenu, TextTrackStyleRadioGroup, TextTrackStyleResetButton, TimeDisplay, TimeRange, TrackRadioGroup, UIContainer, VRButton, VRCompass, VolumeRange, addLocale, buttonTemplate, linkButtonTemplate, menuGroupTemplate, menuTemplate, registerExtension, stateReceiver, version };
+export type { ButtonOptions, Constructor, DeviceType, Duration, Extension, KnownColor, KnownFontFamily, Locale, MenuGroupOptions, MenuOptions, PartialLocale, StateReceiverElement, StateReceiverPropertyMap, StreamType, TextTrackStyleMap, TextTrackStyleOption, TrackType, VolumeLevel };
 export as namespace THEOplayerUI;