@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

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

@@ -1,566 +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 { 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, type MediaMimeType } from "../../types"
-import { MediaResourcePreloader } from "../ui/media-resource-preloader"
-
-// Extend MediaMimeType to include HLS and define extended MediaSource
-type ExtendedMediaMimeType = MediaMimeType | "hls"
-
-interface ExtendedMediaSource {
-	src: string
-	type?: ExtendedMediaMimeType
-	media?: string
-}
-
-interface EnhancedMediaPlayerProps extends Omit<MediaPlayerProps, 'src' | 'onTimeUpdate' | 'onError'> {
-	src?: string
-	sources?: ExtendedMediaSource[]
-	controls?: boolean
-	onCanPlay?: () => void
-	onTimeUpdate?: () => void
-	onError?: (error: MediaError) => void
-	/** 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,
-	onDurationChange,
-	onVolumeChange,
-	onLoadedData,
-	volume,
-	preload,
-	crossOrigin,
-	playbackRates,
-	keyboardControls,
-	showControls,
-	customControls,
-	children,
-	...restProps
-}) => {
-	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((): ExtendedMediaSource[] => {
-		if (sources) {
-			return sources
-		}
-		if (src) {
-			const extension = src.split(".").pop()?.toLowerCase()
-			const type = getMediaTypeFromExtension(extension)
-			return [{ src, type: type as ExtendedMediaMimeType }]
-		}
-		return []
-	}, [src, sources])
-
-	// Intelligent preloading
-	const preloadingControls = useIntelligentPreloading(mediaSources as any, {
-		trackUserBehavior: enableIntelligentPreloading,
-		adaptToNetwork: true,
-		strategy: preloadingStrategy,
-		maxPreloadItems: 3
-	})
-
-	// Initialize HLS provider
-	const initializeHLS = useCallback(async () => {
-		if (!videoRef.current || !enableEnhancedHLS || !mediaSources[0]?.src) return
-
-		const mergedHlsConfig = { ...ENHANCED_HLS_DEFAULTS, ...hlsConfig }
-		const provider = new EnhancedHLSProvider(mergedHlsConfig)
-		hlsProviderRef.current = provider
-
-		try {
-			const hls = provider.initialize(videoRef.current, mediaSources[0].src, {
-				autoPlay,
-				muted,
-				loop,
-				preload,
-				crossOrigin
-			})
-
-			// Import Hls dynamically to access Events
-			const Hls = (await import('hls.js')).default
-			// 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, autoPlay, muted, loop, preload, crossOrigin])
-
-	// 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) || "video/mp4"
-
-		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 | Error) => {
-			startTransition(() => {
-				setMediaState((prev) => ({ ...prev, error: error as MediaError }))
-			})
-			// Convert to string for the callback
-			const errorMessage = error instanceof Error ? error.message : `Media error code: ${error.code}`
-			onError?.(error as MediaError)
-		},
-		[onError]
-	)
-
-	const handleHLSError = useCallback(
-		(event: any, data: any) => {
-			if (data.fatal) {
-				console.error("Fatal HLS error:", data)
-				const mediaError = new Error(`HLS Error: ${data.details}`) as any
-				mediaError.code = 4 // MEDIA_ERR_SRC_NOT_SUPPORTED
-				handleMediaError(mediaError)
-			}
-		},
-		[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)
-		if (onLoadStart) {
-			video.addEventListener("loadstart", onLoadStart)
-		}
-		if (onCanPlay) {
-			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)
-			if (onLoadStart) {
-				video.removeEventListener("loadstart", onLoadStart)
-			}
-			if (onCanPlay) {
-				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)}
-			{...restProps}>
-			{/* Media Resource Preloader */}
-			{enableIntelligentPreloading && (
-				<MediaResourcePreloader
-					sources={mediaSources as any}
-					enableIntelligentPreloading={true}
-					adaptToNetworkConditions={true}
-					priority="auto"
-					strategy={preloadingStrategy === "balanced" ? "adaptive" : 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