import { Howl } from "howler";
import { Subject } from "rxjs";
import { Alignment, Page, InterfaceLanguage, ReadAlongMode, ScrollBehaviour, RASMeta, RASAnnotation } from "../../index.d";
interface ASSETS_STATUS {
    AUDIO: number;
    RAS: number;
}
interface InvalidImageFile {
    fileName: string;
    pageIndex: number;
}
export declare class ReadAlongComponent {
    el: HTMLElement;
    /************
     *  PROPS   *
     ************/
    /**
     * URL of the aligned text as readalong XML
     */
    href: string;
    processed_alignment: Alignment;
    /**
     * URL of the audio file
     */
    audio: string;
    audio_howl: Howl;
    audio_howl_sprites: any;
    reading$: Subject<string>;
    duration: number;
    /**
     * Overlay
     * This is an SVG overlay to place over the progress bar
     */
    svgOverlay: string;
    /**
     * Theme to use: ['light', 'dark'] defaults to the user's configured theme.
     */
    theme: string;
    /**
     * Language  of the interface. In 639-3 code.
     * Options are "eng" (English), "fra" (French) or "spa" (Spanish)
     */
    language: InterfaceLanguage;
    /**
     * i18n strings dicts
     */
    i18nStrings: {
        eng: {
            page: string;
            speed: string;
            "re-align": string;
            "loading-error": string;
            "parse-error": string;
            "alignment-error": string;
            "image-error": string;
            loading: string;
            "line-placeholder": string;
            "upload-image": string;
            "choose-file": string;
            "play-tooltip": string;
            "rewind-tooltip": string;
            "stop-tooltip": string;
            "theme-tooltip": string;
            "full-screen-tooltip": string;
            "translation-tooltip": string;
            "add-translation": string;
            "configuration-tooltip": string;
            settings: string;
            "page-animation": string;
            "auto-pause": string;
            language: string;
            "save-settings": string;
            "reset-title": string;
            reset: string;
            eng: string;
            fra: string;
            spa: string;
            close: string;
            "annotations-tooltip": string;
        };
        fra: {
            page: string;
            speed: string;
            "re-align": string;
            "loading-error": string;
            "parse-error": string;
            "alignment-error": string;
            "image-error": string;
            loading: string;
            "line-placeholder": string;
            "upload-image": string;
            "choose-file": string;
            "play-tooltip": string;
            "rewind-tooltip": string;
            "stop-tooltip": string;
            "theme-tooltip": string;
            "full-screen-tooltip": string;
            "translation-tooltip": string;
            "add-translation": string;
            "configuration-tooltip": string;
            settings: string;
            "page-animation": string;
            "auto-pause": string;
            language: string;
            "save-settings": string;
            "reset-title": string;
            reset: string;
            eng: string;
            fra: string;
            spa: string;
            close: string;
            "annotations-tooltip": string;
        };
        spa: {
            page: string;
            speed: string;
            "re-align": string;
            "loading-error": string;
            "parse-error": string;
            "alignment-error": string;
            "image-error": string;
            loading: string;
            "line-placeholder": string;
            "upload-image": string;
            "choose-file": string;
            "play-tooltip": string;
            "rewind-tooltip": string;
            "stop-tooltip": string;
            "theme-tooltip": string;
            "full-screen-tooltip": string;
            "translation-tooltip": string;
            "add-translation": string;
            "configuration-tooltip": string;
            settings: string;
            "page-animation": string;
            "auto-pause": string;
            language: string;
            "save-settings": string;
            "reset-title": string;
            reset: string;
            eng: string;
            fra: string;
            spa: string;
            close: string;
            "annotations-tooltip": string;
        };
    };
    /**
     * Optional custom Stylesheet to override defaults
     */
    cssUrl?: string;
    /**
     * DEPRECATED
     * Will be removed in version 2.0.0
     * Toggle the use of an assets folder. Defaults to undefined.
     * Previously (<1.2.0) defaulted to 'true'.
     * .readalong files should just contain base filenames
     * not the full paths to the images.
     */
    useAssetsFolder?: boolean;
    /**
     * Define a path for where the image assets are located
     * This should be used instead of use-assets-folder.
     * Defaults to 'assets/'. The empty string means that
     * image paths will not have a prefix added to them.
     * Use of the forward slash is optional.
     */
    imageAssetsFolder: string;
    /**
     * Toggles the page scrolling from horizontal to vertical. Defaults to horizontal
     *
     */
    pageScrolling: "horizontal" | "vertical";
    /**
     * Choose mode of ReadAlong - either view (default) or edit
     */
    mode: ReadAlongMode;
    /**
     * Select whether scrolling between pages should be "smooth" (default nicely
     * animated, good for fast computers) or "auto" (choppy but much less compute
     * intensive)
     */
    scrollBehaviour: ScrollBehaviour;
    /**
     * Show text translation  on at load time
     */
    displayTranslation: boolean;
    /**
     * Control the range of the playback rate: allow speeds
     * from 100 - playback-rate-range to 100 + playback-rate-range.
     */
    playbackRateRange: number;
    /**
     * Auto Pause at end of every page
     */
    autoPauseAtEndOfPage: boolean;
    /************
     *  STATES  *
     ************/
    /**
     * Whether audio is playing or not
     */
    playing: boolean;
    play_id: number;
    playback_rate: number;
    fullscreen: boolean;
    autoScroll: boolean;
    hasLoaded: number;
    showGuide: boolean;
    parsed_text: any;
    dropAreas: any;
    current_page: any;
    hasTextTranslations: boolean;
    images: {
        [key: string]: string | null;
    };
    invalidImages: {
        [key: string]: InvalidImageFile;
    };
    translations: {
        [key: string]: string | null;
    };
    latestTranslation: string;
    assetsStatus: ASSETS_STATUS;
    alignment_failed: boolean;
    isScrolling: boolean;
    scrollTimer: any;
    handleScrollEvent(): void;
    autoPauseTimer: any;
    endOfPageTags: Alignment;
    finalTaggedWord: string;
    settingsVisible: boolean;
    private userPreferences;
    private userPreferencesDirty;
    private hasUserPreferences;
    meta: RASMeta;
    annotations: RASAnnotation[];
    annotationsMenuVisible: boolean;
    wheelHandler(event: MouseEvent): void;
    fullScreenHandler(): void;
    handleKeyDown(event: KeyboardEvent): void;
    /***********
     *  UTILS  *
     ***********/
    /**
     * Transforms a given path to either use the default assets folder or rely on the absolute path given
     * @param path
     * @return string
     */
    private urlTransform;
    /**
     * Given an audio file path and a parsed alignment object,
     * build a Sprite object
     * @param audio
     * @param alignment
     */
    private buildSprite;
    /**
     * Add escape characters to query selector param
     * @param id
     */
    tagToQuery(id: string): string;
    /**
     * Return HTML element of word closest to second s
     *
     * @param s seconds
     */
    returnWordClosestTo(s: number): HTMLElement;
    /**
     * Return the file path given the asset_type
     */
    getPathFromAssetType(asset_type: string): string;
    /**
     * toggle the setting pane visiblilty
     */
    toggleSettings(): void;
    /**
     * toggle (override) scrolling animation
     */
    toggleScrollBehavior(): void;
    /*************
     *   AUDIO   *
     *************/
    /**
     * Change playback between .75 and 1.25. To change the playback options,
     * change the HTML in the function renderControlPanel
     *
     * @param ev
     */
    changePlayback(ev: Event): void;
    /**
     *  Go back s milliseconds
     *
     * @param s
     */
    goBack(s: number): void;
    /**
     * Go to seek
     *
     * @param seek number
     *
     */
    goTo(seek: number): void;
    /**
     * Go to seek from id
     *
     * @param ev
     */
    goToSeekAtEl(ev: MouseEvent): string;
    /**
     * Go to seek from progress bar
     */
    goToSeekFromProgress(ev: MouseEvent): void;
    /**
     * Pause audio.
     */
    pause(): void;
    /**
     * Play the current audio, or start a new play of all
     * the audio
     *
     *
     */
    play(): void;
    /**
     * Seek to an element with id 'id', then play it
     *
     * @param ev
     */
    playSprite(ev: MouseEvent): void;
    /**
     * Stop the sound and remove all active reading styling
     */
    stop(): void;
    /**
     * toggle the visibility of translation text
     */
    toggleTextTranslation(): void;
    /**
     * Toggle the visibility of annotation layers (sentences)
     * if id is set to * it toggles all layers
     * @param annotationId
     */
    toggleTextAnnotation(annotationId: string): void;
    /*************
     * ANIMATION *
     *************/
    /**
     * Remove highlighting from every other word and add it to el
     *
     * @param el
     */
    addHighlightingTo(el: HTMLElement): void;
    /**
     * Animate the progress through the overlay svg
     */
    animateProgressWithOverlay(): void;
    /**
     * Animate the progress if no svg overlay is provided
     *
     * @param play_id
     * @param tag
     */
    animateProgressDefault(play_id: number, tag: string): void;
    /**
     * Animate progress, either by default or with svg overlay.
     */
    animateProgress(play_id?: number): void;
    /**
     * Change fill colour to match theme
     */
    changeFill(): void;
    /**
     * Get Current Word
     */
    getCurrentWord(): Promise<Subject<string>>;
    /**
     * Get Images
     */
    getImages(): Promise<object>;
    /**
     * Update Single Sprite
     */
    updateSpriteAlignments(alignment: Alignment): Promise<void>;
    /**
     * Get ReadAlong Element
     */
    getReadAlongElement(): Promise<Element>;
    /**
     * Get Alignments
     */
    getAlignments(): Promise<Alignment>;
    /**
     * Get Translations
     */
    getTranslations(): Promise<object>;
    /**
     * Change theme
     */
    changeTheme(): Promise<void>;
    /**
     * Update stylesheet
     * @param url
     */
    setCss(url: any): Promise<void>;
    /**
     * Add custom font
     */
    addCustomFont(fontData: string): Promise<void>;
    /**
     * Return the Sentence Container of Word
     * Currently the 3rd parent up the tree node
     * @param element
     * @private
     */
    private static _getSentenceContainerOfWord;
    /**
     * Make Fullscreen
     */
    private toggleFullscreen;
    /*************
     * SCROLLING *
     *************/
    hideGuideAndScroll(): void;
    inParagraphContentOverflow(element: HTMLElement): boolean;
    inPageContentOverflow(element: HTMLElement): boolean;
    inPage(element: HTMLElement): boolean;
    scrollToPage(pg_id: string): void;
    scrollByHeight(el: HTMLElement): void;
    scrollByWidth(el: HTMLElement): void;
    scrollTo(el: HTMLElement): void;
    /*************
     * LIFECYCLE *
     *************/
    /**
     * When the component is disconnected, stop all audio.
     *
     */
    disconnectedCallback(): void;
    /**
     * When the component updates, change the fill of the progress bar.
     * This is because the fill colour is determined by a computed CSS
     * value set by the Web Component's theme. When the @prop theme changes and
     * the component updates, we have to update the fill with the new
     * computed CSS value.
     */
    componentDidUpdate(): void;
    /**
     * construct a valid default user preferences object, using the provided
     * component properties.
     */
    private defaultUserPreferences;
    /**
     * Using this Lifecycle hook to handle backwards compatibility of component attribute
     */
    componentWillLoad(): Promise<void>;
    /**
     * Lifecycle hook: after component loads, build the Sprite and parse the files necessary.
     * Then subscribe to the _reading$ Subject in order to update CSS styles when new element
     * is being read
     */
    componentDidLoad(): void;
    attachScrollingLogicToAudio(): void;
    componentDidRender(): void;
    /**
     * Is the App ready to start playing
     * This could be expressed as one line
     * but because there are multiple states involved
     * breaking it down to make it easier to track
     */
    isReadyToPlay(): boolean;
    /**********
     *  LANG  *
     **********/
    /**
     * Helper function for getI18nString()
     * @param key  the key of the string to lookup
     * @returns the requested string found i18n/messages.{this.language}.json
     */
    getRawI18nString(key: string): string;
    /**
     * Any text used in the Web Component should be at least bilingual in English and French.
     * To add a new term, add a new key to each messages.*.json file in ../../i18n
     * and give the translations as values.
     *
     * Subsitution semantics: given substitution = { "STR1": "value1", "STR2": "value2" },
     * the text "foo <STR1> bar <STR2> baz" will replaced by "foo value1 bar value2 baz".
     *
     * @param key  short name for the text to fetch
     * @param substitutions  optional list of subtitutions to perform
     * @returns  the string in language this.language for key
     */
    getI18nString(key: string, substitutions?: {
        readonly [index: string]: string;
    }): string;
    /**********
     *  EDIT  *
     **********/
    addLine(sentence_element: Element): void;
    removeLine(sentence_element: Element): void;
    updateTranslation(sentence_id: string, text: string): void;
    handleImageFile(file: File, pageIndex: number): void;
    deleteImage(pageIndex: number): void;
    /**********
     * RENDER *
     **********/
    /**
     * The Guide element
     */
    Guide: () => Element;
    /**
     * Render svg overlay
     */
    Overlay: () => Element;
    /**
     * Remove image at given page
     *
     * @param props
     */
    RemoveImg: (props: {
        pageIndex: number;
    }) => Element;
    /**
     * Render image at path 'url' in assets folder.
     *
     * @param props
     */
    Img: (props: {
        imgURL: string;
        pageIndex: number;
    }) => Element;
    ImgPlaceHolder: (props: {
        pageID: string;
        pageIndex: number;
    }) => Element;
    /**
     * Page Counter element
     *
     * @param props
     *
     * Shows currentPage / pgCount
     */
    PageCount: (props: {
        pgCount: number;
        currentPage: number;
    }) => Element;
    ImgContainer: (props: {
        pageIndex: number;
        pageID: string;
    }) => Element;
    /**
     * Page element
     *
     * @param props
     *
     * Show 'Page' or vertically scrollable text content.
     * Text content on 'Page' breaks is separated horizontally.
     */
    Page: (props: {
        pageData: Page;
    }) => Element;
    /**
     * Paragraph element
     *
     * @param props
     *
     * A paragraph element with one or more sentences
     */
    Paragraph: (props: {
        sentences: Node[];
        attributes: NamedNodeMap;
    }) => Element;
    /**
     * Sentence element
     *
     * @param props
     *
     * A sentence element with one or more words
     */
    Sentence: (props: {
        sentenceData: Element;
    }) => Element;
    /**
     * A non-Word text element
     *
     * @param props
     *
     * This is an element that is a child to a Sentence element,
     * but cannot be clicked and is not a word. This is usually
     * inter-Word punctuation or other text.
     */
    NonWordText: (props: {
        text: string;
        id: string;
        attributes: NamedNodeMap;
    }) => Element;
    /**
     * A Word text element
     *
     * @param props
     *
     * This is a clickable, audio-aligned Word element
     */
    Word: (props: {
        id: string;
        text: string;
        attributes: NamedNodeMap;
    }) => Element;
    /**
     * Render controls for ReadAlong
     */
    PlayControl: () => Element;
    ReplayControl: () => Element;
    StopControl: () => Element;
    PlaybackSpeedControl: () => Element;
    StyleControl: () => Element;
    FullScreenControl: () => Element;
    TextAnnotationsControl: () => Element;
    TextTranslationDisplayControl: () => Element;
    ToggleSettingsControl: () => Element;
    ControlPanel: () => Element;
    Settings: () => Element;
    AnnotationsMenu: () => Element;
    /**
     * Render main component
     */
    render(): Element;
}
export {};