@devix-technologies/react-gjirafa-vp-player 1.0.31-beta.1 → 1.0.31-beta.11

package/dist/index.d.ts

@@ -1,71 +1,210 @@
 import { CurrentVideoData as CurrentVideoData_2 } from '../../../../../../../src/types';
-import { default as default_2 } from 'react';
 import { DetailedHTMLProps } from 'react';
+import { ForwardRefExoticComponent } from 'react';
 import { HTMLAttributes } from 'react';
-import { JSX } from 'react/jsx-runtime';
-import { PlayerEventCallbacks as PlayerEventCallbacks_2 } from '../../../../../../../src/types';
-import { PlayerTrackingMetadata as PlayerTrackingMetadata_2 } from '../../../../../../../src/types';
-import { PlaylistItem as PlaylistItem_2 } from '../../../../../../../src/types';
+import { RefAttributes } from 'react';
 import { RefObject } from 'react';
 import { StyledComponent } from '@emotion/styled';
 import { Theme } from '@emotion/react';
-import { VPPlayerConfig as VPPlayerConfig_2 } from '../../../../../../../src/interfaces';
-import { VPPlayerConfig as VPPlayerConfig_3 } from '../../../../../../../src/interfaces/config';
 import { VPPlayerInstance as VPPlayerInstance_2 } from '../../../../../../../src/interfaces';
 import { VPPlayerProps as VPPlayerProps_2 } from '../../../../../../../src/interfaces';
+import { VPPlayerRef as VPPlayerRef_2 } from '../../../../../../../src/interfaces';
 
-/** Ad tag URL for linear ads */
-export declare const AD_TAG_LINEAR_URL = "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator=";
+/**
+ * Ad announcement configuration
+ */
+export declare interface AdAnnouncementConfig {
+    state: boolean;
+    timeBeforeAd: number;
+}
 
-/** Ad tag URL for skippable linear ads */
-export declare const AD_TAG_SKIPPABLE_LINEAR_URL = "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dskippablelinear&correlator=";
+/**
+ * Ad break configuration
+ */
+export declare interface AdBreak {
+    adTagUrl: string[];
+    breakType: "preroll" | "midroll" | "postroll";
+    breakTimingType: "time" | "percentage" | "playlist";
+    breakTimingValue: number;
+}
 
 /**
- * Base configuration for VP Player with common settings.
+ * Ad function configuration
  */
-export declare const baseConfig: Partial<VPPlayerConfig_3>;
+export declare interface AdFunction {
+    isDynamicKey: boolean;
+    isDynamicValue: boolean;
+    key: string;
+    order: number;
+    value: string;
+}
 
 /**
- * Base configuration for ads with common ad settings.
+ * Advertising configuration
  */
-export declare const baseConfigWithAds: Partial<VPPlayerConfig_3>;
+export declare interface AdsConfig {
+    skipAd?: AdSkipConfig;
+    vmap?: string;
+    VPAIDmode?: string;
+    enableProgrammability?: boolean;
+    functions?: AdFunction[];
+    bidding?: boolean;
+    afterMidrollBacktrack?: AfterMidrollBacktrack;
+    adBreaks?: AdBreak[];
+    bidders?: BidderConfig[];
+}
 
 /**
- * Base configuration with autoplay enabled.
+ * Ad skip configuration
  */
-export declare const baseConfigWithAutoplay: Partial<VPPlayerConfig_3>;
+export declare interface AdSkipConfig {
+    state: boolean;
+    skipFrom: number;
+}
 
-/** URL for the Big Buck Bunny video */
-export declare const BIG_BUCK_BUNNY_URL = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";
+/**
+ * Ads localization
+ */
+export declare interface AdsLang {
+    ad?: string;
+    skip?: string;
+    skipIn?: string;
+    visit?: string;
+    info?: string;
+    simultaneousAds?: string;
+}
 
 /**
- * Builds the final VP Player configuration based on available data.
- *
- * For vertical player with playlist, BOTH video.file AND video.playlist are needed.
- * The video.file should contain the URL of the current/first video to play.
- *
- * @function
- * @param {ConfigBuilderOptions} options - Options for building the configuration
- * @returns {VPPlayerConfig} - The final configuration object for the player
- * @throws {Error} - Throws error if no valid video source is found
+ * After midroll backtrack configuration
  */
-export declare const buildVPPlayerConfig: ({ videoUrl, projectId, config, isVerticalPlayer, pureMode, }: ConfigBuilderOptions) => VPPlayerConfig_2;
+export declare interface AfterMidrollBacktrack {
+    state: boolean;
+    seconds: number;
+}
 
 /**
- * Interface for options used in building the VP Player configuration.
+ * Appends the divId query parameter to a script URL.
+ * This tells the managed script which DOM element to use as the player container.
  *
- * @interface ConfigBuilderOptions
+ * @param url - The base script URL
+ * @param divId - The DOM element ID for the player container
+ * @returns The URL with ?divId= parameter appended
+ * @example
+ * appendDivIdToUrl('https://host.vpplayer.tech/player/ptkzurnx/vjsobqhe.js', 'my-player')
+ * // Returns: 'https://host.vpplayer.tech/player/ptkzurnx/vjsobqhe.js?divId=my-player'
  */
