@devix-technologies/react-gjirafa-vp-player 1.0.29 → 1.0.31-beta.0

package/dist/index.d.ts

@@ -1,9 +1,897 @@
-export { default as VPPlayer } from './features/VPPlayer';
-export * from './components/VPPlayer/ui';
-export { VPPlayerProvider, useVPPlayer } from './contexts/VPPlayerContext';
-export * from './hooks';
-export * from './interfaces';
-export * from './types';
-export * from './utils';
-export * from './constants/configs';
-export * from './constants/urls';
+import { CurrentVideoData as CurrentVideoData_2 } from '../../../../../../../src/types';
+import { default as default_2 } from 'react';
+import { DetailedHTMLProps } 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 { 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";
+
+/**
+ * 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
+ */
+export declare const buildVPPlayerConfig: ({ videoUrl, projectId, config, isVerticalPlayer, }: ConfigBuilderOptions) => VPPlayerConfig_2;
+
+/**
+ * Interface for options used in building the VP Player configuration.
+ *
+ * @interface ConfigBuilderOptions
+ */
+declare interface ConfigBuilderOptions {
+    videoUrl?: string;
+    projectId?: string;
+    config?: Partial<VPPlayerConfig_2>;
+    isVerticalPlayer?: boolean;
+}
+
+/**
+ * Represents data about the currently playing video.
+ * Used in onVideoStarted callback.
+ *
+ * @interface CurrentVideoData
+ */
+export declare interface CurrentVideoData {
+    title?: string;
+    file?: string;
+    hlsUrl?: string;
+    thumbnailUrl?: string;
+    duration?: number;
+    videoIndex?: number;
+    playlistVideoIndex?: number;
+    isBackupPlaylist?: boolean;
+    videoId?: string;
+    mediaId?: string;
+    publishDate?: string;
+    projectId?: string;
+    premium?: boolean;
+    author?: string;
+    tags?: string[];
+    description?: string;
+}
+
+/**
+ * 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.
+ *
+ * @constant
+ * @type {VPPlayerConfig}
+ * @see {@link https://vp.gjirafa.tech/documentation/docs/web-player/setup-the-player/configuration}
+ */
+export declare const defaultVPPlayerConfig: VPPlayerConfig;
+
+/** URL for the Elephants Dream video */
+export declare const ELEPHANTS_DREAM_URL = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4";
+
+/**
+ * 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.
+ */
+export declare const extractVideoId: (scriptUrl?: string) => string | undefined;
+
+/**
+ * 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.
+ */
+export declare const getAdConfig: (breakType: "preroll" | "postroll" | "midroll", adTagUrls: string[], breakTimingType?: "time" | "percentage" | "playlist", breakTimingValue?: number) => Partial<VPPlayerConfig_3>;
+
+/**
+ * Styled component for the full-screen overlay when the player is active.
+ *
+ * @component
+ * @param {string} [className] - CSS class name for additional styling.
+ */
+export declare const Overlay: StyledComponent<    {
+theme?: Theme;
+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.
+ *
+ * @component
+ * @param {string} [width] - The width of the player (default: "100%").
+ * @param {string} [height] - The height of the player (default: "100%").
+ * @param {string[]} [$hiddenClasses] - CSS class names to hide elements inside the player.
+ * @param {string} [className] - CSS class name for additional styling.
+ */
+export declare const PlayerContainer: StyledComponent<    {
+theme?: Theme;
+as?: React.ElementType;
+} & {
+width?: string;
+height?: string;
+$hiddenClasses?: string[];
+className?: string;
+}, DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+
+/**
+ * Callback function type for player events
+ * Accepts event name (PlayerEventType) and optionally currentPosition for progress events
+ */
+export declare type PlayerEventCallback = (event: PlayerEventType, currentPosition?: number) => void;
+
+/**
+ * Individual event callbacks
+ * Each callback accepts only the event name (PlayerEventType)
+ */
+export declare interface PlayerEventCallbacks {
+    onPlayerStart?: (event: PlayerEventType) => void;
+    onPlayerPlay?: (event: PlayerEventType) => void;
+    onPlayerPause?: (event: PlayerEventType) => void;
+    onPlayerResume?: (event: PlayerEventType) => void;
+    onPlayerEnd?: (event: PlayerEventType) => void;
+    onPlayerProgressEvery10Seconds?: (event: PlayerEventType, currentPosition: number) => void;
+    onPlayerProgressAt20Seconds?: (event: PlayerEventType, currentPosition: number) => void;
+    onPlayerQuartile25?: (event: PlayerEventType, currentPosition: number) => void;
+    onPlayerQuartile50?: (event: PlayerEventType, currentPosition: number) => void;
+    onPlayerQuartile75?: (event: PlayerEventType, currentPosition: number) => void;
+    onPlayerNext?: (event: PlayerEventType) => void;
+    onPlayerPrevious?: (event: PlayerEventType) => void;
+    /**
+     * Universal callback for all events - called in addition to specific callbacks
+     * Accepts event name (PlayerEventType) and optionally currentPosition for progress events
+     */
+    onPlayerEvent?: PlayerEventCallback;
+}
+
+/**
+ * Player event data structure
+ */
+export declare interface PlayerEventData {
+    event: PlayerEventType;
+    player: PlayerObject;
+    _clear?: boolean;
+}
+
+/**
+ * Player event types that can be tracked
+ */
+export declare type PlayerEventType = "player_start" | "player_play" | "player_pause" | "player_resume" | "player_end" | "player_progress_every_10_seconds" | "player_progress_at_20_seconds" | "player_quartile_25" | "player_quartile_50" | "player_quartile_75" | "player_next" | "player_previous";
+
+/**
+ * Player object structure for analytics
+ */
+export declare interface PlayerObject {
+    videoId?: string;
+    title?: string;
+    categoryName?: string;
+    publishedDate?: string;
+    isPremium?: boolean;
+    tags?: string[];
+    isReels?: boolean;
+    currentPosition?: number;
+    duration?: number;
+    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;
+    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+)
+ */
+export declare interface PlayerTrackingMetadata {
+    videoId: string;
+    title: string;
+    categoryName?: string;
+    publishedDate?: string;
+    isPremium?: boolean;
+    tags?: string[];
+    isReels?: boolean;
+}
+
+/**
+ * Styled wrapper for the player, adjusting its size based on viewport width.
+ *
+ * @component
+ * @param {string} [className] - CSS class name for additional styling.
+ */
+export declare const PlayerWrapper: StyledComponent<    {
+theme?: Theme;
+as?: React.ElementType;
+} & {
+className?: string;
+}, DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+
+/**
+ * API response structure for fetching playlist data.
+ *
+ * @interface PlaylistApiResponse
+ */
+export declare interface PlaylistApiResponse {
+    result: PlaylistItem[];
+}
+
+/**
+ * Represents an item in a video playlist.
+ *
+ * @interface PlaylistItem
+ */
+export declare interface PlaylistItem {
+    mediaId: string;
+    videoId?: string;
+    title: string;
+    description?: string;
+    hlsUrl: string;
+    playbackUrl?: string;
+    file?: string;
+    thumbnailUrl: string;
+    duration: number;
+    durationString?: string;
+    isBackupPlaylist?: boolean;
+}
+
+/**
+ * Hook for accessing the VPPlayer context.
+ *
+ * @function
+ * @throws {Error} If used outside of the VPPlayerProvider.
+ * @returns {VPPlayerContextType} The VPPlayer context.
+ */
+export declare const useVPPlayer: () => VPPlayerContextType_2;
+
+/**
+ * Custom hook to manage VP Player logic.
+ * Uses native SDK events instead of manual progress tracking.
+ */
+export declare const useVPPlayerLogic: ({ playerId, videoId: propVideoId, version, videoUrl, projectId, playlistId, scriptUrl, config, isReels, onPlaylistData, onVideoStarted, onPlayerStart, onPlayerPlay, onPlayerPause, onPlayerResume, onPlayerEnd, onPlayerProgressEvery10Seconds, onPlayerProgressAt20Seconds, onPlayerQuartile25, onPlayerQuartile50, onPlayerQuartile75, onPlayerNext, onPlayerPrevious, onPlayerEvent, }: VPPlayerProps_2) => {
+    playerRef: RefObject<HTMLDivElement | null>;
+    playerInstanceRef: RefObject<VPPlayerInstance_2 | null>;
+    isScriptLoaded: boolean;
+    isLoading: boolean;
+    error: string | null;
+    generatedPlayerId: string;
+};
+
+/**
+ * Custom hook to dynamically load the VP Player script into the document.
+ * It ensures that the script is only loaded once and provides a loading state.
+ *
+ * @function
+ * @param {string | null} [version] - The version of the VP Player script to load (defaults to "latest").
+ * @param {string} [scriptUrl] - Custom script URL (if provided, it overrides the version-based URL).
+ * @returns {{ isLoaded: boolean; error: string | null }} Indicates load success and any error message.
+ */
+export declare const useVPPlayerScript: (version?: string | null, scriptUrl?: string) => {
+    isLoaded: boolean;
+    error: string | null;
+};
+
+/**
+ * API response types for VP Player.
+ *
+ * @interface VideoApiItem
+ * Represents an individual video item in the API response.
+ */
+export declare interface VideoApiItem {
+    mediaId: string;
+    playbackUrl: string;
+}
+
+/**
+ * API response structure for fetching video data.
+ *
+ * @interface VideoApiResponse
+ */
+export declare interface VideoApiResponse {
+    result: {
+        items: VideoApiItem[];
+    };
+}
+
+/**
+ * Result structure returned by the video data fetching logic.
+ *
+ * @interface VideoDataResult
+ */
+export declare interface VideoDataResult {
+    fetchedPlaybackUrl: string | null;
+    fetchedPlaylist: PlaylistItem[] | null;
+    isLoading: boolean;
+    error: string | null;
+}
+
+/**
+ * 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.
+ * @returns {JSX.Element} The rendered video player component.
+ */
+export declare const VPPlayer: ({ playerId, videoId, version, videoUrl, projectId, playlistId, scriptUrl, config, isReels, 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;
+
+/**
+ * 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}
+ */
+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;
+}
+
+/**
+ * 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}
+ */
+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.
+ *
+ * @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
+ *
+ * @interface
+ */
+export declare interface VPPlayerInstance {
+    setup: (config: VPPlayerConfig) => void;
+    destroy?: () => void;
+    play?: () => void;
+    pause?: () => void;
+    forward?: () => void;
+    rewind?: () => void;
+    replay?: () => void;
+    seek?: (position: number) => void;
+    mute?: () => void;
+    unmute?: () => void;
+    enterFullScreen?: () => void;
+    exitFullScreen?: () => void;
+    enterFullscreen?: () => void;
+    exitFullscreen?: () => void;
+    enterPictureInPicture?: () => void;
+    exitPictureInPicture?: () => void;
+    togglePlay?: () => void;
+    toggleMute?: () => void;
+    isMuted?: () => boolean;
+    isPlaying?: () => boolean;
+    isPaused?: () => boolean;
+    isFullscreen?: () => boolean;
+    isEnded?: () => boolean;
+    isFocused?: () => boolean;
+    getPosition?: () => number;
+    getBuffered?: () => number;
+    getVolume?: () => number;
+    getContainer?: () => HTMLElement;
+    getDuration?: () => number;
+    getConfig?: () => VPPlayerConfig;
+    getQualityLevels?: () => unknown[];
+    getCurrentQuality?: () => number;
+    checkViewability?: () => boolean;
+    setConfig?: (config: unknown) => void;
+    setVideo?: (video: unknown) => void;
+    setPlaylist?: (playlist: unknown) => void;
+    setVolume?: (volume: number) => void;
+    setCurrentQuality?: (index: number) => void;
+    setLevelToAuto?: () => void;
+    setCuePoint?: (cue: number, callback: () => void) => void;
+    on?: (event: string, callback: (data?: unknown) => void) => void;
+    off?: (event: string, callback?: (data?: unknown) => void) => void;
+    videoIndex?: number;
+    playlist?: {
+        state: boolean;
+        playlistId: string;
+        playlistVideoIndex: number;
+        videos: unknown[];
+    };
+    multipleVideos?: Map<number, unknown>;
+    firstInList?: boolean;
+    lastInList?: boolean;
+    setupComplete?: boolean;
+    initialized?: boolean;
+}
+
+/**
+ * Interface defining the properties for the VP Player component.
+ *
+ * @interface
+ */
+export declare interface VPPlayerProps {
+    playerId: string;
+    config?: Partial<VPPlayerConfig>;
+    videoId?: string;
+    projectId?: string;
+    videoUrl?: string;
+    playlistId?: string;
+    scriptUrl?: string;
+    version?: string | null;
+    isReels?: boolean;
+    thumbnailUrl?: string;
+    onClose?: () => void;
+    hiddenClasses?: string[];
+    isPlayerVisible?: boolean;
+    className?: string;
+    onPlaylistData?: (videos: PlaylistItem_2[]) => void;
+    onVideoStarted?: (videoData: CurrentVideoData_2) => void;
+    /**
+     * Video metadata for tracking/analytics callbacks
+     */
+    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"];
+    /**
+     * Universal callback for all events - called in addition to specific callbacks
+     * this gives us all event in one callback
+     */
+    onPlayerEvent?: PlayerEventCallbacks_2["onPlayerEvent"];
+}
+
+/**
+ * VPPlayerProvider component provides context for managing the VPPlayer state.
+ *
+ * @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;
+}>;
+
+export { }