@theoplayer/web-ui 1.4.0 → 1.6.0

package/dist/THEOplayerUI.d.ts

@@ -1,11 +1,11 @@
 /*!
- * THEOplayer Web UI v1.4.0
+ * THEOplayer Open Video UI for Web (v1.6.0)
  * License: MIT
  */
 import { ChromelessPlayer, VideoQuality, THEOplayerError, MediaTrack, TextTrack, TextTracksList, EdgeStyle, VendorCast, CastState, PlayerConfiguration, SourceDescription } from 'theoplayer/chromeless';
 
 /**
- * A horizontal control bar that can contain other controls.
+ * `<theoplayer-control-bar>` - A horizontal control bar that can contain other controls.
  *
  * @group Components
  */
@@ -13,6 +13,11 @@ declare class ControlBar extends HTMLElement {
     constructor();
     connectedCallback(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-control-bar': ControlBar;
+    }
+}
 
 declare enum Attribute {
     CONFIGURATION = "configuration",
@@ -21,9 +26,14 @@ declare enum Attribute {
     MUTED = "muted",
     FULLSCREEN = "fullscreen",
     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",
@@ -70,7 +80,7 @@ interface ButtonOptions {
 }
 declare function buttonTemplate(button: string, extraCss?: string): string;
 /**
- * A basic button.
+ * `<theoplayer-button>` - A basic button.
  *
  * @attribute `disabled` - Whether the button is disabled. When disabled, the button cannot be clicked.
  * @group Components
@@ -98,7 +108,6 @@ declare class Button extends HTMLElement {
     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.
@@ -107,10 +116,15 @@ declare class Button extends HTMLElement {
      */
     protected handleClick(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-button': Button;
+    }
+}
 
 declare function linkButtonTemplate(button: string, extraCss?: string): string;
 /**
- * A {@link Button | button} that opens a hyperlink.
+ * `<theoplayer-link-button>` - A {@link Button | button} that opens a hyperlink.
  *
  * @attribute `disabled` - Whether the button is disabled. When disabled, the button cannot be clicked.
  * @group Components
@@ -135,9 +149,16 @@ declare class LinkButton extends HTMLElement {
     private readonly _onClick;
     protected handleClick(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-link-button': LinkButton;
+    }
+}
 
 type Constructor<T> = abstract new (...args: any[]) => T;
 
+type DeviceType = 'desktop' | 'mobile' | 'tv';
+
 type StreamType = 'vod' | 'live' | 'dvr';
 
 /** @internal */
@@ -145,6 +166,7 @@ declare const StateReceiverProps: "theoplayerUiObservedProperties";
 interface StateReceiverPropertyMap {
     player: ChromelessPlayer | undefined;
     fullscreen: boolean;
+    deviceType: DeviceType;
     streamType: StreamType;
     playbackRate: number;
     activeVideoQuality: VideoQuality | undefined;
@@ -183,7 +205,7 @@ declare function StateReceiverMixin<T extends Constructor<Element>>(base: T, pro
 
 declare const PlayButton_base: typeof Button & Constructor<StateReceiverElement>;
 /**
- * A button that toggles whether the player is playing or paused.
+ * `<theoplayer-play-button>` - 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`.
@@ -209,11 +231,16 @@ declare class PlayButton extends PlayButton_base {
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
     private _updateAriaLabel;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-play-button': PlayButton;
+    }
+}
 
 type VolumeLevel = 'off' | 'low' | 'high';
 declare const MuteButton_base: typeof Button & Constructor<StateReceiverElement>;
 /**
- * A button that toggles whether audio is muted or not.
+ * `<theoplayer-mute-button>` - 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%).
@@ -235,10 +262,15 @@ declare class MuteButton extends MuteButton_base {
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
     private _updateAriaLabel;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-mute-button': MuteButton;
+    }
+}
 
 declare const SeekButton_base: typeof Button & Constructor<StateReceiverElement>;
 /**
- * A button that seeks forward or backward by a fixed offset.
+ * `<theoplayer-seek-button>` - 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
@@ -260,13 +292,18 @@ declare class SeekButton extends SeekButton_base {
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
     private _updateAriaLabel;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-seek-button': SeekButton;
+    }
+}
 
 declare const TimeDisplay_base: {
     new (): HTMLElement;
     prototype: HTMLElement;
 } & Constructor<StateReceiverElement>;
 /**
- * A control that displays the current time of the stream.
+ * `<theoplayer-time-display>` - 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`.
@@ -288,13 +325,18 @@ declare class TimeDisplay extends TimeDisplay_base {
     private readonly _updateFromPlayer;
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-time-display': TimeDisplay;
+    }
+}
 
 declare const DurationDisplay_base: {
     new (): HTMLElement;
     prototype: HTMLElement;
 } & Constructor<StateReceiverElement>;
 /**
- * A control that displays the duration of the stream.
+ * `<theoplayer-duration-display>` - A control that displays the duration of the stream.
  *
  * @group Components
  */
@@ -308,9 +350,14 @@ declare class DurationDisplay extends DurationDisplay_base {
     set player(player: ChromelessPlayer | undefined);
     private readonly _updateFromPlayer;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-duration-display': DurationDisplay;
+    }
+}
 
 /**
- * A button that can be checked.
+ * `<theoplayer-radio-button>` - A button that can be checked.
  *
  * When part of a {@link RadioGroup}, at most one button in the group can be checked.
  *
@@ -334,9 +381,18 @@ declare class RadioButton extends Button {
     protected handleClick(): void;
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-radio-button': RadioButton;
+    }
+}
 
+declare const RadioGroup_base: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+} & Constructor<StateReceiverElement>;
 /**
- * A group of {@link RadioButton}s. At most one button in the group can be checked.
+ * `<theoplayer-radio-group>` - 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.
@@ -348,12 +404,15 @@ declare class RadioButton extends Button {
  *
  * @group Components
  */
-declare class RadioGroup extends HTMLElement {
+declare class RadioGroup extends RadioGroup_base {
     private _slot;
     private _radioButtons;
     constructor();
+    protected _upgradeProperty(prop: keyof this): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    get deviceType(): DeviceType;
+    set deviceType(deviceType: DeviceType);
     private readonly _onSlotChange;
     private readonly _onKeyDown;
     get focusedRadioButton(): RadioButton | null;
@@ -370,19 +429,27 @@ declare class RadioGroup extends HTMLElement {
     setCheckedRadioButton(checkedButton: RadioButton | null): void;
     private readonly _onButtonChange;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-radio-group': RadioGroup;
+    }
+}
 
 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.
+ * `<theoplayer-menu>` - 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.
+ *
+ * @slot `heading` - A slot for the menu's heading.
+ *
  * @group Components
  */
 declare class Menu extends HTMLElement {
@@ -401,6 +468,12 @@ declare class Menu extends HTMLElement {
     protected _upgradeProperty(prop: keyof this): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * Whether to automatically close the menu whenever one of its controls
+     * receives an input (e.g. when a radio button is clicked).
+     */
+    get closeOnInput(): boolean;
+    set closeOnInput(value: boolean);
     /**
      * Open the menu.
      */
@@ -412,13 +485,18 @@ declare class Menu extends HTMLElement {
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
     private readonly _onContentInput;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-menu': Menu;
+    }
+}
 
 interface MenuGroupOptions {
     template?: HTMLTemplateElement;
 }
 declare function menuGroupTemplate(content: string, extraCss?: string): string;
 /**
- * A group of {@link Menu}s.
+ * `<theoplayer-menu-group>` - 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".
@@ -495,9 +573,14 @@ declare class MenuGroup extends HTMLElement {
     private readonly _onMenuChange;
     private readonly _onKeyDown;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-menu-group': MenuGroup;
+    }
+}
 
 /**
- * A menu button that opens a {@link Menu}.
+ * `<theoplayer-menu-button>` - A menu button that opens a {@link Menu}.
  *
  * @attribute `menu` - The ID of the menu to open.
  * @group Components
@@ -514,9 +597,14 @@ declare class MenuButton extends Button {
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
     protected handleClick(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-menu-button': MenuButton;
+    }
+}
 
 /**
- * A button that closes its parent menu.
+ * `<theoplayer-menu-close-button>` - A button that closes its parent menu.
  *
  * This button must be placed inside a {@link Menu | `<theoplayer-menu>`}.
  *
@@ -528,9 +616,16 @@ declare class CloseMenuButton extends Button {
     connectedCallback(): void;
     protected handleClick(): void;
 }
+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.
+ * `<theoplayer-media-track-radio-button>` - 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 {
@@ -547,6 +642,11 @@ declare class MediaTrackRadioButton extends RadioButton {
     private readonly _onTrackChange;
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-media-track-radio-button': MediaTrackRadioButton;
+    }
+}
 
 type TrackType = 'audio' | 'video' | 'subtitles';
 declare const TrackRadioGroup_base: {
@@ -554,7 +654,8 @@ declare const TrackRadioGroup_base: {
     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.
+ * `<theoplayer-track-radio-group>` - 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.
@@ -594,9 +695,14 @@ declare class TrackRadioGroup extends TrackRadioGroup_base {
     private readonly _onChange;
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-track-radio-group': TrackRadioGroup;
+    }
+}
 
 /**
- * A radio button that shows the label of a given text track, and switches to that track when clicked.
+ * `<theoplayer-text-track-radio-button>` -A radio button that shows the label of a given text track, and switches to that track when clicked.
  *
  * @group Components
  */
@@ -614,9 +720,14 @@ declare class TextTrackRadioButton extends RadioButton {
     private readonly _onTrackChange;
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-text-track-radio-button': TextTrackRadioButton;
+    }
+}
 
 /**
- * A radio button that disables the active subtitle track when clicked.
+ * `<theoplayer-text-track-off-radio-button>` - A radio button that disables the active subtitle track when clicked.
  *
  * @group Components
  */
@@ -630,6 +741,11 @@ declare class TextTrackOffRadioButton extends RadioButton {
     private readonly _onTrackChange;
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-text-track-off-radio-button': TextTrackOffRadioButton;
+    }
+}
 
 interface TextTrackStyleMap {
     fontFamily: string | undefined;
@@ -648,7 +764,8 @@ declare const TextTrackStyleRadioGroup_base: {
     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.
+ * `<theoplayer-text-track-style-radio-group>` - 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.
@@ -683,13 +800,19 @@ declare class TextTrackStyleRadioGroup extends TextTrackStyleRadioGroup_base {
     private _updateToPlayer;
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-text-track-style-radio-group': TextTrackStyleRadioGroup;
+    }
+}
 
 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.
+ * `<theoplayer-text-track-style-display>` - A control that 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
@@ -711,19 +834,33 @@ declare class TextTrackStyleDisplay extends TextTrackStyleDisplay_base {
     private readonly _updateFromPlayer;
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-text-track-style-display': TextTrackStyleDisplay;
+    }
+}
 
 /**
- * A menu to change the {@link theoplayer!TextTrackStyle | text track style} of the player.
+ * `<theoplayer-text-track-style-menu>` - A menu to change the {@link theoplayer!TextTrackStyle | text track style} of the player.
+ *
+ * @slot `heading` - A slot for the menu's heading.
  *
  * @group Components
  */
 declare class TextTrackStyleMenu extends MenuGroup {
     constructor();
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-text-track-style-menu': TextTrackStyleMenu;
+    }
+}
 
 declare const LanguageMenu_base: typeof MenuGroup & Constructor<StateReceiverElement>;
 /**
- * A menu to change the spoken language and subtitles of the stream.
+ * `<theoplayer-language-menu>` - A menu to change the spoken language and subtitles of the stream.
+ *
+ * @slot `heading` - A slot for the menu's heading.
  *
  * @group Components
  */
@@ -737,10 +874,15 @@ declare class LanguageMenu extends LanguageMenu_base {
     private readonly _updateTextTracks;
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-language-menu': LanguageMenu;
+    }
+}
 
 declare const LanguageMenuButton_base: typeof MenuButton & Constructor<StateReceiverElement>;
 /**
- * A menu button that opens a {@link LanguageMenu}.
+ * `<theoplayer-language-menu-button>` - A menu button that opens a {@link LanguageMenu}.
  *
  * When there are no alternative audio languages or subtitles, this button automatically hides itself.
  *
@@ -755,13 +897,19 @@ declare class LanguageMenuButton extends LanguageMenuButton_base {
     set player(player: ChromelessPlayer | undefined);
     private readonly _updateTracks;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-language-menu-button': LanguageMenuButton;
+    }
+}
 
 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.
+ * `<theoplayer-playback-rate-radio-group>` - 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.
@@ -788,9 +936,14 @@ declare class PlaybackRateRadioGroup extends PlaybackRateRadioGroup_base {
     private readonly _onChange;
     private readonly _updateFromPlayer;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-playback-rate-radio-group': PlaybackRateRadioGroup;
+    }
+}
 
 /**
- * A menu button that opens a [playback rate menu]{@link PlaybackRateMenu}.
+ * `<theoplayer-playback-rate-menu-button>` - A menu button that opens a [playback rate menu]{@link PlaybackRateMenu}.
  *
  * @attribute menu - The ID of the playback rate menu.
  * @group Components
@@ -799,21 +952,35 @@ declare class PlaybackRateMenuButton extends MenuButton {
     constructor();
     connectedCallback(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-playback-rate-menu-button': PlaybackRateMenuButton;
+    }
+}
 
 /**
- * A menu to change the playback rate of the player.
+ * `<theoplayer-playback-rate-menu>` - A menu to change the playback rate of the player.
+ *
+ * @slot `heading` - A slot for the menu's heading.
  *
  * @group Components
  */
 declare class PlaybackRateMenu extends Menu {
     constructor();
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-playback-rate-menu': PlaybackRateMenu;
+    }
+}
 
 declare const PlaybackRateDisplay_base: {
     new (): HTMLElement;
     prototype: HTMLElement;
 } & Constructor<StateReceiverElement>;
 /**
+ * `<theoplayer-playback-rate-display>` - A control that displays the current playback rate of the player.
+ *
  * @group Components
  */
 declare class PlaybackRateDisplay extends PlaybackRateDisplay_base {
@@ -825,12 +992,19 @@ declare class PlaybackRateDisplay extends PlaybackRateDisplay_base {
     get playbackRate(): number;
     set playbackRate(value: number);
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-playback-rate-display': PlaybackRateDisplay;
+    }
+}
 
 declare const ActiveQualityDisplay_base: {
     new (): HTMLElement;
     prototype: HTMLElement;
 } & Constructor<StateReceiverElement>;
 /**
+ * `<theoplayer-active-quality-display>` - A control that displays the name of the active video quality.
+ *
  * @group Components
  */
 declare class ActiveQualityDisplay extends ActiveQualityDisplay_base {
@@ -846,10 +1020,15 @@ declare class ActiveQualityDisplay extends ActiveQualityDisplay_base {
     set targetVideoQualities(qualities: VideoQuality[] | undefined);
     private update_;
 }
+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.
+ * `<theoplayer-quality-radio-button>` - 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
  */
@@ -873,13 +1052,19 @@ declare class QualityRadioButton extends RadioButton {
     private _updateTargetQuality;
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-quality-radio-button': QualityRadioButton;
+    }
+}
 
 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.
