/*!
 * THEOplayer Open Video UI for Web (v2.3.1)
 * License: MIT
 */
import * as lit 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';

/**
 * A horizontal control bar that can contain other controls.
 */
declare class ControlBar extends LitElement {
    static styles: lit.CSSResult[];
    static shadowRootOptions: ShadowRootInit;
    protected render(): HTMLTemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-control-bar': ControlBar;
    }
}

/** @deprecated */
interface ButtonOptions {
    /**
     * @deprecated Override {@link Button.render} instead.
     */
    template?: HTMLTemplateElement;
}
/**
 * @deprecated Override {@link Button.render} instead.
 */
declare function buttonTemplate(button: string, extraCss?: string): string;
/**
 * A basic button.
 *
 * @cssproperty `--theoplayer-control-height` - The height of the button's control area (and default icon size). Defaults to `24px`.
 * @cssproperty `--theoplayer-control-padding` - The padding around the button's content. Defaults to `10px`.
 * @cssproperty `--theoplayer-control-background` - The background of the button. Defaults to `transparent`.
 * @cssproperty `--theoplayer-control-hover-background` - The background of the button when hovered.
 *   Defaults to `--theoplayer-control-background`.
 * @cssproperty `--theoplayer-text-color` - The text color of the button. Defaults to `#fff`.
 * @cssproperty `--theoplayer-text-font-size` - The font size of the button's text. Defaults to `14px`.
 * @cssproperty `--theoplayer-text-content-height` - The line-height of the button's text. Defaults to `--theoplayer-control-height`.
 * @cssproperty `--theoplayer-icon-color` - The color of the button's icon. Defaults to `#fff`.
 * @cssproperty `--theoplayer-focus-ring-color` - The color of the focus ring around focused buttons. Defaults to `rgba(27, 127, 204, 0.9)`.
 * @cssproperty `--theoplayer-button-text-color` - The text color of the button. Defaults to `--theoplayer-text-color`.
 * @cssproperty `--theoplayer-button-icon-width` - The width of the button's icon. Defaults to `--theoplayer-control-height`.
 * @cssproperty `--theoplayer-button-icon-height` - The height of the button's icon. Defaults to `--theoplayer-control-height`.
 * @cssproperty `--theoplayer-button-icon-transition` - The CSS transition applied to the button's icon. Defaults to `none`.
 * @cssproperty `--theoplayer-button-icon-shadow` - A drop-shadow applied to the icon. Defaults to `none`.
 * @cssproperty `--theoplayer-button-hover-icon-shadow` - A drop-shadow applied to the icon on hover. Defaults to `0 0 4px rgba(255, 255, 255, 0.5)`.
 * @cssproperty `--theoplayer-button-checked-background` - The background of a toggled-on button (e.g. mute, fullscreen). Defaults to `#fff`.
 * @cssproperty `--theoplayer-button-checked-color` - The color of a toggled-on button. Defaults to `#000`.
 * @cssproperty `--theoplayer-button-disabled-text-color` - The text color of a disabled button. Defaults to `#ccc`.
 * @cssproperty `--theoplayer-before-first-play-display` - The CSS `display` of the button before first play.
 *   The {@link UIContainer | `<theoplayer-ui>`} will set this to `none` to hide all buttons until playback begins,
 *   after which this becomes `unset` and the button reverts back to its initial CSS `display`.
 */
declare class Button extends LitElement {
    static styles: lit.CSSResult[];
    private readonly _template;
    private _disabled;
    /**
     * Creates a basic button.
     *
     * By default, the button renders the contents of its direct children (i.e. it has a single unnamed `<slot>`).
     * Subclasses can override this by overriding {@link render}.
     */
    constructor(options?: ButtonOptions);
    connectedCallback(): void;
    disconnectedCallback(): void;
    /**
     * Whether the button is disabled.
     *
     * When disabled, the button cannot be clicked.
     */
    get disabled(): boolean;
    set disabled(value: boolean);
    accessor ariaLabel: string | null;
    private _enable;
    private _disable;
    private readonly _onClick;
    protected readonly _onKeyDown: (e: KeyboardEvent) => void;
    protected readonly _onKeyUp: (e: KeyboardEvent) => void;
    protected render(): HTMLTemplateResult;
    /**
     * Handle a button click.
     *
     * By default, this does nothing. Subclasses can override this method to add behavior to the button.
     */
    protected handleClick(): void;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-button': Button;
    }
}

/**
 * @deprecated Override {@link LinkButton.render} instead.
 */
declare function linkButtonTemplate(button: string, extraCss?: string): string;
/**
 * A {@link Button | button} that opens a hyperlink.
 */
declare class LinkButton extends LitElement {
    static styles: lit.CSSResult[];
    private readonly _template;
    private _disabled;
    private readonly _linkRef;
    constructor(options?: ButtonOptions);
    connectedCallback(): void;
    /**
     * Whether the button is disabled.
     *
     * When disabled, the button cannot be clicked.
     */
    get disabled(): boolean;
    set disabled(value: boolean);
    protected accessor href: string;
    protected accessor target: string;
    private _enable;
    private _disable;
    private readonly _onKeyDown;
    private readonly _onClick;
    protected render(): HTMLTemplateResult;
    protected renderLinkContent(): HTMLTemplateResult;
    protected handleClick(): void;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-link-button': LinkButton;
    }
}

/**
 * A button that toggles whether the player is playing or paused.
 *
 * @cssproperty `--theoplayer-play-button-icon-color` - The icon color of the play button.
 *   Overrides `--theoplayer-icon-color` for this button. Defaults to `unset`.
 */
declare class PlayButton extends Button {
    static styles: lit.CSSResult[];
    private _player;
    connectedCallback(): void;
    /**
     * Whether the player is paused.
     *
     * This reflects `player.paused`.
     */
    accessor paused: boolean;
    /**
     * Whether the player is ended.
     *
     * This reflects `player.ended`.
     */
    accessor ended: boolean;
    accessor lang: string;
    get player(): ChromelessPlayer | undefined;
    set player(player: ChromelessPlayer | undefined);
    private readonly _onPlay;
    private readonly _onPause;
    private readonly _updateFromPlayer;
    private _updateEnded;
    private readonly _updateDisabled;
    protected handleClick(): void;
    willUpdate(changedProperties: PropertyValues): void;
    private _updateAriaLabel;
    protected render(): HTMLTemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-play-button': PlayButton;
    }
}

type VolumeLevel = 'off' | 'low' | 'high';
/**
 * A button that toggles whether audio is muted or not.
 */
declare class MuteButton extends Button {
    static styles: lit.CSSResult[];
    private _player;
    connectedCallback(): void;
    /**
     * The volume level of the player.
     *
     * 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;
    willUpdate(changedProperties: PropertyValues): void;
    private _updateAriaLabel;
    protected render(): HTMLTemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-mute-button': MuteButton;
    }
}

/**
 * A button that seeks forward or backward by a fixed offset.
 *
 * @cssproperty `--theoplayer-seek-button-font-size` - The font size of the offset number rendered inside the seek icon. Defaults to `calc(0.3 * --theoplayer-button-icon-height)`.
 */
declare class SeekButton extends Button {
    static styles: lit.CSSResult[];
    private _player;
    /**
     * 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;
    willUpdate(changedProperties: PropertyValues): void;
    private _updateAriaLabel;
    protected render(): lit_html.TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-seek-button': SeekButton;
    }
}

type StreamType = 'vod' | 'live' | 'dvr';

/**
 * A control that displays the current time of the stream.
 */
declare class TimeDisplay extends LitElement {
    static styles: lit.CSSResult[];
    private _player;
    connectedCallback(): void;
    get player(): ChromelessPlayer | undefined;
    set player(player: ChromelessPlayer | undefined);
    /**
     * If set, shows the remaining time of the stream. Not compatible with {@link showDuration}.
     */
    accessor remaining: boolean;
    /**
     * If set, and the stream is a livestream, shows the remaining time (until the live point) of the stream.
     */
    accessor remainingWhenLive: boolean;
    /**
     * If set, also shows the duration of the stream.
     */
    accessor showDuration: boolean;
    /**
     * The stream type, either "vod", "live" or "dvr".
     */
    accessor streamType: StreamType;
    accessor lang: string;
    private accessor _currentTime;
    private accessor _duration;
    private accessor _endTime;
    private readonly _updateFromPlayer;
    protected render(): HTMLTemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-time-display': TimeDisplay;
    }
}

/**
 * A control that displays the duration of the stream.
 */
declare class DurationDisplay extends LitElement {
    static styles: lit.CSSResult[];
    private _player;
    connectedCallback(): void;
    get player(): ChromelessPlayer | undefined;
    set player(player: ChromelessPlayer | undefined);
    /**
     * The current duration.
     */
    accessor duration: number;
    private readonly _updateFromPlayer;
    protected render(): lit_html.TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-duration-display': DurationDisplay;
    }
}

/**
 * A button that can be checked.
 *
 * When part of a {@link RadioGroup}, at most one button in the group can be checked.
 */
declare class RadioButton extends Button {
    private _checked;
    connectedCallback(): void;
    /**
     * Whether this radio button is checked.
     */
    get checked(): boolean;
    set checked(checked: boolean);
    /**
     * The value associated with this radio button.
     */
    accessor value: any;
    protected handleClick(): void;
    protected handleChange(): void;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-radio-button': RadioButton;
    }
}

type DeviceType = 'desktop' | 'mobile' | 'tv';

/**
 * A group of {@link RadioButton}s. At most one button in the group can be checked.
 *
 * ## Behavior
 * This radio group implements the [roving tabindex](https://www.w3.org/WAI/ARIA/apg/example-index/radio/radio.html) pattern.
 *  - `Tab` moves focus in or out of the radio group.
 *  - `Up`/`Left` arrow moves focus to the previous radio button.
 *  - `Down`/`Right` arrow moves focus to the next radio button.
 *  - `Home` moves focus to the first radio button.
 *  - `End` moves focus to the last radio button.
 */
