unified-video-framework 1.4.217 → 1.4.219

package/packages/web/src/react/WebPlayerView.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useRef, useState, useCallback } from 'react';
 import type { CSSProperties } from 'react';
 import type { VideoSource, SubtitleTrack, VideoMetadata, PlayerConfig } from '../../core/dist';
 import { WebPlayer } from '../WebPlayer';
+import { GoogleAdsManager } from '../ads/GoogleAdsManager';
 // EPG imports - conditionally loaded
 import type { EPGData, EPGConfig, EPGProgram, EPGProgramRow } from './types/EPGTypes';
 let EPGOverlay: React.ComponentType<any> | null = null;
@@ -20,6 +21,76 @@ const loadEPGComponents = async () => {
   return EPGOverlay;
 };
 
+// Chapter API interface exposed to parent component
+export interface ChapterAPI {
+  loadChapters: (chapters: any) => Promise<void>;
+  loadChaptersFromUrl: (url: string) => Promise<void>;
+  getCurrentSegment: () => any | null;
+  skipToSegment: (segmentId: string) => void;
+  getSegments: () => any[];
+  updateChapterConfig: (config: any) => void;
+  hasChapters: () => boolean;
+  getChapters: () => any | null;
+  getCoreChapters: () => any[];
+  getCoreSegments: () => any[];
+  getCurrentChapterInfo: () => any | null;
+  seekToChapter: (chapterId: string) => void;
+  getNextChapter: () => any | null;
+  getPreviousChapter: () => any | null;
+}
+
+// Quality control API
+export interface QualityAPI {
+  getQualities: () => any[];
+  getCurrentQuality: () => any | null;
+  setQuality: (index: number) => void;
+  setAutoQuality: (enabled: boolean) => void;
+}
+
+// EPG API interface
+export interface EPGControlAPI {
+  setEPGData: (data: any) => void;
+  showEPGButton: () => void;
+  hideEPGButton: () => void;
+  isEPGButtonVisible: () => boolean;
+}
+
+// UI Helper API
+export interface UIHelperAPI {
+  focusPlayer: () => void;
+  showFullscreenTip: () => void;
+  triggerFullscreenButton: () => void;
+  showTemporaryMessage: (message: string) => void;
+  showFullscreenInstructions: () => void;
+  enterFullscreenSynchronously: () => void;
+}
+
+// Fullscreen API
+export interface FullscreenAPI {
+  enterFullscreen: () => Promise<void>;
+  exitFullscreen: () => Promise<void>;
+  toggleFullscreen: () => Promise<void>;
+  enterPictureInPicture: () => Promise<void>;
+  exitPictureInPicture: () => Promise<void>;
+}
+
+// Playback control API
+export interface PlaybackAPI {
+  play: () => Promise<void>;
+  pause: () => void;
+  requestPause: () => void;
+  seek: (time: number) => void;
+  setVolume: (level: number) => void;
+  mute: () => void;
+  unmute: () => void;
+  toggleMute: () => void;
+  setPlaybackRate: (rate: number) => void;
+  getPlaybackRate: () => number;
+  getCurrentTime: () => number;
+  getDuration: () => number;
+  getState: () => any;
+}
+
 export type WebPlayerViewProps = {
   // Player config
   autoPlay?: boolean;
@@ -144,9 +215,45 @@ export type WebPlayerViewProps = {
     };
   };
 
+  // Settings customization
+  settingsScrollbar?: {
+    style?: 'default' | 'compact' | 'overlay';
+    widthPx?: number;
+    intensity?: number;
+  };
+  
+  // Auto-focus player on mount
+  autoFocusPlayer?: boolean;
+  
+  // Show fullscreen tip on mount
+  showFullscreenTipOnMount?: boolean;
+  
+  // Player instance ref (for imperative control)
+  playerRef?: React.RefObject<WebPlayer>;
+  
+  // API callbacks - expose imperative APIs to parent
+  onChapterAPI?: (api: ChapterAPI) => void;
+  onQualityAPI?: (api: QualityAPI) => void;
+  onEPGAPI?: (api: EPGControlAPI) => void;
+  onUIHelperAPI?: (api: UIHelperAPI) => void;
+  onFullscreenAPI?: (api: FullscreenAPI) => void;
+  onPlaybackAPI?: (api: PlaybackAPI) => void;
+  
   // Callbacks
   onReady?: (player: WebPlayer) => void;
   onError?: (error: unknown) => void;
