@devix-technologies/react-gjirafa-vp-player 1.0.28 → 1.0.29

package/dist/App.d.ts

@@ -0,0 +1,2 @@
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export default App;

package/dist/components/Feedback.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+/**
+ * Props for the FeedbackMessage component.
+ */
+interface FeedbackMessageProps {
+    type: "error" | "loading" | "success" | "warning";
+    children: ReactNode;
+    className?: string;
+    icon?: ReactNode;
+    action?: ReactNode;
+}
+/**
+ * FeedbackMessage component for displaying various types of messages (error, loading, success, warning).
+ * Can be customized with an icon, action button, and additional styles.
+ *
+ * @param {FeedbackMessageProps} props - The properties for the feedback message.
+ * @param {"error" | "loading" | "success" | "warning"} props.type - The type of message to display.
+ * @param {ReactNode} props.children - The content of the message.
+ * @param {string} [props.className] - Custom class for additional styling.
+ * @param {ReactNode} [props.icon] - Optional icon to display before the message.
+ * @param {ReactNode} [props.action] - Optional action button (e.g., "Retry").
+ * @returns {JSX.Element} The rendered feedback message component.
+ */
+export declare const FeedbackMessage: ({ type, children, className, icon, action }: FeedbackMessageProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/VPPlayer/index.d.ts

@@ -0,0 +1,2 @@
+export { default as VPPlayer } from '../../features/VPPlayer';
+export * from './ui';

package/dist/components/VPPlayer/ui/index.d.ts

@@ -0,0 +1 @@
+export * from './styled';

package/dist/components/VPPlayer/ui/styled.d.ts

@@ -0,0 +1,42 @@
+/**
+ * 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: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & {
+    width?: string;
+    height?: string;
+    $hiddenClasses?: string[];
+    className?: string;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/**
+ * 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: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & {
+    className?: string;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/**
+ * 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: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & {
+    className?: string;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/config/index.d.ts

@@ -0,0 +1 @@
+export * from './vpPlayerConfig';

package/dist/config/vpPlayerConfig.d.ts

@@ -0,0 +1,9 @@
+import { VPPlayerConfig } from '../../../../../../../src/interfaces';
+/**
+ * Default configuration for the VP Player.
+ *
+ * @constant
+ * @type {VPPlayerConfig}
+ * @see {@link https://vp.gjirafa.tech/documentation/docs/web-player/setup-the-player/configuration}
+ */
+export declare const defaultVPPlayerConfig: VPPlayerConfig;

package/dist/constants/configs.d.ts

@@ -0,0 +1,22 @@
+import { VPPlayerConfig } from '../../../../../../../src/interfaces/config';
+/**
+ * Base configuration for VP Player with common settings.
+ */
+export declare const baseConfig: Partial<VPPlayerConfig>;
+/**
+ * Base configuration with autoplay enabled.
+ */
+export declare const baseConfigWithAutoplay: Partial<VPPlayerConfig>;
+/**
+ * Base configuration for ads with common ad settings.
+ */
+export declare const baseConfigWithAds: Partial<VPPlayerConfig>;
+/**
+ * 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>;

package/dist/constants/index.d.ts

@@ -0,0 +1 @@
+export * from './vpPlayer';

package/dist/constants/storybook.d.ts

@@ -0,0 +1,9 @@
+import { ArgTypes } from '@storybook/react';
+/**
+ * Common Storybook argTypes used across stories.
+ */
+export declare const COMMON_ARGTYPES: Partial<ArgTypes<Record<string, unknown>>>;
+/**
+ * Default project ID.
+ */
+export declare const DEFAULT_PROJECT_ID = "vp-player-project";

package/dist/constants/styles.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Common styles for Storybook stories.
+ */
+/** Style for vertical playback containers (e.g., VerticalPlayback, VerticalPlaylistPlayback). */
+export declare const VERTICAL_PLAYBACK_STYLE: React.CSSProperties;
+/** Base style for multiple players containers (e.g., MultiplePlayersSideBySide, MultiplePlayersStacked). */
+export declare const MULTIPLE_PLAYERS_BASE_STYLE: React.CSSProperties;
+/** Style for side-by-side multiple players (e.g., MultiplePlayersSideBySide). */
+export declare const MULTIPLE_PLAYERS_SIDE_BY_SIDE_STYLE: React.CSSProperties;
+/** Style for stacked multiple players (e.g., MultiplePlayersStacked). */
+export declare const MULTIPLE_PLAYERS_STACKED_STYLE: React.CSSProperties;

package/dist/constants/urls.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Constants for video URLs used across the application and Storybook stories.
+ */
+/** URL for the Big Buck Bunny video */
+export declare const BIG_BUCK_BUNNY_URL = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";
+/** URL for the Elephants Dream video */
+export declare const ELEPHANTS_DREAM_URL = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4";
+/** 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";
+/** 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";
+/**
+ * Constants for ad tag URLs used in Storybook stories.
+ */
+/** 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=";

package/dist/constants/vpPlayer.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Generates the URL for fetching a single video by projectId and videoId.
+ * @param {string} projectId - The project ID.
+ * @param {string} videoId - The video ID.
+ * @returns {string} - The complete API URL for single video fetch.
+ */
+export declare const getSingleVideoUrl: (projectId: string, videoId: string) => string;
+/**
+ * @docs https://vp.gjirafa.tech/documentation/api/manage-api/playlist/getPlaylistTypes/
+ * @docs https://vp.gjirafa.tech/documentation/api/manage-api/playlist/getVideosForPlaylist/
+ * @docs https://vp.gjirafa.tech/documentation/api/manage-api/playlist/getPlaylistMetadata/
+ *
+* Generates the URL for fetching a playlist by projectId and playlistId.
+* @param {string} projectId - The project ID.
+* @param {string} playlistId - The playlist ID.
+* @returns {string} - The complete API URL for playlist fetch.
+*/
+export declare const getPlaylistUrl: (projectId: string, playlistId: string) => string;
+/**
+ * Generates the URL for fetching playlist metadata (including backup info)
+ * @param {string} projectId - The project ID.
+ * @param {string} playlistId - The playlist ID.
+ * @returns {string} - The complete API URL for playlist metadata.
+ */
+export declare const getPlaylistMetadataUrl: (projectId: string, playlistId: string) => string;
+/**
+ * Generates the URL for fetching a public playlist (no API key required).
+ * Public endpoint: https://host.vpplayer.tech/playlist/${playlistId}
+ * @param {string} playlistId - The playlist ID.
+ * @returns {string} - The complete public API URL for playlist fetch.
+ */
+export declare const getPublicPlaylistUrl: (playlistId: string) => string;
+/**
+* Generates the URL for loading the 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 getPlayerScriptUrl: (playerVersion: string) => string;
+/**
+ * Generates a full player DOM element ID based on provided playerId and videoId.
+ * Falls back to "default" if playerId is not provided.
+ *
+ * @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;

package/dist/contexts/VPPlayerContext.d.ts

@@ -0,0 +1,52 @@
+import { default as React } from 'react';
+import { VPPlayerProps } from '../../../../../../../src/interfaces';
+/**
+ * Interface defining the parameters for initializing the VPPlayer.
+ *
+ * @interface PlayerParams
+ */
+interface PlayerParams {
+    playerId?: string;
+    videoId?: string;
+    projectId?: string;
+    videoUrl?: string;
+    playlistId?: string;
+    scriptUrl?: string;
+    version?: string | null;
+    config?: VPPlayerProps["config"];
+    thumbnailUrl?: string;
+    isReels?: boolean;
+    hiddenClasses?: string[];
+    className?: string;
+}
+/**
+ * Interface defining the context for VPPlayer.
+ *
+ * @interface VPPlayerContextType
+ */
+interface VPPlayerContextType {
+    showPlayer: (params: PlayerParams) => void;
+    hidePlayer: () => void;
+    isPlayerVisible: boolean;
+    playerParams: PlayerParams | null;
+}
+/**
+ * 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: React.FC<{
+    children: React.ReactNode;
+}>;
+/**
+ * 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;
+export {};

package/dist/contexts/index.d.ts

@@ -0,0 +1 @@
+export * from './VPPlayerContext';

package/dist/features/VPPlayer.d.ts

@@ -0,0 +1,41 @@
+import { VPPlayerProps } from '../../../../../../../src/interfaces';
+/**
+ * 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.
+ */
+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 & {
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default VPPlayer;

package/dist/features/stories/ads/Ads.stories.d.ts

@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { VPPlayer } from '../../../../../../../../../src/components/VPPlayer';
+import { VPPlayerInstance } from '../../../../../../../../../src/interfaces';
+declare global {
+    interface Window {
+        vpPlayer?: (playerId: string) => VPPlayerInstance | undefined;
+    }
+}
+declare const meta: Meta<typeof VPPlayer>;
+export default meta;
+type Story = StoryObj<typeof VPPlayer>;
+export declare const SingleVideoOnePrerollAd: Story;
+export declare const SingleVideoOnePostrollAd: Story;
+export declare const SingleVideoMultiplePrerollAds: Story;
+export declare const PlaylistOnePrerollEveryAd: Story;
+export declare const PlaylistOneMidrollAd: Story;
+export declare const PlaylistOnePostrollAddEveryVideo: Story;
+export declare const PlaylistMultiplePrerollAdsEveryVideo: Story;
+export declare const PlaylistMultipleMidrollAds: Story;
+export declare const PictureInPictureDemoWithAds: () => import("react/jsx-runtime").JSX.Element;

package/dist/features/stories/context/Context.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { VPPlayer } from '../../../../../../../../../src/components/VPPlayer';
+declare const meta: Meta<typeof VPPlayer>;
+export default meta;
+type Story = StoryObj<typeof VPPlayer>;
+export declare const NoControlsSingleVideo: Story;
+export declare const IsReelsWithContextPlaylistHiddenElements: Story;
+export declare const IsReelsWithContextModalCentered: Story;
+export declare const ContextWrapperModal: Story;
+export declare const ContextCustomizedPortalPlayer: Story;

package/dist/features/stories/index.d.ts

@@ -0,0 +1,3 @@
+export * from './playback/Playback.stories';
+export * from './ads/Ads.stories';
+export * from './context/Context.stories';

package/dist/features/stories/playback/Playback.stories.d.ts

@@ -0,0 +1,38 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { VPPlayer } from '../../../../../../../../../src/components/VPPlayer';
+import { VPPlayerInstance } from '../../../../../../../../../src/interfaces';
+declare global {
+    interface Window {
+        vpPlayer?: (playerId: string) => VPPlayerInstance | undefined;
+        vpVerticalPlayer?: (playerId: string) => VPPlayerInstance | undefined;
+    }
+}
+declare const meta: Meta<typeof VPPlayer>;
+export default meta;
+type Story = StoryObj<typeof VPPlayer>;
+export declare const SingleVideoProvidedFile: Story;
+export declare const SingleVideoAPI: Story;
+export declare const PlaylistProvided: Story;
+export declare const PlaylistAPI: Story;
+export declare const HorizontalPlayback: Story;
+export declare const VerticalPlayback: Story;
+export declare const VerticalPlaylistPlayback: Story;
+export declare const FloatingVideo: Story;
+export declare const MultiplePlayersSideBySide: Story;
+export declare const MultiplePlayersStacked: Story;
+export declare const VerticalPlaylistTest: () => import("react/jsx-runtime").JSX.Element;
+export declare const VerticalPlaylistTestSingleFile: () => import("react/jsx-runtime").JSX.Element;
+export declare const testPlayerControls: () => import("react/jsx-runtime").JSX.Element;
+export declare const VerticalPlaylistFastestWithPlaylistCheckOK: () => import("react/jsx-runtime").JSX.Element;
+export declare const VerticalPlaylistStartFromIndexTestZimak: () => import("react/jsx-runtime").JSX.Element;
+export declare const VerticalPlayerWithSubtitles: () => import("react/jsx-runtime").JSX.Element;
+export declare const NormalPlayerWithSubtitles: () => import("react/jsx-runtime").JSX.Element;
+export declare const VerticalPlaylistTestMainAndBackUp: () => import("react/jsx-runtime").JSX.Element;
+export declare const VerticalPlaylistTestMainAndBackUpWithCallback: () => import("react/jsx-runtime").JSX.Element;
+export declare const VerticalPlaylistWithVideoStartedCallback: () => import("react/jsx-runtime").JSX.Element;
+export declare const HorizontalPlayerWithVideoStartedCallback: () => import("react/jsx-runtime").JSX.Element;
+export declare const PlayerEventTrackingExample: () => import("react/jsx-runtime").JSX.Element;
+export declare const UniversalPlayerEventTrackingExample: () => import("react/jsx-runtime").JSX.Element;
+export declare const VerticalPlayerEventTrackingExample: () => import("react/jsx-runtime").JSX.Element;
+export declare const UniversalVerticalPlayerEventTrackingExample: () => import("react/jsx-runtime").JSX.Element;
+export declare const VerticalPlayerWithPublicPlaylist: () => import("react/jsx-runtime").JSX.Element;

package/dist/fixtures/index.d.ts

@@ -0,0 +1 @@
+export * from './playlist';

package/dist/fixtures/playlist.d.ts

@@ -0,0 +1,11 @@
+export declare const playlist: {
+    state: boolean;
+    playlistVideoIndex: number;
+    videos: {
+        videoId: string;
+        title: string;
+        file: string;
+        thumbnailUrl: string;
+        duration: number;
+    }[];
+};

package/dist/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export { useVPPlayerScript } from './useVPPlayerScript';
+export { useVideoData } from './useVideoData';
+export { useVPPlayerLogic } from './useVPPlayerLogic';
+export { useVPPlayerEvents } from './useVPPlayerEvents';

package/dist/hooks/useVPPlayerEvents.d.ts

@@ -0,0 +1,24 @@
+import { VPPlayerInstance } from '../../../../../../../src/interfaces';
+import { PlayerEventCallbacks, CurrentVideoData } from '../../../../../../../src/types';
+interface UseVPPlayerEventsParams {
+    playerId: string;
+    playerInstanceRef: React.RefObject<VPPlayerInstance | null>;
+    playerRef?: React.RefObject<HTMLDivElement | null>;
+    videoData?: CurrentVideoData;
+    trackingMetadata?: {
+        videoId?: string;
+        title?: string;
+        categoryName?: string;
+        publishedDate?: string;
+        isPremium?: boolean;
+        tags?: string[];
+        isReels?: boolean;
+    };
+    callbacks?: PlayerEventCallbacks;
+}
+/**
+ * Hook to track video player events and call appropriate callbacks
+ * Similar to GTM tracking implementation but more flexible
+ */
+export declare const useVPPlayerEvents: ({ playerId, playerInstanceRef, playerRef, videoData, trackingMetadata, callbacks, }: UseVPPlayerEventsParams) => void;
+export {};

package/dist/hooks/useVPPlayerLogic.d.ts

@@ -0,0 +1,22 @@
+import { VPPlayerInstance, VPPlayerProps } from '../../../../../../../src/interfaces';
+declare global {
+    interface Window {
+        vpPlayer?: (playerId: string) => VPPlayerInstance | undefined;
+        vpVerticalPlayer?: (playerId: string) => VPPlayerInstance | undefined;
+    }
+}
+/**
+ * Custom hook to manage VP Player logic, including fetching video data,
+ * initializing the player, and handling lifecycle events.
+ *
+ * @function
+ * @param {VPPlayerProps} props - The properties required to configure the VP Player.
+ * @returns {Object} An object containing player references, script loading status, loading state, and errors.
+ */
+export declare const useVPPlayerLogic: ({ playerId, videoId: propVideoId, version, videoUrl, projectId, playlistId, scriptUrl, config, isReels, onPlaylistData, onVideoStarted, trackingMetadata, onPlayerStart, onPlayerPlay, onPlayerPause, onPlayerResume, onPlayerEnd, onPlayerProgressEvery10Seconds, onPlayerProgressAt20Seconds, onPlayerQuartile25, onPlayerQuartile50, onPlayerQuartile75, onPlayerNext, onPlayerPrevious, onPlayerEvent, }: VPPlayerProps) => {
+    playerRef: import('react').RefObject<HTMLDivElement | null>;
+    playerInstanceRef: import('react').RefObject<VPPlayerInstance | null>;
+    isScriptLoaded: boolean;
+    isLoading: boolean;
+    error: string | null;
+};

package/dist/hooks/useVPPlayerScript.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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;
+};

package/dist/hooks/useVideoData.d.ts

@@ -0,0 +1,19 @@
+import { VideoDataResult } from '../../../../../../../src/types';
+/**
+ * Custom hook for fetching video data, including playback URLs and playlists.
+ * Supports retry logic, timeout, error handling, and in-memory caching.
+ *
+ * @function
+ * @param {Object} params - The parameters for fetching video data.
+ * @param {string} [params.projectId] - The project ID required for API calls.
+ * @param {string} [params.videoId] - The video ID to fetch a single video's playback URL.
+ * @param {string} [params.playlistId] - The playlist ID to fetch a list of videos.
+ * @param {string} [params.videoUrl] - The direct video URL (skips API call if provided).
+ * @returns {VideoDataResult} - Result object with URL, playlist, loading and error states
+ */
+export declare const useVideoData: ({ projectId, videoId, playlistId, videoUrl, }: {
+    projectId?: string;
+    videoId?: string;
+    playlistId?: string;
+    videoUrl?: string;
+}) => VideoDataResult;

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+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';

package/dist/interfaces/config.d.ts

@@ -0,0 +1,314 @@
+/**
+ * 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 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 interface VPPlayerConfig {
+    projectId?: string;
+    video: {
+        videoId?: string;
+        ads?: VPPlayerAdsConfig;
+        advertising?: boolean;
+        file?: string;
+        title?: string;
+        description?: string;
+        publishDate?: string;
+        duration?: number;
+        thumbnail?: string;
+        filmstrip?: string;
+        author?: string;
+        source?: string;
+        tags?: string[];
+        tracks?: Array<{
+            file: string;
+            label: string;
+            kind: string;
+            default?: boolean;
+        }>;
+        playlist?: {
+            state: boolean;
+            playlistVideoIndex: number;
+            videos: Array<{
+                videoId?: string;
+                mediaId?: 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;
+    };
+}
+/**
+ * Default configuration object for the VP Player.
+ *
+ * @constant
+ * @type {VPPlayerConfig}
+ * @see {@link https://vp.gjirafa.tech/documentation/docs/web-player/setup-the-player/configuration}
+ */
+export declare const defaultVPPlayerConfig: VPPlayerConfig;

package/dist/interfaces/index.d.ts

@@ -0,0 +1,3 @@
+export * from './props';
+export * from './instance';
+export * from './config';

package/dist/interfaces/instance.d.ts

@@ -0,0 +1,73 @@
+import { VPPlayerConfig } from './config';
+/**
+ * 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 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;
+    floating?: () => void;
+    isFloating?: () => boolean;
+    getFloatStyle?: () => unknown;
+    setFloatingHlsLevels?: (levels: unknown) => void;
+    floatingStateCounter?: number;
+    nextVideo?: () => void;
+    previousVideo?: () => void;
+    switchToIndex?: (index: number) => void;
+    switch?: (video: unknown) => void;
+    playNewVideo?: (video: unknown) => 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;
+    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;
+}

package/dist/interfaces/props.d.ts

@@ -0,0 +1,77 @@
+import { VPPlayerConfig } from './config';
+import { CurrentVideoData, PlaylistItem, PlayerEventCallbacks, PlayerTrackingMetadata } from '../../../../../../../src/types';
+/**
+ * Interface defining the parameters for configuring the VP Player instance.
+ *
+ * @interface
+ */
+export 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[]) => void;
+}
+/**
+ * Interface for the VP Player context, providing methods and state for controlling the player.
+ *
+ * @interface
+ */
+export interface VPPlayerContextType {
+    showPlayer: (params: PlayerParams) => void;
+    hidePlayer: () => void;
+    isPlayerVisible: boolean;
+    playerParams: PlayerParams | null;
+}
+/**
+ * Interface defining the properties for the VP Player component.
+ *
+ * @interface
+ */
+export 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[]) => void;
+    onVideoStarted?: (videoData: CurrentVideoData) => void;
+    /**
+     * Video metadata for tracking/analytics callbacks
+     */
+    trackingMetadata?: PlayerTrackingMetadata;
+    onPlayerStart?: PlayerEventCallbacks["onPlayerStart"];
+    onPlayerPlay?: PlayerEventCallbacks["onPlayerPlay"];
+    onPlayerPause?: PlayerEventCallbacks["onPlayerPause"];
+    onPlayerResume?: PlayerEventCallbacks["onPlayerResume"];
+    onPlayerEnd?: PlayerEventCallbacks["onPlayerEnd"];
+    onPlayerProgressEvery10Seconds?: PlayerEventCallbacks["onPlayerProgressEvery10Seconds"];
+    onPlayerProgressAt20Seconds?: PlayerEventCallbacks["onPlayerProgressAt20Seconds"];
+    onPlayerQuartile25?: PlayerEventCallbacks["onPlayerQuartile25"];
+    onPlayerQuartile50?: PlayerEventCallbacks["onPlayerQuartile50"];
+    onPlayerQuartile75?: PlayerEventCallbacks["onPlayerQuartile75"];
+    onPlayerNext?: PlayerEventCallbacks["onPlayerNext"];
+    onPlayerPrevious?: PlayerEventCallbacks["onPlayerPrevious"];
+    /**
+     * Universal callback for all events - called in addition to specific callbacks
+     * this gives us all event in one callback
+     */
+    onPlayerEvent?: PlayerEventCallbacks["onPlayerEvent"];
+}

