@therealtinhtute/baroiplayer 1.0.7 → 1.1.0

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

@@ -3,65 +3,65 @@
  * Development-only component for displaying performance metrics
  */
 
-import React, { useMemo } from 'react';
-import { cn } from '../../lib/utils';
+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;
+	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;
+	preloadedItems: number
+	engagementScore: number
+	queueLength: number
+	hitRate: number
+	totalSaved: number
 }
 
 interface DebugPanelProps {
 	/** Performance metrics to display */
-	performanceMetrics?: Partial<PerformanceMetrics>;
+	performanceMetrics?: Partial<PerformanceMetrics>
 	/** Preloading statistics */
-	preloadingStats?: PreloadingStats;
+	preloadingStats?: PreloadingStats
 	/** Current playback state */
 	playbackState?: {
-		currentTime: number;
-		duration: number;
-		volume: number;
-		isPlaying: boolean;
-		quality: number;
-		isBuffering: boolean;
-		error?: string;
-	};
+		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;
-	};
+		currentLevel: number
+		availableLevels: number
+		bandwidthEstimate: number
+		droppedFrames: number
+	}
 	/** Plugin information */
 	pluginInfo?: {
-		loadedPlugins: string[];
-		activePlugins: string[];
-		pluginCount: number;
-	};
+		loadedPlugins: string[]
+		activePlugins: string[]
+		pluginCount: number
+	}
 	/** Additional debug information */
-	debugInfo?: Record<string, any>;
+	debugInfo?: Record<string, any>
 	/** Custom className */
-	className?: string;
+	className?: string
 	/** Panel position */
-	position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+	position?: "top-right" | "top-left" | "bottom-right" | "bottom-left"
 	/** Whether the panel is collapsed by default */
-	defaultCollapsed?: boolean;
+	defaultCollapsed?: boolean
 	/** Custom title */
