@therealtinhtute/baroiplayer 1.0.7 → 1.1.0

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

@@ -1,509 +0,0 @@
-/**
- * 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;

package/dist/src/components/enhanced/error-handling.d.ts

@@ -1,36 +0,0 @@
-import React from "react";
-export declare const EnhancedLoading: ({ className, showProgress, message }: {
-    className?: string;
-    showProgress?: boolean;
-    message?: string;
-}) => import("react/jsx-runtime").JSX.Element | null;
-export declare const EnhancedError: ({ className, onRetry, showDetails }: {
-    className?: string;
-    onRetry?: () => void;
-    showDetails?: boolean;
-}) => import("react/jsx-runtime").JSX.Element | null;
-interface ErrorBoundaryState {
-    hasError: boolean;
-    error?: Error;
-}
-export declare class MediaPlayerErrorBoundary extends React.Component<{
-    children: React.ReactNode;
-    fallback?: React.ComponentType<{
-        error: Error;
-        retry: () => void;
-    }>;
-}, ErrorBoundaryState> {
-    constructor(props: any);
-    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
-    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
-    retry: () => void;
-    render(): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
-}
-export declare const ConnectionStatus: ({ className }: {
-    className?: string;
-}) => import("react/jsx-runtime").JSX.Element | null;
-export declare const BufferHealthIndicator: ({ className }: {
-    className?: string;
-}) => import("react/jsx-runtime").JSX.Element | null;
-export {};
-//# sourceMappingURL=error-handling.d.ts.map