@therealtinhtute/baroiplayer 1.0.0

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

@@ -0,0 +1,509 @@
+/**
+ * Enhanced Media Player with all optimizations applied
+ * Integrates React 19 features, HLS optimization, and intelligent preloading
+ */
+
+import React, {
+	useRef,
+	useState,
+	useEffect,
+	useCallback,
+	useMemo,
+	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';
+
+interface EnhancedMediaPlayerProps extends MediaPlayerProps {
+	/** Enable enhanced HLS optimization */
+	enableEnhancedHLS?: boolean;
+	/** Enable intelligent preloading */
+	enableIntelligentPreloading?: boolean;
+	/** Enable performance monitoring */
+	enablePerformanceMonitoring?: boolean;
+	/** Custom HLS configuration */
+	hlsConfig?: any;
+	/** Preloading strategy */
+	preloadingStrategy?: 'conservative' | 'balanced' | 'aggressive';
+	/** Show performance debug panel (development only) */
+	showDebugPanel?: boolean;
+}
+
+interface MediaState {
+	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;
+}
+
+/**
+ * Enhanced Media Player Component
+ */
+export const EnhancedMediaPlayer: React.FC<EnhancedMediaPlayerProps> = ({
+	src,
+	sources,
+	poster,
+	autoPlay = false,
+	muted = false,
+	loop = false,
+	controls = true,
+	className,
+	enableEnhancedHLS = true,
+	enableIntelligentPreloading = true,
+	enablePerformanceMonitoring = process.env.NODE_ENV === 'development',
+	hlsConfig = {},
+	preloadingStrategy = 'balanced',
+	showDebugPanel = false,
+	onPlay,
+	onPause,
+	onEnded,
+	onError,
+	onTimeUpdate,
+	onLoadStart,
+	onCanPlay,
+	...props
+}) => {
+	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 optimisticState = useOptimistic(
+		{ isPlaying: false, volume: 1 },
+		(state, update: Partial<MediaState>) => ({ ...state, ...update })
+	);
+
+	// Media state
+	const [mediaState, setMediaState] = useState<MediaState>({
+		isPlaying: false,
+		currentTime: 0,
+		duration: 0,
+		volume: 1,
+		isMuted: muted,
+		isFullscreen: false,
+		isBuffering: false,
+		quality: 0,
+		error: null,
+	});
+
+	// Performance metrics
+	const [performanceMetrics, setPerformanceMetrics] = useState<PerformanceMetrics>({
+		fps: 0,
+		memoryUsage: 0,
+		bufferHealth: 0,
+		networkBandwidth: 0,
+		droppedFrames: 0,
+	});
+
+	// Deferred values for non-critical updates
+	const deferredCurrentTime = useDeferredValue(mediaState.currentTime);
+	const deferredVolume = useDeferredValue(mediaState.volume);
+
+	// Prepare media sources
+	const mediaSources = useMemo((): MediaSource[] => {
+		if (sources) {
+			return sources;
+		}
+		if (src) {
+			const extension = src.split('.').pop()?.toLowerCase();
+			const type = getMediaTypeFromExtension(extension);
+			return [{ src, type }];
+		}
+		return [];
+	}, [src, sources]);
+
+	// Intelligent preloading
+	const preloadingControls = useIntelligentPreloading(mediaSources, {
+		trackUserBehavior: enableIntelligentPreloading,
+		adaptToNetwork: true,
+		strategy: preloadingStrategy,
+		maxPreloadItems: 3,
+	});
+
+	// Initialize HLS provider
+	const initializeHLS = useCallback(async () => {
+		if (!videoRef.current || !enableEnhancedHLS) return;
+
+		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,
+			});
+
+			// Setup HLS event listeners
+			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();
+		}
+	}, [enableEnhancedHLS, hlsConfig, mediaSources]);
+
+	// Fallback to native playback
+	const fallbackToNativePlayback = useCallback(() => {
+		if (!videoRef.current || !mediaSources[0]) return;
+
+		const source = document.createElement('source');
+		source.src = mediaSources[0].src;
+		source.type = getMediaTypeFromUrl(mediaSources[0].src);
+
+		videoRef.current.appendChild(source);
+		videoRef.current.load();
+	}, [mediaSources]);
+
+	// Media event handlers
+	const handlePlay = useCallback(() => {
+		startTransition(() => {
+			setMediaState(prev => ({ ...prev, isPlaying: true }));
+		});
+		onPlay?.();
+	}, [onPlay]);
+
+	const handlePause = useCallback(() => {
+		startTransition(() => {
+			setMediaState(prev => ({ ...prev, isPlaying: false }));
+		});
+		onPause?.();
+	}, [onPause]);
+
+	const handleEnded = useCallback(() => {
+		startTransition(() => {
+			setMediaState(prev => ({ ...prev, isPlaying: false }));
+		});
+		onEnded?.();
+	}, [onEnded]);
+
+	const handleTimeUpdate = useCallback(() => {
+		if (!videoRef.current) return;
+
+		startTransition(() => {
+			setMediaState(prev => ({
+				...prev,
+				currentTime: videoRef.current!.currentTime,
+			}));
+		});
+		onTimeUpdate?.();
+	}, [onTimeUpdate]);
+
+	const handleLoadedMetadata = useCallback(() => {
+		if (!videoRef.current) return;
+
+		startTransition(() => {
+			setMediaState(prev => ({
+				...prev,
+				duration: videoRef.current!.duration,
+			}));
+		});
+	}, []);
+
+	const handleVolumeChange = useCallback(() => {
+		if (!videoRef.current) return;
+
+		startTransition(() => {
+			setMediaState(prev => ({
+				...prev,
+				volume: videoRef.current!.volume,
+				isMuted: videoRef.current!.muted,
+			}));
+		});
+	}, []);
+
+	const handleQualityChange = useCallback((event: any, data: any) => {
+		startTransition(() => {
+			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;
+
+			for (let i = 0; i < buffered.length; i++) {
+				const start = buffered.start(i);
+				const end = buffered.end(i);
+				if (start <= currentTime && end > currentTime) {
+					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}`));
+		}
+	}, [handleMediaError]);
+
+	// Performance monitoring
+	useEffect(() => {
+		if (!enablePerformanceMonitoring) return;
+
+		let frameCount = 0;
+		let lastTime = performance.now();
+
+		const measureFPS = () => {
+			frameCount++;
+			const currentTime = performance.now();
+
+			if (currentTime - lastTime >= 1000) {
+				const fps = Math.round((frameCount * 1000) / (currentTime - lastTime));
+
+				setPerformanceMetrics(prev => ({ ...prev, fps }));
+
+				frameCount = 0;
+				lastTime = currentTime;
+			}
+
+			if (videoRef.current && !videoRef.current.paused) {
+				requestAnimationFrame(measureFPS);
+			}
+		};
+
+		if (videoRef.current) {
+			videoRef.current.addEventListener('play', measureFPS);
+		}
+
+		return () => {
+			if (videoRef.current) {
+				videoRef.current.removeEventListener('play', measureFPS);
+			}
+		};
+	}, [enablePerformanceMonitoring]);
+
+	// Memory monitoring
+	useEffect(() => {
+		if (!enablePerformanceMonitoring || !('memory' in performance)) return;
+
+		const interval = setInterval(() => {
+			const memory = (performance as any).memory;
+			setPerformanceMetrics(prev => ({
+				...prev,
+				memoryUsage: memory.usedJSHeapSize / 1024 / 1024, // MB
+			}));
+		}, 2000);
+
+		return () => clearInterval(interval);
+	}, [enablePerformanceMonitoring]);
+
+	// Initialize player
+	useEffect(() => {
+		if (!videoRef.current || mediaSources.length === 0) return;
+
+		// Setup native event listeners
+		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);
+
+		// Initialize HLS if needed
+		if (mediaSources[0].type === 'hls' && enableEnhancedHLS) {
+			initializeHLS();
+		} else {
+			fallbackToNativePlayback();
+		}
+
+		// Initialize plugin manager
+		if (video) {
+			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();
+		};
+	}, [
+		mediaSources,
+		enableEnhancedHLS,
+		handlePlay,
+		handlePause,
+		handleEnded,
+		handleTimeUpdate,
+		handleLoadedMetadata,
+		handleVolumeChange,
+		onLoadStart,
+		onCanPlay,
+		initializeHLS,
+		fallbackToNativePlayback,
+	]);
+
+	// Auto-play handling
+	useEffect(() => {
+		if (autoPlay && videoRef.current) {
+			videoRef.current.play().catch(error => {
+				console.warn('Auto-play failed:', error);
+			});
+		}
+	}, [autoPlay]);
+
+	// Render debug panel
+	const DebugPanel = useMemo(() => {
+		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">
+				<h3 className="mb-2 font-bold">Performance Metrics</h3>
+				<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>Volume: {Math.round(deferredVolume * 100)}%</div>
+				<div>Quality: {mediaState.quality}</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]);
+
+	return (
+		<div
+			ref={containerRef}
+			className={cn(
+				"relative aspect-video overflow-hidden rounded-lg bg-black",
+				className
+			)}
+			{...props}
+		>
+			{/* Media Resource Preloader */}
+			{enableIntelligentPreloading && (
+				<MediaResourcePreloader
+					sources={mediaSources}
+					enableIntelligentPreloading={true}
+					adaptToNetworkConditions={true}
+					priority="auto"
+					strategy={preloadingStrategy}
+				/>
+			)}
+
+			{/* Video Element */}
+			<video
+				ref={videoRef}
+				className="h-full w-full"
+				poster={poster}
+				muted={muted}
+				loop={loop}
+				playsInline
+				preload="metadata"
+				crossOrigin="anonymous"
+			/>
+
+			{/* Loading State */}
+			{isPending && (
+				<div className="absolute inset-0 flex items-center justify-center bg-black/50">
+					<div className="h-8 w-8 animate-spin rounded-full border-2 border-white border-t-transparent" />
+				</div>
+			)}
+
+			{/* Error State */}
+			{mediaState.error && (
+				<div className="absolute inset-0 flex items-center justify-center bg-black/75">
+					<div className="p-4 text-center text-white">
+						<h3 className="mb-2 font-semibold text-lg">Playback Error</h3>
+						<p className="text-sm opacity-75">{mediaState.error.message}</p>
+					</div>
+				</div>
+			)}
+
+			{/* Controls Slot */}
+			{controls && (
+				<div className="absolute right-0 bottom-0 left-0">
+					{/* Controls will be rendered here */}
+				</div>
+			)}
+
+			{/* 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';
+		default:
+			return 'video/mp4';
+	}
+}
+
+function getMediaTypeFromUrl(url: string): string {
+	const extension = url.split('.').pop()?.toLowerCase();
+	return getMediaTypeFromExtension(extension);
+}
+
+export default EnhancedMediaPlayer;