package/dist/types/api.types.d.ts

@@ -0,0 +1,81 @@
+/**
+ * API response types for VP Player.
+ *
+ * @interface VideoApiItem
+ * Represents an individual video item in the API response.
+ */
+export interface VideoApiItem {
+    mediaId: string;
+    playbackUrl: string;
+}
+/**
+ * API response structure for fetching video data.
+ *
+ * @interface VideoApiResponse
+ */
+export interface VideoApiResponse {
+    result: {
+        items: VideoApiItem[];
+    };
+}
+/**
+ * Represents an item in a video playlist.
+ *
+ * @interface PlaylistItem
+ */
+export interface PlaylistItem {
+    mediaId: string;
+    videoId?: string;
+    title: string;
+    description?: string;
+    hlsUrl: string;
+    playbackUrl?: string;
+    file?: string;
+    thumbnailUrl: string;
+    duration: number;
+    durationString?: string;
+    isBackupPlaylist?: boolean;
+}
+/**
+ * API response structure for fetching playlist data.
+ *
+ * @interface PlaylistApiResponse
+ */
+export interface PlaylistApiResponse {
+    result: PlaylistItem[];
+}
+/**
+ * Result structure returned by the video data fetching logic.
+ *
+ * @interface VideoDataResult
+ */
+export interface VideoDataResult {
+    fetchedPlaybackUrl: string | null;
+    fetchedPlaylist: PlaylistItem[] | null;
+    isLoading: boolean;
+    error: string | null;
+}
+/**
+ * Represents data about the currently playing video.
+ * Used in onVideoStarted callback.
+ *
+ * @interface CurrentVideoData
+ */
+export 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;
+}

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './api.types';
+export * from './playerEvents.types';