declare class RadioGroup extends LitElement {
    private readonly _slotRef;
    private _radioButtons;
    private _value;
    constructor();
    connectedCallback(): void;
    disconnectedCallback(): void;
    protected firstUpdated(): void;
    protected createRenderRoot(): HTMLElement | DocumentFragment;
    /**
     * The device type, either "desktop", "mobile" or "tv".
     */
    accessor deviceType: DeviceType;
    /**
     * The selected value.
     */
    get value(): any;
    set value(value: any);
    private readonly _onSlotChange;
    private readonly _onKeyDown;
    get focusedRadioButton(): RadioButton | null;
    get checkedRadioButton(): RadioButton | null;
    get firstRadioButton(): RadioButton | null;
    get lastRadioButton(): RadioButton | null;
    allRadioButtons(): readonly RadioButton[];
    private _prevRadioButton;
    private _nextRadioButton;
    private _focusPrevButton;
    private _focusNextButton;
    private setFocusedRadioButton;
    private _unfocusAll;
    private setCheckedRadioButton;
    private updateCheckedButton;
    private readonly _onButtonChange;
    protected render(): HTMLTemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-radio-group': RadioGroup;
    }
}

/** @deprecated */
interface MenuOptions {
    /**
     * @deprecated Override {@link Menu.render} instead.
     */
    template?: HTMLTemplateElement;
}
/**
 * @deprecated Override {@link Menu.render} instead.
 */
declare function menuTemplate(heading: string, content: string, extraCss?: string): string;
/**
 * A menu that can be opened on top of the player.
 *
 * The menu has a heading at the top, with a {@link CloseMenuButton | close button} and a heading text.
 *
 * @slot `heading` - A slot for the menu's heading.
 *
 * @cssproperty `--theoplayer-menu-color` - The text color of menu items. Defaults to `#fff`.
 * @cssproperty `--theoplayer-menu-control-hover-background` - The background of a menu item when hovered. Defaults to `rgba(255, 255, 255, 0.3)`.
 * @cssproperty `--theoplayer-menu-margin` - The margin around the menu. Defaults to `10px`.
 * @cssproperty `--theoplayer-menu-min-width` - The minimum width of the menu. Defaults to `80%`.
 * @cssproperty `--theoplayer-menu-max-width` - The maximum width of the menu. Defaults to `100%`.
 */
declare class Menu extends LitElement {
    static styles: lit.CSSResult[];
    static shadowRootOptions: ShadowRootInit;
    private readonly _template;
    private _menuOpened;
    /**
     * Creates a menu.
     *
     * By default, the button has an unnamed `<slot>` for its contents, and a named `"heading"` `<slot>` for its heading text.
     * Subclasses can override this by overriding {@link renderMenuHeading} and/or {@link renderMenuContent}.
     */
    constructor(options?: MenuOptions);
    connectedCallback(): void;
    /**
     * Whether to automatically close the menu whenever one of its controls
     * receives an input (e.g. when a radio button is clicked).
     */
    accessor closeOnInput: boolean;
    /**
     * Whether the menu is currently open.
     */
    private get menuOpened_();
    private set menuOpened_(value);
    /**
     * Open the menu.
     */
    openMenu(): void;
    /**
     * Close the menu.
     */
    closeMenu(): void;
    private readonly _onContentInput;
    protected render(): HTMLTemplateResult;
    protected renderMenuHeading(): HTMLTemplateResult;
    protected renderMenuContent(): HTMLTemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-menu': Menu;
    }
}

/** @deprecated */
interface MenuGroupOptions {
    /**
     * @deprecated Override {@link MenuGroup.render} instead.
     */
    template?: HTMLTemplateElement;
}
/**
 * @deprecated Override {@link MenuGroup.render} instead.
 */
declare function menuGroupTemplate(content: string, extraCss?: string): string;
/**
 * A group of {@link Menu}s.
 *
 * This can contain multiple other menus, which can be opened with {@link openMenu}.
 * When a {@link MenuButton} in one menu opens another menu in this group, it is opened as a "submenu".
 * When a submenu is closed, the menu that originally opened it is shown again.
 */
declare class MenuGroup extends LitElement {
    static styles: lit.CSSResult[];
    static shadowRootOptions: ShadowRootInit;
    private readonly _template;
    constructor(options?: MenuGroupOptions);
    private _menuOpened;
    /**
     * Whether any menu in the group is currently open.
     */
    private get menuOpened_();
    private set menuOpened_(value);
    private accessor _menuSlot;
    private _menus;
    private readonly _openMenuStack;
    connectedCallback(): void;
    protected createRenderRoot(): HTMLElement | DocumentFragment;
    protected render(): TemplateResult;
    protected firstUpdated(): void;
    /**
     * Get the menu with the given ID.
     *
     * @param [menuId] - The ID of the menu. If unset, returns this menu group.
     */
    getMenuById(menuId?: string): Menu | MenuGroup | undefined;
    /**
     * Open the menu with the given ID.
     *
     * If no ID is given, the first menu in the group is opened.
     *
     * If there's already an open menu, then the new menu is opened as a "submenu".
     * When it closed, the previous menu is opened.
     *
     * @param [menuId] - The ID of the menu to open.
     * @param [opener] - The control that opened the menu. When the menu is closed, focus is moved back to this control.
     * @returns True if the given menu was found.
     */
    openMenu(menuId?: string, opener?: HTMLElement): boolean;
    /**
     * Closes the menu with the given ID.
     *
     * If no ID is given, then the entire menu group is closed.
     *
     * If the given menu has opened one or more submenus, then those are also closed.
     * If the last open menu is closed, then the menu group also becomes closed.
     *
     * @param [menuId] - The ID of the menu to close.
     * @returns True if the given menu was found and closed.
     */
    closeMenu(menuId?: string): boolean;
    private closeMenusFromIndex_;
    /**
     * Whether this menu group has a currently open menu.
     */
    hasCurrentMenu(): boolean;
    private getCurrentMenu_;
    /**
     * Close the current menu.
     */
    closeCurrentMenu(): boolean;
    /**
     * Whether the menu with the given ID is currently open.
     *
     * @param [menuId] - The ID of the menu.
     */
    isMenuOpen(menuId?: string): boolean;
    /**
     * Update the list of menus whenever the `<slot>` contents change.
     * Note: the `slotchange` event bubbles up, so we don't have to manually attach
     * this listener to each nested `<slot>`.
     */
    private readonly _onMenuListChange;
    private readonly _onToggleMenu;
    private readonly _onCloseMenu;
    private readonly _onMenuChange;
    private readonly _onKeyDown;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-menu-group': MenuGroup;
    }
}

/**
 * A menu button that opens a {@link Menu}.
 */
declare class MenuButton extends Button {
    private _menuId;
    connectedCallback(): void;
    /**
     * The ID of the menu to open.
     */
    get menu(): string | null;
    set menu(menuId: string | null);
    private accessor _ariaControls;
    protected handleClick(): void;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-menu-button': MenuButton;
    }
}

/**
 * A button that closes its parent menu.
 *
 * This button must be placed inside a {@link Menu | `<theoplayer-menu>`}.
 */
declare class CloseMenuButton extends Button {
    protected handleClick(): void;
    accessor lang: string;
    willUpdate(changedProperties: PropertyValues): void;
    private _updateAriaLabel;
    protected render(): HTMLTemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-menu-close-button': CloseMenuButton;
    }
}

/**
 * A radio button that shows the label of a given media track,
 * and switches to that track when clicked.
 */
declare class MediaTrackRadioButton extends RadioButton {
    private accessor _track;
    accessor lang: string;
    /**
     * The media track that is controlled by this radio button.
     */
    get track(): MediaTrack | undefined;
    set track(track: MediaTrack | undefined);
    private _updateFromTrack;
    private _updateTrack;
    private readonly _onTrackChange;
    protected handleChange(): void;
    protected render(): HTMLTemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-media-track-radio-button': MediaTrackRadioButton;
    }
}

type TrackType = 'audio' | 'video' | 'subtitles';
/**
 * A radio group that shows a list of media or text tracks,
 * from which the user can choose an active track.
 */
declare class TrackRadioGroup extends LitElement {
    static styles: lit.CSSResult[];
    private _player;
    private _trackType;
    private accessor _tracksList;
    /**
     * The track type of the available tracks.
     *
     * Can be "audio", "video" or "subtitles".
     */
    get trackType(): TrackType;
    set trackType(trackType: TrackType);
    /**
     * If set, shows an "off" button to disable all tracks.
     *
     * 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;
    private _updateTracksList;
    private _getTracks;
    private readonly _updateTracks;
    private readonly _onChange;
    protected render(): HTMLTemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-track-radio-group': TrackRadioGroup;
    }
}

/**
 * `<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 accessor _track;
    accessor lang: string;
    /**
     * The text track that is controlled by this radio button.
     */
    get track(): TextTrack | undefined;
    set track(track: TextTrack | undefined);
    private _updateFromTrack;
    private _updateTrack;
    private readonly _onTrackChange;
    protected handleChange(): void;
    protected render(): HTMLTemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-text-track-radio-button': TextTrackRadioButton;
    }
}

/**
 * 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);
    private _updateFromTrackList;
    private _updateTrackList;
    private readonly _onTrackChange;
    protected handleChange(): void;
    protected render(): HTMLTemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-text-track-off-radio-button': TextTrackOffRadioButton;
    }
}

interface TextTrackStyleMap {
    fontFamily: string | undefined;
    fontColor: string | undefined;
    fontOpacity: number | undefined;
    fontSize: string | undefined;
    backgroundColor: string | undefined;
    backgroundOpacity: number | undefined;
    windowColor: string | undefined;
    windowOpacity: number | undefined;
    edgeStyle: EdgeStyle | undefined;
}
type TextTrackStyleOption = keyof TextTrackStyleMap;
/**
 * A radio group that shows a list of values for a text track style option,
 * from which the user can choose a desired value.
 *
 * @slot {@link RadioButton} - The possible options for the text track style option.
 *   For example: `<theoplayer-radio-button value="#ff0000">Red</theoplayer-radio-button>`
 */
