@therealtinhtute/baroiplayer 1.0.8 → 1.1.0

package/src/hooks/use-intelligent-preloading.ts

@@ -3,36 +3,36 @@
  * Combines user behavior analysis with network conditions for optimal preloading
  */
 
-import { useEffect, useRef, useCallback, useMemo } from 'react';
-import { MediaSource } from '../types';
+import { useCallback, useEffect, useMemo, useRef } from "react"
+import { MediaSource } from "../types"
 
 interface IntelligentPreloadingOptions {
 	/** Enable user behavior tracking */
-	trackUserBehavior?: boolean;
+	trackUserBehavior?: boolean
 	/** Adapt to network conditions */
-	adaptToNetwork?: boolean;
+	adaptToNetwork?: boolean
 	/** Preload strategy */
-	strategy?: 'conservative' | 'balanced' | 'aggressive';
+	strategy?: "conservative" | "balanced" | "aggressive"
 	/** Maximum number of items to preload */
-	maxPreloadItems?: number;
+	maxPreloadItems?: number
 	/** Preload radius for playlist items */
-	preloadRadius?: number;
+	preloadRadius?: number
 }
 
 interface UserBehaviorData {
-	mouseMovements: number;
-	scrollEvents: number;
-	keyPresses: number;
-	focusEvents: number;
-	timeOnPage: number;
-	engagementScore: number;
-	lastInteraction: number;
+	mouseMovements: number
+	scrollEvents: number
+	keyPresses: number
+	focusEvents: number
+	timeOnPage: number
+	engagementScore: number
+	lastInteraction: number
 }
 
 interface PreloadingDecision {
-	shouldPreload: boolean;
-	priority: 'high' | 'medium' | 'low';
-	reason: string;
+	shouldPreload: boolean
+	priority: "high" | "medium" | "low"
+	reason: string
 }
 
 export const useIntelligentPreloading = (
@@ -42,10 +42,10 @@ export const useIntelligentPreloading = (
 	const {
 		trackUserBehavior = true,
 		adaptToNetwork = true,
-		strategy = 'balanced',
+		strategy = "balanced",
 		maxPreloadItems = 3,
-		preloadRadius = 2,
-	} = options;
+		preloadRadius = 2
+	} = options
 
 	const userBehaviorRef = useRef<UserBehaviorData>({
 		mouseMovements: 0,
@@ -54,310 +54,314 @@ export const useIntelligentPreloading = (
 		focusEvents: 0,
 		timeOnPage: 0,
 		engagementScore: 0,
-		lastInteraction: Date.now(),
-	});
-
-	// Network Information API (if available)
-	const networkInfoRef = useRef<{
-		effectiveType?: string;
-		downlink?: number;
-		rtt?: number;
-		saveData?: boolean;
-	} | null>(null);
-	const preloadedItemsRef = useRef<Set<string>>(new Set());
-	const preloadQueueRef = useRef<Array<{ source: MediaSource; priority: number }>>([]);
+		lastInteraction: Date.now()
+	})
+
+	const networkInfoRef = useRef<NetworkInformation | null>(null)
+	const preloadedItemsRef = useRef<Set<string>>(new Set())
+	const preloadQueueRef = useRef<Array<{ source: MediaSource; priority: number }>>([])
 
 	// Calculate user engagement score
 	const calculateEngagementScore = useCallback((): number => {
-		const behavior = userBehaviorRef.current;
-		const timeFactor = Math.min(behavior.timeOnPage / 60000, 1); // Cap at 1 minute
+		const behavior = userBehaviorRef.current
+		const timeFactor = Math.min(behavior.timeOnPage / 60000, 1) // Cap at 1 minute
 		const interactionFactor = Math.min(
 			(behavior.mouseMovements + behavior.scrollEvents + behavior.keyPresses) / 100,
 			1
-		);
+		)
 
-		return (timeFactor * 0.4 + interactionFactor * 0.6) * 100;
-	}, []);
+		return (timeFactor * 0.4 + interactionFactor * 0.6) * 100
+	}, [])
 
 	// Update user behavior tracking
