@therealtinhtute/baroiplayer 1.0.0

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

@@ -0,0 +1,358 @@
+/**
+ * Intelligent Preloading Hook
+ * Combines user behavior analysis with network conditions for optimal preloading
+ */
+
+import { useEffect, useRef, useCallback, useMemo } from 'react';
+import { MediaSource } from '../types';
+
+interface IntelligentPreloadingOptions {
+	/** Enable user behavior tracking */
+	trackUserBehavior?: boolean;
+	/** Adapt to network conditions */
+	adaptToNetwork?: boolean;
+	/** Preload strategy */
+	strategy?: 'conservative' | 'balanced' | 'aggressive';
+	/** Maximum number of items to preload */
+	maxPreloadItems?: number;
+	/** Preload radius for playlist items */
+	preloadRadius?: number;
+}
+
+interface UserBehaviorData {
+	mouseMovements: number;
+	scrollEvents: number;
+	keyPresses: number;
+	focusEvents: number;
+	timeOnPage: number;
+	engagementScore: number;
+	lastInteraction: number;
+}
+
+interface PreloadingDecision {
+	shouldPreload: boolean;
+	priority: 'high' | 'medium' | 'low';
+	reason: string;
+}
+
+export const useIntelligentPreloading = (
+	sources: MediaSource[],
+	options: IntelligentPreloadingOptions = {}
+) => {
+	const {
+		trackUserBehavior = true,
+		adaptToNetwork = true,
+		strategy = 'balanced',
+		maxPreloadItems = 3,
+		preloadRadius = 2,
+	} = options;
+
+	const userBehaviorRef = useRef<UserBehaviorData>({
+		mouseMovements: 0,
+		scrollEvents: 0,
+		keyPresses: 0,
+		focusEvents: 0,
+		timeOnPage: 0,
+		engagementScore: 0,
+		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 interactionFactor = Math.min(
+			(behavior.mouseMovements + behavior.scrollEvents + behavior.keyPresses) / 100,
+			1
+		);
+
+		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]);
+
+	// Get current network conditions
+	const getNetworkConditions = useCallback(() => {
+		if (!networkInfoRef.current || !adaptToNetwork) {
+			return { type: 'unknown', downlink: 10, effectiveType: '4g', saveData: false };
+		}
+
+		const network = networkInfoRef.current;
+		return {
+			type: network.type,
+			downlink: network.downlink || 10,
+			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' };
+		}
+
+		// 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;
+
+		// Network-based decisions
+		if (network.saveData) {
+			return { shouldPreload: false, priority: 'low', reason: 'Data saver mode' };
+		}
+
+		// 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;
+		}
+
+		// 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]);
+
+	// 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
+			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';
+
+			// Add to document head
+			document.head.appendChild(link);
+
+			// Mark as preloaded
+			preloadedItemsRef.current.add(source.src);
+
+			console.debug(`Preloaded: ${source.src} (${priority})`);
+
+			// Cleanup after 30 seconds to prevent memory issues
+			setTimeout(() => {
+				if (document.head.contains(link)) {
+					document.head.removeChild(link);
+				}
+			}, 30000);
+
+		} catch (error) {
+			console.warn('Failed to preload source:', source.src, error);
+		}
+	}, []);
+
+	// Process preload queue
+	const processPreloadQueue = useCallback(() => {
+		if (preloadQueueRef.current.length === 0) return;
+
+		// Sort by priority (higher number = higher priority)
+		const sortedQueue = [...preloadQueueRef.current].sort((a, b) => b.priority - a.priority);
+
+		// Take top items based on maxPreloadItems
+		const itemsToPreload = sortedQueue.slice(0, maxPreloadItems);
+
+		// Clear queue
+		preloadQueueRef.current = [];
+
+		// Preload items
+		itemsToPreload.forEach(({ source, priority }) => {
+			preloadSource(source, priority);
+		});
+	}, [maxPreloadItems, preloadSource]);
+
+	// Update preloading decisions
+	const updatePreloading = useCallback((currentIndex: number = 0) => {
+		preloadQueueRef.current = [];
+
+		sources.forEach((source, index) => {
+			const decision = shouldPreloadSource(source, index, currentIndex);
+
+			if (decision.shouldPreload) {
+				const priority = decision.priority === 'high' ? 3 :
+								decision.priority === 'medium' ? 2 : 1;
+
+				preloadQueueRef.current.push({ source, priority });
+			}
+		});
+
+		processPreloadQueue();
+	}, [sources, shouldPreloadSource, processPreloadQueue]);
+
+	// Set up user behavior tracking
+	useEffect(() => {
+		if (!trackUserBehavior) return;
+
+		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 });
+
+		// Update time on page every second
+		const timeInterval = setInterval(() => {
+			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]);
+
+	// Set up network monitoring
+	useEffect(() => {
+		if (!adaptToNetwork || !('connection' in navigator)) return;
+
+		const network = (navigator as any).connection;
+		networkInfoRef.current = network;
+
+		const handleNetworkChange = () => {
+			// Re-evaluate preloading when network conditions change
+			updatePreloading();
+		};
+
+		network.addEventListener('change', handleNetworkChange);
+
+		return () => {
+			network.removeEventListener('change', handleNetworkChange);
+		};
+	}, [adaptToNetwork, updatePreloading]);
+
+	// Initial preloading
+	useEffect(() => {
+		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,
+		}),
+	}), [updatePreloading, getNetworkConditions, maxPreloadItems]);
+
+	return controls;
+};
+
+export default useIntelligentPreloading;

