@interactive-video-labs/vue/dist/index.d.cts

Thin Vue wrapper for the @interactive-video-labs/core engine. Enables cue-based interactive video playback in Vue 3 applications.

import * as vue from 'vue';
import { PropType } from 'vue';
import { AnalyticsEvent, AnalyticsPayload, CuePoint, Translations, PlayerConfig } from '@interactive-video-labs/core';

/**
 * Props for the InteractiveVideo component.
 */
interface InteractiveVideoProps extends Omit<PlayerConfig, 'videoUrl' | 'cues' | 'translations' | 'targetElementId'> {
    /**
     * The URL of the video to be loaded.
     */
    videoUrl: string;
    /**
     * Callback function for analytics events.
     * @param event The name of the event.
     * @param payload The data associated with the event.
     */
    onAnalyticsEvent?: (event: AnalyticsEvent, payload?: AnalyticsPayload) => void;
    /**
     * An array of cue points for interactive events.
     */
    cues?: CuePoint[];
    /**
     * An object containing translations for the player.
     */
    translations?: Translations;
}
/**
 * A Vue component that wraps the IVLabsPlayer to provide interactive video capabilities.
 * It handles the lifecycle of the player, including initialization, updates, and destruction.
 */
declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
    /**
     * The URL of the video to be loaded.
     */
    videoUrl: {
        type: StringConstructor;
        required: true;
    };
    /**
     * Callback function for analytics events.
     */
    onAnalyticsEvent: {
        type: PropType<(event: AnalyticsEvent, payload?: AnalyticsPayload) => void>;
    };
    /**
     * An array of cue points for interactive events.
     */
    cues: {
        type: PropType<CuePoint[]>;
    };
    /**
     * An object containing translations for the player.
     */
    translations: {
        type: PropType<Translations>;
    };
    /**
     * Whether the video should start playing automatically.
     */
    autoplay: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Whether the video should loop.
     */
    loop: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * The locale to be used for the player.
     */
    locale: {
        type: StringConstructor;
        default: string;
    };
    /**
     * The ID of the target HTML element where the player will be mounted.
     */
    targetElementId: {
        type: StringConstructor;
    };
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
    [key: string]: any;
}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
    /**
     * The URL of the video to be loaded.
     */
    videoUrl: {
        type: StringConstructor;
        required: true;
    };
    /**
     * Callback function for analytics events.
     */
    onAnalyticsEvent: {
        type: PropType<(event: AnalyticsEvent, payload?: AnalyticsPayload) => void>;
    };
    /**
     * An array of cue points for interactive events.
     */
    cues: {
        type: PropType<CuePoint[]>;
    };
    /**
     * An object containing translations for the player.
     */
    translations: {
        type: PropType<Translations>;
    };
    /**
     * Whether the video should start playing automatically.
     */
    autoplay: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * Whether the video should loop.
     */
    loop: {
        type: BooleanConstructor;
        default: boolean;
    };
    /**
     * The locale to be used for the player.
     */
    locale: {
        type: StringConstructor;
        default: string;
    };
    /**
     * The ID of the target HTML element where the player will be mounted.
     */
    targetElementId: {
        type: StringConstructor;
    };
}>> & Readonly<{}>, {
    locale: string;
    autoplay: boolean;
    loop: boolean;
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;

export { type InteractiveVideoProps, _default as default };