@phont-ai/subtitles 0.1.55

package/dist/index.d.ts

@@ -0,0 +1,697 @@
+import { PhontClient, LoginResponse, RegisterResponse, SentenceAnimationState, WordAnimationState, EMOTION_ANIMATIONS } from '@phont-ai/subtitles-core';
+export { LoginResponse, PhontClient, PhontClientOptions, RegisterResponse, VodMetadata, subtitleManager } from '@phont-ai/subtitles-core';
+import React, { ReactNode } from 'react';
+
+interface PhontClientConfig {
+    apiKey: string;
+    apiBaseUrl?: string;
+}
+
+/**
+ * PhontSubtitles Component
+ *
+ * Main SDK component for rendering expressive subtitles
+ * Handles subtitle fetching, animation, and rendering
+ */
+
+interface PhontSubtitlesProps {
+    vodId: string;
+    currentTime: number;
+    isPlaying?: boolean;
+    mode?: 'sentence' | 'word';
+    language?: string | null;
+    maxExpression?: number;
+    threshold?: number;
+    isRTL?: boolean;
+    phontClient?: PhontClient | null;
+    className?: string;
+    style?: React.CSSProperties;
+    subtitleAvailable?: boolean;
+}
+declare function PhontSubtitles({ vodId, currentTime, isPlaying, mode, // Default to word-by-word mode
+language, maxExpression, threshold, isRTL, phontClient, className, style, subtitleAvailable, }: PhontSubtitlesProps): React.JSX.Element | null;
+
+/**
+ * SDK Authentication Hook
+ *
+ * IMPORTANT:
+ * This hook must behave like a singleton across the app.
+ * Multiple components (e.g. `SDKAuth` + `/sdk` page) call `useSDKAuth()`.
+ * If each call has its own `useState`, login/logout will not reliably refresh UI.
+ *
+ * We implement a tiny shared store via `useSyncExternalStore`.
+ */
+
+interface SDKAuthState {
+    isAuthenticated: boolean;
+    authToken: string | null;
+    sessionId: string | null;
+    tenantId: string | null;
+    username: string | null;
+    apiKey: string | null;
+    phontClient: PhontClient | null;
+}
+declare function useSDKAuth(apiBaseUrl?: string): {
+    login: (identifier: string, password: string) => Promise<LoginResponse>;
+    register: (username: string, email: string, password: string) => Promise<RegisterResponse>;
+    setApiKey: (apiKey: string) => void;
+    logout: () => void;
+    refreshAuth: () => void;
+    isAuthenticated: boolean;
+    authToken: string | null;
+    sessionId: string | null;
+    tenantId: string | null;
+    username: string | null;
+    apiKey: string | null;
+    phontClient: PhontClient | null;
+};
+
+/**
+ * SDK Authentication Component
+ *
+ * Provides UI for login, registration, and API key entry
+ * Matches the style and simplicity of StagingLogin
+ */
+
+interface SDKAuthProps {
+    apiBaseUrl?: string;
+    onAuthenticated?: (client: any) => void;
+}
+declare function SDKAuth({ apiBaseUrl, onAuthenticated }: SDKAuthProps): React.JSX.Element;
+
+/**
+ * SDK Animation Hook
+ *
+ * Combines SubtitleManager + emotion selection + URL animation
+ * Uses @phont/subtitles-core packages
+ */
+
+interface UseSDKAnimationOptions {
+    vodId: string;
+    currentTime: number;
+    mode: 'sentence' | 'word';
+    maxExpression?: number;
+    threshold?: number;
+    isRTL?: boolean;
+    language?: string | null;
+    phontClient?: PhontClient | null;
+}
+declare function useSDKAnimation(options: UseSDKAnimationOptions): {
+    animationState: SentenceAnimationState | WordAnimationState;
+    isLoading: boolean;
+    segment: any;
+};
+
+/**
+ * Player Adapter Interface
+ *
+ * Abstract interface for video player integration
+ * Allows PhontSubtitles to work with any video player (HTML5, Bitmovin, Shaka, etc.)
+ */
+interface PlayerAdapter {
+    /**
+     * Get current playback time in seconds
+     */
+    getCurrentTime(): number;
+    /**
+     * Check if video is currently playing
+     */
+    isPlaying(): boolean;
+    /**
+     * Subscribe to time updates
+     * @param callback Function called when playback time changes
+     * @returns Unsubscribe function
+     */
+    onTimeUpdate(callback: (currentTime: number) => void): () => void;
+    /**
+     * Subscribe to play state changes
+     * @param callback Function called when play/pause state changes
+     * @returns Unsubscribe function
+     */
+    onPlayStateChange(callback: (isPlaying: boolean) => void): () => void;
+    /**
+     * Optional: Get video duration (for debugging/validation)
+     */
+    getDuration?(): number | null;
+    /**
+     * Optional: Seek to a specific time (for testing/debugging)
+     */
+    seek?(time: number): void;
+}
+
+/**
+ * HTML5 Video Player Adapter
+ *
+ * Adapter for native HTML5 video elements
+ */
+
+declare class HTML5VideoAdapter implements PlayerAdapter {
+    private videoElement;
+    constructor(videoElement: HTMLVideoElement);
+    getCurrentTime(): number;
+    isPlaying(): boolean;
+    onTimeUpdate(callback: (currentTime: number) => void): () => void;
+    onPlayStateChange(callback: (isPlaying: boolean) => void): () => void;
+    getDuration(): number | null;
+    seek(time: number): void;
+}
+
+/**
+ * Bitmovin Player Adapter
+ *
+ * Adapter for Bitmovin Player
+ * Documentation: https://developer.bitmovin.com/playback/docs
+ */
+
+interface BitmovinPlayer {
+    getCurrentTime(): number;
+    play(): Promise<void>;
+    pause(): void;
+    seek(time: number): void;
+    getDuration(): number;
+    on(event: string, callback: (event?: any) => void): void;
+    off(event: string, callback: (event?: any) => void): void;
+    isPaused(): boolean;
+    isPlaying(): boolean;
+    getContainer(): HTMLElement | null;
+}
+declare class BitmovinPlayerAdapter implements PlayerAdapter {
+    private player;
+    private videoElement;
+    private timeUpdateCallbacks;
+    private playStateCallbacks;
+    private timeUpdateHandler?;
+    private playHandler?;
+    private pauseHandler?;
+    constructor(player: BitmovinPlayer, videoElement: HTMLVideoElement);
+    private setupEventListeners;
+    getCurrentTime(): number;
+    isPlaying(): boolean;
+    onTimeUpdate(callback: (currentTime: number) => void): () => void;
+    onPlayStateChange(callback: (isPlaying: boolean) => void): () => void;
+    getDuration(): number | null;
+    seek(time: number): void;
+    /**
+     * Cleanup - remove all event listeners
+     */
+    destroy(): void;
+}
+
+/**
+ * Shaka Player Adapter
+ *
+ * Adapter for Shaka Player
+ * Documentation: https://shaka-player-demo.appspot.com/docs/api/index.html
+ *
+ * Note: Shaka Player uses HTML5 video element directly, so we can use HTML5VideoAdapter
+ * OR create a Shaka-specific adapter if you want to use Shaka's API methods
+ */
+
+interface ShakaPlayer {
+    getVideoElement?(): HTMLVideoElement;
+    getCurrentTime(): number;
+    play(): Promise<void>;
+    pause(): void;
+    seek(time: number): void;
+    getDuration(): number;
+    addEventListener?(event: string, callback: (event?: any) => void): void;
+    removeEventListener?(event: string, callback: (event?: any) => void): void;
+    videoElement?: HTMLVideoElement;
+}
+/**
+ * Shaka Player Adapter
+ *
+ * Shaka Player wraps an HTML5 video element, so we can either:
+ * 1. Use HTML5VideoAdapter with player.getVideoElement() (simpler)
+ * 2. Use Shaka's API methods (this adapter)
+ *
+ * This adapter uses Shaka's API for consistency, but you can also use HTML5VideoAdapter
+ */
+declare class ShakaPlayerAdapter implements PlayerAdapter {
+    private player;
+    private videoElement;
+    private timeUpdateCallbacks;
+    private playStateCallbacks;
+    private timeUpdateHandler?;
+    private playHandler?;
+    private pauseHandler?;
+    constructor(player: ShakaPlayer, videoElement: HTMLVideoElement);
+    private setupEventListeners;
+    getCurrentTime(): number;
+    isPlaying(): boolean;
+    onTimeUpdate(callback: (currentTime: number) => void): () => void;
+    onPlayStateChange(callback: (isPlaying: boolean) => void): () => void;
+    getDuration(): number | null;
+    seek(time: number): void;
+    /**
+     * Cleanup - remove all event listeners
+     */
+    destroy(): void;
+}
+
+/**
+ * Video.js Player Adapter
+ *
+ * Adapter for Video.js Player
+ * Documentation: https://videojs.com/guides/api/
+ */
+
+interface VideoJSPlayer {
+    currentTime(): number;
+    currentTime(time: number): void;
+    play(): Promise<void> | void;
+    pause(): void;
+    duration(): number;
+    paused(): boolean;
+    on(event: string, callback: (event?: any) => void): void;
+    off(event: string, callback: (event?: any) => void): void;
+    ready(callback: () => void): void;
+}
+declare class VideoJSPlayerAdapter implements PlayerAdapter {
+    private player;
+    private videoElement;
+    private timeUpdateCallbacks;
+    private playStateCallbacks;
+    private timeUpdateHandler?;
+    private playHandler?;
+    private pauseHandler?;
+    constructor(player: VideoJSPlayer, videoElement: HTMLVideoElement);
+    private setupEventListeners;
+    getCurrentTime(): number;
+    isPlaying(): boolean;
+    onTimeUpdate(callback: (currentTime: number) => void): () => void;
+    onPlayStateChange(callback: (isPlaying: boolean) => void): () => void;
+    getDuration(): number | null;
+    seek(time: number): void;
+    /**
+     * Cleanup - remove all event listeners
+     */
+    destroy(): void;
+}
+
+/**
+ * 3Q Video Player Adapter
+ *
+ * Adapter for 3Q Video Player
+ * Documentation: https://player.docs.3q.video/player-web-sdk/configuration
+ */
+
+interface ThreeQPlayer {
+    getCurrentTime(): number;
+    play(): Promise<void>;
+    pause(): void;
+    seek(time: number): void;
+    getDuration(): number;
+    isPaused(): boolean;
+    isPlaying(): boolean;
+    on(event: string, callback: (event?: any) => void): void;
+    off(event: string, callback: (event?: any) => void): void;
+    getContainer?(): HTMLElement | null;
+}
+/**
+ * 3Q Video Player Adapter
+ *
+ * 3Q Player renders into a container div, and we access the video element
+ * from the container (similar to Bitmovin pattern).
+ */
+declare class ThreeQPlayerAdapter implements PlayerAdapter {
+    private player;
+    private videoElement;
+    private timeUpdateCallbacks;
+    private playStateCallbacks;
+    private timeUpdateHandler?;
+    private playHandler?;
+    private pauseHandler?;
+    private threeqTimeUpdateHandler?;
+    private threeqPlayHandler?;
+    private threeqPauseHandler?;
+    private timeUpdateInterval;
+    constructor(player: ThreeQPlayer, videoElement: HTMLVideoElement);
+    private setupEventListeners;
+    getCurrentTime(): number;
+    isPlaying(): boolean;
+    onTimeUpdate(callback: (currentTime: number) => void): () => void;
+    onPlayStateChange(callback: (isPlaying: boolean) => void): () => void;
+    getDuration(): number | null;
+    seek(time: number): void;
+    /**
+     * Cleanup - remove all event listeners
+     */
+    destroy(): void;
+    private stopTimeUpdatePolling;
+}
+
+/**
+ * usePlayerSync Hook
+ *
+ * Syncs PhontSubtitles with any video player via PlayerAdapter
+ * This hook bridges the gap between player-agnostic adapters and React components
+ */
+
+interface UsePlayerSyncOptions {
+    player: PlayerAdapter | null;
+    updateInterval?: number;
+}
+interface UsePlayerSyncResult {
+    currentTime: number;
+    isPlaying: boolean;
+}
+/**
+ * Hook to sync with any video player via PlayerAdapter
+ *
+ * @example
+ * ```tsx
+ * const adapter = new HTML5VideoAdapter(videoRef.current);
+ * const { currentTime, isPlaying } = usePlayerSync({ player: adapter });
+ *
+ * <PhontSubtitles
+ *   vodId={vodId}
+ *   currentTime={currentTime}
+ *   isPlaying={isPlaying}
+ *   // ... other props
+ * />
+ * ```
+ */
+declare function usePlayerSync(options: UsePlayerSyncOptions): UsePlayerSyncResult;
+
+interface UseVideoPlayerOptions {
+    /** HTML5 video element */
+    video?: HTMLVideoElement | null;
+    /** Bitmovin player instance */
+    bitmovin?: BitmovinPlayer | null;
+    /** Bitmovin video element (optional, will try to get from player container if not provided) */
+    bitmovinVideo?: HTMLVideoElement | null;
+    /** Shaka player instance */
+    shaka?: ShakaPlayer | null;
+    /** Shaka video element (optional, will try to get from player if not provided) */
+    shakaVideo?: HTMLVideoElement | null;
+    /** Video.js player instance */
+    videojs?: VideoJSPlayer | null;
+    /** Video.js video element (optional, will try to get from player if not provided) */
+    videojsVideo?: HTMLVideoElement | null;
+    /** 3Q Video Player instance */
+    threeq?: ThreeQPlayer | null;
+    /** 3Q container element (optional, will try to get video from player container if not provided) */
+    threeqContainer?: HTMLElement | null;
+    /** 3Q video element (optional, will auto-detect from container if not provided) */
+    threeqVideo?: HTMLVideoElement | null;
+    /** Custom player adapter (for advanced use cases) */
+    adapter?: PlayerAdapter | null;
+    /** Custom update interval in ms (optional, uses player events by default) */
+    updateInterval?: number;
+}
+/**
+ * Automatically creates the right adapter and syncs with your video player.
+ *
+ * Just pass your player instance and get back currentTime and isPlaying.
+ * Works with HTML5, Bitmovin, Shaka, Video.js, 3Q Video Player, or any custom adapter.
+ */
+declare function useVideoPlayer(options: UseVideoPlayerOptions): UsePlayerSyncResult;
+
+/**
+ * PhontVideoPlayer Component
+ *
+ * All-in-one component that combines video player + PHONT subtitles.
+ * The easiest way to add expressive subtitles to any video player.
+ *
+ * @example
+ * ```tsx
+ * // HTML5 Video
+ * <PhontVideoPlayer
+ *   videoRef={videoRef}
+ *   vodId="your-vod-id"
+ *   phontClient={client}
+ * />
+ *
+ * // Bitmovin
+ * <PhontVideoPlayer
+ *   bitmovin={bitmovinPlayer}
+ *   vodId="your-vod-id"
+ *   phontClient={client}
+ * />
+ *
+ * // 3Q Video Player (video element auto-detected)
+ * <PhontVideoPlayer
+ *   threeq={threeqPlayer}
+ *   vodId="your-vod-id"
+ *   phontClient={client}
+ * />
+ * ```
+ */
+
+interface PhontVideoPlayerProps extends Omit<PhontSubtitlesProps, 'currentTime' | 'isPlaying'> {
+    /** HTML5 video element ref */
+    video?: HTMLVideoElement | null;
+    /** Bitmovin player instance */
+    bitmovin?: BitmovinPlayer | null;
+    /** Shaka player instance */
+    shaka?: ShakaPlayer | null;
+    /** Video.js player instance */
+    videojs?: VideoJSPlayer | null;
+    /** 3Q Video Player instance */
+    threeq?: ThreeQPlayer | null;
+    /** 3Q container element (optional, will try to get video from player container if not provided) */
+    threeqContainer?: HTMLElement | null;
+    /** 3Q video element (optional, will auto-detect from container if not provided) */
+    threeqVideo?: HTMLVideoElement | null;
+    /** Custom player adapter (for advanced use cases) */
+    adapter?: PlayerAdapter | null;
+    /** Custom update interval in ms */
+    updateInterval?: number;
+    /** Children to render (your video player UI) */
+    children?: React.ReactNode;
+    /** Subtitle container className */
+    subtitleClassName?: string;
+    /** Subtitle container style */
+    subtitleStyle?: React.CSSProperties;
+}
+/**
+ * All-in-one component for video + PHONT subtitles.
+ *
+ * Automatically syncs with your video player and renders subtitles.
+ * Works with HTML5, Bitmovin, Shaka, Video.js, 3Q Video Player, or any custom adapter.
+ */
+declare function PhontVideoPlayer(props: PhontVideoPlayerProps): React.JSX.Element;
+
+interface PositionConfig {
+    bottomVh: number;
+    bottomVhNoSpeaker: number;
+    mobileBottomVh: number;
+    mobileBottomVhNoSpeaker: number;
+    zIndex: number;
+    width: number | string;
+    mobileWidth: string;
+    maxMobileWidth: number | string;
+    height: number | string;
+}
+
+interface SoundbiteContainerProps {
+    isVodMode?: boolean;
+    boxSize?: number;
+    width?: string | number | null;
+    height?: string | number | null;
+    bottomVh?: number | null;
+    intensity?: number;
+    hideWhenPanelsOpen?: boolean;
+    isMetaPanelOpen?: boolean;
+    isPhontControlsOpen?: boolean;
+    config?: Partial<PositionConfig>;
+}
+declare function SoundbiteContainer({ isVodMode, boxSize, width, height, bottomVh, intensity, hideWhenPanelsOpen, isMetaPanelOpen, isPhontControlsOpen, config }: SoundbiteContainerProps): React.JSX.Element | null;
+
+/**
+ * PlayerTestSuite - Standalone Test Component
+ *
+ * A single importable React component that tests all video players with PHONT subtitles.
+ * Can be imported into any React app (Next.js, Vite, Create React App, etc.)
+ *
+ * Usage:
+ * ```tsx
+ * import { PlayerTestSuite } from '@phont-ai/subtitles';
+ *
+ * function App() {
+ *   return <PlayerTestSuite />;
+ * }
+ * ```
+ *
+ * This component includes:
+ * - Authentication UI
+ * - Player selector (HTML5, Bitmovin, Shaka, 3Q)
+ * - Subtitle controls (mode, VOD selection)
+ * - Real-time player state display
+ */
+
+type PlayerType = 'html5' | 'bitmovin' | 'shaka' | 'threeq' | 'vanilla-js';
+interface PlayerTestSuiteProps {
+    /** Default VOD ID to use (PHONT VOD ID for subtitles) */
+    defaultVodId?: string;
+    /** Default player to show */
+    defaultPlayer?: PlayerType;
+    /** Custom API endpoint (optional) */
+    apiEndpoint?: string;
+    /** Bitmovin license key (optional - can also be set via NEXT_PUBLIC_BITMOVIN_LICENSE_KEY env var) */
+    bitmovinLicenseKey?: string;
+    /** 3Q dataid (playoutId) - if provided, will be used for 3Q player instead of defaultVodId */
+    threeqDataId?: string;
+}
+declare function PlayerTestSuite({ defaultVodId, // Default to Pooh_Compilation
+defaultPlayer, apiEndpoint, bitmovinLicenseKey: propBitmovinLicenseKey, threeqDataId, }: PlayerTestSuiteProps): React.JSX.Element;
+
+/**
+ * AnimationConfigProvider
+ *
+ * Provides access to EMOTION_ANIMATIONS (function-based animation system).
+ * Now uses function-based animations instead of URL-based system.
+ *
+ * @example
+ * ```tsx
+ * <AnimationConfigProvider>
+ *   <PhontSubtitles vodId="..." currentTime={...} />
+ * </AnimationConfigProvider>
+ * ```
+ */
+
+interface AnimationConfigContextValue {
+    emotionAnimations: typeof EMOTION_ANIMATIONS;
+}
+interface AnimationConfigProviderProps {
+    children: ReactNode;
+}
+type EmotionAnimationUrls = Record<string, string>;
+/**
+ * Provider component for animation config (now using function-based EMOTION_ANIMATIONS)
+ */
+declare function AnimationConfigProvider({ children, }: AnimationConfigProviderProps): React.JSX.Element;
+/**
+ * Hook to access animation config
+ */
+declare function useAnimationConfig(): AnimationConfigContextValue;
+
+/**
+ * Animation Mode Toggle Component
+ * SDK version - Switches between Word and Sentence animation modes
+ * Matches app/components/phont-controls/AnimationModeToggle.jsx
+ */
+
+type AnimationMode = 'Word' | 'Sentence';
+interface AnimationModeToggleProps {
+    animationMode: AnimationMode;
+    setAnimationMode: (mode: AnimationMode) => void;
+}
+declare function AnimationModeToggle({ animationMode, setAnimationMode, }: AnimationModeToggleProps): React.JSX.Element;
+
+/**
+ * Phont Controls - Composition Component
+ * SDK version - Aggregates all Phont subtitle controls (GTS, Translation, Mode, Toggles, Animation Config)
+ * Matches app/components/phont-controls/PhontControls.jsx but with additional animation controls and settings panel
+ */
+
+interface PhontControlsProps {
+    isVisible?: boolean;
+    controlsVisible?: boolean;
+    onControlsVisibilityChange?: (visible: boolean) => void;
+    isLive?: boolean;
+    currentVideoId?: string | null;
+    gts: number;
+    setGTS: (value: number) => void;
+    subtitleLanguage?: string | null;
+    availableLanguages?: Record<string, string>;
+    currentSubtitleLanguage?: string | null;
+    handleLanguageChange?: (language: string | null) => void;
+    isTranslating?: boolean;
+    translatingToLanguage?: string | null;
+    translationProvider?: string;
+    translationModel?: string;
+    animationMode: AnimationMode;
+    setAnimationMode: (mode: AnimationMode) => void;
+    toggles: boolean[];
+    handleToggle: (index: number) => void;
+    customAnimationUrl?: string;
+    setCustomAnimationUrl?: (url: string) => void;
+    emotionMappings?: Partial<EmotionAnimationUrls>;
+    setEmotionMappings?: (mappings: Partial<EmotionAnimationUrls>) => void;
+    showSettingsPanel?: boolean;
+    selectedPlayer?: string;
+    setSelectedPlayer?: (player: string) => void;
+    players?: Array<{
+        type: string;
+        name: string;
+    }>;
+    vodId?: string;
+    setVodId?: (vodId: string) => void;
+    vods?: Array<{
+        _id: string;
+        name?: string;
+    }>;
+    onLogout?: () => void;
+    username?: string | null;
+}
+declare function PhontControls({ isVisible, controlsVisible: externalControlsVisible, onControlsVisibilityChange, isLive, currentVideoId, gts, setGTS, subtitleLanguage, availableLanguages, currentSubtitleLanguage, handleLanguageChange, isTranslating, translatingToLanguage, translationProvider, translationModel, animationMode, setAnimationMode, toggles, handleToggle, customAnimationUrl, setCustomAnimationUrl, emotionMappings, setEmotionMappings, showSettingsPanel, selectedPlayer, setSelectedPlayer, players, vodId, setVodId, vods, onLogout, username, }: PhontControlsProps): React.JSX.Element | null;
+
+/**
+ * GTS (Global Tone & Style) Slider Component
+ * SDK version - Controls emotion threshold and expressiveness (max expression)
+ * Matches app/components/phont-controls/GTSSlider.jsx
+ */
+
+interface GTSSliderProps {
+    gts: number;
+    setGTS: (value: number) => void;
+    threshold: number;
+    maxExpression: number;
+}
+declare function GTSSlider({ gts, setGTS, threshold, maxExpression }: GTSSliderProps): React.JSX.Element;
+
+/**
+ * Translation Dropdown Component
+ * SDK version - Allows users to switch subtitle language (VOD only)
+ * Matches app/components/phont-controls/TranslationDropdown.jsx
+ */
+
+interface TranslationDropdownProps {
+    subtitleLanguage: string | null;
+    availableLanguages: Record<string, string>;
+    currentSubtitleLanguage: string | null;
+    onLanguageChange: (language: string | null) => void;
+    isTranslating?: boolean;
+    translatingToLanguage?: string | null;
+    translationProvider?: string;
+    translationModel?: string;
+}
+declare function TranslationDropdown({ subtitleLanguage, availableLanguages, currentSubtitleLanguage, onLanguageChange, isTranslating, translatingToLanguage, translationProvider, translationModel, }: TranslationDropdownProps): React.JSX.Element;
+
+/**
+ * Reusable Toggle Switch Component
+ * SDK version - Used for Speaker, Closed Captions, and other binary settings
+ * Matches app/components/phont-controls/ToggleSwitch.jsx
+ */
+
+interface ToggleSwitchProps {
+    isOn: boolean;
+    label: string;
+    onToggle: () => void;
+}
+declare function ToggleSwitch({ isOn, label, onToggle }: ToggleSwitchProps): React.JSX.Element;
+
+/**
+ * Animation URL Config Component
+ * Allows users to configure custom animation URLs and emotion mappings
+ */
+
+interface AnimationUrlConfigProps {
+    customAnimationUrl: string;
+    setCustomAnimationUrl: (url: string) => void;
+    emotionMappings: Partial<EmotionAnimationUrls>;
+    setEmotionMappings: (mappings: Partial<EmotionAnimationUrls>) => void;
+}
+declare function AnimationUrlConfig({ customAnimationUrl, setCustomAnimationUrl, emotionMappings, setEmotionMappings, }: AnimationUrlConfigProps): React.JSX.Element;
+
+/**
+ * React Client Factory
+ *
+ * Creates a PhontClient instance for use in React components
+ */
+
+declare function createPhontClient(config: PhontClientConfig): PhontClient;
+
+export { AnimationConfigProvider, type AnimationConfigProviderProps, type AnimationMode, AnimationModeToggle, type AnimationModeToggleProps, AnimationUrlConfig, type AnimationUrlConfigProps, type BitmovinPlayer, BitmovinPlayerAdapter, type EmotionAnimationUrls, GTSSlider, type GTSSliderProps, HTML5VideoAdapter, type PhontClientConfig, PhontControls, type PhontControlsProps, PhontSubtitles, type PhontSubtitlesProps, PhontVideoPlayer, type PhontVideoPlayerProps, type PlayerAdapter, PlayerTestSuite, type PlayerTestSuiteProps, type PlayerType, SDKAuth, type SDKAuthProps, type SDKAuthState, type ShakaPlayer, ShakaPlayerAdapter, SoundbiteContainer, type ThreeQPlayer, ThreeQPlayerAdapter, ToggleSwitch, type ToggleSwitchProps, TranslationDropdown, type TranslationDropdownProps, type UsePlayerSyncOptions, type UsePlayerSyncResult, type UseSDKAnimationOptions, type UseVideoPlayerOptions, type VideoJSPlayer, VideoJSPlayerAdapter, createPhontClient, useAnimationConfig, usePlayerSync, useSDKAnimation, useSDKAuth, useVideoPlayer };