+ * `<theoplayer-quality-radio-group>` - A radio group that shows a list of available video qualities,
+ * from which the user can choose a desired target quality.
  *
  * @group Components
  */
@@ -897,10 +1082,15 @@ declare class QualityRadioGroup extends QualityRadioGroup_base {
     private readonly _updateTrack;
     private readonly _update;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-quality-radio-group': QualityRadioGroup;
+    }
+}
 
 declare const TextTrackStyleResetButton_base: typeof Button & Constructor<StateReceiverElement>;
 /**
- * A button that resets the text track style.
+ * `<theoplayer-text-track-style-reset-button>` - A button that resets the text track style.
  *
  * @group Components
  */
@@ -912,18 +1102,31 @@ declare class TextTrackStyleResetButton extends TextTrackStyleResetButton_base {
     set player(player: ChromelessPlayer | undefined);
     protected handleClick(): void;
 }
+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.
+ * `<theoplayer-settings-menu>` - 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.
  *
  * @group Components
  */
 declare class SettingsMenu extends MenuGroup {
     constructor();
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-settings-menu': SettingsMenu;
+    }
+}
 
 /**
- * A menu button that opens a {@link SettingsMenu}.
+ * `<theoplayer-settings-menu-button>` - A menu button that opens a {@link SettingsMenu}.
  *
  * @attribute `menu` - The ID of the settings menu.
  * @group Components
@@ -932,10 +1135,15 @@ declare class SettingsMenuButton extends MenuButton {
     constructor();
     connectedCallback(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-settings-menu-button': SettingsMenuButton;
+    }
+}
 
 declare const FullscreenButton_base: typeof Button & Constructor<StateReceiverElement>;
 /**
- * A button that toggles fullscreen.
+ * `<theoplayer-fullscreen-button>` - A button that toggles fullscreen.
  *
  * @group Components
  */
