@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

package/src/components/enhanced/debug-panel.tsx

@@ -1,448 +0,0 @@
-/**
- * Debug Panel Component for Performance Monitoring
- * Development-only component for displaying performance metrics
- */
-
-import React, { useMemo } from "react"
-import { cn } from "../../lib/utils"
-
-interface PerformanceMetrics {
-	fps: number
-	memoryUsage: number
-	bufferHealth: number
-	networkBandwidth: number
-	droppedFrames: number
-	decodedFrames: number
-	presentationTime: number
-}
-
-interface PreloadingStats {
-	preloadedItems: number
-	engagementScore: number
-	queueLength: number
-	hitRate: number
-	totalSaved: number
-}
-
-interface DebugPanelProps {
-	/** Performance metrics to display */
-	performanceMetrics?: Partial<PerformanceMetrics>
-	/** Preloading statistics */
-	preloadingStats?: PreloadingStats
-	/** Current playback state */
-	playbackState?: {
-		currentTime: number
-		duration: number
-		volume: number
-		isPlaying: boolean
-		quality: number
-		isBuffering: boolean
-		error?: string
-	}
-	/** HLS-specific metrics */
-	hlsMetrics?: {
-		currentLevel: number
-		availableLevels: number
-		bandwidthEstimate: number
-		droppedFrames: number
-	}
-	/** Plugin information */
-	pluginInfo?: {
-		loadedPlugins: string[]
-		activePlugins: string[]
-		pluginCount: number
-	}
-	/** Additional debug information */
-	debugInfo?: Record<string, any>
-	/** Custom className */
-	className?: string
-	/** Panel position */
-	position?: "top-right" | "top-left" | "bottom-right" | "bottom-left"
-	/** Whether the panel is collapsed by default */
-	defaultCollapsed?: boolean
-	/** Custom title */
-	title?: string
-}
-
-/**
- * Debug Panel Component
- */
-export const DebugPanel: React.FC<DebugPanelProps> = ({
-	performanceMetrics = {},
-	preloadingStats = {} as PreloadingStats,
-	playbackState = {} as any,
-	hlsMetrics = {},
-	pluginInfo = {},
-	debugInfo = {},
-	className,
-	position = "top-right",
-	defaultCollapsed = false,
-	title = "BaroiPlayer Debug Panel"
-}) => {
-	const [isCollapsed, setIsCollapsed] = React.useState(defaultCollapsed)
-	const [activeTab, setActiveTab] = React.useState<"performance" | "hls" | "plugins" | "debug">(
-		"performance"
-	)
-
-	// Position classes
-	const positionClasses = useMemo(() => {
-		switch (position) {
-			case "top-left":
-				return "top-4 left-4"
-			case "top-right":
-				return "top-4 right-4"
-			case "bottom-left":
-				return "bottom-4 left-4"
-			case "bottom-right":
-				return "bottom-4 right-4"
-			default:
-				return "top-4 right-4"
-		}
-	}, [position])
-
-	// Format bytes
-	const formatBytes = (bytes: number): string => {
-		if (bytes === 0) return "0 B"
-		const k = 1024
-		const sizes = ["B", "KB", "MB", "GB"]
-		const i = Math.floor(Math.log(bytes) / Math.log(k))
-		return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]
-	}
-
-	// Format time
-	const formatTime = (seconds: number): string => {
-		const mins = Math.floor(seconds / 60)
-		const secs = Math.floor(seconds % 60)
-		return `${mins}:${secs.toString().padStart(2, "0")}`
-	}
-
-	// Render performance metrics
-	const renderPerformanceMetrics = () => (
-		<div className="space-y-2">
-			<div className="grid grid-cols-2 gap-2 text-xs">
-				<div>
-					<span className="text-green-400">FPS:</span>
-					<span className="ml-2 font-mono">{performanceMetrics.fps || 0}</span>
-				</div>
-				<div>
-					<span className="text-blue-400">Memory:</span>
-					<span className="ml-2 font-mono">
-						{((performanceMetrics.memoryUsage || 0) / 1024 / 1024).toFixed(1)} MB
-					</span>
-				</div>
-				<div>
-					<span className="text-yellow-400">Buffer:</span>
-					<span className="ml-2 font-mono">
-						{(performanceMetrics.bufferHealth || 0).toFixed(2)}s
-					</span>
-				</div>
-				<div>
-					<span className="text-purple-400">Bandwidth:</span>
-					<span className="ml-2 font-mono">
-						{formatBytes(performanceMetrics.networkBandwidth || 0)}/s
-					</span>
-				</div>
-				<div>
-					<span className="text-red-400">Dropped:</span>
-					<span className="ml-2 font-mono">{performanceMetrics.droppedFrames || 0} frames</span>
-				</div>
-				<div>
-					<span className="text-cyan-400">Decoded:</span>
-					<span className="ml-2 font-mono">{performanceMetrics.decodedFrames || 0} frames</span>
-				</div>
-			</div>
-		</div>
-	)
-
-	// Render playback state
-	const renderPlaybackState = () => (
-		<div className="space-y-2">
-			<div className="grid grid-cols-2 gap-2 text-xs">
-				<div>
-					<span className="text-green-400">Status:</span>
-					<span className="ml-2 font-mono">
-						{playbackState.isPlaying ? (
-							<span className="text-green-300">Playing</span>
-						) : (
-							<span className="text-red-300">Paused</span>
-						)}
-					</span>
-				</div>
-				<div>
-					<span className="text-blue-400">Time:</span>
-					<span className="ml-2 font-mono">
-						{formatTime(playbackState.currentTime || 0)} / {formatTime(playbackState.duration || 0)}
-					</span>
-				</div>
-				<div>
-					<span className="text-yellow-400">Volume:</span>
-					<span className="ml-2 font-mono">{Math.round((playbackState.volume || 0) * 100)}%</span>
-				</div>
-				<div>
-					<span className="text-purple-400">Quality:</span>
-					<span className="ml-2 font-mono">{playbackState.quality || 0}p</span>
-				</div>
-				<div>
-					<span className="text-red-400">Buffering:</span>
-					<span className="ml-2 font-mono">
-						{playbackState.isBuffering ? (
-							<span className="text-yellow-300">Yes</span>
-						) : (
-							<span className="text-green-300">No</span>
-						)}
-					</span>
-				</div>
-				{playbackState.error && (
-					<div className="col-span-2">
-						<span className="text-red-400">Error:</span>
-						<span className="ml-2 break-all font-mono text-red-300 text-xs">
-							{playbackState.error}
-						</span>
-					</div>
-				)}
-			</div>
-		</div>
-	)
-
-	// Render preloading stats
-	const renderPreloadingStats = () => (
-		<div className="space-y-2">
-			<div className="grid grid-cols-2 gap-2 text-xs">
-				<div>
-					<span className="text-green-400">Preloaded:</span>
-					<span className="ml-2 font-mono">{preloadingStats.preloadedItems || 0} items</span>
-				</div>
-				<div>
-					<span className="text-blue-400">Engagement:</span>
-					<span className="ml-2 font-mono">
-						{(preloadingStats.engagementScore || 0).toFixed(1)}%
-					</span>
-				</div>
-				<div>
-					<span className="text-yellow-400">Queue:</span>
-					<span className="ml-2 font-mono">{preloadingStats.queueLength || 0} items</span>
-				</div>
-				<div>
-					<span className="text-purple-400">Hit Rate:</span>
-					<span className="ml-2 font-mono">{(preloadingStats.hitRate || 0).toFixed(1)}%</span>
-				</div>
-				<div className="col-span-2">
-					<span className="text-cyan-400">Saved:</span>
-					<span className="ml-2 font-mono">{formatBytes(preloadingStats.totalSaved || 0)}</span>
-				</div>
-			</div>
-		</div>
-	)
-
-	// Render HLS metrics
-	const renderHLSMetrics = () => (
-		<div className="space-y-2">
-			<div className="grid grid-cols-2 gap-2 text-xs">
-				<div>
-					<span className="text-green-400">Level:</span>
-					<span className="ml-2 font-mono">
-						{hlsMetrics.currentLevel || 0} / {hlsMetrics.availableLevels || 0}
-					</span>
-				</div>
-				<div>
-					<span className="text-blue-400">Bandwidth:</span>
-					<span className="ml-2 font-mono">{formatBytes(hlsMetrics.bandwidthEstimate || 0)}/s</span>
-				</div>
-				<div>
-					<span className="text-red-400">Dropped:</span>
-					<span className="ml-2 font-mono">{hlsMetrics.droppedFrames || 0} frames</span>
-				</div>
-			</div>
-		</div>
-	)
-
-	// Render plugin info
-	const renderPluginInfo = () => (
-		<div className="space-y-2">
-			<div className="text-xs">
-				<div>
-					<span className="text-green-400">Total:</span>
-					<span className="ml-2 font-mono">{pluginInfo.pluginCount || 0} plugins</span>
-				</div>
-				<div className="mt-2">
-					<span className="text-blue-400">Active:</span>
-					<div className="ml-2 space-y-1 font-mono text-xs">
-						{pluginInfo.activePlugins?.map((plugin, index) => (
-							<div key={index} className="text-green-300">
-								• {plugin}
-							</div>
-						)) || <div className="text-gray-400">None</div>}
-					</div>
-				</div>
-				{pluginInfo.loadedPlugins &&
-					pluginInfo.loadedPlugins.length > (pluginInfo.activePlugins?.length || 0) && (
-						<div className="mt-2">
-							<span className="text-yellow-400">Loaded (inactive):</span>
-							<div className="ml-2 space-y-1 font-mono text-xs">
-								{pluginInfo.loadedPlugins
-									.filter((plugin) => !pluginInfo.activePlugins?.includes(plugin))
-									.map((plugin, index) => (
-										<div key={index} className="text-yellow-300">
-											• {plugin}
-										</div>
-									))}
-							</div>
-						</div>
-					)}
-			</div>
-		</div>
-	)
-
-	// Render debug info
-	const renderDebugInfo = () => (
-		<div className="space-y-2">
-			<div className="space-y-1 font-mono text-xs">
-				{Object.entries(debugInfo).map(([key, value]) => (
-					<div key={key}>
-						<span className="text-yellow-400">{key}:</span>
-						<span className="ml-2 text-gray-300">
-							{typeof value === "object" ? JSON.stringify(value, null, 2) : String(value)}
-						</span>
-					</div>
-				))}
-			</div>
-		</div>
-	)
-
-	// Render tabs
-	const renderTabs = () => (
-		<div className="flex space-x-1 border-gray-600 border-b">
-			{[
-				{ id: "performance", label: "Performance" },
-				{ id: "hls", label: "HLS" },
-				{ id: "plugins", label: "Plugins" },
-				{ id: "debug", label: "Debug" }
-			].map((tab) => (
-				<button
-					key={tab.id}
-					onClick={() => setActiveTab(tab.id as any)}
-					className={cn(
-						"px-2 py-1 font-medium text-xs transition-colors",
-						activeTab === tab.id
-							? "border-blue-400 border-b text-blue-400"
-							: "text-gray-400 hover:text-white"
-					)}>
-					{tab.label}
-				</button>
-			))}
-		</div>
-	)
-
-	// Render active tab content
-	const renderTabContent = () => {
-		switch (activeTab) {
-			case "performance":
-				return (
-					<div className="space-y-3">
-						{renderPerformanceMetrics()}
-						<hr className="border-gray-600" />
-						{renderPlaybackState()}
-						<hr className="border-gray-600" />
-						{renderPreloadingStats()}
-					</div>
-				)
-			case "hls":
-				return renderHLSMetrics()
-			case "plugins":
-				return renderPluginInfo()
-			case "debug":
-				return renderDebugInfo()
-			default:
-				return renderPerformanceMetrics()
-		}
-	}
-
-	// Only render in development
-	if (process.env.NODE_ENV !== "development") {
-		return null
-	}
-
-	return (
-		<div
-			className={cn(
-				"fixed z-50 min-w-80 max-w-96 rounded-lg border border-gray-700 bg-black/90 p-3 font-mono text-white text-xs backdrop-blur-sm",
-				positionClasses,
-				className
-			)}>
-			{/* Header */}
-			<div className="mb-3 flex items-center justify-between">
-				<h3 className="font-bold text-blue-400 text-sm">{title}</h3>
-				<div className="flex items-center space-x-2">
-					<button
-						onClick={() => setIsCollapsed(!isCollapsed)}
-						className="text-gray-400 transition-colors hover:text-white"
-						aria-label={isCollapsed ? "Expand" : "Collapse"}>
-						{isCollapsed ? (
-							<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
-								<path
-									d="M3 4.5L6 7.5L9 4.5"
-									stroke="currentColor"
-									strokeWidth="1.5"
-									strokeLinecap="round"
-									strokeLinejoin="round"
-								/>
-							</svg>
-						) : (
-							<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
-								<path
-									d="M3 7.5L6 4.5L9 7.5"
-									stroke="currentColor"
-									strokeWidth="1.5"
-									strokeLinecap="round"
-									strokeLinejoin="round"
-								/>
-							</svg>
-						)}
-					</button>
-				</div>
-			</div>
-
-			{/* Collapsed content */}
-			{isCollapsed ? (
-				<div className="grid grid-cols-2 gap-2 text-xs">
-					<div>
-						<span className="text-green-400">FPS:</span>
-						<span className="ml-1 font-mono">{performanceMetrics.fps || 0}</span>
-					</div>
-					<div>
-						<span className="text-blue-400">Memory:</span>
-						<span className="ml-1 font-mono">
-							{((performanceMetrics.memoryUsage || 0) / 1024 / 1024).toFixed(1)}MB
-						</span>
-					</div>
-				</div>
-			) : (
-				<>
-					{/* Tabs */}
-					{renderTabs()}
-
-					{/* Tab Content */}
-					<div className="mt-3 max-h-64 overflow-y-auto">{renderTabContent()}</div>
-				</>
-			)}
-		</div>
-	)
-}
-
-/**
- * Performance Debug Panel - simplified version focused on performance metrics
- */
-export const PerformanceDebugPanel: React.FC<
-	Omit<DebugPanelProps, "position" | "defaultCollapsed" | "title">
-> = (props) => {
-	return (
-		<DebugPanel
-			{...props}
-			position="top-right"
-			defaultCollapsed={false}
-			title="Performance Monitor"
-		/>
-	)
-}
-
-export default DebugPanel