@therealtinhtute/baroiplayer 1.0.8 → 1.1.0

package/src/components/enhanced/enhanced-media-player.tsx

@@ -12,48 +12,51 @@ import React, {
 	useTransition,
 	useOptimistic,
 	useDeferredValue,
-	Suspense,
-} from 'react';
-import { MediaPlayerProps, MediaSource } from '../../types';
-import { MediaResourcePreloader } from '../ui/media-resource-preloader';
-import { useIntelligentPreloading } from '../../hooks/use-intelligent-preloading';
-import { EnhancedHLSProvider, ENHANCED_HLS_DEFAULTS } from '../../core/providers/enhanced-hls-provider';
-import { EnhancedPluginManager } from '../../core/plugins/enhanced-plugin-system';
-import { cn } from '../../lib/utils';
+	Suspense
+} from "react"
+import { EnhancedPluginManager } from "../../core/plugins/enhanced-plugin-system"
+import {
+	ENHANCED_HLS_DEFAULTS,
+	EnhancedHLSProvider
+} from "../../core/providers/enhanced-hls-provider"
+import { useIntelligentPreloading } from "../../hooks/use-intelligent-preloading"
+import { cn } from "../../lib/utils"
+import { MediaPlayerProps, MediaSource } from "../../types"
+import { MediaResourcePreloader } from "../ui/media-resource-preloader"
 
 interface EnhancedMediaPlayerProps extends MediaPlayerProps {
 	/** Enable enhanced HLS optimization */
-	enableEnhancedHLS?: boolean;
+	enableEnhancedHLS?: boolean
 	/** Enable intelligent preloading */
-	enableIntelligentPreloading?: boolean;
+	enableIntelligentPreloading?: boolean
 	/** Enable performance monitoring */
-	enablePerformanceMonitoring?: boolean;
+	enablePerformanceMonitoring?: boolean
 	/** Custom HLS configuration */
-	hlsConfig?: any;
+	hlsConfig?: any
 	/** Preloading strategy */
-	preloadingStrategy?: 'conservative' | 'balanced' | 'aggressive';
+	preloadingStrategy?: "conservative" | "balanced" | "aggressive"
 	/** Show performance debug panel (development only) */
-	showDebugPanel?: boolean;
+	showDebugPanel?: boolean
 }
 
 interface MediaState {
-	isPlaying: boolean;
-	currentTime: number;
-	duration: number;
-	volume: number;
-	isMuted: boolean;
-	isFullscreen: boolean;
-	isBuffering: boolean;
-	quality: number;
-	error: MediaError | null;
+	isPlaying: boolean
+	currentTime: number
+	duration: number
+	volume: number
+	isMuted: boolean
+	isFullscreen: boolean
+	isBuffering: boolean
+	quality: number
+	error: MediaError | null
 }
 
 interface PerformanceMetrics {
-	fps: number;
-	memoryUsage: number;
-	bufferHealth: number;
-	networkBandwidth: number;
-	droppedFrames: number;
+	fps: number
+	memoryUsage: number
+	bufferHealth: number
+	networkBandwidth: number
+	droppedFrames: number
 }
 
 /**
@@ -70,9 +73,9 @@ export const EnhancedMediaPlayer: React.FC<EnhancedMediaPlayerProps> = ({
 	className,
 	enableEnhancedHLS = true,
 	enableIntelligentPreloading = true,
-	enablePerformanceMonitoring = process.env.NODE_ENV === 'development',
+	enablePerformanceMonitoring = process.env.NODE_ENV === "development",
 	hlsConfig = {},
-	preloadingStrategy = 'balanced',
+	preloadingStrategy = "balanced",
 	showDebugPanel = false,
 	onPlay,
 	onPause,
@@ -83,17 +86,17 @@ export const EnhancedMediaPlayer: React.FC<EnhancedMediaPlayerProps> = ({
 	onCanPlay,
 	...props
 }) => {
-	const videoRef = useRef<HTMLVideoElement>(null);
-	const containerRef = useRef<HTMLDivElement>(null);
-	const hlsProviderRef = useRef<EnhancedHLSProvider | null>(null);
-	const pluginManagerRef = useRef<EnhancedPluginManager | null>(null);
+	const videoRef = useRef<HTMLVideoElement>(null)
+	const containerRef = useRef<HTMLDivElement>(null)
+	const hlsProviderRef = useRef<EnhancedHLSProvider | null>(null)
+	const pluginManagerRef = useRef<EnhancedPluginManager | null>(null)
 
 	// React 19 concurrent features
-	const [isPending, startTransition] = useTransition();
+	const [isPending, startTransition] = useTransition()
 	const optimisticState = useOptimistic(
 		{ isPlaying: false, volume: 1 },
 		(state, update: Partial<MediaState>) => ({ ...state, ...update })
-	);
+	)
 
 	// Media state
 	const [mediaState, setMediaState] = useState<MediaState>({
@@ -105,8 +108,8 @@ export const EnhancedMediaPlayer: React.FC<EnhancedMediaPlayerProps> = ({
 		isFullscreen: false,
 		isBuffering: false,
 		quality: 0,
-		error: null,
-	});
+		error: null
+	})
 
 	// Performance metrics
 	const [performanceMetrics, setPerformanceMetrics] = useState<PerformanceMetrics>({
@@ -114,261 +117,266 @@ export const EnhancedMediaPlayer: React.FC<EnhancedMediaPlayerProps> = ({
 		memoryUsage: 0,
 		bufferHealth: 0,
 		networkBandwidth: 0,
-		droppedFrames: 0,
-	});
+		droppedFrames: 0
+	})
 
 	// Deferred values for non-critical updates
-	const deferredCurrentTime = useDeferredValue(mediaState.currentTime);
-	const deferredVolume = useDeferredValue(mediaState.volume);
+	const deferredCurrentTime = useDeferredValue(mediaState.currentTime)
+	const deferredVolume = useDeferredValue(mediaState.volume)
 
 	// Prepare media sources
 	const mediaSources = useMemo((): MediaSource[] => {
 		if (sources) {
-			return sources;
+			return sources
 		}
 		if (src) {
-			const extension = src.split('.').pop()?.toLowerCase();
-			const type = getMediaTypeFromExtension(extension);
-			return [{ src, type }];
+			const extension = src.split(".").pop()?.toLowerCase()
+			const type = getMediaTypeFromExtension(extension)
+			return [{ src, type }]
 		}
-		return [];
-	}, [src, sources]);
+		return []
+	}, [src, sources])
 
 	// Intelligent preloading
 	const preloadingControls = useIntelligentPreloading(mediaSources, {
 		trackUserBehavior: enableIntelligentPreloading,
 		adaptToNetwork: true,
 		strategy: preloadingStrategy,
-		maxPreloadItems: 3,
-	});
+		maxPreloadItems: 3
+	})
 
 	// Initialize HLS provider
 	const initializeHLS = useCallback(async () => {
-		if (!videoRef.current || !enableEnhancedHLS) return;
+		if (!videoRef.current || !enableEnhancedHLS) return
 
-		const hlsConfig = { ...ENHANCED_HLS_DEFAULTS, ...hlsConfig };
-		const provider = new EnhancedHLSProvider(hlsConfig);
-		hlsProviderRef.current = provider;
+		const hlsConfig = { ...ENHANCED_HLS_DEFAULTS, ...hlsConfig }
+		const provider = new EnhancedHLSProvider(hlsConfig)
+		hlsProviderRef.current = provider
 
 		try {
 			const hls = provider.initialize(videoRef.current, mediaSources[0].src, {
 				hlsConfig: hlsConfig,
-				onError: handleMediaError,
-			});
+				onError: handleMediaError
+			})
 
 			// Setup HLS event listeners
-			hls.on(Hls.Events.LEVEL_SWITCHED, handleQualityChange);
-			hls.on(Hls.Events.FRAG_BUFFERED, handleFragmentBuffered);
-			hls.on(Hls.Events.ERROR, handleHLSError);
-
+			hls.on(Hls.Events.LEVEL_SWITCHED, handleQualityChange)
+			hls.on(Hls.Events.FRAG_BUFFERED, handleFragmentBuffered)
+			hls.on(Hls.Events.ERROR, handleHLSError)
 		} catch (error) {
-			console.error('HLS initialization failed:', error);
-			fallbackToNativePlayback();
+			console.error("HLS initialization failed:", error)
+			fallbackToNativePlayback()
 		}
-	}, [enableEnhancedHLS, hlsConfig, mediaSources]);
+	}, [enableEnhancedHLS, hlsConfig, mediaSources])
 
 	// Fallback to native playback
 	const fallbackToNativePlayback = useCallback(() => {
-		if (!videoRef.current || !mediaSources[0]) return;
+		if (!videoRef.current || !mediaSources[0]) return
 
-		const source = document.createElement('source');
-		source.src = mediaSources[0].src;
-		source.type = getMediaTypeFromUrl(mediaSources[0].src);
+		const source = document.createElement("source")
+		source.src = mediaSources[0].src
+		source.type = getMediaTypeFromUrl(mediaSources[0].src)
 
-		videoRef.current.appendChild(source);
-		videoRef.current.load();
-	}, [mediaSources]);
+		videoRef.current.appendChild(source)
+		videoRef.current.load()
+	}, [mediaSources])
 
 	// Media event handlers
 	const handlePlay = useCallback(() => {
 		startTransition(() => {
-			setMediaState(prev => ({ ...prev, isPlaying: true }));
-		});
-		onPlay?.();
-	}, [onPlay]);
+			setMediaState((prev) => ({ ...prev, isPlaying: true }))
+		})
+		onPlay?.()
+	}, [onPlay])
 
 	const handlePause = useCallback(() => {
 		startTransition(() => {
-			setMediaState(prev => ({ ...prev, isPlaying: false }));
-		});
-		onPause?.();
-	}, [onPause]);
+			setMediaState((prev) => ({ ...prev, isPlaying: false }))
+		})
+		onPause?.()
+	}, [onPause])
 
 	const handleEnded = useCallback(() => {
 		startTransition(() => {
-			setMediaState(prev => ({ ...prev, isPlaying: false }));
-		});
-		onEnded?.();
-	}, [onEnded]);
+			setMediaState((prev) => ({ ...prev, isPlaying: false }))
+		})
+		onEnded?.()
+	}, [onEnded])
 
 	const handleTimeUpdate = useCallback(() => {
-		if (!videoRef.current) return;
+		if (!videoRef.current) return
 
 		startTransition(() => {
-			setMediaState(prev => ({
+			setMediaState((prev) => ({
 				...prev,
-				currentTime: videoRef.current!.currentTime,
-			}));
-		});
-		onTimeUpdate?.();
-	}, [onTimeUpdate]);
+				currentTime: videoRef.current!.currentTime
+			}))
+		})
+		onTimeUpdate?.()
+	}, [onTimeUpdate])
 
 	const handleLoadedMetadata = useCallback(() => {
-		if (!videoRef.current) return;
+		if (!videoRef.current) return
 
 		startTransition(() => {
-			setMediaState(prev => ({
+			setMediaState((prev) => ({
 				...prev,
-				duration: videoRef.current!.duration,
-			}));
-		});
-	}, []);
+				duration: videoRef.current!.duration
+			}))
+		})
+	}, [])
 
 	const handleVolumeChange = useCallback(() => {
-		if (!videoRef.current) return;
+		if (!videoRef.current) return
 
 		startTransition(() => {
-			setMediaState(prev => ({
+			setMediaState((prev) => ({
 				...prev,
 				volume: videoRef.current!.volume,
-				isMuted: videoRef.current!.muted,
-			}));
-		});
-	}, []);
+				isMuted: videoRef.current!.muted
+			}))
+		})
+	}, [])
 
 	const handleQualityChange = useCallback((event: any, data: any) => {
 		startTransition(() => {
-			setMediaState(prev => ({ ...prev, quality: data.level }));
-		});
-	}, []);
+			setMediaState((prev) => ({ ...prev, quality: data.level }))
+		})
+	}, [])
 
 	const handleFragmentBuffered = useCallback(() => {
 		// Update buffer health
 		if (videoRef.current) {
-			const buffered = videoRef.current.buffered;
-			const currentTime = videoRef.current.currentTime;
-			let bufferHealth = 0;
+			const buffered = videoRef.current.buffered
+			const currentTime = videoRef.current.currentTime
+			let bufferHealth = 0
 
 			for (let i = 0; i < buffered.length; i++) {
-				const start = buffered.start(i);
-				const end = buffered.end(i);
+				const start = buffered.start(i)
+				const end = buffered.end(i)
 				if (start <= currentTime && end > currentTime) {
-					bufferHealth = end - currentTime;
-					break;
+					bufferHealth = end - currentTime
+					break
 				}
 			}
 
-			setPerformanceMetrics(prev => ({ ...prev, bufferHealth }));
-		}
-	}, []);
-
-	const handleMediaError = useCallback((error: MediaError) => {
-		startTransition(() => {
-			setMediaState(prev => ({ ...prev, error }));
-		});
-		onError?.(error);
-	}, [onError]);
-
-	const handleHLSError = useCallback((event: any, data: any) => {
-		if (data.fatal) {
-			console.error('Fatal HLS error:', data);
-			handleMediaError(new Error(`HLS Error: ${data.details}`));
+			setPerformanceMetrics((prev) => ({ ...prev, bufferHealth }))
 		}
-	}, [handleMediaError]);
+	}, [])
+
+	const handleMediaError = useCallback(
+		(error: MediaError) => {
+			startTransition(() => {
+				setMediaState((prev) => ({ ...prev, error }))
+			})
+			onError?.(error)
+		},
+		[onError]
+	)
+
+	const handleHLSError = useCallback(
+		(event: any, data: any) => {
+			if (data.fatal) {
+				console.error("Fatal HLS error:", data)
+				handleMediaError(new Error(`HLS Error: ${data.details}`))
+			}
+		},
+		[handleMediaError]
+	)
 
 	// Performance monitoring
 	useEffect(() => {
-		if (!enablePerformanceMonitoring) return;
+		if (!enablePerformanceMonitoring) return
 
-		let frameCount = 0;
-		let lastTime = performance.now();
+		let frameCount = 0
+		let lastTime = performance.now()
 
 		const measureFPS = () => {
-			frameCount++;
-			const currentTime = performance.now();
+			frameCount++
+			const currentTime = performance.now()
 
 			if (currentTime - lastTime >= 1000) {
-				const fps = Math.round((frameCount * 1000) / (currentTime - lastTime));
+				const fps = Math.round((frameCount * 1000) / (currentTime - lastTime))
 
-				setPerformanceMetrics(prev => ({ ...prev, fps }));
+				setPerformanceMetrics((prev) => ({ ...prev, fps }))
 
-				frameCount = 0;
-				lastTime = currentTime;
+				frameCount = 0
+				lastTime = currentTime
 			}
 
 			if (videoRef.current && !videoRef.current.paused) {
-				requestAnimationFrame(measureFPS);
+				requestAnimationFrame(measureFPS)
 			}
-		};
+		}
 
 		if (videoRef.current) {
-			videoRef.current.addEventListener('play', measureFPS);
+			videoRef.current.addEventListener("play", measureFPS)
 		}
 
 		return () => {
 			if (videoRef.current) {
-				videoRef.current.removeEventListener('play', measureFPS);
+				videoRef.current.removeEventListener("play", measureFPS)
 			}
-		};
-	}, [enablePerformanceMonitoring]);
+		}
+	}, [enablePerformanceMonitoring])
 
 	// Memory monitoring
 	useEffect(() => {
-		if (!enablePerformanceMonitoring || !('memory' in performance)) return;
+		if (!enablePerformanceMonitoring || !("memory" in performance)) return
 
 		const interval = setInterval(() => {
-			const memory = (performance as any).memory;
-			setPerformanceMetrics(prev => ({
+			const memory = (performance as any).memory
+			setPerformanceMetrics((prev) => ({
 				...prev,
-				memoryUsage: memory.usedJSHeapSize / 1024 / 1024, // MB
-			}));
-		}, 2000);
+				memoryUsage: memory.usedJSHeapSize / 1024 / 1024 // MB
+			}))
+		}, 2000)
 
-		return () => clearInterval(interval);
-	}, [enablePerformanceMonitoring]);
+		return () => clearInterval(interval)
+	}, [enablePerformanceMonitoring])
 
 	// Initialize player
 	useEffect(() => {
-		if (!videoRef.current || mediaSources.length === 0) return;
+		if (!videoRef.current || mediaSources.length === 0) return
 
 		// Setup native event listeners
-		const video = videoRef.current;
+		const video = videoRef.current
 
-		video.addEventListener('play', handlePlay);
-		video.addEventListener('pause', handlePause);
-		video.addEventListener('ended', handleEnded);
-		video.addEventListener('timeupdate', handleTimeUpdate);
-		video.addEventListener('loadedmetadata', handleLoadedMetadata);
-		video.addEventListener('volumechange', handleVolumeChange);
-		video.addEventListener('loadstart', onLoadStart);
-		video.addEventListener('canplay', onCanPlay);
+		video.addEventListener("play", handlePlay)
+		video.addEventListener("pause", handlePause)
+		video.addEventListener("ended", handleEnded)
+		video.addEventListener("timeupdate", handleTimeUpdate)
+		video.addEventListener("loadedmetadata", handleLoadedMetadata)
+		video.addEventListener("volumechange", handleVolumeChange)
+		video.addEventListener("loadstart", onLoadStart)
+		video.addEventListener("canplay", onCanPlay)
 
 		// Initialize HLS if needed
-		if (mediaSources[0].type === 'hls' && enableEnhancedHLS) {
-			initializeHLS();
+		if (mediaSources[0].type === "hls" && enableEnhancedHLS) {
+			initializeHLS()
 		} else {
-			fallbackToNativePlayback();
+			fallbackToNativePlayback()
 		}
 
 		// Initialize plugin manager
 		if (video) {
-			pluginManagerRef.current = new EnhancedPluginManager(video as any);
+			pluginManagerRef.current = new EnhancedPluginManager(video as any)
 		}
 
 		return () => {
 			// Cleanup
-			video.removeEventListener('play', handlePlay);
-			video.removeEventListener('pause', handlePause);
-			video.removeEventListener('ended', handleEnded);
-			video.removeEventListener('timeupdate', handleTimeUpdate);
-			video.removeEventListener('loadedmetadata', handleLoadedMetadata);
-			video.removeEventListener('volumechange', handleVolumeChange);
-			video.removeEventListener('loadstart', onLoadStart);
-			video.removeEventListener('canplay', onCanPlay);
-
-			hlsProviderRef.current?.destroy();
-			pluginManagerRef.current?.dispose();
-		};
+			video.removeEventListener("play", handlePlay)
+			video.removeEventListener("pause", handlePause)
+			video.removeEventListener("ended", handleEnded)
+			video.removeEventListener("timeupdate", handleTimeUpdate)
+			video.removeEventListener("loadedmetadata", handleLoadedMetadata)
+			video.removeEventListener("volumechange", handleVolumeChange)
+			video.removeEventListener("loadstart", onLoadStart)
+			video.removeEventListener("canplay", onCanPlay)
+
+			hlsProviderRef.current?.destroy()
+			pluginManagerRef.current?.dispose()
+		}
 	}, [
 		mediaSources,
 		enableEnhancedHLS,
@@ -381,21 +389,21 @@ export const EnhancedMediaPlayer: React.FC<EnhancedMediaPlayerProps> = ({
 		onLoadStart,
 		onCanPlay,
 		initializeHLS,
-		fallbackToNativePlayback,
-	]);
+		fallbackToNativePlayback
+	])
 
 	// Auto-play handling
 	useEffect(() => {
 		if (autoPlay && videoRef.current) {
-			videoRef.current.play().catch(error => {
-				console.warn('Auto-play failed:', error);
-			});
+			videoRef.current.play().catch((error) => {
+				console.warn("Auto-play failed:", error)
+			})
 		}
-	}, [autoPlay]);
+	}, [autoPlay])
 
 	// Render debug panel
 	const DebugPanel = useMemo(() => {
-		if (!showDebugPanel || process.env.NODE_ENV !== 'development') return null;
+		if (!showDebugPanel || process.env.NODE_ENV !== "development") return null
 
 		return (
 			<div className="fixed top-4 right-4 z-50 rounded-lg bg-black/80 p-4 font-mono text-white text-xs">
@@ -403,29 +411,35 @@ export const EnhancedMediaPlayer: React.FC<EnhancedMediaPlayerProps> = ({
 				<div>FPS: {performanceMetrics.fps}</div>
 				<div>Memory: {performanceMetrics.memoryUsage.toFixed(2)} MB</div>
 				<div>Buffer: {performanceMetrics.bufferHealth.toFixed(2)}s</div>
-				<div>Time: {deferredCurrentTime.toFixed(2)}s / {mediaState.duration.toFixed(2)}s</div>
+				<div>
+					Time: {deferredCurrentTime.toFixed(2)}s / {mediaState.duration.toFixed(2)}s
+				</div>
 				<div>Volume: {Math.round(deferredVolume * 100)}%</div>
 				<div>Quality: {mediaState.quality}</div>
-				<div>Playing: {mediaState.isPlaying ? 'Yes' : 'No'}</div>
-				<div>Buffering: {isPending ? 'Yes' : 'No'}</div>
+				<div>Playing: {mediaState.isPlaying ? "Yes" : "No"}</div>
+				<div>Buffering: {isPending ? "Yes" : "No"}</div>
 
 				<h3 className="mt-3 mb-2 font-bold">Preloading Stats</h3>
 				<div>Preloaded: {preloadingControls.getStats().preloadedItems}</div>
 				<div>Engagement: {preloadingControls.getStats().engagementScore.toFixed(1)}%</div>
 				<div>Queue: {preloadingControls.getStats().queueLength}</div>
 			</div>
-		);
-	}, [showDebugPanel, performanceMetrics, deferredCurrentTime, deferredVolume, mediaState, isPending, preloadingControls]);
+		)
+	}, [
+		showDebugPanel,
+		performanceMetrics,
+		deferredCurrentTime,
+		deferredVolume,
+		mediaState,
+		isPending,
+		preloadingControls
+	])
 
 	return (
 		<div
 			ref={containerRef}
-			className={cn(
-				"relative aspect-video overflow-hidden rounded-lg bg-black",
-				className
-			)}
-			{...props}
-		>
+			className={cn("relative aspect-video overflow-hidden rounded-lg bg-black", className)}
+			{...props}>
 			{/* Media Resource Preloader */}
 			{enableIntelligentPreloading && (
 				<MediaResourcePreloader
@@ -476,34 +490,34 @@ export const EnhancedMediaPlayer: React.FC<EnhancedMediaPlayerProps> = ({
 			{/* Debug Panel */}
 			{DebugPanel}
 		</div>
-	);
-};
+	)
+}
 
 // Helper functions
 function getMediaTypeFromExtension(extension?: string): string {
 	switch (extension) {
-		case 'mp4':
-			return 'video/mp4';
-		case 'webm':
-			return 'video/webm';
-		case 'ogg':
-			return 'video/ogg';
-		case 'mp3':
-			return 'audio/mp3';
-		case 'wav':
-			return 'audio/wav';
-		case 'm3u8':
-			return 'hls';
-		case 'hls':
-			return 'hls';
+		case "mp4":
+			return "video/mp4"
+		case "webm":
+			return "video/webm"
+		case "ogg":
+			return "video/ogg"
+		case "mp3":
+			return "audio/mp3"
+		case "wav":
+			return "audio/wav"
+		case "m3u8":
+			return "hls"
+		case "hls":
+			return "hls"
 		default:
-			return 'video/mp4';
+			return "video/mp4"
 	}
 }
 
 function getMediaTypeFromUrl(url: string): string {
-	const extension = url.split('.').pop()?.toLowerCase();
-	return getMediaTypeFromExtension(extension);
+	const extension = url.split(".").pop()?.toLowerCase()
+	return getMediaTypeFromExtension(extension)
 }
 
-export default EnhancedMediaPlayer;
+export default EnhancedMediaPlayer