UNPKG

@aidenlx/player

Version:

Headless web components that make integrating media on the a web a breeze.

398 lines 16.3 kB
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