declare class TextTrackStyleRadioGroup extends LitElement {
    static styles: lit.CSSResult[];
    private readonly _radioGroupRef;
    private _player;
    private _textTrackStyle;
    private _property;
    private _value;
    protected firstUpdated(): void;
    /**
     * The property name of the text track style option.
     *
     * One of {@link TextTrackStyleOption}.
     */
    get property(): TextTrackStyleOption;
    set property(property: TextTrackStyleOption);
    /**
     * The currently chosen value for the text track style option.
     */
    get value(): string;
    set value(value: string);
    get player(): ChromelessPlayer | undefined;
    set player(player: ChromelessPlayer | undefined);
    private readonly _onChange;
    private readonly _updateFromPlayer;
    private _updateToPlayer;
    protected render(): HTMLTemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-text-track-style-radio-group': TextTrackStyleRadioGroup;
    }
}

/**
 * A control that displays the value of a single text track style option
 * in a human-readable format.
 */
declare class TextTrackStyleDisplay extends LitElement {
    accessor lang: string;
    private _player;
    private _property;
    private _textTrackStyle;
    /**
     * The property name of the text track style option.
     *
     * One of {@link TextTrackStyleOption}.
     */
    get property(): TextTrackStyleOption;
    set property(property: TextTrackStyleOption);
    get player(): ChromelessPlayer | undefined;
    set player(player: ChromelessPlayer | undefined);
    private readonly _updateFromPlayer;
    protected render(): HTMLTemplateResult;
    private renderValue;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-text-track-style-display': TextTrackStyleDisplay;
    }
}

/**
 * A menu to change the {@link theoplayer!TextTrackStyle | text track style} of the player.
 *
 * @slot `heading` - A slot for the menu's heading.
 */
declare class TextTrackStyleMenu extends MenuGroup {
    static styles: lit.CSSResult[];
    accessor lang: string;
    protected render(): TemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-text-track-style-menu': TextTrackStyleMenu;
    }
}

/**
 * A menu to change the spoken language and subtitles of the stream.
 *
 * @slot `heading` - A slot for the menu's heading.
 */
declare class LanguageMenu extends MenuGroup {
    static styles: lit.CSSResult[];
    accessor lang: string;
    private _player;
    private _audioTrackList;
    private _textTrackList;
    get player(): ChromelessPlayer | undefined;
    set player(player: ChromelessPlayer | undefined);
    private accessor _hasAudioTracks;
    private accessor _hasSubtitles;
    private readonly _updateAudioTracks;
    private readonly _updateTextTracks;
    protected render(): TemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-language-menu': LanguageMenu;
    }
}

/**
 * A menu button that opens a {@link LanguageMenu}.
 *
 * When there are no alternative audio languages or subtitles, this button automatically hides itself.
 */
declare class LanguageMenuButton extends MenuButton {
    private _player;
    private _audioTrackList;
    private _textTrackList;
    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 {
    interface HTMLElementTagNameMap {
        'theoplayer-language-menu-button': LanguageMenuButton;
    }
}

/**
 * A radio group that shows a list of playback rates,
 * from which the user can choose a desired playback rate.
 *
 * @slot {@link RadioButton} - The possible options for the playback rate.
 *   The value of each radio button must be a valid number.
 *   For example: `<theoplayer-radio-button value="2">2x</theoplayer-radio-button>`
 */
declare class PlaybackRateRadioGroup extends LitElement {
    static styles: lit.CSSResult[];
    private readonly _radioGroupRef;
    private _player;
    private _value;
    protected firstUpdated(): void;
    /**
     * The currently chosen playback rate.
     */
    get value(): number;
    set value(value: number);
    get player(): ChromelessPlayer | undefined;
    set player(player: ChromelessPlayer | undefined);
    private readonly _onChange;
    private readonly _updateFromPlayer;
    protected render(): HTMLTemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-playback-rate-radio-group': PlaybackRateRadioGroup;
    }
}

/**
 * A menu button that opens a [playback rate menu]{@link PlaybackRateMenu}.
 *
 * @attribute menu - The ID of the playback rate menu.
 */
declare class PlaybackRateMenuButton extends MenuButton {
    accessor lang: string;
    willUpdate(changedProperties: PropertyValues): void;
    private _updateAriaLabel;
    protected render(): HTMLTemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-playback-rate-menu-button': PlaybackRateMenuButton;
    }
}

/**
 * A menu to change the playback rate of the player.
 *
 * @slot `heading` - A slot for the menu's heading.
 */
declare class PlaybackRateMenu extends Menu {
    accessor lang: string;
    protected renderMenuHeading(): HTMLTemplateResult;
    protected renderMenuContent(): HTMLTemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-playback-rate-menu': PlaybackRateMenu;
    }
}

/**
 * A control that displays the current playback rate of the player.
 */
declare class PlaybackRateDisplay extends LitElement {
    accessor lang: string;
    /**
     * The current playback rate.
     */
    accessor playbackRate: number;
    protected render(): HTMLTemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-playback-rate-display': PlaybackRateDisplay;
    }
}

/**
 * A control that displays the name of the active video quality.
 */
declare class ActiveQualityDisplay extends LitElement {
    /**
     * The currently active video quality.
     */
    accessor activeVideoQuality: VideoQuality | undefined;
    /**
     * The list of target video qualities.
     */
    accessor targetVideoQualities: VideoQuality[] | undefined;
    accessor lang: string;
    protected render(): HTMLTemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-active-quality-display': ActiveQualityDisplay;
    }
}

/**
 * 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 class QualityRadioButton extends RadioButton {
    private _track;
    private accessor _quality;
    accessor lang: string;
    /**
     * The video track containing the quality being controlled.
     */
    get track(): MediaTrack | undefined;
    set track(track: MediaTrack | undefined);
    /**
     * The video quality being controlled.
     */
    get quality(): VideoQuality | undefined;
    set quality(quality: VideoQuality | undefined);
    private readonly _updateFromTrack;
    private readonly _updateFromQuality;
    protected handleChange(): void;
    private _updateTargetQuality;
    protected render(): HTMLTemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-quality-radio-button': QualityRadioButton;
    }
}

/**
 * A radio group that shows a list of available video qualities,
 * from which the user can choose a desired target quality.
 */
declare class QualityRadioGroup extends LitElement {
    static styles: lit.CSSResult[];
    private _player;
    private _videoTracks;
    private accessor _track;
    accessor lang: string;
    protected firstUpdated(): void;
    get player(): ChromelessPlayer | undefined;
    set player(player: ChromelessPlayer | undefined);
    private readonly _onChange;
    private readonly _updateTrack;
    private _update;
    protected render(): HTMLTemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-quality-radio-group': QualityRadioGroup;
    }
}

/**
 * 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);
    protected handleClick(): void;
    protected render(): HTMLTemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-text-track-style-reset-button': TextTrackStyleResetButton;
    }
}

/**
 * A menu to change the settings of the player,
 * such as the active video quality and the playback speed.
 *
 * @slot `heading` - A slot for the menu's heading.
 */
declare class SettingsMenu extends MenuGroup {
    static styles: lit.CSSResult[];
    accessor lang: string;
    protected render(): TemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-settings-menu': SettingsMenu;
    }
}

/**
 * A menu button that opens a {@link SettingsMenu}.
 *
 * @attribute `menu` - The ID of the settings menu.
 */
declare class SettingsMenuButton extends MenuButton {
    accessor lang: string;
    willUpdate(changedProperties: PropertyValues): void;
    private _updateAriaLabel;
    protected render(): HTMLTemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-settings-menu-button': SettingsMenuButton;
    }
}

/**
 * A button that toggles fullscreen.
 */
declare class FullscreenButton extends Button {
    static styles: lit.CSSResult[];
    connectedCallback(): void;
    /**
     * Whether the player is in fullscreen mode.
     */
    accessor fullscreen: boolean;
    accessor lang: string;
    protected handleClick(): void;
    willUpdate(changedProperties: PropertyValues): void;
    private _updateAriaLabel;
    protected render(): HTMLTemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-fullscreen-button': FullscreenButton;
    }
}

