@interactive-video-labs/react/dist/index.d.ts

Thin React wrapper for the @interactive-video-labs/core engine. Enables cue-based interactive video playback in React apps.

import React from 'react';
import { PlayerConfig, AnalyticsEvent, AnalyticsPayload, CuePoint, Translations } from '@interactive-video-labs/core';

interface InteractiveVideoProps extends Omit<PlayerConfig, 'videoUrl' | 'cues' | 'translations'> {
    videoUrl: string;
    onAnalyticsEvent?: (event: AnalyticsEvent, payload?: AnalyticsPayload) => void;
    cues?: CuePoint[];
    translations?: Translations;
}
/**
 * `InteractiveVideo` is a React component that wraps the `@interactive-video-labs/core` IVLabsPlayer.
 * It provides a convenient way to embed and manage interactive video experiences within a React application.
 *
 * The component handles the lifecycle of the IVLabsPlayer, including initialization, updates based on prop changes,
 * and destruction when the component unmounts. It also provides a mechanism for handling analytics events.
 *
 * @param {InteractiveVideoProps} props - The props for the InteractiveVideo component.
 * @param {string} props.videoUrl - The URL of the video to be played. This is a mandatory prop.
 * @param {(event: AnalyticsEvent, payload?: AnalyticsPayload) => void} [props.onAnalyticsEvent] - Optional callback for analytics events.
 * @param {CuePoint[]} [props.cues] - Optional array of cue points to load into the player.
 * @param {Translations} [props.translations] - Optional translations object for player localization.
 * @param {Omit<PlayerConfig, 'videoUrl' | 'cues' | 'translations'>} [props.restOptions] - Any other valid PlayerConfig options
 *   that are not `videoUrl`, `cues`, or `translations`.
 *
 * @example
 * ```tsx
 * <InteractiveVideo
 *   videoUrl="https://example.com/my-video.mp4"
 *   autoplay={true}
 *   onAnalyticsEvent={(event, payload) => console.log(event, payload)}
 *   cues={[{ time: 10, id: 'my-cue', type: 'pause' }]}
 * />
 * ```
 */
declare const InteractiveVideo: React.FC<InteractiveVideoProps>;

export { InteractiveVideo, type InteractiveVideoProps };