vidstack/dist/types/player/player.d.ts

Build awesome media experiences on the web.

import { Component, ComponentInstance, type HTMLCustomElement } from 'maverick.js/element';
import { ScreenOrientationController } from '../foundation/orientation/controller';
import type { PlayerCSSVars } from './core/api/player-cssvars';
import type { FindPlayerEvent, PlayerConnectEvent, PlayerEvents } from './core/api/player-events';
import { type MediaStateAccessors, type PlayerProps } from './core/api/player-props';
import type { MediaFullscreenRequestTarget } from './core/api/request-events';
import { MediaStoreFactory } from './core/api/store';
import { VideoQualityList } from './core/quality/video-quality';
import { AudioTrackList } from './core/tracks/audio-tracks';
import { TextRenderers } from './core/tracks/text/render/text-renderer';
import { TextTrackList } from './core/tracks/text/text-tracks';
import { type MediaUserController } from './core/user';
import type { AnyMediaProvider } from './providers/types';
declare global {
    interface MaverickElements {
        'media-player': MediaPlayerElement;
    }
    interface HTMLElementEventMap {
        'media-player-connect': PlayerConnectEvent;
        'find-media-player': FindPlayerEvent;
    }
}
/**
 * All media elements exist inside the `<media-player>` component. This component's main
 * responsibilities are to manage media state updates, dispatch media events, handle media
 * requests, and expose media state through HTML attributes and CSS properties for styling
 * purposes.
 *
 * @docs {@link https://www.vidstack.io/docs/player/components/media/player}
 * @slot - Used to pass in media components.
 * @example
 * ```html
 * <media-player src="...">
 *   <media-outlet></media-outlet>
 *   <!-- Other components that use/manage media state here. -->
 * </media-player>
 * ```
 */
export declare class Player extends Component<PlayerAPI> implements MediaStateAccessors {
    static el: import("maverick.js/element").CustomElementDefinition<PlayerAPI>;
    private _media;
    private _stateMgr;
    private _requestMgr;
    private _canPlayQueue;
    private get _provider();
    constructor(instance: ComponentInstance<PlayerAPI>);
    protected onAttach(el: HTMLElement): void;
    protected onConnect(el: HTMLElement): () => void;
    private _initStore;
    private _watchTitle;
    private _watchOrientation;
    private _watchCanPlay;
    private _onProvidedTypesChange;
    private _setMediaAttributes;
    private _setMediaVars;
    private _onFindPlayer;
    private _onResize;
    private _onTouchChange;
    private _isIOSControls;
    /**
     * The current media provider.
     */
    get provider(): AnyMediaProvider | null;
    /**
     * Media user settings which currently supports configuring user idling behavior.
     */
    get user(): MediaUserController;
    /**
     * Controls the screen orientation of the current browser window and dispatches orientation
     * change events on the player.
     */
    readonly orientation: ScreenOrientationController;
    /**
     * A list of all `VideoQuality` objects representing the set of available video renditions.
     *
     * @see {@link https://vidstack.io/docs/player/core-concepts/quality#quality-list}
     */
    get qualities(): VideoQualityList;
    /**
     * A list of all `AudioTrack` objects representing the set of available audio tracks.
     *
     * @see {@link https://vidstack.io/docs/player/core-concepts/audio-tracks}
     */
    get audioTracks(): AudioTrackList;
    /**
     * A list of all `TextTrack` objects representing the set of available text tracks.
     *
     * @see {@link https://vidstack.io/docs/player/core-concepts/text-tracks}
     */
    get textTracks(): TextTrackList;
    /**
     * Contains text renderers which are responsible for loading, parsing, and rendering text
     * tracks.
     *
     * @see {@link https://vidstack.io/docs/player/core-concepts/text-tracks#text-renderer}
     */
    get textRenderers(): TextRenderers;
    get paused(): boolean;
    set paused(paused: boolean);
    private _watchPaused;
    get muted(): boolean;
    set muted(muted: boolean);
    private _watchMuted;
    get currentTime(): number;
    set currentTime(time: number);
    private _watchCurrentTime;
    get volume(): number;
    set volume(volume: number);
    private _watchVolume;
    get playsinline(): boolean;
    set playsinline(inline: boolean);
    private _watchPlaysinline;
    get playbackRate(): number;
    set playbackRate(rate: number);
    private _watchPlaybackRate;
    /**
     * Begins/resumes playback of the media. If this method is called programmatically before the
     * user has interacted with the player, the promise may be rejected subject to the browser's
     * autoplay policies. This method will throw if called before media is ready for playback.
     *
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play}
     */
    play(): Promise<void>;
    /**
     * Pauses playback of the media. This method will throw if called before media is ready for
     * playback.
     *
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause}
     */
    pause(): Promise<void>;
    /**
     * Attempts to display the player in fullscreen. The promise will resolve if successful, and
     * reject if not. This method will throw if any fullscreen API is _not_ currently available.
     *
     * @see {@link https://vidstack.io/docs/player/core-concepts/fullscreen}
     */
    enterFullscreen(target?: MediaFullscreenRequestTarget): Promise<void>;
    /**
     * Attempts to display the player inline by exiting fullscreen. This method will throw if any
     * fullscreen API is _not_ currently available.
     *
     * @see {@link https://vidstack.io/docs/player/core-concepts/fullscreen}
     */
    exitFullscreen(target?: MediaFullscreenRequestTarget): Promise<void>;
    /**
     * Attempts to display the player in picture-in-picture mode. This method will throw if PIP is
     * not supported. This method will also return a `PictureInPictureWindow` if the current
     * provider supports it.
     *
     * @see {@link https://vidstack.io/docs/player/core-concepts/picture-in-picture}
     */
    enterPictureInPicture(): Promise<void | PictureInPictureWindow>;
    /**
     * Attempts to display the player in inline by exiting picture-in-picture mode. This method
     * will throw if not supported.
     *
     * @see {@link https://vidstack.io/docs/player/core-concepts/picture-in-picture}
     */
    exitPictureInPicture(): Promise<void>;
    /**
     * Sets the current time to the live edge (i.e., `duration`). This is a no-op for non-live
     * streams and will throw if called before media is ready for playback.
     *
     * @see {@link https://vidstack.io/docs/player/core-concepts/live#live-edge}
     */
    seekToLiveEdge(): void;
    /**
     * Called when media can begin loading. Calling this method will trigger the initial provider
     * loading process. Calling it more than once has no effect.
     *
     * @see {@link https://vidstack.io/docs/player/core-concepts/loading#loading-strategies}
     */
    startLoading(): void;
    destroy(): void;
}
export interface PlayerAPI {
    props: PlayerProps;
    events: PlayerEvents;
    cssvars: PlayerCSSVars;
    store: typeof MediaStoreFactory;
}
export interface MediaPlayerElement extends HTMLCustomElement<Player> {
}