/**
 * 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();
    add(color: string, from: number, to: number): void;
    toGradientStops(): string;
}

/**
 * A slider to select a value from a range.
 *
 * @cssproperty `--theoplayer-range-bar-color` - The color of the filled portion of the range track. Defaults to `#fff`.
 * @cssproperty `--theoplayer-range-track-height` - The height of the range track. Defaults to `4px`.
 * @cssproperty `--theoplayer-range-track-width` - The width of the range track. Defaults to `100%`.
 * @cssproperty `--theoplayer-range-track-background` - The background of the unfilled portion of the track. Defaults to `rgba(255, 255, 255, 0.2)`.
 * @cssproperty `--theoplayer-range-track-border` - The border of the track. Defaults to `none`.
 * @cssproperty `--theoplayer-range-track-border-radius` - The border radius of the track. Defaults to `0`.
 * @cssproperty `--theoplayer-range-track-box-shadow` - The box-shadow of the track. Defaults to `none`.
 * @cssproperty `--theoplayer-range-track-transition` - The CSS transition applied to the track. Defaults to `none`.
 * @cssproperty `--theoplayer-range-track-translate-x` - Horizontal translation of the track. Defaults to `0`.
 * @cssproperty `--theoplayer-range-track-translate-y` - Vertical translation of the track. Defaults to `0`.
 * @cssproperty `--theoplayer-range-track-outline` - The outline of the track.
 * @cssproperty `--theoplayer-range-track-outline-offset` - The outline offset of the track.
 * @cssproperty `--theoplayer-range-track-pointer-background` - The background of the hover/preview pointer indicator on the track. Defaults to `transparent`.
 * @cssproperty `--theoplayer-range-track-pointer-border-right` - The right border of the pointer indicator. Defaults to `none`.
 * @cssproperty `--theoplayer-range-thumb-width` - The width of the slider thumb. Defaults to `10px`.
 * @cssproperty `--theoplayer-range-thumb-height` - The height of the slider thumb. Defaults to `10px`.
 * @cssproperty `--theoplayer-range-thumb-background` - The background of the slider thumb. Defaults to `#fff`.
 * @cssproperty `--theoplayer-range-thumb-border` - The border of the slider thumb. Defaults to `none`.
 * @cssproperty `--theoplayer-range-thumb-border-radius` - The border radius of the slider thumb. Defaults to `10px`.
 * @cssproperty `--theoplayer-range-thumb-box-shadow` - The box-shadow of the slider thumb. Defaults to `1px 1px 1px transparent`.
 * @cssproperty `--theoplayer-range-thumb-transition` - The CSS transition applied to the slider thumb. Defaults to `none`.
 * @cssproperty `--theoplayer-range-thumb-transform` - The CSS transform applied to the slider thumb. Defaults to `none`.
 * @cssproperty `--theoplayer-range-thumb-opacity` - The opacity of the slider thumb. Defaults to `1`.
 * @cssproperty `--theoplayer-range-padding` - The padding around the range. Defaults to `--theoplayer-control-padding`.
 * @cssproperty `--theoplayer-range-padding-left` - The left padding around the range. Defaults to `--theoplayer-range-padding`.
 * @cssproperty `--theoplayer-range-padding-right` - The right padding around the range. Defaults to `--theoplayer-range-padding`.
 *
 * @group Components
 */
declare abstract class Range extends LitElement {
    static styles: lit.CSSResult[];
    protected readonly _rangeRef: Ref<HTMLInputElement>;
    private _min;
    private _max;
    private _value;
    private _disabled;
    private _hidden;
    private _inert;
    private _rangeWidth;
    private _thumbWidth;
    private accessor _pointerWidth;
    connectedCallback(): void;
    disconnectedCallback(): void;
    /**
     * Whether the range is disabled.
     *
     * When disabled, the slider value cannot be changed, and the slider thumb is hidden.
     */
    get disabled(): boolean;
    set disabled(disabled: boolean);
    /**
     * Whether the range is hidden.
     */
    get hidden(): boolean;
    set hidden(hidden: boolean);
    /**
     * Whether the range is inert.
     *
     * When inert, the slider value cannot be changed, but the slider thumb is still visible.
     */
    get inert(): boolean;
    set inert(inert: boolean);
    /**
     * The current value.
     */
    get value(): number;
    set value(value: number);
    /**
     * The current value.
     *
     * Setting this property does *not* trigger {@link handleInput}.
     * This should be used when synchronizing the range with external state,
     * e.g. when updating the value of a time range with the player's current time.
     */
    protected get rawValue(): number;
    protected set rawValue(value: number);
    /**
     * The minimum allowed value.
     */
    get min(): number;
    set min(min: number);
    /**
     * The maximum allowed value.
     */
    get max(): number;
    set max(max: number);
    /**
     * The granularity at which the value can change.
     *
     * If set to `"any"`, the value can change with arbitrary precision.
     */
    accessor step: number | 'any';
    /**
     * The device type, either "desktop", "mobile" or "tv".
     */
    accessor deviceType: DeviceType;
    accessor ariaLive: string | null;
    private readonly _onInput;
    protected handleInput(): void;
    protected _updateRange(useCachedWidth?: boolean): void;
    /**
     * The value for the `aria-label` attribute of the `<input type="range">` element.
     */
    protected abstract getAriaLabel(): string;
    /**
     * The value for the `aria-valuetext` attribute of the `<input type="range">` element.
     */
    protected abstract getAriaValueText(): string;
    /**
     * Native ranges have a single color for the whole track, which is different
     * from most video players that have a colored "bar" to the left of the handle
     * showing playback progress or volume level. Here we're building that bar
     * by using a background gradient that moves with the range value.
     */
    private updateBar_;
    /**
     * Build the color gradient for the range bar.
     * Creating an array so progress-bar can insert the buffered bar.
     */
    protected getBarColors(): ColorStops;
    private updateCachedWidths_;
    protected getMinimumStepForVisibleChange_(): number;
    private readonly _updatePointerBar;
    protected updatePointer_(mousePercent: number, rangeRect: DOMRectReadOnly): void;
    private readonly _onKeyDown;
    protected handleKeyDown_(e: KeyboardEvent): void;
    protected render(): HTMLTemplateResult;
    protected renderRangeExtras(): HTMLTemplateResult;
}

/**
 * A display that shows the thumbnail image at the current preview time
 * of a {@link TimeRange | `<theoplayer-time-range>`}.
 *
 * The first `metadata` text track whose label equals `"thumbnails"` is used as source for the thumbnails.
 * This track is expected to contain cues whose content is the URL for the thumbnail image.
 * If the thumbnail image URL ends with a [spatial fragment](https://www.w3.org/TR/media-frags/#naming-space)
 * (e.g. `#xywh=180,80,60,40`), then the thumbnail is clipped to the rectangle defined by that fragment.
 *
 * If the stream does not contain thumbnails, then this display shows nothing.
 *
 * @cssproperty `--theoplayer-preview-thumbnail-background` - The background of the preview thumbnail container. Defaults to `#fff`.
 * @cssproperty `--theoplayer-preview-thumbnail-padding` - The padding around the preview thumbnail. Defaults to `2px`.
 */
declare class PreviewThumbnail extends LitElement {
    static styles: lit.CSSResult[];
    private readonly _canvasRef;
    private _canvasContext;
    private readonly _thumbnailImageSource;
    private _player;
    private _textTrackList;
    private _previewTime;
    private _thumbnailTextTrack;
    private _lastLoadedThumbnailUrl;
    private accessor _thumbnailVisible;
    constructor();
    get player(): ChromelessPlayer | undefined;
    set player(player: ChromelessPlayer | undefined);
    get previewTime(): number;
    set previewTime(previewTime: number);
    private readonly _updateThumbnailTextTrack;
    private updateThumbnail_;
    private loadThumbnailImage_;
    private showThumbnail_;
    private hideThumbnail_;
    protected render(): HTMLTemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-preview-thumbnail': PreviewThumbnail;
    }
}

/**
 * A display that shows the current preview time of a {@link TimeRange | `<theoplayer-time-range>`}.
 */
declare class PreviewTimeDisplay extends LitElement {
    static styles: lit.CSSResult[];
    private _player;
    connectedCallback(): void;
    accessor previewTime: number;
    /**
     * If set, shows the remaining time of the stream.
     */
    accessor remaining: boolean;
    /**
     * If set, and the stream is a livestream, shows the remaining time (until the live point) of the stream.
     */
    accessor remainingWhenLive: boolean;
    /**
     * The stream type, either "vod", "live" or "dvr".
     */
    accessor streamType: StreamType;
    get player(): ChromelessPlayer | undefined;
    set player(player: ChromelessPlayer | undefined);
    private accessor _endTime;
    private readonly _updateFromPlayer;
    protected render(): HTMLTemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-preview-time-display': PreviewTimeDisplay;
    }
}

/**
 * A seek bar, showing the current time of the player,
 * and which seeks the player when clicked or dragged.
 *
 * @slot `preview` - A slot holding a preview of the seek time, shown while hovering the seek bar.
 *   By default, this shows the {@link PreviewTimeDisplay | preview time} and
 *   the {@link PreviewThumbnail | preview thumbnail}.
 *
 * @cssproperty `--theoplayer-preview-text-shadow` - The text shadow applied to the preview box shown while hovering the seek bar.
 *   Defaults to `0 0 4px rgba(0, 0, 0, 0.75)`.
 */
declare class TimeRange extends Range {
    static styles: lit.CSSResult[];
    private readonly _previewBoxEl;
    private _player;
    private _streamType;
    private _showAdMarkers;
    private _ads;
    private _pausedWhileScrubbing;
    private _autoAdvanceId;
    private _lastUpdateTime;
    private _lastCurrentTime;
    private _lastPlaybackRate;
    constructor();
    connectedCallback(): void;
    protected firstUpdated(_changedProperties: PropertyValues): void;
    disconnectedCallback(): void;
    get player(): ChromelessPlayer | undefined;
    set player(player: ChromelessPlayer | undefined);
    accessor lang: string;
    /**
     * The stream type, either "vod", "live" or "dvr".
     */
    get streamType(): StreamType;
    set streamType(streamType: StreamType);
    /**
     * Whether to show markers for advertisements on the seek bar.
     */
    get showAdMarkers(): boolean;
    set showAdMarkers(showAdMarkers: boolean);
    private readonly _updateFromPlayer;
    private updateDisabled_;
    protected getAriaLabel(): string;
    protected getAriaValueText(): string;
    protected handleInput(): void;
    private readonly _pauseOnScrubStart;
    private readonly _playOnScrubEnd;
    private shouldAutoAdvance_;
    private needToUpdateEveryFrame_;
    private readonly _toggleAutoAdvance;
    private readonly _autoAdvanceWhilePlaying;
    private accessor _previewRailTransform;
    protected updatePointer_(mousePercent: number, rangeRect: DOMRectReadOnly): void;
    protected getBarColors(): ColorStops;
    private readonly _onAdChange;
    protected handleKeyDown_(e: KeyboardEvent): void;
    protected renderRangeExtras(): HTMLTemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-time-range': TimeRange;
    }
}

