@therealtinhtute/baroiplayer 1.0.7 → 1.1.0

package/src/components/ui/media-resource-preloader.tsx

@@ -3,40 +3,75 @@
  * Implements intelligent preloading strategies based on user behavior and network conditions
  */
 
-import React, { useEffect, useRef, useMemo } from 'react';
-import { prefetchDNS, preconnect, preload, preinit } from 'react-dom';
-import { MediaSource } from '../../types';
+import React, { useEffect, useRef, useMemo } from "react"
+import { preconnect, prefetchDNS, preinit, preload } from "react-dom"
+import { MediaSource } from "../../types"
 
 interface MediaResourcePreloaderProps {
 	/** Media sources to preload */
-	sources: MediaSource[];
+	sources: MediaSource[]
 	/** Enable intelligent preloading based on user behavior */
-	enableIntelligentPreloading?: boolean;
+	enableIntelligentPreloading?: boolean
 	/** Network-aware preloading */
-	adaptToNetworkConditions?: boolean;
+	adaptToNetworkConditions?: boolean
 	/** Preload priority level */
-	priority?: 'high' | 'low' | 'auto';
+	priority?: "high" | "low" | "auto"
 	/** Custom preloading strategy */
-	strategy?: 'conservative' | 'aggressive' | 'adaptive';
+	strategy?: "conservative" | "aggressive" | "adaptive"
 }
 
 interface PreloadingConfig {
-	dnsPrefetch: string[];
-	preconnect: string[];
-	preload: Array<{ url: string; type: string }>;
-	preinit: Array<{ url: string; type: string }>;
+	dnsPrefetch: string[]
+	preconnect: string[]
+	preload: Array<{ url: string; type: string }>
+	preinit: Array<{ url: string; type: string }>
 }
 
 export const MediaResourcePreloader: React.FC<MediaResourcePreloaderProps> = ({
 	sources,
 	enableIntelligentPreloading = true,
 	adaptToNetworkConditions = true,
-	priority = 'auto',
-	strategy = 'adaptive',
+	priority = "auto",
+	strategy = "adaptive"
 }) => {
-	const networkInfoRef = useRef<any>(null);
-	const userBehaviorRef = useRef<UserBehaviorTracker | null>(null);
-	const preloadingHistoryRef = useRef<Map<string, number>>(new Map());
+	const networkInfoRef = useRef<NetworkInformation | null>(null)
+	const userBehaviorRef = useRef<UserBehaviorTracker | null>(null)
+	const preloadingHistoryRef = useRef<Map<string, number>>(new Map())
+
+	// Helper functions (must be declared before use)
+	function shouldUseCrossOrigin(url: string): boolean {
+		return !url.includes(window.location.origin)
+	}
+
+	function getAssetIntegrity(url: string): string | undefined {
+		// Return integrity hash if available for the asset
+		// This would typically come from a build process or asset manifest
+		return undefined
+	}
+
+	function preloadLikelyContent(sources: string[]): void {
+		sources.forEach((url) => {
+			// Mark as preloaded
+			preloadingHistoryRef.current.set(url, Date.now())
+
+			// Preload the content
+			preload(url, {
+				as: "fetch",
+				crossOrigin: "anonymous",
+				priority: "high"
+			})
+		})
+	}
+
+	function adjustPreloadingStrategy(): void {
+		// Adjust preloading based on network conditions
+		if (!networkInfoRef.current) return
+
+		const { effectiveType, downlink } = networkInfoRef.current
+
+		// This would update the preloading configuration
+		// Implementation depends on specific requirements
+	}
 
 	// Analyze sources and determine preloading configuration
 	const preloadingConfig = useMemo((): PreloadingConfig => {
@@ -44,243 +79,278 @@ export const MediaResourcePreloader: React.FC<MediaResourcePreloaderProps> = ({
 			dnsPrefetch: [],
 			preconnect: [],
 			preload: [],
-			preinit: [],
-		};
+			preinit: []
+		}
 
 		sources.forEach((source) => {
-			const url = new URL(source.src);
-			const domain = url.origin;
+			const url = new URL(source.src)
+			const domain = url.origin
 
 			// DNS prefetch for CDN domains
 			if (isCDNDomain(domain)) {
-				config.dnsPrefetch.push(domain);
+				config.dnsPrefetch.push(domain)
 			}
 
 			// Preconnect to media domains
-			if (source.type && shouldPreconnect(source.type, strategy)) {
-				config.preconnect.push(domain);
+			if (shouldPreconnect(source.type, strategy)) {
+				config.preconnect.push(domain)
 			}
 
-			// Preload media files based on strategy
-			if (shouldPreload(source, priority, strategy)) {
+			// Preload media files based on strategy (basic check without refs)
+			if (shouldPreloadBasic(source, priority, strategy)) {
 				config.preload.push({
 					url: source.src,
-					type: source.type ? getPreloadType(source.type) : 'auto',
-				});
+					type: getPreloadType(source.type)
+				})
 			}
 
 			// Preinit critical resources
 			if (shouldPreinit(source, strategy)) {
 				config.preinit.push({
 					url: source.src,
-					type: 'script',
-				});
+					type: "script"
+				})
 			}
-		});
+		})
 