-	const updateUserBehavior = useCallback((type: keyof UserBehaviorData, increment = 1) => {
-		const behavior = userBehaviorRef.current;
-		behavior[type] = typeof behavior[type] === 'number' ? behavior[type] + increment : Date.now();
-		behavior.engagementScore = calculateEngagementScore();
-		behavior.lastInteraction = Date.now();
-	}, [calculateEngagementScore]);
+	const updateUserBehavior = useCallback(
+		(type: keyof UserBehaviorData, increment = 1) => {
+			const behavior = userBehaviorRef.current
+			behavior[type] = typeof behavior[type] === "number" ? behavior[type] + increment : Date.now()
+			behavior.engagementScore = calculateEngagementScore()
+			behavior.lastInteraction = Date.now()
+		},
+		[calculateEngagementScore]
+	)
 
 	// Get current network conditions
 	const getNetworkConditions = useCallback(() => {
 		if (!networkInfoRef.current || !adaptToNetwork) {
-			return { type: 'unknown', downlink: 10, effectiveType: '4g', saveData: false };
+			return { type: "unknown", downlink: 10, effectiveType: "4g", saveData: false }
 		}
 
-		const network = networkInfoRef.current;
+		const network = networkInfoRef.current
 		return {
-			type: network.effectiveType || '4g', // Use effectiveType as the primary type indicator
+			type: network.type,
 			downlink: network.downlink || 10,
-			effectiveType: network.effectiveType || '4g',
+			effectiveType: network.effectiveType || "4g",
 			saveData: network.saveData || false,
-			rtt: network.rtt || 100,
-		};
-	}, [adaptToNetwork]);
-
-	// Determine if a source should be preloaded
-	const shouldPreloadSource = useCallback((
-		source: MediaSource,
-		index: number,
-		currentIndex: number = 0
-	): PreloadingDecision => {
-		// Skip if already preloaded
-		if (preloadedItemsRef.current.has(source.src)) {
-			return { shouldPreload: false, priority: 'low', reason: 'Already preloaded' };
+			rtt: network.rtt || 100
 		}
+	}, [adaptToNetwork])
 