/**
 * A volume slider, showing the current audio volume of the player,
 * and which changes the volume when clicked or dragged.
 */
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;
    protected getAriaLabel(): string;
    protected getAriaValueText(): string;
    protected handleInput(): void;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-volume-range': VolumeRange;
    }
}

/**
 * A screen that shows the details of a fatal player error.
 *
 * @cssproperty `--theoplayer-error-icon-color` - The color of the error icon. Defaults to `--theoplayer-icon-color`.
 * @cssproperty `--theoplayer-error-icon-width` - The width of the error icon. Defaults to `48px`.
 * @cssproperty `--theoplayer-error-icon-height` - The height of the error icon. Defaults to `48px`.
 * @cssproperty `--theoplayer-error-icon-gap` - The gap between the error icon and the text. Defaults to `10px`.
 * @cssproperty `--theoplayer-error-heading-color` - The text color of the error heading. Defaults to `#fff`.
 * @cssproperty `--theoplayer-error-heading-margin` - The margin around the error heading. Defaults to `0 0 10px`.
 * @cssproperty `--theoplayer-error-message-color` - The text color of the error message. Defaults to `#fff`.
 * @cssproperty `--theoplayer-error-message-margin` - The margin around the error message. Defaults to `0`.
 * @cssproperty `--theoplayer-error-min-width` - The minimum width of the error display. Defaults to `0`.
 * @cssproperty `--theoplayer-error-max-width` - The maximum width of the error display. Defaults to `80%`.
 */
declare class ErrorDisplay extends LitElement {
    static styles: lit.CSSResult[];
    static shadowRootOptions: ShadowRootInit;
    /**
     * The error.
     */
    accessor error: THEOplayerError | undefined;
    /**
     * Whether the player is in fullscreen mode.
     */
    accessor fullscreen: boolean;
    accessor lang: string;
    protected render(): lit_html.TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-error-display': ErrorDisplay;
    }
}

/**
 * A generic button to start and stop casting.
 *
 * For a concrete implementation, see {@link ChromecastButton} and {@link AirPlayButton}.
 * @group Components
 */
declare class CastButton extends Button {
    private _castApi;
    private _castState;
    constructor(options?: ButtonOptions);
    connectedCallback(): void;
    /**
     * The cast API for this cast button.
     */
    get castApi(): VendorCast | undefined;
    set castApi(castApi: VendorCast | undefined);
    /**
     * The current cast state.
     */
    get castState(): CastState;
    private set castState(value);
    protected handleClick(): void;
    private readonly _updateCastState;
}

/**
 * A button to start and stop casting using Chromecast.
 */
declare class ChromecastButton extends CastButton {
    static styles: lit.CSSResult[];
    private _player;
    private readonly _buttonId;
    constructor();
    connectedCallback(): void;
    get player(): ChromelessPlayer | undefined;
    set player(player: ChromelessPlayer | undefined);
    accessor lang: string;
    willUpdate(changedProperties: PropertyValues): void;
    private _updateAriaLabel;
    protected render(): lit_html.TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-chromecast-button': ChromecastButton;
    }
}

/**
 * A control that displays the casting status while using Chromecast.
 *
 * @cssproperty `--theoplayer-chromecast-display-icon-color` - The color of the Chromecast icon. Defaults to `--theoplayer-icon-color`.
 * @cssproperty `--theoplayer-chromecast-display-icon-width` - The width of the Chromecast icon. Defaults to `48px`.
 * @cssproperty `--theoplayer-chromecast-display-icon-height` - The height of the Chromecast icon. Defaults to `48px`.
 * @cssproperty `--theoplayer-chromecast-display-icon-gap` - The gap between the icon and the heading. Defaults to `10px`.
 * @cssproperty `--theoplayer-chromecast-display-heading-color` - The color of the heading text. Defaults to `#fff`.
 * @cssproperty `--theoplayer-chromecast-display-heading-font-size` - The font size of the heading text. Defaults to `--theoplayer-text-font-size`.
 * @cssproperty `--theoplayer-chromecast-display-heading-margin` - The margin around the heading text. Defaults to `0`.
 * @cssproperty `--theoplayer-chromecast-display-receiver-color` - The color of the receiver name text. Defaults to `#fff`.
 * @cssproperty `--theoplayer-chromecast-display-receiver-font-size` - The font size of the receiver name text. Defaults to `calc(1.25 * var(--theoplayer-text-font-size, 14px))`.
 * @cssproperty `--theoplayer-chromecast-display-receiver-margin` - The margin around the receiver name text. Defaults to `0`.
 */
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;
    set player(player: ChromelessPlayer | undefined);
    private readonly _updateFromPlayer;
    protected render(): HTMLTemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-chromecast-display': ChromecastDisplay;
    }
}

/**
 * A button to start and stop casting using AirPlay.
 */
declare class AirPlayButton extends CastButton {
    static styles: lit.CSSResult[];
    private _player;
    connectedCallback(): void;
    get player(): ChromelessPlayer | undefined;
    set player(player: ChromelessPlayer | undefined);
    accessor lang: string;
    willUpdate(changedProperties: PropertyValues): void;
    private _updateAriaLabel;
    protected render(): lit_html.TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-airplay-button': AirPlayButton;
    }
}

/**
 * An indicator that shows whether the player is currently waiting for more data to resume playback.
 *
 * @cssproperty `--theoplayer-loading-delay` - The delay before the loading spinner is shown. Defaults to `0.5s`.
 * @cssproperty `--theoplayer-loading-icon-color` - The color of the loading spinner. Defaults to `--theoplayer-icon-color`.
 * @cssproperty `--theoplayer-loading-icon-width` - The width of the loading spinner. Defaults to `48px`.
 * @cssproperty `--theoplayer-loading-icon-height` - The height of the loading spinner. Defaults to `--theoplayer-loading-icon-width`.
 */
declare class LoadingIndicator extends LitElement {
    static styles: lit.CSSResult[];
    private _player;
    get player(): ChromelessPlayer | undefined;
    set player(player: ChromelessPlayer | undefined);
    /**
     * Whether the player is waiting for more data. If set, the indicator is shown.
     */
    accessor loading: boolean;
    private readonly _updateFromPlayer;
    protected render(): HTMLTemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-loading-indicator': LoadingIndicator;
    }
}

/**
 * An overlay that receives and handles gestures on the player.
 *
 * On desktop devices, this plays or pauses the player whenever it is clicked.
 * On mobile devices, this currently does nothing.
 */
declare class GestureReceiver extends LitElement {
    static styles: lit.CSSResult[];
    private _player;
    private _playerElement;
    private _pointerType;
    connectedCallback(): void;
    get player(): ChromelessPlayer | undefined;
    set player(player: ChromelessPlayer | undefined);
    /**
     * The device type, either "desktop", "mobile" or "tv".
     */
    accessor deviceType: DeviceType;
    private readonly _onPointerDown;
    private readonly _onClick;
    handleTap(_event: MouseEvent): void;
    handleMouseClick(_event: MouseEvent): void;
    protected render(): HTMLTemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-gesture-receiver': GestureReceiver;
    }
}

/**
 * A button that shows whether the player is currently playing at the live point,
 * and seeks to the live point when clicked.
 *
 * @cssproperty `--theoplayer-live-button-color` - The color of the live indicator when not at the live point. Defaults to `rgb(140, 140, 140)`.
 * @cssproperty `--theoplayer-live-button-active-color` - The color of the live indicator when playing at the live point. Defaults to `red`.
 */
declare class LiveButton extends Button {
    static styles: lit.CSSResult[];
    private _player;
    private _liveThreshold;
    /**
     * Whether the player is paused.
     */
    accessor paused: boolean;
    /**
     * The stream type, either "vod", "live" or "dvr".
     */
    accessor streamType: StreamType;
    /**
     * The maximum distance (in seconds) from the live point that the player's current time
     * can be for it to still be considered "at the live point".
     *
     * If unset, defaults to 10 seconds.
     */
    get liveThreshold(): number;
    set liveThreshold(value: number);
    /**
     * 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 {
    interface HTMLElementTagNameMap {
        'theoplayer-live-button': LiveButton;
    }
}

/**
 * A container that can be assigned to a slot,
 * and behaves as if all its children are directly assigned to that slot.
 *
 * This behaves approximately like a regular `<div>` with style `display: contents`,
 * but receives some special treatment from e.g. {@link MenuGroup | `<theoplayer-menu-group>`}
 * which normally expects its {@link Menu | menu}s to be slotted in as direct children.
 * Those menus can also be children of a `<theoplayer-slot-container>` instead.
 *
 * This is an internal component, used mainly by Open Video UI for React.
 * You shouldn't need this under normal circumstances.
 * @internal
 */
declare class SlotContainer extends LitElement {
    static styles: lit.CSSResult[];
    protected render(): HTMLTemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-slot-container': SlotContainer;
    }
}

/**
 * A control that shows when an advertisement is playing,
 * and the number of the current ad in the ad break (if the break has multiple ads).
 *
 * @cssproperty `--theoplayer-ad-display-background` - The background of the ad display. Defaults to `#ffc50f`.
 * @cssproperty `--theoplayer-ad-display-border-radius` - The border radius of the ad display. Defaults to `2px`.
 * @cssproperty `--theoplayer-ad-display-padding` - The padding of the ad display. Defaults to `--theoplayer-control-padding`.
 * @cssproperty `--theoplayer-ad-display-text-color` - The text color of the ad display. Defaults to `#000`.
 */
declare class AdDisplay extends LitElement {
    static styles: lit.CSSResult[];
    private _player;
    private _ads;
    private accessor _currentAd;
    private accessor _totalAds;
    accessor lang: string;
    connectedCallback(): void;
    get player(): ChromelessPlayer | undefined;
    set player(player: ChromelessPlayer | undefined);
    private readonly _updateFromPlayer;
    protected render(): HTMLTemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-ad-display': AdDisplay;
    }
}

