@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

package/src/core/performance/performance-monitor.tsx

@@ -1,488 +0,0 @@
-import React, { useState, useEffect, useRef, useCallback, useReducer } from "react"
-// Import type safely with fallback
-type ReportHandler = (metric: { name: string; value: number }) => void
-
-// Performance metrics types
-export interface PerformanceMetrics {
-	// Core Web Vitals
-	lcp?: number // Largest Contentful Paint
-	fid?: number // First Input Delay
-	cls?: number // Cumulative Layout Shift
-	fcp?: number // First Contentful Paint
-	ttfb?: number // Time to First Byte
-	inp?: number // Interaction to Next Paint
-
-	// Custom metrics
-	componentRenderTime: number
-	bundleLoadTime: number
-	mediaLoadTime: number
-	memoryUsage: number
-
-	// Performance scores
-	performanceScore: number
-	timestamp: number
-}
-
-export interface PerformanceThresholds {
-	lcp: { good: number; poor: number }
-	fid: { good: number; poor: number }
-	cls: { good: number; poor: number }
-	renderTime: { good: number; poor: number }
-	memoryUsage: { good: number; poor: number }
-}
-
-export const defaultThresholds: PerformanceThresholds = {
-	lcp: { good: 2500, poor: 4000 },
-	fid: { good: 100, poor: 300 },
-	cls: { good: 0.1, poor: 0.25 },
-	renderTime: { good: 16, poor: 100 }, // Target 60fps = 16.67ms per frame
-	memoryUsage: { good: 50 * 1024 * 1024, poor: 100 * 1024 * 1024 } // 50MB good, 100MB poor
-}
-
-// Performance monitoring class
-export class PerformanceMonitor {
-	private metrics: PerformanceMetrics[] = []
-	private listeners: Set<(metrics: PerformanceMetrics) => void> = new Set()
-	private thresholds: PerformanceThresholds
-	private observer?: PerformanceObserver
-	private isMonitoring = false
-
-	constructor(thresholds: PerformanceThresholds = defaultThresholds) {
-		this.thresholds = thresholds
-		this.initializeWebVitals()
-		this.initializePerformanceObserver()
-	}
-
-	private async initializeWebVitals() {
-		if (typeof window === "undefined") return
-
-		try {
-			// Try to import web-vitals dynamically and handle different versions
-			const webVitals = await import("web-vitals").catch(() => null)
-
-			if (!webVitals) {
-				console.warn("web-vitals package not available, Core Web Vitals tracking disabled")
-				return
-			}
-
-			const reportHandler: ReportHandler = (metric) => {
-				this.updateMetric(metric.name.toLowerCase() as keyof PerformanceMetrics, metric.value)
-			}
-
-			// Handle different web-vitals versions safely
-			const vitalsAny = webVitals as any
-			if (vitalsAny.getCLS) vitalsAny.getCLS(reportHandler)
-			if (vitalsAny.getFID) vitalsAny.getFID(reportHandler)
-			if (vitalsAny.getFCP) vitalsAny.getFCP(reportHandler)
-			if (vitalsAny.getLCP) vitalsAny.getLCP(reportHandler)
-			if (vitalsAny.getTTFB) vitalsAny.getTTFB(reportHandler)
-			if (vitalsAny.onINP) vitalsAny.onINP(reportHandler)
-		} catch (error) {
-			console.warn("Web Vitals initialization failed:", error)
-		}
-	}
-
-	private initializePerformanceObserver() {
-		if (typeof window === "undefined" || !("PerformanceObserver" in window)) return
-
-		try {
-			this.observer = new PerformanceObserver((list) => {
-				for (const entry of list.getEntries()) {
-					this.handlePerformanceEntry(entry)
-				}
-			})
-
-			this.observer.observe({ entryTypes: ["measure", "navigation", "resource", "paint"] })
-		} catch (error) {
-			console.warn("PerformanceObserver not supported:", error)
-		}
-	}
-
-	private handlePerformanceEntry(entry: PerformanceEntry) {
-		switch (entry.entryType) {
-			case "measure":
-				if (entry.name.startsWith("baroiplayer-render")) {
-					this.updateMetric("componentRenderTime", entry.duration)
-				}
-				break
-
-			case "resource":
-				if (entry.name.includes(".js") || entry.name.includes(".css")) {
-					this.updateMetric("bundleLoadTime", entry.duration)
-				}
-				break
-
-			case "paint":
-				if (entry.name === "first-contentful-paint") {
-					this.updateMetric("fcp", entry.startTime)
-				}
-				break
-		}
-	}
-
-	private updateMetric(key: keyof PerformanceMetrics, value: number) {
-		const currentMetrics = this.getCurrentMetrics()
-		const updatedMetrics = {
-			...currentMetrics,
-			[key]: value,
-			timestamp: Date.now(),
-			performanceScore: this.calculatePerformanceScore({ ...currentMetrics, [key]: value })
-		}
-
-		this.metrics.push(updatedMetrics)
-
-		// Keep only last 100 metrics
-		if (this.metrics.length > 100) {
-			this.metrics = this.metrics.slice(-100)
-		}
-
-		this.listeners.forEach((listener) => listener(updatedMetrics))
-	}
-
-	private getCurrentMetrics(): PerformanceMetrics {
-		const latest = this.metrics[this.metrics.length - 1]
-		return (
-			latest || {
-				componentRenderTime: 0,
-				bundleLoadTime: 0,
-				mediaLoadTime: 0,
-				memoryUsage: this.getMemoryUsage(),
-				performanceScore: 0,
-				timestamp: Date.now()
-			}
-		)
-	}
-
-	private getMemoryUsage(): number {
-		if ("memory" in performance) {
-			return (performance as any).memory.usedJSHeapSize || 0
-		}
-		return 0
-	}
-
-	private calculatePerformanceScore(metrics: PerformanceMetrics): number {
-		let score = 100
-
-		// Penalize based on thresholds
-		if (metrics.lcp && metrics.lcp > this.thresholds.lcp.good) {
-			score -= metrics.lcp > this.thresholds.lcp.poor ? 30 : 15
-		}
-
-		if (metrics.fid && metrics.fid > this.thresholds.fid.good) {
-			score -= metrics.fid > this.thresholds.fid.poor ? 25 : 10
-		}
-
-		if (metrics.cls && metrics.cls > this.thresholds.cls.good) {
-			score -= metrics.cls > this.thresholds.cls.poor ? 20 : 10
-		}
-
-		if (metrics.componentRenderTime > this.thresholds.renderTime.good) {
-			score -= metrics.componentRenderTime > this.thresholds.renderTime.poor ? 20 : 10
-		}
-
-		if (metrics.memoryUsage > this.thresholds.memoryUsage.good) {
-			score -= metrics.memoryUsage > this.thresholds.memoryUsage.poor ? 15 : 5
-		}
-
-		return Math.max(0, score)
-	}
-
-	// Public API
-	public startMonitoring() {
-		this.isMonitoring = true
-		this.startMemoryMonitoring()
-	}
-
-	public stopMonitoring() {
-		this.isMonitoring = false
-		if (this.observer) {
-			this.observer.disconnect()
-		}
-	}
-
-	private startMemoryMonitoring() {
-		if (!this.isMonitoring) return
-
-		this.updateMetric("memoryUsage", this.getMemoryUsage())
-		setTimeout(() => this.startMemoryMonitoring(), 5000) // Check every 5 seconds
-	}
-
-	public measureComponentRender(componentName: string, renderFn: () => any): any {
-		const startMark = `baroiplayer-render-${componentName}-start`
-		const endMark = `baroiplayer-render-${componentName}-end`
-		const measureName = `baroiplayer-render-${componentName}`
-
-		performance.mark(startMark)
-		const result = renderFn()
-		performance.mark(endMark)
-
-		try {
-			performance.measure(measureName, startMark, endMark)
-		} catch (error) {
-			console.warn("Performance measurement failed:", error)
-		}
-
-		return result
-	}
-
-	public subscribe(listener: (metrics: PerformanceMetrics) => void): () => void {
-		this.listeners.add(listener)
-		return () => this.listeners.delete(listener)
-	}
-
-	public getLatestMetrics(): PerformanceMetrics | null {
-		return this.metrics[this.metrics.length - 1] || null
-	}
-
-	public getAllMetrics(): PerformanceMetrics[] {
-		return [...this.metrics]
-	}
-
-	public getAverageMetrics(count = 10): Partial<PerformanceMetrics> {
-		const recentMetrics = this.metrics.slice(-count)
-		if (recentMetrics.length === 0) return {}
-
-		const averages: Partial<PerformanceMetrics> = {}
-		const keys: Array<keyof PerformanceMetrics> = [
-			"lcp",
-			"fid",
-			"cls",
-			"fcp",
-			"ttfb",
-			"inp",
-			"componentRenderTime",
-			"bundleLoadTime",
-			"mediaLoadTime",
-			"memoryUsage",
-			"performanceScore"
-		]
-
-		keys.forEach((key) => {
-			const values = recentMetrics
-				.map((m) => m[key] as number)
-				.filter((v) => typeof v === "number" && !isNaN(v))
-
-			if (values.length > 0) {
-				;(averages as any)[key] = values.reduce((sum, v) => sum + v, 0) / values.length
-			}
-		})
-
-		return averages
-	}
-
-	public getThresholds(): PerformanceThresholds {
-		return this.thresholds
-	}
-
-	public updateThresholds(newThresholds: Partial<PerformanceThresholds>) {
-		this.thresholds = { ...this.thresholds, ...newThresholds }
-	}
-}
-
-// Global performance monitor instance
-export const performanceMonitor = new PerformanceMonitor()
-
-// React hook for performance monitoring
-export function usePerformanceMonitor() {
-	const [metrics, setMetrics] = useState<PerformanceMetrics | null>(null)
-	const [isSupported, setIsSupported] = useState(true)
-
-	useEffect(() => {
-		setIsSupported(typeof window !== "undefined" && "performance" in window)
-
-		if (!isSupported) return
-
-		performanceMonitor.startMonitoring()
-		const unsubscribe = performanceMonitor.subscribe(setMetrics)
-
-		return () => {
-			unsubscribe()
-			performanceMonitor.stopMonitoring()
-		}
-	}, [isSupported])
-
-	const measureRender = useCallback((componentName: string, renderFn: () => any): any => {
-		return performanceMonitor.measureComponentRender(componentName, renderFn)
-	}, [])
-
-	return {
-		metrics,
-		isSupported,
-		measureRender,
-		averageMetrics: performanceMonitor.getAverageMetrics(),
-		allMetrics: performanceMonitor.getAllMetrics(),
-		thresholds: performanceMonitor.getThresholds()
-	}
-}
-
-// HOC for performance monitoring
-export function withPerformanceMonitoring(
-	WrappedComponent: React.ComponentType<any>,
-	componentName?: string
-) {
-	const displayName =
-		componentName || WrappedComponent.displayName || WrappedComponent.name || "Component"
-
-	function PerformanceMonitoredComponent(props: any) {
-		const renderRef = useRef(0)
-		const { measureRender } = usePerformanceMonitor()
-
-		// Use a simple counter that increments during render but doesn't access the ref value
-		const renderKey = useState(() => Math.random())[0]
-
-		// Update ref in effect to track count without accessing during render
-		useEffect(() => {
-			renderRef.current += 1
-		})
-
-		return measureRender(`${displayName}-${renderKey}`, () => <WrappedComponent {...props} />)
-	}
-
-	PerformanceMonitoredComponent.displayName = `withPerformanceMonitoring(${displayName})`
-	return PerformanceMonitoredComponent
-}
-
-// Performance regression detector
-export class PerformanceRegressionDetector {
-	private baselineMetrics: PerformanceMetrics | null = null
-	private regressionThreshold = 0.2 // 20% degradation threshold
-
-	setBaseline(metrics: PerformanceMetrics) {
-		this.baselineMetrics = metrics
-	}
-
-	detectRegression(currentMetrics: PerformanceMetrics): Array<{
-		metric: keyof PerformanceMetrics
-		baseline: number
-		current: number
-		degradation: number
-	}> {
-		if (!this.baselineMetrics) return []
-
-		const regressions: Array<{
-			metric: keyof PerformanceMetrics
-			baseline: number
-			current: number
-			degradation: number
-		}> = []
-
-		const metricsToCheck: Array<keyof PerformanceMetrics> = [
-			"componentRenderTime",
-			"bundleLoadTime",
-			"mediaLoadTime",
-			"memoryUsage"
-		]
-
-		metricsToCheck.forEach((metric) => {
-			const baseline = this.baselineMetrics![metric] as number
-			const current = currentMetrics[metric] as number
-
-			if (baseline && current && baseline > 0) {
-				const degradation = (current - baseline) / baseline
-				if (degradation > this.regressionThreshold) {
-					regressions.push({ metric, baseline, current, degradation })
-				}
-			}
-		})
-
-		return regressions
-	}
-
-	setRegressionThreshold(threshold: number) {
-		this.regressionThreshold = Math.max(0, Math.min(1, threshold))
-	}
-}
-
-// Development dashboard component
-export interface PerformanceDashboardProps {
-	className?: string
-	showAdvanced?: boolean
-}
-
-export function PerformanceDashboard({
-	className = "",
-	showAdvanced = false
-}: PerformanceDashboardProps) {
-	const { metrics, averageMetrics, thresholds, isSupported } = usePerformanceMonitor()
-
-	if (!isSupported || !metrics) {
-		return (
-			<div className={`performance-dashboard ${className}`}>
-				<p>Performance monitoring not supported in this environment</p>
-			</div>
-		)
-	}
-
-	const getScoreColor = (score: number) => {
-		if (score >= 90) return "text-green-600"
-		if (score >= 70) return "text-yellow-600"
-		return "text-red-600"
-	}
-
-	const formatBytes = (bytes: number) => {
-		return `${(bytes / 1024 / 1024).toFixed(2)} MB`
-	}
-
-	return (
-		<div className={`performance-dashboard rounded-lg bg-white p-4 shadow ${className}`}>
-			<h3 className="mb-4 font-semibold text-lg">Performance Dashboard</h3>
-
-			{/* Performance Score */}
-			<div className="mb-4">
-				<div className="flex items-center justify-between">
-					<span>Performance Score</span>
-					<span className={`font-bold ${getScoreColor(metrics.performanceScore)}`}>
-						{metrics.performanceScore.toFixed(0)}
-					</span>
-				</div>
-				<div className="mt-1 h-2 w-full rounded-full bg-gray-200">
-					<div
-						className={`h-2 rounded-full transition-all duration-300 ${
-							metrics.performanceScore >= 90
-								? "bg-green-500"
-								: metrics.performanceScore >= 70
-									? "bg-yellow-500"
-									: "bg-red-500"
-						}`}
-						style={{ width: `${metrics.performanceScore}%` }}
-					/>
-				</div>
-			</div>
-
-			{/* Core Web Vitals */}
-			<div className="mb-4 grid grid-cols-2 gap-4">
-				<div>
-					<h4 className="mb-2 font-medium">Core Web Vitals</h4>
-					<div className="space-y-1 text-sm">
-						{metrics.lcp && <div>LCP: {metrics.lcp.toFixed(0)}ms</div>}
-						{metrics.fid && <div>FID: {metrics.fid.toFixed(0)}ms</div>}
-						{metrics.cls && <div>CLS: {metrics.cls.toFixed(3)}</div>}
-					</div>
-				</div>
-
-				<div>
-					<h4 className="mb-2 font-medium">Custom Metrics</h4>
-					<div className="space-y-1 text-sm">
-						<div>Render: {metrics.componentRenderTime.toFixed(2)}ms</div>
-						<div>Memory: {formatBytes(metrics.memoryUsage)}</div>
-						{metrics.bundleLoadTime > 0 && <div>Bundle: {metrics.bundleLoadTime.toFixed(0)}ms</div>}
-					</div>
-				</div>
-			</div>
-
-			{/* Advanced metrics */}
-			{showAdvanced && (
-				<div>
-					<h4 className="mb-2 font-medium">Advanced Metrics</h4>
-					<div className="space-y-1 text-sm">
-						<div>Average Render Time: {(averageMetrics.componentRenderTime || 0).toFixed(2)}ms</div>
-						<div>Average Memory: {formatBytes(averageMetrics.memoryUsage || 0)}</div>
-						<div>Average Score: {(averageMetrics.performanceScore || 0).toFixed(0)}</div>
-					</div>
-				</div>
-			)}
-		</div>
-	)
-}
-
-export default PerformanceMonitor