@vue-youtube/core/dist/index.d.ts

Integrate YouTube Iframe Player into Vue 2/3 applications

import type { APIChangeCallback } from '@vue-youtube/shared';
import type { App } from 'vue-demi';
import type { ErrorCallback as ErrorCallback_2 } from '@vue-youtube/shared';
import type { MaybeElementRef } from '@vue-youtube/shared';
import type { MaybeRef } from '@vue-youtube/shared';
import type { PlaybackQualityChangeCallback } from '@vue-youtube/shared';
import type { PlaybackRateChangeCallback } from '@vue-youtube/shared';
import type { Player } from '@vue-youtube/shared';
import type { PlayerStateChangeCallback } from '@vue-youtube/shared';
import type { PlayerVars } from '@vue-youtube/shared';
import type { ReadyCallback } from '@vue-youtube/shared';
import { ShallowRef } from 'vue-demi';

/**
 * Create a YouTube Iframe player manager. The manager provides a `install` method which gets called
 * by Vue's `app.use()`.
 *
 * @see https://vue-youtube.github.io/docs/usage/manager
 * @returns Manager
 */
export declare const createManager: (options?: ManagerOptions) => Manager;

/**
 * When `deferLoading` is enabled, the manager will not load and insert required scripts into the page. Instead, it will
 * do so either when `Manager.load()` is called or when the `usePlayer()` composable is used and `autoLoad` is set to
 * `true`.
 *
 * @see https://vue-youtube.github.io/docs/usage/manager#deferloading
 */
export declare interface DeferLoadingOption {
    autoLoad?: boolean;
    enabled: boolean;
}

export declare const injectManager: () => Manager;

export declare interface Manager {
    install(app: App): void;
    register(target: HTMLElement, cb: RegisterFunction): void;
    load(): void;
    _state: ManagerState;
    _insert(): void;
}

/**
 * Possible options which can be provided via the `createManager` function.
 *
 * @see https://vue-youtube.github.io/docs/usage/manager#options
 */
export declare interface ManagerOptions {
    deferLoading?: DeferLoadingOption;
}

export declare interface ManagerState {
    backlog: Map<string, RegisterFunction>;
    players: Map<string, RegisterFunction>;
    options: ManagerOptions;
    counter: number;
    factory: any;
}

export declare type RegisterFunction = (data: RegisterFunctionReturn) => void;

export declare type RegisterFunctionReturn = {
    factory: any;
    id: string;
};

/**
 * Initialize a reactive YouTube player
 *
 * @see https://vue-youtube.github.io/docs/usage/composable
 * @param newVideoId Video ID as a string or a ref
 * @param element Template ref to the target element
 * @param options Player options
 */
export declare const usePlayer: (newVideoId: MaybeRef<string>, element: MaybeElementRef, options?: Partial<UsePlayerOptions>) => {
    instance: ShallowRef<Player | undefined>;
    togglePlay: () => void;
    toggleMute: () => void;
    toggleLoop: () => void;
    toggleShuffle: () => void;
    onPlaybackQualityChange: (...cb: Array<PlaybackQualityChangeCallback>) => void;
    onPlaybackRateChange: (...cb: Array<PlaybackRateChangeCallback>) => void;
    onStateChange: (...cb: Array<PlayerStateChangeCallback>) => void;
    onApiChange: (...cb: Array<APIChangeCallback>) => void;
    onError: (...cb: Array<ErrorCallback_2>) => void;
    onReady: (...cb: Array<ReadyCallback>) => void;
};

/**
 * Possible options which can be provided via the `usePlayer` composable.
 *
 * @see https://vue-youtube.github.io/docs/usage/composable#configuration
 */
export declare interface UsePlayerOptions {
    /**
     * Set the height of the YouTube player. Number and string supported.
     *
     * @see https://vue-youtube.github.io/docs/usage/composable#configuration
     * @see https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player
     */
    height: number | string;
    /**
     * Set the width of the YouTube player. Number and string supported.
     *
     * @see https://vue-youtube.github.io/docs/usage/composable#configuration
     * @see https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player
     */
    width: number | string;
    /**
     * Customize the player behavior.
     *
     * @see https://developers.google.com/youtube/player_parameters#Parameters
     */
    playerVars: PlayerVars;
    /**
     * When this option is `true` the host `https://www.youtube.com` is used, otherwise `https://www.youtube-nocookie.com`
     */
    cookie: boolean;
}

export declare type UsePlayerReturn = ReturnType<typeof usePlayer>;

export declare const withConfigDefaults: (options: Partial<UsePlayerOptions>) => UsePlayerOptions;


export * from "@vue-youtube/shared";

export { }