@theoplayer/web-ui 1.3.0 → 1.5.0

package/dist/THEOplayerUI.d.ts

@@ -1,11 +1,11 @@
 /*!
- * THEOplayer Web UI v1.3.0
+ * THEOplayer Open Video UI for Web (v1.5.0)
  * License: MIT
  */
-import { ChromelessPlayer, VideoQuality, THEOplayerError, MediaTrack, TextTrack, TextTracksList, EdgeStyle, VendorCast, CastState, PlayerConfiguration, SourceDescription } from 'theoplayer/THEOplayer.chromeless';
+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
  */
@@ -21,9 +21,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 +75,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 +103,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.
@@ -110,7 +114,7 @@ declare class Button extends HTMLElement {
 
 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
@@ -138,6 +142,8 @@ declare class LinkButton extends HTMLElement {
 
 type Constructor<T> = abstract new (...args: any[]) => T;
 
+type DeviceType = 'desktop' | 'mobile' | 'tv';
+
 type StreamType = 'vod' | 'live' | 'dvr';
 
 /** @internal */
@@ -145,6 +151,7 @@ declare const StateReceiverProps: "theoplayerUiObservedProperties";
 interface StateReceiverPropertyMap {
     player: ChromelessPlayer | undefined;
     fullscreen: boolean;
+    deviceType: DeviceType;
     streamType: StreamType;
     playbackRate: number;
     activeVideoQuality: VideoQuality | undefined;
@@ -183,7 +190,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`.
@@ -204,6 +211,7 @@ declare class PlayButton extends PlayButton_base {
     private readonly _onPause;
     private readonly _updateFromPlayer;
     private _updateEnded;
+    private readonly _updateDisabled;
     protected handleClick(): void;
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
     private _updateAriaLabel;
@@ -212,7 +220,7 @@ declare class PlayButton extends PlayButton_base {
 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%).
@@ -237,7 +245,7 @@ declare class MuteButton extends MuteButton_base {
 
 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
@@ -265,7 +273,7 @@ declare const TimeDisplay_base: {
     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`.
@@ -293,7 +301,7 @@ declare const DurationDisplay_base: {
     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
  */
@@ -309,7 +317,7 @@ declare class DurationDisplay extends DurationDisplay_base {
 }
 
 /**
- * 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,8 +342,12 @@ declare class RadioButton extends Button {
     attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
 }
 
+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.
@@ -347,12 +359,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;
@@ -375,7 +390,7 @@ interface MenuOptions {
 }
 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.
  *
@@ -417,7 +432,7 @@ interface MenuGroupOptions {
 }
 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".
@@ -496,7 +511,7 @@ declare class MenuGroup extends HTMLElement {
 }
 
 /**
- * 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
@@ -515,7 +530,7 @@ declare class MenuButton extends Button {
 }
 
 /**
- * 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>`}.
  *
@@ -529,7 +544,9 @@ declare class CloseMenuButton extends Button {
 }
 
 /**
- * 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 {
@@ -553,7 +570,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.
@@ -595,7 +613,7 @@ declare class TrackRadioGroup extends TrackRadioGroup_base {
 }
 
 /**
- * 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
  */
@@ -615,7 +633,7 @@ declare class TextTrackRadioButton extends RadioButton {
 }
 
 /**
- * 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
  */
@@ -647,7 +665,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.
@@ -688,7 +707,8 @@ declare const TextTrackStyleDisplay_base: {
     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
@@ -712,7 +732,7 @@ declare class TextTrackStyleDisplay extends TextTrackStyleDisplay_base {
 }
 
 /**
- * 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.
  *
  * @group Components
  */
@@ -722,7 +742,7 @@ declare class TextTrackStyleMenu extends MenuGroup {
 
 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.
  *
  * @group Components
  */
@@ -739,7 +759,7 @@ declare class LanguageMenu extends LanguageMenu_base {
 
 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.
  *
@@ -760,7 +780,8 @@ declare const PlaybackRateRadioGroup_base: {
     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.
@@ -789,7 +810,7 @@ declare class PlaybackRateRadioGroup extends PlaybackRateRadioGroup_base {
 }
 
 /**
- * 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
@@ -800,7 +821,7 @@ declare class PlaybackRateMenuButton extends MenuButton {
 }
 
 /**
- * A menu to change the playback rate of the player.
+ * `<theoplayer-playback-rate-menu>` - A menu to change the playback rate of the player.
  *
  * @group Components
  */
@@ -813,6 +834,8 @@ declare const PlaybackRateDisplay_base: {
     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 {
@@ -830,6 +853,8 @@ declare const ActiveQualityDisplay_base: {
     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 {
@@ -847,8 +872,8 @@ declare class ActiveQualityDisplay extends ActiveQualityDisplay_base {
 }
 
 /**
- * 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
  */
@@ -878,7 +903,8 @@ declare const QualityRadioGroup_base: {
     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
  */
@@ -899,7 +925,7 @@ declare class QualityRadioGroup extends QualityRadioGroup_base {
 
 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
  */
@@ -913,7 +939,8 @@ declare class TextTrackStyleResetButton extends TextTrackStyleResetButton_base {
 }
 
 /**
- * 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.
  *
  * @group Components
  */
@@ -922,7 +949,7 @@ declare class SettingsMenu extends MenuGroup {
 }
 
 /**
- * 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
@@ -934,7 +961,7 @@ declare class SettingsMenuButton extends MenuButton {
 
 declare const FullscreenButton_base: typeof Button & Constructor<StateReceiverElement>;
 /**
- * A button that toggles fullscreen.
+ * `<theoplayer-fullscreen-button>` - A button that toggles fullscreen.
  *
  * @group Components
  */
@@ -960,6 +987,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.
  *
@@ -968,7 +999,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;
@@ -1006,6 +1037,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;
@@ -1032,6 +1065,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: {
@@ -1039,7 +1074,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.
@@ -1076,7 +1112,7 @@ declare const PreviewTimeDisplay_base: {
     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
@@ -1103,7 +1139,8 @@ declare class PreviewTimeDisplay extends PreviewTimeDisplay_base {
 
 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
@@ -1141,11 +1178,13 @@ 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 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
  */
@@ -1165,7 +1204,7 @@ declare const ErrorDisplay_base: {
     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
  */
@@ -1189,7 +1228,7 @@ declare class ErrorDisplay extends ErrorDisplay_base {
 /**
  * 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 {
@@ -1213,7 +1252,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
  */
@@ -1232,7 +1271,7 @@ declare const ChromecastDisplay_base: {
     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
  */
@@ -1249,7 +1288,7 @@ declare class ChromecastDisplay extends ChromecastDisplay_base {
 
 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
  */
@@ -1268,7 +1307,7 @@ declare const LoadingIndicator_base: {
     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
@@ -1290,7 +1329,7 @@ declare const GestureReceiver_base: {
     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.
@@ -1313,7 +1352,8 @@ declare class GestureReceiver extends GestureReceiver_base {
 
 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.
@@ -1422,7 +1462,7 @@ declare enum ExtensionSlot {
 }
 
 /**
- * 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,
@@ -1447,8 +1487,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>`}.
@@ -1569,7 +1611,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.
@@ -1595,8 +1637,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>`}.
@@ -1714,6 +1758,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".
      *
@@ -1768,6 +1816,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,5 +1827,5 @@ declare class UIContainer extends HTMLElement {
     private readonly _onPreviewTimeChange;
 }
 
-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;