unified-video-framework 1.4.217 → 1.4.218

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

@@ -20,6 +20,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 +214,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;
@@ -258,7 +364,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,
@@ -479,6 +587,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 +737,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 +804,48 @@ 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);
+          }
+          
           props.onReady?.(player);
         }
       } catch (err) {
@@ -721,7 +889,141 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
     props.showFrameworkBranding,
     JSON.stringify(props.watermark),
     JSON.stringify(props.navigation),
-  ])
+  ]);
+  
+  // 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(() => {