-		// Check if within preload radius
-		const distance = Math.abs(index - currentIndex);
-		if (distance > preloadRadius) {
-			return { shouldPreload: false, priority: 'low', reason: 'Outside preload radius' };
-		}
-
-		const behavior = userBehaviorRef.current;
-		const network = getNetworkConditions();
-		const engagementScore = behavior.engagementScore;
-		const timeSinceInteraction = Date.now() - behavior.lastInteraction;
+	// Determine if a source should be preloaded
+	const shouldPreloadSource = useCallback(
+		(source: MediaSource, index: number, currentIndex: number = 0): PreloadingDecision => {
+			// Skip if already preloaded
+			if (preloadedItemsRef.current.has(source.src)) {
+				return { shouldPreload: false, priority: "low", reason: "Already preloaded" }
+			}
 
-		// Network-based decisions
-		if (network.saveData) {
-			return { shouldPreload: false, priority: 'low', reason: 'Data saver mode' };
-		}
+			// Check if within preload radius
+			const distance = Math.abs(index - currentIndex)
+			if (distance > preloadRadius) {
+				return { shouldPreload: false, priority: "low", reason: "Outside preload radius" }
+			}
 
-		// Strategy-based filtering
-		let shouldPreload = false;
-		let priority: 'high' | 'medium' | 'low' = 'medium';
-		let reason = '';
-
-		switch (strategy) {
-			case 'conservative':
-				shouldPreload = engagementScore > 70 && network.effectiveType !== '2g' && distance === 1;
-				priority = shouldPreload ? 'medium' : 'low';
-				reason = shouldPreload ? 'High engagement and optimal network' : 'Conservative strategy';
-				break;
-
-			case 'aggressive':
-				shouldPreload = engagementScore > 30 && network.effectiveType !== 'slow-2g';
-				priority = engagementScore > 70 ? 'high' : engagementScore > 50 ? 'medium' : 'low';
-				reason = shouldPreload ? 'Aggressive preloading' : 'Low engagement';
-				break;
-
-			case 'balanced':
-			default:
-				const networkMultiplier = network.effectiveType === '4g' ? 1 :
-										network.effectiveType === '3g' ? 0.7 : 0.3;
-				const adjustedScore = engagementScore * networkMultiplier;
-
-				shouldPreload = adjustedScore > 40 && distance <= 2;
-				priority = adjustedScore > 70 ? 'high' : adjustedScore > 55 ? 'medium' : 'low';
-				reason = shouldPreload ? `Balanced: score ${adjustedScore.toFixed(1)}` : 'Low adjusted score';
-				break;
-		}
+			const behavior = userBehaviorRef.current
+			const network = getNetworkConditions()
+			const engagementScore = behavior.engagementScore
+			const timeSinceInteraction = Date.now() - behavior.lastInteraction
 
-		// Additional heuristics
-		if (shouldPreload) {
-			// Prioritize HLS and adaptive streaming (check URL extension)
-			const sourceUrl = source.src.toLowerCase();
-			if (sourceUrl.includes('.m3u8') || sourceUrl.includes('hls')) {
-				priority = priority === 'low' ? 'medium' : 'high';
+			// Network-based decisions
+			if (network.saveData) {
+				return { shouldPreload: false, priority: "low", reason: "Data saver mode" }
 			}
 
-			// Boost priority for recent user interaction
-			if (timeSinceInteraction < 5000) { // Within 5 seconds
-				priority = 'high';
-				reason += ' + Recent interaction';
+			// Strategy-based filtering
+			let shouldPreload = false
+			let priority: "high" | "medium" | "low" = "medium"
+			let reason = ""
+
+			switch (strategy) {
+				case "conservative":
+					shouldPreload = engagementScore > 70 && network.effectiveType !== "2g" && distance === 1
+					priority = shouldPreload ? "medium" : "low"
+					reason = shouldPreload ? "High engagement and optimal network" : "Conservative strategy"
+					break
+
+				case "aggressive":
+					shouldPreload = engagementScore > 30 && network.effectiveType !== "slow-2g"
+					priority = engagementScore > 70 ? "high" : engagementScore > 50 ? "medium" : "low"
+					reason = shouldPreload ? "Aggressive preloading" : "Low engagement"
+					break
+
+				case "balanced":
+				default:
+					const networkMultiplier =
+						network.effectiveType === "4g" ? 1 : network.effectiveType === "3g" ? 0.7 : 0.3
+					const adjustedScore = engagementScore * networkMultiplier
+
+					shouldPreload = adjustedScore > 40 && distance <= 2
+					priority = adjustedScore > 70 ? "high" : adjustedScore > 55 ? "medium" : "low"
+					reason = shouldPreload
+						? `Balanced: score ${adjustedScore.toFixed(1)}`
+						: "Low adjusted score"
+					break
 			}
 
-			// Consider content type (video gets higher priority than audio)
-			if (source.type?.includes('mp4') || source.type?.includes('webm') ||
-				sourceUrl.includes('.mp4') || sourceUrl.includes('.webm')) {
-				priority = priority === 'low' ? 'medium' : priority;
+			// Additional heuristics
+			if (shouldPreload) {
+				// Prioritize HLS and adaptive streaming
+				if (source.type === "hls" || source.type === "m3u8") {
+					priority = priority === "low" ? "medium" : "high"
+				}
+
+				// Boost priority for recent user interaction
+				if (timeSinceInteraction < 5000) {
+					// Within 5 seconds
+					priority = "high"
+					reason += " + Recent interaction"
+				}
+
+				// Consider content type (video gets higher priority than audio)
+				if (source.type === "mp4" || source.type === "webm") {
+					priority = priority === "low" ? "medium" : priority
+				}
 			}
-		}
 
-		return { shouldPreload, priority, reason };
-	}, [strategy, preloadRadius, getNetworkConditions, calculateEngagementScore]);
+			return { shouldPreload, priority, reason }
+		},
+		[strategy, preloadRadius, getNetworkConditions, calculateEngagementScore]
+	)
 
 	// Preload a specific source
 	const preloadSource = useCallback(async (source: MediaSource, priority: number) => {
 		try {
 			// Create a preload link element
-			const link = document.createElement('link');
-			link.rel = 'preload';
-			link.href = source.src;
-
-			// Determine the correct 'as' attribute based on URL or MIME type
-			const sourceUrl = source.src.toLowerCase();
-			const mimeType = source.type?.toLowerCase() || '';
-
-			if (sourceUrl.includes('.m3u8') || sourceUrl.includes('hls')) {
-				link.as = 'fetch';
-			} else if (mimeType.includes('mp4') || mimeType.includes('webm') ||
-				sourceUrl.includes('.mp4') || sourceUrl.includes('.webm')) {
-				link.as = 'video';
-			} else if (mimeType.includes('mp3') || mimeType.includes('wav') || mimeType.includes('ogg') ||
-				sourceUrl.includes('.mp3') || sourceUrl.includes('.wav') || sourceUrl.includes('.ogg')) {
-				link.as = 'audio';
-			} else {
-				link.as = 'fetch';
+			const link = document.createElement("link")
+			link.rel = "preload"
+			link.href = source.src
+
+			// Determine the correct 'as' attribute
+			switch (source.type) {
+				case "hls":
+				case "m3u8":
+					link.as = "fetch"
+					break
+				case "mp4":
+				case "webm":
+					link.as = "video"
+					break
+				case "mp3":
+				case "wav":
+				case "ogg":
+					link.as = "audio"
+					break
+				default:
+					link.as = "fetch"
 			}
 
-			link.crossOrigin = 'anonymous';
+			link.crossOrigin = "anonymous"
 
 			// Add to document head
-			document.head.appendChild(link);
+			document.head.appendChild(link)
 
 			// Mark as preloaded
-			preloadedItemsRef.current.add(source.src);
+			preloadedItemsRef.current.add(source.src)
 
-			console.debug(`Preloaded: ${source.src} (${priority})`);
+			console.debug(`Preloaded: ${source.src} (${priority})`)
 
 			// Cleanup after 30 seconds to prevent memory issues
 			setTimeout(() => {
 				if (document.head.contains(link)) {
-					document.head.removeChild(link);
+					document.head.removeChild(link)
 				}
-			}, 30000);
-
+			}, 30000)
 		} catch (error) {
-			console.warn('Failed to preload source:', source.src, error);
+			console.warn("Failed to preload source:", source.src, error)
 		}
-	}, []);
+	}, [])
 
 	// Process preload queue
 	const processPreloadQueue = useCallback(() => {
-		if (preloadQueueRef.current.length === 0) return;
+		if (preloadQueueRef.current.length === 0) return
 
 		// Sort by priority (higher number = higher priority)
-		const sortedQueue = [...preloadQueueRef.current].sort((a, b) => b.priority - a.priority);
+		const sortedQueue = [...preloadQueueRef.current].sort((a, b) => b.priority - a.priority)
 
 		// Take top items based on maxPreloadItems
-		const itemsToPreload = sortedQueue.slice(0, maxPreloadItems);
+		const itemsToPreload = sortedQueue.slice(0, maxPreloadItems)
 
 		// Clear queue
-		preloadQueueRef.current = [];
+		preloadQueueRef.current = []
 
 		// Preload items
 		itemsToPreload.forEach(({ source, priority }) => {
-			preloadSource(source, priority);
-		});
-	}, [maxPreloadItems, preloadSource]);
+			preloadSource(source, priority)
+		})
+	}, [maxPreloadItems, preloadSource])
 
 	// Update preloading decisions
