@theoplayer/web-ui 1.7.2 → 1.8.0

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+---
+description: Find out what's new in Open Video UI for Web.
+sidebar_custom_props: { 'icon': '📰' }
+---
+
 # Changelog
 
 > **Tags:**
@@ -10,6 +15,11 @@
 > -   🏠 Internal
 > -   💅 Polish
 
+## v1.8.0 (2024-04-12)
+
+-   💥 **Breaking Change**: This project now requires THEOplayer version 7.0.0 or higher. ([#60](https://github.com/THEOplayer/web-ui/pull/60))
+-   🚀 Added `<theolive-default-ui>` that provides a default UI for THEOlive streams. ([#58](https://github.com/THEOplayer/web-ui/pull/58))
+
 ## v1.7.2 (2024-03-18)
 
 -   🚀 Added `<theoplayer-slot-container>`. ([#55](https://github.com/THEOplayer/web-ui/pull/55))

package/README.md

@@ -18,7 +18,7 @@ the [THEOplayer Web SDK](https://www.theoplayer.com/product/theoplayer).
 
 ## Motivation
 
-The current THEOplayer Web SDK comes with a built-in UI based on [video.js](https://github.com/videojs/video.js) through [the `Player` constructor](https://docs.theoplayer.com/api-reference/web/theoplayer.player.md). This new UI aims to solve some limitations from the old approach:
+The current THEOplayer Web SDK comes with a built-in UI based on [video.js](https://github.com/videojs/video.js) through [the `Player` constructor](https://www.theoplayer.com/docs/theoplayer/v6/api-reference/web/classes/Player.html). This new UI aims to solve some limitations from the old approach:
 
 -   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.
@@ -127,7 +127,7 @@ If you want to fully customize your video player layout, you can use a `<theopla
 
 See [docs/examples/custom-ui.html](https://github.com/THEOplayer/web-ui/blob/main/docs/examples/custom-ui.html) for a complete example.
 
-# Legacy browser support
+### Legacy browser support
 
 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.
 

package/dist/THEOplayerUI.d.ts

@@ -1,5 +1,5 @@
 /*!
- * THEOplayer Open Video UI for Web (v1.7.2)
+ * THEOplayer Open Video UI for Web (v1.8.0)
  * License: MIT
  */
 import { ChromelessPlayer, VideoQuality, THEOplayerError, MediaTrack, TextTrack, TextTracksList, EdgeStyle, VendorCast, CastState, PlayerConfiguration, SourceDescription } from 'theoplayer/chromeless';
@@ -1759,173 +1759,6 @@ declare enum ExtensionSlot {
 
 declare const READY_EVENT: "theoplayerready";
 
-/**
- * `<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,
- * changing languages and qualities. It also supports advertisements and casting.
- *
- * ## Usage
- *
- * 1. Create a `<theoplayer-default-ui>` element.
- * 2. Set its `configuration` attribute or property to a valid player configuration.
- * 3. Set its `source` attribute or property to a valid stream source.
- * 4. Optionally, customize the player using CSS custom properties and/or extra controls.
- *
- * ## Customization
- *
- * The styling can be controlled using CSS custom properties (see {@link UIContainer | `<theoplayer-ui>`}).
- * Additional controls can be added to the `top-control-bar` and `bottom-control-bar` slots.
- * For more extensive customizations, we recommend defining your own custom UI using
- * a {@link UIContainer | `<theoplayer-ui>`}.
- *
- * @attribute `configuration` - The THEOplayer {@link theoplayer!PlayerConfiguration | PlayerConfiguration}, as a JSON string.
- * @attribute `source` - The THEOplayer {@link theoplayer!SourceDescription | SourceDescription}, as a JSON string.
- * @attribute `fluid` - If set, the player automatically adjusts its height to fit the video's aspect ratio.
- * @attribute `muted` - If set, the player starts out as muted. Reflects `ui.player.muted`.
- * @attribute `autoplay` - If set, the player attempts to automatically start playing (if allowed).
- * @attribute `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>`}.
- *   If you know in advance that the source will be a livestream, you can set this attribute to avoid a screen flicker
- *   when the player switches between its VOD-specific and live-only controls.
- * @attribute `user-idle-timeout` - The timeout (in seconds) between when the user stops interacting with the UI,
- *   and when the user is considered to be "idle".
- * @attribute `dvr-threshold` - The minimum length (in seconds) of a livestream's sliding window for the stream to be DVR
- *   and its stream type to be set to "dvr".
- *
- * @slot `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;
-    private readonly _timeRange;
-    private _appliedExtensions;
-    /**
-     * Creates a new THEOplayer default UI.
-     *
-     * @param configuration - The player configuration.
-     *   Will be passed to the {@link theoplayer!ChromelessPlayer | ChromelessPlayer} constructor to create
-     *   the underlying THEOplayer instance.
-     *   Can also be set later on through the {@link configuration} property.
-     */
-    constructor(configuration?: PlayerConfiguration);
-    private _upgradeProperty;
-    /**
-     * The underlying THEOplayer player instance.
-     *
-     * This is constructed automatically as soon as a valid {@link configuration} is set.
-     */
-    get player(): ChromelessPlayer | undefined;
-    /**
-     * The player configuration.
-     *
-     * Used to create the underlying THEOplayer instance.
-     */
-    get configuration(): PlayerConfiguration;
-    set configuration(configuration: PlayerConfiguration);
-    private setConfiguration_;
-    /**
-     * The player's current source.
-     */
-    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.
-     */
-    get muted(): boolean;
-    set muted(value: boolean);
-    /**
-     * Whether the player should attempt to automatically start playback.
-     */
-    get autoplay(): boolean;
-    set autoplay(value: boolean);
-    /**
-     * The stream type, either "vod", "live" or "dvr".
-     *
-     * If you know in advance that the source will be a livestream, you can set this property to avoid a screen flicker
-     * when the player switches between its VOD-specific and live-only controls.
-     */
-    get streamType(): StreamType;
-    set streamType(value: StreamType);
-    /**
-     * The timeout (in seconds) between when the user stops interacting with the UI,
-     * and when the user is considered to be "idle".
-     */
-    get userIdleTimeout(): number;
-    set userIdleTimeout(value: number);
-    /**
-     * The minimum length (in seconds) of a livestream's sliding window for the stream to be DVR
-     * and its stream type to be set to "dvr".
-     */
-    get dvrThreshold(): number;
-    set dvrThreshold(value: number);
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
-    private readonly _updateStreamType;
-    private readonly _dispatchReadyEvent;
-    private readonly _onTitleSlotChange;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'theoplayer-default-ui': DefaultUI;
-    }
-}
-
-/**
- * An extension for the default UI.
- *
- * This is called whenever a `<theoplayer-default-ui>` element is created.
- * The extension can then choose to modify this element, for example by appending extra elements
- * or attaching extra event listeners.
- *
- * @example
- * The following extension adds an extra button to the bottom control bar of every default UI:
- * ```javascript
- * THEOplayerUI.registerExtension((ui) => {
- *     // Create a new button
- *     const button = new THEOplayerUI.Button();
- *     button.innerHTML = "Click me!";
- *     button.addEventListener("click", () => alert("I was clicked!"));
- *     // Place it in the bottom control bar
- *     button.slot = "bottom-control-bar";
- *     ui.appendChild(button);
- * });
- * ```
- * See the documentation of `<theoplayer-default-ui>` for more information about the available slots
- * in which you can add extra elements.
- */
-type Extension = (ui: DefaultUI) => void;
-/**
- * Registers an extension for the default UI.
- *
- * @param extension The extension.
- * @see {@link Extension}
- */
-declare function registerExtension(extension: Extension): void;
-
 /**
  * `<theoplayer-ui>` - The container element for a THEOplayer UI.
  *
@@ -2159,10 +1992,225 @@ declare global {
     }
 }
 
+/**
+ * `<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,
+ * changing languages and qualities. It also supports advertisements and casting.
+ *
+ * ## Usage
+ *
+ * 1. Create a `<theoplayer-default-ui>` element.
+ * 2. Set its `configuration` attribute or property to a valid player configuration.
+ * 3. Set its `source` attribute or property to a valid stream source.
+ * 4. Optionally, customize the player using CSS custom properties and/or extra controls.
+ *
+ * ## Customization
+ *
+ * The styling can be controlled using CSS custom properties (see {@link UIContainer | `<theoplayer-ui>`}).
+ * Additional controls can be added to the `top-control-bar` and `bottom-control-bar` slots.
+ * For more extensive customizations, we recommend defining your own custom UI using
+ * a {@link UIContainer | `<theoplayer-ui>`}.
+ *
+ * @attribute `configuration` - The THEOplayer {@link theoplayer!PlayerConfiguration | PlayerConfiguration}, as a JSON string.
+ * @attribute `source` - The THEOplayer {@link theoplayer!SourceDescription | SourceDescription}, as a JSON string.
+ * @attribute `fluid` - If set, the player automatically adjusts its height to fit the video's aspect ratio.
+ * @attribute `muted` - If set, the player starts out as muted. Reflects `ui.player.muted`.
+ * @attribute `autoplay` - If set, the player attempts to automatically start playing (if allowed).
+ * @attribute `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>`}.
+ *   If you know in advance that the source will be a livestream, you can set this attribute to avoid a screen flicker
+ *   when the player switches between its VOD-specific and live-only controls.
+ * @attribute `user-idle-timeout` - The timeout (in seconds) between when the user stops interacting with the UI,
+ *   and when the user is considered to be "idle".
+ * @attribute `dvr-threshold` - The minimum length (in seconds) of a livestream's sliding window for the stream to be DVR
+ *   and its stream type to be set to "dvr".
+ *
+ * @slot `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[];
+    protected readonly _shadowRoot: ShadowRoot;
+    protected readonly _ui: UIContainer;
+    private readonly _titleSlot;
+    private readonly _timeRange;
+    private _appliedExtensions;
+    /**
+     * Creates a new THEOplayer default UI.
+     *
+     * @param configuration - The player configuration.
+     *   Will be passed to the {@link theoplayer!ChromelessPlayer | ChromelessPlayer} constructor to create
+     *   the underlying THEOplayer instance.
+     *   Can also be set later on through the {@link configuration} property.
+     */
+    constructor(configuration?: PlayerConfiguration);
+    protected initShadowRoot(): ShadowRoot;
+    private _upgradeProperty;
+    /**
+     * The underlying THEOplayer player instance.
+     *
+     * This is constructed automatically as soon as a valid {@link configuration} is set.
+     */
+    get player(): ChromelessPlayer | undefined;
+    /**
+     * The player configuration.
+     *
+     * Used to create the underlying THEOplayer instance.
+     */
+    get configuration(): PlayerConfiguration;
+    set configuration(configuration: PlayerConfiguration);
+    private setConfiguration_;
+    /**
+     * The player's current source.
+     */
+    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.
+     */
+    get muted(): boolean;
+    set muted(value: boolean);
+    /**
+     * Whether the player should attempt to automatically start playback.
+     */
+    get autoplay(): boolean;
+    set autoplay(value: boolean);
+    /**
+     * The stream type, either "vod", "live" or "dvr".
+     *
+     * If you know in advance that the source will be a livestream, you can set this property to avoid a screen flicker
+     * when the player switches between its VOD-specific and live-only controls.
+     */
+    get streamType(): StreamType;
+    set streamType(value: StreamType);
+    /**
+     * The timeout (in seconds) between when the user stops interacting with the UI,
+     * and when the user is considered to be "idle".
+     */
+    get userIdleTimeout(): number;
+    set userIdleTimeout(value: number);
+    /**
+     * The minimum length (in seconds) of a livestream's sliding window for the stream to be DVR
+     * and its stream type to be set to "dvr".
+     */
+    get dvrThreshold(): number;
+    set dvrThreshold(value: number);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    private readonly _updateStreamType;
+    private readonly _dispatchReadyEvent;
+    private readonly _onTitleSlotChange;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'theoplayer-default-ui': DefaultUI;
+    }
+}
+
+/**
+ * An extension for the default UI.
+ *
+ * This is called whenever a `<theoplayer-default-ui>` element is created.
+ * The extension can then choose to modify this element, for example by appending extra elements
+ * or attaching extra event listeners.
+ *
+ * @example
+ * The following extension adds an extra button to the bottom control bar of every default UI:
+ * ```javascript
+ * THEOplayerUI.registerExtension((ui) => {
+ *     // Create a new button
+ *     const button = new THEOplayerUI.Button();
+ *     button.innerHTML = "Click me!";
+ *     button.addEventListener("click", () => alert("I was clicked!"));
+ *     // Place it in the bottom control bar
+ *     button.slot = "bottom-control-bar";
+ *     ui.appendChild(button);
+ * });
+ * ```
+ * See the documentation of `<theoplayer-default-ui>` for more information about the available slots
+ * in which you can add extra elements.
+ */
+type Extension = (ui: DefaultUI) => void;
+/**
+ * Registers an extension for the default UI.
+ *
+ * @param extension The extension.
+ * @see {@link Extension}
+ */
+declare function registerExtension(extension: Extension): void;
+
+declare class BadNetworkModeMenu extends HTMLElement {
+    private readonly _radioGroup;
+    constructor();
+    protected _upgradeProperty(prop: keyof this): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly _onChange;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'theolive-bad-network-menu': BadNetworkModeMenu;
+    }
+}
+
+/**
+ * `<theolive-default-ui>` - A default UI for THEOlive.
+ *
+ * @group Components
+ */
+declare class THEOliveDefaultUI extends DefaultUI {
+    private readonly _loading;
+    private readonly _offline;
+    private readonly _announcement;
+    private readonly _errorDisplay;
+    private readonly _playButton;
+    private readonly _root;
+    constructor(configuration?: PlayerConfiguration);
+    protected initShadowRoot(): ShadowRoot;
+    private readonly onReady;
+    private onLoadChannelStart;
+    private onChannelOffline;
+    private onChannelLoaded;
+    private onError;
+    private hidePlayerError;
+    private stopHidingPlayerError;
+    private hidePlayerPlayButton_;
+    private stopHidingPlayerPlayButton;
+    private showMessage_;
+    private hideMessage_;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'theolive-default-ui': THEOliveDefaultUI;
+    }
+}
+
 /**
  * The version of Open Video UI for Web.
  */
 declare const version: string;
 
-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, SlotContainer, 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, version };
+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, SlotContainer, StateReceiverElement, StateReceiverMixin, StateReceiverPropertyMap, StreamType, THEOliveDefaultUI, TextTrackOffRadioButton, TextTrackRadioButton, TextTrackStyleDisplay, TextTrackStyleMap, TextTrackStyleMenu, TextTrackStyleOption, TextTrackStyleRadioGroup, TextTrackStyleResetButton, TimeDisplay, TimeRange, TrackRadioGroup, TrackType, UIContainer, VolumeLevel, VolumeRange, buttonTemplate, linkButtonTemplate, menuGroupTemplate, menuTemplate, rangeTemplate, registerExtension, version };
 export as namespace THEOplayerUI;