@aidenlx/player
Version:
Headless web components that make integrating media on the a web a breeze.
398 lines • 16.3 kB
TypeScript
import { DiscoveryEvent, DisposalBin, FullscreenController, LogDispatcher, RequestQueue, ScreenOrientationController, ScreenOrientationLock } from '@vidstack/foundation';
import { LitElement, type PropertyValues } from 'lit';
import { CanPlay } from '../CanPlay';
import { MediaController } from '../controller';
import { MediaContext } from '../MediaContext';
import { MediaType } from '../MediaType';
import { ReadableMediaStoreRecord, WritableMediaStoreRecord } from '../store';
import { ViewType } from '../ViewType';
/**
* Fired when the media provider connects to the DOM.
*
* @event
* @bubbles
* @composed
*/
export declare type MediaProviderConnectEvent = DiscoveryEvent<MediaProviderElement>;
/**
* Base abstract media provider class that defines the interface to be implemented by
* all concrete media providers. Extending this class enables provider-agnostic communication 💬
*
* @events ../events.ts
* @events ../request.events.ts
*/
export declare abstract class MediaProviderElement extends LitElement {
constructor();
protected readonly _disconnectDisposal: DisposalBin;
connectedCallback(): void;
protected updated(changedProperties: PropertyValues): void;
protected firstUpdated(changedProperties: PropertyValues): void;
disconnectedCallback(): void;
protected readonly _logger: LogDispatcher | undefined;
protected _logMediaEvents(): void;
/**
* Whether playback should automatically begin as soon as enough media is available to do so
* without interruption.
*
* Sites which automatically play audio (or videos with an audio track) can be an unpleasant
* experience for users, so it should be avoided when possible. If you must offer autoplay
* functionality, you should make it opt-in (requiring a user to specifically enable it).
*
* However, autoplay can be useful when creating media elements whose source will be set at a
* later time, under user control.
*
* @default false
* @link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/autoplay
*/
get autoplay(): boolean;
set autoplay(shouldAutoplay: boolean);
/**
* Indicates whether a user interface should be shown for controlling the resource. Set this to
* `false` when you want to provide your own custom controls, and `true` if you want the current
* provider to supply its own default controls. Depending on the provider, changing this prop
* may cause the player to completely reset.
*
* @default false
* @link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controls
*/
controls: boolean;
/**
* Whether media should automatically start playing from the beginning (replay) every time
* it ends.
*
* @default false
* @link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loop
*/
loop: boolean;
/**
* Whether the video is to be played "inline", that is within the element's playback area. Note
* that setting this to `false` does not imply that the video will always be played in fullscreen.
* Depending on the provider, changing this prop may cause the player to completely reset.
*
* @default false
* @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-playsinline
*/
playsinline: boolean;
/**
* An `int` between `0` (silent) and `1` (loudest) indicating the audio volume. Defaults to `1`.
*
* @default 1
* @link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volume
*/
get volume(): number;
set volume(requestedVolume: number);
protected abstract _setVolume(newVolume: number): void;
/**
* Whether playback should be paused. Defaults to `true` if no media has loaded or playback has
* not started. Setting this to `false` will begin/resume playback.
*
* @default true
* @link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/paused
*/
get paused(): boolean;
set paused(shouldPause: boolean);
/**
* A `double` indicating the current playback time in seconds. Defaults to `0` if the media has
* not started to play and has not seeked. Setting this value seeks the media to the new
* time. The value can be set to a minimum of `0` and maximum of the total length of the
* media (indicated by the duration prop).
*
* @default 0
* @link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime
*/
get currentTime(): number;
set currentTime(requestedTime: number);
protected _getCurrentTime(): number;
protected abstract _setCurrentTime(newTime: number): void;
/**
* Whether the audio is muted or not.
*
* @default false
* @link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/muted
*/
get muted(): boolean;
set muted(shouldMute: boolean);
protected abstract _setMuted(isMuted: boolean): void;
/**
* The underlying engine that is actually responsible for rendering/loading media. Some examples
* are:
*
* - The `VideoElement` engine is `HTMLVideoElement`.
* - The `HlsElement` engine is the `hls.js` instance.
* - The `YoutubeElement` engine is `HTMLIFrameElement`.
*
* Refer to the respective provider documentation to find out which engine is powering it.
*
* @abstract
*/
abstract get engine(): unknown;
/**
* Returns an `Error` object when autoplay has failed to begin playback. This
* can be used to determine when to show a recovery UI in the event autoplay fails.
*
* @default undefined
*/
get autoplayError(): unknown;
/**
* Returns a `TimeRanges` object that indicates the ranges of the media source that the
* browser has buffered (if any) at the moment the buffered property is accessed. This is usually
* contiguous but if the user jumps about while media is buffering, it may contain holes.
*
* @link https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges
* @link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/buffered
* @default TimeRanges
*/
get buffered(): TimeRanges;
/**
* Whether the user agent can play the media, but estimates that **not enough** data has been
* loaded to play the media up to its end without having to stop for further buffering of
* content.
*
* @default false
* @link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplay_event
*/
get canPlay(): boolean;
/**
* The URL of the current poster. Defaults to `''` if no media/poster has been given or
* loaded.
*
* @default ''
*/
get currentPoster(): string;
/**
* The absolute URL of the media resource that has been chosen. Defaults to `''` if no
* media has been loaded.
*
* @default ''
* @link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentSrc
*/
get currentSrc(): string;
/**
* A `double` indicating the total playback length of the media in seconds. If no media data is
* available, the returned value is `0`. If the media is of indefinite length (such as
* streamed live media, a WebRTC call's media, or similar), the value is `+Infinity`.
*
* @default 0
* @link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/duration
*/
get duration(): number;
/**
* Whether media playback has reached the end. In other words it'll be true
* if `currentTime === duration`.
*
* @default false
* @link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended
*/
get ended(): boolean;
/**
* Contains the most recent media error or undefined if there's been none. You can listen for
* `vds-error` event updates and examine this object to debug further.
*
* @default undefined
* @link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/error
*/
get error(): import("..").MediaErrorDetail | undefined;
/**
* Whether the current media is a live stream.
*
* @default false
*/
get live(): boolean;
/**
* The type of media that is currently active, whether it's audio or video. Defaults
* to `unknown` when no media has been loaded or the type cannot be determined.
*
* @default MediaType.Unknown
*/
get mediaType(): MediaType;
/**
* Contains the ranges of the media source that the browser has played, if any.
*
* @default TimeRanges
*/
get played(): TimeRanges;
/**
* Whether media is actively playing back. Defaults to `false` if no media has
* loaded or playback has not started.
*
* @default false
*/
get playing(): boolean;
/**
* Contains the time ranges that the user is able to seek to, if any. This tells us which parts
* of the media can be played without delay; this is irrespective of whether that part has
* been downloaded or not.
*
* Some parts of the media may be seekable but not buffered if byte-range
* requests are enabled on the server. Byte range requests allow parts of the media file to
* be delivered from the server and so can be ready to play almost immediately — thus they are
* seekable.
*
* @default TimeRanges
* @link https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges
* @link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seekable
*/
get seekable(): TimeRanges;
/**
* Whether media is actively seeking to an new playback position.
*
* @default false
*/
get seeking(): boolean;
/**
* Whether media playback has started. In other words it will be true if `currentTime > 0`.
*
* @default false
*/
get started(): boolean;
/**
* The type of player view that is being used, whether it's an audio player view or
* video player view. Normally if the media type is of audio then the view is of type audio, but
* in some cases it might be desirable to show a different view type. For example, when playing
* audio with a poster. This is subject to the provider allowing it. Defaults to `unknown`
* when no media has been loaded.
*
* @default ViewType.Unknown
*/
get viewType(): ViewType;
/**
* Whether playback has temporarily stopped because of a lack of temporary data.
*
* @default false
*/
get waiting(): boolean;
/**
* Determines if the media provider can play the given `type`. The `type` is
* generally the media resource identifier, URL or MIME type (optional Codecs parameter).
*
* @example `audio/mp3`
* @example `video/mp4`
* @example `video/webm; codecs="vp8, vorbis"`
* @example `/my-audio-file.mp3`
* @example `youtube/RO7VcUAsf-I`
* @example `vimeo.com/411652396`
* @example `https://www.youtube.com/watch?v=OQoz7FCWkfU`
* @example `https://media.vidstack.io/hls/index.m3u8`
* @example `https://media.vidstack.io/dash/index.mpd`
* @link https://developer.mozilla.org/en-US/docs/Web/Media/Formats/codecs_parameter
*/
abstract canPlayType(type: string): CanPlay;
/**
* Determines if the media provider "should" play the given type. "Should" in this
* context refers to the `canPlayType()` method returning `Maybe` or `Probably`.
*
* @param type refer to `canPlayType`.
*/
shouldPlayType(type: string): boolean;
/**
* Determines whether the poster can be set. Used to avoid loading posters twice when a custom
* poster element is being used (eg: `<vds-poster>`). This is set internally by the media
* controller element.
*
* @internal
*/
__canLoadPoster?: boolean;
/**
* Whether media is allowed to begin loading. This depends on the `loading` configuration. If
* `eager`, `canLoad` will be `true` immediately, and if `lazy` this will become `true` once
* the media has entered the viewport.
*/
get canLoad(): boolean;
/**
* Indicates when the provider can begin loading media. If `eager`, media will be loaded
* immediately, and `lazy` will delay loading until the provider has entered the viewport.
*/
loading: 'eager' | 'lazy';
/**
* Called when media can begin loading.
*/
handleMediaCanLoad(): Promise<void>;
/**
* 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.
*
* @link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play
*/
abstract play(): Promise<void>;
/**
* Pauses playback of the media.
*
* @link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause
*/
abstract pause(): Promise<void>;
/**
* @throws {Error} - Will throw if media is not ready for playback.
*/
protected _throwIfNotReadyForPlayback(): void;
protected _resetPlaybackIfEnded(): Promise<void>;
/**
* @throws {Error} - Will throw if player is not in a video view.
*/
protected _throwIfNotVideoView(): void;
protected _handleMediaReady({ event, duration }: {
event?: Event;
duration: number;
}): Promise<void>;
protected _autoplayAttemptPending: boolean;
get canAttemptAutoplay(): boolean;
attemptAutoplay(): Promise<void>;
protected _shouldSkipNextSrcChangeReset: boolean;
protected _handleMediaSrcChange(src: string): void;
protected readonly _mediaController: MediaController;
/**
* The current log level. Values in order of priority are: `silent`, `error`, `warn`, `info`,
* and `debug`.
*/
get logLevel(): import("@vidstack/foundation").LogLevel;
set logLevel(level: import("@vidstack/foundation").LogLevel);
/**
* The amount of delay in milliseconds while media playback is progressing without user
* activity to indicate an idle state.
*
* @default 2000
*/
get idleDelay(): number;
set idleDelay(delay: number);
protected readonly _mediaStoreConsumer: import("@vidstack/foundation").ContextConsumerController<WritableMediaStoreRecord>;
get store(): ReadableMediaStoreRecord;
/** @internal */
get _store(): WritableMediaStoreRecord;
readonly mediaState: MediaContext;
/**
* Queue actions to be applied safely after the element has connected to the DOM.
*/
readonly _connectedQueue: RequestQueue;
/**
* Queue actions to be taken on the current media provider when it's ready for playback, marked
* by the `canPlay` property. If the media provider is ready, actions will be invoked immediately.
*/
readonly mediaRequestQueue: RequestQueue;
readonly screenOrientationController: ScreenOrientationController;
readonly fullscreenController: FullscreenController;
/**
* Whether the native browser fullscreen API is available, or the current provider can
* toggle fullscreen mode. This does not mean that the operation is guaranteed to be successful,
* only that it can be attempted.
*
* @default false
* @link https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
*/
get canFullscreen(): boolean;
/**
* Whether the player is currently in fullscreen mode.
*
* @default false
*/
get fullscreen(): boolean;
/**
* This will indicate the orientation to lock the screen to when in fullscreen mode and
* the Screen Orientation API is available. The default is `undefined` which indicates
* no screen orientation change.
*/
get fullscreenOrientation(): ScreenOrientationLock | undefined;
set fullscreenOrientation(lockType: ScreenOrientationLock | undefined);
requestFullscreen(): Promise<void>;
exitFullscreen(): Promise<void>;
}
//# sourceMappingURL=MediaProviderElement.d.ts.map