@therealtinhtute/baroiplayer 1.0.8 → 1.2.0

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

@@ -1,538 +1,544 @@
-import React from 'react';
+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;
+	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;
+	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
-};
+	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;
+	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
-    }
-  }
+	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
-    }));
-  }
+	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();
+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()
-  };
-}
+	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()
+	}
+}