@devix-technologies/react-gjirafa-vp-player 1.0.31-beta.6 → 1.0.31-beta.9

package/README.md

@@ -157,24 +157,39 @@ The player fills its container (100% width/height). Control sizing with a wrappe
 
 ### Event Callbacks
 
-| Prop | Description |
-|------|-------------|
-| `onReady` | Player initialized |
-| `onPlay` | Playback started |
-| `onPause` | Playback paused |
-| `onResume` | Playback resumed |
-| `onComplete` | Video completed |
-| `onError` | Error occurred |
-| `onVideoStarted` | Video metadata available |
-| `onTimeUpdate` | Continuous time updates |
-| `onQuartile25` | 25% watched |
-| `onQuartile50` | 50% watched |
-| `onQuartile75` | 75% watched |
-| `onNext` | Next video in playlist |
-| `onPrevious` | Previous video |
-| `onProgress10s` | Every 10 seconds |
-| `onProgress20s` | 20 second milestone |
-| `onClose` | Reels overlay closed |
+| Prop | Horizontal | Vertical | Description |
+|------|:----------:|:--------:|-------------|
+| `onReady` | ✓ | ✓ | Player initialized |
+| `onPlay` | ✓ | ✓ | Playback started |
+| `onPause` | ✓ | ✓ | Playback paused |
+| `onComplete` | ✓ | ✗ | Video completed (horizontal only) |
+| `onError` | ✓ | ✓ | Error occurred |
+| `onVideoStarted` | ✓ | ✓ | Video metadata available (returns `CurrentVideoData`) |
+| `onTimeUpdate` | ✓ | ✓ | Continuous time updates (returns seconds) |
+| `onQuartile25` | ✓ | ✓ | 25% watched |
+| `onQuartile50` | ✓ | ✓ | 50% watched |
+| `onQuartile75` | ✓ | ✓ | 75% watched |
+| `onNext` | ✓ | ✓ | Next video in playlist |
+| `onPrevious` | ✗ | ✓ | Previous video (vertical only) |
+| `onProgress10s` | ✓ | ✓ | Every ~10 seconds (returns seconds) |
+| `onProgress20s` | ✓ | ✓ | 20 second milestone (returns seconds) |
+| `onClose` | - | - | Reels overlay closed |
+
+#### Event Implementation Notes
+
+**Horizontal Player** uses standard VP Player SDK events:
+- `ready`, `play`, `pause`, `complete`, `video-started`, `video-state`, `time`, `playlistItem`, `error`
+- Quartiles: `analytics-25%-completed`, `analytics-50%-completed`, `analytics-75%-completed`
+
+**Vertical Player** uses VP Vertical Player SDK events (different naming):
+- `vp-ready`, `playing`, `pause`, `vp-video-started`, `vp-video-state`, `vp-time`, `vp-video-switch`, `error`
+- Quartiles: `analytics-25%-completed`, `analytics-50%-completed`, `analytics-75%-completed`
+- Direction detection: Uses `player._switchDirection` property (via `queueMicrotask`) to differentiate `onNext` vs `onPrevious`
+
+**Key Differences:**
+- `onComplete` - Only available on horizontal player (vertical auto-advances)
+- `onPrevious` - Only available on vertical player (horizontal has no direction detection)
+- `onNext` on horizontal fires for ANY playlist change (next button, auto-advance after complete)
 
 ## URL Helpers
 

package/dist/index.d.ts

@@ -251,10 +251,9 @@ export declare type DeepPartial<T> = T extends object ? {
  * Prevents stale closures in event handlers
  */
 export declare interface EventCallbackRefs {
-    onReady?: () => void;
-    onPlay?: () => void;
+    onReady?: (data?: CurrentVideoData_2) => void;
+    onPlay?: (data?: CurrentVideoData_2) => void;
     onPause?: () => void;
-    onResume?: () => void;
     onComplete?: () => void;
     onError?: (error: string) => void;
     onVideoStarted?: (data: CurrentVideoData_2) => void;
@@ -725,7 +724,7 @@ export declare interface TimesliderSkin {
  * 1. **Auto-init mode** (default): Load managed script that auto-initializes with GTech admin config
  * 2. **Config override mode**: Fetch config, merge user overrides, and call setup()
  */
-export declare const useVPPlayerLogic: ({ scriptId, videoId, scriptUrl, projectId, config, playerId, isVertical, isReels, onReady, onPlay, onPause, onResume, onComplete, onError, onVideoStarted, onTimeUpdate, onQuartile25, onQuartile50, onQuartile75, onNext, onPrevious, onProgress10s, onProgress20s, }: VPPlayerProps_2) => {
+export declare const useVPPlayerLogic: ({ scriptId, videoId, scriptUrl, projectId, config, playerId, isVertical, isReels, onReady, onPlay, onPause, onComplete, onError, onVideoStarted, onTimeUpdate, onQuartile25, onQuartile50, onQuartile75, onNext, onPrevious, onProgress10s, onProgress20s, }: VPPlayerProps_2) => {
     playerRef: RefObject<HTMLDivElement | null>;
     playerInstanceRef: RefObject<VPPlayerInstance_2 | null>;
     isScriptLoaded: boolean;
@@ -1084,20 +1083,18 @@ export declare interface VPPlayerProps {
     hiddenClasses?: string[];
     /**
      * Called when the player is ready/initialized
+     * @param data - Optional video metadata (available in vertical player)
      */
-    onReady?: () => void;
+    onReady?: (data?: CurrentVideoData_2) => void;
     /**
      * Called when playback starts
+     * @param data - Optional video metadata (available in vertical player)
      */
-    onPlay?: () => void;
+    onPlay?: (data?: CurrentVideoData_2) => void;
     /**
      * Called when playback is paused
      */
     onPause?: () => void;
-    /**
-     * Called when playback resumes after pause
-     */
-    onResume?: () => void;
     /**
      * Called when video playback completes
      */