+  
+  // Additional player event callbacks
+  onPlay?: () => void;
+  onPause?: () => void;
+  onEnded?: () => void;
+  onTimeUpdate?: (data: { currentTime: number; duration: number }) => void;
+  onProgress?: (data: { buffered: number }) => void;
+  onVolumeChange?: (data: { volume: number; muted: boolean }) => void;
+  onQualityChange?: (quality: any) => void;
+  onBuffering?: (isBuffering: boolean) => void;
+  onFullscreenChange?: (isFullscreen: boolean) => void;
+  onPictureInPictureChange?: (isPiP: boolean) => void;
 
   // EPG (Electronic Program Guide) support
   epg?: EPGData;
@@ -243,6 +350,21 @@ export type WebPlayerViewProps = {
   onNavigationBackClicked?: () => void;         // Back button clicked
   onNavigationCloseClicked?: () => void;        // Close button clicked
 
+  // Google Ads Configuration
+  googleAds?: {
+    adTagUrl: string;                    // VAST/VMAP ad tag URL
+    midrollTimes?: number[];            // Mid-roll ad times in seconds [30, 60, 120]
+    companionAdSlots?: Array<{          // Companion ad containers
+      containerId: string;
+      width: number;
+      height: number;
+    }>;
+    onAdStart?: () => void;             // Called when ad starts
+    onAdEnd?: () => void;               // Called when ad ends
+    onAdError?: (error: any) => void;   // Called on ad error
+    onAllAdsComplete?: () => void;      // Called when all ads complete
+  };
+  
   // Chapter Event Callbacks
   onChapterChange?: (chapter: any) => void;                                    // Core chapter changed
   onSegmentEntered?: (segment: any) => void;                                  // Segment entered  
@@ -258,7 +380,9 @@ export type WebPlayerViewProps = {
 
 export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
   const containerRef = useRef<HTMLDivElement>(null);
-  const playerRef = useRef<WebPlayer | null>(null);
+  const internalPlayerRef = useRef<WebPlayer | null>(null);
+  // Use external ref if provided, otherwise use internal
+  const playerRef = props.playerRef || internalPlayerRef;
   const [dimensions, setDimensions] = useState({
     width: typeof window !== 'undefined' ? window.innerWidth : 1920,
     height: typeof window !== 'undefined' ? window.innerHeight : 1080,
@@ -268,6 +392,10 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
   const [epgVisible, setEPGVisible] = useState(props.showEPG || false);
   const [playerReady, setPlayerReady] = useState(false);
   const [epgComponentLoaded, setEPGComponentLoaded] = useState(false);
+  
+  // Google Ads state
+  const adsManagerRef = useRef<GoogleAdsManager | null>(null);
+  const adContainerRef = useRef<HTMLDivElement>(null);
 
   // Responsive window resize handler
   useEffect(() => {
@@ -479,6 +607,9 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
 
       const player = new WebPlayer();
       playerRef.current = player;
+      
+      // Expose all APIs to parent component via callbacks
+      exposeAPIsToParent(player);
 
       // Optionally load Google Cast sender SDK
       if (props.cast) {
@@ -626,6 +757,21 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
         if (!cancelled) {
           setPlayerReady(true);
           
+          // Apply settings scrollbar configuration if provided
+          if (props.settingsScrollbar) {
+            applySettingsScrollbar(player, props.settingsScrollbar);
+          }
+          
+          // Auto-focus player if requested
+          if (props.autoFocusPlayer && typeof (player as any).focusPlayer === 'function') {
+            (player as any).focusPlayer();
+          }
+          
+          // Show fullscreen tip if requested
+          if (props.showFullscreenTipOnMount && typeof (player as any).showFullscreenTip === 'function') {
+            (player as any).showFullscreenTip();
+          }
+          
           // Set up EPG integration
           if (props.epg && typeof (player as any).setEPGData === 'function') {
             (player as any).setEPGData(props.epg);
@@ -678,6 +824,84 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
             (player as any).on('navigationCloseClicked', props.onNavigationCloseClicked);
           }
           
+          // Additional event listeners
+          if (props.onPlay && typeof (player as any).on === 'function') {
+            (player as any).on('onPlay', props.onPlay);
+          }
+          if (props.onPause && typeof (player as any).on === 'function') {
+            (player as any).on('onPause', props.onPause);
+          }
+          if (props.onEnded && typeof (player as any).on === 'function') {
+            (player as any).on('onEnded', props.onEnded);
+          }
+          if (props.onTimeUpdate && typeof (player as any).on === 'function') {
+            (player as any).on('onTimeUpdate', (currentTime: number) => {
+              props.onTimeUpdate?.({ 
+                currentTime, 
+                duration: (player as any).getDuration ? (player as any).getDuration() : 0 
+              });
+            });
+          }
+          if (props.onProgress && typeof (player as any).on === 'function') {
+            (player as any).on('onProgress', (buffered: number) => {
+              props.onProgress?.({ buffered });
+            });
+          }
+          if (props.onVolumeChange && typeof (player as any).on === 'function') {
+            (player as any).on('onVolumeChanged', (volume: number) => {
+              const state = (player as any).getState ? (player as any).getState() : {};
+              props.onVolumeChange?.({ volume, muted: state.isMuted || false });
+            });
+          }
+          if (props.onQualityChange && typeof (player as any).on === 'function') {
+            (player as any).on('onQualityChanged', props.onQualityChange);
+          }
+          if (props.onBuffering && typeof (player as any).on === 'function') {
+            (player as any).on('onBuffering', props.onBuffering);
+          }
+          if (props.onFullscreenChange && typeof (player as any).on === 'function') {
+            (player as any).on('onFullscreenChanged', props.onFullscreenChange);
+          }
+          if (props.onPictureInPictureChange && typeof (player as any).on === 'function') {
+            (player as any).on('onPictureInPicturechange', props.onPictureInPictureChange);
+          }
+          
+          // Initialize Google Ads if configured
+          if (props.googleAds && adContainerRef.current) {
+            try {
+              const videoElement = (player as any).video || (player as any).getVideoElement?.();
+              if (videoElement) {
+                const adsManager = new GoogleAdsManager(
+                  videoElement,
+                  adContainerRef.current,
+                  {
+                    adTagUrl: props.googleAds.adTagUrl,
+                    midrollTimes: props.googleAds.midrollTimes,
+                    companionAdSlots: props.googleAds.companionAdSlots,
+                    onAdStart: props.googleAds.onAdStart,
+                    onAdEnd: props.googleAds.onAdEnd,
+                    onAdError: props.googleAds.onAdError,
+                    onAllAdsComplete: props.googleAds.onAllAdsComplete,
+                  }
+                );
+                
+                await adsManager.initialize();
+                adsManagerRef.current = adsManager;
+                
+                // Initialize ad display container on first play
+                const handleFirstPlay = () => {
+                  adsManager.initAdDisplayContainer();
+                  adsManager.requestAds();
+                  videoElement.removeEventListener('play', handleFirstPlay);
+                };
+                videoElement.addEventListener('play', handleFirstPlay, { once: true });
+              }
+            } catch (adsError) {
+              console.error('Failed to initialize Google Ads:', adsError);
+              props.googleAds.onAdError?.(adsError);
+            }
+          }
+          
           props.onReady?.(player);
         }
       } catch (err) {
@@ -689,6 +913,13 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
 
     return () => {
       cancelled = true;
+      
+      // Cleanup ads manager
+      if (adsManagerRef.current) {
+        adsManagerRef.current.destroy();
+        adsManagerRef.current = null;
+      }
+      
       if (playerRef.current) {
         playerRef.current.destroy().catch(() => {});
         playerRef.current = null;
@@ -721,7 +952,142 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
     props.showFrameworkBranding,
     JSON.stringify(props.watermark),
     JSON.stringify(props.navigation),
-  ])
+    JSON.stringify(props.googleAds),
+  ]);
+  
+  // Helper function to expose all APIs to parent
+  const exposeAPIsToParent = useCallback((player: WebPlayer) => {
+    const p = player as any;
+    
+    // Chapter API
+    if (props.onChapterAPI) {
+      const chapterAPI: ChapterAPI = {
+        loadChapters: (chapters: any) => p.loadChapters ? p.loadChapters(chapters) : Promise.resolve(),
+        loadChaptersFromUrl: (url: string) => p.loadChaptersFromUrl ? p.loadChaptersFromUrl(url) : Promise.resolve(),
+        getCurrentSegment: () => p.getCurrentSegment ? p.getCurrentSegment() : null,
+        skipToSegment: (segmentId: string) => p.skipToSegment && p.skipToSegment(segmentId),
+        getSegments: () => p.getSegments ? p.getSegments() : [],
+        updateChapterConfig: (config: any) => p.updateChapterConfig && p.updateChapterConfig(config),
+        hasChapters: () => p.hasChapters ? p.hasChapters() : false,
+        getChapters: () => p.getChapters ? p.getChapters() : null,
+        getCoreChapters: () => p.getCoreChapters ? p.getCoreChapters() : [],
+        getCoreSegments: () => p.getCoreSegments ? p.getCoreSegments() : [],
+        getCurrentChapterInfo: () => p.getCurrentChapterInfo ? p.getCurrentChapterInfo() : null,
+        seekToChapter: (chapterId: string) => p.seekToChapter && p.seekToChapter(chapterId),
+        getNextChapter: () => p.getNextChapter ? p.getNextChapter() : null,
+        getPreviousChapter: () => p.getPreviousChapter ? p.getPreviousChapter() : null,
+      };
+      props.onChapterAPI(chapterAPI);
+    }
+    
+    // Quality API
+    if (props.onQualityAPI) {
+      const qualityAPI: QualityAPI = {
+        getQualities: () => p.getQualities ? p.getQualities() : [],
+        getCurrentQuality: () => p.getCurrentQuality ? p.getCurrentQuality() : null,
+        setQuality: (index: number) => p.setQuality && p.setQuality(index),
+        setAutoQuality: (enabled: boolean) => p.setAutoQuality && p.setAutoQuality(enabled),
+      };
+      props.onQualityAPI(qualityAPI);
+    }
+    
+    // EPG API
+    if (props.onEPGAPI) {
+      const epgAPI: EPGControlAPI = {
+        setEPGData: (data: any) => p.setEPGData && p.setEPGData(data),
+        showEPGButton: () => p.showEPGButton && p.showEPGButton(),
+        hideEPGButton: () => p.hideEPGButton && p.hideEPGButton(),
+        isEPGButtonVisible: () => p.isEPGButtonVisible ? p.isEPGButtonVisible() : false,
+      };
+      props.onEPGAPI(epgAPI);
+    }
+    
+    // UI Helper API
+    if (props.onUIHelperAPI) {
+      const uiAPI: UIHelperAPI = {
+        focusPlayer: () => p.focusPlayer && p.focusPlayer(),
+        showFullscreenTip: () => p.showFullscreenTip && p.showFullscreenTip(),
+        triggerFullscreenButton: () => p.triggerFullscreenButton && p.triggerFullscreenButton(),
+        showTemporaryMessage: (message: string) => p.showTemporaryMessage && p.showTemporaryMessage(message),
+        showFullscreenInstructions: () => p.showFullscreenInstructions && p.showFullscreenInstructions(),
+        enterFullscreenSynchronously: () => p.enterFullscreenSynchronously && p.enterFullscreenSynchronously(),
+      };
+      props.onUIHelperAPI(uiAPI);
+    }
+    
+    // Fullscreen API
+    if (props.onFullscreenAPI) {
+      const fullscreenAPI: FullscreenAPI = {
+        enterFullscreen: () => p.enterFullscreen ? p.enterFullscreen() : Promise.resolve(),
+        exitFullscreen: () => p.exitFullscreen ? p.exitFullscreen() : Promise.resolve(),
+        toggleFullscreen: () => p.toggleFullscreen ? p.toggleFullscreen() : Promise.resolve(),
+        enterPictureInPicture: () => p.enterPictureInPicture ? p.enterPictureInPicture() : Promise.resolve(),
+        exitPictureInPicture: () => p.exitPictureInPicture ? p.exitPictureInPicture() : Promise.resolve(),
+      };
+      props.onFullscreenAPI(fullscreenAPI);
+    }
+    
+    // Playback API
+    if (props.onPlaybackAPI) {
+      const playbackAPI: PlaybackAPI = {
+        play: () => p.play ? p.play() : Promise.resolve(),
+        pause: () => p.pause && p.pause(),
+        requestPause: () => p.requestPause && p.requestPause(),
+        seek: (time: number) => p.seek && p.seek(time),
+        setVolume: (level: number) => p.setVolume && p.setVolume(level),
+        mute: () => p.mute && p.mute(),
+        unmute: () => p.unmute && p.unmute(),
+        toggleMute: () => p.toggleMute && p.toggleMute(),
+        setPlaybackRate: (rate: number) => p.setPlaybackRate && p.setPlaybackRate(rate),
+        getPlaybackRate: () => p.getPlaybackRate ? p.getPlaybackRate() : 1,
+        getCurrentTime: () => p.getCurrentTime ? p.getCurrentTime() : 0,
+        getDuration: () => p.getDuration ? p.getDuration() : 0,
+        getState: () => p.getState ? p.getState() : {},
+      };
+      props.onPlaybackAPI(playbackAPI);
+    }
+  }, [
+    props.onChapterAPI,
+    props.onQualityAPI,
+    props.onEPGAPI,
+    props.onUIHelperAPI,
+    props.onFullscreenAPI,
+    props.onPlaybackAPI,
+  ]);
+  
+  // Helper function to apply settings scrollbar configuration
+  const applySettingsScrollbar = useCallback((player: WebPlayer, config: NonNullable<typeof props.settingsScrollbar>) => {
+    const p = player as any;
+    
+    // Apply scrollbar style
+    if (config.style && typeof p.setSettingsScrollbarStyle === 'function') {
+      p.setSettingsScrollbarStyle(config.style);
+    }
+    
+    // Apply scrollbar config (width and intensity)
+    if ((config.widthPx !== undefined || config.intensity !== undefined) && 
+        typeof p.setSettingsScrollbarConfig === 'function') {
+      p.setSettingsScrollbarConfig({
+        widthPx: config.widthPx,
+        intensity: config.intensity,
+      });
+    }
+  }, []);
+  
+  // Apply settings scrollbar changes at runtime
+  useEffect(() => {
+    const p = playerRef.current as any;
+    if (p && props.settingsScrollbar && playerReady) {
+      applySettingsScrollbar(p, props.settingsScrollbar);
+    }
+  }, [JSON.stringify(props.settingsScrollbar), playerReady, applySettingsScrollbar]);
+  
+  // Re-expose APIs when player is ready (handles hot reloading)
+  useEffect(() => {
+    if (playerRef.current && playerReady) {
+      exposeAPIsToParent(playerRef.current);
+    }
+  }, [playerReady, exposeAPIsToParent]);
 
   // Update free preview duration at runtime without full re-init
   useEffect(() => {
@@ -789,7 +1155,24 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
         ref={containerRef} 
         className={`uvf-responsive-container ${props.className || ''}`}
         style={responsiveStyle}
-      />
+      >
+        {/* Google Ads Container - positioned over the video */}
+        {props.googleAds && (
+          <div 
+            ref={adContainerRef}
+            className="uvf-ad-container"
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: '100%',
+              zIndex: 1000,
+              pointerEvents: 'none',
+            }}
+          />
+        )}
+      </div>
 
       {/* EPG Overlay */}
       {props.epg && EPGOverlay && epgComponentLoaded && (

package/packages/web/src/react/examples/google-ads-example.tsx

@@ -0,0 +1,196 @@
+import React, { useState } from 'react';
+import { WebPlayerView } from '../WebPlayerView';
+
+/**
+ * Example: Google Ads Integration with WebPlayerView
+ * 
+ * This example demonstrates how to integrate Google IMA ads
+ * (pre-roll, mid-roll, post-roll, and companion ads) with the video player.
+ */
+
+export const GoogleAdsExample: React.FC = () => {
+  const [adEvents, setAdEvents] = useState<string[]>([]);
+
+  const logAdEvent = (event: string) => {
+    console.log(`[Ad Event] ${event}`);
+    setAdEvents(prev => [...prev, `${new Date().toLocaleTimeString()}: ${event}`]);
+  };
+
+  return (
+    <div style={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
+      <div style={{ flex: 1, position: 'relative' }}>
+        <WebPlayerView
+          // Video source
+          url="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
+          type="mp4"
+          
+          // Basic player config
+          autoPlay={false}
+          controls={true}
+          
+          // Google Ads Configuration
+          googleAds={{
+            // VAST/VMAP ad tag URL from your ad server
+            // This example uses Google's IMA test tag
+            adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_ad_samples&sz=640x480&cust_params=sample_ct%3Dlinear&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=',
+            
+            // Optional: Specific mid-roll times (in seconds)
+            // If not provided, VMAP schedule from ad server is used
+            midrollTimes: [30, 60, 120],
+            
+            // Optional: Companion ads (sidebar/banner ads)
+            companionAdSlots: [
+              {
+                containerId: 'companion-ad-300x250',
+                width: 300,
+                height: 250,
+              },
+              {
+                containerId: 'companion-ad-728x90',
+                width: 728,
+                height: 90,
+              },
+            ],
+            
+            // Ad event callbacks
+            onAdStart: () => {
+              logAdEvent('Ad Started');
+            },
+            
+            onAdEnd: () => {
+              logAdEvent('Ad Ended - Resuming Content');
+            },
+            
+            onAdError: (error: any) => {
+              logAdEvent(`Ad Error: ${error?.getMessage?.() || error}`);
+            },
+            
+            onAllAdsComplete: () => {
+              logAdEvent('All Ads Completed');
+            },
+          }}
+          
+          // Video metadata
+          metadata={{
+            title: 'Big Buck Bunny with Google Ads',
+            description: 'Demo video with pre-roll, mid-roll, and post-roll ads',
+          }}
+          
+          // Player callbacks
+          onReady={(player) => {
+            console.log('Player ready with Google Ads integration');
+          }}
+          
+          onError={(error) => {
+            console.error('Player error:', error);
+          }}
+        />
+      </div>
+      
+      {/* Companion Ad Slots */}
+      <div style={{ 
+        display: 'flex', 
+        justifyContent: 'center', 
+        gap: '20px', 
+        padding: '20px',
+        backgroundColor: '#f5f5f5',
+      }}>
+        {/* 300x250 Companion Ad */}
+        <div 
+          id="companion-ad-300x250"
+          style={{
+            width: '300px',
+            height: '250px',
+            border: '1px solid #ddd',
+            backgroundColor: '#fff',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: '#999',
+          }}
+        >
+          300x250 Companion Ad
+        </div>
+        
+        {/* 728x90 Companion Ad */}
+        <div 
+          id="companion-ad-728x90"
+          style={{
+            width: '728px',
+            height: '90px',
+            border: '1px solid #ddd',
+            backgroundColor: '#fff',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: '#999',
+          }}
+        >
+          728x90 Companion Ad
+        </div>
+      </div>
+      
+      {/* Ad Event Log */}
+      <div style={{ 
+        padding: '20px',
+        backgroundColor: '#f9f9f9',
+        borderTop: '1px solid #ddd',
+        maxHeight: '200px',
+        overflowY: 'auto',
+      }}>
+        <h3 style={{ margin: '0 0 10px 0', fontSize: '16px' }}>Ad Events Log:</h3>
+        {adEvents.length === 0 ? (
+          <p style={{ color: '#999', margin: 0 }}>No ad events yet. Play the video to see ads.</p>
+        ) : (
+          <ul style={{ margin: 0, padding: '0 0 0 20px' }}>
+            {adEvents.map((event, index) => (
+              <li key={index} style={{ fontSize: '14px', marginBottom: '5px' }}>
+                {event}
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Usage Notes:
+ * 
+ * 1. Ad Tag URL:
+ *    - Use VAST or VMAP ad tag from your ad server (e.g., Google Ad Manager, SpotX)
+ *    - The example uses Google's IMA test tag for demonstration
+ *    - VAST: Single ad unit
+ *    - VMAP: Ad schedule with pre/mid/post-rolls
+ * 
+ * 2. Ad Types Supported:
+ *    - Pre-roll: Plays before video content
+ *    - Mid-roll: Plays during video at specified times
+ *    - Post-roll: Plays after video ends
+ *    - Overlay ads: Non-linear ads on video
+ *    - Companion ads: Banner/sidebar ads
+ *    - Skippable & non-skippable ads
+ * 
+ * 3. Mid-roll Configuration:
+ *    - Specify times in seconds: [30, 60, 120]
+ *    - Or use VMAP schedule from ad server
+ * 
+ * 4. Companion Ads:
+ *    - Create HTML containers with specific IDs
+ *    - Specify dimensions in config
+ *    - Ads will be automatically inserted
+ * 
+ * 5. Ad Events:
+ *    - onAdStart: When ad begins playing
+ *    - onAdEnd: When ad completes
+ *    - onAdError: When ad fails to load/play
+ *    - onAllAdsComplete: When all ads in pod complete
+ * 
+ * 6. Testing:
+ *    - Use Google's test tags: https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/tags
+ *    - Test different ad formats and scenarios
+ *    - Handle errors gracefully (network, ad blocker, etc.)
+ */
+
+export default GoogleAdsExample;