-declare interface ConfigBuilderOptions {
-    videoUrl?: string;
-    projectId?: string;
-    config?: Partial<VPPlayerConfig_2>;
-    isVerticalPlayer?: boolean;
-    /**
-     * When true, skips all wrapper defaults and passes only minimal config to the SDK.
-     * Use this to let the GTech admin panel settings be the source of truth.
-     */
-    pureMode?: boolean;
+export declare const appendDivIdToUrl: (url: string, divId: string) => string;
+
+/**
+ * Autopause on viewable configuration
+ */
+export declare interface AutopauseOnViewableConfig {
+    state: boolean;
+    percentageViewable?: number;
+}
+
+/**
+ * Autoplay toggle skin
+ */
+export declare interface AutoplaySkin {
+    autoplayOn?: string;
+    autoplayOff?: string;
+}
+
+/**
+ * Autostart on load configuration
+ */
+export declare interface AutostartOnLoadConfig {
+    state: boolean;
+    onMobile?: boolean;
+    onData?: boolean;
+}
+
+/**
+ * Autostart on viewable configuration
+ */
+export declare interface AutostartOnViewableConfig {
+    state: boolean;
+    onMobile?: boolean;
+    onData?: boolean;
+    percentageViewable?: number;
+}
+
+/**
+ * Bidder configuration
+ */
+export declare interface BidderConfig {
+    name: string;
+    params: Record<string, string>;
+}
+
+/**
+ * Control bar skin configuration
+ */
+export declare interface ControlBarSkin {
+    background?: string;
+    text?: string;
+    icons?: IconsSkin;
+    timeslider?: TimesliderSkin;
+    volume?: VolumeSkin;
+    timesliderOnAd?: TimesliderSkin;
+}
+
+/**
+ * Controls visibility configuration
+ */
+export declare interface ControlsConfig {
+    theaterButton?: boolean;
+    settingsButton?: boolean;
+    chromecastButton?: boolean;
+    nextButton?: boolean;
+    fullscreenButton?: boolean;
+    airplayButton?: boolean;
+    bigPlayButton?: boolean;
+    pictureInPictureButton?: boolean;
+    relatedButton?: boolean;
+    volumeButton?: boolean;
+    shareButton?: boolean;
+    subtitlesButton?: boolean;
+    showCaptions?: boolean;
+    audioOnlyButton?: boolean;
+    rewindButton?: boolean;
+    forwardButton?: boolean;
+    chaptersButton?: boolean;
+    showHelperButton?: boolean | null;
+    helperButtonImage?: string;
+    showLiveIcon?: boolean | null;
+    delayLiveVideosTime?: number;
+    delayLiveVideos?: boolean | null;
+    showAutoPlay?: boolean | null;
+    showQualities?: boolean | null;
+}
+
+/**
+ * Controls localization
+ */
+export declare interface ControlsLang {
+    play?: string;
+    pause?: string;
+    next?: string;
+    replay?: string;
+    volume?: string;
+    mute?: string;
+    unmute?: string;
+    settings?: string;
+    theater?: string;
+    fullscreen?: string;
+    chromecast?: string;
+    airplay?: string;
+    pictureInPicture?: string;
+    related?: string;
+    skipIntro?: string;
+    skipAd?: string;
+    adAnnouncement?: string;
+    playlistTitle?: string;
+    upNext?: string;
+    live?: string;
+    continueAfterPause?: string;
 }
 
 /**
@@ -94,44 +233,179 @@ export declare interface CurrentVideoData {
 }
 
 /**
- * Default configuration object for the VP Player.
- *
- * NOTE: Intentionally minimal defaults to avoid interfering with managed mode.
- * When using videoId + projectId (managed mode), the SDK fetches video details
- * from the backend. Providing empty `file` or `playlist` can break this flow.
+ * VP Player Configuration Types
  *
- * @constant
- * @type {VPPlayerConfig}
- * @see {@link https://vp.gjirafa.tech/documentation/docs/web-player/setup-the-player/configuration}
+ * Fully typed configuration based on VP Player documentation.
+ * @see {@link https://vp.gjirafa.tech/documentation/docs/web-player/setup-the-player/full-configuration}
+ * @see {@link https://vp.gjirafa.tech/documentation/docs/vertical-player/setup-the-player/configration}
+ */
+/**
+ * Deep partial utility type - makes all nested properties optional
  */
-export declare const defaultVPPlayerConfig: VPPlayerConfig;
+export declare type DeepPartial<T> = T extends object ? {
+    [P in keyof T]?: DeepPartial<T[P]>;
+} : T;
 
-/** URL for the Elephants Dream video */
-export declare const ELEPHANTS_DREAM_URL = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4";
+/**
+ * Event callback refs interface for internal use
+ * Prevents stale closures in event handlers
+ */
+export declare interface EventCallbackRefs {
+    onReady?: (data?: CurrentVideoData_2) => void;
+    onPlay?: (data?: CurrentVideoData_2) => void;
+    onPause?: () => void;
+    onResume?: () => void;
+    onComplete?: () => void;
+    onError?: (error: string) => void;
+    onVideoStarted?: (data: CurrentVideoData_2) => void;
+    onTimeUpdate?: (seconds: number) => void;
+    onQuartile25?: () => void;
+    onQuartile50?: () => void;
+    onQuartile75?: () => void;
+    onNext?: () => void;
+    onPrevious?: () => void;
+    onProgress10s?: (seconds: number) => void;
+    onProgress20s?: (seconds: number) => void;
+}
+
+/**
+ * Float (picture-in-picture) configuration
+ */
+export declare interface FloatConfig {
+    state: boolean;
+    onMobile?: boolean;
+    position?: "TOP_LEFT" | "TOP_RIGHT" | "BOTTOM_LEFT" | "BOTTOM_RIGHT";
+    dismissible?: boolean;
+    requiresInteraction?: boolean;
+    toVideoThreshold?: number;
+    toFloatThreshold?: number;
+    style?: FloatStyleConfig;
+}
 
 /**
- * Extracts the video ID from a given VP Player script URL.
+ * Float style configuration
+ */
+export declare interface FloatStyleConfig {
+    width: number;
+    border?: string;
+}
+
+/**
+ * Generates a full player DOM element ID based on provided playerId and videoId.
+ * Falls back to "default" if playerId is not provided.
  *
- * IMPORTANT: Only extracts from HORIZONTAL player URLs.
- * Vertical player URLs contain a player script ID, NOT a video ID.
- * - Horizontal: ${VP_PLAYER_BASE_URL}/player/{version}/{videoId}.js -> extracts videoId
- * - Vertical: ${VP_PLAYER_BASE_URL}/vertical-player/{scriptId}.js -> returns undefined
+ * @param playerId - Base identifier for the player.
+ * @param videoId - Optional video identifier.
+ * @returns Full DOM element ID string.
+ */
+export declare const generatePlayerId: (playerId?: string, videoId?: string) => string;
+
+/**
+ * Generates the URL for a FULLY managed video-specific player script.
+ * This script auto-initializes with all config from GTech admin panel -
+ * NO .setup() call needed! Chapters, ads, controls, etc. are all pre-configured.
  *
- * @function
- * @param {string} [scriptUrl] - The script URL containing the video ID.
- * @returns {string | undefined} The extracted video ID, or `undefined` if not found or if vertical player.
+ * @param {string} scriptId - The player script ID (e.g., 'ptkzurnx').
+ * @param {string} videoId - The video ID (e.g., 'vjsobqhe').
+ * @returns {string} - The complete URL for the fully managed player script.
+ * @example
+ * // Returns: https://host.vpplayer.tech/player/ptkzurnx/vjsobqhe.js
+ * getFullyManagedPlayerScriptUrl('ptkzurnx', 'vjsobqhe')
+ */
+export declare const getFullyManagedPlayerScriptUrl: (scriptId: string, videoId: string) => string;
+
+/**
+ * Generates the URL for loading a managed VP Player script (Web Player).
+ * This script requires calling .setup() with your config.
+ * @param {string} scriptId - The unique script ID (e.g., 'ptkzurly').
+ * @returns {string} - The complete URL for the managed player script.
+ */
+export declare const getManagedPlayerScriptUrl: (scriptId: string) => string;
+
+/**
+ * Generates the URL for loading the standard VP Player script by version.
+ * @param {string} playerVersion - The version of the VP Player script (e.g., 'latest', 'v2.1.1').
+ * @returns {string} - The complete URL for the player script.
  */
-export declare const extractVideoId: (scriptUrl?: string) => string | undefined;
+export declare const getPlayerScriptUrl: (playerVersion: string) => string;
 
 /**
- * Generates an ad configuration for VP Player based on provided parameters.
- * @param breakType - The type of ad break (e.g., "preroll", "postroll", "midroll").
- * @param adTagUrls - Array of ad tag URLs to use for the ad break.
- * @param breakTimingType - The timing type for the ad break (e.g., "time", "percentage", "playlist").
- * @param breakTimingValue - The timing value for the ad break (e.g., 0 for immediate, 2 for playlist index).
- * @returns A partial VPPlayerConfig with the ad configuration.
+ * Generates the URL for loading a vertical VP Player script.
+ * @param {string} scriptId - The unique script ID (e.g., 'rbqcdwzlg').
+ * @returns {string} - The complete URL for the vertical player script.
  */
-export declare const getAdConfig: (breakType: "preroll" | "postroll" | "midroll", adTagUrls: string[], breakTimingType?: "time" | "percentage" | "playlist", breakTimingValue?: number) => Partial<VPPlayerConfig_3>;
+export declare const getVerticalPlayerScriptUrl: (scriptId: string) => string;
+
+/**
+ * Icons skin configuration
+ */
+export declare interface IconsSkin {
+    default?: string;
+    hover?: string;
+}
+
+/**
+ * Full localization configuration
+ */
+export declare interface LangConfig {
+    locale?: string;
+    controls?: ControlsLang;
+    settings?: SettingsLang;
+    ads?: AdsLang;
+}
+
+/**
+ * Logo configuration
+ */
+export declare interface LogoConfig {
+    state: boolean;
+    file?: string;
+    position?: "TOP_LEFT" | "TOP_RIGHT" | "BOTTOM_LEFT" | "BOTTOM_RIGHT";
+    defaultOpacity?: number;
+    inactiveOpacity?: number;
+    onClickURL?: string;
+}
+
+/**
+ * Menu background skin
+ */
+export declare interface MenuBackgroundSkin {
+    default?: string;
+    hover?: string;
+}
+
+/**
+ * Menu links skin
+ */
+export declare interface MenuLinksSkin {
+    default?: string;
+    hover?: string;
+}
+
+/**
+ * Menus skin configuration
+ */
+export declare interface MenusSkin {
+    background?: MenuBackgroundSkin;
+    links?: MenuLinksSkin;
+    autoplay?: AutoplaySkin;
+}
+
+/**
+ * Next video skin configuration
+ */
+export declare interface NextVideoSkin {
+    background?: string;
+    text?: string;
+    timeslider?: {
+        rail?: string;
+        progress?: string;
+    };
+    icons?: {
+        play?: PlayIconSkin;
+        close?: string;
+    };
+}
 
 /**
  * Styled component for the full-screen overlay when the player is active.
@@ -146,12 +420,6 @@ as?: React.ElementType;
 className?: string;
 }, DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 
-/** URL for the Pexels thumbnail */
-export declare const PEXELS_THUMBNAIL_URL = "https://images.pexels.com/videos/4678261/pexels-photo-4678261.jpeg?auto=compress&cs=tinysrgb&w=600";
-
-/** URL for the Pexels vertical video */
-export declare const PEXELS_VERTICAL_VIDEO_URL = "https://videos.pexels.com/video-files/4678261/4678261-hd_1080_1920_25fps.mp4";
-
 /**
  * Styled component for the video player container.
  *
@@ -232,52 +500,33 @@ export declare interface PlayerObject {
 }
 
 /**
- * Interface defining the parameters for configuring the VP Player instance.
- *
- * @interface
- */
-export declare interface PlayerParams {
-    playerId: string;
-    config?: Partial<VPPlayerConfig>;
-    videoId?: string;
-    projectId?: string;
-    videoUrl?: string;
-    playlistId?: string;
-    scriptUrl?: string;
-    version?: string | null;
-    thumbnailUrl?: string;
-    isReels?: boolean;
-    hiddenClasses?: string[];
-    className?: string;
-    /**
-     * When true (default), skips all wrapper defaults and passes only minimal config to the SDK.
-     * This lets the GTech admin panel settings be the source of truth for
-     * controls, autoplay, muted, size, and other configuration.
-     * Set to false to use legacy behavior with wrapper defaults.
-     * @default true
-     */
-    pureMode?: boolean;
-    onPlaylistData?: (videos: PlaylistItem_2[]) => void;
-}
-
-/**
- * Interface defining the parameters for initializing the VPPlayer.
- *
- * @interface PlayerParams
+ * Player settings configuration (the `config` object in VP Player)
  */
-declare interface PlayerParams_2 {
-    playerId?: string;
-    videoId?: string;
-    projectId?: string;
-    videoUrl?: string;
-    playlistId?: string;
-    scriptUrl?: string;
-    version?: string | null;
-    config?: VPPlayerProps_2["config"];
-    thumbnailUrl?: string;
-    isReels?: boolean;
-    hiddenClasses?: string[];
-    className?: string;
+export declare interface PlayerSettingsConfig {
+    configId?: string;
+    size?: SizeConfig;
+    adAnnouncement?: AdAnnouncementConfig;
+    autoplay?: boolean;
+    autostartOnLoad?: AutostartOnLoadConfig;
+    autostartOnViewable?: AutostartOnViewableConfig;
+    autopauseOnViewable?: AutopauseOnViewableConfig;
+    pauseOtherVideos?: boolean;
+    focusOnAutostart?: boolean;
+    showRelatedOnPause?: ShowRelatedOnPauseConfig;
+    playbackRates?: number[];
+    volume?: number;
+    muted?: boolean;
+    loop?: boolean;
+    casting?: boolean;
+    debug?: boolean;
+    skipAmount?: number;
+    adsRequireInteraction?: boolean;
+    float?: FloatConfig;
+    controls?: ControlsConfig;
+    logo?: LogoConfig;
+    socialMedia?: unknown[];
+    lang?: LangConfig;
+    skin?: SkinConfig;
 }
 
 /**
@@ -306,6 +555,14 @@ as?: React.ElementType;
 className?: string;
 }, DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 
+/**
+ * Play icon skin
+ */
+export declare interface PlayIconSkin {
+    default?: string;
+    hover?: string;
+}
+
 /**
  * API response structure for fetching playlist data.
  *
@@ -315,6 +572,47 @@ export declare interface PlaylistApiResponse {
     result: PlaylistItem[];
 }
 
+/**
+ * Playlist arrows skin
+ */
+export declare interface PlaylistArrowsSkin {
+    active?: string;
+    inactive?: string;
+}
+
+/**
+ * Playlist card duration skin
+ */
+export declare interface PlaylistCardDurationSkin {
+    text?: string;
+    background?: string;
+}
+
+/**
+ * Playlist card skin
+ */
+export declare interface PlaylistCardSkin {
+    background?: string;
+    title?: string;
+    duration?: PlaylistCardDurationSkin;
+    icons?: {
+        play?: PlayIconSkin;
+    };
+}
+
+/**
+ * Playlist configuration
+ */
+export declare interface PlaylistConfig {
+    state: boolean;
+    playlistId: string;
+    playlistVideoIndex: number;
+    highlightCurrentVideo?: boolean;
+    algorithm?: string;
+    title?: string;
+    videos: PlaylistVideoConfig[];
+}
+
 /**
  * Represents an item in a video playlist.
  *
@@ -335,19 +633,99 @@ export declare interface PlaylistItem {
 }
 
 /**
- * Hook for accessing the VPPlayer context.
- *
- * @function
- * @throws {Error} If used outside of the VPPlayerProvider.
- * @returns {VPPlayerContextType} The VPPlayer context.
+ * Playlist skin configuration
+ */
+export declare interface PlaylistSkin {
+    background?: string;
+    text?: string;
+    icons?: {
+        arrows?: PlaylistArrowsSkin;
+        close?: string;
+    };
+    card?: PlaylistCardSkin;
+}
+
+/**
+ * Playlist video item in config
+ */
+export declare interface PlaylistVideoConfig {
+    videoId: string;
+    title: string;
+    file: string;
+    thumbnailUrl?: string;
+    duration?: number;
+}
+
+/**
+ * Settings localization
  */
-export declare const useVPPlayer: () => VPPlayerContextType_2;
+export declare interface SettingsLang {
+    quality?: string;
+    subtitles?: string;
+    autoplay?: string;
+    playbackRate?: string;
+    auto?: string;
+    off?: string;
+    normal?: string;
+    share?: string;
+}
 
 /**
- * Custom hook to manage VP Player logic.
- * Uses native SDK events instead of manual progress tracking.
+ * Show related on pause configuration
+ */
+export declare interface ShowRelatedOnPauseConfig {
+    state: boolean;
+    onMobile?: boolean;
+    from?: number;
+}
+
+/**
+ * Size configuration
+ */
+export declare interface SizeConfig {
+    sizeType: "RESPONSIVE" | "FIXED";
+    aspectRatio?: "16:9" | "9:16" | "4:3" | "1:1";
+    width?: number;
+    height?: number;
+}
+
+/**
+ * Full skin configuration
+ */
+export declare interface SkinConfig {
+    controlBar?: ControlBarSkin;
+    menus?: MenusSkin;
+    nextVideo?: NextVideoSkin;
+    playlist?: PlaylistSkin;
+}
+
+/**
+ * Skip intro configuration
+ */
+export declare interface SkipIntroConfig {
+    state: boolean;
+    skipFrom: number;
+    skipTo: number;
+}
+
+/**
+ * Timeslider skin configuration
+ */
+export declare interface TimesliderSkin {
+    progress?: string;
+    rail?: string;
+    buffer?: string | null;
+    dragger?: string;
+}
+
+/**
+ * VP Player logic hook
+ *
+ * Supports two modes:
+ * 1. **Auto-init mode** (default): Load managed script that auto-initializes with GTech admin config
+ * 2. **Config override mode**: Fetch config, merge user overrides, and call setup()
  */
-export declare const useVPPlayerLogic: ({ playerId, videoId: propVideoId, version, videoUrl, projectId, playlistId, scriptUrl, config, isReels, pureMode, onPlaylistData, onVideoStarted, onPlayerStart, onPlayerPlay, onPlayerPause, onPlayerResume, onPlayerEnd, onPlayerProgressEvery10Seconds, onPlayerProgressAt20Seconds, onPlayerQuartile25, onPlayerQuartile50, onPlayerQuartile75, onPlayerNext, onPlayerPrevious, onPlayerEvent, }: VPPlayerProps_2) => {
+export declare const useVPPlayerLogic: ({ scriptId, videoId, scriptUrl, projectId, config, playerId, isVertical, isReels, onReady, onPlay, onPause, onResume, onComplete, onError, onVideoStarted, onTimeUpdate, onQuartile25, onQuartile50, onQuartile75, onNext, onPrevious, onProgress10s, onProgress20s, }: VPPlayerProps_2) => {
     playerRef: RefObject<HTMLDivElement | null>;
     playerInstanceRef: RefObject<VPPlayerInstance_2 | null>;
     isScriptLoaded: boolean;
@@ -392,6 +770,33 @@ export declare interface VideoApiResponse {
     };
 }
 
+/**
+ * Video configuration
+ */
+export declare interface VideoConfig {
+    videoId?: string;
+    assetId?: string;
+    fpsCertificateUrl?: string;
+    widevineLicenseUrl?: string;
+    related?: string;
+    file?: string;
+    title?: string;
+    duration?: number;
+    description?: string;
+    live?: boolean;
+    liveType?: string;
+    thumbnail?: string;
+    filmstrip?: string;
+    tracks?: unknown[];
+    startTime?: number;
+    skipIntro?: SkipIntroConfig;
+    flags?: VideoFlag[];
+    playlist?: PlaylistConfig;
+    advertising?: boolean;
+    adId?: string;
+    ads?: AdsConfig;
+}
+
 /**
  * Result structure returned by the video data fetching logic.
  *
@@ -405,397 +810,132 @@ export declare interface VideoDataResult {
 }
 
 /**
- * Video Player Component for rendering a video player with overlay and responsive behavior.
- * Handles initialization of the player and displays loading/error states.
- *
- * @function
- * @param {VPPlayerProps} props - The properties for configuring the video player.
- * @param {string} props.playerId - Unique identifier for the player instance.
- * @param {string} [props.videoId] - ID of the video to be played.
- * @param {string} [props.version] - Version of the player.
- * @param {string} [props.videoUrl] - Direct video URL (bypasses API calls).
- * @param {string} [props.projectId] - Project ID associated with the video.
- * @param {string} [props.playlistId] - Playlist ID if playing a collection of videos.
- * @param {string} [props.scriptUrl] - URL of the video player script.
- * @param {object} [props.config={}] - Configuration settings for the player.
- * @param {boolean} [props.isReels=false] - Determines if the player should behave as a short-video reel.
- * @param {string[]} [props.hiddenClasses=[]] - CSS classes to hide player elements.
- * @param {function} [props.onClose] - Callback triggered when the player is closed.
- * @param {boolean} [props.isPlayerVisible=false] - Controls the initial visibility of the player.
- * @param {string} [props.className] - CSS class name for additional styling.
- * @param {function} [props.onPlaylistData] - Callback triggered when the playlist data is loaded.
- * @param {function} [props.onVideoStarted] - Callback triggered when the video starts playing.
- * @param {object} [props.trackingMetadata] - Video metadata for tracking/analytics callbacks.
- * @param {function} [props.onPlayerStart] - Callback triggered when the player starts playing.
- * @param {function} [props.onPlayerPlay] - Callback triggered when the player plays.
- * @param {function} [props.onPlayerPause] - Callback triggered when the player pauses.
- * @param {function} [props.onPlayerResume] - Callback triggered when the player resumes.
- * @param {function} [props.onPlayerEnd] - Callback triggered when the player ends.
- * @param {function} [props.onPlayerProgressEvery10Seconds] - Callback triggered every 10 seconds.
- * @param {function} [props.onPlayerProgressAt20Seconds] - Callback triggered at 20 seconds.
- * @param {function} [props.onPlayerQuartile25] - Callback triggered at 25% quartile.
- * @param {function} [props.onPlayerQuartile50] - Callback triggered at 50% quartile.
- * @param {function} [props.onPlayerQuartile75] - Callback triggered at 75% quartile.
- * @param {function} [props.onPlayerNext] - Callback triggered when the player goes to the next video.
- * @param {function} [props.onPlayerEvent] - Callback triggered for all events.
- * @param {boolean} [props.pureMode=true] - When true (default), skips wrapper defaults and uses GTech admin config.
- * @returns {JSX.Element} The rendered video player component.
- */
-export declare const VPPlayer: ({ playerId, videoId, version, videoUrl, projectId, playlistId, scriptUrl, config, isReels, pureMode, hiddenClasses, onClose, className, onPlaylistData, onVideoStarted, trackingMetadata, onPlayerStart, onPlayerPlay, onPlayerPause, onPlayerResume, onPlayerEnd, onPlayerProgressEvery10Seconds, onPlayerProgressAt20Seconds, onPlayerQuartile25, onPlayerQuartile50, onPlayerQuartile75, onPlayerNext, onPlayerPrevious, onPlayerEvent, }: VPPlayerProps_2 & {
-    className?: string;
-}) => JSX.Element;
+ * Video flag/tag
+ */
+export declare interface VideoFlag {
+    id: number;
+    name: string;
+}
 
 /**
- * Interface describing the advertising configuration options for the VP Player.
- *
- * @interface
- * @see {@link https://vp.gjirafa.tech/documentation/docs/web-player/setup-the-player/advertising}
+ * Volume skin configuration
  */
-export declare interface VPPlayerAdsConfig {
-    skipAd?: {
-        state: boolean;
-        skipFrom: number;
-    };
-    vmap?: string;
-    VPAIDmode?: string;
-    enableProgrammability?: boolean;
-    functions?: Array<{
-        isDynamicKey: boolean;
-        isDynamicValue: boolean;
-        key: string;
-        order: number;
-        value: string;
-    }>;
-    bidding?: boolean;
-    afterMidrollBacktrack?: {
-        state: boolean;
-        seconds: number;
-    };
-    adBreaks?: Array<{
-        adTagUrl: string[];
-        breakType?: 'preroll' | 'midroll' | 'postroll';
-        breakTimingType?: 'time' | 'percentage' | 'playlist';
-        breakTimingValue?: number;
-        schedule?: {
-            type?: 'CUSTOM' | 'RECURRING';
-            ranges?: Array<{
-                startTime?: number;
-                endTime?: number;
-                count?: number;
-                breaks?: number[];
-            }>;
-            algorithm?: 'PASSIVE' | 'AGGRESSIVE' | 'SIMILAR_DISTANCE' | 'CUSTOM';
-            protectFirst?: number;
-            protectLast?: number;
-            occurEvery?: number;
-            liveCount?: number;
-        };
-    }>;
-    bidders?: Array<{
-        name: string;
-        params?: Array<{
-            paramName?: string;
-            paramType?: string;
-            paramValue?: string;
-        }>;
-    }>;
-    adsRequireInteraction?: boolean;
+export declare interface VolumeSkin {
+    dragger?: string;
+    progress?: string;
+    rail?: string;
+    notifier?: string;
 }
 
 /**
- * Interface defining the configuration options for the VP Player.
- *
- * @interface
- * @see {@link https://vp.gjirafa.tech/documentation/docs/web-player/setup-the-player/configuration}
- * @see {@link https://vp.gjirafa.tech/documentation/docs/web-player/setup-the-player/playing}
- * @see {@link https://vp.gjirafa.tech/documentation/docs/web-player/setup-the-player/advertising}
- * @see {@link https://vp.gjirafa.tech/documentation/docs/web-player/setup-the-player/styling}
- * @see {@link https://vp.gjirafa.tech/documentation/docs/web-player/setup-the-player/localization}
- * @see {@link https://vp.gjirafa.tech/documentation/docs/web-player/setup-the-player/full-configuration}
+ * Base URL for the VP Player host.
  */
-export declare interface VPPlayerConfig {
-    projectId?: string;
-    videoId?: string;
-    categoryName?: string;
-    gemiusIdentifier?: string;
-    typology?: string;
-    video: {
-        videoId?: string;
-        ads?: VPPlayerAdsConfig;
-        advertising?: boolean;
-        videoLocking?: {
-            isEnabled: boolean;
-            type: string;
-            value: number;
-        };
-        file?: string;
-        title?: string;
-        description?: string;
-        publishDate?: string;
-        duration?: number;
-        preload?: string;
-        thumbnail?: string;
-        filmstrip?: string;
-        author?: string;
-        source?: string;
-        tags?: string[];
-        tracks?: Array<{
-            file: string;
-            label: string;
-            kind: string;
-            default?: boolean;
-        }>;
-        playlist?: {
-            state?: boolean;
-            playlistId?: string;
-            playlistVideoIndex?: number;
-            videos?: Array<{
-                videoId: string;
-                title: string;
-                thumbnailUrl?: string;
-                duration?: number;
-                file?: string;
-                hlsUrl?: string;
-            }>;
-        };
-    };
-    config: {
-        adAnnouncement?: {
-            state?: boolean;
-            timeBeforeAd?: number;
-        };
-        autostartOnLoad?: {
-            state?: boolean;
-            onMobile?: boolean;
-            onData?: boolean;
-        };
-        adsRequireInteraction?: boolean;
-        autoplay?: boolean;
-        pauseOtherVideos?: boolean;
-        focusOnAutostart?: boolean;
-        muted?: boolean;
-        loop?: boolean;
-        size?: {
-            sizeType?: string;
-            aspectRatio?: string;
-            width?: number | string;
-            height?: number | string;
-        };
-        showRelatedOnPause?: {
-            state?: boolean;
-            onMobile?: boolean;
-            from?: number;
-        };
-        float?: {
-            state: boolean;
-            onMobile: boolean;
-            position: string;
-            dismissible: boolean;
-            requiresInteraction: boolean;
-            toVideoThreshold: number;
-            toFloatThreshold: number;
-            style: {
-                width: number;
-                border: string;
-            };
-        };
-        controls?: {
-            theaterButton?: boolean;
-            settingsButton?: boolean;
-            chromecastButton?: boolean;
-            nextButton?: boolean;
-            fullscreenButton?: boolean;
-            airplayButton?: boolean;
-            bigPlayButton?: boolean;
-            autopausePlayButton?: boolean;
-            pictureInPictureButton?: boolean;
-            relatedButton?: boolean;
-            volumeButton?: boolean;
-            shareButton?: boolean;
-            subtitlesButton?: boolean;
-            showCaptions?: boolean;
-        };
-        logo?: {
-            state?: boolean;
-            file?: string;
-            position?: string;
-            defaultOpacity?: number;
-            inactiveOpacity?: number;
-            onClickURL?: string;
-        };
-        skin?: {
-            controlBar?: {
-                background?: string;
-                spread?: "solid" | "gradient";
-                gradientMidPoint?: number;
-                text?: string;
-                icons?: {
-                    default?: string;
-                    hover?: string;
-                };
-                timeslider?: {
-                    progress?: string;
-                    rail?: string;
-                    buffer?: string;
-                    dragger?: string;
-                };
-                timesliderOnAd?: {
-                    progress?: string;
-                    rail?: string;
-                    buffer?: string;
-                    dragger?: string;
-                };
-                volume?: {
-                    dragger?: string;
-                    progress?: string;
-                    rail?: string;
-                    notifier?: string;
-                };
-            };
-            menus?: {
-                background?: {
-                    default?: string;
-                    hover?: string;
-                };
-                links?: {
-                    default?: string;
-                    hover?: string;
-                };
-                autoplay?: {
-                    autoplayOn?: string;
-                    autoplayOff?: string;
-                };
-            };
-            nextVideo?: {
-                background?: string;
-                text?: string;
-                timeslider?: {
-                    rail?: string;
-                    progress?: string;
-                };
-                icons?: {
-                    play?: {
-                        default?: string;
-                        hover?: string;
-                    };
-                    close?: string;
-                };
-            };
-            playlist?: {
-                background?: string;
-                text?: string;
-                icons?: {
-                    arrows?: {
-                        active?: string;
-                        inactive?: string;
-                    };
-                    close?: string;
-                };
-                card?: {
-                    background?: string;
-                    title?: string;
-                    duration?: {
-                        text?: string;
-                        background?: string;
-                    };
-                    icons?: {
-                        play?: {
-                            default?: string;
-                            hover?: string;
-                        };
-                    };
-                };
-            };
-        };
-        lang?: {
-            locale?: string;
-            controls?: {
-                play?: string;
-                pause?: string;
-                next?: string;
-                replay?: string;
-                volume?: string;
-                mute?: string;
-                unmute?: string;
-                settings?: string;
-                theater?: string;
-                fullscreen?: string;
-                chromecast?: string;
-                airplay?: string;
-                pictureInPicture?: string;
-                related?: string;
-                skipIntro?: string;
-                skipAd?: string;
-                playlistTitle?: string;
-                upNext?: string;
-                live?: string;
-                continueAfterPause?: string;
-            };
-            settings?: {
-                quality?: string;
-                subtitles?: string;
-                autoplay?: string;
-                playbackRate?: string;
-                auto?: string;
-                off?: string;
-                normal?: string;
-                share?: string;
-            };
-            ads?: {
-                ad?: string;
-                skip?: string;
-                skipIn?: string;
-                visit?: string;
-                info?: string;
-                simultaneousAds?: string;
-                adAnnouncement?: string;
-            };
-            messages?: {
-                playbackErrorTitle?: string;
-                playbackErrorDescription?: string;
-                geoBlockedTitle?: string;
-                geoBlockedDescription?: string;
-                streamInterruptedTitle?: string;
-                streamInterruptedDescription?: string;
-            };
-        };
-        ads?: VPPlayerAdsConfig;
-    };
-}
+export declare const VP_PLAYER_BASE_URL = "https://host.vpplayer.tech";
 
 /**
- * Interface for the VP Player context, providing methods and state for controlling the player.
+ * VP Player Component
+ *
+ * A thin React wrapper for the GTech VP Player.
+ * Configuration can be managed through the GTech admin panel or via the `config` prop.
+ *
+ * ## Basic Usage
+ *
+ * ```tsx
+ * // Using scriptId + videoId (recommended)
+ * <VPPlayer
+ *   scriptId="ptkzurnx"
+ *   videoId="vjsobqhe"
+ *   onPlay={() => console.log('Playing!')}
+ * />
+ *
+ * // OR using full script URL
+ * <VPPlayer
+ *   scriptUrl="https://host.vpplayer.tech/player/ptkzurnx/vjsobqhe.js"
+ *   onPlay={() => console.log('Playing!')}
+ * />
+ * ```
+ *
+ * ## Using the ref for imperative control
+ *
+ * ```tsx
+ * const playerRef = useRef<VPPlayerRef>(null);
  *
- * @interface
+ * <VPPlayer
+ *   ref={playerRef}
+ *   scriptId="ptkzurnx"
+ *   videoId="vjsobqhe"
+ * />
+ *
+ * // Later:
+ * playerRef.current?.seek(60);
+ * playerRef.current?.play();
+ * console.log(playerRef.current?.getPosition());
+ * ```
+ *
+ * ## Config Override Mode
+ *
+ * Override the fetched configuration with custom settings:
+ *
+ * ```tsx
+ * <VPPlayer
+ *   scriptId="ptkzurnx"
+ *   videoId="vjsobqhe"
+ *   config={{
+ *     config: {
+ *       muted: true,
+ *       autoplay: true,
+ *       skin: {
+ *         controlBar: {
+ *           background: 'rgba(0,0,0,0.8)'
+ *         }
+ *       }
+ *     }
+ *   }}
+ * />
+ * ```
+ *
+ * ## Reels Mode
+ *
+ * For TikTok-style vertical videos with overlay:
+ *
+ * ```tsx
+ * <VPPlayer
+ *   scriptId="rbqcdwzlg"
+ *   videoId="vjsobqhe"
+ *   isReels={true}
+ *   thumbnailUrl="https://example.com/thumb.jpg"
+ *   onClose={() => console.log('Closed')}
+ * />
+ * ```
+ *
+ * @param props - VPPlayer configuration props
  */
-export declare interface VPPlayerContextType {
-    showPlayer: (params: PlayerParams) => void;
-    hidePlayer: () => void;
-    isPlayerVisible: boolean;
-    playerParams: PlayerParams | null;
-}
+export declare const VPPlayer: ForwardRefExoticComponent<VPPlayerProps_2 & RefAttributes<VPPlayerRef_2>>;
 
 /**
- * Interface defining the context for VPPlayer.
- *
- * @interface VPPlayerContextType
+ * Full VP Player configuration
+ * This is the root configuration object passed to vpPlayer().setup()
  */
-declare interface VPPlayerContextType_2 {
-    showPlayer: (params: PlayerParams_2) => void;
-    hidePlayer: () => void;
-    isPlayerVisible: boolean;
-    playerParams: PlayerParams_2 | null;
+export declare interface VPPlayerConfig {
+    projectId?: string;
+    biskoId?: string;
+    video?: VideoConfig;
+    config?: PlayerSettingsConfig;
 }
 
 /**
  * Interface representing an instance of the VP Player.
- * Based on VP Player API Reference: https://vp.gjirafa.tech/documentation/docs/web-player/api-reference
- * And VP Vertical Player API Reference: https://vp.gjirafa.tech/documentation/docs/vertical-player/api-reference
  *
- * @interface
+ * NOTE: The VP Player SDK does not ship with TypeScript types.
+ * This is our own type definition based on the official API documentation.
+ *
+ * @see https://vp.gjirafa.tech/documentation/docs/web-player/api-reference
+ * @see https://vp.gjirafa.tech/documentation/docs/vertical-player/api-reference
+ *
+ * @interface VPPlayerInstance
  */
 export declare interface VPPlayerInstance {
-    setup: (config: VPPlayerConfig) => void;
+    setup: (config: unknown) => void;
     destroy?: () => void;
     play?: () => void;
     pause?: () => void;
@@ -809,8 +949,6 @@ export declare interface VPPlayerInstance {
     exitFullScreen?: () => void;
     enterFullscreen?: () => void;
     exitFullscreen?: () => void;
-    enterPictureInPicture?: () => void;
-    exitPictureInPicture?: () => void;
     togglePlay?: () => void;
     toggleMute?: () => void;
     isMuted?: () => boolean;
@@ -824,7 +962,7 @@ export declare interface VPPlayerInstance {
     getVolume?: () => number;
     getContainer?: () => HTMLElement;
     getDuration?: () => number;
-    getConfig?: () => VPPlayerConfig;
+    getConfig?: () => unknown;
     getQualityLevels?: () => unknown[];
     getCurrentQuality?: () => number;
     checkViewability?: () => boolean;
@@ -852,68 +990,212 @@ export declare interface VPPlayerInstance {
 }
 
 /**
- * Interface defining the properties for the VP Player component.
+ * Simplified props interface for VPPlayer
+ *
+ * The wrapper is a thin bridge to the GTech JS player.
+ * Configuration can be managed through the GTech admin panel or via the `config` prop.
  *
- * @interface
+ * @interface VPPlayerProps
  */
 export declare interface VPPlayerProps {
-    playerId: string;
-    config?: Partial<VPPlayerConfig>;
+    /**
+     * GTech script ID (e.g., 'ptkzurnx')
+     * Used with videoId to build the fully managed script URL
+     */
+    scriptId?: string;
+    /**
+     * GTech video ID (e.g., 'vjsobqhe')
+     * Used with scriptId to build the fully managed script URL
+     */
     videoId?: string;
-    projectId?: string;
-    videoUrl?: string;
-    playlistId?: string;
+    /**
+     * Full managed script URL (alternative to scriptId + videoId)
+     * @example "https://host.vpplayer.tech/player/ptkzurnx/vjsobqhe.js"
+     */
     scriptUrl?: string;
-    version?: string | null;
+    /**
+     * GTech project ID
+     * Convenience prop that gets merged into config.projectId
+     * Can also be set directly in the config prop
+     */
+    projectId?: string;
+    /**
+     * Player configuration overrides.
+     * When provided, the wrapper will:
+     * 1. Try to fetch the JSON config from VP Player API
+     * 2. Deep merge your overrides into the fetched config
+     * 3. Call setup() with the merged configuration
+     *
+     * If fetch fails, your config will be used directly.
+     *
+     * @example
+     * ```tsx
+     * <VPPlayer
+     *   scriptId="ptkzurnx"
+     *   videoId="vjsobqhe"
+     *   config={{
+     *     config: {
+     *       muted: true,
+     *       autoplay: true,
+     *       skin: {
+     *         controlBar: {
+     *           background: 'rgba(0,0,0,0.8)'
+     *         }
+     *       }
+     *     }
+     *   }}
+     * />
+     * ```
+     *
+     * @see {@link https://vp.gjirafa.tech/documentation/docs/web-player/setup-the-player/full-configuration}
+     */
+    config?: DeepPartial<VPPlayerConfig>;
+    /**
+     * Custom container ID for the player div
+     * Auto-generated if not provided
+     */
+    playerId?: string;
+    /**
+     * Use vertical player script URL builder
+     * When true, uses /vertical-player/{scriptId}.js pattern
+     */
+    isVertical?: boolean;
+    /**
+     * Enable Reels/TikTok-style overlay mode
+     * Shows thumbnail first, then fullscreen overlay when clicked
+     */
     isReels?: boolean;
+    /**
+     * Thumbnail URL for Reels mode
+     */
     thumbnailUrl?: string;
+    /**
+     * Callback when Reels overlay is closed
+     */
     onClose?: () => void;
-    hiddenClasses?: string[];
-    isPlayerVisible?: boolean;
+    /**
+     * Additional CSS class name for the player container
+     */
     className?: string;
     /**
-     * When true (default), skips all wrapper defaults and passes only minimal config to the SDK.
-     * This lets the GTech admin panel settings be the source of truth for
-     * controls, autoplay, muted, size, and other configuration.
-     * Set to false to use legacy behavior with wrapper defaults.
-     * @default true
+     * CSS classes to hide specific SDK elements
+     * @example ['vp-share-button', 'vp-logo']
      */
-    pureMode?: boolean;
-    onPlaylistData?: (videos: PlaylistItem_2[]) => void;
-    onVideoStarted?: (videoData: CurrentVideoData_2) => void;
+    hiddenClasses?: string[];
     /**
-     * Video metadata for tracking/analytics callbacks
+     * Called when the player is ready/initialized
+     * @param data - Optional video metadata (available in vertical player)
      */
-    trackingMetadata?: PlayerTrackingMetadata_2;
-    onPlayerStart?: PlayerEventCallbacks_2["onPlayerStart"];
-    onPlayerPlay?: PlayerEventCallbacks_2["onPlayerPlay"];
-    onPlayerPause?: PlayerEventCallbacks_2["onPlayerPause"];
-    onPlayerResume?: PlayerEventCallbacks_2["onPlayerResume"];
-    onPlayerEnd?: PlayerEventCallbacks_2["onPlayerEnd"];
-    onPlayerProgressEvery10Seconds?: PlayerEventCallbacks_2["onPlayerProgressEvery10Seconds"];
-    onPlayerProgressAt20Seconds?: PlayerEventCallbacks_2["onPlayerProgressAt20Seconds"];
-    onPlayerQuartile25?: PlayerEventCallbacks_2["onPlayerQuartile25"];
-    onPlayerQuartile50?: PlayerEventCallbacks_2["onPlayerQuartile50"];
-    onPlayerQuartile75?: PlayerEventCallbacks_2["onPlayerQuartile75"];
-    onPlayerNext?: PlayerEventCallbacks_2["onPlayerNext"];
-    onPlayerPrevious?: PlayerEventCallbacks_2["onPlayerPrevious"];
+    onReady?: (data?: CurrentVideoData_2) => void;
     /**
-     * Universal callback for all events - called in addition to specific callbacks
-     * this gives us all event in one callback
+     * Called when playback starts
+     * @param data - Optional video metadata (available in vertical player)
+     */
+    onPlay?: (data?: CurrentVideoData_2) => void;
+    /**
+     * Called when playback is paused
+     */
+    onPause?: () => void;
+    /**
+     * Called when playback resumes after being paused
+     */
+    onResume?: () => void;
+    /**
+     * Called when video playback completes
+     */
+    onComplete?: () => void;
+    /**
+     * Called when an error occurs
+     */
+    onError?: (error: string) => void;
+    /**
+     * Called when a video starts playing
+     * Provides metadata about the current video
+     */
+    onVideoStarted?: (data: CurrentVideoData_2) => void;
+    /**
+     * Called on time updates during playback
+     * @param seconds - Current playback position in seconds
+     */
+    onTimeUpdate?: (seconds: number) => void;
+    /**
+     * Called when playback reaches 25% of video duration
+     */
+    onQuartile25?: () => void;
+    /**
+     * Called when playback reaches 50% of video duration
      */
-    onPlayerEvent?: PlayerEventCallbacks_2["onPlayerEvent"];
+    onQuartile50?: () => void;
+    /**
+     * Called when playback reaches 75% of video duration
+     */
+    onQuartile75?: () => void;
+    /**
+     * Called when transitioning to the next video in playlist
+     */
+    onNext?: () => void;
+    /**
+     * Called when transitioning to the previous video in playlist
+     */
+    onPrevious?: () => void;
+    /**
+     * Called every 10 seconds during playback
+     * @param seconds - Current playback position in seconds
+     */
+    onProgress10s?: (seconds: number) => void;
+    /**
+     * Called when playback reaches 20 seconds
+     * @param seconds - Current playback position (should be ~20)
+     */
+    onProgress20s?: (seconds: number) => void;
 }
 
 /**
- * VPPlayerProvider component provides context for managing the VPPlayer state.
+ * Interface for the imperative handle exposed by VPPlayer via ref.
+ * Use this to call player methods from parent components.
  *
- * @function
- * @param {Object} props - The component props.
- * @param {React.ReactNode} props.children - The child components.
- * @returns {JSX.Element} The provider component for VPPlayer.
+ * @example
+ * ```tsx
+ * const playerRef = useRef<VPPlayerRef>(null);
+ *
+ * <VPPlayer ref={playerRef} scriptId="..." videoId="..." />
+ *
+ * // Later:
+ * playerRef.current?.seek(60);
+ * playerRef.current?.play();
+ * ```
  */
-export declare const VPPlayerProvider: default_2.FC<{
-    children: default_2.ReactNode;
-}>;
+export declare interface VPPlayerRef {
+    play: () => void;
+    pause: () => void;
+    seek: (position: number) => void;
+    forward: () => void;
+    rewind: () => void;
+    replay: () => void;
+    mute: () => void;
+    unmute: () => void;
+    togglePlay: () => void;
+    toggleMute: () => void;
+    enterFullScreen: () => void;
+    exitFullScreen: () => void;
+    getPosition: () => number | null;
+    getDuration: () => number | null;
+    getVolume: () => number | null;
+    setVolume: (volume: number) => void;
+    isMuted: () => boolean;
+    isPlaying: () => boolean;
+    isPaused: () => boolean;
+    isFullscreen: () => boolean;
+}
+
+/**
+ * VP Vertical Player configuration
+ * Similar to VPPlayerConfig but optimized for vertical video
+ */
+export declare interface VPVerticalPlayerConfig {
+    projectId?: string;
+    video?: VideoConfig;
+    config?: PlayerSettingsConfig;
+}
 
 export { }