@devix-technologies/react-gjirafa-vp-player 1.0.0 → 1.0.1

package/dist/interfaces/config.d.ts

@@ -0,0 +1,303 @@
+/**
+ * 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[];
+        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;
+        };
+        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,11 @@
+import { VPPlayerConfig } from "./config";
+/**
+ * Interface representing an instance of the VP Player.
+ *
+ * @interface
+ */
+export interface VPPlayerInstance {
+    setup: (config: VPPlayerConfig) => void;
+    destroy?: () => void;
+    play?: () => void;
+}

package/dist/interfaces/props.d.ts

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

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