@therealtinhtute/baroiplayer 1.0.0

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

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