@theoplayer/web-ui 1.4.0 → 1.5.0

package/README.md

@@ -1,4 +1,4 @@
-# THEOplayer Web UI
+# THEOplayer Open Video UI for Web
 
 A component library for building a world-class video player experience powered by
 the [THEOplayer Web SDK](https://www.theoplayer.com/product/theoplayer).
@@ -20,10 +20,10 @@ The current THEOplayer Web SDK comes with a built-in UI based on [video.js](http
 
 -   Designed with customization in mind. With the old UI, customizing anything beyond changing some text and icon colors was difficult, and could break in unpredictable ways when updating to a new THEOplayer version. With the new UI, all components can be customized in a variety of ways with well-documented attributes and CSS custom properties.
 -   Built for the modern web. The old UI was built at a time when Internet Explorer was still a major browser, so it couldn't use newer web technologies. The new UI breaks with the past and takes full advantage of Web Components, so it works well in modern web apps.
--   Developed in the open. Although the old UI is based on the open-source video.js library, any custom components bundled with THEOplayer remained closed-source. With the new UI, the source code of all components is publicly available. Advanced users can learn about the inner workings of each component, modify them, and even contribute their changes back to THEOplayer Web UI.
+-   Developed in the open. Although the old UI is based on the open-source video.js library, any custom components bundled with THEOplayer remained closed-source. With the new UI, the source code of all components is publicly available. Advanced users can learn about the inner workings of each component, modify them, and even contribute their changes back to Open Video UI.
 
 > **Note**
-> THEOplayer Web UI currently exists separately from the old THEOplayer UI. In the future, we hope to deprecate and remove the old UI, and ship this new UI as default UI for the THEOplayer Web SDK.
+> THEOplayer Open Video UI for Web currently exists separately from the old THEOplayer UI. In the future, we hope to deprecate and remove the old UI, and ship this new UI as default UI for the THEOplayer Web SDK.
 
 ## Installation
 
@@ -35,7 +35,7 @@ The current THEOplayer Web SDK comes with a built-in UI based on [video.js](http
     ```sh
     npm install theoplayer@npm:@theoplayer/basic-hls
     ```
-2. Install the THEOplayer Web UI.
+2. Install the Open Video UI for Web.
     ```sh
     npm install @theoplayer/web-ui
     ```
@@ -49,7 +49,7 @@ The current THEOplayer Web SDK comes with a built-in UI based on [video.js](http
         ```js
         import { DefaultUI } from '@theoplayer/web-ui';
         ```
-        The Web UI will import THEOplayer from `theoplayer/chromeless`.
+        Open Video UI will import THEOplayer from `theoplayer/chromeless`.
         If you're using a bundler such as Webpack or Rollup, this dependency should automatically get bundled with your web app.
         Alternatively, you can use an [import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap) to let the browser resolve it:
         ```html
@@ -127,9 +127,9 @@ See [docs/examples/custom-ui.html](https://github.com/THEOplayer/web-ui/blob/mai
 
 # Legacy browser support
 
-By default, THEOplayer Web UI targets modern browsers that support modern JavaScript syntax (such as [async/await](https://caniuse.com/async-functions)) and native [Custom Elements](https://caniuse.com/custom-elementsv1). This keeps the download size small, so your viewers can spend less time waiting for your page to load and start watching their video faster.
+By default, Open Video UI for Web targets modern browsers that support modern JavaScript syntax (such as [async/await](https://caniuse.com/async-functions)) and native [Custom Elements](https://caniuse.com/custom-elementsv1). This keeps the download size small, so your viewers can spend less time waiting for your page to load and start watching their video faster.
 
-On older browsers (such as Internet Explorer 11 and older smart TVs), you need to load a different version of the THEOplayer Web UI that uses older JavaScript syntax. You also need to load additional polyfills for missing features such as Promises or Custom Elements. We recommend [Polyfill.io](https://polyfill.io/) and [Web Components Polyfills](https://github.com/webcomponents/polyfills) for these.
+On older browsers (such as Internet Explorer 11 and older smart TVs), you need to load a different version of the Open Video UI that uses older JavaScript syntax. You also need to load additional polyfills for missing features such as Promises or Custom Elements. We recommend [Polyfill.io](https://polyfill.io/) and [Web Components Polyfills](https://github.com/webcomponents/polyfills) for these.
 
 -   Option 1: in your HTML. This uses [differential serving](https://css-tricks.com/differential-serving/) so modern browsers will load the modern build (with `type="module"`), while legacy browsers will load the legacy build (with `nomodule`).
 
@@ -153,7 +153,7 @@ On older browsers (such as Internet Explorer 11 and older smart TVs), you need t
     <script nomodule src="/path/to/node_modules/@theoplayer/web-ui/dist/THEOplayerUI.es5.js"></script>
     ```
 
--   Option 2: in your JavaScript. This will load the legacy build on both modern and legacy browsers, which is suboptimal. Instead, we recommend configuring your bundler to produce a modern and legacy build of your entire web app, and to import the appropriate version of THEOplayer Web UI for each build flavor.
+-   Option 2: in your JavaScript. This will load the legacy build on both modern and legacy browsers, which is suboptimal. Instead, we recommend configuring your bundler to produce a modern and legacy build of your entire web app, and to import the appropriate version of Open Video UI for each build flavor.
 
     ```js
     import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';

package/dist/THEOplayerUI.d.ts

@@ -1,11 +1,11 @@
 /*!
- * THEOplayer Web UI v1.4.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/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`.
@@ -213,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%).
@@ -238,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
@@ -266,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`.
@@ -294,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
  */
@@ -310,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.
  *
@@ -335,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.
@@ -348,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;
@@ -376,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.
  *
@@ -418,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".
@@ -497,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
@@ -516,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>`}.
  *
@@ -530,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 {
@@ -554,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.
@@ -596,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
  */
@@ -616,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
  */
@@ -648,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.
@@ -689,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
@@ -713,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
  */
@@ -723,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
  */
@@ -740,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.
  *
@@ -761,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.
@@ -790,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
@@ -801,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
  */
@@ -814,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 {
@@ -831,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 {
@@ -848,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
  */
@@ -879,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
  */
@@ -900,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
  */
@@ -914,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
  */
@@ -923,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
@@ -935,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
  */
@@ -961,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.
  *
@@ -969,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;
@@ -1007,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;
@@ -1033,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: {
@@ -1040,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.
@@ -1077,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
@@ -1104,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
@@ -1142,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
  */
@@ -1166,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
  */
@@ -1190,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 {
@@ -1214,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
  */
@@ -1233,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
  */
@@ -1250,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
  */
@@ -1269,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
@@ -1291,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.
@@ -1314,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.
@@ -1423,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,
@@ -1448,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>`}.
@@ -1570,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.
@@ -1596,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>`}.
@@ -1715,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".
      *
@@ -1769,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;
@@ -1779,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;