-		return config;
-	}, [sources, priority, strategy]);
+		return config
+	}, [sources, priority, strategy])
+
+	// Store the filtered preloading config
+	const [filteredPreloadingConfig, setFilteredPreloadingConfig] = React.useState(preloadingConfig)
+
+	// Update filtered config when preloading config or refs change (safe ref access in effect)
+	React.useEffect(() => {
+		const filtered = { ...preloadingConfig }
+		filtered.preload = preloadingConfig.preload.filter(({ url }) => {
+			const source = sources.find((s) => s.src === url)
+			if (!source) return false
+
+			// Inline the full shouldPreload logic to avoid function hoisting issues
+			// Check if already preloaded recently
+			const lastPreload = preloadingHistoryRef.current.get(source.src)
+			if (lastPreload && Date.now() - lastPreload < 300000) return false // 5 minutes
+
+			// Strategy-based decision
+			if (strategy === "conservative") {
+				return priority === "high" && source.type === "hls"
+			}
+
+			if (strategy === "aggressive") {
+				return true
+			}
+
+			// Adaptive strategy (simplified version)
+			if (networkInfoRef.current) {
+				const { effectiveType, saveData } = networkInfoRef.current
+
+				if (saveData) return false
+				if (effectiveType === "slow-2g" || effectiveType === "2g") {
+					return priority === "high" && source.type === "hls"
+				}
+				if (effectiveType === "3g") {
+					return ["hls", "m3u8"].includes(source.type)
+				}
+			}
+
+			return priority !== "low"
+		})
+
+		setFilteredPreloadingConfig(filtered)
+	}, [preloadingConfig, sources, priority, strategy])
 
 	// Initialize network monitoring
 	useEffect(() => {
-		if (adaptToNetworkConditions && 'connection' in navigator) {
-			networkInfoRef.current = (navigator as any).connection;
+		if (adaptToNetworkConditions && "connection" in navigator) {
+			networkInfoRef.current = (navigator as any).connection
 
 			const handleNetworkChange = () => {
-				adjustPreloadingStrategy();
-			};
+				adjustPreloadingStrategy()
+			}
 
-			networkInfoRef.current.addEventListener('change', handleNetworkChange);
+			networkInfoRef.current.addEventListener("change", handleNetworkChange)
 
 			return () => {
-				networkInfoRef.current?.removeEventListener('change', handleNetworkChange);
-			};
+				networkInfoRef.current?.removeEventListener("change", handleNetworkChange)
+			}
 		}
-	}, [adaptToNetworkConditions]);
+	}, [adaptToNetworkConditions])
 
 	// Initialize user behavior tracking
 	useEffect(() => {
 		if (enableIntelligentPreloading) {
-			userBehaviorRef.current = new UserBehaviorTracker();
-			userBehaviorRef.current.startTracking();
+			userBehaviorRef.current = new UserBehaviorTracker()
+			userBehaviorRef.current.startTracking()
 
 			return () => {
-				userBehaviorRef.current?.stopTracking();
-			};
+				userBehaviorRef.current?.stopTracking()
+			}
 		}
-	}, [enableIntelligentPreloading]);
+	}, [enableIntelligentPreloading])
 
 	// Apply DNS prefetching
 	useEffect(() => {
-		preloadingConfig.dnsPrefetch.forEach((domain) => {
-			prefetchDNS(domain);
-		});
-	}, [preloadingConfig.dnsPrefetch]);
+		filteredPreloadingConfig.dnsPrefetch.forEach((domain) => {
+			prefetchDNS(domain)
+		})
+	}, [filteredPreloadingConfig.dnsPrefetch])
 
 	// Apply preconnections
 	useEffect(() => {
-		preloadingConfig.preconnect.forEach((origin) => {
-			preconnect(origin, { crossOrigin: 'anonymous' });
-		});
-	}, [preloadingConfig.preconnect]);
+		filteredPreloadingConfig.preconnect.forEach((origin) => {
+			preconnect(origin, { crossOrigin: "anonymous" })
+		})
+	}, [filteredPreloadingConfig.preconnect])
 
 	// Apply preloading
 	useEffect(() => {
-		preloadingConfig.preload.forEach(({ url, type }) => {
-			const crossOrigin = shouldUseCrossOrigin(url) ? 'anonymous' : undefined;
+		filteredPreloadingConfig.preload.forEach(({ url, type }) => {
+			const crossOrigin = shouldUseCrossOrigin(url) ? "anonymous" : undefined
 
 			preload(url, {
-				as: type as any,
+				as: type,
 				crossOrigin,
 				integrity: getAssetIntegrity(url),
-			});
-		});
-	}, [preloadingConfig.preload, priority]);
+				priority
+			})
+		})
+	}, [filteredPreloadingConfig.preload, priority])
 
 	// Apply preinit for critical resources
 	useEffect(() => {
-		preloadingConfig.preinit.forEach(({ url, type }) => {
-			const crossOrigin = shouldUseCrossOrigin(url) ? 'anonymous' : undefined;
+		filteredPreloadingConfig.preinit.forEach(({ url, type }) => {
+			const crossOrigin = shouldUseCrossOrigin(url) ? "anonymous" : undefined
 
 			preinit(url, {
-				as: type as any,
-				crossOrigin,
-			});
-		});
-	}, [preloadingConfig.preinit]);
+				as: type,
+				crossOrigin
+			})
+		})
+	}, [filteredPreloadingConfig.preinit])
 
 	// Intelligent preloading based on user behavior
 	useEffect(() => {
-		if (!enableIntelligentPreloading || !userBehaviorRef.current) return;
+		if (!enableIntelligentPreloading || !userBehaviorRef.current) return
 
 		const handleUserBehavior = (behavior: UserBehaviorData) => {
 			if (behavior.isLikelyToInteract) {
-				preloadLikelyContent(behavior.predictedSources);
+				preloadLikelyContent(behavior.predictedSources)
 			}
-		};
+		}
 
-		userBehaviorRef.current.onBehaviorChange(handleUserBehavior);
-	}, [enableIntelligentPreloading]);
+		userBehaviorRef.current.onBehaviorChange(handleUserBehavior)
+	}, [enableIntelligentPreloading])
 
 	// Helper functions
 	function isCDNDomain(domain: string): boolean {
 		const cdnDomains = [
-			'cdn.jsdelivr.net',
-			'cdnjs.cloudflare.com',
-			'unpkg.com',
-			'cloudflare.com',
-			'fastly.net',
-			'akamaized.net',
-		];
-
-		return cdnDomains.some((cdn) => domain.includes(cdn));
+			"cdn.jsdelivr.net",
+			"cdnjs.cloudflare.com",
+			"unpkg.com",
+			"cloudflare.com",
+			"fastly.net",
+			"akamaized.net"
+		]
+
+		return cdnDomains.some((cdn) => domain.includes(cdn))
 	}
 
 	function shouldPreconnect(mediaType: string, strategy: string): boolean {
-		if (strategy === 'aggressive') return true;
-		if (strategy === 'conservative') return ['hls', 'm3u8'].includes(mediaType);
-		return ['hls', 'm3u8', 'mp4'].includes(mediaType);
+		if (strategy === "aggressive") return true
+		if (strategy === "conservative") return ["hls", "m3u8"].includes(mediaType)
+		return ["hls", "m3u8", "mp4"].includes(mediaType)
+	}
+
+	function shouldPreloadBasic(source: MediaSource, priority: string, strategy: string): boolean {
+		// Basic strategy-based decision without ref access
+		if (strategy === "conservative") {
+			return priority === "high" && source.type === "hls"
+		}
+
+		if (strategy === "aggressive") {
+			return true
+		}
+
+		// Adaptive strategy (basic version)
+		return priority !== "low"
 	}
 