/**
 * A control that displays the remaining time of the current ad break.
 */
declare class AdCountdown extends LitElement {
    static styles: lit.CSSResult[];
    private _player;
    private _ads;
    private accessor _maxRemainingDuration;
    accessor lang: string;
    get player(): ChromelessPlayer | undefined;
    set player(player: ChromelessPlayer | undefined);
    private readonly _onAdChange;
    private readonly _update;
    protected render(): HTMLTemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-ad-countdown': AdCountdown;
    }
}

/**
 * A button to open the advertisement's click-through webpage.
 */
declare class AdClickThroughButton extends LinkButton {
    private _player;
    private _ads;
    private _clickThrough;
    constructor();
    connectedCallback(): void;
    /**
     * The click-through URL of the advertisement.
     */
    get clickThrough(): string | null;
    set clickThrough(clickThrough: string | null);
    accessor lang: string;
    get player(): ChromelessPlayer | undefined;
    set player(player: ChromelessPlayer | undefined);
    private readonly _updateFromPlayer;
    protected handleClick(): void;
    protected renderLinkContent(): HTMLTemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-ad-clickthrough-button': AdClickThroughButton;
    }
}

/**
 * A button that skips the current advertisement (if skippable).
 * If the ad cannot be skipped yet, it shows the remaining time until it can be skipped.
 *
 * @cssproperty `--theoplayer-ad-skip-background` - The background of the skip button. Defaults to `rgba(0, 0, 0, 0.7)`.
 * @cssproperty `--theoplayer-ad-skip-color` - The text color of the skip button. Defaults to `#fff`.
 * @cssproperty `--theoplayer-ad-skip-border` - The border of the skip button. Defaults to `1px solid rgba(255, 255, 255, 0.5)`.
 * @cssproperty `--theoplayer-ad-skip-hover-background` - The background of the skip button when hovered. Defaults to `rgba(0, 0, 0, 0.9)`.
 * @cssproperty `--theoplayer-ad-skip-hover-color` - The text color of the skip button when hovered. Defaults to `--theoplayer-ad-skip-color`.
 * @cssproperty `--theoplayer-ad-skip-hover-border` - The border of the skip button when hovered. Defaults to `1px solid #fff`.
 * @cssproperty `--theoplayer-ad-skip-countdown-background` - The background of the countdown shown before the ad is skippable. Defaults to `transparent`.
 * @cssproperty `--theoplayer-ad-skip-countdown-color` - The text color of the countdown. Defaults to `--theoplayer-ad-skip-color`.
 * @cssproperty `--theoplayer-ad-skip-countdown-border` - The border of the countdown. Defaults to `1px solid transparent`.
 * @cssproperty `--theoplayer-ad-skip-font-size` - The font size of the skip button text. Defaults to `--theoplayer-text-font-size`.
 * @cssproperty `--theoplayer-ad-skip-line-height` - The line height of the skip button text. Defaults to `--theoplayer-text-content-height`.
 * @cssproperty `--theoplayer-ad-skip-icon-width` - The width of the skip button icon. Defaults to `--theoplayer-control-height`.
 * @cssproperty `--theoplayer-ad-skip-icon-height` - The height of the skip button icon. Defaults to `--theoplayer-control-height`.
 */
declare class AdSkipButton extends Button {
    static styles: lit.CSSResult[];
    private _player;
    private _ads;
    private accessor _showCountdown;
    private accessor _timeToSkip;
    accessor lang: string;
    connectedCallback(): void;
    get player(): ChromelessPlayer | undefined;
    set player(player: ChromelessPlayer | undefined);
    protected handleClick(): void;
    private readonly _onAdChange;
    private readonly _update;
    protected render(): HTMLTemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-ad-skip-button': AdSkipButton;
    }
}

/**
 * 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 */
declare const StateReceiverProps: "theoplayerUiObservedProperties";
interface StateReceiverPropertyMap {
    player: ChromelessPlayer | undefined;
    fullscreen: boolean;
    deviceType: DeviceType;
    streamType: StreamType;
    playbackRate: number;
    activeVideoQuality: VideoQuality | undefined;
    targetVideoQualities: VideoQuality[] | undefined;
    error: THEOplayerError | undefined;
    previewTime: number;
    lang: string;
}
/**
 * A custom element that automatically receives selected state updates
 * from an ancestor {@link UIContainer | `<theoplayer-ui>`} element.
 *
 * Do not implement this interface directly, instead use {@link stateReceiver} or {@link StateReceiverMixin}.
 *
 * @see {@link stateReceiver}
 * @see {@link StateReceiverMixin}
 */
interface StateReceiverElement extends Partial<StateReceiverPropertyMap>, Element {
    /**
     * The names of the properties this element will receive.
     */
    readonly [StateReceiverProps]: Array<keyof StateReceiverPropertyMap>;
}
/**
 * Decorates a custom element class, such that it will automatically receive selected state updates
 * from an ancestor {@link UIContainer | `<theoplayer-ui>`} element.
 *
 * For each property name in `props`, the custom element *MUST* implement a corresponding property with a setter.
 * For example, if `props` equals `["player", "fullscreen"]`, then the element must have writable `player` and `fullscreen`
 * properties.
 *
 * @param props - The names of the properties this element will receive.
 * @returns A class decorator.
 * @see {@link StateReceiverElement}
 */
declare const stateReceiver: (props: Array<keyof StateReceiverPropertyMap>) => (target: Constructor<Element>, _context: ClassDecoratorContext<Constructor<Element>>) => void;
/**
 * A [mixin class](https://www.typescriptlang.org/docs/handbook/mixins.html) to apply on the superclass of a custom element,
 * such that it will automatically receive selected state updates from an ancestor {@link UIContainer | `<theoplayer-ui>`} element.
 *
 * For each property name in `props`, the custom element *MUST* implement a corresponding property with a setter.
 * For example, if `props` equals `["player", "fullscreen"]`, then the element must have writable `player` and `fullscreen`
 * properties.
 *
 * @param base - The superclass for the new element class.
 * @param props - The names of the properties this element will receive.
 * @returns A class constructor that extends `base` and implements {@link StateReceiverElement}.
 * @see {@link StateReceiverElement}
 * @deprecated Use {@link stateReceiver} decorator instead.
 */
declare function StateReceiverMixin<T extends Constructor<Element>>(base: T, props: Array<keyof StateReceiverPropertyMap>): T & Constructor<StateReceiverElement>;

declare enum ExtensionSlot {
    TopControlBar = "top-control-bar",
    BottomControlBar = "bottom-control-bar",
    Menu = "menu"
}

declare const READY_EVENT: "theoplayerready";

/**
 * The container element for a THEOplayer UI.
 *
 * This element provides a basic layout structure for a general player UI, and handles the creation and management
 * of a {@link theoplayer!ChromelessPlayer | THEOplayer player instance} for this UI.
 *
 * ## Usage
 *
 * 1. Create a `<theoplayer-ui>` element.
 * 2. Place your UI elements as children of the `<theoplayer-ui>`.
 *    Set their `slot` attribute to one of the defined slots (see below) to place them in the layout.
 * 3. Set its `configuration` attribute or property to a valid player configuration.
 * 4. Set its `source` attribute or property to a valid stream source.
 *
 * ## Customization
 *
 * This element does not provide any UI elements by default, you need to add all elements as children of
 * the `<theoplayer-ui>` element. If you're looking for a simple out-of-the-box player experience instead,
 * see {@link DefaultUI | `<theoplayer-default-ui>`}.
 *
 * The styling can be controlled using CSS custom properties (see below).
 *
 * @slot `(no` name, default slot) - A slot for controls at the bottom of the player.
 *   Can be used for controls such as a play button ({@link PlayButton | `<theoplayer-play-button>`}) or a seek bar
 *   ({@link TimeRange | `<theoplayer-time-range>`}).
 * @slot `top-chrome` - A slot for controls at the top of the player.
 *   Can be used to display the stream's title, or for a cast button ({@link ChromecastButton | `<theoplayer-chromecast-button>`}).
 * @slot `middle-chrome` - A slot for controls in the middle of the player (between the top and bottom chrome).
 * @slot `centered-chrome` - A slot for controls in the center of the player, layered on top of other controls.
 * @slot `centered-loading` - A slot for a loading indicator in the center of the player, layered on top of other controls
 *   but behind the centered chrome.
 * @slot `menu` - A slot for extra menus (see {@link Menu | `<theoplayer-menu>`}).
 * @slot `error` - A slot for an error display, to show when the player encounters a fatal error
 *   (see {@link ErrorDisplay | `<theoplayer-error-display>`}).
 *
 * @cssproperty `--theoplayer-min-width` - The minimum width of the player. Defaults to `300px`.
 * @cssproperty `--theoplayer-height` - The height of the player. Defaults to `unset`.
 *   Ignored when `--theoplayer-aspect-ratio` is set.
 * @cssproperty `--theoplayer-aspect-ratio` - The aspect ratio of the player. Defaults to `16 / 9`.
 *   When {@link fluid} is set, this is automatically set to the video's natural aspect ratio.
 *   Set this to `none` (or any invalid `<length>`) to disable, for example when you want to use `--theoplayer-height` instead.
 * @cssproperty `--theoplayer-background` - The background color of the player. Defaults to `#000`.
 * @cssproperty `--theoplayer-text-color` - The text color of a control. Defaults to `#fff`.
 * @cssproperty `--theoplayer-text-font-size` - The font size of any text inside a control. Defaults to `14px`.
 * @cssproperty `--theoplayer-control-height` - The height of a control. Defaults to `24px`.
 * @cssproperty `--theoplayer-control-padding` - The padding around a control. Defaults to `10px`.
 * @cssproperty `--theoplayer-video-border-radius` - The border radius of the `<video>` element. Defaults to `0`.
 * @cssproperty `--theoplayer-video-object-fit` - The `object-fit` of the `<video>` element. Defaults to `contain`.
 * @cssproperty `--theoplayer-control-backdrop-background` - The background shown behind all controls. Defaults to `transparent`.
 * @cssproperty `--theoplayer-menu-backdrop-background` - The background of the menu layer. Defaults to `rgba(0, 0, 0, 0.5)`.
 * @cssproperty `--theoplayer-menu-layer-padding` - Padding of the menu layer. Defaults to `10px`.
 * @cssproperty `--theoplayer-menu-min-width` - Minimum width of the menu (desktop). Defaults to `200px`.
 * @cssproperty `--theoplayer-error-background` - The background of the error layer shown when the player has a fatal error. Defaults to `rgba(0, 0, 0, 0.5)`.
 */
