@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

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

@@ -1,544 +0,0 @@
-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()
-	}
-}