package/src/hooks/use-keyboard-controls.ts

@@ -0,0 +1,115 @@
+"use client"
+
+import { useCallback, useEffect } from "react"
+import type { MediaPlayerControls, MediaPlayerState } from "../types/index"
+
+interface UseKeyboardControlsOptions {
+	enabled?: boolean
+	state: MediaPlayerState
+	controls: MediaPlayerControls
+	seekStep?: number // seconds to seek forward/backward
+	volumeStep?: number // volume step (0-1)
+}
+
+export function useKeyboardControls({
+	enabled = true,
+	state,
+	controls,
+	seekStep = 10,
+	volumeStep = 0.1
+}: UseKeyboardControlsOptions) {
+	const handleKeyDown = (event: KeyboardEvent) => {
+    			if (!enabled) return
+
+    			// Don't handle keyboard events if user is typing in an input
+    			const target = event.target as HTMLElement
+    			if (
+    				target.tagName === "INPUT" ||
+    				target.tagName === "TEXTAREA" ||
+    				target.contentEditable === "true"
+    			) {
+    				return
+    			}
+
+    			switch (event.code) {
+    				case "Space":
+    				case "KeyK":
+    					event.preventDefault()
+    					controls.toggle()
+    					break
+
+    				case "KeyM":
+    					event.preventDefault()
+    					controls.toggleMute()
+    					break
+
+    				case "KeyF":
+    					event.preventDefault()
+    					controls.toggleFullscreen()
+    					break
+
+    				case "ArrowLeft":
+    					event.preventDefault()
+    					controls.seek(Math.max(0, state.currentTime - seekStep))
+    					break
+
+    				case "ArrowRight":
+    					event.preventDefault()
+    					controls.seek(Math.min(state.duration, state.currentTime + seekStep))
+    					break
+
+    				case "ArrowUp":
+    					event.preventDefault()
+    					controls.setVolume(Math.min(1, state.volume + volumeStep))
+    					break
+
+    				case "ArrowDown":
+    					event.preventDefault()
+    					controls.setVolume(Math.max(0, state.volume - volumeStep))
+    					break
+
+    				case "Digit0":
+    				case "Digit1":
+    				case "Digit2":
+    				case "Digit3":
+    				case "Digit4":
+    				case "Digit5":
+    				case "Digit6":
+    				case "Digit7":
+    				case "Digit8":
+    				case "Digit9":
+    					event.preventDefault()
+    					const digit = parseInt(event.code.replace("Digit", ""), 10)
+    					const percentage = digit / 10
+    					controls.seek(state.duration * percentage)
+    					break
+
+    				case "Home":
+    					event.preventDefault()
+    					controls.seek(0)
+    					break
+
+    				case "End":
+    					event.preventDefault()
+    					controls.seek(state.duration)
+    					break
+
+    				default:
+    					// Don't prevent default for unhandled keys
+    					break
+    			}
+    		}
+
+	useEffect(() => {
+		if (!enabled) return
+
+		document.addEventListener("keydown", handleKeyDown)
+		return () => {
+			document.removeEventListener("keydown", handleKeyDown)
+		}
+	}, [enabled, handleKeyDown])
+
+	return {
+		handleKeyDown
+	}
+}