declare class UIContainer extends LitElement {
    static styles: lit.CSSResult[];
    static shadowRootOptions: ShadowRootInit;
    /**
     * Fired when the backing player is created, and the {@link UIContainer.player} property is set.
     *
     * @group Events
     */
    static READY_EVENT: typeof READY_EVENT;
    private _configuration;
    private readonly _playerRef;
    private readonly _menuRef;
    private readonly _menuGroupRef;
    private _menuOpened;
    private _menuOpener;
    private readonly _topChromeRef;
    private readonly _topChromeSlotRef;
    private readonly _bottomChromeRef;
    private readonly _bottomChromeSlotRef;
    private _pointerType;
    private _lastPointerUpTime;
    private readonly _mutationObserver;
    private readonly _resizeObserver;
    private readonly _stateReceivers;
    private _player;
    private _source;
    private _muted;
    private _autoplay;
    private _fullscreen;
    private _deviceType;
    private _streamType;
    private _fluid;
    private _language;
    private _userIdle;
    private _userIdleTimeout;
    private _isUserActive;
    private _userIdleTimer;
    private _paused;
    private _ended;
    private _casting;
    private _dvrThreshold;
    private _previewTime;
    private _activeVideoTrack;
    /**
     * Creates a new THEOplayer UI container element.
     *
     * @param configuration - The player configuration.
     *   Will be passed to the {@link theoplayer!ChromelessPlayer | ChromelessPlayer} constructor to create
     *   the underlying THEOplayer instance.
     *   Can also be set later on through the {@link UIContainer.configuration} property.
     */
    constructor(configuration?: UIPlayerConfiguration);
    /**
     * The underlying THEOplayer player instance.
     *
     * This is constructed automatically as soon as a valid {@link configuration} is set.
     */
    get player(): ChromelessPlayer | undefined;
    /**
     * The player configuration.
     *
     * Used to create the underlying THEOplayer instance.
     */
    get configuration(): UIPlayerConfiguration;
    set configuration(playerConfiguration: UIPlayerConfiguration);
    private _setConfiguration;
    /**
     * The player's current source.
     */
    get source(): SourceDescription | undefined;
    set source(value: SourceDescription | undefined);
    private _setSource;
    /**
     * Whether to automatically adjusts the player's height to fit the video's aspect ratio.
     */
    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.
     */
    get muted(): boolean;
    set muted(value: boolean);
    /**
     * Whether the player should attempt to automatically start playback.
     */
    get autoplay(): boolean;
    set autoplay(value: boolean);
    /**
     * Whether the UI is in fullscreen mode.
     */
    get fullscreen(): boolean;
    private set fullscreen(value);
    /**
     * Whether the player is paused.
     *
     * This reflects `player.paused`
     */
    get paused(): boolean;
    private set paused(value);
    /**
     * Whether the player is ended.
     *
     * This reflects `player.ended`
     */
    get ended(): boolean;
    private set ended(value);
    /**
     * Whether the player is casting to a remote receiver.
     *
     * This reflects `player.cast.casting`
     */
    get casting(): boolean;
    private set casting(value);
    /**
     * Whether the user has stopped interacting with the UI and is considered to be "idle".
     */
    get userIdle(): boolean;
    private set userIdle(value);
    /**
     * The timeout (in seconds) between when the user stops interacting with the UI,
     * and when the user is considered to be "idle".
     */
    get userIdleTimeout(): number;
    set userIdleTimeout(value: number | undefined);
    /**
     * The device type, either "desktop", "mobile" or "tv".
     */
    get deviceType(): DeviceType;
    set deviceType(value: DeviceType);
    /**
     * Whether the user is on a mobile device.
     *
     * Equivalent to `deviceType == "mobile"`.
     */
    private accessor mobile;
    /**
     * Whether the user is on a TV device.
     *
     * Equivalent to `deviceType == "tv"`.
     */
    private accessor tv;
    /**
     * The stream type, either "vod", "live" or "dvr".
     *
     * If you know in advance that the source will be a livestream, you can set this property to avoid a screen flicker
     * when the player switches between its VOD-specific and live-only controls.
     */
    get streamType(): StreamType;
    /**
     * @deprecated use {@link SourceDescription.streamType} instead.
     */
    set streamType(streamType: StreamType);
    /**
     * The minimum length (in seconds) of a livestream's sliding window for the stream to be DVR
     * and its stream type to be set to "dvr".
     */
    get dvrThreshold(): number;
    set dvrThreshold(value: number);
    /**
     * Whether the player has (previously) started playback for this stream.
     *
     * Can be used in CSS to show/hide certain initial controls, such as a poster image or a centered play button.
     */
    private accessor _hasFirstPlay;
    /**
     * Whether the player is playing a linear ad.
     *
     * This reflects `player.ads.playing`.
     */
    private accessor _isPlayingAd;
    /**
     * Whether the player has encountered a fatal error.
     */
    private accessor _hasError;
    /**
     * Whether the player is in "full window" mode,
     * as a fallback when the player cannot use the "native" fullscreen mode.
     */
    private accessor _isFullWindow;
    connectedCallback(): void;
    private tryInitializePlayer_;
    protected createRenderRoot(): HTMLElement | DocumentFragment;
    protected firstUpdated(): void;
    protected updated(): void;
    disconnectedCallback(): void;
    private readonly _onMutation;
    private readonly _onSlotChange;
    private readonly registerStateReceiver_;
    private readonly unregisterStateReceiver_;
    private propagateStateToReceiver_;
    private propagatePlayerToAllReceivers_;
    private removeStateFromReceiver_;
    /**
     * Whether any {@link Menu | menu} is currently open.
     */
    private get menuOpened_();
    private set menuOpened_(value);
    private openMenu_;
    private closeMenu_;
    private readonly _onToggleMenu;
    private readonly _onCloseMenu;
    private readonly _onMenuChange;
    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;
    private readonly _updateError;
    private readonly _onPlay;
    private readonly _onPause;
    private readonly _updatePausedAndEnded;
    private readonly _updateEnded;
    private readonly _updateStreamType;
    private computeStreamType_;
    private readonly _updatePlaybackRate;
    private readonly _updateMuted;
    private readonly _updateActiveVideoTrack;
    private readonly _updateActiveVideoQuality;
    private readonly _updateTargetVideoQualities;
    private readonly _updateCasting;
    private readonly _updatePlayingAd;
    private readonly _onSourceChange;
    private isUserIdle_;
    private setUserActive_;
    private readonly setUserIdle_;
    private readonly scheduleUserIdle_;
    private updateUserIdle_;
    private isPlayerOrMedia_;
    private readonly _onTvKeyDown;
    private readonly _onKeyUp;
    private readonly _onPointerUp;
    private readonly _onClickAfterPointerUp;
    private readonly _onPointerMove;
    private readonly _onMouseLeave;
    private readonly _onChromeSlotTransition;
    private readonly _updateTextTrackMargins;
    private readonly _onPreviewTimeChange;
    private addPlayerListeners_;
    private removePlayerListeners_;
    private readonly _onDestroy;
    protected render(): HTMLTemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-ui': UIContainer;
    }
}

/**
 * A default UI for THEOplayer.
 *
 * This default UI provides a great player experience out-of-the-box, that works well on all types of devices
 * and for all types of streams. It provides all the common playback controls for playing, seeking,
 * changing languages and qualities. It also supports advertisements and casting.
 *
 * ## Usage
 *
 * 1. Create a `<theoplayer-default-ui>` element.
 * 2. Set its `configuration` attribute or property to a valid player configuration.
 * 3. Set its `source` attribute or property to a valid stream source.
 * 4. Optionally, customize the player using CSS custom properties and/or extra controls.
 *
 * ## Customization
 *
 * The styling can be controlled using CSS custom properties (see {@link UIContainer | `<theoplayer-ui>`}).
 * Additional controls can be added to the `top-control-bar` and `bottom-control-bar` slots.
 * For more extensive customizations, we recommend defining your own custom UI using
 * a {@link UIContainer | `<theoplayer-ui>`}.
 *
 * @slot `title` - A slot for the stream's title in the top control bar.
 * @slot `top-control-bar` - A slot for extra UI controls in the top control bar.
 * @slot `centered-chrome` - A slot to replace the controls in the center of the player,
 *   layered on top of other controls.
 * @slot `bottom-control-bar` - A slot for extra UI controls in the bottom control bar.
 * @slot `menu` - A slot for extra menus (see {@link Menu | `<theoplayer-menu>`}).
 * @slot `error` - A slot for an error display, to show when the player encounters a fatal error.
 *   By default, this shows an {@link ErrorDisplay | `<theoplayer-error-display>`}.
 *
 * @cssproperty `--theoplayer-text-color` - The text color of a control. Defaults to `#fff`.
 * @cssproperty `--theoplayer-text-font-size` - The font size of any text inside a control. Defaults to `14px`.
 * @cssproperty `--theoplayer-control-height` - The height of a control. Defaults to `24px`.
 * @cssproperty `--theoplayer-control-padding` - The padding around a control. Defaults to `10px`.
 * @cssproperty `--theoplayer-control-background-gradient-stops` - The gradient stops used for the subtle
 *   backdrop gradient behind the top and bottom control bars on desktop. Defaults to a smooth
 *   transparent-to-black gradient.
 * @cssproperty `--theoplayer-mobile-control-backdrop-background` - The background applied to the entire player
 *   on mobile when the controls are shown. Defaults to `rgba(0, 0, 0, 0.5)`.
 * @cssproperty `--theoplayer-centered-chrome-button-icon-width` - The icon width of buttons in the centered
 *   chrome slot. Defaults to `48px`.
 * @cssproperty `--theoplayer-centered-chrome-control-height` - The control height of elements in the centered
 *   chrome slot. Defaults to `48px`.
 * @cssproperty `--theoplayer-center-play-button-icon-color` - The icon color of the centered play button.
 *   Overrides `--theoplayer-play-button-icon-color` for this button. Defaults to `unset`.
 * @cssproperty `--theoplayer-time-range-control-height` - The control height of the time range (seek bar).
 *   Defaults to `12px`.
 * @cssproperty `--theoplayer-time-range-track-pointer-background` - The background of the hover/preview pointer
 *   on the time range. Defaults to `rgba(255, 255, 255, 0.5)`.
 * @cssproperty `--theoplayer-volume-range-track-width` - The width of the volume range track when expanded on hover.
 *   Defaults to `70px`.
 * @cssproperty `--theoplayer-ad-chrome-control-height` - The control height for elements inside the ad chrome.
 *   Defaults to `12px`.
 * @cssproperty `--theoplayer-ad-control-height` - The control height of playback controls while an ad is playing.
 *   Defaults to `16px`.
 */
