@devix-technologies/react-gjirafa-vp-player 1.0.31-beta.3 → 1.0.31-beta.5

package/dist/index.d.ts

@@ -1,12 +1,14 @@
 import { CurrentVideoData as CurrentVideoData_2 } from '../../../../../../../src/types';
 import { DetailedHTMLProps } from 'react';
+import { ForwardRefExoticComponent } from 'react';
 import { HTMLAttributes } from 'react';
-import { JSX } from 'react/jsx-runtime';
+import { RefAttributes } from 'react';
 import { RefObject } from 'react';
 import { StyledComponent } from '@emotion/styled';
 import { Theme } from '@emotion/react';
 import { VPPlayerInstance as VPPlayerInstance_2 } from '../../../../../../../src/interfaces';
 import { VPPlayerProps as VPPlayerProps_2 } from '../../../../../../../src/interfaces';
+import { VPPlayerRef as VPPlayerRef_2 } from '../../../../../../../src/interfaces';
 
 /**
  * Appends the divId query parameter to a script URL.
@@ -386,6 +388,23 @@ export declare const VP_PLAYER_BASE_URL = "https://host.vpplayer.tech";
  * />
  * ```
  *
+ * ## Using the ref for imperative control
+ *
+ * ```tsx
+ * const playerRef = useRef<VPPlayerRef>(null);
+ *
+ * <VPPlayer
+ *   ref={playerRef}
+ *   scriptId="ptkzurnx"
+ *   videoId="vjsobqhe"
+ * />
+ *
+ * // Later:
+ * playerRef.current?.seek(60);
+ * playerRef.current?.play();
+ * console.log(playerRef.current?.getPosition());
+ * ```
+ *
  * ## Manual Playlist Mode (Vertical Player)
  *
  * For vertical player with custom videos array:
@@ -422,7 +441,7 @@ export declare const VP_PLAYER_BASE_URL = "https://host.vpplayer.tech";
  *
  * @param props - VPPlayer configuration props
  */
-export declare const VPPlayer: ({ scriptId, videoId, scriptUrl, projectId, playlist, playerId, isVertical, isReels, thumbnailUrl, onClose, className, hiddenClasses, onReady, onPlay, onPause, onResume, onComplete, onError, onVideoStarted, onTimeUpdate, onQuartile25, onQuartile50, onQuartile75, onNext, onPrevious, onProgress10s, onProgress20s, }: VPPlayerProps_2) => JSX.Element;
+export declare const VPPlayer: ForwardRefExoticComponent<VPPlayerProps_2 & RefAttributes<VPPlayerRef_2>>;
 
 /**
  * VP Player Configuration Types (v2.0.0)
@@ -456,8 +475,12 @@ export declare interface VPPlayerAdsConfig {
 
 /**
  * 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
+ *
+ * NOTE: The VP Player SDK does not ship with TypeScript types.
+ * This is our own type definition based on the official API documentation.
+ *
+ * @see https://vp.gjirafa.tech/documentation/docs/web-player/api-reference
+ * @see https://vp.gjirafa.tech/documentation/docs/vertical-player/api-reference
  *
  * @interface VPPlayerInstance
  */
@@ -476,8 +499,6 @@ export declare interface VPPlayerInstance {
     exitFullScreen?: () => void;
     enterFullscreen?: () => void;
     exitFullscreen?: () => void;
-    enterPictureInPicture?: () => void;
-    exitPictureInPicture?: () => void;
     togglePlay?: () => void;
     toggleMute?: () => void;
     isMuted?: () => boolean;
@@ -669,4 +690,42 @@ export declare interface VPPlayerProps {
     onProgress20s?: (seconds: number) => void;
 }
 
+/**
+ * Interface for the imperative handle exposed by VPPlayer via ref.
+ * Use this to call player methods from parent components.
+ *
+ * @example
+ * ```tsx
+ * const playerRef = useRef<VPPlayerRef>(null);
+ *
+ * <VPPlayer ref={playerRef} scriptId="..." videoId="..." />
+ *
+ * // Later:
+ * playerRef.current?.seek(60);
+ * playerRef.current?.play();
+ * ```
+ */
+export declare interface VPPlayerRef {
+    play: () => void;
+    pause: () => void;
+    seek: (position: number) => void;
+    forward: () => void;
+    rewind: () => void;
+    replay: () => void;
+    mute: () => void;
+    unmute: () => void;
+    togglePlay: () => void;
+    toggleMute: () => void;
+    enterFullScreen: () => void;
+    exitFullScreen: () => void;
+    getPosition: () => number | null;
+    getDuration: () => number | null;
+    getVolume: () => number | null;
+    setVolume: (volume: number) => void;
+    isMuted: () => boolean;
+    isPlaying: () => boolean;
+    isPaused: () => boolean;
+    isFullscreen: () => boolean;
+}
+
 export { }