package/src/hooks/use-media-actions.ts

@@ -0,0 +1,175 @@
+"use client"
+
+import React from "react"
+import type { MediaActionType, MediaState } from "../context/media-context"
+import type { OptimisticMediaAction, MediaActionState, EnhancedMediaStore } from "../context/media-store"
+import { MediaActionTypes } from "../context/media-context"
+
+// Action payload types
+export interface MediaActionPayloads {
+	[MediaActionTypes.PLAY]: void
+	[MediaActionTypes.PAUSE]: void
+	[MediaActionTypes.SEEK]: number
+	[MediaActionTypes.SET_VOLUME]: number
+	[MediaActionTypes.MUTE]: void
+	[MediaActionTypes.UNMUTE]: void
+	[MediaActionTypes.TOGGLE_MUTE]: void
+	[MediaActionTypes.SET_DURATION]: number
+	[MediaActionTypes.SET_CURRENT_TIME]: number
+	[MediaActionTypes.SET_BUFFERED]: TimeRanges | null
+	[MediaActionTypes.SET_LOADING]: boolean
+	[MediaActionTypes.SET_ERROR]: string | null
+	[MediaActionTypes.ENTER_FULLSCREEN]: void
+	[MediaActionTypes.EXIT_FULLSCREEN]: void
+	[MediaActionTypes.ENTER_PIP]: void
+	[MediaActionTypes.EXIT_PIP]: void
+	[MediaActionTypes.SET_PLAYBACK_RATE]: number
+	[MediaActionTypes.SET_SUBTITLE_TRACK]: TextTrack | null
+	[MediaActionTypes.SET_RENDITION]: string | null
+	[MediaActionTypes.TOGGLE_SUBTITLES]: void
+	[MediaActionTypes.PREVIEW_TIME]: number | null
+	[MediaActionTypes.CLEAR_PREVIEW]: void
+}
+
+// Enhanced action creator that returns a Promise
+type OptimisticActionCreator<T extends keyof MediaActionPayloads> = MediaActionPayloads[T] extends void
+	? (optimistic?: boolean) => Promise<void>
+	: (payload: MediaActionPayloads[T], optimistic?: boolean) => Promise<void>
+
+// Action creator factory
+function createOptimisticAction<T extends keyof MediaActionPayloads>(
+	type: T,
+	store: EnhancedMediaStore
+): OptimisticActionCreator<T> {
+	return ((payload?: any, optimistic = false) => {
+		const action: OptimisticMediaAction = {
+			type,
+			detail: payload,
+			optimistic,
+			timestamp: Date.now()
+		}
+
+		if (optimistic) {
+			return store.dispatchOptimistic(action)
+		} else {
+			store.dispatch(action)
+			return Promise.resolve()
+		}
+	}) as OptimisticActionCreator<T>
+}
+
+// React 19 useActionState integration
+export function useMediaActionState(store: EnhancedMediaStore) {
+	const [actionState, setActionState] = React.useState<MediaActionState>(store.getActionState())
+
+	// Subscribe to action state changes
+	React.useEffect(() => {
+		const unsubscribe = store.subscribe(() => {
+			const newActionState = store.getActionState()
+			setActionState(current => 
+				JSON.stringify(current) !== JSON.stringify(newActionState) 
+					? newActionState 
+					: current
+			)
+		})
+		return unsubscribe
+	}, [store])
+
+	return actionState
+}
+
+// Media actions hook with React 19 optimistic updates
+export function useMediaActions(store: EnhancedMediaStore) {
+	// Create action creators with optimistic support
+	const actions = React.useMemo(() => ({
+		// Playback actions
+		play: createOptimisticAction(MediaActionTypes.PLAY, store),
+		pause: createOptimisticAction(MediaActionTypes.PAUSE, store),
+		seek: createOptimisticAction(MediaActionTypes.SEEK, store),
+		
+		// Volume actions  
+		setVolume: createOptimisticAction(MediaActionTypes.SET_VOLUME, store),
+		mute: createOptimisticAction(MediaActionTypes.MUTE, store),
+		unmute: createOptimisticAction(MediaActionTypes.UNMUTE, store),
+		toggleMute: createOptimisticAction(MediaActionTypes.TOGGLE_MUTE, store),
+		
+		// Media state actions
+		setDuration: createOptimisticAction(MediaActionTypes.SET_DURATION, store),
+		setCurrentTime: createOptimisticAction(MediaActionTypes.SET_CURRENT_TIME, store),
+		setBuffered: createOptimisticAction(MediaActionTypes.SET_BUFFERED, store),
+		setLoading: createOptimisticAction(MediaActionTypes.SET_LOADING, store),
+		setError: createOptimisticAction(MediaActionTypes.SET_ERROR, store),
+		
+		// Display actions
+		enterFullscreen: createOptimisticAction(MediaActionTypes.ENTER_FULLSCREEN, store),
+		exitFullscreen: createOptimisticAction(MediaActionTypes.EXIT_FULLSCREEN, store),
+		enterPiP: createOptimisticAction(MediaActionTypes.ENTER_PIP, store),
+		exitPiP: createOptimisticAction(MediaActionTypes.EXIT_PIP, store),
+		
+		// Advanced actions
+		setPlaybackRate: createOptimisticAction(MediaActionTypes.SET_PLAYBACK_RATE, store),
+		setSubtitleTrack: createOptimisticAction(MediaActionTypes.SET_SUBTITLE_TRACK, store),
+		setRendition: createOptimisticAction(MediaActionTypes.SET_RENDITION, store),
+		toggleSubtitles: createOptimisticAction(MediaActionTypes.TOGGLE_SUBTITLES, store),
+		
+		// Preview actions
+		previewTime: createOptimisticAction(MediaActionTypes.PREVIEW_TIME, store),
+		clearPreview: createOptimisticAction(MediaActionTypes.CLEAR_PREVIEW, store)
+	}), [store])
+
+	// Get action state for loading/error handling
+	const actionState = useMediaActionState(store)
+
+	// Convenience methods that commonly use optimistic updates
+	const optimisticActions = React.useMemo(() => ({
+		// These actions benefit from immediate UI feedback
+		togglePlayPause: async (isPlaying: boolean) => {
+			if (isPlaying) {
+				await actions.pause(true) // optimistic
+			} else {
+				await actions.play(true) // optimistic
+			}
+		},
+		
+		seekWithPreview: async (time: number) => {
+			// Immediate preview update, then actual seek
+			await actions.previewTime(time, true)
+			await actions.seek(time, true)
+		},
+		
+		adjustVolume: async (delta: number, currentVolume: number) => {
+			const newVolume = Math.max(0, Math.min(1, currentVolume + delta))
+			await actions.setVolume(newVolume, true)
+		},
+		
+		toggleFullscreenOptimistic: async (isFullscreen: boolean) => {
+			if (isFullscreen) {
+				await actions.exitFullscreen(true)
+			} else {
+				await actions.enterFullscreen(true)
+			}
+		}
+	}), [actions])
+
+	// Retry failed action
+	const retryLastAction = React.useCallback(async () => {
+		const { lastAction } = actionState
+		if (lastAction && actionState.error) {
+			await store.dispatchOptimistic({
+				...lastAction,
+				retryCount: (lastAction.retryCount || 0) + 1
+			})
+		}
+	}, [store, actionState])
+
+	return {
+		...actions,
+		...optimisticActions,
+		actionState,
+		retryLastAction,
+		isLoading: actionState.pending,
+		hasError: !!actionState.error,
+		errorMessage: actionState.error,
+		retryCount: actionState.retryCount
+	}
+}