declare class DefaultUI extends LitElement {
    static styles: lit.CSSResult[];
    static shadowRootOptions: ShadowRootInit;
    /**
     * Fired when the backing player is created, and the {@link DefaultUI.player} property is set.
     *
     * @group Events
     */
    static READY_EVENT: typeof READY_EVENT;
    protected readonly _uiRef: Ref<UIContainer>;
    private accessor _timeRangeInert;
    private _timeRangeInertTimeout;
    private _appliedExtensions;
    private _configuration;
    private _source;
    private _language;
    private _userIdleTimeout;
    private _deviceType;
    private _dvrThreshold;
    private accessor titleSlotNodes;
    /**
     * Creates a new THEOplayer default UI.
     *
     * @param configuration - The player configuration.
     *   Will be passed to the {@link theoplayer!ChromelessPlayer | ChromelessPlayer} constructor to create
     *   the underlying THEOplayer instance.
     *   Can also be set later on through the {@link DefaultUI.configuration} property.
     */
    constructor(configuration?: UIPlayerConfiguration);
    /**
     * The underlying THEOplayer player instance.
     *
     * This is constructed automatically as soon as a valid {@link configuration} is set.
     */
    get player(): ChromelessPlayer | undefined;
    /**
     * The player's {@link theoplayer!UIPlayerConfiguration | configuration}.
     *
     * Used to create the underlying THEOplayer instance.
     * When set as an attribute, this must be a JSON string.
     */
    get configuration(): UIPlayerConfiguration;
    set configuration(configuration: UIPlayerConfiguration);
    /**
     * The player's {@link theoplayer!SourceDescription | current source}.
     *
     * When set as an attribute, this must be a JSON string.
     */
    get source(): SourceDescription | undefined;
    set source(source: SourceDescription | undefined);
    /**
     * 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.
     *
     * This reflects `player.muted`.
     */
    accessor muted: boolean;
    /**
     * Whether the player should attempt to automatically start playback.
     */
    accessor autoplay: boolean;
    /**
     * The stream type, either "vod", "live" or "dvr".
     *
     * If you know in advance that the source will be a livestream, you can set this property to avoid a screen flicker
     * when the player switches between its VOD-specific and live-only controls.
     *
     * Can be used to show/hide certain UI controls specific for livestreams, such as
     * a {@link LiveButton | `<theoplayer-live-button>`}.
     */
    accessor streamType: StreamType;
    /**
     * Whether the user has stopped interacting with the UI and is considered to be "idle".
     */
    get userIdle(): boolean;
    /**
     * The timeout (in seconds) between when the user stops interacting with the UI,
     * and when the user is considered to be "idle".
     */
    get userIdleTimeout(): number;
    set userIdleTimeout(value: number | undefined);
    /**
     * The device type, either "desktop", "mobile" or "tv".
     *
     * This attribute can be used in CSS to show/hide certain device-specific UI controls.
     */
    get deviceType(): DeviceType;
    set deviceType(value: DeviceType);
    /**
     * Whether the user is on a mobile device.
     *
     * Equivalent to `deviceType == "mobile"`.
     */
    private accessor mobile;
    /**
     * Whether the user is on a TV device.
     *
     * Equivalent to `deviceType == "tv"`.
     */
    private accessor tv;
    /**
     * The minimum length (in seconds) of a livestream's sliding window for the stream to be DVR
     * and its stream type to be set to "dvr".
     */
    get dvrThreshold(): number;
    set dvrThreshold(value: number);
    private accessor _hasTitle;
    connectedCallback(): void;
    disconnectedCallback(): void;
    protected firstUpdated(): void;
    protected _onUiReady(): void;
    private readonly _updateStreamType;
    private readonly _updateUserIdle;
    private readonly _onTitleSlotChange;
    protected render(): HTMLTemplateResult;
    protected renderUiContent(): HTMLTemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'theoplayer-default-ui': DefaultUI;
    }
}

/**
 * An extension for the default UI.
 *
 * This is called whenever a `<theoplayer-default-ui>` element is created.
 * The extension can then choose to modify this element, for example by appending extra elements
 * or attaching extra event listeners.
 *
 * @example
 * The following extension adds an extra button to the bottom control bar of every default UI:
 * ```javascript
 * THEOplayerUI.registerExtension((ui) => {
 *     // Create a new button
 *     const button = new THEOplayerUI.Button();
 *     button.innerHTML = "Click me!";
 *     button.addEventListener("click", () => alert("I was clicked!"));
 *     // Place it in the bottom control bar
 *     button.slot = "bottom-control-bar";
 *     ui.appendChild(button);
 * });
 * ```
 * See the documentation of `<theoplayer-default-ui>` for more information about the available slots
 * in which you can add extra elements.
 */
type Extension = (ui: DefaultUI) => void;
/**
 * Registers an extension for the default UI.
 *
 * @param extension The extension.
 * @see {@link Extension}
 */
declare function registerExtension(extension: Extension): void;

/**
 * `<theolive-default-ui>` - A default UI for THEOlive.
 */
declare class THEOliveDefaultUI extends DefaultUI {
    static styles: lit.CSSResult[];
    private accessor _announcementType;
    private accessor _announcementMessage;
    private accessor _hidePlayButton;
    private accessor _hideErrorDisplay;
    constructor(configuration?: UIPlayerConfiguration);
    protected _onUiReady(): void;
    private onLoadChannelStart;
    private onChannelOffline;
    private onChannelLoaded;
    private onError;
    private hidePlayerError;
    private stopHidingPlayerError;
    private showMessage_;
    private hideMessage_;
    protected renderUiContent(): HTMLTemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'theolive-default-ui': THEOliveDefaultUI;
    }
}

declare enum Attribute {
    CONFIGURATION = "configuration",
    SOURCE = "source",
    AUTOPLAY = "autoplay",
    MUTED = "muted",
    FULLSCREEN = "fullscreen",
    FULLWINDOW = "fullwindow",
    FLUID = "fluid",
    DEVICE_TYPE = "device-type",
    MOBILE = "mobile",
    TV = "tv",
    TV_FOCUS = "tv-focus",
    MOBILE_ONLY = "mobile-only",
    MOBILE_HIDDEN = "mobile-hidden",
    TV_ONLY = "tv-only",
    TV_HIDDEN = "tv-hidden",
    USER_IDLE = "user-idle",
    USER_IDLE_TIMEOUT = "user-idle-timeout",
    NO_AUTO_HIDE = "no-auto-hide",
    DISABLED = "disabled",
    INERT = "inert",
    HIDDEN = "hidden",
    PAUSED = "paused",
    ENDED = "ended",
    VOLUME_LEVEL = "volume-level",
    CASTING = "casting",
    LOADING = "loading",
    STREAM_TYPE = "stream-type",
    LIVE = "live",
    LIVE_ONLY = "live-only",
    LIVE_HIDDEN = "live-hidden",
    LIVE_THRESHOLD = "live-threshold",
    DVR_THRESHOLD = "dvr-threshold",
    REMAINING = "remaining",
    REMAINING_WHEN_LIVE = "remaining-when-live",
    SHOW_DURATION = "show-duration",
    STEREO = "stereo",
    SEEK_OFFSET = "seek-offset",
    MENU = "menu",
    MENU_OPENED = "menu-opened",
    MENU_CLOSE_ON_INPUT = "menu-close-on-input",
    ARIA_LABEL = "aria-label",
    ARIA_LIVE = "aria-live",
    ARIA_CHECKED = "aria-checked",
    HAS_AUDIO = "has-audio",
    HAS_SUBTITLES = "has-subtitles",
    HAS_ERROR = "has-error",
    HAS_FIRST_PLAY = "has-first-play",
    CAST_STATE = "cast-state",
    TRACK_TYPE = "track-type",
    SHOW_OFF = "show-off",
    PLAYING_AD = "playing-ad",
    SHOW_AD_MARKERS = "show-ad-markers",
    CLICKTHROUGH = "clickthrough",
    PROPERTY = "property",
    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 error message for an {@link ErrorDisplay}.
     *
     * This is optional. If not provided, the original `error.message` is used.
     *
     * @param error A player error.
     */
    errorMessage(error: THEOplayerError): 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, 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;