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

package/dist/index.d.ts

@@ -1,72 +1,27 @@
 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';
-
-/** 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 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=";
-
-/**
- * Base configuration for VP Player with common settings.
- */
-export declare const baseConfig: Partial<VPPlayerConfig_3>;
-
-/**
- * Base configuration for ads with common ad settings.
- */
-export declare const baseConfigWithAds: Partial<VPPlayerConfig_3>;
-
-/**
- * Base configuration with autoplay enabled.
- */
-export declare const baseConfigWithAutoplay: Partial<VPPlayerConfig_3>;
-
-/** URL for the Big Buck Bunny video */
-export declare const BIG_BUCK_BUNNY_URL = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";
+import { VPPlayerRef as VPPlayerRef_2 } from '../../../../../../../src/interfaces';
 
 /**
- * Builds the final VP Player configuration based on available data.
+ * Appends the divId query parameter to a script URL.
+ * This tells the managed script which DOM element to use as the player container.
  *
- * 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
- */
-export declare const buildVPPlayerConfig: ({ videoUrl, projectId, config, isVerticalPlayer, pureMode, }: ConfigBuilderOptions) => VPPlayerConfig_2;
-
-/**
- * Interface for options used in building the VP Player configuration.
- *
- * @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;
 
 /**
  * Represents data about the currently playing video.
@@ -94,44 +49,83 @@ export declare interface CurrentVideoData {
 }
 
 /**
- * Default configuration object for the VP Player.
+ * Event callback refs interface for internal use
+ * Prevents stale closures in event handlers
+ */
+export declare interface EventCallbackRefs {
+    onReady?: () => void;
+    onPlay?: () => 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;
+}
+
+/**
+ * Generates a full player DOM element ID based on provided playerId and videoId.
+ * Falls back to "default" if playerId is not provided.
  *
- * 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.
+ * @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.
  *
- * @constant
- * @type {VPPlayerConfig}
- * @see {@link https://vp.gjirafa.tech/documentation/docs/web-player/setup-the-player/configuration}
+ * @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 defaultVPPlayerConfig: VPPlayerConfig;
+export declare const getFullyManagedPlayerScriptUrl: (scriptId: string, videoId: string) => string;
 
-/** URL for the Elephants Dream video */
-export declare const ELEPHANTS_DREAM_URL = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4";
+/**
+ * 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;
 
 /**
- * Extracts the video ID from a given VP Player script URL.
- *
- * 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
- *
- * @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.
+ * 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;
+
+/**
+ * Manual playlist configuration
+ * Used when you want to provide your own videos array instead of using GTech admin playlists
+ */
+export declare interface ManualPlaylistConfig {
+    /** Array of videos to play */
+    videos: PlaylistVideoItem[];
+    /** Starting video index (0-based) */
+    startIndex?: number;
+}
 
 /**
  * Styled component for the full-screen overlay when the player is active.
@@ -146,12 +140,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.
  *
@@ -231,55 +219,6 @@ export declare interface PlayerObject {
     progress?: number;
 }
 
-/**
- * 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
- */
-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;
-}
-
 /**
  * Tracking metadata for analytics (available in v1.0.23+)
  */
@@ -335,19 +274,35 @@ export declare interface PlaylistItem {
 }
 
 /**
- * Hook for accessing the VPPlayer context.
- *
- * @function
- * @throws {Error} If used outside of the VPPlayerProvider.
- * @returns {VPPlayerContextType} The VPPlayer context.
+ * Video item for manual playlist
  */
