@therealtinhtute/baroiplayer 1.0.0

package/src/core/performance/media-loading-optimizer.ts

@@ -0,0 +1,538 @@
+import React from 'react';
+
+// Network monitoring and adaptive loading
+export interface NetworkInfo {
+  effectiveType: '2g' | '3g' | '4g' | '5g' | 'unknown';
+  downlink: number; // Mbps
+  rtt: number; // Round trip time in ms
+  saveData: boolean;
+  isOnline: boolean;
+}
+
+export interface MediaLoadingConfig {
+  preloadStrategy: 'none' | 'metadata' | 'auto';
+  adaptiveBitrate: boolean;
+  maxPreloadSize: number; // bytes
+  networkThresholds: {
+    '2g': { maxBitrate: number; preload: boolean };
+    '3g': { maxBitrate: number; preload: boolean };
+    '4g': { maxBitrate: number; preload: boolean };
+    '5g': { maxBitrate: number; preload: boolean };
+  };
+  bufferSize: number; // seconds
+  enableServiceWorker: boolean;
+}
+
+export const defaultMediaLoadingConfig: MediaLoadingConfig = {
+  preloadStrategy: 'metadata',
+  adaptiveBitrate: true,
+  maxPreloadSize: 2 * 1024 * 1024, // 2MB
+  networkThresholds: {
+    '2g': { maxBitrate: 128, preload: false }, // 128 kbps
+    '3g': { maxBitrate: 500, preload: false }, // 500 kbps  
+    '4g': { maxBitrate: 2000, preload: true }, // 2 Mbps
+    '5g': { maxBitrate: 10000, preload: true } // 10 Mbps
+  },
+  bufferSize: 10, // 10 seconds
+  enableServiceWorker: true
+};
+
+// Media loading performance tracker
+export interface MediaLoadingMetrics {
+  loadStartTime: number;
+  firstByteTime?: number;
+  loadCompleteTime?: number;
+  totalLoadTime?: number;
+  bytesLoaded: number;
+  loadSpeed: number; // bytes per second
+  networkType: string;
+  quality: string;
+  bufferHealth: number; // 0-1 scale
+  stallsCount: number;
+  stallsDuration: number;
+}
+
+// Network monitoring utility
+export class NetworkMonitor {
+  private connection: any;
+  private listeners: Set<(info: NetworkInfo) => void> = new Set();
+  private currentInfo: NetworkInfo;
+
+  constructor() {
+    if (typeof window === 'undefined' || typeof navigator === 'undefined') {
+      // Server-side rendering fallback
+      this.connection = null;
+      this.currentInfo = {
+        effectiveType: 'unknown',
+        downlink: 0,
+        rtt: 0,
+        saveData: false,
+        isOnline: true
+      };
+      return;
+    }
+
+    this.connection = (navigator as any).connection || 
+                      (navigator as any).mozConnection || 
+                      (navigator as any).webkitConnection;
+    
+    this.currentInfo = this.getNetworkInfo();
+    this.initializeListeners();
+  }
+
+  private getNetworkInfo(): NetworkInfo {
+    if (typeof navigator === 'undefined') {
+      // Server-side rendering fallback
+      return {
+        effectiveType: 'unknown',
+        downlink: 0,
+        rtt: 0,
+        saveData: false,
+        isOnline: true
+      };
+    }
+
+    const isOnline = navigator.onLine;
+    
+    if (this.connection) {
+      return {
+        effectiveType: this.connection.effectiveType || 'unknown',
+        downlink: this.connection.downlink || 0,
+        rtt: this.connection.rtt || 0,
+        saveData: this.connection.saveData || false,
+        isOnline
+      };
+    }
+
+    // Fallback for browsers without Network Information API
+    return {
+      effectiveType: 'unknown',
+      downlink: 0,
+      rtt: 0,
+      saveData: false,
+      isOnline
+    };
+  }
+
+  private initializeListeners() {
+    if (typeof window === 'undefined') {
+      // Server-side rendering - skip event listeners
+      return;
+    }
+
+    if (this.connection) {
+      this.connection.addEventListener('change', this.handleNetworkChange.bind(this));
+    }
+    
+    window.addEventListener('online', this.handleNetworkChange.bind(this));
+    window.addEventListener('offline', this.handleNetworkChange.bind(this));
+  }
+
+  private handleNetworkChange() {
+    const newInfo = this.getNetworkInfo();
+    this.currentInfo = newInfo;
+    this.listeners.forEach(listener => listener(newInfo));
+  }
+
+  getCurrentNetworkInfo(): NetworkInfo {
+    return { ...this.currentInfo };
+  }
+
+  subscribe(listener: (info: NetworkInfo) => void): () => void {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+
+  // Estimate available bandwidth with fallback detection
+  async estimateBandwidth(): Promise<number> {
+    if (this.connection && this.connection.downlink) {
+      return this.connection.downlink * 1000; // Convert to kbps
+    }
+
+    // Fallback: simple bandwidth test
+    try {
+      const startTime = performance.now();
+      const testUrl = '/api/bandwidth-test?size=100kb'; // Would need to be implemented
+      const response = await fetch(testUrl);
+      const blob = await response.blob();
+      const endTime = performance.now();
+      
+      const timeInSeconds = (endTime - startTime) / 1000;
+      const bytesLoaded = blob.size;
+      const bitsPerSecond = (bytesLoaded * 8) / timeInSeconds;
+      
+      return bitsPerSecond / 1000; // Return in kbps
+    } catch (error) {
+      console.warn('Bandwidth estimation failed:', error);
+      return 1000; // Default to 1Mbps
+    }
+  }
+}
+
+// Media loading optimizer
+export class MediaLoadingOptimizer {
+  private config: MediaLoadingConfig;
+  private networkMonitor: NetworkMonitor;
+  private loadingMetrics: Map<string, MediaLoadingMetrics> = new Map();
+  private preloadCache: Map<string, Promise<Blob>> = new Map();
+
+  constructor(config: Partial<MediaLoadingConfig> = {}) {
+    this.config = { ...defaultMediaLoadingConfig, ...config };
+    this.networkMonitor = new NetworkMonitor();
+    this.initializeNetworkMonitoring();
+  }
+
+  private initializeNetworkMonitoring() {
+    this.networkMonitor.subscribe((networkInfo) => {
+      this.handleNetworkChange(networkInfo);
+    });
+  }
+
+  private handleNetworkChange(networkInfo: NetworkInfo) {
+    console.log('Network changed:', networkInfo);
+    
+    // Adjust quality based on network conditions
+    if (this.config.adaptiveBitrate) {
+      this.adjustQualityForNetwork(networkInfo);
+    }
+
+    // Clear preload cache if on slow network
+    if (networkInfo.effectiveType === '2g' || networkInfo.saveData) {
+      this.clearPreloadCache();
+    }
+  }
+
+  // Optimize media loading based on network conditions
+  async optimizeMediaLoading(
+    mediaUrl: string,
+    element: HTMLMediaElement,
+    options: {
+      quality?: string;
+      preload?: boolean;
+      priority?: 'high' | 'normal' | 'low';
+    } = {}
+  ): Promise<MediaLoadingMetrics> {
+    const startTime = performance.now();
+    const networkInfo = this.networkMonitor.getCurrentNetworkInfo();
+    
+    const metrics: MediaLoadingMetrics = {
+      loadStartTime: startTime,
+      bytesLoaded: 0,
+      loadSpeed: 0,
+      networkType: networkInfo.effectiveType,
+      quality: options.quality || 'auto',
+      bufferHealth: 0,
+      stallsCount: 0,
+      stallsDuration: 0
+    };
+
+    this.loadingMetrics.set(mediaUrl, metrics);
+
+    try {
+      // Choose optimal loading strategy
+      const loadingStrategy = this.chooseLoadingStrategy(networkInfo, options);
+      
+      // Apply preload strategy
+      if (loadingStrategy.shouldPreload) {
+        await this.preloadMedia(mediaUrl, loadingStrategy.preloadAmount);
+      }
+
+      // Set appropriate preload attribute
+      element.preload = loadingStrategy.preloadAttribute;
+
+      // Monitor loading progress
+      this.monitorLoadingProgress(element, metrics);
+
+      // Apply quality adjustments
+      if (this.config.adaptiveBitrate && loadingStrategy.suggestedQuality) {
+        this.applyQualitySettings(element, loadingStrategy.suggestedQuality);
+      }
+
+      return metrics;
+    } catch (error) {
+      console.error('Media loading optimization failed:', error);
+      return metrics;
+    }
+  }
+
+  private chooseLoadingStrategy(
+    networkInfo: NetworkInfo,
+    options: { preload?: boolean; priority?: string; quality?: string }
+  ) {
+    const effectiveType = networkInfo.effectiveType === 'unknown' ? '4g' : networkInfo.effectiveType;
+    const threshold = this.config.networkThresholds[effectiveType] || 
+                     this.config.networkThresholds['4g'];
+    
+    return {
+      shouldPreload: options.preload !== false && threshold.preload && !networkInfo.saveData,
+      preloadAmount: networkInfo.saveData ? 0 : this.config.maxPreloadSize,
+      preloadAttribute: this.getPreloadAttribute(networkInfo),
+      suggestedQuality: this.getSuggestedQuality(networkInfo, threshold.maxBitrate),
+      bufferTarget: this.getBufferTarget(networkInfo)
+    };
+  }
+
+  private getPreloadAttribute(networkInfo: NetworkInfo): 'none' | 'metadata' | 'auto' {
+    if (networkInfo.saveData || networkInfo.effectiveType === '2g') {
+      return 'none';
+    }
+    
+    if (networkInfo.effectiveType === '3g') {
+      return 'metadata';
+    }
+    
+    return this.config.preloadStrategy;
+  }
+
+  private getSuggestedQuality(networkInfo: NetworkInfo, maxBitrate: number): string {
+    const availableBandwidth = networkInfo.downlink * 1000; // Convert to kbps
+    
+    if (availableBandwidth >= maxBitrate * 2) return 'high';
+    if (availableBandwidth >= maxBitrate) return 'medium';
+    return 'low';
+  }
+
+  private getBufferTarget(networkInfo: NetworkInfo): number {
+    switch (networkInfo.effectiveType) {
+      case '2g': return 2; // 2 seconds
+      case '3g': return 5; // 5 seconds
+      case '4g': return this.config.bufferSize;
+      case '5g': return this.config.bufferSize * 1.5;
+      default: return this.config.bufferSize;
+    }
+  }
+
+  // Preload media content
+  async preloadMedia(url: string, maxSize: number): Promise<void> {
+    if (this.preloadCache.has(url)) {
+      return; // Already preloading or preloaded
+    }
+
+    const preloadPromise = this.fetchWithProgress(url, maxSize);
+    this.preloadCache.set(url, preloadPromise);
+
+    try {
+      await preloadPromise;
+    } catch (error) {
+      console.warn(`Preload failed for ${url}:`, error);
+      this.preloadCache.delete(url);
+    }
+  }
+
+  private async fetchWithProgress(url: string, maxSize: number): Promise<Blob> {
+    const response = await fetch(url, {
+      headers: {
+        'Range': `bytes=0-${maxSize - 1}` // Limit preload size
+      }
+    });
+
+    if (!response.ok) {
+      throw new Error(`Failed to preload: ${response.status}`);
+    }
+
+    const reader = response.body?.getReader();
+    if (!reader) {
+      throw new Error('Response body not readable');
+    }
+
+    const chunks: Uint8Array[] = [];
+    let bytesRead = 0;
+
+    try {
+      while (bytesRead < maxSize) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        
+        chunks.push(value);
+        bytesRead += value.length;
+      }
+    } finally {
+      reader.releaseLock();
+    }
+
+    return new Blob(chunks);
+  }
+
+  // Monitor loading progress and update metrics
+  private monitorLoadingProgress(element: HTMLMediaElement, metrics: MediaLoadingMetrics) {
+    let stallStartTime: number | null = null;
+
+    const updateMetrics = () => {
+      if (element.buffered.length > 0) {
+        const bufferedEnd = element.buffered.end(element.buffered.length - 1);
+        const currentTime = element.currentTime;
+        metrics.bufferHealth = Math.min((bufferedEnd - currentTime) / this.config.bufferSize, 1);
+      }
+    };
+
+    // Track first byte
+    const onLoadStart = () => {
+      metrics.firstByteTime = performance.now();
+    };
+
+    // Track load completion
+    const onCanPlay = () => {
+      metrics.loadCompleteTime = performance.now();
+      metrics.totalLoadTime = metrics.loadCompleteTime - metrics.loadStartTime;
+      
+      // Calculate load speed
+      if (metrics.totalLoadTime && metrics.bytesLoaded > 0) {
+        metrics.loadSpeed = metrics.bytesLoaded / (metrics.totalLoadTime / 1000);
+      }
+    };
+
+    // Track stalls
+    const onWaiting = () => {
+      if (stallStartTime === null) {
+        stallStartTime = performance.now();
+        metrics.stallsCount++;
+      }
+    };
+
+    const onPlaying = () => {
+      if (stallStartTime !== null) {
+        metrics.stallsDuration += performance.now() - stallStartTime;
+        stallStartTime = null;
+      }
+      updateMetrics();
+    };
+
+    // Track progress
+    const onProgress = () => {
+      if (element.buffered.length > 0) {
+        const bufferedBytes = element.buffered.end(0) * 1000; // Rough estimate
+        metrics.bytesLoaded = bufferedBytes;
+      }
+      updateMetrics();
+    };
+
+    // Add event listeners
+    element.addEventListener('loadstart', onLoadStart);
+    element.addEventListener('canplay', onCanPlay);
+    element.addEventListener('waiting', onWaiting);
+    element.addEventListener('playing', onPlaying);
+    element.addEventListener('progress', onProgress);
+
+    // Cleanup function
+    const cleanup = () => {
+      element.removeEventListener('loadstart', onLoadStart);
+      element.removeEventListener('canplay', onCanPlay);
+      element.removeEventListener('waiting', onWaiting);
+      element.removeEventListener('playing', onPlaying);
+      element.removeEventListener('progress', onProgress);
+    };
+
+    // Auto-cleanup after 5 minutes
+    setTimeout(cleanup, 5 * 60 * 1000);
+  }
+
+  // Apply quality settings (would integrate with HLS.js or similar)
+  private applyQualitySettings(element: HTMLMediaElement, quality: string) {
+    // This would integrate with your video streaming library
+    console.log(`Applying quality setting: ${quality} to`, element);
+    
+    // Example integration with HLS.js:
+    // if (element.hls) {
+    //   element.hls.currentLevel = this.getQualityLevel(quality);
+    // }
+  }
+
+  private adjustQualityForNetwork(networkInfo: NetworkInfo) {
+    // Auto-adjust quality for all active media elements
+    console.log('Adjusting quality for network conditions:', networkInfo.effectiveType);
+  }
+
+  // Clear preload cache to save memory
+  clearPreloadCache() {
+    this.preloadCache.clear();
+  }
+
+  // Get loading metrics for a specific media URL
+  getLoadingMetrics(url: string): MediaLoadingMetrics | undefined {
+    return this.loadingMetrics.get(url);
+  }
+
+  // Get all loading metrics
+  getAllMetrics(): MediaLoadingMetrics[] {
+    return Array.from(this.loadingMetrics.values());
+  }
+
+  // Calculate average loading performance
+  getAverageLoadingTime(): number {
+    const metrics = this.getAllMetrics();
+    const completedLoads = metrics.filter(m => m.totalLoadTime !== undefined);
+    
+    if (completedLoads.length === 0) return 0;
+    
+    const total = completedLoads.reduce((sum, m) => sum + (m.totalLoadTime || 0), 0);
+    return total / completedLoads.length;
+  }
+
+  // Get network-specific performance stats
+  getNetworkPerformanceStats(): {
+    networkType: string;
+    avgLoadTime: number;
+    avgStalls: number;
+    avgBufferHealth: number;
+  }[] {
+    const statsByNetwork = new Map<string, MediaLoadingMetrics[]>();
+    
+    this.getAllMetrics().forEach(metrics => {
+      const network = metrics.networkType;
+      if (!statsByNetwork.has(network)) {
+        statsByNetwork.set(network, []);
+      }
+      statsByNetwork.get(network)!.push(metrics);
+    });
+
+    return Array.from(statsByNetwork.entries()).map(([networkType, metrics]) => ({
+      networkType,
+      avgLoadTime: metrics.reduce((sum, m) => sum + (m.totalLoadTime || 0), 0) / metrics.length,
+      avgStalls: metrics.reduce((sum, m) => sum + m.stallsCount, 0) / metrics.length,
+      avgBufferHealth: metrics.reduce((sum, m) => sum + m.bufferHealth, 0) / metrics.length
+    }));
+  }
+}
+
+// Global media loading optimizer instance
+export const mediaLoadingOptimizer = new MediaLoadingOptimizer();
+
+// React hook for media loading optimization
+export function useMediaLoadingOptimizer(config?: Partial<MediaLoadingConfig>) {
+  const [optimizer] = React.useState(() => 
+    config ? new MediaLoadingOptimizer(config) : mediaLoadingOptimizer
+  );
+  
+  const [networkInfo, setNetworkInfo] = React.useState<NetworkInfo | null>(null);
+  const [loadingMetrics, setLoadingMetrics] = React.useState<MediaLoadingMetrics[]>([]);
+
+  React.useEffect(() => {
+    const unsubscribe = optimizer['networkMonitor'].subscribe(setNetworkInfo);
+    setNetworkInfo(optimizer['networkMonitor'].getCurrentNetworkInfo());
+
+    // Update metrics periodically
+    const interval = setInterval(() => {
+      setLoadingMetrics(optimizer.getAllMetrics());
+    }, 1000);
+
+    return () => {
+      unsubscribe();
+      clearInterval(interval);
+    };
+  }, [optimizer]);
+
+  const optimizeLoading = React.useCallback(
+    (mediaUrl: string, element: HTMLMediaElement, options?: any) => {
+      return optimizer.optimizeMediaLoading(mediaUrl, element, options);
+    },
+    [optimizer]
+  );
+
+  return {
+    networkInfo,
+    loadingMetrics,
+    optimizeLoading,
+    averageLoadTime: optimizer.getAverageLoadingTime(),
+    networkStats: optimizer.getNetworkPerformanceStats()
+  };
+}