-	title?: string;
+	title?: string
 }
 
 /**
@@ -75,44 +75,46 @@ export const DebugPanel: React.FC<DebugPanelProps> = ({
 	pluginInfo = {},
 	debugInfo = {},
 	className,
-	position = 'top-right',
+	position = "top-right",
 	defaultCollapsed = false,
-	title = 'BaroiPlayer Debug Panel'
+	title = "BaroiPlayer Debug Panel"
 }) => {
-	const [isCollapsed, setIsCollapsed] = React.useState(defaultCollapsed);
-	const [activeTab, setActiveTab] = React.useState<'performance' | 'hls' | 'plugins' | 'debug'>('performance');
+	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';
+			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';
+				return "top-4 right-4"
 		}
-	}, [position]);
+	}, [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];
-	};
+		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')}`;
-	};
+		const mins = Math.floor(seconds / 60)
+		const secs = Math.floor(seconds % 60)
+		return `${mins}:${secs.toString().padStart(2, "0")}`
+	}
 
 	// Render performance metrics
 	const renderPerformanceMetrics = () => (
@@ -124,15 +126,21 @@ export const DebugPanel: React.FC<DebugPanelProps> = ({
 				</div>
 				<div>
 					<span className="text-blue-400">Memory:</span>
-					<span className="ml-2 font-mono">{((performanceMetrics.memoryUsage || 0) / 1024 / 1024).toFixed(1)} MB</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>
+					<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>
+					<span className="ml-2 font-mono">
+						{formatBytes(performanceMetrics.networkBandwidth || 0)}/s
+					</span>
 				</div>
 				<div>
 					<span className="text-red-400">Dropped:</span>
@@ -144,7 +152,7 @@ export const DebugPanel: React.FC<DebugPanelProps> = ({
 				</div>
 			</div>
 		</div>
-	);
+	)
 
 	// Render playback state
 	const renderPlaybackState = () => (
@@ -194,7 +202,7 @@ export const DebugPanel: React.FC<DebugPanelProps> = ({
 				)}
 			</div>
 		</div>
-	);
+	)
 
 	// Render preloading stats
 	const renderPreloadingStats = () => (
@@ -206,7 +214,9 @@ export const DebugPanel: React.FC<DebugPanelProps> = ({
 				</div>
 				<div>
 					<span className="text-blue-400">Engagement:</span>
-					<span className="ml-2 font-mono">{(preloadingStats.engagementScore || 0).toFixed(1)}%</span>
+					<span className="ml-2 font-mono">
+						{(preloadingStats.engagementScore || 0).toFixed(1)}%
+					</span>
 				</div>
 				<div>
 					<span className="text-yellow-400">Queue:</span>
@@ -222,7 +232,7 @@ export const DebugPanel: React.FC<DebugPanelProps> = ({
 				</div>
 			</div>
 		</div>
-	);
+	)
 
 	// Render HLS metrics
 	const renderHLSMetrics = () => (
@@ -244,7 +254,7 @@ export const DebugPanel: React.FC<DebugPanelProps> = ({
 				</div>
 			</div>
 		</div>
-	);
+	)
 
 	// Render plugin info
 	const renderPluginInfo = () => (
@@ -258,25 +268,30 @@ export const DebugPanel: React.FC<DebugPanelProps> = ({
 					<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 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>
-								))}
+				{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>
 		</div>
-	);
+	)
 
 	// Render debug info
 	const renderDebugInfo = () => (
@@ -286,23 +301,23 @@ export const DebugPanel: React.FC<DebugPanelProps> = ({
 					<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)}
+							{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 => (
+				{ 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)}
@@ -310,19 +325,18 @@ export const DebugPanel: React.FC<DebugPanelProps> = ({
 						"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'
-					)}
-				>
+							: "text-gray-400 hover:text-white"
+					)}>
 					{tab.label}
 				</button>
 			))}
 		</div>
-	);
+	)
 
 	// Render active tab content
 	const renderTabContent = () => {
 		switch (activeTab) {
-			case 'performance':
+			case "performance":
 				return (
 					<div className="space-y-3">
 						{renderPerformanceMetrics()}
@@ -331,21 +345,21 @@ export const DebugPanel: React.FC<DebugPanelProps> = ({
 						<hr className="border-gray-600" />
 						{renderPreloadingStats()}
 					</div>
-				);
-			case 'hls':
-				return renderHLSMetrics();
-			case 'plugins':
-				return renderPluginInfo();
-			case 'debug':
-				return renderDebugInfo();
+				)
+			case "hls":
+				return renderHLSMetrics()
+			case "plugins":
+				return renderPluginInfo()
+			case "debug":
+				return renderDebugInfo()
 			default:
-				return renderPerformanceMetrics();
+				return renderPerformanceMetrics()
 		}
-	};
+	}
 
 	// Only render in development
-	if (process.env.NODE_ENV !== 'development') {
-		return null;
+	if (process.env.NODE_ENV !== "development") {
+		return null
 	}
 
 	return (
@@ -354,8 +368,7 @@ export const DebugPanel: React.FC<DebugPanelProps> = ({
 				"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>
@@ -363,15 +376,26 @@ export const DebugPanel: React.FC<DebugPanelProps> = ({
 					<button
 						onClick={() => setIsCollapsed(!isCollapsed)}
 						className="text-gray-400 transition-colors hover:text-white"
-						aria-label={isCollapsed ? 'Expand' : 'Collapse'}
-					>
+						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" />
+								<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" />
+								<path
+									d="M3 7.5L6 4.5L9 7.5"
+									stroke="currentColor"
+									strokeWidth="1.5"
+									strokeLinecap="round"
+									strokeLinejoin="round"
+								/>
 							</svg>
 						)}
 					</button>
@@ -387,7 +411,9 @@ export const DebugPanel: React.FC<DebugPanelProps> = ({
 					</div>
 					<div>
 						<span className="text-blue-400">Memory:</span>
-						<span className="ml-1 font-mono">{((performanceMetrics.memoryUsage || 0) / 1024 / 1024).toFixed(1)}MB</span>
+						<span className="ml-1 font-mono">
+							{((performanceMetrics.memoryUsage || 0) / 1024 / 1024).toFixed(1)}MB
+						</span>
 					</div>
 				</div>
 			) : (
@@ -396,19 +422,19 @@ export const DebugPanel: React.FC<DebugPanelProps> = ({
 					{renderTabs()}
 
 					{/* Tab Content */}
-					<div className="mt-3 max-h-64 overflow-y-auto">
-						{renderTabContent()}
-					</div>
+					<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) => {
+export const PerformanceDebugPanel: React.FC<
+	Omit<DebugPanelProps, "position" | "defaultCollapsed" | "title">
+> = (props) => {
 	return (
 		<DebugPanel
 			{...props}
@@ -416,7 +442,7 @@ export const PerformanceDebugPanel: React.FC<Omit<DebugPanelProps, 'position' |
 			defaultCollapsed={false}
 			title="Performance Monitor"
 		/>
-	);
-};
+	)
+}
 
-export default DebugPanel;
+export default DebugPanel