-	function shouldPreload(source: MediaSource, priority: string, strategy: string): boolean {
+	function shouldPreload(
+		source: MediaSource,
+		priority: string,
+		strategy: string,
+		preloadingHistory: Map<string, number>,
+		networkInfo: NetworkInformation | null
+	): boolean {
 		// Check if already preloaded recently
-		const lastPreload = preloadingHistoryRef.current.get(source.src);
-		if (lastPreload && Date.now() - lastPreload < 300000) return false; // 5 minutes
+		const lastPreload = preloadingHistory.get(source.src)
+		if (lastPreload && Date.now() - lastPreload < 300000) return false // 5 minutes
 
 		// Strategy-based decision
-		if (strategy === 'conservative') {
-			return priority === 'high' && (source.type?.includes('hls') ?? false);
+		if (strategy === "conservative") {
+			return priority === "high" && source.type === "hls"
 		}
 
-		if (strategy === 'aggressive') {
-			return true;
+		if (strategy === "aggressive") {
+			return true
 		}
 
 		// Adaptive strategy
-		return shouldAdaptivePreload(source, priority);
+		return shouldAdaptivePreload(source, priority, networkInfo)
 	}
 
-	function shouldAdaptivePreload(source: MediaSource, priority: string): boolean {
+	function shouldAdaptivePreload(
+		source: MediaSource,
+		priority: string,
+		networkInfo: NetworkInformation | null
+	): boolean {
 		// Consider network conditions
-		if (networkInfoRef.current) {
-			const { effectiveType, saveData } = networkInfoRef.current;
+		if (networkInfo) {
+			const { effectiveType, saveData } = networkInfo
 
-			if (saveData) return false;
-			if (effectiveType === 'slow-2g' || effectiveType === '2g') {
-				return priority === 'high' && (source.type?.includes('hls') ?? false);
+			if (saveData) return false
+			if (effectiveType === "slow-2g" || effectiveType === "2g") {
+				return priority === "high" && source.type === "hls"
 			}
-			if (effectiveType === '3g') {
-				return ['hls', 'm3u8'].includes(source.type || '');
+			if (effectiveType === "3g") {
+				return ["hls", "m3u8"].includes(source.type)
 			}
 		}
 
 		// Consider user behavior
 		if (userBehaviorRef.current) {
-			const behavior = userBehaviorRef.current.getCurrentBehavior();
+			const behavior = userBehaviorRef.current.getCurrentBehavior()
 			if (behavior.engagementScore > 0.7) {
-				return true;
+				return true
 			}
 		}
 
-		return priority !== 'low';
+		return priority !== "low"
 	}
 
 	function shouldPreinit(source: MediaSource, strategy: string): boolean {
-		return strategy === 'aggressive' && (source.type?.includes('hls') ?? false);
+		return strategy === "aggressive" && source.type === "hls"
 	}
 
 	function getPreloadType(mediaType: string): string {
 		switch (mediaType) {
-			case 'hls':
-			case 'm3u8':
-				return 'fetch';
-			case 'mp4':
-			case 'webm':
-				return 'video';
-			case 'mp3':
-			case 'wav':
-				return 'audio';
+			case "hls":
+			case "m3u8":
+				return "fetch"
+			case "mp4":
+			case "webm":
+				return "video"
+			case "mp3":
+			case "wav":
+				return "audio"
 			default:
-				return 'fetch';
+				return "fetch"
 		}
 	}
 
-	function shouldUseCrossOrigin(url: string): boolean {
-		return !url.includes(window.location.origin);
-	}
-
-	function getAssetIntegrity(url: string): string | undefined {
-		// Return integrity hash if available for the asset
-		// This would typically come from a build process or asset manifest
-		return undefined;
-	}
-
-	function adjustPreloadingStrategy(): void {
-		// Adjust preloading based on network conditions
-		if (!networkInfoRef.current) return;
-
-		const { effectiveType, downlink } = networkInfoRef.current;
-
-		// This would update the preloading configuration
-		// Implementation depends on specific requirements
-	}
-
-	function preloadLikelyContent(sources: string[]): void {
-		sources.forEach((url) => {
-			// Mark as preloaded
-			preloadingHistoryRef.current.set(url, Date.now());
-
-			// Preload the content
-			preload(url, {
-				as: 'fetch',
-				crossOrigin: 'anonymous',
-			});
-		});
-	}
-
 	// This component doesn't render anything visible
-	return null;
-};
+	return null
+}
 
 /**
  * User behavior tracker for intelligent preloading
@@ -290,104 +360,101 @@ class UserBehaviorTracker {
 		isLikelyToInteract: false,
 		engagementScore: 0,
 		predictedSources: [],
-		interactionHistory: [],
-	};
+		interactionHistory: []
+	}
 
-	private listeners: ((behavior: UserBehaviorData) => void)[] = [];
-	private mouseMoveTimer: number | null = null;
+	private listeners: ((behavior: UserBehaviorData) => void)[] = []
+	private mouseMoveTimer: number | null = null
 
 	public startTracking(): void {
 		// Track mouse movements as interaction indicators
-		document.addEventListener('mousemove', this.handleMouseMove);
-		document.addEventListener('scroll', this.handleScroll);
-		document.addEventListener('keydown', this.handleKeydown);
+		document.addEventListener("mousemove", this.handleMouseMove)
+		document.addEventListener("scroll", this.handleScroll)
+		document.addEventListener("keydown", this.handleKeydown)
 
 		// Track focus events
-		document.addEventListener('focusin', this.handleFocus);
-		document.addEventListener('visibilitychange', this.handleVisibilityChange);
+		document.addEventListener("focusin", this.handleFocus)
+		document.addEventListener("visibilitychange", this.handleVisibilityChange)
 	}
 
 	public stopTracking(): void {
-		document.removeEventListener('mousemove', this.handleMouseMove);
-		document.removeEventListener('scroll', this.handleScroll);
-		document.removeEventListener('keydown', this.handleKeydown);
-		document.removeEventListener('focusin', this.handleFocus);
-		document.removeEventListener('visibilitychange', this.handleVisibilityChange);
+		document.removeEventListener("mousemove", this.handleMouseMove)
+		document.removeEventListener("scroll", this.handleScroll)
+		document.removeEventListener("keydown", this.handleKeydown)
+		document.removeEventListener("focusin", this.handleFocus)
+		document.removeEventListener("visibilitychange", this.handleVisibilityChange)
 
 		if (this.mouseMoveTimer) {
-			clearTimeout(this.mouseMoveTimer);
+			clearTimeout(this.mouseMoveTimer)
 		}
 	}
 
 	public onBehaviorChange(listener: (behavior: UserBehaviorData) => void): void {
-		this.listeners.push(listener);
+		this.listeners.push(listener)
 	}
 
 	public getCurrentBehavior(): UserBehaviorData {
-		return this.behaviorData;
+		return this.behaviorData
 	}
 
 	private handleMouseMove = (): void => {
-		if (this.mouseMoveTimer) return;
+		if (this.mouseMoveTimer) return
 
 		this.mouseMoveTimer = window.setTimeout(() => {
-			this.updateEngagementScore(0.1);
-			this.mouseMoveTimer = null;
-		}, 100);
-	};
+			this.updateEngagementScore(0.1)
+			this.mouseMoveTimer = null
+		}, 100)
+	}
 
 	private handleScroll = (): void => {
-		this.updateEngagementScore(0.2);
-	};
+		this.updateEngagementScore(0.2)
+	}
 
 	private handleKeydown = (): void => {
-		this.updateEngagementScore(0.3);
-		this.behaviorData.isLikelyToInteract = true;
-	};
+		this.updateEngagementScore(0.3)
+		this.behaviorData.isLikelyToInteract = true
+	}
 
 	private handleFocus = (): void => {
-		this.updateEngagementScore(0.4);
-		this.behaviorData.isLikelyToInteract = true;
-	};
+		this.updateEngagementScore(0.4)
+		this.behaviorData.isLikelyToInteract = true
+	}
 
 	private handleVisibilityChange = (): void => {
 		if (!document.hidden) {
-			this.updateEngagementScore(0.5);
-			this.behaviorData.isLikelyToInteract = true;
+			this.updateEngagementScore(0.5)
+			this.behaviorData.isLikelyToInteract = true
 		}
-	};
+	}
 
 	private updateEngagementScore(increment: number): void {
-		this.behaviorData.engagementScore = Math.min(
-			1,
-			this.behaviorData.engagementScore + increment
-		);
+		this.behaviorData.engagementScore = Math.min(1, this.behaviorData.engagementScore + increment)
 
 		// Decay engagement score over time
 		setTimeout(() => {
 			this.behaviorData.engagementScore = Math.max(
 				0,
 				this.behaviorData.engagementScore - increment * 0.5
-			);
-			this.notifyListeners();
-		}, 30000); // 30 seconds decay
+			)
+			this.notifyListeners()
+		}, 30000) // 30 seconds decay
 
-		this.notifyListeners();
+		this.notifyListeners()
 	}
 
 	private notifyListeners(): void {
-		this.listeners.forEach((listener) => listener(this.behaviorData));
+		this.listeners.forEach((listener) => listener(this.behaviorData))
 	}
 }
 
 interface UserBehaviorData {
-	isLikelyToInteract: boolean;
-	engagementScore: number;
-	predictedSources: string[];
+	isLikelyToInteract: boolean
+	engagementScore: number
+	predictedSources: string[]
 	interactionHistory: Array<{
-		type: string;
-		timestamp: number;
-	}>;
+		type: string
+		timestamp: number
+	}>
 }
 
-export default MediaResourcePreloader;
+export default MediaResourcePreloader