import { default as CxImage } from '../image/image.ts';
import { default as CxResizeObserver } from '../resize-observer/resize-observer.ts';
import { default as ResizableElement } from '../../../../base/src/resizable-element.ts';
import { LocalizeController } from '../../../../utils/src/custom-element/i18n';
import { TemplateResult } from 'lit';
import { VideoJsPlayer } from './videojs/index.js';

/**
 * @summary Video are wrappers for video elements with videoJS support. This component is used to display videos in your application.
 *
 * @csspart video-js-container - The video-js-container element, the main container of the video.
 * @csspart placeholder - The placeholder element.
 *
 * @cssproperty [--padding=0] - The padding of the image.
 * @cssproperty --border-radius - The border-radius of the video container.
 * @cssproperty --border - The border of the video container.
 *
 * @event cx-play - Emitted when playback starts.
 * @event cx-pause - Emitted when playback pauses.
 * @event cx-time-update - Emitted while the playback position changes.
 * @event cx-ended - Emitted when playback reaches the end.
 * @event cx-seeked - Emitted after a seek operation.
 * @event cx-loaded-metadata - Emitted when metadata is loaded.
 * @event cx-error - Emitted when the video fails to load.
 *
 * @slot placeholder - The placeholder element, shown while the `src` is not set.
 */
export default class CxVideo extends ResizableElement {
    static readonly styles: import('lit').CSSResult[];
    static readonly dependencies: {
        'cx-image': typeof CxImage;
        'cx-resize-observer': typeof CxResizeObserver;
    };
    readonly localize: LocalizeController;
    videoJsContainer: HTMLDivElement;
    seekbar: HTMLDivElement;
    resizeContainer: HTMLDivElement;
    videoJsContainerAsync: Promise<HTMLDivElement>;
    videoElement: HTMLVideoElement;
    progressBarContainer: HTMLDivElement;
    videoJsContainerElement: HTMLDivElement;
    /**
     * The path to the video to load.
     */
    src: string;
    /**
     * The name of the video.
     */
    name: string;
    /**
     * The source field for the name of the video.
     */
    nameSourceField: string;
    /**
     * The mime type of the video.
     */
    type: string;
    /**
     * The poster image to show before the video loads.
     */
    poster: string;
    /**
     * Determines if the video should autoplay.
     */
    autoplay: boolean;
    /**
     * Determines if the video should loop.
     */
    loop: boolean;
    /**
     * Determines if the video should be muted.
     */
    muted: boolean;
    /**
     * Determines if the controls should be shown.
     */
    showControls: boolean;
    /**
     * Determines if picture-in-picture should be disabled.
     */
    disablePictureInPicture: boolean;
    /**
     * Determines if remote playback should be disabled.
     */
    disableRemotePlayback: boolean;
    /**
     * Determines if the volume panel should be disabled.
     */
    disableVolumePanel: boolean;
    isLoaded: boolean;
    isPlaying: boolean;
    isError: boolean;
    isFullscreen: boolean;
    player: VideoJsPlayer | null;
    videoWidth: number;
    videoHeight: number;
    protected autoPlayTimeout: number | null;
    parsedName: string;
    formattedPoster: string;
    /**
     * The current time of the video.
     */
    get currentTime(): any;
    /**
     * The duration of the video.
     */
    get duration(): any;
    /**
     * Support CMS5 edit mode for the video.
     */
    get isInEditMode(): boolean;
    get containerClassMap(): {
        container: boolean;
        'container--empty': boolean;
        'container--error': boolean;
        'container--resizing': boolean;
    };
    constructor();
    runConnectedCallback(): void;
    disconnectedCallback(): void;
    private onPause;
    private onPlay;
    private onTimeUpdate;
    private onEnded;
    private onSeeked;
    protected onFullscreenChange(): void;
    private onLoadedMetadata;
    private onError;
    private handleKeyDown;
    cleanUp(): void;
    protected addVideoEventListeners(): void;
    protected removeVideoEventListeners(): void;
    attachSeekbar(): void;
    protected setupVideoJsPlayer(src?: string): Promise<void>;
    handleLoopChange(): Promise<void>;
    handleMutedChange(): Promise<void>;
    handleControlsChange(): Promise<void>;
    handleDisablePictureInPictureChange(): Promise<void>;
    handleDisableRemotePlaybackChange(): Promise<void>;
    handleDisableVolumePanelChange(): Promise<void>;
    handlePosterChange(): Promise<void>;
    handleFormattedPosterChange(): Promise<void>;
    handleSrcChange(): Promise<void>;
    handleParsedNameChange(): Promise<void>;
    private handleSizeChange;
    updated(changedProps: Map<string, unknown>): void;
    play(): void;
    pause(): void;
    seek(time: number): void;
    protected renderContent(): TemplateResult;
    render(): TemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-video': CxVideo;
    }
}
