@exadel/esl

import { ESLBaseElement } from '../../esl-base-element/core'; import { ESLMediaQuery } from '../../esl-media-query/core'; import { PlayerStates } from './esl-media-provider'; import { ESLMediaManager } from './esl-media-manager'; import type { BaseProvider } from './esl-media-provider'; import type { ESLMediaRegistryEvent } from './esl-media-registry.event'; export type ESLMediaFillMode = 'cover' | 'inscribe' | ''; /** * ESLMedia - custom element, that provides an ability to add and configure media (video / audio) * using a single tag as well as work with external providers using simple native-like API. * * @author Alexey Stsefanovich (ala'n), Yuliya Adamskaya */ export declare class ESLMedia extends ESLBaseElement { static is: string; static observedAttributes: string[]; /** Singleton instance of {@link ESLMediaManager} */ static get manager(): ESLMediaManager; /** A minimum ratio to init media (in case of lazy=auto) */ RATIO_TO_ACTIVATE: number; /** A minimum ratio to stop media (in case of play in viewport option) */ RATIO_TO_STOP: number; /** A minimum ratio to play media (in case of play in viewport option) */ RATIO_TO_PLAY: number; /** Event to dispatch on ready state */ READY_EVENT: string; /** Event to dispatch on error state */ ERROR_EVENT: string; /** Event to dispatch before player provider requested to play (cancelable) */ BEFORE_PLAY_EVENT: string; /** Event to dispatch when player plays */ PLAY_EVENT: string; /** Event to dispatch when player paused */ PAUSED_EVENT: string; /** Event to dispatch when player ended */ ENDED_EVENT: string; /** Event to dispatch when player detached */ DETACHED_EVENT: string; /** Event to dispatch when player paused by another instance in group (cancelable) */ MANAGED_PAUSE_EVENT: string; /** Media resource identifier */ mediaId: string; /** Media resource src/url path */ mediaSrc: string; /** Media resource type. 'auto' (auto detection from src) by default */ mediaType: string; /** Media elements group name */ group: string; /** Media resource rendering strategy relative to the element area: 'cover', 'inscribe' or not defined */ fillMode: ESLMediaFillMode; /** Strict aspect ratio definition */ aspectRatio: string; /** Allows lazy load resource */ lazy: 'auto' | 'manual' | 'none'; /** Autoplay resource marker */ autoplay: boolean; /** Autofocus on play marker */ autofocus: boolean; /** Mute resource marker */ muted: boolean; /** Loop resource play */ loop: boolean; /** Marker to show controls for resource player */ controls: boolean; /** Allow media to play inline (see HTML video/audio spec) */ playsInline: boolean; /** * Prevents the browser from suggesting a Picture-in-Picture context menu or * to request Picture-in-Picture automatically in some cases. */ disablePictureInPicture: boolean; /** Allows play resource only in viewport area */ playInViewport: 'restart' | boolean; /** Allows to start viewing a resource from a specific time offset. */ startTime: number; /** Allows player to accept focus */ focusable: boolean; /** Preload resource */ preload: 'none' | 'metadata' | 'auto' | ''; /** Ready state class/classes */ readyClass: string; /** Ready state class/classes target */ readyClassTarget: string; /** Condition {@link ESLMediaQuery} to allow load of media resource. Default: `all` */ loadCondition: string; /** Class / classes to add when load media is accepted. Supports multiple and inverted classes */ loadConditionClass: string; /** Target element {@link ESLTraversingQuery} select to toggle {@link loadConditionClass} classes */ loadConditionClassTarget: string; /** @readonly Ready state marker */ ready: boolean; /** @readonly Active state marker */ active: boolean; /** @readonly Resource played marker */ played: boolean; /** @readonly Error state marker */ error: boolean; /** @readonly Width is greater than height state marker */ wide: boolean; /** Private property to mark if the element is visible */ _isVisible: boolean; /** Marker if the last action (play/pause/stop) was initiated by the user */ protected _isManualAction: boolean; /** Applied provider instance */ protected _provider: BaseProvider | null; /** Deferred reinitialize handler, to prevent multiple reinitialization calls in bound of the macro-task */ protected deferredReinitialize: import("../../esl-utils/async").Debounced<() => void>; /** * Map object with possible Player States, values: * BUFFERING, ENDED, PAUSED, PLAYING, UNSTARTED, VIDEO_CUED, UNINITIALIZED */ static get PLAYER_STATES(): typeof PlayerStates; /** Returns true if the provider with given name is supported */ static supports(name: string): boolean; /** @readonly {@link ESLMediaManager} used for current instance */ protected get manager(): ESLMediaManager; protected connectedCallback(): void; protected disconnectedCallback(): void; protected attributeChangedCallback(attrName: string, oldVal: string, newVal: string): void; canActivate(): boolean; private reinitInstance; updateContainerMarkers(): void; /** Seek to given position of media */ seekTo(pos: number): Promise<void> | null; /** * Start playing media * @param allowActivate - allows to remove manual lazy loading restrictions * @param system - marks that the action was initiated by the system */ play(allowActivate?: boolean, system?: boolean): Promise<void> | null; /** Pause playing media */ pause(system?: boolean): Promise<void> | null; /** Stop playing media */ stop(system?: boolean): Promise<void> | null; /** * Executes toggle action: * If the player is PAUSED then it starts playing otherwise it pause playing */ toggle(allowActivate?: boolean): Promise<void> | null; /** Focus inner player **/ focusPlayer(): void; /** Detects if the user manipulate trough native controls */ protected detectUserInteraction(cmd: string): void; _onReady(): void; _onError(detail?: any, setReadyState?: boolean): void; _onDetach(): void; _onBeforePlay(initiator: 'initial' | 'user' | 'system'): boolean; _onPlay(): void; _onPaused(): void; _onEnded(): void; protected _onResize(): void; protected _onRefresh(e: Event): void; protected _onRegistryStateChange(e: ESLMediaRegistryEvent): void; protected _onConditionChange(): void; protected _onKeydown(e: KeyboardEvent): void; /** Update ready class state */ protected updateReadyClass(): void; /** Applied provider */ get providerType(): string; /** * Marker if the last action (play/pause/stop) was initiated by the user * (direct method call or by embed player controls) */ get isUserInitiated(): boolean; /** Current player state, see {@link ESLMedia.PLAYER_STATES} values */ get state(): PlayerStates; /** Duration of the media resource */ get duration(): number; /** Current time of media resource */ get currentTime(): number; /** Set current time of media resource */ set currentTime(time: number); /** ESLMediaQuery to limit ESLMedia loading */ get conditionQuery(): ESLMediaQuery; /** Fill mode should be handled for element */ get fillModeEnabled(): boolean; /** Used resource aspect ratio forced by attribute or returned by provider */ get actualAspectRatio(): number; protected reattachViewportConstraint(): void; protected detachViewportConstraint(): void; } declare global { export interface ESLLibrary { Media: typeof ESLMedia; } export interface HTMLElementTagNameMap { 'esl-media': ESLMedia; } }