-export declare const useVPPlayer: () => VPPlayerContextType_2;
+export declare interface PlaylistVideoItem {
+    /** Unique video identifier */
+    videoId: string;
+    /** Video title */
+    title: string;
+    /** Video file URL (mp4, m3u8, etc.) */
+    file: string;
+    /** Alternative: HLS URL */
+    hlsUrl?: string;
+    /** Thumbnail image URL */
+    thumbnailUrl?: string;
+    /** Alternative: Thumbnail URL */
+    thumbnail?: string;
+    /** Video duration in seconds */
+    duration?: number;
+}
 
 /**
- * Custom hook to manage VP Player logic.
- * Uses native SDK events instead of manual progress tracking.
+ * VP Player logic hook
+ *
+ * Supports two modes:
+ * 1. **Auto-init mode** (default): Load managed script that auto-initializes with GTech admin config
+ * 2. **Manual playlist mode**: Build config and call setup() with custom videos array
+ *
+ * The manual playlist mode is required for vertical player when supplying your own videos.
  */
-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, playlist, 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;
@@ -405,51 +360,102 @@ 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.
+ * Base URL for the VP Player host.
+ */
+export declare const VP_PLAYER_BASE_URL = "https://host.vpplayer.tech";
+
+/**
+ * VP Player Component (v2.0.0)
  *
- * @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;
+ * A thin React wrapper for the GTech VP Player.
+ * All configuration is managed through the GTech admin panel -
+ * this wrapper just provides a DOM container, loads the script, and exposes events.
+ *
+ * ## 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);
+ *
+ * <VPPlayer
+ *   ref={playerRef}
+ *   scriptId="ptkzurnx"
+ *   videoId="vjsobqhe"
+ * />
+ *
+ * // Later:
+ * playerRef.current?.seek(60);
+ * playerRef.current?.play();
+ * console.log(playerRef.current?.getPosition());
+ * ```
+ *
+ * ## Manual Playlist Mode (Vertical Player)
+ *
+ * For vertical player with custom videos array:
+ *
+ * ```tsx
+ * <VPPlayer
+ *   scriptId="rbqcdwzlg"
+ *   projectId="agmipnzb"
+ *   isVertical={true}
+ *   playlist={{
+ *     videos: [
+ *       { videoId: "1", title: "Video 1", file: "https://...mp4", thumbnailUrl: "...", duration: 120 },
+ *       { videoId: "2", title: "Video 2", file: "https://...mp4", thumbnailUrl: "...", duration: 150 },
+ *     ],
+ *     startIndex: 0,
+ *   }}
+ *   onNext={() => console.log('Next video')}
+ * />
+ * ```
+ *
+ * ## 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 const VPPlayer: ForwardRefExoticComponent<VPPlayerProps_2 & RefAttributes<VPPlayerRef_2>>;
 
 /**
- * Interface describing the advertising configuration options for the VP Player.
+ * VP Player Configuration Types (v2.0.0)
+ *
+ * NOTE: In v2.0.0, configuration is managed through the GTech admin panel.
+ * These types are kept for reference only - the React wrapper does NOT
+ * pass configuration to the SDK. The managed script auto-initializes
+ * with all settings from the admin panel.
  *
- * @interface
- * @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/configuration}
+ */
+/**
+ * Advertising configuration interface (reference only)
+ * Configured through GTech admin panel
  */
 export declare interface VPPlayerAdsConfig {
     skipAd?: {
@@ -459,343 +465,27 @@ export declare interface VPPlayerAdsConfig {
     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';
+        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;
 }
 
 /**
- * Interface defining the configuration options for the VP Player.
+ * Interface representing an instance of 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}
- */
-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;
-    };
-}
-
-/**
- * Interface for the VP Player context, providing methods and state for controlling the player.
+ * NOTE: The VP Player SDK does not ship with TypeScript types.
+ * This is our own type definition based on the official API documentation.
  *
- * @interface
- */
-export declare interface VPPlayerContextType {
-    showPlayer: (params: PlayerParams) => void;
-    hidePlayer: () => void;
-    isPlayerVisible: boolean;
-    playerParams: PlayerParams | null;
-}
-
-/**
- * Interface defining the context for VPPlayer.
- *
- * @interface VPPlayerContextType
- */
-declare interface VPPlayerContextType_2 {
-    showPlayer: (params: PlayerParams_2) => void;
-    hidePlayer: () => void;
-    isPlayerVisible: boolean;
-    playerParams: PlayerParams_2 | null;
-}
-
-/**
- * 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
+ * @see https://vp.gjirafa.tech/documentation/docs/web-player/api-reference
+ * @see https://vp.gjirafa.tech/documentation/docs/vertical-player/api-reference
  *
- * @interface
+ * @interface VPPlayerInstance
  */
 export declare interface VPPlayerInstance {
-    setup: (config: VPPlayerConfig) => void;
+    setup: (config: unknown) => void;
     destroy?: () => void;
     play?: () => void;
     pause?: () => void;
@@ -809,8 +499,6 @@ export declare interface VPPlayerInstance {
     exitFullScreen?: () => void;
     enterFullscreen?: () => void;
     exitFullscreen?: () => void;
-    enterPictureInPicture?: () => void;
-    exitPictureInPicture?: () => void;
     togglePlay?: () => void;
     toggleMute?: () => void;
     isMuted?: () => boolean;
@@ -824,7 +512,7 @@ export declare interface VPPlayerInstance {
     getVolume?: () => number;
     getContainer?: () => HTMLElement;
     getDuration?: () => number;
-    getConfig?: () => VPPlayerConfig;
+    getConfig?: () => unknown;
     getQualityLevels?: () => unknown[];
     getCurrentQuality?: () => number;
     checkViewability?: () => boolean;
@@ -852,68 +540,192 @@ export declare interface VPPlayerInstance {
 }
 
 /**
- * Interface defining the properties for the VP Player component.
+ * Simplified props interface for VPPlayer v2.0.0
  *
- * @interface
+ * The wrapper is now a thin bridge to the GTech JS player.
+ * All configuration is managed through the GTech admin panel.
+ *
+ * @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 (required for manual playlist mode)
+     */
+    projectId?: string;
+    /**
+     * Manual playlist configuration - provide your own videos array.
+     * When provided, the wrapper will call setup() with the built config
+     * instead of relying on auto-initialization.
+     *
+     * IMPORTANT: This is required for vertical player when you want to
+     * supply your own videos (not using GTech admin playlists).
+     *
+     * @example
+     * ```tsx
+     * <VPPlayer
+     *   scriptId="rbqcdwzlg"
+     *   projectId="agmipnzb"
+     *   isVertical={true}
+     *   playlist={{
+     *     videos: [
+     *       { videoId: "1", title: "Video 1", file: "https://...mp4", thumbnailUrl: "...", duration: 120 },
+     *       { videoId: "2", title: "Video 2", file: "https://...mp4", thumbnailUrl: "...", duration: 150 },
+     *     ],
+     *     startIndex: 0,
+     *   }}
+     * />
+     * ```
+     */
+    playlist?: ManualPlaylistConfig;
+    /**
+     * 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
      */
-    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?: () => void;
     /**
-     * Universal callback for all events - called in addition to specific callbacks
-     * this gives us all event in one callback
+     * Called when playback starts
+     */
+    onPlay?: () => void;
+    /**
+     * Called when playback is paused
+     */
+    onPause?: () => void;
+    /**
+     * Called when playback resumes after pause
+     */
+    onResume?: () => void;
+    /**
+     * Called when video playback completes
+     */
+    onComplete?: () => void;
+    /**
+     * Called when an error occurs
      */
-    onPlayerEvent?: PlayerEventCallbacks_2["onPlayerEvent"];
+    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
+     */
+    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.
- */
-export declare const VPPlayerProvider: default_2.FC<{
-    children: default_2.ReactNode;
-}>;
+ * @example
+ * ```tsx
+ * const playerRef = useRef<VPPlayerRef>(null);
+ *
+ * <VPPlayer ref={playerRef} scriptId="..." videoId="..." />
+ *
+ * // Later:
+ * playerRef.current?.seek(60);
+ * playerRef.current?.play();
+ * ```
+ */
+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;
+}
 
 export { }