package/dist/types/playerEvents.types.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Player event types that can be tracked
+ */
+export 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 event data structure
+ */
+export interface PlayerEventData {
+    event: PlayerEventType;
+    player: PlayerObject;
+    _clear?: boolean;
+}
+/**
+ * Player object structure for analytics
+ */
+export interface PlayerObject {
+    videoId?: string;
+    title?: string;
+    categoryName?: string;
+    publishedDate?: string;
+    isPremium?: boolean;
+    tags?: string[];
+    isReels?: boolean;
+    currentPosition?: number;
+    duration?: number;
+    progress?: number;
+}
+/**
+ * Callback function type for player events
+ * Accepts event name (PlayerEventType) and optionally currentPosition for progress events
+ */
+export type PlayerEventCallback = (event: PlayerEventType, currentPosition?: number) => void;
+/**
+ * Tracking metadata for analytics (available in v1.0.23+)
+ */
+export interface PlayerTrackingMetadata {
+    videoId: string;
+    title: string;
+    categoryName?: string;
+    publishedDate?: string;
+    isPremium?: boolean;
+    tags?: string[];
+    isReels?: boolean;
+}
+/**
+ * Individual event callbacks
+ * Each callback accepts only the event name (PlayerEventType)
+ */
+export 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;
+}

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './vpPlayerConfigBuilder';
+export * from './vpPlayerUtils';

