@aidenlx/player/types/media/manage/MediaVisibilityElement.d.ts

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

import { DisposalBin, IntersectionController, PageController } from '@vidstack/foundation';
import { LitElement } from 'lit';
import type { MediaProviderElement } from '../provider';
export declare type EnterVisibilityMediaAction = 'play' | 'unmute';
export declare type ExitVisibilityMediaAction = 'pause' | 'mute';
/**
 * This element is responsible for managing a `MediaProviderElement` as viewport or page
 * visibility changes occur.
 *
 * Management includes:
 *
 * - Playback or volume changes when page visibility changes (eg: user changes tab or device
 * sleeps).
 *
 * - Playback or volume changes when viewport visibility changes (eg: user scrolls video in and
 * out of view).
 *
 * @tagname vds-media-visibility
 * @slot - Used to pass in content, typically a media player/provider.
 * @events ./media-visibility.events.ts
 * @example
 * ```html
 * <vds-media-visibility
 *   enter-viewport="play"
 *   exit-viewport="pause"
 *   enter-page="unmute"
 *   exit-page="mute"
 * >
 *   <!-- ... -->
 * </vds-media-visibility>
 * ```
 */
export declare class MediaVisibilityElement extends LitElement {
    /**
     * The action to perform on the media provider when it enters the viewport.
     *
     * @default undefined
     */
    enterViewport?: EnterVisibilityMediaAction;
    /**
     * The action to perform on the media provider when it exits the viewport.
     *
     * @default undefined
     */
    exitViewport?: ExitVisibilityMediaAction;
    /**
     * The amount of time in milliseconds to delay viewport enter actions.
     *
     * @default 0
     */
    viewportEnterDelay: number;
    /**
     * The action to perform on the media provider when the page becomes visible.
     *
     * @default undefined
     */
    enterPage?: EnterVisibilityMediaAction;
    /**
     * The action to perform on the media provider when the page becomes hidden.
     *
     * @default undefined
     */
    exitPage?: ExitVisibilityMediaAction;
    /**
     * The type of page state to use when determining visibility.
     *
     * - **state:** Refers to the page lifecycle state. This is typically what you want.
     * - **visibility:** Visible here means the page content may be at least partially visible. In
     * practice, this means that the page is the foreground tab of a non-minimized window.
     *
     *💡 Need help making a decision?
     *
     * - Use `state` when you want completely visible / not visible.
     * - Use `visibility` when you want partially visible / not visible.
     *
     * @default 'state'
     */
    pageChangeType: 'state' | 'visibility';
    /**
     * The amount of time in milliseconds to delay page enter actions.
     *
     * @default 0
     */
    pageEnterDelay: number;
    /**
     * A DOM query selector for the element that is used as the viewport for checking visibility
     * of the media player. Must be a ancestor of the media player. Defaults to the browser viewport
     * if not specified.
     *
     * @default undefined
     */
    intersectionRoot?: string;
    /**
     * A number which indicates at what percentage of the media player's visibility the observer's
     * `onEnter` and `onExit` actions should be triggered.
     *
     * @default 1
     */
    intersectionThreshold: number;
    protected _isIntersecting: boolean;
    get isIntersecting(): boolean;
    disconnectedCallback(): void;
    render(): import("lit").TemplateResult<1>;
    protected _mediaProvider?: MediaProviderElement;
    protected _mediaProviderDisposal: DisposalBin;
    get mediaProvider(): MediaProviderElement | undefined;
    protected _handleMediaProviderConnect: void;
    protected _hasIntersected: boolean;
    protected _intersectionTimeout?: any;
    protected intersectionController: IntersectionController;
    protected _pageTimeout?: any;
    protected pageController: PageController;
    protected _triggerOnEnter(mediaAction?: EnterVisibilityMediaAction): void;
    protected _triggerOnExit(mediaAction?: ExitVisibilityMediaAction): void;
    protected _dispatchVisibilityChange(): void;
}
//# sourceMappingURL=MediaVisibilityElement.d.ts.map