import { PropertyValues } from "lit";
import { SpectrogramComponent } from "../spectrogram/spectrogram";
/**
 * @description
 * Specifies where you should be able to find a preference setting in the media
 * controls that can change the spectrogram settings.
 *
 * @example
 * To move the spectrogram color preferences to the overflow menu:
 * ```html
 * <oe-media-controls color-preference="overflow"></oe-media-controls>
 * ```
 *
 * @value default - Uses sane defaults for the preference positions
 * @value toolbar - The preference can be changed directly from the toolbar
 *                  Warning: If the preference is not shown in the toolbar by
 *                  default it is because the icon is not very intuitive.
 *                  If you want to change, the icon use the template slots
 * @value overflow - The preference can be changed through the overflow (cog icon) menu
 * @value hidden - The preference cannot be changed through the media controls
 */
type PreferenceLocation = "default" | "toolbar" | "overflow" | "hidden";
declare const MediaControlsComponent_base: import("../../helpers/types/mixins").Component;
/**
 * A simple media player with play/pause and seek functionality that can be used with the open ecoacoustics spectrograms and components.
 *
 * @csspart play-icon - Styling applied to the play icon (including default)
 * @csspart pause-icon - Styling applied to the pause icon (including default)
 *
 * @slot play-icon - The icon to display when the media is stopped
 * @slot pause-icon - The icon to display when the media is playing
 */
export declare class MediaControlsComponent extends MediaControlsComponent_base {
    static styles: import("lit").CSSResult;
    static readonly playShortcut = " ";
    private static recursiveAxesSearch;
    /**
     * A DOM selector or element reference to target the attached spectrogram
     * element.
     */
    for: string | SpectrogramComponent;
    playIconPosition: PreferenceLocation;
    /**
     * We use a state variable to track whether the settings menu is open or not
     * because Shoelace sub-menus use getComputedStyle to determine whether they
     * are in ltr or rtl mode.
     * This causes some performance issues when there are a lot of sub-menus or
     * media controls on the page because each submenu causes a reflow whenever
     * they are created.
     * By maintaining our own open/close state we can defer the creation of the
     * sub-menu contents until the menu is open, meaning that we only hit this
     * reflow cost when the user actually wants to see the menu.
     *
     * see: https://github.com/shoelace-style/shoelace/discussions/2527
     */
    private areSettingsOpen;
    private axesElement?;
    private spectrogramElement?;
    private readonly playHandler;
    private readonly keyDownHandler;
    private readonly optionsChangeHandler;
    disconnectedCallback(): void;
    connectedCallback(): void;
    toggleAudio(keyboardShortcut?: boolean): void;
    isSpectrogramPlaying(): boolean;
    protected willUpdate(changedProperties: PropertyValues<this>): void;
    private handleSpectrogramOptionsChange;
    private handlePointerDown;
    private handleKeyDown;
    private handleUpdatePlaying;
    private showSettings;
    private hideSettings;
    private playIcon;
    private pauseIcon;
    private discreteSettingsTemplate;
    private rangeSettingsTemplate;
    private axesSettingsTemplate;
    private settingsTemplate;
    private subMenuTemplate;
    render(): import("lit").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        "oe-media-controls": MediaControlsComponent;
    }
}
export {};