package/dist/utils/vpPlayerConfigBuilder.d.ts

@@ -0,0 +1,30 @@
+import { VPPlayerConfig } from '../../../../../../../src/interfaces';
+import { PlaylistItem } from '../../../../../../../src/types';
+/**
+ * Interface for options used in building the VP Player configuration.
+ *
+ * @interface ConfigBuilderOptions
+ */
+interface ConfigBuilderOptions {
+    videoUrl?: string;
+    fetchedPlaybackUrl?: string;
+    fetchedPlaylist?: PlaylistItem[];
+    projectId?: string;
+    config?: Partial<VPPlayerConfig>;
+    isVerticalPlayer?: boolean;
+}
+/**
+ * Builds the final VP Player configuration based on available data.
+ * Handles different data sources in priority order:
+ * 1. Direct video URL
+ * 2. Single video from API
+ * 3. Playlist from API
+ * 4. Playlist from config
+ *
+ * @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, fetchedPlaybackUrl, fetchedPlaylist, projectId, config, isVerticalPlayer, }: ConfigBuilderOptions) => VPPlayerConfig;
+export {};

package/dist/utils/vpPlayerUtils.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Extracts the video ID from a given VP Player script URL.
+ *
+ * @function
+ * @param {string} [scriptUrl] - The script URL containing the video ID.
+ * @returns {string | undefined} The extracted video ID, or `undefined` if not found.
+ */
+export declare const extractVideoId: (scriptUrl?: string) => string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devix-technologies/react-gjirafa-vp-player",
-  "version": "1.0.28",
+  "version": "1.0.29",
   "type": "module",
   "main": "./dist/react-gjirafa-vp-player.umd.js",
   "module": "./dist/react-gjirafa-vp-player.es.js",
@@ -43,7 +43,8 @@
     "storybook": "^8.6.0",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.24.1",
-    "vite": "^6.2.0"
+    "vite": "^6.2.0",
+    "vite-plugin-dts": "^4.5.4"
   },
   "eslintConfig": {
     "extends": [
@@ -52,7 +53,7 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
+    "build": "vite build",
     "lint": "eslint . --max-warnings=0",
     "type-check": "tsc --noEmit",
     "check": "pnpm run lint && pnpm run type-check",