@theoplayer/react-ui
    Preparing search index...

    Interface DefaultUIProps

    interface DefaultUIProps {
        autoplay?: boolean;
        bottomControlBar?: ReactNode;
        centeredChrome?: ReactNode;
        children?: undefined;
        configuration?: UIPlayerConfiguration;
        connectedCallback?: () => void;
        deviceType?: DeviceType;
        disconnectedCallback?: () => void;
        dvrThreshold?: number;
        error?: ReactNode;
        fluid?: boolean;
        menu?: ReactNode;
        muted?: boolean;
        onReady?: (player: ChromelessPlayer) => void;
        player?: ChromelessPlayer;
        source?: SourceDescription;
        streamType?: StreamType;
        title?: ReactNode;
        topControlBar?: ReactNode;
        userIdle?: boolean;
        userIdleTimeout?: number;
    }

    Hierarchy

    Index

    Other

    autoplay?: boolean

    Whether the player should attempt to automatically start playback.

    bottomControlBar?: ReactNode

    A slot for extra UI controls in the bottom control bar.

    centeredChrome?: ReactNode

    A slot to replace the controls in the center of the player, layered on top of other controls.

    children?: undefined

    Use a named slot instead, such as:

    configuration?: UIPlayerConfiguration
    deviceType?: DeviceType
    dvrThreshold?: number
    error?: ReactNode

    A slot for an error display, to show when the player encounters a fatal error. By default, this shows an ErrorDisplay.

    fluid?: boolean

    Whether to automatically adjust the player's height to fit the video's aspect ratio.

    menu?: ReactNode

    A slot for extra menus (see Menu).

    muted?: boolean

    Whether the player's audio is muted.

    onReady?: (player: ChromelessPlayer) => void

    Called when the backing player is created.

    streamType?: StreamType

    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.

    title?: ReactNode

    A slot for the stream's title in the top control bar.

    topControlBar?: ReactNode

    A slot for extra UI controls in the top control bar.

    userIdle?: boolean
    userIdleTimeout?: number

    lifecycle

    connectedCallback?: () => void

    Type Declaration

      • (): void
      • Invoked when the component is added to the document's DOM.

        In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window.

        connectedCallback() {
        super.connectedCallback();
        addEventListener('keydown', this._handleKeydown);
        }

        Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback().

        Returns void

    disconnectedCallback?: () => void

    Type Declaration

      • (): void
      • Invoked when the component is removed from the document's DOM.

        This callback is the main signal to the element that it may no longer be used. disconnectedCallback() should ensure that nothing is holding a reference to the element (such as event listeners added to nodes external to the element), so that it is free to be garbage collected.

        disconnectedCallback() {
        super.disconnectedCallback();
        window.removeEventListener('keydown', this._handleKeydown);
        }

        An element may be re-connected after being disconnected.

        Returns void