-	const updatePreloading = useCallback((currentIndex: number = 0) => {
-		preloadQueueRef.current = [];
+	const updatePreloading = useCallback(
+		(currentIndex: number = 0) => {
+			preloadQueueRef.current = []
 
-		sources.forEach((source, index) => {
-			const decision = shouldPreloadSource(source, index, currentIndex);
+			sources.forEach((source, index) => {
+				const decision = shouldPreloadSource(source, index, currentIndex)
 
-			if (decision.shouldPreload) {
-				const priority = decision.priority === 'high' ? 3 :
-								decision.priority === 'medium' ? 2 : 1;
+				if (decision.shouldPreload) {
+					const priority = decision.priority === "high" ? 3 : decision.priority === "medium" ? 2 : 1
 
-				preloadQueueRef.current.push({ source, priority });
-			}
-		});
+					preloadQueueRef.current.push({ source, priority })
+				}
+			})
 
-		processPreloadQueue();
-	}, [sources, shouldPreloadSource, processPreloadQueue]);
+			processPreloadQueue()
+		},
+		[sources, shouldPreloadSource, processPreloadQueue]
+	)
 
 	// Set up user behavior tracking
 	useEffect(() => {
-		if (!trackUserBehavior) return;
+		if (!trackUserBehavior) return
 
-		const handleMouseMove = () => updateUserBehavior('mouseMovements');
-		const handleScroll = () => updateUserBehavior('scrollEvents');
-		const handleKeyPress = () => updateUserBehavior('keyPresses');
-		const handleFocus = () => updateUserBehavior('focusEvents');
+		const handleMouseMove = () => updateUserBehavior("mouseMovements")
+		const handleScroll = () => updateUserBehavior("scrollEvents")
+		const handleKeyPress = () => updateUserBehavior("keyPresses")
+		const handleFocus = () => updateUserBehavior("focusEvents")
 
 		// Add event listeners
-		document.addEventListener('mousemove', handleMouseMove, { passive: true });
-		document.addEventListener('scroll', handleScroll, { passive: true });
-		document.addEventListener('keydown', handleKeyPress, { passive: true });
-		document.addEventListener('focusin', handleFocus, { passive: true });
+		document.addEventListener("mousemove", handleMouseMove, { passive: true })
+		document.addEventListener("scroll", handleScroll, { passive: true })
+		document.addEventListener("keydown", handleKeyPress, { passive: true })
+		document.addEventListener("focusin", handleFocus, { passive: true })
 
 		// Update time on page every second
 		const timeInterval = setInterval(() => {
-			updateUserBehavior('timeOnPage', 1);
-		}, 1000);
+			updateUserBehavior("timeOnPage", 1)
+		}, 1000)
 
 		return () => {
-			document.removeEventListener('mousemove', handleMouseMove);
-			document.removeEventListener('scroll', handleScroll);
-			document.removeEventListener('keydown', handleKeyPress);
-			document.removeEventListener('focusin', handleFocus);
-			clearInterval(timeInterval);
-		};
-	}, [trackUserBehavior, updateUserBehavior]);
+			document.removeEventListener("mousemove", handleMouseMove)
+			document.removeEventListener("scroll", handleScroll)
+			document.removeEventListener("keydown", handleKeyPress)
+			document.removeEventListener("focusin", handleFocus)
+			clearInterval(timeInterval)
+		}
+	}, [trackUserBehavior, updateUserBehavior])
 
 	// Set up network monitoring
 	useEffect(() => {
-		if (!adaptToNetwork || !('connection' in navigator)) return;
+		if (!adaptToNetwork || !("connection" in navigator)) return
 
-		const network = (navigator as any).connection;
-		networkInfoRef.current = network;
+		const network = (navigator as any).connection
+		networkInfoRef.current = network
 
 		const handleNetworkChange = () => {
 			// Re-evaluate preloading when network conditions change
-			updatePreloading();
-		};
+			updatePreloading()
+		}
 
-		network.addEventListener('change', handleNetworkChange);
+		network.addEventListener("change", handleNetworkChange)
 
 		return () => {
-			network.removeEventListener('change', handleNetworkChange);
-		};
-	}, [adaptToNetwork, updatePreloading]);
+			network.removeEventListener("change", handleNetworkChange)
+		}
+	}, [adaptToNetwork, updatePreloading])
 
 	// Initial preloading
 	useEffect(() => {
-		updatePreloading();
-	}, [updatePreloading]);
+		updatePreloading()
+	}, [updatePreloading])
 
 	// Memoize return values
