@theoplayer/react-ui 1.6.0

package/dist/THEOplayerReactUI.d.ts

@@ -0,0 +1,684 @@
+/*!
+ * THEOplayer Open Video UI for React (v1.6.0)
+ * License: MIT
+ */
+import * as react from 'react';
+import { PropsWithoutRef, ReactNode } from 'react';
+import { ChromelessPlayer } from 'theoplayer/chromeless';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { UIContainer as UIContainer$1, DefaultUI as DefaultUI$1, ControlBar as ControlBar$1, Button as Button$1, LinkButton as LinkButton$1, PlayButton as PlayButton$1, MuteButton as MuteButton$1, SeekButton as SeekButton$1, TimeDisplay as TimeDisplay$1, DurationDisplay as DurationDisplay$1, RadioGroup as RadioGroup$1, RadioButton as RadioButton$1, Menu as Menu$1, MenuGroup as MenuGroup$1, MenuButton as MenuButton$1, CloseMenuButton as CloseMenuButton$1, MediaTrackRadioButton as MediaTrackRadioButton$1, TrackRadioGroup as TrackRadioGroup$1, TextTrackRadioButton as TextTrackRadioButton$1, TextTrackOffRadioButton as TextTrackOffRadioButton$1, LanguageMenu as LanguageMenu$1, LanguageMenuButton as LanguageMenuButton$1, PlaybackRateRadioGroup as PlaybackRateRadioGroup$1, PlaybackRateMenuButton as PlaybackRateMenuButton$1, PlaybackRateMenu as PlaybackRateMenu$1, PlaybackRateDisplay as PlaybackRateDisplay$1, ActiveQualityDisplay as ActiveQualityDisplay$1, QualityRadioButton as QualityRadioButton$1, QualityRadioGroup as QualityRadioGroup$1, TextTrackStyleRadioGroup as TextTrackStyleRadioGroup$1, TextTrackStyleResetButton as TextTrackStyleResetButton$1, TextTrackStyleDisplay as TextTrackStyleDisplay$1, TextTrackStyleMenu as TextTrackStyleMenu$1, SettingsMenu as SettingsMenu$1, SettingsMenuButton as SettingsMenuButton$1, FullscreenButton as FullscreenButton$1, TimeRange as TimeRange$1, VolumeRange as VolumeRange$1, ErrorDisplay as ErrorDisplay$1, CastButton as CastButton$1, ChromecastButton as ChromecastButton$1, ChromecastDisplay as ChromecastDisplay$1, AirPlayButton as AirPlayButton$1, LoadingIndicator as LoadingIndicator$1, GestureReceiver as GestureReceiver$1, PreviewTimeDisplay as PreviewTimeDisplay$1, PreviewThumbnail as PreviewThumbnail$1, LiveButton as LiveButton$1, AdDisplay as AdDisplay$1, AdCountdown as AdCountdown$1, AdClickThroughButton as AdClickThroughButton$1, AdSkipButton as AdSkipButton$1 } from '@theoplayer/web-ui';
+import * as _lit_react from '@lit/react';
+import { WebComponentProps } from '@lit/react';
+
+/**
+ * The {@link theoplayer!ChromelessPlayer | ChromelessPlayer} instance of the parent {@link DefaultUI} or {@link UIContainer}.
+ *
+ * This can be used to access the backing player's state and add event listeners from within a custom React component.
+ * The component *must* be a child of {@link DefaultUI} or {@link UIContainer} in order to receive the context.
+ * ```jsx
+ * import { useContext, useState } from 'react';
+ * import { PlayerContext } from '@theoplayer/react-ui';
+ *
+ * const MyCustomComponent = () => {
+ *     // Retrieve the backing player from the context
+ *     const player = useContext(PlayerContext);
+ *
+ *     // Track the paused state of the player
+ *     const [paused, setPaused] = useState(player?.paused ?? true);
+ *     useEffect(() => {
+ *         if (!player) return;
+ *         const updatePaused = () => {
+ *             setPaused(player.paused);
+ *         };
+ *         player.addEventListener(['play', 'pause'], updatePaused);
+ *         return () => {
+ *             player.removeEventListener(['play', 'pause'], updatePaused);
+ *         };
+ *     }, [player]);
+ *
+ *     // Show the paused state in your UI
+ *     return <p>Player is {paused ? "paused" : "playing"}</p>
+ * };
+ * ```
+ */
+declare const PlayerContext: react.Context<ChromelessPlayer | undefined>;
+
+interface UIContainerProps extends PropsWithoutRef<WebComponentProps<UIContainer$1>> {
+    /**
+     * A slot for controls at the top of the player.
+     *
+     * Can be used to display the stream's title, or for a cast button ({@link ChromecastButton}).
+     */
+    topChrome?: ReactNode;
+    /**
+     * A slot for controls in the middle of the player (between the top and bottom chrome).
+     */
+    middleChrome?: ReactNode;
+    /**
+     * A slot for controls at the bottom of the player.
+     *
+     * Can be used for controls such as a play button ({@link PlayButton}) or a seek bar ({@link TimeRange}).
+     */
+    bottomChrome?: ReactNode;
+    /**
+     * A slot for controls centered on the player, on top of other controls.
+     */
+    centeredChrome?: ReactNode;
+    /**
+     * A slot for a loading indicator centered on the player, on top of other controls but behind the centered chrome.
+     */
+    centeredLoading?: ReactNode;
+    /**
+     * A slot for extra menus (see {@link Menu}).
+     */
+    menu?: ReactNode;
+    /**
+     * A slot for an error display, to show when the player encounters a fatal error (see {@link ErrorDisplay}).
+     */
+    error?: ReactNode;
+    /**
+     * Use a named slot instead, such as:
+     *  - {@link topChrome}
+     *  - {@link middleChrome}
+     *  - {@link bottomChrome}
+     *  - {@link centeredChrome}
+     *  - {@link centeredLoading}
+     *  - {@link menu}
+     *  - {@link error}
+     */
+    children?: never;
+    /**
+     * Called when the backing player is created.
+     *
+     * @param player
+     */
+    onReady?: (player: ChromelessPlayer) => void;
+}
+/**
+ * The container component for a THEOplayer UI.
+ *
+ * This component provides a basic layout structure for a general player UI, and handles the creation and management
+ * of a {@link theoplayer!ChromelessPlayer | THEOplayer player instance} for this UI.
+ *
+ * ## Usage
+ *
+ * 1. Create a `<UIContainer>` component, passing a valid player configuration as its `configuration` property
+ *    and a valid stream source as its `source` property.
+ *    Additionally, place your UI components into one of the slots of the `<UIContainer>`, such as
+ *    ```jsx
+ *    <UIContainer
+ *        configuration={{
+ *            license: 'your_license_goes_here',
+ *            libraryLocation: '/path/to/node_modules/theoplayer/'
+ *        }}
+ *        source={{
+ *            sources: [{ src: 'https://example.com/my_stream.m3u8', type: 'application/x-mpegurl' }]
+ *        }}
+ *        // ...
+ *    />
+ *    ```
+ * 2. Place your UI components into one of the slots of the `<UIContainer>`, such as {@link UIContainerProps.bottomChrome}
+ *    or {@link UIContainerProps.centeredChrome}. You can use the provided THEOplayer UI components
+ *    (such as {@link PlayButton} or {@link TimeRange}), or use any of your own components.
+ *    ```jsx
+ *    <UIContainer
+ *        // ...
+ *        topChrome={<span class="title">My awesome video</span>}
+ *        centeredChrome={<PlayButton />}
+ *        bottomChrome={
+ *            <>
+ *                <ControlBar>
+ *                    <TimeRange />
+ *                </ControlBar>
+ *                <ControlBar>
+ *                    <PlayButton />
+ *                    <MuteButton />
+ *                    <TimeDisplay />
+ *                    <FullscreenButton />
+ *                </ControlBar>
+ *            </>
+ *        }
+ *    />
+ *    ```
+ *
+ * ## Customization
+ *
+ * This component does not provide any UI components by default, you need to add all components as children of
+ * one of the `<UIContainer>` slots. If you're looking for a simple out-of-the-box player experience instead,
+ * see {@link DefaultUI}.
+ *
+ * See {@link @theoplayer/web-ui!UIContainer | UIContainer in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const UIContainer: (props: UIContainerProps) => react_jsx_runtime.JSX.Element;
+
+interface DefaultUIProps extends PropsWithoutRef<Omit<WebComponentProps<DefaultUI$1>, 'title'>> {
+    /**
+     * A slot for the stream's title in the top control bar.
+     */
+    title?: ReactNode;
+    /**
+     * A slot for extra UI controls in the top control bar.
+     */
+    topControlBar?: ReactNode;
+    /**
+     * A slot for extra UI controls in the bottom control bar.
+     */
+    bottomControlBar?: ReactNode;
+    /**
+     * A slot for extra menus (see {@link Menu}).
+     */
+    menu?: ReactNode;
+    /**
+     * Use a named slot instead, such as:
+     *  - {@link title}
+     *  - {@link topControlBar}
+     *  - {@link bottomControlBar}
+     *  - {@link menu}
+     */
+    children?: never;
+    /**
+     * Called when the backing player is created.
+     *
+     * @param player
+     */
+    onReady?: (player: ChromelessPlayer) => void;
+}
+/**
+ * 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 `<DefaultUI>` component, passing a valid player configuration as its `configuration` property
+ *    and a valid stream source as its `source` property.
+ *    ```jsx
+ *    <DefaultUI
+ *        configuration={{
+ *            license: 'your_license_goes_here',
+ *            libraryLocation: '/path/to/node_modules/theoplayer/'
+ *        }}
+ *        source={{
+ *            sources: [{ src: 'https://example.com/my_stream.m3u8', type: 'application/x-mpegurl' }]
+ *        }}
+ *    />
+ *    ```
+ * 2. 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}).
+ * Additional controls can be added to the {@link DefaultUIProps.topControlBar}
+ * and {@link DefaultUIProps.bottomControlBar} slots.
+ * For more extensive customizations, we recommend defining your own custom UI using a {@link UIContainer}.
+ *
+ * See {@link @theoplayer/web-ui!DefaultUI | DefaultUI in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const DefaultUI: (props: DefaultUIProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * See {@link @theoplayer/web-ui!ControlBar | ControlBar in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const ControlBar: _lit_react.ReactWebComponent<ControlBar$1, {}>;
+
+declare const ButtonEvents: {
+    readonly onClick: "click";
+};
+/**
+ * See {@link @theoplayer/web-ui!Button | Button in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const Button: _lit_react.ReactWebComponent<Button$1, {
+    readonly onClick: "click";
+}>;
+
+/**
+ * See {@link @theoplayer/web-ui!LinkButton | LinkButton in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const LinkButton: _lit_react.ReactWebComponent<LinkButton$1, {
+    readonly onClick: "click";
+}>;
+
+/**
+ * See {@link @theoplayer/web-ui!PlayButton | PlayButton in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const PlayButton: _lit_react.ReactWebComponent<PlayButton$1, {
+    readonly onClick: "click";
+}>;
+
+/**
+ * See {@link @theoplayer/web-ui!MuteButton | MuteButton in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const MuteButton: _lit_react.ReactWebComponent<MuteButton$1, {
+    readonly onClick: "click";
+}>;
+
+/**
+ * See {@link @theoplayer/web-ui!SeekButton | SeekButton in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const SeekButton: _lit_react.ReactWebComponent<SeekButton$1, {
+    readonly onClick: "click";
+}>;
+
+/**
+ * See {@link @theoplayer/web-ui!TimeDisplay | TimeDisplay in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const TimeDisplay: _lit_react.ReactWebComponent<TimeDisplay$1, {}>;
+
+/**
+ * See {@link @theoplayer/web-ui!DurationDisplay | DurationDisplay in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const DurationDisplay: _lit_react.ReactWebComponent<DurationDisplay$1, {}>;
+
+declare const RadioGroupEvents: {
+    readonly onChange: "change";
+};
+/**
+ * See {@link @theoplayer/web-ui!RadioGroup | RadioGroup in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const RadioGroup: _lit_react.ReactWebComponent<RadioGroup$1, {
+    readonly onChange: "change";
+}>;
+
+declare const RadioButtonEvents: {
+    readonly onChange: "change";
+    readonly onInput: "input";
+    readonly onClick: "click";
+};
+/**
+ * See {@link @theoplayer/web-ui!RadioButton | RadioButton in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const RadioButton: _lit_react.ReactWebComponent<RadioButton$1, {
+    readonly onChange: "change";
+    readonly onInput: "input";
+    readonly onClick: "click";
+}>;
+
+interface CommonMenuProps {
+    /**
+     * A slot for the menu's heading.
+     */
+    heading?: ReactNode;
+    /**
+     * The menu's contents.
+     */
+    children?: ReactNode;
+}
+interface MenuProps extends CommonMenuProps, PropsWithoutRef<WebComponentProps<Menu$1>> {
+}
+/**
+ * See {@link @theoplayer/web-ui!Menu | Menu in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const Menu: (props: MenuProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * See {@link @theoplayer/web-ui!MenuGroup | MenuGroup in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const MenuGroup: _lit_react.ReactWebComponent<MenuGroup$1, {}>;
+
+/**
+ * See {@link @theoplayer/web-ui!MenuButton | MenuButton in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const MenuButton: _lit_react.ReactWebComponent<MenuButton$1, {
+    readonly onClick: "click";
+}>;
+
+/**
+ * See {@link @theoplayer/web-ui!CloseMenuButton | CloseMenuButton in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const CloseMenuButton: _lit_react.ReactWebComponent<CloseMenuButton$1, {
+    readonly onClick: "click";
+}>;
+
+/**
+ * See {@link @theoplayer/web-ui!MediaTrackRadioButton | MediaTrackRadioButton in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const MediaTrackRadioButton: _lit_react.ReactWebComponent<MediaTrackRadioButton$1, {
+    readonly onChange: "change";
+    readonly onInput: "input";
+    readonly onClick: "click";
+}>;
+
+/**
+ * See {@link @theoplayer/web-ui!TrackRadioGroup | TrackRadioGroup in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const TrackRadioGroup: _lit_react.ReactWebComponent<TrackRadioGroup$1, {
+    readonly onChange: "change";
+}>;
+
+/**
+ * See {@link @theoplayer/web-ui!TextTrackRadioButton | TextTrackRadioButton in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const TextTrackRadioButton: _lit_react.ReactWebComponent<TextTrackRadioButton$1, {
+    readonly onChange: "change";
+    readonly onInput: "input";
+    readonly onClick: "click";
+}>;
+
+/**
+ * See {@link @theoplayer/web-ui!TextTrackOffRadioButton | TextTrackOffRadioButton in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const TextTrackOffRadioButton: _lit_react.ReactWebComponent<TextTrackOffRadioButton$1, {
+    readonly onChange: "change";
+    readonly onInput: "input";
+    readonly onClick: "click";
+}>;
+
+interface LanguageMenuProps extends CommonMenuProps, PropsWithoutRef<WebComponentProps<LanguageMenu$1>> {
+}
+/**
+ * See {@link @theoplayer/web-ui!LanguageMenu | LanguageMenu in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const LanguageMenu: (props: LanguageMenuProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * See {@link @theoplayer/web-ui!LanguageMenuButton | LanguageMenuButton in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const LanguageMenuButton: _lit_react.ReactWebComponent<LanguageMenuButton$1, {
+    readonly onClick: "click";
+}>;
+
+/**
+ * See {@link @theoplayer/web-ui!PlaybackRateRadioGroup | PlaybackRateRadioGroup in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const PlaybackRateRadioGroup: _lit_react.ReactWebComponent<PlaybackRateRadioGroup$1, {
+    readonly onChange: "change";
+}>;
+
+/**
+ * See {@link @theoplayer/web-ui!PlaybackRateMenuButton | PlaybackRateMenuButton in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const PlaybackRateMenuButton: _lit_react.ReactWebComponent<PlaybackRateMenuButton$1, {
+    readonly onClick: "click";
+}>;
+
+interface PlaybackRateMenuProps extends CommonMenuProps, PropsWithoutRef<WebComponentProps<PlaybackRateMenu$1>> {
+}
+/**
+ * See {@link @theoplayer/web-ui!PlaybackRateMenu | PlaybackRateMenu in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const PlaybackRateMenu: (props: PlaybackRateMenuProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * See {@link @theoplayer/web-ui!PlaybackRateDisplay | PlaybackRateDisplay in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const PlaybackRateDisplay: _lit_react.ReactWebComponent<PlaybackRateDisplay$1, {}>;
+
+/**
+ * See {@link @theoplayer/web-ui!ActiveQualityDisplay | ActiveQualityDisplay in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const ActiveQualityDisplay: _lit_react.ReactWebComponent<ActiveQualityDisplay$1, {}>;
+
+/**
+ * See {@link @theoplayer/web-ui!QualityRadioButton | QualityRadioButton in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const QualityRadioButton: _lit_react.ReactWebComponent<QualityRadioButton$1, {
+    readonly onChange: "change";
+    readonly onInput: "input";
+    readonly onClick: "click";
+}>;
+
+/**
+ * See {@link @theoplayer/web-ui!QualityRadioGroup | QualityRadioGroup in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const QualityRadioGroup: _lit_react.ReactWebComponent<QualityRadioGroup$1, {
+    readonly onChange: "change";
+}>;
+
+/**
+ * See {@link @theoplayer/web-ui!TextTrackStyleRadioGroup | TextTrackStyleRadioGroup in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const TextTrackStyleRadioGroup: _lit_react.ReactWebComponent<TextTrackStyleRadioGroup$1, {
+    readonly onChange: "change";
+}>;
+
+/**
+ * See {@link @theoplayer/web-ui!TextTrackStyleResetButton | TextTrackStyleResetButton in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const TextTrackStyleResetButton: _lit_react.ReactWebComponent<TextTrackStyleResetButton$1, {
+    readonly onClick: "click";
+}>;
+
+/**
+ * See {@link @theoplayer/web-ui!TextTrackStyleDisplay | TextTrackStyleDisplay in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const TextTrackStyleDisplay: _lit_react.ReactWebComponent<TextTrackStyleDisplay$1, {}>;
+
+interface TextTrackStyleMenuProps extends CommonMenuProps, PropsWithoutRef<WebComponentProps<TextTrackStyleMenu$1>> {
+}
+/**
+ * See {@link @theoplayer/web-ui!TextTrackStyleMenu | TextTrackStyleMenu in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const TextTrackStyleMenu: (props: TextTrackStyleMenuProps) => react_jsx_runtime.JSX.Element;
+
+interface SettingsMenuProps extends CommonMenuProps, PropsWithoutRef<WebComponentProps<SettingsMenu$1>> {
+}
+/**
+ * See {@link @theoplayer/web-ui!SettingsMenu | SettingsMenu in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const SettingsMenu: (props: SettingsMenuProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * See {@link @theoplayer/web-ui!SettingsMenuButton | SettingsMenuButton in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const SettingsMenuButton: _lit_react.ReactWebComponent<SettingsMenuButton$1, {
+    readonly onClick: "click";
+}>;
+
+/**
+ * See {@link @theoplayer/web-ui!FullscreenButton | FullscreenButton in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const FullscreenButton: _lit_react.ReactWebComponent<FullscreenButton$1, {
+    readonly onClick: "click";
+}>;
+
+declare const RangeEvents: {
+    readonly onChange: "change";
+    readonly onInput: "input";
+};
+
+/**
+ * See {@link @theoplayer/web-ui!TimeRange | TimeRange in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const TimeRange: _lit_react.ReactWebComponent<TimeRange$1, {
+    readonly onChange: "change";
+    readonly onInput: "input";
+}>;
+
+/**
+ * See {@link @theoplayer/web-ui!VolumeRange | VolumeRange in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const VolumeRange: _lit_react.ReactWebComponent<VolumeRange$1, {
+    readonly onChange: "change";
+    readonly onInput: "input";
+}>;
+
+/**
+ * See {@link @theoplayer/web-ui!ErrorDisplay | ErrorDisplay in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const ErrorDisplay: _lit_react.ReactWebComponent<ErrorDisplay$1, {}>;
+
+/**
+ * See {@link @theoplayer/web-ui!CastButton | CastButton in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const CastButton: _lit_react.ReactWebComponent<CastButton$1, {
+    readonly onClick: "click";
+}>;
+
+/**
+ * See {@link @theoplayer/web-ui!ChromecastButton | ChromecastButton in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const ChromecastButton: _lit_react.ReactWebComponent<ChromecastButton$1, {
+    readonly onClick: "click";
+}>;
+
+/**
+ * See {@link @theoplayer/web-ui!ChromecastDisplay | ChromecastDisplay in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const ChromecastDisplay: _lit_react.ReactWebComponent<ChromecastDisplay$1, {}>;
+
+/**
+ * See {@link @theoplayer/web-ui!AirPlayButton | AirPlayButton in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const AirPlayButton: _lit_react.ReactWebComponent<AirPlayButton$1, {
+    readonly onClick: "click";
+}>;
+
+/**
+ * See {@link @theoplayer/web-ui!LoadingIndicator | LoadingIndicator in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const LoadingIndicator: _lit_react.ReactWebComponent<LoadingIndicator$1, {}>;
+
+/**
+ * See {@link @theoplayer/web-ui!GestureReceiver | GestureReceiver in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const GestureReceiver: _lit_react.ReactWebComponent<GestureReceiver$1, {}>;
+
+/**
+ * See {@link @theoplayer/web-ui!PreviewTimeDisplay | PreviewTimeDisplay in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const PreviewTimeDisplay: _lit_react.ReactWebComponent<PreviewTimeDisplay$1, {}>;
+
+/**
+ * See {@link @theoplayer/web-ui!PreviewThumbnail | PreviewThumbnail in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const PreviewThumbnail: _lit_react.ReactWebComponent<PreviewThumbnail$1, {}>;
+
+/**
+ * See {@link @theoplayer/web-ui!LiveButton | LiveButton in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const LiveButton: _lit_react.ReactWebComponent<LiveButton$1, {
+    readonly onClick: "click";
+}>;
+
+/**
+ * See {@link @theoplayer/web-ui!AdDisplay | AdDisplay in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const AdDisplay: _lit_react.ReactWebComponent<AdDisplay$1, {}>;
+
+/**
+ * See {@link @theoplayer/web-ui!AdCountdown | AdCountdown in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const AdCountdown: _lit_react.ReactWebComponent<AdCountdown$1, {}>;
+
+/**
+ * See {@link @theoplayer/web-ui!AdClickThroughButton | AdClickThroughButton in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const AdClickThroughButton: _lit_react.ReactWebComponent<AdClickThroughButton$1, {
+    readonly onClick: "click";
+}>;
+
+/**
+ * See {@link @theoplayer/web-ui!AdSkipButton | AdSkipButton in @theoplayer/web-ui}.
+ *
+ * @group Components
+ */
+declare const AdSkipButton: _lit_react.ReactWebComponent<AdSkipButton$1, {
+    readonly onClick: "click";
+}>;
+
+export { ActiveQualityDisplay, AdClickThroughButton, AdCountdown, AdDisplay, AdSkipButton, AirPlayButton, Button, ButtonEvents, CastButton, ChromecastButton, ChromecastDisplay, CloseMenuButton, CommonMenuProps, ControlBar, DefaultUI, DefaultUIProps, DurationDisplay, ErrorDisplay, FullscreenButton, GestureReceiver, LanguageMenu, LanguageMenuButton, LanguageMenuProps, LinkButton, LiveButton, LoadingIndicator, MediaTrackRadioButton, Menu, MenuButton, MenuGroup, MenuProps, MuteButton, PlayButton, PlaybackRateDisplay, PlaybackRateMenu, PlaybackRateMenuButton, PlaybackRateMenuProps, PlaybackRateRadioGroup, PlayerContext, PreviewThumbnail, PreviewTimeDisplay, QualityRadioButton, QualityRadioGroup, RadioButton, RadioButtonEvents, RadioGroup, RadioGroupEvents, RangeEvents, SeekButton, SettingsMenu, SettingsMenuButton, SettingsMenuProps, TextTrackOffRadioButton, TextTrackRadioButton, TextTrackStyleDisplay, TextTrackStyleMenu, TextTrackStyleMenuProps, TextTrackStyleRadioGroup, TextTrackStyleResetButton, TimeDisplay, TimeRange, TrackRadioGroup, UIContainer, UIContainerProps, VolumeRange };
+export as namespace THEOplayerReactUI;