@devix-technologies/react-gjirafa-vp-player 1.0.10 → 1.0.12

package/dist/hooks/index.d.ts

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

package/dist/hooks/useVPPlayerLogic.d.ts

@@ -1,22 +0,0 @@
-import { VPPlayerInstance, VPPlayerProps } from "@/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, apiKey, isReels, }: 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

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

@@ -1,21 +0,0 @@
-import { VideoDataResult } from "@/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).
- * @param {string} [params.apiKey] - The API key for authentication (optional, defaults to environment variable).
- * @returns {VideoDataResult} - Result object with URL, playlist, loading and error states
- */
-export declare const useVideoData: ({ projectId, videoId, playlistId, videoUrl, apiKey, }: {
-    projectId?: string;
-    videoId?: string;
-    playlistId?: string;
-    videoUrl?: string;
-    apiKey?: string;
-}) => VideoDataResult;

package/dist/index.d.ts

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

@@ -1,311 +0,0 @@
-/**
- * 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: {
-        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;
-                title: string;
-                thumbnailUrl?: string;
-                duration?: number;
-                file?: 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

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

package/dist/interfaces/instance.d.ts

@@ -1,73 +0,0 @@
-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

@@ -1,54 +0,0 @@
-import { VPPlayerConfig } from "./config";
-/**
- * Interface defining the parameters for configuring the VP Player instance.
- *
- * @interface
- */
-export interface PlayerParams {
-    playerId?: string;
-    videoId?: string;
-    projectId?: string;
-    videoUrl?: string;
-    playlistId?: string;
-    scriptUrl?: string;
-    version?: string | null;
-    config?: Partial<VPPlayerConfig>;
-    thumbnailUrl?: string;
-    isReels?: boolean;
-    hiddenClasses?: string[];
-    apiKey?: string;
-    className?: string;
-}
-/**
- * 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;
-    videoId?: string;
-    projectId?: string;
-    videoUrl?: string;
-    playlistId?: string;
-    scriptUrl?: string;
-    version?: string | null;
-    config?: Partial<VPPlayerConfig>;
-    isReels?: boolean;
-    thumbnailUrl?: string;
-    onClose?: () => void;
-    hiddenClasses?: string[];
-    apiKey?: string;
-    isPlayerVisible?: boolean;
-    className?: string;
-}

package/dist/main.d.ts

@@ -1 +0,0 @@
-import "./index.css";

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

@@ -1,50 +0,0 @@
-/**
- * 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 {
-    title: string;
-    hlsUrl: string;
-    thumbnailUrl: string;
-    duration: number;
-}
-/**
- * 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;
-}

package/dist/types/index.d.ts

@@ -1 +0,0 @@
-export * from "./api.types";

package/dist/utils/index.d.ts

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

package/dist/utils/vpPlayerConfigBuilder.d.ts

@@ -1,30 +0,0 @@
-import { VPPlayerConfig } from "@/interfaces";
-import { PlaylistItem } from "@/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

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