-	const controls = useMemo(() => ({
-		/**
-		 * Manually trigger preloading for specific index
-		 */
-		preloadAtIndex: (index: number) => {
-			updatePreloading(index);
-		},
-
-		/**
-		 * Get current user behavior data
-		 */
-		getUserBehavior: () => ({ ...userBehaviorRef.current }),
-
-		/**
-		 * Get current network conditions
-		 */
-		getNetworkConditions: getNetworkConditions,
-
-		/**
-		 * Clear preloaded items cache
-		 */
-		clearCache: () => {
-			preloadedItemsRef.current.clear();
-		},
-
-		/**
-		 * Get preloading statistics
-		 */
-		getStats: () => ({
-			preloadedItems: preloadedItemsRef.current.size,
-			engagementScore: userBehaviorRef.current.engagementScore,
-			queueLength: preloadQueueRef.current.length,
-			maxPreloadItems,
+	const controls = useMemo(
+		() => ({
+			/**
+			 * Manually trigger preloading for specific index
+			 */
+			preloadAtIndex: (index: number) => {
+				updatePreloading(index)
+			},
+
+			/**
+			 * Get current user behavior data
+			 */
+			getUserBehavior: () => ({ ...userBehaviorRef.current }),
+
+			/**
+			 * Get current network conditions
+			 */
+			getNetworkConditions: getNetworkConditions,
+
+			/**
+			 * Clear preloaded items cache
+			 */
+			clearCache: () => {
+				preloadedItemsRef.current.clear()
+			},
+
+			/**
+			 * Get preloading statistics
+			 */
+			getStats: () => ({
+				preloadedItems: preloadedItemsRef.current.size,
+				engagementScore: userBehaviorRef.current.engagementScore,
+				queueLength: preloadQueueRef.current.length,
+				maxPreloadItems
+			})
 		}),
-	}), [updatePreloading, getNetworkConditions, maxPreloadItems]);
+		[updatePreloading, getNetworkConditions, maxPreloadItems]
+	)
 
-	return controls;
-};
+	return controls
+}
 
-export default useIntelligentPreloading;
+export default useIntelligentPreloading