@theoplayer/web-ui 1.0.0

package/dist/THEOplayerUI.d.ts

@@ -0,0 +1,1752 @@
+/*!
+ * THEOplayer Web UI v1.0.0
+ * License: MIT
+ */
+import { ChromelessPlayer, VideoQuality, THEOplayerError, MediaTrack, TextTrack, TextTracksList, EdgeStyle, VendorCast, CastState, PlayerConfiguration, SourceDescription } from 'theoplayer';
+
+/**
+ * A horizontal control bar that can contain other controls.
+ *
+ * @group Components
+ */
+declare class ControlBar extends HTMLElement {
+    constructor();
+    connectedCallback(): void;
+}
+
+declare enum Attribute {
+    CONFIGURATION = "configuration",
+    SOURCE = "source",
+    AUTOPLAY = "autoplay",
+    MUTED = "muted",
+    FULLSCREEN = "fullscreen",
+    FLUID = "fluid",
+    MOBILE = "mobile",
+    MOBILE_ONLY = "mobile-only",
+    MOBILE_HIDDEN = "mobile-hidden",
+    USER_IDLE = "user-idle",
+    USER_IDLE_TIMEOUT = "user-idle-timeout",
+    NO_AUTO_HIDE = "no-auto-hide",
+    DISABLED = "disabled",
+    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",
+    SEEK_OFFSET = "seek-offset",
+    MENU = "menu",
+    MENU_OPENED = "menu-opened",
+    MENU_CLOSE_ON_INPUT = "menu-close-on-input",
+    ARIA_CHECKED = "aria-checked",
+    HAS_AUDIO = "has-audio",
+    HAS_SUBTITLES = "has-subtitles",
+    HAS_ERROR = "has-error",
+    HAS_FIRST_PLAY = "has-first-play",
+    HAS_TITLE = "has-title",
+    CAST_STATE = "cast-state",
+    TRACK_TYPE = "track-type",
+    SHOW_OFF = "show-off",
+    PLAYING_AD = "playing-ad",
+    CLICKTHROUGH = "clickthrough",
+    PROPERTY = "property",
+    VALUE = "value"
+}
+
+interface ButtonOptions {
+    template: HTMLTemplateElement;
+}
+declare function buttonTemplate(button: string, extraCss?: string): string;
+/**
+ * A basic button.
+ *
+ * @attribute `disabled` - Whether the button is disabled. When disabled, the button cannot be clicked.
+ * @group Components
+ */
+declare class Button extends HTMLElement {
+    static get observedAttributes(): Attribute[];
+    /**
+     * 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 passing a different {@link ButtonOptions.template} in the options,
+     * using {@link buttonTemplate} to correctly style the custom template.
+     *
+     * @param options - The options for this button.
+     */
+    constructor(options?: ButtonOptions);
+    protected _upgradeProperty(prop: keyof this): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Whether the button is disabled.
+     *
+     * When disabled, the button cannot be clicked.
+     */
+    get disabled(): boolean;
+    set disabled(disabled: boolean);
+    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    private readonly _onKeyDown;
+    private readonly _onClick;
+    /**
+     * Handle a button click.
+     *
+     * By default, this does nothing. Subclasses can override this method to add behavior to the button.
+     */
+    protected handleClick(): void;
+}
+
+declare function linkButtonTemplate(button: string, extraCss?: string): string;
+/**
+ * A {@link Button | button} that opens a hyperlink.
+ *
+ * @attribute `disabled` - Whether the button is disabled. When disabled, the button cannot be clicked.
+ * @group Components
+ */
+declare class LinkButton extends HTMLElement {
+    private readonly _linkEl;
+    static get observedAttributes(): Attribute[];
+    constructor(options?: ButtonOptions);
+    protected _upgradeProperty(prop: keyof this): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Whether the button is disabled.
+     *
+     * When disabled, the button cannot be clicked.
+     */
+    get disabled(): boolean;
+    set disabled(disabled: boolean);
+    protected setLink(href: string, target: string): void;
+    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    private readonly _onKeyDown;
+    private readonly _onClick;
+    protected handleClick(): void;
+}
+
+type Constructor<T> = abstract new (...args: any[]) => T;
+
+type StreamType = 'vod' | 'live' | 'dvr';
+
+/** @internal */
+declare const StateReceiverProps: "theoplayerUiObservedProperties";
+interface StateReceiverPropertyMap {
+    player: ChromelessPlayer | undefined;
+    fullscreen: boolean;
+    streamType: StreamType;
+    playbackRate: number;
+    activeVideoQuality: VideoQuality | undefined;
+    targetVideoQualities: VideoQuality[] | undefined;
+    error: THEOplayerError | undefined;
+    previewTime: number;
+}
+/**
+ * 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 StateReceiverMixin}.
+ *
+ * @see {@link StateReceiverMixin}
+ */
+interface StateReceiverElement extends Partial<StateReceiverPropertyMap>, Element {
+    /**
+     * The names of the properties this element will receive.
+     */
+    readonly [StateReceiverProps]: Array<keyof StateReceiverPropertyMap>;
+}
+/**
+ * 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}
+ */
+declare function StateReceiverMixin<T extends Constructor<Element>>(base: T, props: Array<keyof StateReceiverPropertyMap>): T & Constructor<StateReceiverElement>;
+
+declare const PlayButton_base: typeof Button & Constructor<StateReceiverElement>;
+/**
+ * A button that toggles whether the player is playing or paused.
+ *
+ * @attribute `paused` (readonly) - Whether the player is paused. Reflects `ui.player.paused`.
+ * @attribute `ended` (readonly) - Whether the player is ended. Reflects `ui.player.ended`.
+ * @group Components
+ */
+declare class PlayButton extends PlayButton_base {
+    static get observedAttributes(): Attribute[];
+    private _player;
+    constructor();
+    connectedCallback(): void;
+    get paused(): boolean;
+    set paused(paused: boolean);
+    get ended(): boolean;
+    set ended(ended: boolean);
+    get player(): ChromelessPlayer | undefined;
+    set player(player: ChromelessPlayer | undefined);
+    private readonly _onPlay;
+    private readonly _onPause;
+    private readonly _updateFromPlayer;
+    private _updateEnded;
+    protected handleClick(): void;
+    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+}
+
+type VolumeLevel = 'off' | 'low' | 'high';
+declare const MuteButton_base: typeof Button & Constructor<StateReceiverElement>;
+/**
+ * A button that toggles whether audio is muted or not.
+ *
+ * @attribute `volume-level` (readonly) - The volume level of the player.
+ *   Can be "off" (muted), "low" (volume < 50%) or "high" (volume >= 50%).
+ * @group Components
+ */
+declare class MuteButton extends MuteButton_base {
+    static get observedAttributes(): Attribute[];
+    private _player;
+    constructor();
+    connectedCallback(): void;
+    /**
+     * The volume level of the player.
+     */
+    get volumeLevel(): VolumeLevel;
+    get player(): ChromelessPlayer | undefined;
+    set player(player: ChromelessPlayer | undefined);
+    private readonly _updateFromPlayer;
+    protected handleClick(): void;
+    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+}
+
+declare const SeekButton_base: typeof Button & Constructor<StateReceiverElement>;
+/**
+ * A button that seeks forward or backward by a fixed offset.
+ *
+ * @attribute `seek-offset` - The offset (in seconds) by which to seek forward (if positive) or backward (if negative).
+ * @group Components
+ */
+declare class SeekButton extends SeekButton_base {
+    static get observedAttributes(): Attribute[];
+    private _player;
+    private _offsetEl;
+    constructor();
+    /**
+     * The offset (in seconds) by which to seek forward (if positive) or backward (if negative).
+     */
+    get seekOffset(): number;
+    set seekOffset(value: number);
+    get player(): ChromelessPlayer | undefined;
+    set player(player: ChromelessPlayer | undefined);
+    protected handleClick(): void;
+    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+}
+
+declare const TimeDisplay_base: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+} & Constructor<StateReceiverElement>;
+/**
+ * A control that displays the current time of the stream.
+ *
+ * @attribute `show-duration` - If set, also shows the duration of the stream.
+ * @attribute `remaining` - If set, shows the remaining time of the stream. Not compatible with `show-duration`.
+ * @attribute `remaining-when-live` - If set, and the stream is a livestream, shows the remaining time
+ *   (until the live point) of the stream.
+ * @group Components
+ */
+declare class TimeDisplay extends TimeDisplay_base {
+    private readonly _spanEl;
+    private _player;
+    static get observedAttributes(): Attribute[];
+    constructor();
+    protected _upgradeProperty(prop: keyof this): void;
+    connectedCallback(): void;
+    get player(): ChromelessPlayer | undefined;
+    set player(player: ChromelessPlayer | undefined);
+    get streamType(): StreamType;
+    set streamType(streamType: StreamType);
+    private readonly _updateFromPlayer;
+    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+}
+
+declare const DurationDisplay_base: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+} & Constructor<StateReceiverElement>;
+/**
+ * A control that displays the duration of the stream.
+ *
+ * @group Components
+ */
+declare class DurationDisplay extends DurationDisplay_base {
+    private readonly _spanEl;
+    private _player;
+    constructor();
+    protected _upgradeProperty(prop: keyof this): void;
+    connectedCallback(): void;
+    get player(): ChromelessPlayer | undefined;
+    set player(player: ChromelessPlayer | undefined);
+    private readonly _updateFromPlayer;
+}
+
+/**
+ * A button that can be checked.
+ *
+ * When part of a {@link RadioGroup}, at most one button in the group can be checked.
+ *
+ * @group Components
+ */
+declare class RadioButton extends Button {
+    static get observedAttributes(): Attribute[];
+    private _value;
+    constructor(options?: ButtonOptions);
+    connectedCallback(): void;
+    /**
+     * Whether this radio button is checked.
+     */
+    get checked(): boolean;
+    set checked(checked: boolean);
+    /**
+     * The value associated with this radio button.
+     */
+    get value(): any;
+    set value(value: any);
+    protected handleClick(): void;
+    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+}
+
+/**
+ * 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.
+ *
+ * @group Components
+ */
+declare class RadioGroup extends HTMLElement {
+    private _slot;
+    private _radioButtons;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    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;
+    setFocusedRadioButton(button: RadioButton | null): void;
+    private _unfocusAll;
+    setCheckedRadioButton(checkedButton: RadioButton | null): void;
+    private readonly _onButtonChange;
+}
+
+interface MenuOptions {
+    template?: HTMLTemplateElement;
+}
+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.
+ *
+ * @attribute `menu-close-on-input` - Whether to automatically close the menu whenever one of its controls
+ *   receives an input (e.g. when a radio button is clicked).
+ * @attribute `menu-opened` (readonly) - Whether the menu is currently open.
+ * @group Components
+ */
+declare class Menu extends HTMLElement {
+    static get observedAttributes(): Attribute[];
+    private readonly _contentEl;
+    /**
+     * 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 passing a different {@link MenuOptions.template} in the options,
+     * using {@link menuTemplate} to correctly style the custom template.
+     *
+     * @param options - The options for this menu.
+     */
+    constructor(options?: MenuOptions);
+    protected _upgradeProperty(prop: keyof this): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Open the menu.
+     */
+    openMenu(): void;
+    /**
+     * Close the menu.
+     */
+    closeMenu(): void;
+    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    private readonly _onContentInput;
+}
+
+interface MenuGroupOptions {
+    template?: HTMLTemplateElement;
+}
+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 MenuGroup.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.
+ *
+ * @attribute `menu-opened` (readonly) - Whether any menu in the group is currently open.
+ * @group Components
+ */
+declare class MenuGroup extends HTMLElement {
+    static get observedAttributes(): Attribute[];
+    private readonly _menuSlot;
+    private _menus;
+    private readonly _openMenuStack;
+    constructor(options?: MenuGroupOptions);
+    protected _upgradeProperty(prop: keyof this): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): 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;
+}
+
+/**
+ * A menu button that opens a {@link Menu}.
+ *
+ * @attribute `menu` - The ID of the menu to open.
+ * @group Components
+ */
+declare class MenuButton extends Button {
+    static get observedAttributes(): Attribute[];
+    constructor(options?: Partial<ButtonOptions>);
+    connectedCallback(): void;
+    /**
+     * The ID of the menu to open.
+     */
+    get menu(): string | null;
+    set menu(menuId: string | null);
+    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    protected handleClick(): void;
+}
+
+/**
+ * A button that closes its parent menu.
+ *
+ * This button must be placed inside a {@link Menu | `<theoplayer-menu>`}.
+ *
+ * @group Components
+ */
+declare class CloseMenuButton extends Button {
+    static get observedAttributes(): Attribute[];
+    constructor();
+    protected handleClick(): void;
+}
+
+/**
+ * A radio button that shows the label of a given media track, and switches to that track when clicked.
+ * @group Components
+ */
+declare class MediaTrackRadioButton extends RadioButton {
+    private _slotEl;
+    private _track;
+    constructor();
+    /**
+     * 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;
+    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+}
+
+type TrackType = 'audio' | 'video' | 'subtitles';
+declare const TrackRadioGroup_base: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+} & Constructor<StateReceiverElement>;
+/**
+ * A radio group that shows a list of media or text tracks, from which the user can choose an active track.
+ *
+ * @attribute `track-type` - The track type of the available tracks. Can be "audio", "video" or "subtitles".
+ * @attribute `show-off` - If set, shows an "off" button to disable all tracks.
+ *   Can only be used with the "subtitles" track type.
+ * @group Components
+ */
+declare class TrackRadioGroup extends TrackRadioGroup_base {
+    static get observedAttributes(): Attribute[];
+    private readonly _radioGroup;
+    private _offButton;
+    private _player;
+    private _tracksList;
+    constructor();
+    protected _upgradeProperty(prop: keyof this): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * The track type of the available tracks.
+     */
+    get trackType(): TrackType;
+    set trackType(value: TrackType);
+    /**
+     * If set, shows an "off" button to disable all tracks.
+     *
+     * Can only be used with the `"subtitles"` track type.
+     */
+    get showOffButton(): boolean;
+    set showOffButton(value: boolean);
+    get player(): ChromelessPlayer | undefined;
+    set player(player: ChromelessPlayer | undefined);
+    private _getTracksList;
+    private _updateTracksList;
+    private _getTracks;
+    private readonly _updateTracks;
+    private _createTrackButton;
+    private _updateOffButton;
+    private readonly _onChange;
+    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+}
+
+/**
+ * A radio button that shows the label of a given text track, and switches to that track when clicked.
+ *
+ * @group Components
+ */
+declare class TextTrackRadioButton extends RadioButton {
+    private _slotEl;
+    private _track;
+    constructor();
+    /**
+     * 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;
+    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+}
+
+/**
+ * A radio button that disables the active subtitle track when clicked.
+ *
+ * @group Components
+ */
+declare class TextTrackOffRadioButton extends RadioButton {
+    private _trackList;
+    constructor();
+    get trackList(): TextTracksList | undefined;
+    set trackList(trackList: TextTracksList | undefined);
+    private _updateFromTrackList;
+    private _updateTrackList;
+    private readonly _onTrackChange;
+    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+}
+
+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;
+declare const TextTrackStyleRadioGroup_base: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+} & Constructor<StateReceiverElement>;
+/**
+ * A radio group that shows a list of values for a text track style option, from which the user can choose a desired value.
+ *
+ * @attribute `property` - The property name of the text track style option. One of {@link TextTrackStyleOption}.
+ * @slot {@link RadioButton} - The possible options for the text track style option.
+ *   For example: `<theoplayer-radio-button value="#ff0000">Red</theoplayer-radio-button>`
+ * @group Components
+ */
+declare class TextTrackStyleRadioGroup extends TextTrackStyleRadioGroup_base {
+    static get observedAttributes(): Attribute[];
+    private readonly _radioGroup;
+    private readonly _optionsSlot;
+    private _player;
+    private _value;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected _upgradeProperty(prop: keyof this): void;
+    /**
+     * The property name of the text track style option.
+     */
+    get property(): TextTrackStyleOption;
+    set property(value: 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 _updateChecked;
+    private readonly _onChange;
+    private readonly _updateFromPlayer;
+    private _updateToPlayer;
+    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+}
+
+declare const TextTrackStyleDisplay_base: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+} & Constructor<StateReceiverElement>;
+/**
+ * Displays the value of a single text track style option in a human-readable format.
+ *
+ * @attribute `property` - The property name of the text track style option. One of {@link TextTrackStyleOption}.
+ * @group Components
+ */
+declare class TextTrackStyleDisplay extends TextTrackStyleDisplay_base {
+    static get observedAttributes(): Attribute[];
+    private readonly _spanEl;
+    private _player;
+    constructor();
+    connectedCallback(): void;
+    protected _upgradeProperty(prop: keyof this): void;
+    /**
+     * The property name of the text track style option.
+     */
+    get property(): TextTrackStyleOption;
+    set property(value: TextTrackStyleOption);
+    get player(): ChromelessPlayer | undefined;
+    set player(player: ChromelessPlayer | undefined);
+    private readonly _updateFromPlayer;
+    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+}
+
+/**
+ * A menu to change the {@link theoplayer!TextTrackStyle | text track style} of the player.
+ *
+ * @group Components
+ */
+declare class TextTrackStyleMenu extends MenuGroup {
+    constructor();
+}
+
+declare const LanguageMenu_base: typeof MenuGroup & Constructor<StateReceiverElement>;
+/**
+ * A menu to change the spoken language and subtitles of the stream.
+ *
+ * @group Components
+ */
+declare class LanguageMenu extends LanguageMenu_base {
+    private _player;
+    static get observedAttributes(): Attribute[];
+    constructor();
+    get player(): ChromelessPlayer | undefined;
+    set player(player: ChromelessPlayer | undefined);
+    private readonly _updateAudioTracks;
+    private readonly _updateTextTracks;
+    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+}
+
+declare const LanguageMenuButton_base: typeof MenuButton & Constructor<StateReceiverElement>;
+/**
+ * A menu button that opens a {@link LanguageMenu}.
+ *
+ * When there are no alternative audio languages or subtitles, this button automatically hides itself.
+ *
+ * @attribute `menu` - The ID of the language menu.
+ * @group Components
+ */
+declare class LanguageMenuButton extends LanguageMenuButton_base {
+    private _player;
+    constructor();
+    get player(): ChromelessPlayer | undefined;
+    set player(player: ChromelessPlayer | undefined);
+    private readonly _updateTracks;
+}
+
+declare const PlaybackRateRadioGroup_base: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+} & Constructor<StateReceiverElement>;
+/**
+ * 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>`
+ * @group Components
+ */
+declare class PlaybackRateRadioGroup extends PlaybackRateRadioGroup_base {
+    private readonly _radioGroup;
+    private readonly _optionsSlot;
+    private _player;
+    private _value;
+    constructor();
+    protected _upgradeProperty(prop: keyof this): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * The currently chosen playback rate.
+     */
+    get value(): number;
+    set value(value: number);
+    get player(): ChromelessPlayer | undefined;
+    set player(player: ChromelessPlayer | undefined);
+    private readonly _updateChecked;
+    private readonly _onChange;
+    private readonly _updateFromPlayer;
+}
+
+/**
+ * A menu button that opens a [playback rate menu]{@link PlaybackRateMenu}.
+ *
+ * @attribute menu - The ID of the playback rate menu.
+ * @group Components
+ */
+declare class PlaybackRateMenuButton extends MenuButton {
+    constructor();
+}
+
+/**
+ * A menu to change the playback rate of the player.
+ *
+ * @group Components
+ */
+declare class PlaybackRateMenu extends Menu {
+    constructor();
+}
+
+declare const PlaybackRateDisplay_base: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+} & Constructor<StateReceiverElement>;
+/**
+ * @group Components
+ */
+declare class PlaybackRateDisplay extends PlaybackRateDisplay_base {
+    private readonly _spanEl;
+    private _playbackRate;
+    constructor();
+    connectedCallback(): void;
+    protected _upgradeProperty(prop: keyof this): void;
+    get playbackRate(): number;
+    set playbackRate(value: number);
+}
+
+declare const ActiveQualityDisplay_base: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+} & Constructor<StateReceiverElement>;
+/**
+ * @group Components
+ */
+declare class ActiveQualityDisplay extends ActiveQualityDisplay_base {
+    private readonly _spanEl;
+    private _activeVideoQuality;
+    private _targetVideoQualities;
+    constructor();
+    connectedCallback(): void;
+    protected _upgradeProperty(prop: keyof this): void;
+    get activeVideoQuality(): VideoQuality | undefined;
+    set activeVideoQuality(quality: VideoQuality | undefined);
+    get targetVideoQualities(): VideoQuality[] | undefined;
+    set targetVideoQualities(qualities: VideoQuality[] | undefined);
+    private update_;
+}
+
+/**
+ * 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.
+ *
+ * @group Components
+ */
+declare class QualityRadioButton extends RadioButton {
+    private _slotEl;
+    private _track;
+    private _quality;
+    constructor();
+    /**
+     * 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;
+    private _updateTargetQuality;
+    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+}
+
+declare const QualityRadioGroup_base: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+} & Constructor<StateReceiverElement>;
+/**
+ * A radio group that shows a list of available video qualities, from which the user can choose a desired target quality.
+ *
+ * @group Components
+ */
+declare class QualityRadioGroup extends QualityRadioGroup_base {
+    private readonly _radioGroup;
+    private _player;
+    private _track;
+    constructor();
+    protected _upgradeProperty(prop: keyof this): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    get player(): ChromelessPlayer | undefined;
+    set player(player: ChromelessPlayer | undefined);
+    private readonly _onChange;
+    private readonly _updateTrack;
+    private readonly _update;
+}
+
+declare const TextTrackStyleResetButton_base: typeof Button & Constructor<StateReceiverElement>;
+/**
+ * A button that resets the text track style.
+ *
+ * @group Components
+ */
+declare class TextTrackStyleResetButton extends TextTrackStyleResetButton_base {
+    static get observedAttributes(): Attribute[];
+    private _player;
+    constructor();
+    get player(): ChromelessPlayer | undefined;
+    set player(player: ChromelessPlayer | undefined);
+    protected handleClick(): void;
+}
+
+/**
+ * A menu to change the settings of the player, such as the active video quality and the playback speed.
+ *
+ * @group Components
+ */
+declare class SettingsMenu extends MenuGroup {
+    constructor();
+}
+
+/**
+ * A menu button that opens a {@link SettingsMenu}.
+ *
+ * @attribute `menu` - The ID of the settings menu.
+ * @group Components
+ */
+declare class SettingsMenuButton extends MenuButton {
+    constructor();
+}
+
+declare const FullscreenButton_base: typeof Button & Constructor<StateReceiverElement>;
+/**
+ * A button that toggles fullscreen.
+ *
+ * @group Components
+ */
+declare class FullscreenButton extends FullscreenButton_base {
+    static get observedAttributes(): Attribute[];
+    constructor();
+    get fullscreen(): boolean;
+    set fullscreen(fullscreen: boolean);
+    protected handleClick(): void;
+    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+}
+
+interface RangeOptions {
+    template: HTMLTemplateElement;
+}
+declare function rangeTemplate(range: string, extraCss?: string): string;
+/**
+ * A slider to select a value from a range.
+ *
+ * @attribute `disabled` - Whether the range is disabled.
+ *   When disabled, the slider value cannot be changed, and the slider thumb is hidden.
+ *
+ * @group Components
+ */
+declare abstract class Range extends HTMLElement {
+    static get observedAttributes(): Attribute[];
+    protected readonly _rangeEl: HTMLInputElement;
+    protected readonly _pointerEl: HTMLElement;
+    private _lastRangeWidth;
+    constructor(options: RangeOptions);
+    protected _upgradeProperty(prop: keyof this): void;
+    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);
+    /**
+     * The current value.
+     */
+    get value(): number;
+    set value(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.
+     */
+    get step(): number | 'any';
+    set step(step: number | 'any');
+    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    private readonly _onInput;
+    protected handleInput(): void;
+    protected update(): 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(): Array<[string, number]>;
+    private readonly _updatePointerBar;
+    protected updatePointer_(mousePercent: number, rangeRect: DOMRectReadOnly): void;
+}
+
+declare const PreviewThumbnail_base: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+} & Constructor<StateReceiverElement>;
+/**
+ * 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.
+ * @group Components
+ */
+declare class PreviewThumbnail extends PreviewThumbnail_base {
+    private readonly _canvasEl;
+    private readonly _canvasContext;
+    private readonly _thumbnailImageSource;
+    private _player;
+    private _previewTime;
+    private _thumbnailTextTrack;
+    private _lastLoadedThumbnailUrl;
+    constructor();
+    protected _upgradeProperty(prop: keyof this): void;
+    connectedCallback(): void;
+    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_;
+}
+
+declare const PreviewTimeDisplay_base: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+} & Constructor<StateReceiverElement>;
+/**
+ * A display that shows the current preview time of a {@link TimeRange | `<theoplayer-time-range>`}.
+ *
+ * @attribute `remaining` - If set, shows the remaining time of the stream.
+ * @attribute `remaining-when-live` - If set, and the stream is a livestream, shows the remaining time
+ *   (until the live point) of the stream.
+ * @group Components
+ */
+declare class PreviewTimeDisplay extends PreviewTimeDisplay_base {
+    private readonly _spanEl;
+    private _previewTime;
+    private _player;
+    static get observedAttributes(): Attribute[];
+    constructor();
+    protected _upgradeProperty(prop: keyof this): void;
+    connectedCallback(): void;
+    get previewTime(): number;
+    set previewTime(previewTime: number);
+    get streamType(): StreamType;
+    set streamType(streamType: StreamType);
+    get player(): ChromelessPlayer | undefined;
+    set player(player: ChromelessPlayer | undefined);
+    private readonly _update;
+    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+}
+
+declare const TimeRange_base: typeof Range & Constructor<StateReceiverElement>;
+/**
+ * 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}.
+ * @group Components
+ */
+declare class TimeRange extends TimeRange_base {
+    static get observedAttributes(): Attribute[];
+    private readonly _previewRailEl;
+    private readonly _previewBoxEl;
+    private _player;
+    private _pausedWhileScrubbing;
+    private _autoAdvanceId;
+    private _lastUpdateTime;
+    private _lastCurrentTime;
+    private _lastPlaybackRate;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    get player(): ChromelessPlayer | undefined;
+    set player(player: ChromelessPlayer | undefined);
+    get streamType(): StreamType;
+    set streamType(streamType: StreamType);
+    private readonly _updateFromPlayer;
+    private readonly _updateDisabled;
+    protected getAriaLabel(): string;
+    protected getAriaValueText(): string;
+    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    protected handleInput(): void;
+    private readonly _pauseOnScrubStart;
+    private readonly _playOnScrubEnd;
+    private shouldAutoAdvance_;
+    private readonly _toggleAutoAdvance;
+    private readonly _autoAdvanceWhilePlaying;
+    protected updatePointer_(mousePercent: number, rangeRect: DOMRectReadOnly): void;
+}
+
+declare const VolumeRange_base: typeof Range & Constructor<StateReceiverElement>;
+/**
+ * A volume slider, showing the current audio volume of the player, and which changes the volume when clicked or dragged.
+ *
+ * @group Components
+ */
+declare class VolumeRange extends VolumeRange_base {
+    private _player;
+    constructor();
+    get player(): ChromelessPlayer | undefined;
+    set player(player: ChromelessPlayer | undefined);
+    private readonly _updateFromPlayer;
+    protected getAriaLabel(): string;
+    protected getAriaValueText(): string;
+    protected handleInput(): void;
+}
+
+declare const ErrorDisplay_base: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+} & Constructor<StateReceiverElement>;
+/**
+ * A screen that shows the details of a fatal player error.
+ *
+ * @group Components
+ */
+declare class ErrorDisplay extends ErrorDisplay_base {
+    private readonly _messageSlot;
+    private _error;
+    static get observedAttributes(): Attribute[];
+    constructor();
+    protected _upgradeProperty(prop: keyof this): void;
+    connectedCallback(): void;
+    /**
+     * The error.
+     */
+    get error(): THEOplayerError | undefined;
+    set error(error: THEOplayerError | undefined);
+    get fullscreen(): boolean;
+    set fullscreen(fullscreen: boolean);
+    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+}
+
+/**
+ * A generic button to start and stop casting.
+ *
+ * For a concrete implementation, see {@link ChromecastButton}.
+ * @group Components
+ */
+declare class CastButton extends Button {
+    private _castApi;
+    static get observedAttributes(): Attribute[];
+    constructor(options?: ButtonOptions);
+    connectedCallback(): void;
+    /**
+     * The cast API for which this cast button.
+     */
+    get castApi(): VendorCast | undefined;
+    set castApi(castApi: VendorCast | undefined);
+    /**
+     * The current cast state.
+     */
+    get castState(): CastState;
+    protected handleClick(): void;
+    private readonly _updateCastState;
+    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+}
+
+declare const ChromecastButton_base: typeof CastButton & Constructor<StateReceiverElement>;
+/**
+ * A button to start and stop casting using Chromecast.
+ *
+ * @group Components
+ */
+declare class ChromecastButton extends ChromecastButton_base {
+    private _player;
+    constructor();
+    get player(): ChromelessPlayer | undefined;
+    set player(player: ChromelessPlayer | undefined);
+}
+
+declare const ChromecastDisplay_base: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+} & Constructor<StateReceiverElement>;
+/**
+ * A control that displays the casting status while using Chromecast.
+ *
+ * @group Components
+ */
+declare class ChromecastDisplay extends ChromecastDisplay_base {
+    private readonly _receiverNameEl;
+    private _player;
+    constructor();
+    protected _upgradeProperty(prop: keyof this): void;
+    connectedCallback(): void;
+    get player(): ChromelessPlayer | undefined;
+    set player(player: ChromelessPlayer | undefined);
+    private readonly _updateFromPlayer;
+}
+
+declare const AirPlayButton_base: typeof CastButton & Constructor<StateReceiverElement>;
+/**
+ * A button to start and stop casting using AirPlay.
+ *
+ * @group Components
+ */
+declare class AirPlayButton extends AirPlayButton_base {
+    private _player;
+    constructor();
+    get player(): ChromelessPlayer | undefined;
+    set player(player: ChromelessPlayer | undefined);
+}
+
+declare const LoadingIndicator_base: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+} & Constructor<StateReceiverElement>;
+/**
+ * An indicator that shows whether the player is currently waiting for more data to resume playback.
+ *
+ * @attribute `loading` (readonly) - Whether the player is waiting for more data. If set, the indicator is shown.
+ * @group Components
+ */
+declare class LoadingIndicator extends LoadingIndicator_base {
+    private _player;
+    static get observedAttributes(): Attribute[];
+    constructor();
+    protected _upgradeProperty(prop: keyof this): void;
+    connectedCallback(): void;
+    get player(): ChromelessPlayer | undefined;
+    set player(player: ChromelessPlayer | undefined);
+    private readonly _updateFromPlayer;
+    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+}
+
+declare const GestureReceiver_base: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+} & Constructor<StateReceiverElement>;
+/**
+ * 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.
+ *
+ * @group Components
+ */
+declare class GestureReceiver extends GestureReceiver_base {
+    private _player;
+    private _pointerType;
+    constructor();
+    protected _upgradeProperty(prop: keyof this): void;
+    connectedCallback(): void;
+    get player(): ChromelessPlayer | undefined;
+    set player(player: ChromelessPlayer | undefined);
+    private readonly _onPointerDown;
+    private readonly _onClick;
+    handleTap(_event: MouseEvent): void;
+    handleMouseClick(_event: MouseEvent): void;
+}
+
+declare const LiveButton_base: typeof Button & Constructor<StateReceiverElement>;
+/**
+ * A button that shows whether the player is currently playing at the live point, and seeks to the live point when clicked.
+ *
+ * @attribute `live-threshold` - 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.
+ * @attribute `live` (readonly) - Whether the player is considered to be playing at the live point.
+ * @group Components
+ */
+declare class LiveButton extends LiveButton_base {
+    static get observedAttributes(): Attribute[];
+    private _player;
+    constructor();
+    get paused(): boolean;
+    set paused(paused: boolean);
+    get streamType(): StreamType;
+    set streamType(streamType: StreamType);
+    get liveThreshold(): number;
+    set liveThreshold(value: number);
+    get live(): boolean;
+    set live(live: boolean);
+    get player(): ChromelessPlayer | undefined;
+    set player(player: ChromelessPlayer | undefined);
+    private readonly _updatePaused;
+    private readonly _updateLive;
+    protected handleClick(): void;
+    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+}
+
+declare const AdDisplay_base: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+} & Constructor<StateReceiverElement>;
+/**
+ * @group Components
+ */
+declare class AdDisplay extends AdDisplay_base {
+    private readonly _spanEl;
+    private _player;
+    constructor();
+    protected _upgradeProperty(prop: keyof this): void;
+    connectedCallback(): void;
+    get player(): ChromelessPlayer | undefined;
+    set player(player: ChromelessPlayer | undefined);
+    private readonly _updateFromPlayer;
+}
+
+declare const AdCountdown_base: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+} & Constructor<StateReceiverElement>;
+/**
+ * @group Components
+ */
+declare class AdCountdown extends AdCountdown_base {
+    private readonly _spanEl;
+    private _player;
+    constructor();
+    protected _upgradeProperty(prop: keyof this): void;
+    connectedCallback(): void;
+    get player(): ChromelessPlayer | undefined;
+    set player(player: ChromelessPlayer | undefined);
+    private readonly _onAdChange;
+    private readonly _update;
+}
+
+declare const AdClickThroughButton_base: typeof LinkButton & Constructor<StateReceiverElement>;
+/**
+ * @group Components
+ */
+declare class AdClickThroughButton extends AdClickThroughButton_base {
+    private _player;
+    static get observedAttributes(): Attribute[];
+    constructor();
+    connectedCallback(): void;
+    get clickThrough(): string | null;
+    set clickThrough(clickThrough: string | null);
+    get player(): ChromelessPlayer | undefined;
+    set player(player: ChromelessPlayer | undefined);
+    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    private readonly _updateFromPlayer;
+    protected handleClick(): void;
+}
+
+declare const AdSkipButton_base: typeof Button & Constructor<StateReceiverElement>;
+/**
+ * @group Components
+ */
+declare class AdSkipButton extends AdSkipButton_base {
+    private readonly _countdownEl;
+    private readonly _skipEl;
+    private _player;
+    static get observedAttributes(): Attribute[];
+    constructor();
+    connectedCallback(): void;
+    get player(): ChromelessPlayer | undefined;
+    set player(player: ChromelessPlayer | undefined);
+    protected handleClick(): void;
+    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    private readonly _onAdChange;
+    private readonly _update;
+}
+
+declare enum ExtensionSlot {
+    TopControlBar = "top-control-bar",
+    BottomControlBar = "bottom-control-bar",
+    Menu = "menu"
+}
+
+/**
+ * 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.
+ * 1. Set its `configuration` attribute or property to a valid player configuration.
+ * 1. Set its `source` attribute or property to a valid stream source.
+ * 1. 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>`}.
+ *
+ * @attribute `configuration` - The THEOplayer {@link theoplayer!PlayerConfiguration | PlayerConfiguration}, as a JSON string.
+ * @attribute `source` - The THEOplayer {@link theoplayer!SourceDescription | SourceDescription}, as a JSON string.
+ * @attribute `fluid` - If set, the player automatically adjusts its height to fit the video's aspect ratio.
+ * @attribute `muted` - If set, the player starts out as muted. Reflects `ui.player.muted`.
+ * @attribute `autoplay` - If set, the player attempts to automatically start playing (if allowed).
+ * @attribute `mobile` - Whether to use a mobile-optimized UI layout instead.
+ *   Can be used in CSS to show/hide certain desktop-specific or mobile-specific UI controls.
+ * @attribute `stream-type` - The stream type, either "vod", "live" or "dvr".
+ *   Can be used to show/hide certain UI controls specific for livestreams, such as
+ *   a {@link LiveButton | `<theoplayer-live-button>`}.
+ *   If you know in advance that the source will be a livestream, you can set this attribute to avoid a screen flicker
+ *   when the player switches between its VOD-specific and live-only controls.
+ * @attribute `user-idle-timeout` - The timeout (in seconds) between when the user stops interacting with the UI,
+ *   and when the user is considered to be "idle".
+ * @attribute `dvr-threshold` - 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".
+ *
+ * @slot `top-control-bar` - A slot for extra UI controls in the top control bar.
+ * @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>`}).
+ * @group Components
+ */
+declare class DefaultUI extends HTMLElement {
+    static get observedAttributes(): Attribute[];
+    private readonly _ui;
+    private readonly _titleSlot;
+    private readonly _timeRange;
+    private _appliedExtensions;
+    /**
+     * 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 configuration} property.
+     */
+    constructor(configuration?: PlayerConfiguration);
+    private _upgradeProperty;
+    /**
+     * 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(): PlayerConfiguration;
+    set configuration(configuration: PlayerConfiguration);
+    /**
+     * The player's current source.
+     */
+    get source(): SourceDescription | undefined;
+    set source(value: SourceDescription | undefined);
+    /**
+     * 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);
+    /**
+     * 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;
+    set streamType(value: StreamType);
+    /**
+     * 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);
+    /**
+     * 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);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    private readonly _updateStreamType;
+    private readonly _onTitleSlotChange;
+}
+
+/**
+ * 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;
+
+/**
+ * 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.
+ * 1. 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.
+ * 1. Set its `configuration` attribute or property to a valid player configuration.
+ * 1. 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).
+ *
+ * @attribute `configuration` - The THEOplayer {@link theoplayer!PlayerConfiguration | PlayerConfiguration}, as a JSON string.
+ * @attribute `source` - The THEOplayer {@link theoplayer!SourceDescription | SourceDescription}, as a JSON string.
+ * @attribute `fluid` - If set, the player automatically adjusts its height to fit the video's aspect ratio.
+ * @attribute `muted` - If set, the player starts out as muted. Reflects `ui.player.muted`.
+ * @attribute `autoplay` - If set, the player attempts to automatically start playing (if allowed).
+ * @attribute `mobile` - Whether to use a mobile-optimized UI layout instead.
+ *   Can be used in CSS to show/hide certain desktop-specific or mobile-specific UI controls.
+ * @attribute `stream-type` - The stream type, either "vod", "live" or "dvr".
+ *   Can be used to show/hide certain UI controls specific for livestreams, such as
+ *   a {@link LiveButton | `<theoplayer-live-button>`}.
+ *   If you know in advance that the source will be a livestream, you can set this attribute to avoid a screen flicker
+ *   when the player switches between its VOD-specific and live-only controls.
+ * @attribute `user-idle` (readonly) - Whether the user is considered to be "idle".
+ *   When the user is idle and the video is playing, all slotted UI elements will be hidden
+ *   (unless they have the `no-auto-hide` attribute).
+ * @attribute `user-idle-timeout` - The timeout (in seconds) between when the user stops interacting with the UI,
+ *   and when the user is considered to be "idle".
+ * @attribute `dvr-threshold` - 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".
+ * @attribute `paused` (readonly) - Whether the player is paused. Reflects `ui.player.paused`.
+ * @attribute `ended` (readonly) - Whether the player is ended. Reflects `ui.player.ended`.
+ * @attribute `casting` (readonly) - Whether the player is ended. Reflects `ui.player.cast.casting`.
+ * @attribute `playing-ad` (readonly) - Whether the player is playing a linear ad. Reflects `ui.player.ads.playing`.
+ * @attribute `has-error` (readonly) - Whether the player has encountered a fatal error.
+ * @attribute `has-first-play` (readonly) - 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.
+ *
+ * @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 centered on the player, on top of other controls.
+ * @slot `centered-loading` - A slot for a loading indicator centered on the player, 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>`}).
+ * @group Components
+ */
+declare class UIContainer extends HTMLElement {
+    static get observedAttributes(): Attribute[];
+    private _configuration;
+    private readonly _playerEl;
+    private readonly _menuEl;
+    private readonly _menuGroup;
+    private _menuOpener;
+    private readonly _topChromeEl;
+    private readonly _topChromeSlot;
+    private readonly _bottomChromeEl;
+    private readonly _bottomChromeSlot;
+    private _pointerType;
+    private _lastPointerUpTime;
+    private readonly _mutationObserver;
+    private readonly _resizeObserver;
+    private readonly _stateReceivers;
+    private _player;
+    private _source;
+    private _userIdleTimer;
+    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 configuration} property.
+     */
+    constructor(configuration?: PlayerConfiguration);
+    private _upgradeProperty;
+    /**
+     * 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(): PlayerConfiguration;
+    set configuration(playerConfiguration: PlayerConfiguration);
+    private _setConfiguration;
+    /**
+     * The player's current source.
+     */
+    get source(): SourceDescription | undefined;
+    set source(value: SourceDescription | undefined);
+    private _setSource;
+    /**
+     * 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;
+    /**
+     * Whether the player is paused.
+     */
+    get paused(): boolean;
+    /**
+     * Whether the player is ended.
+     */
+    get ended(): boolean;
+    /**
+     * Whether the player is casting to a remote receiver.
+     */
+    get casting(): 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);
+    /**
+     * 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;
+    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);
+    connectedCallback(): void;
+    private tryInitializePlayer_;
+    disconnectedCallback(): void;
+    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    private readonly _onMutation;
+    private readonly _onSlotChange;
+    private readonly registerStateReceiver_;
+    private readonly unregisterStateReceiver_;
+    private propagateStateToReceiver_;
+    private removeStateFromReceiver_;
+    private openMenu_;
+    private closeMenu_;
+    private readonly _onToggleMenu;
+    private readonly _onCloseMenu;
+    private readonly _onMenuChange;
+    private readonly _onMenuPointerDown;
+    private readonly _onMenuClick;
+    private readonly _onEnterFullscreen;
+    private readonly _onExitFullscreen;
+    private readonly _onFullscreenChange;
+    private readonly _updateAspectRatio;
+    private readonly _updateError;
+    private readonly _onPlay;
+    private readonly _onPause;
+    private readonly _updatePausedAndEnded;
+    private readonly _updateEnded;
+    private readonly _updateStreamType;
+    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 isPlayerOrMedia_;
+    private readonly _onKeyUp;
+    private readonly _onPointerUp;
+    private readonly _onClickAfterPointerUp;
+    private readonly _onPointerMove;
+    private readonly _onMouseLeave;
+    private readonly _onChromeSlotTransition;
+    private readonly _updateTextTrackMargins;
+    private readonly _onPreviewTimeChange;
+}
+
+export { ActiveQualityDisplay, AdClickThroughButton, AdCountdown, AdDisplay, AdSkipButton, AirPlayButton, Attribute, Button, ButtonOptions, CastButton, ChromecastButton, ChromecastDisplay, CloseMenuButton, Constructor, ControlBar, DefaultUI, DurationDisplay, ErrorDisplay, Extension, ExtensionSlot, FullscreenButton, GestureReceiver, LanguageMenu, LanguageMenuButton, LinkButton, LiveButton, LoadingIndicator, MediaTrackRadioButton, Menu, MenuButton, MenuGroup, MenuGroupOptions, MenuOptions, MuteButton, PlayButton, PlaybackRateDisplay, PlaybackRateMenu, PlaybackRateMenuButton, PlaybackRateRadioGroup, PreviewThumbnail, PreviewTimeDisplay, QualityRadioButton, QualityRadioGroup, RadioButton, RadioGroup, Range, RangeOptions, SeekButton, SettingsMenu, SettingsMenuButton, StateReceiverElement, StateReceiverMixin, StateReceiverPropertyMap, StreamType, TextTrackOffRadioButton, TextTrackRadioButton, TextTrackStyleDisplay, TextTrackStyleMap, TextTrackStyleMenu, TextTrackStyleOption, TextTrackStyleRadioGroup, TextTrackStyleResetButton, TimeDisplay, TimeRange, TrackRadioGroup, TrackType, UIContainer, VolumeLevel, VolumeRange, buttonTemplate, linkButtonTemplate, menuGroupTemplate, menuTemplate, rangeTemplate, registerExtension };
+export as namespace THEOplayerUI;