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

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"];
+}