@@ -949,6 +1157,11 @@ declare class FullscreenButton extends FullscreenButton_base {
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
     private _updateAriaLabel;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-fullscreen-button': FullscreenButton;
+    }
+}
 
 declare class ColorStops {
     private _stops;
@@ -961,6 +1174,10 @@ interface RangeOptions {
     template: HTMLTemplateElement;
 }
 declare function rangeTemplate(range: string, extraCss?: string): string;
+declare const Range_base: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+} & Constructor<StateReceiverElement>;
 /**
  * A slider to select a value from a range.
  *
@@ -969,7 +1186,7 @@ declare function rangeTemplate(range: string, extraCss?: string): string;
  *
  * @group Components
  */
-declare abstract class Range extends HTMLElement {
+declare abstract class Range extends Range_base {
     static get observedAttributes(): Attribute[];
     protected readonly _rangeEl: HTMLInputElement;
     protected readonly _pointerEl: HTMLElement;
@@ -1007,6 +1224,8 @@ declare abstract class Range extends HTMLElement {
      */
     get step(): number | 'any';
     set step(step: number | 'any');
+    get deviceType(): DeviceType;
+    set deviceType(deviceType: DeviceType);
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
     private readonly _onInput;
     protected handleInput(): void;
@@ -1033,6 +1252,8 @@ declare abstract class Range extends HTMLElement {
     protected getBarColors(): ColorStops;
     private readonly _updatePointerBar;
     protected updatePointer_(mousePercent: number, rangeRect: DOMRectReadOnly): void;
+    private readonly _onKeyDown;
+    protected handleKeyDown_(e: KeyboardEvent): void;
 }
 
 declare const PreviewThumbnail_base: {
@@ -1040,7 +1261,8 @@ declare const PreviewThumbnail_base: {
     prototype: HTMLElement;
 } & Constructor<StateReceiverElement>;
 /**
- * A display that shows the thumbnail image at the current preview time of a {@link TimeRange | `<theoplayer-time-range>`}.
+ * `<theoplayer-preview-thumbnail>` - 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.
@@ -1071,13 +1293,18 @@ declare class PreviewThumbnail extends PreviewThumbnail_base {
     private showThumbnail_;
     private hideThumbnail_;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-preview-thumbnail': PreviewThumbnail;
+    }
+}
 
 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>`}.
+ * `<theoplayer-preview-time-display>` - 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
@@ -1101,10 +1328,16 @@ declare class PreviewTimeDisplay extends PreviewTimeDisplay_base {
     private readonly _update;
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-preview-time-display': PreviewTimeDisplay;
+    }
+}
 
 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.
+ * `<theoplayer-time-range>` - 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
@@ -1142,11 +1375,18 @@ declare class TimeRange extends TimeRange_base {
     protected updatePointer_(mousePercent: number, rangeRect: DOMRectReadOnly): void;
     protected getBarColors(): ColorStops;
     private readonly _onAdChange;
+    protected handleKeyDown_(e: KeyboardEvent): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-time-range': TimeRange;
+    }
 }
 
 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.
+ * `<theoplayer-volume-range>` - A volume slider, showing the current audio volume of the player,
+ * and which changes the volume when clicked or dragged.
  *
  * @group Components
  */
@@ -1160,13 +1400,18 @@ declare class VolumeRange extends VolumeRange_base {
     protected getAriaValueText(): string;
     protected handleInput(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-volume-range': VolumeRange;
+    }
+}
 
 declare const ErrorDisplay_base: {
     new (): HTMLElement;
     prototype: HTMLElement;
 } & Constructor<StateReceiverElement>;
 /**
- * A screen that shows the details of a fatal player error.
+ * `<theoplayer-error-display>` - A screen that shows the details of a fatal player error.
  *
  * @group Components
  */
@@ -1186,11 +1431,16 @@ declare class ErrorDisplay extends ErrorDisplay_base {
     set fullscreen(fullscreen: boolean);
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-error-display': ErrorDisplay;
+    }
+}
 
 /**
  * A generic button to start and stop casting.
  *
- * For a concrete implementation, see {@link ChromecastButton}.
+ * For a concrete implementation, see {@link ChromecastButton} and {@link AirPlayButton}.
  * @group Components
  */
 declare class CastButton extends Button {
@@ -1199,7 +1449,7 @@ declare class CastButton extends Button {
     constructor(options?: ButtonOptions);
     connectedCallback(): void;
     /**
-     * The cast API for which this cast button.
+     * The cast API for this cast button.
      */
     get castApi(): VendorCast | undefined;
     set castApi(castApi: VendorCast | undefined);
@@ -1214,7 +1464,7 @@ declare class CastButton extends Button {
 
 declare const ChromecastButton_base: typeof CastButton & Constructor<StateReceiverElement>;
 /**
- * A button to start and stop casting using Chromecast.
+ * `<theoplayer-chromecast-button>` - A button to start and stop casting using Chromecast.
  *
  * @group Components
  */
@@ -1227,13 +1477,18 @@ declare class ChromecastButton extends ChromecastButton_base {
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
     private _updateAriaLabel;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-chromecast-button': ChromecastButton;
+    }
+}
 
 declare const ChromecastDisplay_base: {
     new (): HTMLElement;
     prototype: HTMLElement;
 } & Constructor<StateReceiverElement>;
 /**
- * A control that displays the casting status while using Chromecast.
+ * `<theoplayer-chromecast-display>` - A control that displays the casting status while using Chromecast.
  *
  * @group Components
  */
@@ -1247,10 +1502,15 @@ declare class ChromecastDisplay extends ChromecastDisplay_base {
     set player(player: ChromelessPlayer | undefined);
     private readonly _updateFromPlayer;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-chromecast-display': ChromecastDisplay;
+    }
+}
 
 declare const AirPlayButton_base: typeof CastButton & Constructor<StateReceiverElement>;
 /**
- * A button to start and stop casting using AirPlay.
+ * `<theoplayer-airplay-button>` - A button to start and stop casting using AirPlay.
  *
  * @group Components
  */
@@ -1263,13 +1523,18 @@ declare class AirPlayButton extends AirPlayButton_base {
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
     private _updateAriaLabel;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-airplay-button': AirPlayButton;
+    }
+}
 
 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.
+ * `<theoplayer-loading-indicator>` - 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
@@ -1285,13 +1550,18 @@ declare class LoadingIndicator extends LoadingIndicator_base {
     private readonly _updateFromPlayer;
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-loading-indicator': LoadingIndicator;
+    }
+}
 
 declare const GestureReceiver_base: {
     new (): HTMLElement;
     prototype: HTMLElement;
 } & Constructor<StateReceiverElement>;
 /**
- * An overlay that receives and handles gestures on the player.
+ * `<theoplayer-gesture-receiver>` - 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.
@@ -1311,10 +1581,16 @@ declare class GestureReceiver extends GestureReceiver_base {
     handleTap(_event: MouseEvent): void;
     handleMouseClick(_event: MouseEvent): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-gesture-receiver': GestureReceiver;
+    }
+}
 
 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.
+ * `<theoplayer-live-button>` - 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.
@@ -1341,12 +1617,20 @@ declare class LiveButton extends LiveButton_base {
     protected handleClick(): void;
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-live-button': LiveButton;
+    }
+}
 
 declare const AdDisplay_base: {
     new (): HTMLElement;
     prototype: HTMLElement;
 } & Constructor<StateReceiverElement>;
 /**
+ * `<theoplayer-ad-countdown>` - 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).
+ *
  * @group Components
  */
 declare class AdDisplay extends AdDisplay_base {
@@ -1359,12 +1643,19 @@ declare class AdDisplay extends AdDisplay_base {
     set player(player: ChromelessPlayer | undefined);
     private readonly _updateFromPlayer;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-ad-display': AdDisplay;
+    }
+}
 
 declare const AdCountdown_base: {
     new (): HTMLElement;
     prototype: HTMLElement;
 } & Constructor<StateReceiverElement>;
 /**
+ * `<theoplayer-ad-countdown>` - A control that displays the remaining time of the current ad break.
+ *
  * @group Components
  */
 declare class AdCountdown extends AdCountdown_base {
@@ -1378,9 +1669,16 @@ declare class AdCountdown extends AdCountdown_base {
     private readonly _onAdChange;
     private readonly _update;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-ad-countdown': AdCountdown;
+    }
+}
 
 declare const AdClickThroughButton_base: typeof LinkButton & Constructor<StateReceiverElement>;
 /**
+ * `<theoplayer-ad-clickthrough-button>` - A button to open the advertisement's click-through webpage.
+ *
  * @group Components
  */
 declare class AdClickThroughButton extends AdClickThroughButton_base {
@@ -1396,9 +1694,17 @@ declare class AdClickThroughButton extends AdClickThroughButton_base {
     private readonly _updateFromPlayer;
     protected handleClick(): void;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-ad-clickthrough-button': AdClickThroughButton;
+    }
+}
 
 declare const AdSkipButton_base: typeof Button & Constructor<StateReceiverElement>;
 /**
+ * `<theoplayer-ad-skip-button>` - 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.
+ *
  * @group Components
  */
 declare class AdSkipButton extends AdSkipButton_base {
@@ -1415,6 +1721,11 @@ declare class AdSkipButton extends AdSkipButton_base {
     private readonly _onAdChange;
     private readonly _update;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-ad-skip-button': AdSkipButton;
+    }
+}
 
 declare enum ExtensionSlot {
     TopControlBar = "top-control-bar",
@@ -1422,8 +1733,10 @@ declare enum ExtensionSlot {
     Menu = "menu"
 }
 
+declare const READY_EVENT: "theoplayerready";
+
 /**
- * A default UI for THEOplayer.
+ * `<theoplayer-default-ui>` - 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,
@@ -1448,8 +1761,10 @@ declare enum ExtensionSlot {
  * @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 `device-type` - The device type, either "desktop", "mobile" or "tv".
+ *   Can be used in CSS to show/hide certain device-specific UI controls.
+ * @attribute `mobile` - Whether the user is on a mobile device. Equivalent to `device-type == "mobile"`.
+ * @attribute `tv` - Whether the user is on a TV device. Equivalent to `device-type == "tv"`.
  * @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>`}.
@@ -1460,12 +1775,19 @@ declare enum ExtensionSlot {
  * @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 `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 `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 {
+    /**
+     * Fired when the backing player is created, and the {@link DefaultUI.player} property is set.
+     *
+     * @group Events
+     */
+    static READY_EVENT: typeof READY_EVENT;
     static get observedAttributes(): Attribute[];
     private readonly _ui;
     private readonly _titleSlot;
@@ -1500,6 +1822,11 @@ declare class DefaultUI extends HTMLElement {
      */
     get source(): SourceDescription | undefined;
     set source(value: SourceDescription | undefined);
+    /**
+     * Whether to automatically adjusts the player's height to fit the video's aspect ratio.
+     */
+    get fluid(): boolean;
+    set fluid(value: boolean);
     /**
      * Whether the player's audio is muted.
      */
@@ -1534,8 +1861,14 @@ declare class DefaultUI extends HTMLElement {
     disconnectedCallback(): void;
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
     private readonly _updateStreamType;
+    private readonly _dispatchReadyEvent;
     private readonly _onTitleSlotChange;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-default-ui': DefaultUI;
+    }
+}
 
 /**
  * An extension for the default UI.
@@ -1570,7 +1903,7 @@ type Extension = (ui: DefaultUI) => void;
 declare function registerExtension(extension: Extension): void;
 
 /**
- * The container element for a THEOplayer UI.
+ * `<theoplayer-ui>` - 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.
@@ -1596,8 +1929,10 @@ declare function registerExtension(extension: Extension): void;
  * @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 `device-type` - The device type, either "desktop", "mobile" or "tv".
+ *   Can be used in CSS to show/hide certain device-specific UI controls.
+ * @attribute `mobile` - Whether the user is on a mobile device. Equivalent to `device-type == "mobile"`.
+ * @attribute `tv` - Whether the user is on a TV device. Equivalent to `device-type == "tv"`.
  * @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>`}.
@@ -1612,7 +1947,7 @@ declare function registerExtension(extension: Extension): void;
  *   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 `casting` (readonly) - Whether the player is casting. 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.
@@ -1633,6 +1968,12 @@ declare function registerExtension(extension: Extension): void;
  * @group Components
  */
 declare class UIContainer extends HTMLElement {
+    /**
+     * Fired when the backing player is created, and the {@link UIContainer.player} property is set.
+     *
+     * @group Events
+     */
+    static READY_EVENT: typeof READY_EVENT;
     static get observedAttributes(): Attribute[];
     private _configuration;
     private readonly _playerEl;
@@ -1683,6 +2024,11 @@ declare class UIContainer extends HTMLElement {
     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);
     /**
      * Whether the player's audio is muted.
      */
@@ -1715,6 +2061,10 @@ declare class UIContainer extends HTMLElement {
      */
     get userIdleTimeout(): number;
     set userIdleTimeout(value: number);
+    /**
+     * The device type, either "desktop", "mobile" or "tv".
+     */
+    get deviceType(): DeviceType;
     /**
      * The stream type, either "vod", "live" or "dvr".
      *
@@ -1769,6 +2119,7 @@ declare class UIContainer extends HTMLElement {
     private readonly setUserIdle_;
     private readonly scheduleUserIdle_;
     private isPlayerOrMedia_;
+    private readonly _onTvKeyDown;
     private readonly _onKeyUp;
     private readonly _onPointerUp;
     private readonly _onClickAfterPointerUp;
@@ -1778,6 +2129,11 @@ declare class UIContainer extends HTMLElement {
     private readonly _updateTextTrackMargins;
     private readonly _onPreviewTimeChange;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-ui': UIContainer;
+    }
+}
 
-export { ActiveQualityDisplay, AdClickThroughButton, AdCountdown, AdDisplay, AdSkipButton, AirPlayButton, Attribute, Button, ButtonOptions, CastButton, ChromecastButton, ChromecastDisplay, CloseMenuButton, ColorStops, 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 { ActiveQualityDisplay, AdClickThroughButton, AdCountdown, AdDisplay, AdSkipButton, AirPlayButton, Attribute, Button, ButtonOptions, CastButton, ChromecastButton, ChromecastDisplay, CloseMenuButton, ColorStops, Constructor, ControlBar, DefaultUI, DeviceType, 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;